diff --git a/.env b/.env
new file mode 100644
index 0000000..0db2203
--- /dev/null
+++ b/.env
@@ -0,0 +1,16 @@
+PUBLIC_URL=http://localhost:3000/
+PORT=3000
+PRIMARY_APP_API_URL=https://preview.keenthemes.com/metronic8/laravel/api
+REACT_APP_BASE_LAYOUT_CONFIG_KEY='metronic-react-demo1-8150'
+REACT_APP_API_URL=https://preview.keenthemes.com/metronic8/laravel/api
+REACT_APP_VERSION=v8.1.5
+REACT_APP_THEME_NAME=WrenchBoard
+REACT_APP_THEME_DEMO=dashboard
+REACT_APP_BOOTSTRAP_DOCS_LINK=https://getbootstrap.com/docs/5.0
+REACT_APP_SASS_PATH=src/_metronic/assets/sass/core/components
+REACT_APP_SASS_VARIABLES_PATH=src/_metronic/assets/sass/core/components/_variables.scss
+REACT_APP_PURCHASE_URL=https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469
+REACT_APP_PREVIEW_URL=https://preview.keenthemes.com/metronic8/react/demo1/
+REACT_APP_PREVIEW_REACT_URL=https://preview.keenthemes.com/metronic8/react
+REACT_APP_PREVIEW_DOCS_URL=https://preview.keenthemes.com/metronic8/react/docs
+REACT_APP_THEME_API_URL=https://preview.keenthemes.com/theme-api/api
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index bffb357..0000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "extends": "next/core-web-vitals"
-}
diff --git a/.gitignore b/.gitignore
index c87c9b3..d31b5eb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,33 +4,29 @@
/node_modules
/.pnp
.pnp.js
-
+.idea
# testing
/coverage
-# next.js
-/.next/
-/out/
-
# production
/build
# misc
.DS_Store
-*.pem
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
-# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
-.pnpm-debug.log*
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.idea/fleet-float.iml b/.idea/fleet-float.iml
deleted file mode 100644
index c956989..0000000
--- a/.idea/fleet-float.iml
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
deleted file mode 100644
index 03d9549..0000000
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
-
-
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
index c157dc8..1254267 100644
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -2,7 +2,7 @@
-
+
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..77599e6
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+node_modules
+build
+coverage
+.vscode
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..f04daaf
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,16 @@
+{
+ "printWidth": 100,
+ "trailingComma": "es5",
+ "tabWidth": 2,
+ "semi": false,
+ "singleQuote": true,
+ "bracketSpacing": false,
+ "jsxBracketSameLine": false,
+ "arrowParens": "always",
+ "endOfLine": "auto",
+ "jsxSingleQuote": true,
+ "proseWrap": "preserve",
+ "quoteProps": "as-needed",
+ "useTabs": false,
+ "htmlWhitespaceSensitivity": "css"
+}
diff --git a/README.md b/README.md
index b12f3e3..b58e0af 100644
--- a/README.md
+++ b/README.md
@@ -1,34 +1,46 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Getting Started with Create React App
-## Getting Started
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-First, run the development server:
+## Available Scripts
-```bash
-npm run dev
-# or
-yarn dev
-```
+In the project directory, you can run:
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### `yarn start`
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
-To learn more about Next.js, take a look at the following resources:
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+To learn React, check out the [React documentation](https://reactjs.org/).
diff --git a/components/Analytics/Customers/CustomersDetails.js b/components/Analytics/Customers/CustomersDetails.js
deleted file mode 100644
index 6a30c87..0000000
--- a/components/Analytics/Customers/CustomersDetails.js
+++ /dev/null
@@ -1,575 +0,0 @@
-import * as React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Tooltip from "@mui/material/Tooltip";
-import DeleteIcon from "@mui/icons-material/Delete";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import Checkbox from "@mui/material/Checkbox";
-
-const label = { inputProps: { "aria-label": "Checkbox demo" } };
-
-function CustomersDetail(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-CustomersDetail.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(
- name,
- userName,
- image,
- email,
- rolls,
- status,
- badgeClass,
- projects
-) {
- return {
- name,
- userName,
- image,
- email,
- rolls,
- status,
- badgeClass,
- projects,
- };
-}
-
-const rows = [
- createData(
- "Evangelina Mcclain",
- "@jstevenson5c",
- "/images/user1.png",
- "jordansteve@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "165"
- ),
- createData(
- "Candice Munoz",
- "@candice3unoz",
- "/images/user2.png",
- "candicemunoz@gmail.com",
- "Administrator",
- "Active",
- "successBadge",
- "120"
- ),
- createData(
- "Mike Mcclain",
- "@mike4mcclain",
- "/images/user3.png",
- "mikemcclain@gmail.com",
- "Contributor",
- "Active",
- "successBadge",
- "220"
- ),
- createData(
- "Bernard Langley",
- "@bernardlangley",
- "/images/user4.png",
- "bernardlangley@gmail.com",
- "Agent",
- "Deactive",
- "dangerBadge",
- "122"
- ),
- createData(
- "Kristie Hall",
- "@kristie7hall",
- "/images/user5.png",
- "kristiehall@gmail.com",
- "Contributor",
- "Active",
- "successBadge",
- "360"
- ),
- createData(
- "Bolton Obrien",
- "@bolton4obrien",
- "/images/user6.png",
- "boltonobrien@gmail.com",
- "Administrator",
- "Active",
- "successBadge",
- "250"
- ),
- createData(
- "Dee Alvarado",
- "@dee3alvarado",
- "/images/user7.png",
- "deealvarado@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "140"
- ),
- createData(
- "Cervantes Kramer",
- "@cervantes4kramer",
- "/images/user8.png",
- "cervantes4kramer@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "345"
- ),
- createData(
- "Dejesus Michael",
- "@dejesus1michael",
- "/images/user9.png",
- "dejesusmichael@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "323"
- ),
- createData(
- "Alissa Nelson",
- "@alissa1nelson",
- "/images/user10.png",
- "alissa1nelson@gmail.com",
- "Agent",
- "Deactive",
- "dangerBadge",
- "451"
- ),
- createData(
- "Milton",
- "@milton",
- "/images/user11.png",
- "milton@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "432"
- ),
- createData(
- "Claude",
- "@claude",
- "/images/user12.png",
- "claude@gmail.com",
- "Agent",
- "Deactive",
- "dangerBadge",
- "543"
- ),
- createData(
- "Joshua",
- "@joshua",
- "/images/user13.png",
- "joshua@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "543"
- ),
- createData(
- "Harvey",
- "@harvey",
- "/images/user14.png",
- "harvey@gmail.com",
- "Agent",
- "Deactive",
- "dangerBadge",
- "432"
- ),
- createData(
- "Antonio",
- "@antonio",
- "/images/user15.png",
- "antonio@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "765"
- ),
- createData(
- "Julian",
- "@julian",
- "/images/user16.png",
- "julian@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "678"
- ),
- createData(
- "Harold",
- "@harold",
- "/images/user17.png",
- "harold@gmail.com",
- "Agent",
- "Deactive",
- "dangerBadge",
- "165"
- ),
- createData(
- "Kingston",
- "@kingston",
- "/images/user18.png",
- "kingston@info.com",
- "Agent",
- "Active",
- "successBadge",
- "165"
- ),
-].sort((a, b) => (a.name < b.name ? -1 : 1));
-
-export default function CustomersDetails() {
- // Table
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
- Customers Details
-
-
-
-
-
-
-
-
- Name
-
-
-
- Email
-
-
-
- Rolls
-
-
-
- Status
-
-
-
- Projects
-
-
-
- Action
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
-
-
-
-
- {row.name}
-
-
-
- {row.userName}
-
-
-
-
-
-
- {row.email}
-
-
-
- {row.rolls}
-
-
-
- {row.status}
-
-
-
- {row.projects}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/Analytics/Customers/NetIncome.js b/components/Analytics/Customers/NetIncome.js
deleted file mode 100644
index b389cec..0000000
--- a/components/Analytics/Customers/NetIncome.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { BarChart, Bar, XAxis, Tooltip, ResponsiveContainer } from "recharts";
-
-const data = [
- {
- name: "Sat",
- income: 24,
- },
- {
- name: "Sun",
- income: 13,
- },
- {
- name: "Mon",
- income: 98,
- },
- {
- name: "Tue",
- income: 39,
- },
- {
- name: "Wed",
- income: 48,
- },
- {
- name: "Thu",
- income: 38,
- },
- {
- name: "Fri",
- income: 43,
- },
-];
-
-const NetIncome = () => {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
- Net Income
-
-
- $438.5k
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default NetIncome;
diff --git a/components/Analytics/Customers/NewSessions.js b/components/Analytics/Customers/NewSessions.js
deleted file mode 100644
index 59dc5a9..0000000
--- a/components/Analytics/Customers/NewSessions.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from "react";
-import {
- BarChart,
- Bar,
- XAxis,
- Tooltip,
- ResponsiveContainer,
-} from "recharts";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-
-const data = [
- {
- name: "Sat",
- visited: 2400,
- },
- {
- name: "Sun",
- visited: 1398,
- },
- {
- name: "Mon",
- visited: 9800,
- },
- {
- name: "Tue",
- visited: 3908,
- },
- {
- name: "Wed",
- visited: 4800,
- },
- {
- name: "Thu",
- visited: 3800,
- },
- {
- name: "Fri",
- visited: 4300,
- },
-];
-
-const NewSessions = () => {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
- New Sessions
-
-
- 1,500
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default NewSessions;
diff --git a/components/Analytics/Customers/VisitsByDay.js b/components/Analytics/Customers/VisitsByDay.js
deleted file mode 100644
index 1019cf7..0000000
--- a/components/Analytics/Customers/VisitsByDay.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from "react";
-import {
- BarChart,
- Bar,
- XAxis,
- Tooltip,
- ResponsiveContainer,
-} from "recharts";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-
-const data = [
- {
- name: "Sat",
- visited: 2400,
- },
- {
- name: "Sun",
- visited: 1398,
- },
- {
- name: "Mon",
- visited: 9800,
- },
- {
- name: "Tue",
- visited: 3908,
- },
- {
- name: "Wed",
- visited: 4800,
- },
- {
- name: "Thu",
- visited: 3800,
- },
- {
- name: "Fri",
- visited: 4300,
- },
-];
-
-const VisitsByDay = () => {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
- Visits By Day
-
-
- 1,802
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default VisitsByDay;
diff --git a/components/Analytics/Reports/AvarageReport/AvarageReportList.module.css b/components/Analytics/Reports/AvarageReport/AvarageReportList.module.css
deleted file mode 100644
index fded2c4..0000000
--- a/components/Analytics/Reports/AvarageReport/AvarageReportList.module.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.totalRevenueList {
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 1px solid #F7FAFF;
- margin-bottom: 13px;
- padding-bottom: 13px;
-}
-.totalRevenueList:last-child {
- border-bottom: none;
- margin-bottom: 0;
- padding-bottom: 0;
-}
-.totalRevenueList p {
- font-size: 13px;
- margin: 0;
-}
-.totalRevenueList .rightContent {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.totalRevenueList .rightContent h5 {
- margin: 0 15px 0 0;
- font-size: 12px;
- color: #5B5B98;
-}
-.totalRevenueList .rightContent i {
- position: relative;
- top: 2px;
-}
-
-/* For dark mode */
-[class="dark"] .totalRevenueList {
- border-bottom: 1px solid var(--borderColor);
-}
\ No newline at end of file
diff --git a/components/Analytics/Reports/AvarageReport/RevenueChart.js b/components/Analytics/Reports/AvarageReport/RevenueChart.js
deleted file mode 100644
index be53021..0000000
--- a/components/Analytics/Reports/AvarageReport/RevenueChart.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { Component } from 'react';
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class RevenueChart extends Component {
- constructor(props) {
- super(props);
- this.state = {
- series: [65],
- options: {
- plotOptions: {
- radialBar: {
- hollow: {
- size: "50%",
- },
- track: {
- background: "#ECEFF7",
- },
- dataLabels: {
- name: {
- show: true,
- fontSize: '12px',
- color: '#5B5B98',
- },
- value: {
- offsetY: 3,
- color: "#00B69B",
- fontSize: "16px",
- fontWeight: "500",
- },
- },
- },
- },
- labels: ['Revenue'],
- fill: {
- opacity: 1,
- colors: ["#757FEF"],
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
- >
- );
- }
-}
-
-export default RevenueChart;
diff --git a/components/Analytics/Reports/AvarageReport/index.js b/components/Analytics/Reports/AvarageReport/index.js
deleted file mode 100644
index 4465ac6..0000000
--- a/components/Analytics/Reports/AvarageReport/index.js
+++ /dev/null
@@ -1,193 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import RevenueChart from "./RevenueChart";
-import styles from "@/components/Analytics/Reports/AvarageReport/AvarageReportList.module.css";
-
-const AvarageReport = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Avarage Report
-
-
-
-
-
-
-
-
-
-
- {/* RevenueChart */}
-
-
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
-
- >
- );
-};
-
-export default AvarageReport;
diff --git a/components/Analytics/Reports/BrowserUsedAndTrafficReports.js b/components/Analytics/Reports/BrowserUsedAndTrafficReports.js
deleted file mode 100644
index a9ee629..0000000
--- a/components/Analytics/Reports/BrowserUsedAndTrafficReports.js
+++ /dev/null
@@ -1,621 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-
-function BrowserUsedAndTrafficReport(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-BrowserUsedAndTrafficReport.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(
- channel,
- sessions,
- sessionsProgress,
- prevPeriod,
- prevPeriodProgress,
- transactions,
- transactionsProgress,
- conRate,
- bounceRate,
- change,
- iconName,
- badgeClass
-) {
- return {
- channel,
- sessions,
- sessionsProgress,
- prevPeriod,
- prevPeriodProgress,
- transactions,
- transactionsProgress,
- conRate,
- bounceRate,
- change,
- iconName,
- badgeClass,
- };
-}
-
-const rows = [
- createData(
- "Organic Search",
- "10853",
- "(52%)",
- "566",
- "(52%)",
- "566",
- "(52%)",
- "3.2%",
- "57.8%",
- "52.80%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Direct",
- "10844",
- "(50%)",
- "666",
- "(50%)",
- "766",
- "(50%)",
- "2.2%",
- "20.8%",
- "55.99%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Referal",
- "20844",
- "(60%)",
- "754",
- "(60%)",
- "899",
- "(60%)",
- "1.2%",
- "60.8%",
- "60.99%",
- "ri-arrow-down-s-fill",
- "dangerBadge"
- ),
- createData(
- "Email",
- "15844",
- "(50%)",
- "764",
- "(50%)",
- "755",
- "(50%)",
- "4.2%",
- "30.8%",
- "50.99%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Social",
- "12844",
- "(50%)",
- "764",
- "(50%)",
- "755",
- "(50%)",
- "5.2%",
- "35.8%",
- "50.99%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Chrome",
- "5853",
- "(52%)",
- "466",
- "(52%)",
- "566",
- "(52%)",
- "6.2%",
- "40.8%",
- "52.80%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Safari",
- "2844",
- "(50%)",
- "766",
- "(50%)",
- "666",
- "(50%)",
- "3.2%",
- "55.8%",
- "55.00%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Edge",
- "1844",
- "(60%)",
- "454",
- "(60%)",
- "399",
- "(60%)",
- "7.2%",
- "10.8%",
- "60.00%",
- "ri-arrow-down-s-fill",
- "dangerBadge"
- ),
- createData(
- "Firefox",
- "15844",
- "(55%)",
- "564",
- "(55%)",
- "455",
- "(55%)",
- "4.2%",
- "20.8%",
- "55.00%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Opera",
- "11844",
- "(50%)",
- "864",
- "(50%)",
- "655",
- "(50%)",
- "3.2%",
- "32.8%",
- "50.00%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
-].sort((a, b) => (a.channel < b.channel ? -1 : 1));
-
-const BrowserUsedAndTrafficReports = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- // Table
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(7);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
- Browser Used & Traffic Reports
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Channel
-
-
-
- Sessions
-
-
-
- Prev.Period
-
-
-
- Transactions
-
-
-
- Con.Rate
-
-
-
- Bounce Rate
-
-
-
- % Change
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
- {row.channel}
-
-
-
- {row.sessions}{" "}
-
- {row.sessionsProgress}
-
-
-
-
- {row.prevPeriod}{" "}
-
- {row.prevPeriodProgress}
-
-
-
-
- {row.transactions}{" "}
-
- {row.transactionsProgress}
-
-
-
-
- {row.conRate}
-
-
-
- {row.bounceRate}
-
-
-
-
- {row.change}{" "}
-
-
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default BrowserUsedAndTrafficReports;
diff --git a/components/Apps/Calendar/Events.js b/components/Apps/Calendar/Events.js
deleted file mode 100644
index de64ca7..0000000
--- a/components/Apps/Calendar/Events.js
+++ /dev/null
@@ -1,47 +0,0 @@
-const events = [
- { title: "All Day Event", start: getDate("YEAR-MONTH-01") },
- {
- title: "Rendezvous",
- start: getDate("YEAR-MONTH-07"),
- end: getDate("YEAR-MONTH-10")
- },
- {
- groupId: "999",
- title: "Repeating Event",
- start: getDate("YEAR-MONTH-09T16:00:00+00:00")
- },
- {
- groupId: "999",
- title: "Repeating Event",
- start: getDate("YEAR-MONTH-16T16:00:00+00:00")
- },
- {
- title: "Dontiste",
- start: "YEAR-MONTH-17",
- end: getDate("YEAR-MONTH-19")
- },
- {
- title: "Consultation",
- start: getDate("YEAR-MONTH-18T10:30:00+00:00"),
- end: getDate("YEAR-MONTH-18T12:30:00+00:00")
- },
- { title: "Visit", start: getDate("YEAR-MONTH-18T12:00:00+00:00") },
- { title: "maladie", start: getDate("YEAR-MONTH-19T07:00:00+00:00") },
- { title: "Meeting", start: getDate("YEAR-MONTH-18T14:30:00+00:00") },
- { title: "controlle", start: getDate("YEAR-MONTH-18T17:30:00+00:00") },
- { title: "finish", start: getDate("YEAR-MONTH-18T20:00:00+00:00") }
-];
-
-function getDate(dayString) {
- const today = new Date();
- const year = today.getFullYear().toString();
- let month = (today.getMonth() + 1).toString();
-
- if (month.length === 1) {
- month = "0" + month;
- }
-
- return dayString.replace("YEAR", year).replace("MONTH", month);
-}
-
-export default events;
diff --git a/components/Apps/Chat/ChatBox.js b/components/Apps/Chat/ChatBox.js
deleted file mode 100644
index 6b81d83..0000000
--- a/components/Apps/Chat/ChatBox.js
+++ /dev/null
@@ -1,599 +0,0 @@
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
-import VideocamIcon from "@mui/icons-material/Videocam";
-import CallIcon from "@mui/icons-material/Call";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemText from "@mui/material/ListItemText";
-import ReplyIcon from "@mui/icons-material/Reply";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import SendIcon from "@mui/icons-material/Send";
-
-const ChatBox = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
- {/* Header */}
-
-
-
-
-
- Laurent Perrier
-
-
- Active
- Now
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Chat List */}
-
- {/* Left Chat */}
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Pharetra ligula non varius curabitur etiam malesuada. Congue
- eget luctus aliquet consectetur.
-
-
- 19:04
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Right Chat */}
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
- 19:04
-
-
-
-
-
-
-
- {/* Left Chat */}
-
-
-
-
-
- Lorem ipsum dolor sit amet 🔥! Lorem ipsum dolor sit amet,
- consectetur adipiscing elit.
-
-
- 19:04
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Right Chat */}
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem
- ipsum dolor sit
-
-
-
- 19:04
-
-
-
-
-
-
-
- {/* Left Chat */}
-
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem
- accusantium doloremque laudantium, totam rem aperiam, eaque
- ipsa quae ab illo inventore veritatis et quasi architecto
- beatae vitae dicta sunt explicabo.
-
-
- 19:04
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Footer */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default ChatBox;
diff --git a/components/Apps/Chat/ChatBoxThree.js b/components/Apps/Chat/ChatBoxThree.js
deleted file mode 100644
index 32cd2a4..0000000
--- a/components/Apps/Chat/ChatBoxThree.js
+++ /dev/null
@@ -1,599 +0,0 @@
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
-import VideocamIcon from "@mui/icons-material/Videocam";
-import CallIcon from "@mui/icons-material/Call";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemText from "@mui/material/ListItemText";
-import ReplyIcon from "@mui/icons-material/Reply";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import SendIcon from "@mui/icons-material/Send";
-
-const ChatBoxThree = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
- {/* Header */}
-
-
-
-
-
- Bernard Langley
-
-
- Active
- Now
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Chat List */}
-
- {/* Left Chat */}
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Pharetra ligula non varius curabitur etiam malesuada. Congue
- eget luctus aliquet consectetur.
-
-
- 19:04
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Right Chat */}
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
- 19:04
-
-
-
-
-
-
-
- {/* Left Chat */}
-
-
-
-
-
- Lorem ipsum dolor sit amet 🔥! Lorem ipsum dolor sit amet,
- consectetur adipiscing elit.
-
-
- 19:04
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Right Chat */}
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem
- ipsum dolor sit
-
-
-
- 19:04
-
-
-
-
-
-
-
- {/* Left Chat */}
-
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem
- accusantium doloremque laudantium, totam rem aperiam, eaque
- ipsa quae ab illo inventore veritatis et quasi architecto
- beatae vitae dicta sunt explicabo.
-
-
- 19:04
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Footer */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default ChatBoxThree;
diff --git a/components/Apps/Chat/ChatBoxTwo.js b/components/Apps/Chat/ChatBoxTwo.js
deleted file mode 100644
index 436142d..0000000
--- a/components/Apps/Chat/ChatBoxTwo.js
+++ /dev/null
@@ -1,599 +0,0 @@
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
-import VideocamIcon from "@mui/icons-material/Videocam";
-import CallIcon from "@mui/icons-material/Call";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemText from "@mui/material/ListItemText";
-import ReplyIcon from "@mui/icons-material/Reply";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import SendIcon from "@mui/icons-material/Send";
-
-const ChatBoxTwo = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
- {/* Header */}
-
-
-
-
-
- Nunez Faulkner
-
-
- Active
- Now
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Chat List */}
-
- {/* Left Chat */}
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Pharetra ligula non varius curabitur etiam malesuada. Congue
- eget luctus aliquet consectetur.
-
-
- 19:04
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Right Chat */}
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
- 19:04
-
-
-
-
-
-
-
- {/* Left Chat */}
-
-
-
-
-
- Lorem ipsum dolor sit amet 🔥! Lorem ipsum dolor sit amet,
- consectetur adipiscing elit.
-
-
- 19:04
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Right Chat */}
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem
- ipsum dolor sit
-
-
-
- 19:04
-
-
-
-
-
-
-
- {/* Left Chat */}
-
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem
- accusantium doloremque laudantium, totam rem aperiam, eaque
- ipsa quae ab illo inventore veritatis et quasi architecto
- beatae vitae dicta sunt explicabo.
-
-
- 19:04
-
-
- {/* Replay Dropdown */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Footer */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default ChatBoxTwo;
diff --git a/components/Apps/FileManager/AllAssets.js b/components/Apps/FileManager/AllAssets.js
deleted file mode 100644
index f706b4b..0000000
--- a/components/Apps/FileManager/AllAssets.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-
-const AssetsData = [
- {
- id: "1",
- icon: "/images/folder.png",
- title: "Projects",
- totalFiles: "387 Files",
- filesSize: "4.5 GB",
- },
- {
- id: "2",
- icon: "/images/folder.png",
- title: "Documents",
- totalFiles: "1572 Files",
- filesSize: "7.5 GB",
- },
- {
- id: "3",
- icon: "/images/folder.png",
- title: "Media",
- totalFiles: "1241 Files",
- filesSize: "2.8 GB",
- },
- {
- id: "4",
- icon: "/images/folder.png",
- title: "Applications",
- totalFiles: "2487 Files",
- filesSize: "4.5 GB",
- },
- {
- id: "5",
- icon: "/images/folder.png",
- title: "ET Template",
- totalFiles: "60 Files",
- filesSize: "8 GB",
- },
- {
- id: "6",
- icon: "/images/folder.png",
- title: "React Template",
- totalFiles: "120 Files",
- filesSize: "6.5 GB",
- },
- {
- id: "7",
- icon: "/images/folder.png",
- title: "Material UI",
- totalFiles: "40 Files",
- filesSize: "5.5 GB",
- },
- {
- id: "8",
- icon: "/images/folder.png",
- title: "WP Themes",
- totalFiles: "2487 Files",
- filesSize: "4.5 GB",
- },
- {
- id: "9",
- icon: "/images/folder.png",
- title: "Personal Photos",
- totalFiles: "2587 Files",
- filesSize: "14 GB",
- },
- {
- id: "10",
- icon: "/images/folder.png",
- title: "Mobile Apps",
- totalFiles: "55 Files",
- filesSize: "4.5 GB",
- },
- {
- id: "11",
- icon: "/images/folder.png",
- title: "Important Files",
- totalFiles: "200 Files",
- filesSize: "6.5 GB",
- },
- {
- id: "12",
- icon: "/images/folder.png",
- title: "Angular Template",
- totalFiles: "340 Files",
- filesSize: "7.5 GB",
- },
-];
-
-const AllAssets = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
- {AssetsData.map((asset) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {asset.title}
-
-
-
-
- {asset.totalFiles}
- {asset.filesSize}
-
-
-
- ))}
-
- >
- );
-};
-
-export default AllAssets;
diff --git a/components/Apps/FileManager/AllProjects.js b/components/Apps/FileManager/AllProjects.js
deleted file mode 100644
index 921b9f7..0000000
--- a/components/Apps/FileManager/AllProjects.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-
-const ProjectsData = [
- {
- id: "1",
- icon: "/images/folder.png",
- title: "ET Template",
- totalFiles: "60 Files",
- filesSize: "8 GB",
- },
- {
- id: "2",
- icon: "/images/folder.png",
- title: "React Template",
- totalFiles: "120 Files",
- filesSize: "6.5 GB",
- },
- {
- id: "3",
- icon: "/images/folder.png",
- title: "Material UI",
- totalFiles: "40 Files",
- filesSize: "5.5 GB",
- },
- {
- id: "4",
- icon: "/images/folder.png",
- title: "WP Themes",
- totalFiles: "2487 Files",
- filesSize: "4.5 GB",
- },
- {
- id: "5",
- icon: "/images/folder.png",
- title: "Personal Photos",
- totalFiles: "2587 Files",
- filesSize: "14 GB",
- },
- {
- id: "6",
- icon: "/images/folder.png",
- title: "Mobile Apps",
- totalFiles: "55 Files",
- filesSize: "4.5 GB",
- },
- {
- id: "7",
- icon: "/images/folder.png",
- title: "Important Files",
- totalFiles: "200 Files",
- filesSize: "6.5 GB",
- },
- {
- id: "8",
- icon: "/images/folder.png",
- title: "Angular Template",
- totalFiles: "340 Files",
- filesSize: "7.5 GB",
- },
- {
- id: "9",
- icon: "/images/folder.png",
- title: "Projects",
- totalFiles: "387 Files",
- filesSize: "4.5 GB",
- },
- {
- id: "10",
- icon: "/images/folder.png",
- title: "Documents",
- totalFiles: "1572 Files",
- filesSize: "7.5 GB",
- },
- {
- id: "11",
- icon: "/images/folder.png",
- title: "Media",
- totalFiles: "1241 Files",
- filesSize: "2.8 GB",
- },
- {
- id: "12",
- icon: "/images/folder.png",
- title: "Applications",
- totalFiles: "2487 Files",
- filesSize: "4.5 GB",
- },
-];
-
-const AllProjects = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
- {ProjectsData.map((project) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {project.title}
-
-
-
-
- {project.totalFiles}
- {project.filesSize}
-
-
-
- ))}
-
- >
- );
-};
-
-export default AllProjects;
diff --git a/components/Apps/FileManager/AllRecentFiles.js b/components/Apps/FileManager/AllRecentFiles.js
deleted file mode 100644
index 05c975a..0000000
--- a/components/Apps/FileManager/AllRecentFiles.js
+++ /dev/null
@@ -1,469 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import DeleteIcon from "@mui/icons-material/Delete";
-import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import Backdrop from "@mui/material/Backdrop";
-import Button from "@mui/material/Button";
-import Fade from "@mui/material/Fade";
-import Modal from "@mui/material/Modal";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-
-// Create Folder Modal Style
-const style = {
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- maxWidth: 500,
- width: "100%",
- bgcolor: "background.paper",
- boxShadow: 24,
- borderRadius: "8px",
-};
-
-function createData(name, icon, owner, fileSize, listedDate, fileItem) {
- return { name, icon, owner, fileSize, listedDate, fileItem };
-}
-
-const rows = [
- createData(
- "Product UI/UX Design",
- "/images/folder.png",
- "Danielle Thompson",
- "0.7 GB",
- "Mar 08, 2021",
- "02"
- ),
- createData(
- "App Design & Development",
- "/images/folder.png",
- "ET Themes",
- "521 MB",
- "Feb 13, 2021",
- "01"
- ),
- createData(
- "Ubold Sketch Design",
- "/images/folder.png",
- "Gary Coley",
- "64.2 MB",
- "Dec 18, 2020",
- "02"
- ),
- createData(
- "Annualreport.pdf",
- "/images/folder.png",
- "Cooper Sharwood",
- "12.5 GB",
- "Nov 25, 2020",
- "05"
- ),
- createData(
- "Wireframes",
- "/images/folder.png",
- "Jasper Rigg",
- "8.3 MB",
- "Nov 25, 2019",
- "03"
- ),
- createData(
- "App Design",
- "/images/folder.png",
- "ET Agency",
- "5 GB",
- "Jan 08, 2022",
- "15"
- ),
- createData(
- "Web Design & Development",
- "/images/folder.png",
- "ET Templates",
- "13 GB",
- "Jan 13, 2022",
- "90"
- ),
- createData(
- "React Template",
- "/images/folder.png",
- "ET Company",
- "100 GB",
- "Dec 18, 2021",
- "120"
- ),
- createData(
- "Material Template",
- "/images/folder.png",
- "Cooper Sharwood",
- "12.5 GB",
- "Nov 25, 2020",
- "05"
- ),
- createData(
- "Angular Template",
- "/images/folder.png",
- "Jasper Rigg",
- "8.3 MB",
- "Nov 25, 2019",
- "03"
- ),
-];
-
-const AllRecentFiles = () => {
- // Create Folder Modal
- const [open, setOpen] = React.useState(false);
- const handleOpen = () => setOpen(true);
- const handleClose = () => setOpen(false);
-
- // Form
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
-
- Recent Files
-
-
-
- {" "}
- Create Folder
-
-
-
-
-
-
-
-
- Name
-
-
-
- Owner
-
-
-
- File Size
-
-
-
- Listed Date
-
-
-
- File Item
-
-
-
- Actions
-
-
-
-
-
- {rows.map((row) => (
-
-
-
-
-
- {row.name}
-
-
-
-
-
- {row.owner}
-
-
-
- {row.fileSize}
-
-
-
- {row.listedDate}
-
-
-
- {row.fileItem}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
-
- {/* Create Folder Modal */}
-
-
-
-
-
- Create Folder
-
-
-
-
-
-
-
-
-
-
-
-
- Folder Name
-
-
-
-
-
-
- {" "}
- Add Folder
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default AllRecentFiles;
diff --git a/components/Apps/FileManager/DocumentsFiles.js b/components/Apps/FileManager/DocumentsFiles.js
deleted file mode 100644
index 6922a2f..0000000
--- a/components/Apps/FileManager/DocumentsFiles.js
+++ /dev/null
@@ -1,362 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import IconButton from "@mui/material/IconButton";
-import Backdrop from "@mui/material/Backdrop";
-import Button from "@mui/material/Button";
-import Fade from "@mui/material/Fade";
-import Modal from "@mui/material/Modal";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-
-// Create Files Modal Style
-const style = {
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- maxWidth: 500,
- width: "100%",
- bgcolor: "background.paper",
- boxShadow: 24,
- borderRadius: "8px",
-};
-
-const FilesData = [
- {
- id: "1",
- icon: "/images/file1.png",
- title: "sketch-design.zip",
- },
- {
- id: "2",
- icon: "/images/file2.png",
- title: "Compile.png",
- },
- {
- id: "3",
- icon: "/images/file3.png",
- title: "Integrations.pdf",
- },
- {
- id: "4",
- icon: "/images/file4.png",
- title: "contact @32",
- },
- {
- id: "5",
- icon: "/images/file5.png",
- title: "app-Design.doc",
- },
- {
- id: "6",
- icon: "/images/file6.png",
- title: "image02.png",
- },
- {
- id: "7",
- icon: "/images/file7.png",
- title: "Ubold-sketch.doc",
- },
- {
- id: "8",
- icon: "/images/file8.png",
- title: "Annualreport.txt",
- },
- {
- id: "9",
- icon: "/images/file9.png",
- title: "Wireframes.xl4",
- },
- {
- id: "10",
- icon: "/images/file10.png",
- title: "contact @32.jpg",
- },
- {
- id: "11",
- icon: "/images/file1.png",
- title: "sketch-design.zip",
- },
- {
- id: "12",
- icon: "/images/file2.png",
- title: "Compile.png",
- },
- {
- id: "13",
- icon: "/images/file3.png",
- title: "Integrations.pdf",
- },
- {
- id: "14",
- icon: "/images/file4.png",
- title: "contact @32",
- },
- {
- id: "15",
- icon: "/images/file5.png",
- title: "app-Design.doc",
- },
- {
- id: "16",
- icon: "/images/file6.png",
- title: "image02.png",
- },
- {
- id: "17",
- icon: "/images/file7.png",
- title: "Ubold-sketch.doc",
- },
- {
- id: "18",
- icon: "/images/file8.png",
- title: "Annualreport.txt",
- },
- {
- id: "19",
- icon: "/images/file9.png",
- title: "Wireframes.xl4",
- },
- {
- id: "20",
- icon: "/images/file10.png",
- title: "contact @32.jpg",
- },
- {
- id: "21",
- icon: "/images/file5.png",
- title: "app-Design.doc",
- },
- {
- id: "22",
- icon: "/images/file6.png",
- title: "image02.png",
- },
- {
- id: "23",
- icon: "/images/file7.png",
- title: "Ubold-sketch.doc",
- },
- {
- id: "24",
- icon: "/images/file8.png",
- title: "Annualreport.txt",
- },
-];
-
-const DocumentsFiles = () => {
- // Create Files Modal
- const [open, setOpen] = React.useState(false);
- const handleOpen = () => setOpen(true);
- const handleClose = () => setOpen(false);
-
- // Form
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
-
- Documents
-
-
-
- {" "}
- Create Files
-
-
-
-
- {FilesData.map((file) => (
-
-
-
-
- {file.title}
-
-
-
- ))}
-
-
-
- {/* Create Files Modal */}
-
-
-
-
-
- Create Folder
-
-
-
-
-
-
-
-
-
-
-
-
- Files Name
-
-
-
-
-
-
-
- {" "}
- Add Files
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default DocumentsFiles;
diff --git a/components/Apps/FileManager/Files.js b/components/Apps/FileManager/Files.js
deleted file mode 100644
index fa9d520..0000000
--- a/components/Apps/FileManager/Files.js
+++ /dev/null
@@ -1,291 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import IconButton from "@mui/material/IconButton";
-import Backdrop from "@mui/material/Backdrop";
-import Button from "@mui/material/Button";
-import Fade from "@mui/material/Fade";
-import Modal from "@mui/material/Modal";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-
-// Create Files Modal Style
-const style = {
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- maxWidth: 500,
- width: "100%",
- bgcolor: "background.paper",
- boxShadow: 24,
- borderRadius: "8px",
-};
-
-const FilesData = [
- {
- id: "1",
- icon: "/images/file1.png",
- title: "sketch-design.zip",
- },
- {
- id: "2",
- icon: "/images/file2.png",
- title: "Compile.png",
- },
- {
- id: "3",
- icon: "/images/file3.png",
- title: "Integrations.pdf",
- },
- {
- id: "4",
- icon: "/images/file4.png",
- title: "contact @32",
- },
- {
- id: "5",
- icon: "/images/file5.png",
- title: "app-Design.doc",
- },
- {
- id: "6",
- icon: "/images/file6.png",
- title: "image02.png",
- },
- {
- id: "7",
- icon: "/images/file7.png",
- title: "Ubold-sketch.doc",
- },
- {
- id: "8",
- icon: "/images/file8.png",
- title: "Annualreport.txt",
- },
- {
- id: "9",
- icon: "/images/file9.png",
- title: "Wireframes.xl4",
- },
- {
- id: "10",
- icon: "/images/file10.png",
- title: "contact @32.jpg",
- },
-];
-
-const Files = () => {
- // Create Files Modal
- const [open, setOpen] = React.useState(false);
- const handleOpen = () => setOpen(true);
- const handleClose = () => setOpen(false);
-
- // Form
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
-
- Files
-
-
-
- {" "}
- Create Files
-
-
-
-
- {FilesData.map((file) => (
-
-
-
-
- {file.title}
-
-
-
- ))}
-
-
-
- {/* Create Files Modal */}
-
-
-
-
-
- Create Folder
-
-
-
-
-
-
-
-
-
-
-
-
- Files Name
-
-
-
-
-
-
-
- {" "}
- Add Files
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Files;
diff --git a/components/Apps/FileManager/ImportantFiles.js b/components/Apps/FileManager/ImportantFiles.js
deleted file mode 100644
index d03e613..0000000
--- a/components/Apps/FileManager/ImportantFiles.js
+++ /dev/null
@@ -1,470 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import DeleteIcon from "@mui/icons-material/Delete";
-import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import Backdrop from "@mui/material/Backdrop";
-import Button from "@mui/material/Button";
-import Fade from "@mui/material/Fade";
-import Modal from "@mui/material/Modal";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-
-// Create Folder Modal Style
-const style = {
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- maxWidth: 500,
- width: "100%",
- bgcolor: "background.paper",
- boxShadow: 24,
- borderRadius: "8px",
-};
-
-function createData(name, icon, owner, fileSize, listedDate, fileItem) {
- return { name, icon, owner, fileSize, listedDate, fileItem };
-}
-
-const rows = [
- createData(
- "Product UI/UX Design",
- "/images/folder.png",
- "Danielle Thompson",
- "0.7 GB",
- "Mar 08, 2021",
- "02"
- ),
- createData(
- "App Design & Development",
- "/images/folder.png",
- "ET Themes",
- "521 MB",
- "Feb 13, 2021",
- "01"
- ),
- createData(
- "Ubold Sketch Design",
- "/images/folder.png",
- "Gary Coley",
- "64.2 MB",
- "Dec 18, 2020",
- "02"
- ),
- createData(
- "Annualreport.pdf",
- "/images/folder.png",
- "Cooper Sharwood",
- "12.5 GB",
- "Nov 25, 2020",
- "05"
- ),
- createData(
- "Wireframes",
- "/images/folder.png",
- "Jasper Rigg",
- "8.3 MB",
- "Nov 25, 2019",
- "03"
- ),
- createData(
- "App Design",
- "/images/folder.png",
- "ET Agency",
- "5 GB",
- "Jan 08, 2022",
- "15"
- ),
- createData(
- "Web Design & Development",
- "/images/folder.png",
- "ET Templates",
- "13 GB",
- "Jan 13, 2022",
- "90"
- ),
- createData(
- "React Template",
- "/images/folder.png",
- "ET Company",
- "100 GB",
- "Dec 18, 2021",
- "120"
- ),
- createData(
- "Material Template",
- "/images/folder.png",
- "Cooper Sharwood",
- "12.5 GB",
- "Nov 25, 2020",
- "05"
- ),
- createData(
- "Angular Template",
- "/images/folder.png",
- "Jasper Rigg",
- "8.3 MB",
- "Nov 25, 2019",
- "03"
- ),
-];
-
-const ImportantFiles = () => {
- // Create Folder Modal
- const [open, setOpen] = React.useState(false);
- const handleOpen = () => setOpen(true);
- const handleClose = () => setOpen(false);
-
- // Form
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
-
- Important Files
-
-
-
- {" "}
- Create Folder
-
-
-
-
-
-
-
-
- Name
-
-
-
- Owner
-
-
-
- File Size
-
-
-
- Listed Date
-
-
-
- File Item
-
-
-
- Actions
-
-
-
-
-
- {rows.map((row) => (
-
-
-
-
-
- {row.name}
-
-
-
-
-
- {row.owner}
-
-
-
- {row.fileSize}
-
-
-
- {row.listedDate}
-
-
-
- {row.fileItem}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
-
- {/* Create Folder Modal */}
-
-
-
-
-
- Create Folder
-
-
-
-
-
-
-
-
-
-
-
-
- Folder Name
-
-
-
-
-
-
-
- {" "}
- Add Folder
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default ImportantFiles;
diff --git a/components/Apps/FileManager/LeftSidebar.js b/components/Apps/FileManager/LeftSidebar.js
deleted file mode 100644
index f6c2e77..0000000
--- a/components/Apps/FileManager/LeftSidebar.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import React from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-import { styled, alpha } from "@mui/material/styles";
-import InputBase from "@mui/material/InputBase";
-import SearchIcon from "@mui/icons-material/Search";
-import LinearProgress, {
- linearProgressClasses,
-} from "@mui/material/LinearProgress";
-import styles from "@/components/Apps/FileManager/LeftSidebar.module.css";
-
-// Search field style
-const Search = styled("div")(({ theme }) => ({
- position: "relative",
- borderRadius: 100,
- backgroundColor: alpha(theme.palette.common.white, 0.15),
- "&:hover": {
- backgroundColor: alpha(theme.palette.common.white, 0.25),
- },
- marginRight: 0,
- marginLeft: 0,
- marginBottom: 15,
- width: "100%",
- [theme.breakpoints.up("xs")]: {
- marginRight: theme.spacing(1),
- width: "auto",
- },
-}));
-
-const SearchIconWrapper = styled("div")(({ theme }) => ({
- color: "#757FEF",
- padding: theme.spacing(0, 2),
- height: "100%",
- position: "absolute",
- right: "0",
- pointerEvents: "none",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- zIndex: "5",
-}));
-
-const StyledInputBase = styled(InputBase)(({ theme }) => ({
- color: "inherit",
- width: "100%",
- "& .MuiInputBase-input": {
- backgroundColor: "#F5F7FA",
- borderRadius: "30px",
- padding: theme.spacing(1.4, 0, 1.4, 2),
- },
-}));
-
-// Storage Status Progress
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
- height: 5,
- borderRadius: 5,
- [`&.${linearProgressClasses.colorPrimary}`]: {
- backgroundColor:
- theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
- },
- [`& .${linearProgressClasses.bar}`]: {
- borderRadius: 5,
- backgroundColor: theme.palette.mode === "light" ? "#757FEF" : "#308fe8",
- },
-}));
-
-const LeftSidebar = () => {
- const router = useRouter();
-
- return (
- <>
-
-
- My Drive
-
-
- {/* Search */}
-
-
-
-
-
-
-
- {/* Nav */}
-
-
-
- My Drive
-
-
-
-
- Assets
-
-
-
- Projects
-
-
-
- Personal
-
-
-
- Templates
-
-
-
-
-
-
- Documents
-
-
-
-
-
- Media
-
-
-
-
-
- Recents
-
-
-
-
-
- Important
-
-
-
-
-
- Trash
-
-
-
-
- {/* Storage status */}
-
-
- Storage Status
-
-
-
-
-
- 186.5 GB Used of 120 GB
-
-
-
- >
- );
-};
-
-export default LeftSidebar;
diff --git a/components/Apps/FileManager/LeftSidebar.module.css b/components/Apps/FileManager/LeftSidebar.module.css
deleted file mode 100644
index cc9e9b9..0000000
--- a/components/Apps/FileManager/LeftSidebar.module.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.leftNav {
- padding: 0;
- margin: 0 0 30px;
- list-style-type: none;
-}
-.leftNav li {
- margin-bottom: 15px;
-}
-.leftNav li:last-child {
- margin-bottom: 0;
-}
-.leftNav li a {
- text-decoration: none;
- color: #260944;
- font-size: 14px;
- font-weight: 500;
-}
-.leftNav li a:hover, .leftNav li a:hover i {
- color: var(--primaryColor);
-}
-.leftNav li a i {
- color: #818093;
- font-size: 18px;
- position: relative;
- top: 3px;
- margin-right: 5px;
-}
-
-.leftNav li ul {
- padding: 0;
- margin: 15px 0 0;
- list-style-type: none;
-}
-.leftNav li ul li {
- position: relative;
- padding-left: 45px;
-}
-.leftNav li ul li::before {
- content: "";
- background-color: #818093;
- width: 6px;
- height: 6px;
- border-radius: 100%;
- position: absolute;
- left: 30px;
- top: 6px;
-}
-.leftNav li ul li a {
- color: #5B5B98;
- font-size: 13.5px;
-}
-
-/* For RTL Style */
-[dir="rtl"] .leftNav li a i {
- margin-right: 0;
- margin-left: 5px;
-}
-[dir="rtl"] .leftNav li ul li {
- padding-left: 0;
- padding-right: 45px;
-}
-[dir="rtl"] .leftNav li ul li::before {
- left: auto;
- right: 25px;
-}
-
-/* For dark mode */
-[class="dark"] .leftNav li a {
- color: var(--darkHeadingTextColor);
-}
-[class="dark"] .leftNav li ul li a {
- color: var(--darkBodyTextColor);
-}
\ No newline at end of file
diff --git a/components/Apps/FileManager/MediaFiles.js b/components/Apps/FileManager/MediaFiles.js
deleted file mode 100644
index a9db080..0000000
--- a/components/Apps/FileManager/MediaFiles.js
+++ /dev/null
@@ -1,294 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import DeleteIcon from "@mui/icons-material/Delete";
-import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-
-function createData(name, icon, owner, fileSize, listedDate, fileItem) {
- return { name, icon, owner, fileSize, listedDate, fileItem };
-}
-
-const rows = [
- createData(
- "Product UI/UX Design",
- "/images/media.png",
- "Danielle Thompson",
- "0.7 GB",
- "Mar 08, 2021",
- "02"
- ),
- createData(
- "App Design & Development",
- "/images/media.png",
- "ET Themes",
- "521 MB",
- "Feb 13, 2021",
- "01"
- ),
- createData(
- "Ubold Sketch Design",
- "/images/media.png",
- "Gary Coley",
- "64.2 MB",
- "Dec 18, 2020",
- "02"
- ),
- createData(
- "Annualreport.pdf",
- "/images/media.png",
- "Cooper Sharwood",
- "12.5 GB",
- "Nov 25, 2020",
- "05"
- ),
- createData(
- "Wireframes",
- "/images/media.png",
- "Jasper Rigg",
- "8.3 MB",
- "Nov 25, 2019",
- "03"
- ),
- createData(
- "App Design",
- "/images/media.png",
- "ET Agency",
- "5 GB",
- "Jan 08, 2022",
- "15"
- ),
- createData(
- "Web Design & Development",
- "/images/media.png",
- "ET Templates",
- "13 GB",
- "Jan 13, 2022",
- "90"
- ),
- createData(
- "React Template",
- "/images/media.png",
- "ET Company",
- "100 GB",
- "Dec 18, 2021",
- "120"
- ),
- createData(
- "Material Template",
- "/images/media.png",
- "Cooper Sharwood",
- "12.5 GB",
- "Nov 25, 2020",
- "05"
- ),
- createData(
- "Angular Template",
- "/images/media.png",
- "Jasper Rigg",
- "8.3 MB",
- "Nov 25, 2019",
- "03"
- ),
-];
-
-const MediaFiles = () => {
- return (
- <>
-
-
-
- Media
-
-
-
-
-
-
-
-
- Name
-
-
-
- Owner
-
-
-
- File Size
-
-
-
- Listed Date
-
-
-
- File Item
-
-
-
- Actions
-
-
-
-
-
- {rows.map((row) => (
-
-
-
-
-
- {row.name}
-
-
-
-
-
- {row.owner}
-
-
-
- {row.fileSize}
-
-
-
- {row.listedDate}
-
-
-
- {row.fileItem}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
- >
- );
-};
-
-export default MediaFiles;
diff --git a/components/Apps/FileManager/MyDrive.js b/components/Apps/FileManager/MyDrive.js
deleted file mode 100644
index 59ae144..0000000
--- a/components/Apps/FileManager/MyDrive.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-
-const MyDriveData = [
- {
- id: "1",
- icon: "/images/folder.png",
- title: "Projects",
- totalFiles: "387 Files",
- filesSize: "4.5 GB",
- },
- {
- id: "2",
- icon: "/images/folder.png",
- title: "Documents",
- totalFiles: "1572 Files",
- filesSize: "7.5 GB",
- },
- {
- id: "3",
- icon: "/images/folder.png",
- title: "Media",
- totalFiles: "1241 Files",
- filesSize: "2.8 GB",
- },
- {
- id: "4",
- icon: "/images/folder.png",
- title: "Applications",
- totalFiles: "2487 Files",
- filesSize: "4.5 GB",
- },
-];
-
-const MyDrive = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
- {MyDriveData.map((dInfo) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {dInfo.title}
-
-
-
-
- {dInfo.totalFiles}
- {dInfo.filesSize}
-
-
-
- ))}
-
- >
- );
-};
-
-export default MyDrive;
diff --git a/components/Apps/FileManager/PersonalFiles.js b/components/Apps/FileManager/PersonalFiles.js
deleted file mode 100644
index 8f186aa..0000000
--- a/components/Apps/FileManager/PersonalFiles.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-
-const PersonalFilesData = [
- {
- id: "1",
- icon: "/images/folder.png",
- title: "Mobile Apps",
- totalFiles: "55 Files",
- filesSize: "4.5 GB",
- },
- {
- id: "2",
- icon: "/images/folder.png",
- title: "Important Files",
- totalFiles: "200 Files",
- filesSize: "6.5 GB",
- },
- {
- id: "3",
- icon: "/images/folder.png",
- title: "Angular Template",
- totalFiles: "340 Files",
- filesSize: "7.5 GB",
- },
- {
- id: "4",
- icon: "/images/folder.png",
- title: "Projects",
- totalFiles: "387 Files",
- filesSize: "4.5 GB",
- },
- {
- id: "5",
- icon: "/images/folder.png",
- title: "Documents",
- totalFiles: "1572 Files",
- filesSize: "7.5 GB",
- },
- {
- id: "6",
- icon: "/images/folder.png",
- title: "ET Template",
- totalFiles: "60 Files",
- filesSize: "8 GB",
- },
- {
- id: "7",
- icon: "/images/folder.png",
- title: "React Template",
- totalFiles: "120 Files",
- filesSize: "6.5 GB",
- },
- {
- id: "8",
- icon: "/images/folder.png",
- title: "Material UI",
- totalFiles: "40 Files",
- filesSize: "5.5 GB",
- },
- {
- id: "9",
- icon: "/images/folder.png",
- title: "WP Themes",
- totalFiles: "2487 Files",
- filesSize: "4.5 GB",
- },
- {
- id: "10",
- icon: "/images/folder.png",
- title: "Personal Photos",
- totalFiles: "2587 Files",
- filesSize: "14 GB",
- },
- {
- id: "11",
- icon: "/images/folder.png",
- title: "Media",
- totalFiles: "1241 Files",
- filesSize: "2.8 GB",
- },
- {
- id: "12",
- icon: "/images/folder.png",
- title: "Applications",
- totalFiles: "2487 Files",
- filesSize: "4.5 GB",
- },
-];
-
-const PersonalFiles = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
- {PersonalFilesData.map((file) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {file.title}
-
-
-
-
- {file.totalFiles}
- {file.filesSize}
-
-
-
- ))}
-
- >
- );
-};
-
-export default PersonalFiles;
diff --git a/components/Apps/FileManager/RecentFiles.js b/components/Apps/FileManager/RecentFiles.js
deleted file mode 100644
index b1da4ca..0000000
--- a/components/Apps/FileManager/RecentFiles.js
+++ /dev/null
@@ -1,433 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import DeleteIcon from "@mui/icons-material/Delete";
-import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import Backdrop from "@mui/material/Backdrop";
-import Button from "@mui/material/Button";
-import Fade from "@mui/material/Fade";
-import Modal from "@mui/material/Modal";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-
-// Create Folder Modal Style
-const style = {
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- maxWidth: 500,
- width: "100%",
- bgcolor: "background.paper",
- boxShadow: 24,
- borderRadius: "8px",
-};
-
-function createData(name, icon, owner, fileSize, listedDate, fileItem) {
- return { name, icon, owner, fileSize, listedDate, fileItem };
-}
-
-const rows = [
- createData(
- "Product UI/UX Design",
- "/images/folder.png",
- "Danielle Thompson",
- "0.7 GB",
- "Mar 08, 2021",
- "02"
- ),
- createData(
- "App Design & Development",
- "/images/folder.png",
- "ET Themes",
- "521 MB",
- "Feb 13, 2021",
- "01"
- ),
- createData(
- "Ubold Sketch Design",
- "/images/folder.png",
- "Gary Coley",
- "64.2 MB",
- "Dec 18, 2020",
- "02"
- ),
- createData(
- "Annualreport.pdf",
- "/images/folder.png",
- "Cooper Sharwood",
- "12.5 GB",
- "Nov 25, 2020",
- "05"
- ),
- createData(
- "Wireframes",
- "/images/folder.png",
- "Jasper Rigg",
- "8.3 MB",
- "Nov 25, 2019",
- "03"
- ),
-];
-
-const RecentFiles = () => {
- // Create Folder Modal
- const [open, setOpen] = React.useState(false);
- const handleOpen = () => setOpen(true);
- const handleClose = () => setOpen(false);
-
- // Form
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
-
- Recent Files
-
-
-
- {" "}
- Create Folder
-
-
-
-
-
-
-
-
- Name
-
-
-
- Owner
-
-
-
- File Size
-
-
-
- Listed Date
-
-
-
- File Item
-
-
-
- Actions
-
-
-
-
-
- {rows.map((row) => (
-
-
-
-
-
- {row.name}
-
-
-
-
-
- {row.owner}
-
-
-
- {row.fileSize}
-
-
-
- {row.listedDate}
-
-
-
- {row.fileItem}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
-
- {/* Create Folder Modal */}
-
-
-
-
-
- Create Folder
-
-
-
-
-
-
-
-
-
-
-
-
- Folder Name
-
-
-
-
-
-
-
- {" "}
- Add Folder
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default RecentFiles;
diff --git a/components/Apps/FileManager/TemplateFiles.js b/components/Apps/FileManager/TemplateFiles.js
deleted file mode 100644
index 5104dc5..0000000
--- a/components/Apps/FileManager/TemplateFiles.js
+++ /dev/null
@@ -1,298 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import DeleteIcon from "@mui/icons-material/Delete";
-import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-
-function createData(name, icon, owner, fileSize, listedDate, fileItem) {
- return { name, icon, owner, fileSize, listedDate, fileItem };
-}
-
-const rows = [
- createData(
- "Product UI/UX Design",
- "/images/folder.png",
- "Danielle Thompson",
- "0.7 GB",
- "Mar 08, 2021",
- "02"
- ),
- createData(
- "App Design & Development",
- "/images/folder.png",
- "ET Themes",
- "521 MB",
- "Feb 13, 2021",
- "01"
- ),
- createData(
- "Ubold Sketch Design",
- "/images/folder.png",
- "Gary Coley",
- "64.2 MB",
- "Dec 18, 2020",
- "02"
- ),
- createData(
- "Annualreport.pdf",
- "/images/folder.png",
- "Cooper Sharwood",
- "12.5 GB",
- "Nov 25, 2020",
- "05"
- ),
- createData(
- "Wireframes",
- "/images/folder.png",
- "Jasper Rigg",
- "8.3 MB",
- "Nov 25, 2019",
- "03"
- ),
- createData(
- "App Design",
- "/images/folder.png",
- "ET Agency",
- "5 GB",
- "Jan 08, 2022",
- "15"
- ),
- createData(
- "Web Design & Development",
- "/images/folder.png",
- "ET Templates",
- "13 GB",
- "Jan 13, 2022",
- "90"
- ),
- createData(
- "React Template",
- "/images/folder.png",
- "ET Company",
- "100 GB",
- "Dec 18, 2021",
- "120"
- ),
- createData(
- "Material Template",
- "/images/folder.png",
- "Cooper Sharwood",
- "12.5 GB",
- "Nov 25, 2020",
- "05"
- ),
- createData(
- "Angular Template",
- "/images/folder.png",
- "Jasper Rigg",
- "8.3 MB",
- "Nov 25, 2019",
- "03"
- ),
-];
-
-const TemplateFiles = () => {
- return (
- <>
-
-
-
- Templates
-
-
-
-
-
-
-
-
- Name
-
-
-
- Owner
-
-
-
- File Size
-
-
-
- Listed Date
-
-
-
- File Item
-
-
-
- Actions
-
-
-
-
-
- {rows.map((row) => (
-
-
-
-
-
- {row.name}
-
-
-
-
-
- {row.owner}
-
-
-
- {row.fileSize}
-
-
-
- {row.listedDate}
-
-
-
- {row.fileItem}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
- >
- );
-};
-
-export default TemplateFiles;
diff --git a/components/Apps/FileManager/TrashFiles.js b/components/Apps/FileManager/TrashFiles.js
deleted file mode 100644
index 8b39c45..0000000
--- a/components/Apps/FileManager/TrashFiles.js
+++ /dev/null
@@ -1,274 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import DeleteIcon from "@mui/icons-material/Delete";
-
-function createData(name, icon, owner, fileSize, listedDate, fileItem) {
- return { name, icon, owner, fileSize, listedDate, fileItem };
-}
-
-const rows = [
- createData(
- "Product UI/UX Design",
- "/images/folder.png",
- "Danielle Thompson",
- "0.7 GB",
- "Mar 08, 2021",
- "02"
- ),
- createData(
- "App Design & Development",
- "/images/folder.png",
- "ET Themes",
- "521 MB",
- "Feb 13, 2021",
- "01"
- ),
- createData(
- "Ubold Sketch Design",
- "/images/folder.png",
- "Gary Coley",
- "64.2 MB",
- "Dec 18, 2020",
- "02"
- ),
- createData(
- "Annualreport.pdf",
- "/images/folder.png",
- "Cooper Sharwood",
- "12.5 GB",
- "Nov 25, 2020",
- "05"
- ),
- createData(
- "Wireframes",
- "/images/folder.png",
- "Jasper Rigg",
- "8.3 MB",
- "Nov 25, 2019",
- "03"
- ),
- createData(
- "App Design",
- "/images/folder.png",
- "ET Agency",
- "5 GB",
- "Jan 08, 2022",
- "15"
- ),
- createData(
- "Web Design & Development",
- "/images/folder.png",
- "ET Templates",
- "13 GB",
- "Jan 13, 2022",
- "90"
- ),
- createData(
- "React Template",
- "/images/folder.png",
- "ET Company",
- "100 GB",
- "Dec 18, 2021",
- "120"
- ),
- createData(
- "Material Template",
- "/images/folder.png",
- "Cooper Sharwood",
- "12.5 GB",
- "Nov 25, 2020",
- "05"
- ),
- createData(
- "Angular Template",
- "/images/folder.png",
- "Jasper Rigg",
- "8.3 MB",
- "Nov 25, 2019",
- "03"
- ),
-];
-
-const TrashFiles = () => {
- return (
- <>
-
-
-
- Trash Files
-
-
-
-
-
-
-
-
- Name
-
-
-
- Owner
-
-
-
- File Size
-
-
-
- Listed Date
-
-
-
- File Item
-
-
-
- Actions
-
-
-
-
-
- {rows.map((row) => (
-
-
-
-
-
- {row.name}
-
-
-
-
-
- {row.owner}
-
-
-
- {row.fileSize}
-
-
-
- {row.listedDate}
-
-
-
- {row.fileItem}
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
- >
- );
-};
-
-export default TrashFiles;
diff --git a/components/Apps/ToDoLists.js b/components/Apps/ToDoLists.js
deleted file mode 100644
index 93f76df..0000000
--- a/components/Apps/ToDoLists.js
+++ /dev/null
@@ -1,926 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import IconButton from "@mui/material/IconButton";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Tooltip from "@mui/material/Tooltip";
-import Grid from "@mui/material/Grid";
-import DeleteIcon from "@mui/icons-material/Delete";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-import Avatar from "@mui/material/Avatar";
-import Checkbox from "@mui/material/Checkbox";
-const label = { inputProps: { "aria-label": "Checkbox demo" } };
-import { styled } from "@mui/material/styles";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import CloseIcon from "@mui/icons-material/Close";
-
-// Add Task Modal
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
- "& .MuiDialogContent-root": {
- padding: theme.spacing(2),
- },
- "& .MuiDialogActions-root": {
- padding: theme.spacing(1),
- },
-}));
-
-function BootstrapDialogTitle(props) {
- const { children, onClose, ...other } = props;
-
- return (
-
- {children}
- {onClose ? (
- theme.palette.grey[500],
- }}
- >
-
-
- ) : null}
-
- );
-}
-
-BootstrapDialogTitle.propTypes = {
- children: PropTypes.node,
- onClose: PropTypes.func.isRequired,
-};
-// End Add Task Modal
-
-function ToDoList(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-ToDoList.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(
- name,
- url,
- startDate,
- endDate,
- status,
- badgeClass,
- completion,
- priority
-) {
- return {
- name,
- url,
- startDate,
- endDate,
- status,
- badgeClass,
- completion,
- priority,
- };
-}
-
-const rows = [
- createData(
- "Public Beta Release",
- "/images/user1.png",
- "1 Jan 2022",
- "1 Apr 2022",
- "Completed",
- "successBadge",
- "10/10",
- "High"
- ),
- createData(
- "Fix Platform Errors",
- "/images/user2.png",
- "1 Mar 2022",
- "1 May 2022",
- "Completed",
- "successBadge",
- "10/10",
- "High"
- ),
- createData(
- "Launch our Mobile App",
- "/images/user3.png",
- "15 Apr 2022",
- "15 Jun 2022",
- "On Going",
- "primaryBadge",
- "7/10",
- "Medium"
- ),
- createData(
- "Add the New Pricing Page",
- "/images/user4.png",
- "15 May 2022",
- "15 Jun 2022",
- "Pending",
- "dangerBadge",
- "1/10",
- "Low"
- ),
- createData(
- "Redesign New Online Shop",
- "/images/user5.png",
- "15 Jun 2022",
- "15 Aug 2022",
- "On Going",
- "primaryBadge",
- "0/10",
- "Low"
- ),
- createData(
- "Material Ui Design",
- "/images/user6.png",
- "15 Jul 2022",
- "15 Sep 2022",
- "On Going",
- "primaryBadge",
- "7/10",
- "Medium"
- ),
- createData(
- "Add Progress Track",
- "/images/user7.png",
- "15 Mar 2022",
- "15 May 2022",
- "Completed",
- "successBadge",
- "10/10",
- "High"
- ),
- createData(
- "Web Design",
- "/images/user8.png",
- "15 Aug 2022",
- "15 Dec 2022",
- "On Going",
- "primaryBadge",
- "9/10",
- "High"
- ),
- createData(
- "Web Development",
- "/images/user9.png",
- "15 Nov 2022",
- "15 Jan 2023",
- "On Going",
- "primaryBadge",
- "8/10",
- "High"
- ),
- createData(
- "React App Development",
- "/images/user10.png",
- "15 Jan 2022",
- "15 Mar 2022",
- "Completed",
- "successBadge",
- "10/10",
- "High"
- ),
- createData(
- "eCommerce Development",
- "/images/user11.png",
- "15 Mar 2022",
- "15 May 2022",
- "On Going",
- "primaryBadge",
- "8/10",
- "Medium"
- ),
- createData(
- "App Development",
- "/images/user12.png",
- "15 May 2022",
- "15 Jul 2022",
- "On Going",
- "primaryBadge",
- "5/10",
- "Medium"
- ),
-].sort((a, b) => (a.name < b.name ? -1 : 1));
-
-const ToDoLists = () => {
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(8);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- // Add task modal
- const [open, setOpen] = React.useState(false);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
- const handleClose = () => {
- setOpen(false);
- };
-
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
- // End Add Task Modal
-
- return (
- <>
-
-
-
- My Tasks
-
-
-
- {" "}
- Add Task
-
-
-
-
-
-
-
-
- Name
-
-
-
- Assigned
-
-
-
- Start Date
-
-
-
- End Date
-
-
-
- Status
-
-
-
- Completion
-
-
-
- Priority
-
-
-
- Action
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
- {row.name}
-
-
-
-
-
-
-
- {row.startDate}
-
-
-
- {row.endDate}
-
-
-
- {row.status}
-
-
-
- {row.completion}
-
-
-
- {row.priority}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- {/* Add task modal */}
-
-
-
-
- Add Task
-
-
-
-
-
-
-
-
-
-
-
-
- Task
-
-
-
-
-
-
-
- Member
-
-
-
-
-
-
-
- Start Date
-
-
-
-
-
-
-
- End Date
-
-
-
-
-
-
-
- Status
-
-
-
-
-
-
-
- Completion
-
-
-
-
-
-
-
- Priority
-
-
-
-
-
-
-
- {" "}
- Cancel
-
-
-
- {" "}
- Add Task
-
-
-
-
-
-
-
- >
- );
-};
-
-export default ToDoLists;
diff --git a/components/Authentication/Authentication.module.css b/components/Authentication/Authentication.module.css
deleted file mode 100644
index 342723d..0000000
--- a/components/Authentication/Authentication.module.css
+++ /dev/null
@@ -1,244 +0,0 @@
-.favicon {
- position: relative;
- top: 5px;
- margin-left: 10px;
-}
-
-/* googleBtn */
-.googleBtn {
- background: #FFFFFF;
- border: 1px solid #EDEFF5;
- border-radius: 8px;
- display: inline-block;
- width: 100%;
- padding: 16px 25px 16px 55px;
- color: #260944;
- font-weight: 500;
- font-size: 14px;
- text-decoration: none;
- transition: .6s;
- -webkit-transition: .6s;
- margin-right: 7px;
- position: relative;
-}
-.googleBtn:hover {
- box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-}
-.googleBtn img {
- position: absolute;
- top: 15px;
- left: 25px;
- margin-right: 5px;
-}
-
-/* Facebook Btn */
-.fbBtn {
- background: #4776D0;
- border: 1px solid #4776D0;
- border-radius: 8px;
- display: inline-block;
- width: 100%;
- padding: 16px 25px 16px 55px;
- color: #fff !important;
- font-weight: 500;
- font-size: 14px;
- text-decoration: none;
- transition: .6s;
- -webkit-transition: .6s;
- margin-left: 7px;
- position: relative;
-}
-.fbBtn:hover {
- box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-}
-.fbBtn img {
- position: absolute;
- top: 15px;
- left: 25px;
- margin-right: 5px;
-}
-
-/* or */
-.or {
- text-align: center;
- position: relative;
- margin-bottom: 30px;
- color: #777E90;
- font-weight: 500;
- z-index: 0;
-}
-.or:before {
- content: "";
- background: #E2E8F0;
- position: absolute;
- width: 100%;
- height: 1px;
- left: 0;
- top: 10px;
- z-index: -1;
-}
-.or span {
- background-color: #F5F5F5;
- display: inline-block;
- padding: 0 10px;
-}
-
-/* Lock screen */
-.profileBox {
- background-color: #fff;
- border-radius: 10px;
- position: relative;
-}
-.header {
- background: #EAEDFB;
- border-radius: 10px 10px 0px 0px;
- padding: 30px 15px 50px;
- position: relative;
-}
-.headerContent {
- max-width: 300px;
- position: relative;
- z-index: 1;
-}
-.header h1 {
- margin: 0 0 10px;
- font-size: 18px;
- color: #757FEF;
- font-weight: 500;
-}
-.header p {
- margin: 0;
- font-size: 14px;
- color: #757FEF;
-}
-.header img {
- position: absolute;
- bottom: 0;
- right: 0;
-}
-
-.profileInfo {
- position: relative;
- text-align: center;
- margin-bottom: 10px;
-}
-.profileInfo img {
- width: 60px;
- height: 60px;
- border: 5px solid #fff;
- border-radius: 100%;
- box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-}
-.profileInfo h3 {
- margin: 5px 0 0;
- font-size: 14px;
-}
-
-@media only screen and (max-width: 767px) {
- .googleBtn {
- padding: 13px 15px 13px 40px;
- font-size: 12px;
- margin-right: 5px;
- }
- .googleBtn img {
- left: 15px;
- top: 10px;
- }
- .fbBtn {
- padding: 13px 15px 13px 40px;
- font-size: 12px;
- margin-left: 5px;
- }
- .fbBtn img {
- left: 15px;
- top: 10px;
- }
-}
-
-/* For RTL Style */
-[dir="rtl"] .favicon {
- margin-left: 0;
- margin-right: 10px;
-}
-
-/* googleBtn */
-[dir="rtl"] .googleBtn {
- margin-right: 0;
- margin-left: 7px;
- padding: 16px 55px 16px 25px;
-}
-[dir="rtl"] .googleBtn img {
- left: auto;
- right: 25px;
- margin-right: 0;
- margin-left: 5px;
-}
-
-/* Facebook Btn */
-[dir="rtl"] .fbBtn {
- margin-left: 0;
- margin-right: 7px;
- padding: 16px 55px 16px 25px;
-}
-[dir="rtl"] .fbBtn img {
- left: auto;
- right: 25px;
- margin-right: 0;
- margin-left: 5px;
-}
-
-/* or */
-[dir="rtl"] .or:before {
- left: auto;
- right: 0;
-}
-
-/* Lock screen */
-[dir="rtl"] .header img {
- right: auto;
- left: 0;
-}
-
-/* For dark mode */
-[class="dark"] .or {
- color: #fff;
-}
-[class="dark"] .or:before {
- background: var(--borderColor);
-}
-[class="dark"] .or span {
- background-color: #000;
-}
-
-/* googleBtn */
-[class="dark"] .googleBtn {
- background: var(--colorBlack);
- border: 1px solid var(--colorBlack);
-}
-
-/* Lock screen */
-[class="dark"] .header {
- background: #101010;
-}
-
-
-@media only screen and (max-width: 767px) {
- [dir="rtl"] .googleBtn {
- margin-right: 0;
- margin-left: 5px;
- }
- [dir="rtl"] .googleBtn img {
- left: auto;
- right: 15px;
- top: 14px;
- }
- [dir="rtl"] .fbBtn {
- margin-left: 0;
- margin-right: 5px;
- }
- [dir="rtl"] .fbBtn img {
- left: auto;
- right: 15px;
- top: 14px;
- }
-}
\ No newline at end of file
diff --git a/components/Authentication/ForgotPasswordForm.js b/components/Authentication/ForgotPasswordForm.js
deleted file mode 100644
index 2cbcb86..0000000
--- a/components/Authentication/ForgotPasswordForm.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import Grid from "@mui/material/Grid";
-import { Typography } from "@mui/material";
-import { Box } from "@mui/system";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import styles from "@/components/Authentication/Authentication.module.css";
-
-const ForgotPasswordForm = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
-
-
-
- Forgot Password?{" "}
-
-
-
-
- Enter your email and we′ll send you instructions to reset your
- password
-
-
-
-
-
-
-
- Email
-
-
-
-
-
-
-
-
- Send Reset Link
-
-
-
-
-
- Back to Sign in
-
-
-
-
-
-
- >
- );
-};
-
-export default ForgotPasswordForm;
diff --git a/components/Authentication/LockScreenForm.js b/components/Authentication/LockScreenForm.js
deleted file mode 100644
index f65d1b7..0000000
--- a/components/Authentication/LockScreenForm.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import { Typography } from "@mui/material";
-import { Box } from "@mui/system";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import styles from "@/components/Authentication/Authentication.module.css";
-
-const LockScreenForm = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
-
-
-
-
-
-
-
Welcome to admash Dashboard!
-
- Hello Andrew Burns, enter your password to unlock the
- screen !
-
-
-
-
-
-
-
-
-
-
Andrew Burns
-
-
-
-
-
- Password
-
-
-
-
-
-
-
- Unlock
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default LockScreenForm;
diff --git a/components/Authentication/SignInForm.js b/components/Authentication/SignInForm.js
deleted file mode 100644
index f5bd1fe..0000000
--- a/components/Authentication/SignInForm.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import Grid from "@mui/material/Grid";
-import { Typography } from "@mui/material";
-import { Box } from "@mui/system";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
-import styles from "@/components/Authentication/Authentication.module.css";
-
-const SignInForm = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
-
-
-
- Sign In{" "}
-
-
-
-
- Already have an account?{" "}
-
- Sign up
-
-
-
-
-
-
- Sign in with Google
-
-
-
-
- Sign in with Facebook
-
-
-
-
- or
-
-
-
-
-
-
-
- Email
-
-
-
-
-
-
-
- Password
-
-
-
-
-
-
-
-
-
-
- }
- label="Remember me."
- />
-
-
-
-
- Forgot your password?
-
-
-
-
-
- Sign In
-
-
-
-
-
-
- >
- );
-};
-
-export default SignInForm;
diff --git a/components/Authentication/SignUpForm.js b/components/Authentication/SignUpForm.js
deleted file mode 100644
index b1f68a7..0000000
--- a/components/Authentication/SignUpForm.js
+++ /dev/null
@@ -1,240 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import Grid from "@mui/material/Grid";
-import { Typography } from "@mui/material";
-import { Box } from "@mui/system";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
-import styles from "@/components/Authentication/Authentication.module.css";
-
-const SignUpForm = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
-
-
-
- Get’s started.{" "}
-
-
-
-
- Already have an account?{" "}
-
- Sign in
-
-
-
-
-
- Sign in with Google
-
-
-
- Sign in with Facebook
-
-
-
-
- or
-
-
-
-
-
-
-
- First Name
-
-
-
-
-
-
-
- Last Name
-
-
-
-
-
-
-
- Email
-
-
-
-
-
-
-
- Password
-
-
-
-
-
-
-
-
-
-
- }
- label="Remember me."
- />
-
-
-
-
- Forgot your password?
-
-
-
-
-
- Sign Up
-
-
-
-
-
-
- >
- );
-};
-
-export default SignUpForm;
diff --git a/components/ContactList/ActivityTimeline/ActivityTimeline.module.css b/components/ContactList/ActivityTimeline/ActivityTimeline.module.css
deleted file mode 100644
index 5d8b844..0000000
--- a/components/ContactList/ActivityTimeline/ActivityTimeline.module.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.timelineList .tList {
- position: relative;
- margin-bottom: 15px;
- padding-bottom: 15px;
- border-bottom: 1px solid #F7FAFF;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.timelineList .tList:last-child {
- border: none;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-.timelineList .tList .content {
- display: flex;
- align-items: center;
-}
-.timelineList .tList .content img {
- margin-right: 10px;
- width: 27px;
-}
-.timelineList .tList .content h5 {
- margin: 0;
- color: #5B5B98;
- font-size: 13px;
- font-weight: 500;
-}
-.timelineList .tList .date {
- color: #A9A9C8;
- font-size: 12px;
- margin: 0;
-}
-
-@media only screen and (min-width: 1800px) {
- .timelineList .tList {
- margin-bottom: 16.5px;
- padding-bottom: 16.5px;
- }
-}
\ No newline at end of file
diff --git a/components/ContactList/ActivityTimeline/index.js b/components/ContactList/ActivityTimeline/index.js
deleted file mode 100644
index 265ecda..0000000
--- a/components/ContactList/ActivityTimeline/index.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import styles from "@/components/Dashboard/ProjectManagement/ActivityTimeline/ActivityTimeline.module.css";
-
-const ActivityTimelineData = [
- {
- id: "1",
- image: '/images/pdf-icon.png',
- title: "Donald updated the status",
- time: "54 min ago",
- },
- {
- id: "2",
- image: '/images/man.png',
- title: "Design new UI and check sales",
- time: "10 hours ago",
- },
- {
- id: "3",
- title: "James Bangs Client Meeting",
- image: '/images/small-product-img.png',
- time: "5 min ago",
- },
- {
- id: "4",
- title: "Joseph Rust opened new showcase",
- image: '/images/small-product-img2.png',
- time: "10 min ago",
- },
- {
- id: "5",
- title: "Brust opened new showcase",
- image: '/images/small-product-img3.png',
- time: "15 min ago",
- },
- {
- id: "6",
- title: "Create a new project for client",
- image: '/images/man.png',
- time: "20 min ago",
- },
-];
-
-const ActivityTimeline = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Activity Timeline
-
-
-
-
-
-
-
-
-
-
-
- {ActivityTimelineData.slice(0, 6).map((timeline) => (
-
-
-
-
{timeline.title}
-
-
{timeline.time}
-
- ))}
-
-
- >
- );
-};
-
-export default ActivityTimeline;
diff --git a/components/ContactList/Features.js b/components/ContactList/Features.js
deleted file mode 100644
index c117228..0000000
--- a/components/ContactList/Features.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-
-const FeaturesData = [
- {
- id: "1",
- subTitle: "Completed Projects",
- title: "24k",
- image: "/images/users-icon.png",
- },
- {
- id: "2",
- subTitle: "Pending Projects",
- title: "17",
- image: "/images/graph-icon.png",
- },
- {
- id: "3",
- subTitle: "Total Revenue",
- title: "16.2M",
- image: "/images/work-icon.png",
- }
-];
-
-const Features = () => {
- return (
- <>
-
- {FeaturesData.map((feature) => (
-
-
-
-
-
-
-
-
-
- {feature.subTitle}
-
-
- {feature.title}
-
-
-
-
-
- ))}
-
- >
- );
-};
-
-export default Features;
diff --git a/components/ContactList/MyTasks.js b/components/ContactList/MyTasks.js
deleted file mode 100644
index f4375d7..0000000
--- a/components/ContactList/MyTasks.js
+++ /dev/null
@@ -1,414 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import IconButton from "@mui/material/IconButton";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-
-function MyTask(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-MyTask.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(name, startDate, endDate, status, badgeClass, budget) {
- return {
- name,
- startDate,
- endDate,
- status,
- badgeClass,
- budget
- };
-}
-
-const rows = [
- createData(
- "Public Beta Release",
- "1 Jan 2022",
- "1 Apr 2022",
- "Completed",
- "successBadge",
- "$1250"
- ),
- createData(
- "Fix Platform Errors",
- "1 Mar 2022",
- "1 May 2022",
- "Completed",
- "successBadge",
- "$1550"
- ),
- createData(
- "Launch our Mobile App",
- "15 Apr 2022",
- "15 Jun 2022",
- "On Going",
- "primaryBadge",
- "$2500"
- ),
- createData(
- "Add the New Pricing Page",
- "15 May 2022",
- "15 Jun 2022",
- "Pending",
- "dangerBadge",
- "$100"
- ),
- createData(
- "Redesign New Online Shop",
- "15 Jun 2022",
- "15 Aug 2022",
- "On Going",
- "primaryBadge",
- "$1000"
- ),
- createData(
- "Material Ui Design",
- "15 Jul 2022",
- "15 Sep 2022",
- "On Going",
- "primaryBadge",
- "$2200"
- ),
- createData(
- "Add Progress Track",
- "15 Mar 2022",
- "15 May 2022",
- "Completed",
- "successBadge",
- "$1400"
- ),
- createData(
- "Web Design",
- "15 Aug 2022",
- "15 Dec 2022",
- "On Going",
- "primaryBadge",
- "$4000"
- ),
- createData(
- "Web Development",
- "15 Nov 2022",
- "15 Jan 2023",
- "On Going",
- "primaryBadge",
- "$400"
- ),
- createData(
- "React App Development",
- "15 Jan 2022",
- "15 Mar 2022",
- "Completed",
- "successBadge",
- "$1200"
- ),
- createData(
- "eCommerce Development",
- "15 Mar 2022",
- "15 May 2022",
- "On Going",
- "primaryBadge",
- "$250"
- ),
- createData(
- "App Development",
- "15 May 2022",
- "15 Jul 2022",
- "On Going",
- "primaryBadge",
- "$3400"
- ),
-].sort((a, b) => (a.name < b.name ? -1 : 1));
-
-const MyTasks = () => {
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(8);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
- My Tasks
-
-
-
-
-
-
-
-
- Name
-
-
-
- Start Date
-
-
-
- End Date
-
-
-
- Status
-
-
-
- Budget
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
- {row.name}
-
-
-
- {row.startDate}
-
-
-
- {row.endDate}
-
-
-
- {row.status}
-
-
-
- {row.budget}
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default MyTasks;
diff --git a/components/ContactList/Overview.js b/components/ContactList/Overview.js
deleted file mode 100644
index f162638..0000000
--- a/components/ContactList/Overview.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-const Overview = () => {
- // Select Form
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- // Chart
- const series = [
- {
- name: "Income",
- data: [20, 35, 20, 40, 40, 50, 25, 25, 35, 30, 25, 40],
- },
- ];
- const options = {
- chart: {
- toolbar: {
- show: false,
- },
- events: {
- click: function (chart, w, e) {
- // console.log(chart, w, e)
- },
- },
- },
- colors: ["#90C6E0"],
- plotOptions: {
- bar: {
- columnWidth: "30%",
- distributed: true,
- },
- },
- dataLabels: {
- enabled: false,
- },
- legend: {
- show: false,
- },
- xaxis: {
- categories: [
- ["Jan"],
- ["Feb"],
- ["Mar"],
- ["Api"],
- ["May"],
- ["Jun"],
- ["Jul"],
- ["Aug"],
- ["Sep"],
- ["Oct"],
- ["Nov"],
- ["Dec"],
- ],
- labels: {
- style: {
- colors: "#A9A9C8",
- fontSize: "12px",
- },
- },
- },
- yaxis: {
- labels: {
- style: {
- colors: "#A9A9C8",
- fontSize: "12px",
- },
- },
- axisBorder: {
- show: false,
- colors: "#f6f6f7",
- },
- },
- fill: {
- opacity: 1,
- },
- tooltip: {
- y: {
- formatter: function (val) {
- return "$" + val + "k";
- },
- },
- },
- grid: {
- show: true,
- borderColor: "#EDEFF5",
- strokeDashArray: 5,
- },
- };
-
- return (
- <>
-
-
-
- Overview
-
-
-
-
- Select
-
-
-
- Today
-
-
- This Week
-
-
- Last Month
-
-
- Last 12 Months
-
-
- All Time
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Overview;
diff --git a/components/ContactList/PersonalInformation/index.js b/components/ContactList/PersonalInformation/index.js
deleted file mode 100644
index 7ef4fbc..0000000
--- a/components/ContactList/PersonalInformation/index.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-
-const personalInfo = [
- {
- title: "Full Name :",
- text: "Andrew Burns",
- },
- {
- title: "Mobile :",
- text: "(123) 123 1234",
- },
- {
- title: "Email :",
- text: "andrewburns@gmail.com",
- },
- {
- title: "Location : ",
- text: "USA",
- },
- {
- title: "Experience : ",
- text: "Back end Developer",
- },
-];
-
-const PersonalInformation = () => {
- return (
- <>
-
-
-
- Personal Information
-
-
-
-
-
- About Me:
-
-
-
- Hi I'm Andrew Burns,has been the industry's standard dummy text ever
- since the 1500s, when an unknown printer took a galley of type.
-
-
- {personalInfo.map((info) => (
-
-
- {info.title}
-
-
- {info.text}
-
- ))}
-
-
- >
- );
-};
-
-export default PersonalInformation;
diff --git a/components/ContactList/ProfileInfo/ImpressionShare.js b/components/ContactList/ProfileInfo/ImpressionShare.js
deleted file mode 100644
index f1416d3..0000000
--- a/components/ContactList/ProfileInfo/ImpressionShare.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { Component } from "react";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-import styles from "@/components/Dashboard/Analytics/Profile/ImpressionShare.module.css"
-
-class ImpressionShare extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [45],
- options: {
- chart: {
- type: "radialBar",
- offsetY: -20,
- sparkline: {
- enabled: true,
- },
- },
- plotOptions: {
- radialBar: {
- startAngle: -110,
- endAngle: 110,
- track: {
- background: "#e7e7e7",
- strokeWidth: "90%",
- margin: 5,
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- offsetY: -2,
- fontSize: "15px",
- fontWeight: "500",
- color: '#5B5B98'
- },
- },
- },
- },
- grid: {
- padding: {
- top: -10,
- },
- },
- fill: {
- colors: ["#00B69B"],
- },
- labels: ["Average Results"],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
-
Excellent
- Impression Share
-
- >
- );
- }
-}
-
-export default ImpressionShare;
diff --git a/components/ContactList/ProfileInfo/ImpressionShare.module.css b/components/ContactList/ProfileInfo/ImpressionShare.module.css
deleted file mode 100644
index 57a83ce..0000000
--- a/components/ContactList/ProfileInfo/ImpressionShare.module.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.chartBox {
- text-align: center;
- top: 12px;
- position: relative;
-}
-.chartBox h4 {
- margin: 0;
- color: #00B69B;
- font-weight: 500;
- font-size: 11px;
- line-height: 14px;
- position: absolute;
- bottom: 30px;
- left: 0;
- right: 0;
-}
-.chartBox h3 {
- margin: 0;
- color: #5B5B98;
- font-weight: 500;
- font-size: 12px;
- position: relative;
- bottom: 7px;
-}
\ No newline at end of file
diff --git a/components/ContactList/ProfileInfo/Profile.module.css b/components/ContactList/ProfileInfo/Profile.module.css
deleted file mode 100644
index b5f1395..0000000
--- a/components/ContactList/ProfileInfo/Profile.module.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.profileBox {
- background-color: #fff;
- border-radius: 10px;
- position: relative;
- margin-bottom: 15px;
-}
-.header {
- background: #EAEDFB;
- border-radius: 10px 10px 0px 0px;
- padding: 30px 15px 50px;
- position: relative;
-}
-.headerContent {
- max-width: 300px;
- position: relative;
- z-index: 1;
-}
-.header h1 {
- margin: 0 0 10px;
- font-size: 18px;
- color: #757FEF;
- font-weight: 500;
-}
-.header p {
- margin: 0;
- font-size: 14px;
- color: #757FEF;
-}
-.header img {
- position: absolute;
- bottom: 0;
- right: 0;
-}
-.profileInfoContent {
- padding: 0 15px 30px;
-}
-.profileInfo {
- position: relative;
-}
-.profileInfo img {
- position: absolute;
- top: -30px;
- width: 60px;
- height: 60px;
- border: 5px solid #fff;
- border-radius: 100%;
- box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-}
-.profileInfo h3 {
- margin: 0 0 5px;
- font-size: 14px;
- padding-top: 45px;
-}
-.profileInfo p {
- margin: 0;
- font-size: 13px;
-}
\ No newline at end of file
diff --git a/components/ContactList/ProfileInfo/index.js b/components/ContactList/ProfileInfo/index.js
deleted file mode 100644
index cbdb5ff..0000000
--- a/components/ContactList/ProfileInfo/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Link from "@mui/material/Link";
-import styles from "@/components/Dashboard/Analytics/Profile/Profile.module.css";
-import ImpressionShare from "./ImpressionShare";
-
-const ProfileInfo = () => {
- return (
- <>
-
-
-
-
Welcome to admash Dashboard!
-
- You have done 68% 😎 more sales today. Check your new badge in
- your profile.
-
-
-
-
-
-
-
-
-
-
-
Andrew Burns
-
Programmer
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default ProfileInfo;
diff --git a/components/Dashboard/Analytics/ActivityTimeline/ActivityTimeline.module.css b/components/Dashboard/Analytics/ActivityTimeline/ActivityTimeline.module.css
deleted file mode 100644
index 5e5dcdb..0000000
--- a/components/Dashboard/Analytics/ActivityTimeline/ActivityTimeline.module.css
+++ /dev/null
@@ -1,90 +0,0 @@
-.timelineList .tList {
- position: relative;
- padding-left: 20px;
- margin-bottom: 9px;
- padding-bottom: 9px;
- border-bottom: 1px solid #F7FAFF;
-}
-.timelineList .tList:last-child {
- border: none;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-.timelineList .tList::before {
- content: '';
- background: linear-gradient(149.1deg, #99B8F3 14.61%, #177FCB 130.18%);
- box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
- width: 10px;
- height: 10px;
- border-radius: 100%;
- position: absolute;
- top: 4px;
- left: 0;
-}
-.timelineList .tList::after {
- content: '';
- background: #F7FAFF;
- width: 3px;
- height: 75px;
- border-radius: 5px;
- position: absolute;
- top: 18px;
- left: 3px;
-}
-.timelineList .tList h4 {
- font-weight: 500;
- font-size: 14px;
- margin: 0 0 8px;
-}
-.timelineList .tList .content {
- display: flex;
- align-items: center;
- margin-bottom: 10px;
-}
-.timelineList .tList .content img {
- margin-right: 10px;
- width: 27px;
-}
-.timelineList .tList .content h5 {
- margin: 0;
- color: #5B5B98;
- font-size: 13px;
- font-weight: 500;
-}
-.timelineList .tList .date {
- color: #A9A9C8;
- font-size: 12px;
- margin: 0;
-}
-
-/* For RTL Style */
-[dir="rtl"] .timelineList .tList {
- padding-left: 0;
- padding-right: 20px;
-}
-[dir="rtl"] .timelineList .tList::before {
- left: auto;
- right: 0;
-}
-[dir="rtl"] .timelineList .tList::after {
- left: auto;
- right: 3px;
-}
-[dir="rtl"] .timelineList .tList .content img {
- margin-right: 0;
- margin-left: 10px;
-}
-
-/* For dark mode */
-[class="dark"] .timelineList .tList {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .timelineList .tList:last-child {
- border-bottom: none;
-}
-[class="dark"] .timelineList .tList .content h5 {
- color: var(--darkBodyTextColor);
-}
-[class="dark"] .timelineList .tList::after {
- background: var(--borderColor);
-}
\ No newline at end of file
diff --git a/components/Dashboard/Analytics/ActivityTimeline/index.js b/components/Dashboard/Analytics/ActivityTimeline/index.js
deleted file mode 100644
index 7a4a290..0000000
--- a/components/Dashboard/Analytics/ActivityTimeline/index.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import styles from "@/components/Dashboard/Analytics/ActivityTimeline/ActivityTimeline.module.css";
-
-const ActivityTimelineData = [
- {
- id: "1",
- title: "8 Invoices have been paid",
- subTitle: "Invoices have been paid to the company.",
- icon: "/images/pdf-icon.png",
- date: "11:47 PM Wednesday",
- },
- {
- id: "2",
- title: "8 Invoices have been paid",
- subTitle: "Create a new project for client Johnson John",
- icon: "/images/man.png",
- date: "April, 18",
- },
- {
- id: "3",
- title: "Added new style collection",
- subTitle: "Product uploaded By Nesta Technologies",
- icon: "/images/small-product-img.png",
- date: "02:14 PM Today",
- },
- {
- id: "4",
- title: "Brust opened new showcase",
- subTitle: "Product uploaded By Nesta Technologies",
- icon: "/images/small-product-img2.png",
- date: "5 Min Ago",
- },
-];
-
-const ActivityTimeline = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Activity Timeline
-
-
-
-
-
-
-
-
-
-
-
- {ActivityTimelineData.slice(0, 4).map((timeline) => (
-
-
{timeline.title}
-
-
-
{timeline.subTitle}
-
-
{timeline.date}
-
- ))}
-
-
- >
- );
-};
-
-export default ActivityTimeline;
diff --git a/components/Dashboard/Analytics/AudienceOverview.js b/components/Dashboard/Analytics/AudienceOverview.js
deleted file mode 100644
index ea8661c..0000000
--- a/components/Dashboard/Analytics/AudienceOverview.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import Chart from "chart.js/auto";
-import { Line } from "react-chartjs-2";
-
-const labels = ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"];
-
-const data = {
- labels: labels,
- datasets: [
- {
- label: "New Visitors",
- backgroundColor: "#6F52ED",
- borderColor: "#6F52ED",
- data: [30, 40, 30, 80, 65, 70, 30],
- },
- {
- label: "Unique Visitors",
- backgroundColor: "#2DB6F5",
- borderColor: "#2DB6F5",
- data: [55, 60, 55, 45, 35, 55, 60],
- },
- {
- label: "Previous Visitors",
- backgroundColor: "#F765A3",
- borderColor: "#F765A3",
- data: [45, 30, 40, 30, 20, 30, 40],
- },
- ],
-};
-
-const options = {
- plugins: {
- legend: {
- labels: {
- color: '#5B5B98'
- }
- },
- }
-}
-
-const AudienceOverview = () => {
- // Select Form
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- return (
- <>
-
-
-
- Audience Overview
-
-
-
- Select
-
- Today
- Last 7 Days
- Last Month
- Last 12 Months
- All Time
-
-
-
-
-
-
-
- >
- );
-};
-
-export default AudienceOverview;
diff --git a/components/Dashboard/Analytics/BrowserUsedAndTrafficReports.js b/components/Dashboard/Analytics/BrowserUsedAndTrafficReports.js
deleted file mode 100644
index 48475c8..0000000
--- a/components/Dashboard/Analytics/BrowserUsedAndTrafficReports.js
+++ /dev/null
@@ -1,548 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-
-function BrowserUsedAndTrafficReport(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-BrowserUsedAndTrafficReport.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(
- channel,
- sessions,
- sessionsProgress,
- prevPeriod,
- prevPeriodProgress,
- transactions,
- transactionsProgress,
- change,
- iconName,
- badgeClass
-) {
- return {
- channel,
- sessions,
- sessionsProgress,
- prevPeriod,
- prevPeriodProgress,
- transactions,
- transactionsProgress,
- change,
- iconName,
- badgeClass,
- };
-}
-
-const rows = [
- createData(
- "Organic search",
- "10853",
- "(52%)",
- "566",
- "(52%)",
- "566",
- "(52%)",
- "52.80%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Direct",
- "10844",
- "(50%)",
- "666",
- "(50%)",
- "766",
- "(50%)",
- "55.99%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Referal",
- "20844",
- "(60%)",
- "754",
- "(60%)",
- "899",
- "(60%)",
- "60.99%",
- "ri-arrow-down-s-fill",
- "dangerBadge"
- ),
- createData(
- "Email",
- "15844",
- "(50%)",
- "764",
- "(50%)",
- "755",
- "(50%)",
- "50.99%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Social",
- "12844",
- "(50%)",
- "764",
- "(50%)",
- "755",
- "(50%)",
- "50.99%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Chrome",
- "5853",
- "(52%)",
- "466",
- "(52%)",
- "566",
- "(52%)",
- "52.80%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Safari",
- "2844",
- "(50%)",
- "766",
- "(50%)",
- "666",
- "(50%)",
- "55.00%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Edge",
- "1844",
- "(60%)",
- "454",
- "(60%)",
- "399",
- "(60%)",
- "60.00%",
- "ri-arrow-down-s-fill",
- "dangerBadge"
- ),
- createData(
- "Firefox",
- "15844",
- "(55%)",
- "564",
- "(55%)",
- "455",
- "(55%)",
- "55.00%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
- createData(
- "Opera",
- "11844",
- "(50%)",
- "864",
- "(50%)",
- "655",
- "(50%)",
- "50.00%",
- "ri-arrow-up-s-fill",
- "successBadge"
- ),
-].sort((a, b) => (a.channel < b.channel ? -1 : 1));
-
-const BrowserUsedAndTrafficReports = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- // Table
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(4);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
- Browser Used & Traffic Reports
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Channel
-
-
-
- Sessions
-
-
-
- Prev.Period
-
-
-
- Transactions
-
-
-
- % Change
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
- {row.channel}
-
-
-
- {row.sessions}{" "}
-
- {row.sessionsProgress}
-
-
-
-
- {row.prevPeriod}{" "}
-
- {row.prevPeriodProgress}
-
-
-
-
- {row.transactions}{" "}
-
- {row.transactionsProgress}
-
-
-
-
-
- {row.change}{" "}
-
-
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default BrowserUsedAndTrafficReports;
diff --git a/components/Dashboard/Analytics/Features.js b/components/Dashboard/Analytics/Features.js
deleted file mode 100644
index 4db353c..0000000
--- a/components/Dashboard/Analytics/Features.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-import TrendingUpIcon from "@mui/icons-material/TrendingUp";
-import TrendingDownIcon from "@mui/icons-material/TrendingDown";
-
-const FeaturesData = [
- {
- id: "1",
- subTitle: "Enrolled Courses",
- title: "24k",
- image: "/images/users-icon.png",
- icon: ,
- growthText: "9.5% new session",
- color: "successColor",
- },
- {
- id: "2",
- subTitle: "Active Courses",
- title: "17",
- image: "/images/graph-icon.png",
- icon: ,
- growthText: "7.5% vs. previous month",
- color: "dangerColor",
- },
- {
- id: "3",
- subTitle: "Completed Courses",
- title: "64",
- image: "/images/work-icon.png",
- icon: ,
- growthText: "3.5% bounce rate",
- color: "successColor",
- },
-];
-
-const Features = () => {
- return (
- <>
-
- {FeaturesData.map((feature) => (
-
-
-
-
-
-
-
-
-
- {feature.subTitle}
-
-
- {feature.title}
-
-
-
-
-
-
-
- {feature.icon}
-
- {feature.growthText}
-
-
-
-
- ))}
-
- >
- );
-};
-
-export default Features;
diff --git a/components/Dashboard/Analytics/Gender/Gender.module.css b/components/Dashboard/Analytics/Gender/Gender.module.css
deleted file mode 100644
index f0e80ed..0000000
--- a/components/Dashboard/Analytics/Gender/Gender.module.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.infoList {
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 1px solid #F7FAFF;
- margin-bottom: 13px;
- padding-bottom: 13px;
- position: relative;
- padding-left: 15px;
-}
-.infoList::before {
- content: '';
- background: #00B69B;
- box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
- width: 10px;
- height: 10px;
- border-radius: 100%;
- position: absolute;
- left: 0;
- top: 5px;
-}
-.infoList:last-child {
- border-bottom: none;
- margin-bottom: 0;
- padding-bottom: 0;
-}
-.infoList p {
- font-size: 13px;
- margin: 0;
-}
-.infoList .rightContent {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.infoList h5 {
- margin: 0 15px 0 0;
- font-size: 12px;
- color: #5B5B98;
-}
-.infoList .rightContent i {
- position: relative;
- top: 2px;
-}
-
-/* For RTL Style */
-[dir="rtl"] .infoList {
- padding-left: 0;
- padding-right: 15px;
-}
-[dir="rtl"] .infoList::before {
- left: auto;
- right: 0;
-}
-[dir="rtl"] .infoList h5 {
- margin: 0 0 0 15px;
-}
-
-/* For dark mode */
-[class="dark"] .infoList {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .infoList:last-child {
- border-bottom: none;
-}
\ No newline at end of file
diff --git a/components/Dashboard/Analytics/Gender/index.js b/components/Dashboard/Analytics/Gender/index.js
deleted file mode 100644
index 19282aa..0000000
--- a/components/Dashboard/Analytics/Gender/index.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { Component } from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-import styles from "@/components/Dashboard/Analytics/Gender/Gender.module.css";
-
-class Gender extends Component {
- constructor(props) {
- super(props);
- this.state = {
- series: [50],
- options: {
- plotOptions: {
- radialBar: {
- hollow: {
- size: "50%",
- },
- track: {
- background: "rgba(0, 182, 155, 0.5)",
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- offsetY: 4,
- color: "#00B69B",
- fontSize: "16px",
- fontWeight: "500",
- },
- },
- },
- },
- fill: {
- colors: ["#00B69B"],
- },
- },
- };
- }
- render() {
- return (
- <>
-
-
-
- Gender
-
-
-
-
-
- <>
-
-
-
- >
-
- >
- );
- }
-}
-
-export default Gender;
diff --git a/components/Dashboard/Analytics/NewReturning/NewReturning.module.css b/components/Dashboard/Analytics/NewReturning/NewReturning.module.css
deleted file mode 100644
index 33be276..0000000
--- a/components/Dashboard/Analytics/NewReturning/NewReturning.module.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.infoList {
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 1px solid #F7FAFF;
- margin-bottom: 13px;
- padding-bottom: 13px;
- position: relative;
- padding-left: 15px;
-}
-.infoList::before {
- content: '';
- background: #757FEF;
- box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
- width: 10px;
- height: 10px;
- border-radius: 100%;
- position: absolute;
- left: 0;
- top: 5px;
-}
-.infoList:last-child {
- border-bottom: none;
- margin-bottom: 0;
- padding-bottom: 0;
-}
-.infoList p {
- font-size: 13px;
- margin: 0;
-}
-.infoList .rightContent {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.infoList h5 {
- margin: 0 15px 0 0;
- font-size: 12px;
- color: #5B5B98;
-}
-.infoList .rightContent i {
- position: relative;
- top: 2px;
-}
-
-
-/* For RTL Style */
-[dir="rtl"] .infoList {
- padding-left: 0;
- padding-right: 15px;
-}
-[dir="rtl"] .infoList::before {
- left: auto;
- right: 0;
-}
-[dir="rtl"] .infoList h5 {
- margin: 0 0 0 15px;
-}
-
-/* For dark mode */
-[class="dark"] .infoList {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .infoList:last-child {
- border-bottom: none;
-}
\ No newline at end of file
diff --git a/components/Dashboard/Analytics/NewReturning/index.js b/components/Dashboard/Analytics/NewReturning/index.js
deleted file mode 100644
index b15b87c..0000000
--- a/components/Dashboard/Analytics/NewReturning/index.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { Component } from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-import styles from "@/components/Dashboard/Analytics/NewReturning/NewReturning.module.css";
-
-class NewReturning extends Component {
- constructor(props) {
- super(props);
- this.state = {
- series: [60],
- options: {
- plotOptions: {
- radialBar: {
- hollow: {
- size: "50%",
- },
- track: {
- background: "rgba(117, 127, 239, 0.5)",
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- offsetY: 4,
- color: "#757FEF",
- fontSize: "16px",
- fontWeight: "500",
- },
- },
- },
- },
- fill: {
- colors: ["#757FEF"],
- },
- },
- };
- }
- render() {
- return (
- <>
-
-
-
- New vs. Returning
-
-
-
-
-
- <>
-
-
-
- >
-
- >
- );
- }
-}
-
-export default NewReturning;
diff --git a/components/Dashboard/Analytics/Profile/ImpressionShare.js b/components/Dashboard/Analytics/Profile/ImpressionShare.js
deleted file mode 100644
index f1416d3..0000000
--- a/components/Dashboard/Analytics/Profile/ImpressionShare.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { Component } from "react";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-import styles from "@/components/Dashboard/Analytics/Profile/ImpressionShare.module.css"
-
-class ImpressionShare extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [45],
- options: {
- chart: {
- type: "radialBar",
- offsetY: -20,
- sparkline: {
- enabled: true,
- },
- },
- plotOptions: {
- radialBar: {
- startAngle: -110,
- endAngle: 110,
- track: {
- background: "#e7e7e7",
- strokeWidth: "90%",
- margin: 5,
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- offsetY: -2,
- fontSize: "15px",
- fontWeight: "500",
- color: '#5B5B98'
- },
- },
- },
- },
- grid: {
- padding: {
- top: -10,
- },
- },
- fill: {
- colors: ["#00B69B"],
- },
- labels: ["Average Results"],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
-
Excellent
- Impression Share
-
- >
- );
- }
-}
-
-export default ImpressionShare;
diff --git a/components/Dashboard/Analytics/Profile/ImpressionShare.module.css b/components/Dashboard/Analytics/Profile/ImpressionShare.module.css
deleted file mode 100644
index a14131f..0000000
--- a/components/Dashboard/Analytics/Profile/ImpressionShare.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.chartBox {
- text-align: center;
- top: 12px;
- position: relative;
-}
-.chartBox h4 {
- margin: 0;
- color: #00B69B;
- font-weight: 500;
- font-size: 11px;
- line-height: 14px;
- position: absolute;
- bottom: 30px;
- left: 0;
- right: 0;
-}
-.chartBox h3 {
- margin: 0;
- color: #5B5B98;
- font-weight: 500;
- font-size: 12px;
- position: relative;
- bottom: 7px;
-}
-
-@media only screen and (max-width: 767px) {
- .chartBox h4 {
- bottom: 24px;
- }
- .chartBox h3 {
- font-size: 10px;
- }
-}
\ No newline at end of file
diff --git a/components/Dashboard/Analytics/Profile/Profile.module.css b/components/Dashboard/Analytics/Profile/Profile.module.css
deleted file mode 100644
index 191612a..0000000
--- a/components/Dashboard/Analytics/Profile/Profile.module.css
+++ /dev/null
@@ -1,74 +0,0 @@
-.profileBox {
- background-color: #fff;
- border-radius: 10px;
- position: relative;
- margin-bottom: 15px;
-}
-.header {
- background: #EAEDFB;
- border-radius: 10px 10px 0px 0px;
- padding: 30px 15px 50px;
- position: relative;
-}
-.headerContent {
- max-width: 300px;
- position: relative;
- z-index: 1;
-}
-.header h1 {
- margin: 0 0 10px;
- font-size: 18px;
- color: #757FEF;
- font-weight: 500;
-}
-.header p {
- margin: 0;
- font-size: 14px;
- color: #757FEF;
-}
-.header img {
- position: absolute;
- bottom: 0;
- right: 0;
-}
-.profileInfoContent {
- padding: 0 15px 30px;
-}
-.profileInfo {
- position: relative;
-}
-.profileInfo img {
- position: absolute;
- top: -30px;
- width: 60px;
- height: 60px;
- border: 5px solid #fff;
- border-radius: 100%;
- box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-}
-.profileInfo h3 {
- margin: 0 0 5px;
- font-size: 14px;
- padding-top: 45px;
-}
-.profileInfo p {
- margin: 0;
- font-size: 13px;
-}
-
-@media only screen and (max-width: 767px) {
- .profileInfo h3 {
- font-size: 12px;
- }
- .profileInfo p {
- font-size: 11px;
- }
-}
-
-/* For dark mode */
-[class="dark"] .profileBox {
- background-color: var(--cardBg);
-}
-[class="dark"] .header {
- background: #161515;
-}
\ No newline at end of file
diff --git a/components/Dashboard/Analytics/Profile/index.js b/components/Dashboard/Analytics/Profile/index.js
deleted file mode 100644
index 00fad60..0000000
--- a/components/Dashboard/Analytics/Profile/index.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Link from "@mui/material/Link";
-import styles from "@/components/Dashboard/Analytics/Profile/Profile.module.css";
-import ImpressionShare from "./ImpressionShare";
-
-const Profile = () => {
- return (
- <>
-
-
-
-
Welcome to admash Dashboard!
-
- You have done 68% 😎 more sales today. Check your new badge in
- your profile.
-
-
-
-
-
-
-
-
-
-
-
Andrew Burns
-
Programmer
-
-
-
-
-
- View Profile{" "}
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Profile;
diff --git a/components/Dashboard/Analytics/RevenueReport.js b/components/Dashboard/Analytics/RevenueReport.js
deleted file mode 100644
index 996dddf..0000000
--- a/components/Dashboard/Analytics/RevenueReport.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-const RevenueReport = () => {
- const series = [
- {
- name: "Earning",
- data: [80, 50, 30, 40, 100, 20, 35, 75, 45, 55, 65, 85,],
- },
- {
- name: "Expenses",
- data: [20, 30, 40, 80, 20, 80, 15, 32, 70, 38, 60, 76,],
- },
- ];
- const options = {
- chart: {
- toolbar: {
- show: false,
- },
- dropShadow: {
- enabled: true,
- blur: 1,
- left: 1,
- top: 1,
- },
- },
- stroke: {
- width: 2,
- },
- colors: ["#757FEF", "#FF8A65"],
- fill: {
- opacity: 0.1,
- },
- markers: {
- size: 5,
- },
- xaxis: {
- categories: [
- "January",
- "Fubruary",
- "March",
- "April",
- "May",
- "June",
- "July",
- "August",
- "September",
- "October",
- "November",
- "December",
- ],
- },
- };
-
- return (
- <>
-
-
-
- Revenue Report
-
-
-
-
-
- >
- );
-};
-
-export default RevenueReport;
diff --git a/components/Dashboard/Analytics/SalesAnalytics.js b/components/Dashboard/Analytics/SalesAnalytics.js
deleted file mode 100644
index 76f5fc7..0000000
--- a/components/Dashboard/Analytics/SalesAnalytics.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import {
- BarChart,
- Bar,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- {
- date: "01 Jan",
- cost: 4000,
- sales: 2400,
- revenue: 2400,
- },
- {
- date: "02 Jan",
- cost: 3000,
- sales: 1398,
- revenue: 2210,
- },
- {
- date: "03 Jan",
- cost: 2000,
- sales: 9800,
- revenue: 2290,
- },
- {
- date: "04 Jan",
- cost: 2780,
- sales: 3908,
- revenue: 2000,
- },
- {
- date: "05 Jan",
- cost: 1890,
- sales: 4800,
- revenue: 2181,
- },
- {
- date: "06 Jan",
- cost: 2390,
- sales: 3800,
- revenue: 2500,
- },
- {
- date: "07 Jan",
- cost: 3490,
- sales: 4300,
- revenue: 2100,
- },
-];
-
-const SalesAnalytics = () => {
- // Select Form
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- return (
- <>
-
-
-
- Sales Analytics
-
-
-
-
- Select
-
-
-
- Today
-
-
- Last 7 Days
-
-
- Last Month
-
-
- Last 12 Months
-
-
- All Time
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default SalesAnalytics;
diff --git a/components/Dashboard/Analytics/SessionsByCountries.js b/components/Dashboard/Analytics/SessionsByCountries.js
deleted file mode 100644
index 1099d4d..0000000
--- a/components/Dashboard/Analytics/SessionsByCountries.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-const SessionsByCountries = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- // Chart
- const series = [
- {
- data: [1200, 930, 748, 670, 540, 580, 690, 1100, 1200, 1380],
- },
- ];
- const options = {
- chart: {
- toolbar: {
- show: false,
- },
- },
- plotOptions: {
- bar: {
- borderRadius: 4,
- horizontal: true,
- },
- },
- dataLabels: {
- enabled: false,
- },
- colors: ["#757FEF"],
- xaxis: {
- categories: [
- "United State",
- "China",
- "Canada",
- "Indonesia",
- "Russia",
- "Bangladesh",
- "Brazil",
- "United Kingdom",
- "Vietnam",
- "Germany",
- ],
- labels: {
- style: {
- colors: "#5B5B98",
- fontSize: "12px",
- },
- },
- },
- yaxis: {
- labels: {
- style: {
- colors: "#5B5B98",
- fontSize: "11px",
- },
- },
- axisBorder: {
- show: false,
- colors: "#f6f6f7",
- },
- },
- fill: {
- opacity: 1,
- },
- grid: {
- show: true,
- borderColor: "#f6f6f7",
- },
- };
-
- return (
- <>
-
-
-
- Sessions By Countries
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default SessionsByCountries;
diff --git a/components/Dashboard/Analytics/SessionsDevice/SessionsDevice.module.css b/components/Dashboard/Analytics/SessionsDevice/SessionsDevice.module.css
deleted file mode 100644
index e9dd3cc..0000000
--- a/components/Dashboard/Analytics/SessionsDevice/SessionsDevice.module.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.infoList {
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 1px solid #F7FAFF;
- margin-bottom: 13px;
- padding-bottom: 13px;
- position: relative;
- padding-left: 15px;
-}
-.infoList::before {
- content: '';
- background: #FF8A54;
- box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
- width: 10px;
- height: 10px;
- border-radius: 100%;
- position: absolute;
- left: 0;
- top: 5px;
-}
-.infoList:last-child {
- border-bottom: none;
- margin-bottom: 0;
- padding-bottom: 0;
-}
-.infoList p {
- font-size: 13px;
- margin: 0;
-}
-.infoList .rightContent {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.infoList h5 {
- margin: 0 15px 0 0;
- font-size: 12px;
- color: #5B5B98;
-}
-.infoList .rightContent i {
- position: relative;
- top: 2px;
-}
-
-/* For RTL Style */
-[dir="rtl"] .infoList {
- padding-left: 0;
- padding-right: 15px;
-}
-[dir="rtl"] .infoList::before {
- left: auto;
- right: 0;
-}
-[dir="rtl"] .infoList h5 {
- margin: 0 0 0 15px;
-}
-
-/* For dark mode */
-[class="dark"] .infoList {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .infoList:last-child {
- border-bottom: none;
-}
\ No newline at end of file
diff --git a/components/Dashboard/Analytics/SessionsDevice/index.js b/components/Dashboard/Analytics/SessionsDevice/index.js
deleted file mode 100644
index 2eb12f1..0000000
--- a/components/Dashboard/Analytics/SessionsDevice/index.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { Component } from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-import styles from "@/components/Dashboard/Analytics/SessionsDevice/SessionsDevice.module.css";
-
-class SessionsDevice extends Component {
- constructor(props) {
- super(props);
- this.state = {
- series: [70],
- options: {
- plotOptions: {
- radialBar: {
- hollow: {
- size: "50%",
- },
- track: {
- background: "rgba(255, 138, 84, 0.5)",
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- offsetY: 4,
- color: "#FF8A54",
- fontSize: "16px",
- fontWeight: "500",
- },
- },
- },
- },
- fill: {
- colors: ["#FF8A54"],
- },
- },
- };
- }
- render() {
- return (
- <>
-
-
-
- Sessions Device
-
-
-
-
-
- <>
-
-
-
- >
-
- >
- );
- }
-}
-
-export default SessionsDevice;
diff --git a/components/Dashboard/Analytics/Terminals/Terminals.module.css b/components/Dashboard/Analytics/Terminals/Terminals.module.css
deleted file mode 100644
index ad59ea3..0000000
--- a/components/Dashboard/Analytics/Terminals/Terminals.module.css
+++ /dev/null
@@ -1,151 +0,0 @@
-.terminalsBox {
- position: relative;
-}
-.monthlyEarning {
- background: #757FEF;
- mix-blend-mode: multiply;
- box-shadow: 0px 109px 80px rgb(132 13 226 / 14%), 0px 45.5376px 33.4221px rgb(132 13 226 / 10%), 0px 24.3466px 17.869px rgb(132 13 226 / 8%), 0px 13.6485px 10.0172px rgb(132 13 226 / 7%), 0px 7.24861px 5.32008px rgb(132 13 226 / 6%), 0px 3.01631px 2.21381px rgb(132 13 226 / 4%);
- width: 200px;
- height: 200px;
- text-align: center;
- border-radius: 100%;
- margin-left: auto;
- margin-right: auto;
- padding-top: 75px;
- position: relative;
- right: -55px;
- top: 40px;
-}
-.monthlyEarning h3 {
- margin: 0 0 10px;
- line-height: 1;
- color: #fff !important;
- font-weight: 700;
- font-size: 24px;
-}
-.monthlyEarning p {
- margin: 0;
- line-height: 1;
- color: #fff;
- font-size: 14px;
-}
-
-.usersEarning {
- background: #F765A3;
- mix-blend-mode: multiply;
- opacity: 0.8;
- box-shadow: 0px 100px 80px rgb(255 43 43 / 15%), 0px 46.233px 36.9864px rgb(255 43 43 / 11%), 0px 26.4535px 21.1628px rgb(255 43 43 / 9%), 0px 16.0571px 12.8457px rgb(255 43 43 / 8%), 0px 9.67509px 7.74008px rgb(255 43 43 / 7%), 0px 5.38772px 4.31018px rgb(255 43 43 / 6%), 0px 2.31722px 1.85378px rgb(255 43 43 / 4%);
- width: 130px;
- height: 130px;
- text-align: center;
- border-radius: 100%;
- padding-top: 40px;
- left: -160px;
- right: 0;
- top: 130px;
- margin: auto;
- position: absolute;
-}
-.usersEarning h3 {
- margin: 0 0 10px;
- line-height: 1;
- color: #fff !important;
- font-weight: 700;
- font-size: 24px;
-}
-.usersEarning p {
- margin: 0;
- line-height: 1;
- color: #fff;
- font-size: 14px;
-}
-
-.inactiveEarning {
- top: 210px;
- background: #FF8A54;
- mix-blend-mode: multiply;
- width: 85px;
- height: 85px;
- text-align: center;
- border-radius: 100%;
- padding-top: 25px;
- position: absolute;
- left: -22px;
- right: 0;
- margin: auto;
-}
-.inactiveEarning h3 {
- margin: 0 0 5px;
- line-height: 1;
- color: #fff !important;
- font-weight: 700;
- font-size: 18px;
-}
-.inactiveEarning p {
- margin: 0;
- line-height: 1;
- color: #fff;
- font-size: 13px;
-}
-
-.terminalsBox ul {
- margin: 133px 0 0;
- padding: 0;
- list-style: none;
- text-align: center;
-}
-.terminalsBox ul li {
- display: inline-block;
- position: relative;
- font-size: 13px;
- padding-left: 20px;
- margin-right: 15px;
-}
-.terminalsBox ul li:last-child {
- margin-right: 0;
-}
-.terminalsBox ul li::before {
- content: '';
- position: absolute;
- border-radius: 5px;
- width: 13px;
- height: 13px;
- left: 0;
- top: 2px;
-}
-.terminalsBox ul li:nth-child(1)::before {
- background: #757FEF;
-}
-.terminalsBox ul li:nth-child(2)::before {
- background: #F765A3;
-}
-.terminalsBox ul li:nth-child(3)::before {
- background: #FF8A54;
-}
-
-
-/* For RTL Style */
-[dir="rtl"] .terminalsBox ul li {
- padding-left: 0;
- padding-right: 20px;
- margin-right: 0;
- margin-left: 15px;
-}
-[dir="rtl"] .terminalsBox ul li:last-child {
- margin-left: 0;
-}
-[dir="rtl"] .terminalsBox ul li::before {
- left: auto;
- right: 0;
-}
-
-/* For dark mode */
-[class="dark"] .monthlyEarning {
- mix-blend-mode: initial;
-}
-[class="dark"] .usersEarning {
- mix-blend-mode: initial;
-}
-[class="dark"] .inactiveEarning {
- mix-blend-mode: initial;
-}
\ No newline at end of file
diff --git a/components/Dashboard/Analytics/Terminals/index.js b/components/Dashboard/Analytics/Terminals/index.js
deleted file mode 100644
index 0bc2786..0000000
--- a/components/Dashboard/Analytics/Terminals/index.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import styles from "@/components/Dashboard/Analytics/Terminals/Terminals.module.css";
-
-const Terminals = () => {
- return (
- <>
-
-
-
- Terminals
-
-
-
-
-
-
$27632
-
Monthly Earning
-
-
-
-
-
-
-
- Monthly Earning
- Users
- Inactive
-
-
-
- >
- );
-};
-
-export default Terminals;
diff --git a/components/Dashboard/Analytics/TotalRevenue/RevenueChart.js b/components/Dashboard/Analytics/TotalRevenue/RevenueChart.js
deleted file mode 100644
index be53021..0000000
--- a/components/Dashboard/Analytics/TotalRevenue/RevenueChart.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { Component } from 'react';
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class RevenueChart extends Component {
- constructor(props) {
- super(props);
- this.state = {
- series: [65],
- options: {
- plotOptions: {
- radialBar: {
- hollow: {
- size: "50%",
- },
- track: {
- background: "#ECEFF7",
- },
- dataLabels: {
- name: {
- show: true,
- fontSize: '12px',
- color: '#5B5B98',
- },
- value: {
- offsetY: 3,
- color: "#00B69B",
- fontSize: "16px",
- fontWeight: "500",
- },
- },
- },
- },
- labels: ['Revenue'],
- fill: {
- opacity: 1,
- colors: ["#757FEF"],
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
- >
- );
- }
-}
-
-export default RevenueChart;
diff --git a/components/Dashboard/Analytics/TotalRevenue/TotalRevenueList.module.css b/components/Dashboard/Analytics/TotalRevenue/TotalRevenueList.module.css
deleted file mode 100644
index d2ddb15..0000000
--- a/components/Dashboard/Analytics/TotalRevenue/TotalRevenueList.module.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.totalRevenueList {
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 1px solid #F7FAFF;
- margin-bottom: 13px;
- padding-bottom: 13px;
-}
-.totalRevenueList:last-child {
- border-bottom: none;
- margin-bottom: 0;
- padding-bottom: 0;
-}
-.totalRevenueList p {
- font-size: 13px;
- margin: 0;
-}
-.totalRevenueList .rightContent {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.totalRevenueList .rightContent h5 {
- margin: 0 15px 0 0;
- font-size: 12px;
- color: #5B5B98;
-}
-.totalRevenueList .rightContent i {
- position: relative;
- top: 2px;
-}
-
-/* For dark mode */
-[class="dark"] .totalRevenueList {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .totalRevenueList:last-child {
- border-bottom: none;
-}
\ No newline at end of file
diff --git a/components/Dashboard/Analytics/TotalRevenue/index.js b/components/Dashboard/Analytics/TotalRevenue/index.js
deleted file mode 100644
index b9d8f14..0000000
--- a/components/Dashboard/Analytics/TotalRevenue/index.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import RevenueChart from "./RevenueChart";
-import styles from "@/components/Dashboard/Analytics/TotalRevenue/TotalRevenueList.module.css";
-
-const TotalRevenue = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Total Revenue
-
-
-
-
-
-
-
-
-
-
- {/* RevenueChart */}
-
-
- <>
-
-
-
-
-
-
-
-
-
- >
-
- >
- );
-};
-
-export default TotalRevenue;
diff --git a/components/Dashboard/Analytics/TotalTransactions.js b/components/Dashboard/Analytics/TotalTransactions.js
deleted file mode 100644
index eaf9fc0..0000000
--- a/components/Dashboard/Analytics/TotalTransactions.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-const TotalTransactions = () => {
- // Chart
- const series = [
- {
- name: 'This Week',
- data: [30, 35, 40, 50, 55, 60, 65]
- },
- {
- name: 'Last Week',
- data: [65, 60, 55, 50, 40, 35, 30]
- },
- {
- name: 'Performance',
- data: [30, 35, 40, 50, 55, 60, 65]
- },
- {
- name: 'Cost',
- data: [65, 60, 55, 50, 40, 35, 30]
- }
- ];
-
- const options = {
- chart: {
- stacked: true,
- toolbar: {
- show: false
- },
- },
- colors: ["#1CCAB8", "#FFBC2B", "#818093", "#EE368C"],
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: "30%",
- endingShape: "rounded",
- },
- },
- xaxis: {
- type: 'datetime',
- categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
- '01/05/2011 GMT', '01/06/2011 GMT', '01/07/2011 GMT'
- ],
- labels: {
- show: false,
- },
- },
- yaxis: {
- show: false,
- },
- legend: {
- position: 'bottom',
- offsetY: 8,
- fontSize: '11px',
- },
- fill: {
- opacity: 1
- },
- grid: {
- borderColor: '#F7FAFF',
- },
- tooltip: {
- y: {
- formatter: function (val) {
- return "$" + val + "k";
- },
- },
- },
- }
-
- return (
- <>
-
-
-
- Total Transactions
-
-
-
-
-
- >
- );
-};
-
-export default TotalTransactions;
diff --git a/components/Dashboard/Analytics/VisitorsAge/VisitorsAge.module.css b/components/Dashboard/Analytics/VisitorsAge/VisitorsAge.module.css
deleted file mode 100644
index f529a89..0000000
--- a/components/Dashboard/Analytics/VisitorsAge/VisitorsAge.module.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.infoList {
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 1px solid #F7FAFF;
- margin-bottom: 13px;
- padding-bottom: 13px;
- position: relative;
- padding-left: 15px;
-}
-.infoList::before {
- content: '';
- background: #F765A3;
- box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
- width: 10px;
- height: 10px;
- border-radius: 100%;
- position: absolute;
- left: 0;
- top: 5px;
-}
-.infoList:last-child {
- border-bottom: none;
- margin-bottom: 0;
- padding-bottom: 0;
-}
-.infoList p {
- font-size: 13px;
- margin: 0;
-}
-.infoList .rightContent {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.infoList h5 {
- margin: 0 15px 0 0;
- font-size: 12px;
- color: #5B5B98;
-}
-.infoList .rightContent i {
- position: relative;
- top: 2px;
-}
-
-/* For RTL Style */
-[dir="rtl"] .infoList {
- padding-left: 0;
- padding-right: 15px;
-}
-[dir="rtl"] .infoList::before {
- left: auto;
- right: 0;
-}
-[dir="rtl"] .infoList h5 {
- margin: 0 0 0 15px;
-}
-
-/* For dark mode */
-[class="dark"] .infoList {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .infoList:last-child {
- border-bottom: none;
-}
\ No newline at end of file
diff --git a/components/Dashboard/Analytics/VisitorsAge/index.js b/components/Dashboard/Analytics/VisitorsAge/index.js
deleted file mode 100644
index d0c85ee..0000000
--- a/components/Dashboard/Analytics/VisitorsAge/index.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { Component } from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-import styles from "@/components/Dashboard/Analytics/VisitorsAge/VisitorsAge.module.css";
-
-class VisitorsAge extends Component {
- constructor(props) {
- super(props);
- this.state = {
- series: [40],
- options: {
- plotOptions: {
- radialBar: {
- hollow: {
- size: "50%",
- },
- track: {
- background: "rgba(247, 101, 163, 0.5)",
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- offsetY: 4,
- color: "#F765A3",
- fontSize: "16px",
- fontWeight: "500",
- },
- },
- },
- },
- fill: {
- colors: ["#F765A3"],
- },
- },
- };
- }
- render() {
- return (
- <>
-
-
-
- Visitors Age
-
-
-
-
-
- <>
-
-
-
- >
-
- >
- );
- }
-}
-
-export default VisitorsAge;
diff --git a/components/Dashboard/Analytics/VisitsByDayAndNetIncome/NetIncome.js b/components/Dashboard/Analytics/VisitsByDayAndNetIncome/NetIncome.js
deleted file mode 100644
index 8cdd901..0000000
--- a/components/Dashboard/Analytics/VisitsByDayAndNetIncome/NetIncome.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import {
- BarChart,
- Bar,
- XAxis,
- Tooltip,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- {
- name: "Sat",
- income: 24,
- },
- {
- name: "Sun",
- income: 13,
- },
- {
- name: "Mon",
- income: 98,
- },
- {
- name: "Tue",
- income: 39,
- },
- {
- name: "Wed",
- income: 48,
- },
- {
- name: "Thu",
- income: 38,
- },
- {
- name: "Fri",
- income: 43,
- },
-];
-
-const NetIncome = () => {
- return (
- <>
-
-
-
-
-
-
-
-
-
- Net Income
-
-
- $438.5k
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default NetIncome;
diff --git a/components/Dashboard/Analytics/VisitsByDayAndNetIncome/index.js b/components/Dashboard/Analytics/VisitsByDayAndNetIncome/index.js
deleted file mode 100644
index 5f6468f..0000000
--- a/components/Dashboard/Analytics/VisitsByDayAndNetIncome/index.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import React from "react";
-import {
- BarChart,
- Bar,
- XAxis,
- Tooltip,
- ResponsiveContainer,
-} from "recharts";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import NetIncome from "./NetIncome";
-
-const data = [
- {
- name: "Sat",
- visited: 2400,
- },
- {
- name: "Sun",
- visited: 1398,
- },
- {
- name: "Mon",
- visited: 9800,
- },
- {
- name: "Tue",
- visited: 3908,
- },
- {
- name: "Wed",
- visited: 4800,
- },
- {
- name: "Thu",
- visited: 3800,
- },
- {
- name: "Fri",
- visited: 4300,
- },
-];
-
-const VisitsByDayAndNetIncome = () => {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
- Visits By Day
-
-
- 1,802
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* NetIncome */}
-
-
- >
- );
-};
-
-export default VisitsByDayAndNetIncome;
diff --git a/components/Dashboard/LMSCourses/ActiveCourse/ActiveCourseChart.js b/components/Dashboard/LMSCourses/ActiveCourse/ActiveCourseChart.js
deleted file mode 100644
index 219c743..0000000
--- a/components/Dashboard/LMSCourses/ActiveCourse/ActiveCourseChart.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component } from "react";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class ActiveCourseChart extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [72, 56, 50],
- options: {
- chart: {
- type: "donut",
- },
- legend: {
- offsetY: 2,
- position: "bottom",
- horizontalAlign: "center",
- },
- labels: ["Courses Done", "On Progress", "To Do"],
- colors: ["#757FEF", "#EE368C", "#00B69B"],
- tooltip: {
- y: {
- formatter: function (val) {
- return "" + val + "%";
- },
- },
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- width: 200,
- },
- legend: {
- position: "bottom",
- },
- },
- },
- ],
- },
- };
- }
-
- render() {
- return (
- <>
-
- >
- );
- }
-}
-
-export default ActiveCourseChart;
diff --git a/components/Dashboard/LMSCourses/ActiveCourse/index.js b/components/Dashboard/LMSCourses/ActiveCourse/index.js
deleted file mode 100644
index 0a5e57e..0000000
--- a/components/Dashboard/LMSCourses/ActiveCourse/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import ActiveCourseChart from "./ActiveCourseChart";
-
-const ActiveCourse = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Active Course
-
-
-
-
-
-
-
-
-
-
- {/* Live Visits Chart */}
-
-
- >
- );
-};
-
-export default ActiveCourse;
diff --git a/components/Dashboard/LMSCourses/CourseCompletion/CourseCompletionList.js b/components/Dashboard/LMSCourses/CourseCompletion/CourseCompletionList.js
deleted file mode 100644
index 45cb222..0000000
--- a/components/Dashboard/LMSCourses/CourseCompletion/CourseCompletionList.js
+++ /dev/null
@@ -1,241 +0,0 @@
-import React, { Component } from "react";
-import { Box, Typography } from "@mui/material";
-import Link from "@mui/material/Link";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class CourseCompletionList extends Component {
- constructor(props) {
- super(props);
- this.state = {
- series: [25],
- series2: [50],
- series3: [30],
- series4: [50],
- options: {
- chart: {
- offsetX: -8,
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: "50%",
- },
- track: {
- background: "#A9C8FB",
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- offsetY: 3,
- color: "#757FEF",
- fontSize: "13px",
- fontWeight: "500",
- },
- },
- },
- },
- fill: {
- colors: ["#757FEF"],
- opacity: 1,
- },
- },
- };
- }
-
- render() {
- return (
- <>
- {/* Course completion 1 */}
-
-
-
-
-
-
-
- Data With Python
-
-
- 5 Lessons
-
-
-
-
-
-
-
-
-
-
-
- {/* Course completion 2 */}
-
-
-
-
-
-
-
- Code Foundation
-
-
- 15 Lessons
-
-
-
-
-
-
-
-
-
-
-
- {/* Course completion 3 */}
-
-
-
-
-
-
-
- Styling With CSS
-
-
- 13 Lessons
-
-
-
-
-
-
-
-
-
-
-
- {/* Course completion 4 */}
-
-
-
-
-
-
-
- Code Learn
-
-
- 15 Lessons
-
-
-
-
-
-
-
-
-
-
- >
- );
- }
-}
-
-export default CourseCompletionList;
diff --git a/components/Dashboard/LMSCourses/CourseCompletion/index.js b/components/Dashboard/LMSCourses/CourseCompletion/index.js
deleted file mode 100644
index 81a1528..0000000
--- a/components/Dashboard/LMSCourses/CourseCompletion/index.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import CourseCompletionList from "./CourseCompletionList";
-
-const CourseCompletion = () => {
- // Dropdown
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Course Completion
-
-
-
-
-
-
-
-
-
-
- {/* CourseCompletionList */}
-
-
- >
- );
-};
-
-export default CourseCompletion;
diff --git a/components/Dashboard/LMSCourses/Courses/CreatedCourses.js b/components/Dashboard/LMSCourses/Courses/CreatedCourses.js
deleted file mode 100644
index b54a4f9..0000000
--- a/components/Dashboard/LMSCourses/Courses/CreatedCourses.js
+++ /dev/null
@@ -1,380 +0,0 @@
-import * as React from "react";
-import { Box } from "@mui/material";
-import { Typography } from "@mui/material";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Link from "@mui/material/Link";
-
-function CreatedCourse(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-CreatedCourse.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(
- courseName,
- courseLink,
- image,
- result,
- badgeClass,
- expirationTime,
- endTime
-) {
- return {
- courseName,
- courseLink,
- image,
- result,
- badgeClass,
- expirationTime,
- endTime,
- };
-}
-
-const rows = [
- createData(
- "Build an iOS Application in Swift Learn the fundamentals",
- "#",
- "/images/course-brand3.png",
- "Passed",
- "successBadge",
- "2021-12-19 02:00 PM",
- "2021-12-19 04:00 PM"
- ),
- createData(
- "Node.js for Beginners: Go From Zero to Hero with Node.js",
- "#",
- "/images/course-brand1.png",
- "87%",
- "primaryBadge",
- "2021-12-19 10:00 AM",
- "2021-12-19 12:00 PM"
- ),
- createData(
- "Learn the fundamentals of working with Angular and how to create",
- "#",
- "/images/course-brand2.png",
- "Failed",
- "dangerBadge",
- "2021-12-19 11:00 AM",
- "2021-12-19 01:00 PM"
- ),
- createData(
- "Programming Language Become a React Native Developer",
- "#",
- "/images/course-brand4.png",
- "90%",
- "primaryBadge",
- "2021-12-19 04:00 PM",
- "2021-12-19 06:00 PM"
- ),
- createData(
- "Build an iOS Application in Swift Learn the fundamentals",
- "#",
- "/images/course-brand3.png",
- "Passed",
- "successBadge",
- "2021-12-19 02:00 PM",
- "2021-12-19 04:00 PM"
- ),
- createData(
- "Node.js for Beginners: Go From Zero to Hero with Node.js",
- "#",
- "/images/course-brand1.png",
- "87%",
- "primaryBadge",
- "2021-12-19 10:00 AM",
- "2021-12-19 12:00 PM"
- ),
- createData(
- "Learn the fundamentals of working with Angular and how to create",
- "#",
- "/images/course-brand2.png",
- "Failed",
- "dangerBadge",
- "2021-12-19 11:00 AM",
- "2021-12-19 01:00 PM"
- ),
- createData(
- "Programming Language Become a React Native Developer",
- "#",
- "/images/course-brand4.png",
- "90%",
- "primaryBadge",
- "2021-12-19 04:00 PM",
- "2021-12-19 06:00 PM"
- ),
-].sort((a, b) => (a.courseName < b.courseName ? -1 : 1));
-
-export default function CreatedCourses() {
- // Table
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(6);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
-
-
- Courses
-
-
-
- Result
-
-
-
- Start Time
-
-
-
- End Time
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
- : rows
- ).map((row) => (
-
-
-
-
-
-
- {row.courseName}
-
-
-
-
-
-
- {row.result}
-
-
-
- {row.expirationTime}
-
-
-
- {row.endTime}
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/Dashboard/LMSCourses/Courses/EnrolledCourses.js b/components/Dashboard/LMSCourses/Courses/EnrolledCourses.js
deleted file mode 100644
index f2747b9..0000000
--- a/components/Dashboard/LMSCourses/Courses/EnrolledCourses.js
+++ /dev/null
@@ -1,366 +0,0 @@
-import * as React from "react";
-import { Box } from "@mui/material";
-import { Typography } from "@mui/material";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Link from "@mui/material/Link";
-
-function EnrolledCourse(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-EnrolledCourse.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(
- courseName,
- courseLink,
- image,
- result,
- badgeClass,
- expirationTime,
- endTime
-) {
- return {
- courseName,
- courseLink,
- image,
- result,
- badgeClass,
- expirationTime,
- endTime,
- };
-}
-
-const rows = [
- createData(
- "Node.js for Beginners: Go From Zero to Hero with Node.js",
- "#",
- "/images/course-brand1.png",
- "87%",
- "primaryBadge",
- "2021-12-19 10:00 AM",
- "2021-12-19 12:00 PM"
- ),
- createData(
- "Learn the fundamentals of working with Angular and how to create",
- "#",
- "/images/course-brand2.png",
- "Failed",
- "dangerBadge",
- "2021-12-19 11:00 AM",
- "2021-12-19 01:00 PM"
- ),
- createData(
- "Build an iOS Application in Swift Learn the fundamentals",
- "#",
- "/images/course-brand3.png",
- "Passed",
- "successBadge",
- "2021-12-19 02:00 PM",
- "2021-12-19 04:00 PM"
- ),
- createData(
- "Programming Language Become a React Native Developer",
- "#",
- "/images/course-brand4.png",
- "90%",
- "primaryBadge",
- "2021-12-19 04:00 PM",
- "2021-12-19 06:00 PM"
- ),
- createData(
- "Node.js for Beginners Go From Zero to Hero with Node.js",
- "#",
- "/images/course-brand1.png",
- "87%",
- "primaryBadge",
- "2021-12-19 10:00 AM",
- "2021-12-19 12:00 PM"
- ),
- createData(
- "Learn the fundamentals of working with React and how to create",
- "#",
- "/images/course-brand2.png",
- "Failed",
- "dangerBadge",
- "2021-12-19 11:00 AM",
- "2021-12-19 01:00 PM"
- ),
- createData(
- "Build an Android Application in Swift Learn the fundamentals",
- "#",
- "/images/course-brand3.png",
- "Passed",
- "successBadge",
- "2021-12-19 02:00 PM",
- "2021-12-19 04:00 PM"
- ),
- createData(
- "Programming Language Become a React.js Developer",
- "#",
- "/images/course-brand4.png",
- "90%",
- "primaryBadge",
- "2021-12-19 04:00 PM",
- "2021-12-19 06:00 PM"
- ),
-].sort((a, b) => (a.courseName < b.courseName ? -1 : 1));
-
-export default function EnrolledCourses() {
- // Table
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(6);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
-
-
- Courses
-
-
-
- Result
-
-
-
- Start Time
-
-
-
- End Time
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
- : rows
- ).map((row) => (
-
-
-
-
-
-
- {row.courseName}
-
-
-
-
-
-
- {row.result}
-
-
-
- {row.expirationTime}
-
-
-
- {row.endTime}
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/Dashboard/LMSCourses/Courses/Tabs.module.css b/components/Dashboard/LMSCourses/Courses/Tabs.module.css
deleted file mode 100644
index 848185b..0000000
--- a/components/Dashboard/LMSCourses/Courses/Tabs.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.tabs ul {
- border-bottom: 1px solid #EEF0F7;
-}
-.tabs ul li {
- color: #260944;
- font-weight: 500;
- font-size: 16px;
- background: #F5F7FA;
- padding: 8px 25px;
- border-radius: 5px 5px 0px 0px;
- outline: 0;
-}
-.tabs ul li:focus:after {
- background: transparent;
-}
-
-/* For dark mode */
-[class="dark"] .tabs ul {
- border-bottom: 1px solid var(--borderColor);
-}
\ No newline at end of file
diff --git a/components/Dashboard/LMSCourses/Courses/index.js b/components/Dashboard/LMSCourses/Courses/index.js
deleted file mode 100644
index 0446558..0000000
--- a/components/Dashboard/LMSCourses/Courses/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import EnrolledCourses from "./EnrolledCourses";
-import CreatedCourses from "./CreatedCourses";
-import styles from '@/components/Dashboard/LMSCourses/Courses/Tabs.module.css';
-
-const Courses = () => {
- return (
- <>
-
-
-
- Enrolled
- Created
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Courses;
diff --git a/components/Dashboard/LMSCourses/CurrentCourses.js b/components/Dashboard/LMSCourses/CurrentCourses.js
deleted file mode 100644
index af7247d..0000000
--- a/components/Dashboard/LMSCourses/CurrentCourses.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Grid from "@mui/material/Grid";
-
-const CurrentCoursesData = [
- {
- id: "1",
- title: "C++",
- subTitle: "It & Software",
- image: "/images/c+.png",
- score: "4.5 Score",
- duration: "37 Days Left",
- },
- {
- id: "2",
- title: "JavaScript",
- subTitle: "Web Development",
- image: "/images/js.png",
- score: "4.5 Score",
- duration: "35 Days Left",
- },
- {
- id: "3",
- title: "Haskell",
- subTitle: "Programming",
- image: "/images/haskell.png",
- score: "4.5 Score",
- duration: "30 Days Left",
- },
-];
-
-const CurrentCourses = () => {
- return (
- <>
-
-
-
- Current Courses
-
-
-
-
- {CurrentCoursesData.map((course) => (
-
-
-
-
-
- {course.title}
-
-
- {course.subTitle}
-
-
-
-
-
-
-
- {course.score}
-
-
-
- {course.duration}
-
-
-
-
- ))}
-
-
- >
- );
-};
-
-export default CurrentCourses;
diff --git a/components/Dashboard/LMSCourses/ExperienceIQ.js b/components/Dashboard/LMSCourses/ExperienceIQ.js
deleted file mode 100644
index ece24df..0000000
--- a/components/Dashboard/LMSCourses/ExperienceIQ.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import Chart from "chart.js/auto";
-import { Bar } from "react-chartjs-2";
-
-const options = {
- indexAxis: "y",
- elements: {
- bar: {
- // borderWidth: 1,
- },
- },
- responsive: true,
- plugins: {
- legend: {
- position: "bottom",
- },
- },
-};
-
-const labels = [
- "Jan",
- "Feb",
- "Mar",
- "Apr",
- "May",
- "Jun",
- "Jul",
- "Aug",
-];
-
-const data = {
- labels,
- datasets: [
- {
- label: "Achivement",
- data: [90, 80, 85, 70, 60, 50, 40, 60,],
- borderColor: "#F765A3",
- backgroundColor: "#FFA5CB",
- },
- {
- label: "Learning Path",
- data: [80, 70, 75, 65, 55, 45, 35, 55,],
- borderColor: "#A155B9",
- backgroundColor: "#E697FF",
- },
- {
- label: "IQ Test Score",
- data: [70, 60, 70, 60, 50, 40, 30, 50,],
- borderColor: "#757FEF",
- backgroundColor: "#2DB6F5",
- },
- ],
-};
-
-const ExperienceIQ = () => {
- // Dropdown
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Experience IQ
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default ExperienceIQ;
diff --git a/components/Dashboard/LMSCourses/Features.js b/components/Dashboard/LMSCourses/Features.js
deleted file mode 100644
index 349c3e0..0000000
--- a/components/Dashboard/LMSCourses/Features.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-
-const FeaturesData = [
- {
- id: "1",
- title: "120",
- subTitle: "Enrolled Courses",
- image: "/images/icon1.png",
- },
- {
- id: "2",
- title: "17",
- subTitle: "Active Courses",
- image: "/images/icon2.png",
- },
- {
- id: "3",
- title: "64",
- subTitle: "Completed Courses",
- image: "/images/icon3.png",
- },
- {
- id: "4",
- title: "2.1M",
- subTitle: "Total Students",
- image: "/images/icon4.png",
- },
-];
-
-const Features = () => {
- return (
- <>
-
- {FeaturesData.map((feature) => (
-
-
-
-
-
-
-
-
-
- {feature.title}
-
-
-
- {feature.subTitle}
-
-
-
-
-
- ))}
-
- >
- );
-};
-
-export default Features;
diff --git a/components/Dashboard/LMSCourses/HoursSpent.js b/components/Dashboard/LMSCourses/HoursSpent.js
deleted file mode 100644
index 99619e1..0000000
--- a/components/Dashboard/LMSCourses/HoursSpent.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-const HoursSpent = () => {
- // Select Form
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- // Chart
- const series = [
- {
- name: "Spent",
- data: [21, 22, 10, 28, 16, 20, 25],
- },
- ];
- const options = {
- chart: {
- toolbar: {
- show: false,
- },
- events: {
- click: function (chart, w, e) {
- // console.log(chart, w, e)
- },
- },
- },
- colors: ["#757FEF"],
- plotOptions: {
- bar: {
- columnWidth: "40%",
- distributed: true,
- },
- },
- dataLabels: {
- enabled: false,
- },
- legend: {
- show: false,
- },
- xaxis: {
- categories: [
- ["Sat"],
- ["Sun"],
- ["Mon"],
- ["Tue"],
- ["Wed"],
- ["Thu"],
- ["Fri"],
- ],
- labels: {
- style: {
- colors: "#A9A9C8",
- fontSize: "12px",
- },
- },
- },
- yaxis: {
- labels: {
- style: {
- colors: "#A9A9C8",
- fontSize: "12px",
- },
- },
- axisBorder: {
- show: false,
- colors: "#f6f6f7",
- },
- },
- fill: {
- opacity: 1,
- },
- tooltip: {
- y: {
- formatter: function (val) {
- return "" + val + " Hours";
- },
- },
- },
- grid: {
- show: true,
- borderColor: "#EDEFF5",
- strokeDashArray: 5,
- },
- };
-
- return (
- <>
-
-
-
- Hours Spent
-
-
-
- Select
-
- Today
- This Week
- Last Month
- Last 12 Months
- All Time
-
-
-
-
-
-
-
- >
- );
-};
-
-export default HoursSpent;
diff --git a/components/Dashboard/LMSCourses/Messages/Messages.module.css b/components/Dashboard/LMSCourses/Messages/Messages.module.css
deleted file mode 100644
index 96c589c..0000000
--- a/components/Dashboard/LMSCourses/Messages/Messages.module.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.messagesList {
- border-bottom: 1px solid #F7FAFF;
- border-right: 2px solid transparent;
- padding-left: 12px;
- padding-right: 12px;
- padding-top: 15px;
- padding-bottom: 10px;
- margin-bottom: 15px;
-}
-.messagesList:last-child {
- margin-bottom: 0;
-}
-.messagesList:hover {
- background: #FAFAFA;
- border-right: 2px solid #757FEF;
-}
-
-/* For dark mode */
-[class="dark"] .messagesList {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .messagesList:hover {
- background: var(--colorBlack);
-}
\ No newline at end of file
diff --git a/components/Dashboard/LMSCourses/Messages/index.js b/components/Dashboard/LMSCourses/Messages/index.js
deleted file mode 100644
index 918fd22..0000000
--- a/components/Dashboard/LMSCourses/Messages/index.js
+++ /dev/null
@@ -1,248 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import Badge from '@mui/material/Badge';
-import styles from "@/components/Dashboard/LMSCourses/Messages/Messages.module.css";
-
-const MessagesData = [
- {
- id: "1",
- name: "Johen Mandel",
- text: "Hi, i want make enquiries...",
- image: "/images/user15.png",
- badgeBgColor: "#5570F1",
- newTag: "New",
- number: "1",
- time: "12:55 AM"
- },
- {
- id: "2",
- name: "Thomas Albart",
- text: "Hi, i want make enquiries...",
- image: "/images/user16.png",
- badgeBgColor: "#5570F1",
- newTag: "New",
- number: "2",
- time: "6:55 AM"
- },
- {
- id: "3",
- name: "Maical Doe",
- text: "Hi, i want make enquiries...",
- image: "/images/user17.png",
- badgeBgColor: "#5570F1",
- newTag: "New",
- number: "3",
- time: "8:00 AM"
- },
-];
-
-const Messages = () => {
- // Dropdown
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Messages
-
-
-
-
-
-
-
-
-
-
-
- {MessagesData.slice(0, 3).map((message) => (
-
-
-
-
-
-
-
-
-
-
-
-
- {message.name}
-
-
- {message.text}
-
-
-
-
-
-
-
- {message.newTag}
-
-
-
- {message.number}
-
-
-
-
- {message.time}
-
-
-
-
- ))}
-
-
- >
- );
-};
-
-export default Messages;
diff --git a/components/Dashboard/LMSCourses/MyPlanning.js b/components/Dashboard/LMSCourses/MyPlanning.js
deleted file mode 100644
index 48067fb..0000000
--- a/components/Dashboard/LMSCourses/MyPlanning.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-
-const MyPlanningData = [
- {
- id: "1",
- image: "/images/3d1.png",
- title: "Animation Learning",
- dateTime: "Dec 14, 08:30 PM",
- },
- {
- id: "2",
- image: "/images/3d2.png",
- title: "UI/UX Research",
- dateTime: "Dec 15, 09:30 PM",
- },
- {
- id: "3",
- image: "/images/3d3.png",
- title: "Machine Learning",
- dateTime: "Dec 16, 10:30 PM",
- },
- {
- id: "4",
- image: "/images/3d4.png",
- title: "Web Development",
- dateTime: "Dec 17, 11:30 PM",
- },
-];
-
-const MyPlanning = () => {
- // Dropdown
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- My Planning
-
-
-
-
-
-
-
-
-
-
- {MyPlanningData.map((plan) => (
-
-
-
-
-
- {plan.title}
-
-
- {plan.dateTime}
-
-
-
- ))}
-
- >
- );
-};
-
-export default MyPlanning;
diff --git a/components/Dashboard/LMSCourses/TopInstructor.js b/components/Dashboard/LMSCourses/TopInstructor.js
deleted file mode 100644
index 712e672..0000000
--- a/components/Dashboard/LMSCourses/TopInstructor.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import Grid from "@mui/material/Grid";
-import Button from "@mui/material/Button";
-
-const TopInstructorData = [
- {
- id: "1",
- image: "/images/user9.png",
- name: "Melanie Grutt",
- userName: "@melgrutt",
- },
- {
- id: "2",
- image: "/images/user10.png",
- name: "Theron Trump",
- userName: "@therontrump",
- },
- {
- id: "3",
- image: "/images/user11.png",
- name: "Johen Mark",
- userName: "@johenmark",
- },
- {
- id: "4",
- image: "/images/user12.png",
- name: "Nicholas Tanner",
- userName: "@nilyeager",
- },
- {
- id: "5",
- image: "/images/user13.png",
- name: "Tyler Mark",
- userName: "@tylemark",
- },
- {
- id: "6",
- image: "/images/user14.png",
- name: "Martina Albart",
- userName: "@martina",
- },
-];
-
-const TopInstructor = () => {
- // Select Form
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- return (
- <>
-
-
-
- Top Instructor
-
-
-
- Select
-
- Today
- This Week
- Last Month
- Last 12 Months
- All Time
-
-
-
-
-
-
- {TopInstructorData.map((instructor) => (
-
-
-
-
-
-
-
- {instructor.name}
-
-
- {instructor.userName}
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
- >
- );
-};
-
-export default TopInstructor;
diff --git a/components/Dashboard/LMSCourses/TopStudents.js b/components/Dashboard/LMSCourses/TopStudents.js
deleted file mode 100644
index 0cff20d..0000000
--- a/components/Dashboard/LMSCourses/TopStudents.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import Grid from "@mui/material/Grid";
-
-const TopStudentsData = [
- {
- id: "1",
- image: "/images/user18.png",
- name: "Melanie Grutt",
- userName: "@melgrutt",
- },
- {
- id: "2",
- image: "/images/user19.png",
- name: "Theron Trump",
- userName: "@therontrump",
- },
- {
- id: "3",
- image: "/images/user20.png",
- name: "Johen Mark",
- userName: "@johenmark",
- },
- {
- id: "4",
- image: "/images/user21.png",
- name: "Nicholas Tanner",
- userName: "@nilyeager",
- },
- {
- id: "5",
- image: "/images/user22.png",
- name: "Tyler Mark",
- userName: "@tylemark",
- },
- {
- id: "6",
- image: "/images/user23.png",
- name: "Martina Albart",
- userName: "@martina",
- },
-];
-
-const TopStudents = () => {
- // Select Form
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- return (
- <>
-
-
-
- Top Students
-
-
-
- Select
-
- Today
- This Week
- Last Month
- Last 12 Months
- All Time
-
-
-
-
-
-
- {TopStudentsData.map((student) => (
-
-
-
-
-
-
-
- {student.name}
-
-
- {student.userName}
-
-
-
-
-
- ))}
-
-
- >
- );
-};
-
-export default TopStudents;
diff --git a/components/Dashboard/LMSCourses/TotalWatched/TotalWatched.module.css b/components/Dashboard/LMSCourses/TotalWatched/TotalWatched.module.css
deleted file mode 100644
index 90fa53f..0000000
--- a/components/Dashboard/LMSCourses/TotalWatched/TotalWatched.module.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.box {
- background: #757FEF;
- border-radius: 10px;
- padding: 25px 20px;
- margin-bottom: 15px;
-}
-.boxList {
- display: flex;
- align-items: center;
- justify-content: space-between;
- position: relative;
- padding-left: 17px;
- border-bottom: 1px solid #878fe5;
- padding-bottom: 18px;
- margin-bottom: 18px;
-}
-.boxList:last-child {
- border-bottom: none;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-.boxList::before {
- content: '';
- background: linear-gradient(149.1deg, #99B8F3 14.61%, #177FCB 130.18%);
- box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
- width: 10px;
- height: 10px;
- position: absolute;
- left: 0;
- top: 5px;
- border-radius: 100px;
-}
-.boxList h4 {
- margin: 0;
- color: #fff;
- font-size: 13px;
- font-weight: 500;
-}
-.boxList p {
- margin: 0;
- color: #fff;
- font-size: 12px;
- font-weight: 500;
-}
\ No newline at end of file
diff --git a/components/Dashboard/LMSCourses/TotalWatched/index.js b/components/Dashboard/LMSCourses/TotalWatched/index.js
deleted file mode 100644
index 54be593..0000000
--- a/components/Dashboard/LMSCourses/TotalWatched/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import styles from "@/components/Dashboard/LMSCourses/TotalWatched/TotalWatched.module.css";
-
-const TotalWatched = () => {
- return (
- <>
-
-
-
Total Watched
-
- 66:15h
-
-
-
-
-
Assignment Completed
-
81%
-
-
-
-
Monthly Progress
-
81%
-
-
-
-
Overall Pass Percentage
-
81%
-
-
- >
- );
-};
-
-export default TotalWatched;
diff --git a/components/Dashboard/LMSCourses/YourProgress.js b/components/Dashboard/LMSCourses/YourProgress.js
deleted file mode 100644
index d7723dd..0000000
--- a/components/Dashboard/LMSCourses/YourProgress.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import {
- LineChart,
- Line,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer
-} from "recharts";
-
-const data = [
- {
- name: "01 Jan",
- Practice: 15,
- Theory: 10,
- },
- {
- name: "02 Jan",
- Practice: 11,
- Theory: 16,
- },
- {
- name: "03 Jan",
- Practice: 17,
- Theory: 12,
- },
- {
- name: "04 Jan",
- Practice: 13,
- Theory: 18,
- },
- {
- name: "05 Jan",
- Practice: 19,
- Theory: 14,
- },
- {
- name: "06 Jan",
- Practice: 15,
- Theory: 20,
- },
- {
- name: "07 Jan",
- Practice: 16,
- Theory: 22,
- },
-];
-
-const YourProgress = () => {
- // Select Form
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- return (
- <>
-
-
-
- Your Progress
-
-
-
- Select
-
- Today
- This Week
- Last Month
- Last 12 Months
- All Time
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default YourProgress;
diff --git a/components/Dashboard/ProjectManagement/ActivityTimeline/ActivityTimeline.module.css b/components/Dashboard/ProjectManagement/ActivityTimeline/ActivityTimeline.module.css
deleted file mode 100644
index 06272f1..0000000
--- a/components/Dashboard/ProjectManagement/ActivityTimeline/ActivityTimeline.module.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.timelineList .tList {
- position: relative;
- margin-bottom: 15px;
- padding-bottom: 15px;
- border-bottom: 1px solid #F7FAFF;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.timelineList .tList:last-child {
- border: none;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-.timelineList .tList .content {
- display: flex;
- align-items: center;
-}
-.timelineList .tList .content img {
- margin-right: 10px;
- width: 27px;
-}
-.timelineList .tList .content h5 {
- margin: 0;
- color: #5B5B98;
- font-size: 13px;
- font-weight: 500;
-}
-.timelineList .tList .date {
- color: #A9A9C8;
- font-size: 12px;
- margin: 0;
-}
-
-@media only screen and (min-width: 1800px) {
- .timelineList .tList {
- margin-bottom: 16.5px;
- padding-bottom: 16.5px;
- }
-}
-
-[dir="rtl"] .timelineList .tList .content img {
- margin-right: 0;
- margin-left: 10px;
-}
-
-/* For dark mode */
-[class="dark"] .timelineList .tList {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .timelineList .tList:last-child {
- border-bottom: none;
-}
-[class="dark"] .timelineList .tList .content h5 {
- color: var(--darkHeadingTextColor);
-}
\ No newline at end of file
diff --git a/components/Dashboard/ProjectManagement/ActivityTimeline/index.js b/components/Dashboard/ProjectManagement/ActivityTimeline/index.js
deleted file mode 100644
index 265ecda..0000000
--- a/components/Dashboard/ProjectManagement/ActivityTimeline/index.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import styles from "@/components/Dashboard/ProjectManagement/ActivityTimeline/ActivityTimeline.module.css";
-
-const ActivityTimelineData = [
- {
- id: "1",
- image: '/images/pdf-icon.png',
- title: "Donald updated the status",
- time: "54 min ago",
- },
- {
- id: "2",
- image: '/images/man.png',
- title: "Design new UI and check sales",
- time: "10 hours ago",
- },
- {
- id: "3",
- title: "James Bangs Client Meeting",
- image: '/images/small-product-img.png',
- time: "5 min ago",
- },
- {
- id: "4",
- title: "Joseph Rust opened new showcase",
- image: '/images/small-product-img2.png',
- time: "10 min ago",
- },
- {
- id: "5",
- title: "Brust opened new showcase",
- image: '/images/small-product-img3.png',
- time: "15 min ago",
- },
- {
- id: "6",
- title: "Create a new project for client",
- image: '/images/man.png',
- time: "20 min ago",
- },
-];
-
-const ActivityTimeline = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Activity Timeline
-
-
-
-
-
-
-
-
-
-
-
- {ActivityTimelineData.slice(0, 6).map((timeline) => (
-
-
-
-
{timeline.title}
-
-
{timeline.time}
-
- ))}
-
-
- >
- );
-};
-
-export default ActivityTimeline;
diff --git a/components/Dashboard/ProjectManagement/AllProjects/AllProjects.module.css b/components/Dashboard/ProjectManagement/AllProjects/AllProjects.module.css
deleted file mode 100644
index 2a6231c..0000000
--- a/components/Dashboard/ProjectManagement/AllProjects/AllProjects.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.members {
- display: flex;
- align-items: center;
- position: relative;
-}
-.members img {
- border-radius: 100%;
- border: 2px solid #fff;
- margin-left: -6px;
-}
\ No newline at end of file
diff --git a/components/Dashboard/ProjectManagement/AllProjects/index.js b/components/Dashboard/ProjectManagement/AllProjects/index.js
deleted file mode 100644
index 09e9feb..0000000
--- a/components/Dashboard/ProjectManagement/AllProjects/index.js
+++ /dev/null
@@ -1,566 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import { styled } from "@mui/material/styles";
-import LinearProgress, {
- linearProgressClasses,
-} from "@mui/material/LinearProgress";
-import styles from "@/components/Dashboard/ProjectManagement/AllProjects/AllProjects.module.css";
-
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
- height: 5,
- borderRadius: 5,
- [`&.${linearProgressClasses.colorPrimary}`]: {
- backgroundColor:
- theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
- },
- [`& .${linearProgressClasses.bar}`]: {
- borderRadius: 5,
- backgroundColor: theme.palette.mode === "light" ? "#757FEF" : "#308fe8",
- },
-}));
-
-const AllProjects = () => {
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- return (
- <>
-
-
-
- All Projects
-
-
-
-
- Select
-
-
-
- Today
-
-
- Last 7 Days
-
-
- This Month
-
-
- Last 12 Months
-
-
- All Time
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default AllProjects;
diff --git a/components/Dashboard/ProjectManagement/CompletedTasks.js b/components/Dashboard/ProjectManagement/CompletedTasks.js
deleted file mode 100644
index 41cfa96..0000000
--- a/components/Dashboard/ProjectManagement/CompletedTasks.js
+++ /dev/null
@@ -1,224 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-const CompletedTasks = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- // Chart
- const series = [
- {
- name: "Task",
- data: [21, 22, 10, 28, 16, 21, 13, 30],
- },
- ];
- const options = {
- chart: {
- toolbar: {
- show: false,
- },
- events: {
- click: function (chart, w, e) {
- // console.log(chart, w, e)
- },
- },
- },
- colors: ["#757FEF"],
- plotOptions: {
- bar: {
- columnWidth: "30%",
- distributed: true,
- borderRadius: 6,
- },
- },
- dataLabels: {
- enabled: false,
- },
- legend: {
- show: false,
- },
- xaxis: {
- categories: [
- ["1 Jan"],
- ["2 Jan"],
- ["3 Jan"],
- ["4 Jan"],
- ["5 Jan"],
- ["6 Jan"],
- ["7 Jan"],
- ["8 Jan"],
- ],
- labels: {
- show: false,
- },
- axisTicks: {
- show: false,
- },
- },
- yaxis: {
- show: false,
- },
- grid: {
- show: false,
- },
- fill: {
- opacity: 1,
- },
- };
-
- return (
- <>
-
-
-
- Completed Tasks
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Target
-
-
- {" "}
- 20k
-
-
-
-
-
- Last Week
-
-
- {" "}
- 5.50k
-
-
-
-
-
- Last Month
-
-
- {" "}
- 50k
-
-
-
-
- >
- );
-};
-
-export default CompletedTasks;
diff --git a/components/Dashboard/ProjectManagement/Features.js b/components/Dashboard/ProjectManagement/Features.js
deleted file mode 100644
index 8829b31..0000000
--- a/components/Dashboard/ProjectManagement/Features.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-
-const FeaturesData = [
- {
- id: "1",
- subTitle: "Due Tasks",
- title: "41",
- iconName: "ri-pie-chart-2-line",
- badgeProgress: "5.80%",
- badgeClass: "successBadge",
- badgeIcon: "ri-arrow-up-s-fill",
- growthText: "Completed: 13 Projects this month",
- },
- {
- id: "2",
- subTitle: "Active Projects",
- title: "65",
- iconName: "ri-briefcase-line",
- badgeProgress: "1.04%",
- badgeClass: "dangerBadge",
- badgeIcon: "ri-arrow-down-s-fill",
- growthText: "Projects this month",
- },
- {
- id: "3",
- subTitle: "Total Hours",
- title: "599",
- iconName: "ri-time-line",
- badgeProgress: "5.80%",
- badgeClass: "successBadge",
- badgeIcon: "ri-arrow-up-s-fill",
- growthText: "Projects this month",
- },
- {
- id: "4",
- subTitle: "Total Projects",
- title: "24k",
- iconName: "ri-shield-check-line",
- badgeProgress: "7.80%",
- badgeClass: "successBadge",
- badgeIcon: "ri-arrow-up-s-fill",
- growthText: "Completed: 13 Projects this month",
- },
-];
-
-const Features = () => {
- return (
- <>
-
- {FeaturesData.map((feature) => (
-
-
-
-
-
-
-
-
-
-
- {feature.subTitle}
-
-
- {feature.title}
-
-
-
-
-
-
- {feature.badgeProgress}
-
-
-
-
-
-
-
- {feature.icon}
- {feature.growthText}
-
-
-
-
- ))}
-
- >
- );
-};
-
-export default Features;
diff --git a/components/Dashboard/ProjectManagement/IssuesSummary/IssuesSummaryChart.js b/components/Dashboard/ProjectManagement/IssuesSummary/IssuesSummaryChart.js
deleted file mode 100644
index 2a0da8f..0000000
--- a/components/Dashboard/ProjectManagement/IssuesSummary/IssuesSummaryChart.js
+++ /dev/null
@@ -1,472 +0,0 @@
-import React, { Component } from "react";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class IssuesSummaryChart extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- data: [
- [1327359500000, 30.95],
- [1327445000000, 31.34],
- [1327532400000, 31.18],
- [1327618800000, 31.05],
- [1327878000000, 31.0],
- [1327964400000, 30.95],
- [1328050800000, 31.24],
- [1328137200000, 31.29],
- [1328223500000, 31.85],
- [1328482800000, 31.86],
- [1328569200000, 32.28],
- [1328655500000, 32.1],
- [1328742000000, 32.65],
- [1328828400000, 32.21],
- [1329087500000, 32.35],
- [1329174000000, 32.44],
- [1329260400000, 32.46],
- [1329346800000, 32.86],
- [1329433200000, 32.75],
- [1329778800000, 32.54],
- [1329865200000, 32.33],
- [1329951500000, 32.97],
- [1330038000000, 33.41],
- [1330297200000, 33.27],
- [1330383500000, 33.27],
- [1330470000000, 32.89],
- [1330556400000, 33.1],
- [1330642800000, 33.73],
- [1330902000000, 33.22],
- [1330988400000, 31.99],
- [1331074800000, 32.41],
- [1331161200000, 33.05],
- [1331247500000, 33.64],
- [1331506800000, 33.56],
- [1331593200000, 34.22],
- [1331679500000, 33.77],
- [1331765000000, 34.17],
- [1331852400000, 33.82],
- [1332111500000, 34.51],
- [1332198000000, 33.16],
- [1332284400000, 33.56],
- [1332370800000, 33.71],
- [1332457200000, 33.81],
- [1332712800000, 34.4],
- [1332799200000, 34.63],
- [1332885500000, 34.46],
- [1332972000000, 34.48],
- [1333058400000, 34.31],
- [1333317500000, 34.7],
- [1333404000000, 34.31],
- [1333490400000, 33.46],
- [1333576800000, 33.59],
- [1333922400000, 33.22],
- [1334008800000, 32.61],
- [1334095200000, 33.01],
- [1334181500000, 33.55],
- [1334268000000, 33.18],
- [1334527200000, 32.84],
- [1334613500000, 33.84],
- [1334700000000, 33.39],
- [1334786400000, 32.91],
- [1334872800000, 33.06],
- [1335132000000, 32.62],
- [1335218400000, 32.4],
- [1335304800000, 33.13],
- [1335391200000, 33.26],
- [1335477500000, 33.58],
- [1335736800000, 33.55],
- [1335823200000, 33.77],
- [1335909500000, 33.76],
- [1335995000000, 33.32],
- [1336082400000, 32.61],
- [1336341500000, 32.52],
- [1336428000000, 32.67],
- [1336514400000, 32.52],
- [1336500800000, 31.92],
- [1336687200000, 32.2],
- [1336946400000, 32.23],
- [1337032800000, 32.33],
- [1337119200000, 32.36],
- [1337205500000, 32.01],
- [1337292000000, 31.31],
- [1337551200000, 32.01],
- [1337637500000, 32.01],
- [1337724000000, 32.18],
- [1337810400000, 31.54],
- [1337896800000, 31.6],
- [1338242400000, 32.05],
- [1338328800000, 31.29],
- [1338415200000, 31.05],
- [1338501500000, 29.82],
- [1338760800000, 30.31],
- [1338847200000, 30.7],
- [1338933500000, 31.69],
- [1339020000000, 31.32],
- [1339106400000, 31.65],
- [1339365500000, 31.13],
- [1339452000000, 31.77],
- [1339538400000, 31.79],
- [1339624800000, 31.67],
- [1339711200000, 32.39],
- [1339970400000, 32.63],
- [1340056800000, 32.89],
- [1340143200000, 31.99],
- [1340229500000, 31.23],
- [1340315000000, 31.57],
- [1340575200000, 30.84],
- [1340661500000, 31.07],
- [1340748000000, 31.41],
- [1340834400000, 31.17],
- [1340920800000, 32.37],
- [1341180000000, 32.19],
- [1341266400000, 32.51],
- [1341439200000, 32.53],
- [1341525500000, 31.37],
- [1341784800000, 30.43],
- [1341871200000, 30.44],
- [1341957500000, 30.2],
- [1342044000000, 30.14],
- [1342130400000, 30.65],
- [1342389500000, 30.4],
- [1342475000000, 30.65],
- [1342562400000, 31.43],
- [1342648800000, 31.89],
- [1342735200000, 31.38],
- [1342994400000, 30.64],
- [1343080800000, 30.02],
- [1343167200000, 30.33],
- [1343253500000, 30.95],
- [1343340000000, 31.89],
- [1343599200000, 31.01],
- [1343685500000, 30.88],
- [1343772000000, 30.69],
- [1343858400000, 30.58],
- [1343944800000, 32.02],
- [1344204000000, 32.14],
- [1344290400000, 32.37],
- [1344376800000, 32.51],
- [1344463200000, 32.65],
- [1344549500000, 32.64],
- [1344808800000, 32.27],
- [1344895200000, 32.1],
- [1344981500000, 32.91],
- [1345068000000, 33.65],
- [1345154400000, 33.8],
- [1345413500000, 33.92],
- [1345500000000, 33.75],
- [1345586400000, 33.84],
- [1345672800000, 33.5],
- [1345759200000, 32.26],
- [1346018400000, 32.32],
- [1346104800000, 32.06],
- [1346191200000, 31.96],
- [1346277500000, 31.46],
- [1346364000000, 31.27],
- [1346709500000, 31.43],
- [1346795000000, 32.26],
- [1346882400000, 32.79],
- [1346968800000, 32.46],
- [1347228000000, 32.13],
- [1347314400000, 32.43],
- [1347400800000, 32.42],
- [1347487200000, 32.81],
- [1347573500000, 33.34],
- [1347832800000, 33.41],
- [1347919200000, 32.57],
- [1348005500000, 33.12],
- [1348092000000, 34.53],
- [1348178400000, 33.83],
- [1348437500000, 33.41],
- [1348524000000, 32.9],
- [1348610400000, 32.53],
- [1348696800000, 32.8],
- [1348783200000, 32.44],
- [1349042400000, 32.62],
- [1349128800000, 32.57],
- [1349215200000, 32.6],
- [1349301500000, 32.68],
- [1349388000000, 32.47],
- [1349647200000, 32.23],
- [1349733500000, 31.68],
- [1349820000000, 31.51],
- [1349906400000, 31.78],
- [1349992800000, 31.94],
- [1350252000000, 32.33],
- [1350338400000, 33.24],
- [1350424800000, 33.44],
- [1350511200000, 33.48],
- [1350597500000, 33.24],
- [1350856800000, 33.49],
- [1350943200000, 33.31],
- [1351029500000, 33.36],
- [1351115000000, 33.4],
- [1351202400000, 34.01],
- [1351638000000, 34.02],
- [1351724400000, 34.36],
- [1351810800000, 34.39],
- [1352070000000, 34.24],
- [1352156400000, 34.39],
- [1352242800000, 33.47],
- [1352329200000, 32.98],
- [1352415500000, 32.9],
- [1352674800000, 32.7],
- [1352761200000, 32.54],
- [1352847500000, 32.23],
- [1352934000000, 32.64],
- [1353020400000, 32.65],
- [1353279500000, 32.92],
- [1353365000000, 32.64],
- [1353452400000, 32.84],
- [1353625200000, 33.4],
- [1353884400000, 33.3],
- [1353970800000, 33.18],
- [1354057200000, 33.88],
- [1354143500000, 34.09],
- [1354230000000, 34.61],
- [1354489200000, 34.7],
- [1354575500000, 35.3],
- [1354662000000, 35.4],
- [1354748400000, 35.14],
- [1354834800000, 35.48],
- [1355094000000, 35.75],
- [1355180400000, 35.54],
- [1355266800000, 35.96],
- [1355353200000, 35.53],
- [1355439500000, 37.56],
- [1355698800000, 37.42],
- [1355785200000, 37.49],
- [1355871500000, 38.09],
- [1355958000000, 37.87],
- [1356044400000, 37.71],
- [1356303500000, 37.53],
- [1356476400000, 37.55],
- [1356562800000, 37.3],
- [1356649200000, 36.9],
- [1356908400000, 37.68],
- [1357081200000, 38.34],
- [1357167500000, 37.75],
- [1357254000000, 38.13],
- [1357513200000, 37.94],
- [1357599500000, 38.14],
- [1357685000000, 38.66],
- [1357772400000, 38.62],
- [1357858800000, 38.09],
- [1358118000000, 38.16],
- [1358204400000, 38.15],
- [1358290800000, 37.88],
- [1358377200000, 37.73],
- [1358463500000, 37.98],
- [1358809200000, 37.95],
- [1358895500000, 38.25],
- [1358982000000, 38.1],
- [1359068400000, 38.32],
- [1359327500000, 38.24],
- [1359414000000, 38.52],
- [1359500400000, 37.94],
- [1359586800000, 37.83],
- [1359673200000, 38.34],
- [1359932400000, 38.1],
- [1350018800000, 38.51],
- [1360105200000, 38.4],
- [1360191500000, 38.07],
- [1360278000000, 39.12],
- [1360537200000, 38.64],
- [1360623500000, 38.89],
- [1360710000000, 38.81],
- [1360796400000, 38.61],
- [1360882800000, 38.63],
- [1361228400000, 38.99],
- [1361314800000, 38.77],
- [1361401200000, 38.34],
- [1361487500000, 38.55],
- [1361746800000, 38.11],
- [1361833200000, 38.59],
- [1361919500000, 39.6],
- ],
- },
- ],
- options: {
- chart: {
- id: "area-datetime",
- zoom: {
- autoScaleYaxis: true,
- },
- },
- annotations: {
- yaxis: [
- {
- y: 30,
- borderColor: "#999",
- label: {
- show: true,
- text: "Support",
- style: {
- color: "#fff",
- background: "#00E396",
- },
- },
- },
- ],
- xaxis: [
- {
- x: new Date("14 Nov 2012").getTime(),
- borderColor: "#999",
- yAxisIndex: 0,
- label: {
- show: true,
- text: "Rally",
- style: {
- color: "#fff",
- background: "#775DD0",
- },
- },
- },
- ],
- },
- dataLabels: {
- enabled: false,
- },
- markers: {
- size: 0,
- style: "hollow",
- },
- xaxis: {
- type: "datetime",
- min: new Date("01 Mar 2012").getTime(),
- tickAmount: 6,
- },
- tooltip: {
- x: {
- format: "dd MMM yyyy",
- },
- },
- fill: {
- type: "gradient",
- gradient: {
- shadeIntensity: 1,
- opacityFrom: 0.7,
- opacityTo: 0.9,
- stops: [0, 100],
- },
- },
- },
-
- selection: "one_year",
- };
- }
-
- updateData(timeline) {
- this.setState({
- selection: timeline,
- });
-
- switch (timeline) {
- case "one_month":
- ApexCharts.exec(
- "area-datetime",
- "zoomX",
- new Date("28 Jan 2013").getTime(),
- new Date("27 Feb 2013").getTime()
- );
- break;
- case "six_months":
- ApexCharts.exec(
- "area-datetime",
- "zoomX",
- new Date("27 Sep 2012").getTime(),
- new Date("27 Feb 2013").getTime()
- );
- break;
- case "one_year":
- ApexCharts.exec(
- "area-datetime",
- "zoomX",
- new Date("27 Feb 2012").getTime(),
- new Date("27 Feb 2013").getTime()
- );
- break;
- case "ytd":
- ApexCharts.exec(
- "area-datetime",
- "zoomX",
- new Date("01 Jan 2013").getTime(),
- new Date("27 Feb 2013").getTime()
- );
- break;
- case "all":
- ApexCharts.exec(
- "area-datetime",
- "zoomX",
- new Date("23 Jan 2012").getTime(),
- new Date("27 Feb 2013").getTime()
- );
- break;
- default:
- }
- }
- render() {
- return (
- <>
-
-
- this.updateData("one_month")}
- className={this.state.selection === "one_month" ? "active" : ""}
- >
- 1M
-
-
- this.updateData("six_months")}
- className={this.state.selection === "six_months" ? "active" : ""}
- >
- 6M
-
-
- this.updateData("one_year")}
- className={this.state.selection === "one_year" ? "active" : ""}
- >
- 1Y
-
-
- this.updateData("ytd")}
- className={this.state.selection === "ytd" ? "active" : ""}
- >
- YTD
-
-
- this.updateData("all")}
- className={this.state.selection === "all" ? "active" : ""}
- >
- ALL
-
-
-
-
-
-
-
- >
- );
- }
-}
-
-export default IssuesSummaryChart;
diff --git a/components/Dashboard/ProjectManagement/IssuesSummary/index.js b/components/Dashboard/ProjectManagement/IssuesSummary/index.js
deleted file mode 100644
index 4f3ff54..0000000
--- a/components/Dashboard/ProjectManagement/IssuesSummary/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import IssuesSummaryChart from "./IssuesSummaryChart";
-
-const IssuesSummary = () => {
- return (
- <>
-
-
-
- Issues Summary
-
-
-
- {/* IssuesSummaryChart */}
-
-
- >
- );
-};
-
-export default IssuesSummary;
diff --git a/components/Dashboard/ProjectManagement/MyTasks.js b/components/Dashboard/ProjectManagement/MyTasks.js
deleted file mode 100644
index c80290f..0000000
--- a/components/Dashboard/ProjectManagement/MyTasks.js
+++ /dev/null
@@ -1,402 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import IconButton from "@mui/material/IconButton";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Tooltip from "@mui/material/Tooltip";
-import Checkbox from '@mui/material/Checkbox';
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-function MyTask(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-MyTask.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(task, dedline, status, badgeClass, assignee, memberName) {
- return {
- task,
- dedline,
- status,
- badgeClass,
- assignee,
- memberName,
- };
-}
-
-const rows = [
- createData(
- "Public Beta Release",
- "14 Feb 2022",
- "On Going",
- "successBadge",
- "/images/user1.png",
- "Wade"
- ),
- createData(
- "Fix Platform Errors",
- "15 Mar 2022",
- "Completed",
- "primaryBadge",
- "/images/user2.png",
- "Dave"
- ),
- createData(
- "Launch our Mobile App",
- "15 Apr 2022",
- "On Going",
- "successBadge",
- "/images/user3.png",
- "Liam"
- ),
- createData(
- "Add the New Pricing Page",
- "15 May 2022",
- "Pending",
- "dangerBadge",
- "/images/user4.png",
- "Nathaniel"
- ),
- createData(
- "Redesign New Online Shop",
- "15 Jun 2022",
- "On Going",
- "successBadge",
- "/images/user5.png",
- "Lewis"
- ),
- createData(
- "Material Ui Design",
- "15 Jul 2022",
- "On Going",
- "successBadge",
- "/images/user6.png",
- "Milton"
- ),
- createData(
- "Add Progress Track",
- "15 Mar 2022",
- "Completed",
- "primaryBadge",
- "/images/user7.png",
- "Claude"
- ),
- createData(
- "Web Design",
- "15 Aug 2022",
- "On Going",
- "successBadge",
- "/images/user8.png",
- "Harvey"
- ),
- createData(
- "Web Development",
- "15 Nov 2022",
- "On Going",
- "successBadge",
- "/images/user9.png",
- "Blake"
- ),
- createData(
- "React App Development",
- "15 Dec 2022",
- "Completed",
- "primaryBadge",
- "/images/user10.png",
- "Antonio"
- ),
- createData(
- "eCommerce Development",
- "15 Nov 2022",
- "On Going",
- "successBadge",
- "/images/user11.png",
- "Conner"
- ),
- createData(
- "App Development",
- "15 Nov 2022",
- "On Going",
- "successBadge",
- "/images/user12.png",
- "Shane"
- ),
-].sort((a, b) => (a.task < b.task ? -1 : 1));
-
-const MyTasks = () => {
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(6);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
- My Tasks
-
-
-
-
-
-
-
-
- Task
-
-
- Dedline
-
-
- Status
-
-
- Assignee
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
- {row.task}
-
-
-
- {row.dedline}
-
-
-
- {row.status}
-
-
-
-
-
-
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default MyTasks;
diff --git a/components/Dashboard/ProjectManagement/TaskDistribution/TaskDistributionChart.js b/components/Dashboard/ProjectManagement/TaskDistribution/TaskDistributionChart.js
deleted file mode 100644
index e9f7d52..0000000
--- a/components/Dashboard/ProjectManagement/TaskDistribution/TaskDistributionChart.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { Component } from "react";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class TaskDistributionChart extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [14, 23, 21, 17],
- options: {
- labels: ['API', 'Frontend', 'Backend', 'Design'],
- colors: ["#B8C8DB", "#A1AADB", "#BA68C8", "#8E72C8"],
- fill: {
- opacity: 0.9,
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- width: 200,
- },
- legend: {
- position: "bottom",
- },
- },
- },
- ],
- },
- };
- }
-
- render() {
- return (
- <>
-
- >
- );
- }
-}
-
-export default TaskDistributionChart;
diff --git a/components/Dashboard/ProjectManagement/TaskDistribution/index.js b/components/Dashboard/ProjectManagement/TaskDistribution/index.js
deleted file mode 100644
index 9c24b01..0000000
--- a/components/Dashboard/ProjectManagement/TaskDistribution/index.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import TaskDistributionChart from "./TaskDistributionChart";
-
-const TaskDistribution = () => {
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- return (
- <>
-
-
-
- Task Distribution
-
-
-
- Select
-
- Today
- Last 7 Days
- Last Month
- Last 12 Months
- All Time
-
-
-
-
-
- {/* TaskDistributionChart */}
-
-
- >
- );
-};
-
-export default TaskDistribution;
diff --git a/components/Dashboard/ProjectManagement/TasksPerformance/TasksPerformanceChart.js b/components/Dashboard/ProjectManagement/TasksPerformance/TasksPerformanceChart.js
deleted file mode 100644
index 9f7bdd8..0000000
--- a/components/Dashboard/ProjectManagement/TasksPerformance/TasksPerformanceChart.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { Component } from "react";
-import { Box, Typography } from "@mui/material";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class TasksPerformanceChart extends Component {
- constructor(props) {
- super(props);
- this.state = {
- series: [76, 67, 61, 90],
- options: {
- plotOptions: {
- radialBar: {
- offsetY: 0,
- startAngle: 0,
- endAngle: 270,
- hollow: {
- margin: 5,
- size: "25%",
- background: "transparent",
- image: undefined,
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- show: false,
- },
- },
- },
- },
- colors: ["#757FEF", "#9EA5F4", "#C8CCF9", "#F1F2FD"],
- labels: ["Completed", "Active", "Assigned", "Pending"],
- legend: {
- show: true,
- floating: true,
- fontSize: "13px",
- position: "left",
- offsetY: 0,
- labels: {
- color: "#5B5B98"
- },
- markers: {
- size: 0,
- },
- formatter: function (seriesName, opts) {
- return seriesName + ": " + opts.w.globals.series[opts.seriesIndex];
- },
- itemMargin: {
- vertical: 3,
- },
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- height: 280
- },
- legend: {
- show: false,
- },
- },
- },
- ],
- fill: {
- opacity: 1,
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
-
-
-
- Target
-
-
- {" "}
- 30k
-
-
-
-
-
- Last Week
-
-
- {" "}
- 40k
-
-
-
-
-
- Last Month
-
-
- {" "}
- 60k
-
-
-
- >
- );
- }
-}
-
-export default TasksPerformanceChart;
diff --git a/components/Dashboard/ProjectManagement/TasksPerformance/index.js b/components/Dashboard/ProjectManagement/TasksPerformance/index.js
deleted file mode 100644
index 3364fb8..0000000
--- a/components/Dashboard/ProjectManagement/TasksPerformance/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import TasksPerformanceChart from "./TasksPerformanceChart";
-
-const TasksPerformance = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Tasks Performance
-
-
-
-
-
-
-
-
-
-
- {/* TasksPerformanceChart */}
-
-
- >
- );
-};
-
-export default TasksPerformance;
diff --git a/components/Dashboard/ProjectManagement/TeamMembers.js b/components/Dashboard/ProjectManagement/TeamMembers.js
deleted file mode 100644
index 7f1eb38..0000000
--- a/components/Dashboard/ProjectManagement/TeamMembers.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import { styled } from "@mui/material/styles";
-import LinearProgress, {
- linearProgressClasses,
-} from "@mui/material/LinearProgress";
-
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
- height: 5,
- borderRadius: 5,
- [`&.${linearProgressClasses.colorPrimary}`]: {
- backgroundColor:
- theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
- },
- [`& .${linearProgressClasses.bar}`]: {
- borderRadius: 5,
- backgroundColor: theme.palette.mode === "light" ? "#757FEF" : "#308fe8",
- },
-}));
-
-const TeamMembersData = [
- {
- id: "1",
- image: "/images/user1.png",
- name: "Jordan Stevenson",
- userName: "@jstevenson5c",
- hours: "110h : 150m",
- task: "258",
- progress: "25",
- },
- {
- id: "2",
- image: "/images/user2.png",
- name: "Lydia Reese",
- userName: "@lreese3b",
- hours: "220h : 58m",
- task: "158",
- progress: "50",
- },
- {
- id: "3",
- image: "/images/user3.png",
- name: "Easin Arafat",
- userName: "@jstevenson5c",
- hours: "315h : 40m",
- task: "250",
- progress: "30",
- },
- {
- id: "4",
- image: "/images/user4.png",
- name: "Laurent Perrier",
- userName: "@laurentperrier",
- hours: "90h : 50m",
- task: "200",
- progress: "75",
- },
- {
- id: "5",
- image: "/images/user5.png",
- name: "Laurent Perrier",
- userName: "@laurentperrier",
- hours: "90h : 50m",
- task: "200",
- progress: "75",
- },
-];
-
-const TeamMembers = () => {
- return (
- <>
-
-
-
- Team Members
-
-
-
-
-
-
-
-
- Member
-
-
-
- Hours
-
-
-
- Task
-
-
-
- Status
-
-
-
-
-
- {TeamMembersData.map((team) => (
-
-
-
-
-
-
- {team.name}
-
- {team.userName}
-
-
-
-
-
- {team.hours}
-
-
-
- {team.task}
-
-
-
-
- {team.progress}%
-
-
-
-
- ))}
-
-
-
-
- >
- );
-};
-
-export default TeamMembers;
diff --git a/components/Dashboard/ProjectManagement/TotalUsers/TotalUsersChart.js b/components/Dashboard/ProjectManagement/TotalUsers/TotalUsersChart.js
deleted file mode 100644
index cb37cd5..0000000
--- a/components/Dashboard/ProjectManagement/TotalUsers/TotalUsersChart.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { Component } from "react";
-import { Box, Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
-
-class TotalUsersChart extends Component {
- constructor(props) {
- super(props);
- this.state = {
- series: [44, 55, 13],
- options: {
- labels: ["Target", "Last week", "Last Month"],
- colors: ["#757FEF", "#90C6E0", "#E040FB"],
- legend: {
- show: false,
- },
- tooltip: {
- y: {
- formatter: function (val) {
- return "" + val + "k";
- },
- },
- },
- responsive: [{
- breakpoint: 480,
- options: {
- chart: {
- height: 280
- }
- }
- }]
- },
- };
- }
-
- render() {
- return (
- <>
-
-
-
-
-
- Target
-
-
- {" "}
- 18k
-
-
-
-
-
- Last Week
-
-
- {" "}
- 5.21k
-
-
-
-
-
- Last Month
-
-
- {" "}
- 32k
-
-
-
- >
- );
- }
-}
-
-export default TotalUsersChart;
diff --git a/components/Dashboard/ProjectManagement/TotalUsers/index.js b/components/Dashboard/ProjectManagement/TotalUsers/index.js
deleted file mode 100644
index 5bee2f2..0000000
--- a/components/Dashboard/ProjectManagement/TotalUsers/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import TotalUsersChart from "./TotalUsersChart";
-
-const TotalUsers = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Total Users
-
-
-
-
-
-
-
-
-
-
- {/* TotalUsersChart */}
-
-
- >
- );
-};
-
-export default TotalUsers;
diff --git a/components/Dashboard/eCommerce/ActivityTimeline/ActivityTimeline.module.css b/components/Dashboard/eCommerce/ActivityTimeline/ActivityTimeline.module.css
deleted file mode 100644
index 4d9b43e..0000000
--- a/components/Dashboard/eCommerce/ActivityTimeline/ActivityTimeline.module.css
+++ /dev/null
@@ -1,92 +0,0 @@
-.timelineList .tList {
- position: relative;
- padding-left: 20px;
- margin-bottom: 18px;
- padding-bottom: 18px;
- border-bottom: 1px solid #F7FAFF;
-}
-.timelineList .tList:last-child {
- border: none;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-.timelineList .tList::before {
- content: '';
- background: linear-gradient(149.1deg, #99B8F3 14.61%, #177FCB 130.18%);
- box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
- width: 10px;
- height: 10px;
- border-radius: 100%;
- position: absolute;
- top: 4px;
- left: 0;
-}
-.timelineList .tList::after {
- content: '';
- background: #F7FAFF;
- width: 3px;
- height: 75px;
- border-radius: 5px;
- position: absolute;
- top: 18px;
- left: 3px;
-}
-.timelineList .tList h4 {
- font-weight: 500;
- font-size: 14px;
- margin: 0 0 10px;
- font-family: var(--bodyFontFamily) !important;
-}
-.timelineList .tList .content {
- display: flex;
- align-items: center;
- margin-bottom: 10px;
-}
-.timelineList .tList .content img {
- margin-right: 10px;
- width: 27px;
-}
-.timelineList .tList .content h5 {
- margin: 0;
- color: #5B5B98;
- font-size: 13px;
- font-weight: 500;
- font-family: var(--bodyFontFamily) !important;
-}
-.timelineList .tList .date {
- color: #A9A9C8;
- font-size: 12px;
- margin: 0;
-}
-
-/* For RTL Style */
-[dir="rtl"] .timelineList .tList {
- padding-left: 0;
- padding-right: 20px;
-}
-[dir="rtl"] .timelineList .tList::before {
- left: auto;
- right: 0;
-}
-[dir="rtl"] .timelineList .tList::after {
- left: auto;
- right: 3px;
-}
-[dir="rtl"] .timelineList .tList .content img {
- margin-right: 0;
- margin-left: 10px;
-}
-
-/* For dark mode */
-[class="dark"] .timelineList .tList {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .timelineList .tList:last-child {
- border-bottom: none;
-}
-[class="dark"] .timelineList .tList::after {
- background: var(--borderColor);
-}
-[class="dark"] .timelineList .tList .content h5 {
- color: var(--darkBodyTextColor) !important;
-}
\ No newline at end of file
diff --git a/components/Dashboard/eCommerce/ActivityTimeline/index.js b/components/Dashboard/eCommerce/ActivityTimeline/index.js
deleted file mode 100644
index 8a86732..0000000
--- a/components/Dashboard/eCommerce/ActivityTimeline/index.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import styles from "@/components/Dashboard/eCommerce/ActivityTimeline/ActivityTimeline.module.css";
-
-const ActivityTimelineData = [
- {
- id: "1",
- title: "5 Invoices have been paid",
- subTitle: "Invoices have been paid to the company.",
- icon: "/images/pdf-icon.png",
- date: "11:47 PM Wednesday",
- },
- {
- id: "2",
- title: "8 Invoices have been paid",
- subTitle: "Create a new project for client Johnson.",
- icon: "/images/man.png",
- date: "April, 18",
- },
- {
- id: "3",
- title: "Added new style collection",
- subTitle: "Product uploaded By Nesta Technologies.",
- icon: "/images/small-product-img.png",
- date: "02:14 PM Today",
- },
-];
-
-const ActivityTimeline = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Activity Timeline
-
-
-
-
-
-
-
-
-
-
-
- {ActivityTimelineData.slice(0, 3).map((timeline) => (
-
-
{timeline.title}
-
-
-
{timeline.subTitle}
-
-
{timeline.date}
-
- ))}
-
-
- >
- );
-};
-
-export default ActivityTimeline;
diff --git a/components/Dashboard/eCommerce/AudienceOverview.js b/components/Dashboard/eCommerce/AudienceOverview.js
deleted file mode 100644
index d80a35f..0000000
--- a/components/Dashboard/eCommerce/AudienceOverview.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-const AudienceOverview = () => {
- const series = [
- {
- name: "Orders",
- data: [44, 55, 57, 56, 61, 58, 63, 60, 66, 70, 75, 80],
- },
- {
- name: "Net Revenue",
- data: [76, 85, 101, 98, 87, 105, 91, 114, 94, 100, 110, 96],
- },
- {
- name: "Refunds",
- data: [35, 41, 36, 26, 45, 48, 52, 53, 41, 55, 45, 60],
- },
- ];
- const options = {
- chart: {
- toolbar: {
- show: false,
- },
- },
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: "40%",
- endingShape: "rounded",
- borderRadius: "4",
- },
- },
- dataLabels: {
- enabled: false,
- },
- stroke: {
- show: true,
- width: 1,
- colors: ["transparent"],
- },
- colors: ["#757FEF", "#2DB6F5", "#EE368C"],
- xaxis: {
- categories: [
- "Jan",
- "Feb",
- "Mar",
- "Apr",
- "May",
- "Jun",
- "Jul",
- "Aug",
- "Sep",
- "Oct",
- "Nov",
- "Dec",
- ],
- labels: {
- style: {
- colors: "#A9A9C8",
- fontSize: "12px",
- },
- },
- },
- yaxis: {
- labels: {
- style: {
- colors: "#A9A9C8",
- fontSize: "12px",
- },
- },
- axisBorder: {
- show: false,
- colors: "#f6f6f7",
- },
- },
- fill: {
- opacity: 1,
- },
- tooltip: {
- y: {
- formatter: function (val) {
- return "$ " + val + " Thousands";
- },
- },
- },
- legend: {
- offsetY: 12,
- position: "top",
- horizontalAlign: "right",
- },
- grid: {
- show: true,
- borderColor: "#f6f6f7",
- },
- };
-
- return (
- <>
-
-
- Audience Overview
-
-
-
-
- >
- );
-};
-
-export default AudienceOverview;
diff --git a/components/Dashboard/eCommerce/BestSellingProducts.js b/components/Dashboard/eCommerce/BestSellingProducts.js
deleted file mode 100644
index 7546e7e..0000000
--- a/components/Dashboard/eCommerce/BestSellingProducts.js
+++ /dev/null
@@ -1,250 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-
-function createData(
- productName,
- productImg,
- productId,
- price,
- stockAvailable,
- stockTotal,
- stockStatus
-) {
- return {
- productName,
- productImg,
- productId,
- price,
- stockAvailable,
- stockTotal,
- stockStatus,
- };
-}
-
-const rows = [
- createData(
- "Admas airpod x-Zon",
- "/images/product5.png",
- "ID: A3652",
- "$289.50",
- "450",
- "550",
- "Stock"
- ),
- createData(
- "Smart watch F8 Pro",
- "/images/product6.png",
- "ID: A3653",
- "$189.50",
- "430",
- "550",
- "Stock"
- ),
- createData(
- "Nord Fold ZL",
- "/images/product7.png",
- "ID: A3654",
- "$280.50",
- "410",
- "550",
- "Stock"
- ),
- createData(
- "Wall Clock Cimbina",
- "/images/product8.png",
- "ID: A3655",
- "$389.50",
- "420",
- "550",
- "Stock"
- ),
- createData(
- "Galaxo T6 Munsun",
- "/images/product9.png",
- "ID: A3656",
- "$289.50",
- "440",
- "550",
- "Stock"
- ),
- createData(
- "Laptop Macos Pro",
- "/images/product1.png",
- "ID: A3657",
- "$489.50",
- "340",
- "550",
- "Stock"
- ),
-];
-
-const BestSellingProducts = () => {
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
- return (
- <>
-
-
-
- Best Selling Products
-
-
-
- Select
-
- Today
- Last 7 Days
- Last Month
- Last 12 Months
- All Time
-
-
-
-
-
-
-
-
- {rows.map((row) => (
-
-
-
-
-
-
- {row.productName}
-
-
-
- {row.productId}
-
-
-
-
-
-
- {row.price}
-
-
-
- {row.stockAvailable}{" "}
-
- {row.stockTotal}
-
-
-
-
- {row.stockStatus}
-
-
- ))}
-
-
-
-
- >
- );
-};
-
-export default BestSellingProducts;
diff --git a/components/Dashboard/eCommerce/Features.js b/components/Dashboard/eCommerce/Features.js
deleted file mode 100644
index 688e724..0000000
--- a/components/Dashboard/eCommerce/Features.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-import TrendingUpIcon from "@mui/icons-material/TrendingUp";
-import TrendingDownIcon from "@mui/icons-material/TrendingDown";
-
-const FeaturesData = [
- {
- id: "1",
- title: "$25,890",
- subTitle: "Total Sales",
- image: "/images/graph-icon.png",
- icon: ,
- growthText: "1.3% Up from past week",
- color: "successColor",
- },
- {
- id: "2",
- title: "$25,890",
- subTitle: "Total Orders",
- image: "/images/work-icon.png",
- icon: ,
- growthText: "1.5% Up from past week",
- color: "successColor",
- },
- {
- id: "3",
- title: "183.35M",
- subTitle: "Total Customers",
- image: "/images/users-icon.png",
- icon: ,
- growthText: "1.6% Up from past week",
- color: "dangerColor",
- },
-];
-
-const Features = () => {
- return (
- <>
-
- {FeaturesData.map((feature) => (
-
-
-
-
-
- {feature.title}
-
-
- {feature.subTitle}
-
-
-
-
-
-
-
-
-
-
-
- {feature.icon}
-
- {feature.growthText}
-
-
-
-
- ))}
-
- >
- );
-};
-
-export default Features;
diff --git a/components/Dashboard/eCommerce/Impressions.js b/components/Dashboard/eCommerce/Impressions.js
deleted file mode 100644
index 0d61882..0000000
--- a/components/Dashboard/eCommerce/Impressions.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import Box from "@mui/material/Box";
-import { Typography } from "@mui/material";
-
-const Impressions = () => {
- return (
- <>
-
-
- Impressions
-
-
-
- $12,875{" "}
-
- 10%
-
-
-
-
- Compared to $21,490 last year
-
-
- >
- );
-};
-
-export default Impressions;
diff --git a/components/Dashboard/eCommerce/LiveVisitsOnOurSite/LiveVisitsChart.js b/components/Dashboard/eCommerce/LiveVisitsOnOurSite/LiveVisitsChart.js
deleted file mode 100644
index a1c1f83..0000000
--- a/components/Dashboard/eCommerce/LiveVisitsOnOurSite/LiveVisitsChart.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component } from "react";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class LiveVisitsChart extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [72, 56],
- options: {
- chart: {
- type: "donut",
- },
- labels: ["Domestic", "International"],
- colors: ["#757FEF", "#EE368C"],
- tooltip: {
- y: {
- formatter: function (val) {
- return "" + val + "%";
- },
- },
- },
- legend: {
- offsetY: 2,
- position: "bottom",
- horizontalAlign: "center",
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- width: 200,
- },
- legend: {
- position: "bottom",
- },
- },
- },
- ],
- },
- };
- }
-
- render() {
- return (
- <>
-
- >
- );
- }
-}
-
-export default LiveVisitsChart;
diff --git a/components/Dashboard/eCommerce/LiveVisitsOnOurSite/index.js b/components/Dashboard/eCommerce/LiveVisitsOnOurSite/index.js
deleted file mode 100644
index 20914ea..0000000
--- a/components/Dashboard/eCommerce/LiveVisitsOnOurSite/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import LiveVisitsChart from "./LiveVisitsChart";
-
-const LiveVisitsOnOurSite = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Live Visits on Our Site
-
-
-
-
-
-
-
-
-
-
- {/* Live Visits Chart */}
-
-
- >
- );
-};
-
-export default LiveVisitsOnOurSite;
diff --git a/components/Dashboard/eCommerce/NewCustomers/NewCustomers.module.css b/components/Dashboard/eCommerce/NewCustomers/NewCustomers.module.css
deleted file mode 100644
index fc6d6e1..0000000
--- a/components/Dashboard/eCommerce/NewCustomers/NewCustomers.module.css
+++ /dev/null
@@ -1,68 +0,0 @@
-.newCustomerList {
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 1px solid #F7FAFF;
- padding-bottom: 17px;
- margin-bottom: 17px;
-}
-.newCustomerList:last-child {
- border-bottom: none;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-.leftContent {
- display: flex;
- align-items: center;
-}
-.leftContent img {
- border-radius: 100%;
- width: 38px;
- height: 38px;
- margin-right: 10px;
-}
-.leftContent h3 {
- margin: 0;
- font-size: 13px;
-}
-.leftContent p {
- margin: 0;
- color: #A9A9C8;
- font-size: 12px;
-}
-
-.rightContent {
- display: flex;
- align-items: center;
-}
-.price {
- color: #5B5B98;
- font-size: 13px;
- margin-right: 10px;
-}
-.order {
- background: rgba(117, 127, 239, 0.1);
- border-radius: 13.5px;
- color: #757FEF;
- font-weight: 500;
- font-size: 11px;
- padding: 5px 10px;
-}
-
-/* For RTL Style */
-[dir="rtl"] .leftContent img {
- margin-right: 0;
- margin-left: 10px;
-}
-[dir="rtl"] .price {
- margin-right: 0;
- margin-left: 10px;
-}
-
-/* For dark mode */
-[class="dark"] .newCustomerList {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .newCustomerList:last-child {
- border-bottom: none;
-}
\ No newline at end of file
diff --git a/components/Dashboard/eCommerce/NewCustomers/index.js b/components/Dashboard/eCommerce/NewCustomers/index.js
deleted file mode 100644
index c75d6ce..0000000
--- a/components/Dashboard/eCommerce/NewCustomers/index.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import styles from "@/components/Dashboard/eCommerce/NewCustomers/NewCustomers.module.css"
-
-const NewCustomersData = [
- {
- id: "1",
- image: "/images/user2.png",
- name: "Jordan Stevenson",
- userName: "@jstevenson5c",
- price: "$289.50",
- order: "15 Orders",
- },
- {
- id: "2",
- image: "/images/user3.png",
- name: "Lydia Reese",
- userName: "@lreese3b",
- price: "$289.50",
- order: "15 Orders",
- },
- {
- id: "3",
- image: "/images/user4.png",
- name: "Easin Arafat",
- userName: "@jstevenson5c",
- price: "$289.50",
- order: "15 Orders",
- },
- {
- id: "4",
- image: "/images/user5.png",
- name: "Easin Arafat",
- userName: "@jstevenson5c",
- price: "$289.50",
- order: "15 Orders",
- }
-];
-
-const NewCustomers = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- New Customers
-
-
-
-
-
-
-
-
-
-
-
- {NewCustomersData.slice(0, 4).map((customer) => (
-
-
-
-
-
{customer.name}
-
{customer.userName}
-
-
-
-
- {customer.price}
-
-
- {customer.order}
-
-
-
- ))}
-
-
- >
- );
-};
-
-export default NewCustomers;
diff --git a/components/Dashboard/eCommerce/Ratings/RatingsChart.js b/components/Dashboard/eCommerce/Ratings/RatingsChart.js
deleted file mode 100644
index 5be2072..0000000
--- a/components/Dashboard/eCommerce/Ratings/RatingsChart.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { Component } from 'react';
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class RatingsChart extends Component {
-
- constructor(props) {
- super(props);
-
- this.state = {
-
- series: [44, 55, 41, 17, 15],
- options: {
- chart: {
- width: 300,
- },
- colors: ["#757FEF", "#00B69B", "#2DB6F5", "#EE368C", "#FFBC2B"],
- plotOptions: {
- pie: {
- startAngle: -90,
- endAngle: 270
- }
- },
- dataLabels: {
- enabled: false
- },
- fill: {
- type: 'gradient',
- },
- legend: {
- show: false,
- formatter: function(val, opts) {
- return val + " - " + opts.w.globals.series[opts.seriesIndex]
- }
- },
- responsive: [{
- breakpoint: 480,
- options: {
- chart: {
- width: 200
- },
- legend: {
- position: 'bottom'
- }
- }
- }]
- },
- };
- }
-
- render() {
- return (
- <>
-
- >
- );
- }
-}
-
-export default RatingsChart;
diff --git a/components/Dashboard/eCommerce/Ratings/index.js b/components/Dashboard/eCommerce/Ratings/index.js
deleted file mode 100644
index 2dc62b8..0000000
--- a/components/Dashboard/eCommerce/Ratings/index.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from "react";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-import StarBorderIcon from "@mui/icons-material/StarBorder";
-import RatingsChart from "./RatingsChart";
-
-const Ratings = () => {
- return (
- <>
-
-
-
-
- Ratings
-
-
-
- YEAR OF 2022
-
-
-
- 8.14k{" "}
-
- Review
-
-
-
-
- {" "}
- 4.5{" "}
-
- +15.6%
- {" "}
- From previous period
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Ratings;
diff --git a/components/Dashboard/eCommerce/RecentOrders.js b/components/Dashboard/eCommerce/RecentOrders.js
deleted file mode 100644
index 8bc476a..0000000
--- a/components/Dashboard/eCommerce/RecentOrders.js
+++ /dev/null
@@ -1,678 +0,0 @@
-import * as React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-
-function RecentOrder(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-RecentOrder.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(
- orderID,
- productImg,
- productTitle,
- customer,
- price,
- vendor,
- date,
- status,
- badgeClass,
- rating
-) {
- return {
- orderID,
- productImg,
- productTitle,
- customer,
- price,
- vendor,
- date,
- status,
- badgeClass,
- rating,
- };
-}
-
-const rows = [
- createData(
- "#SK258",
- "/images/product1.png",
- "Laptop Macos Pro",
- "Colin Firth",
- "$289.50",
- "Boetic Fashion",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK259",
- "/images/product2.png",
- "Smart Camera XD6",
- "Wade Dave",
- "$189.50",
- "Aronic Conver",
- "2021-12-19",
- "Out of Stock",
- "dangerBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK260",
- "/images/product3.png",
- "Pixi 8 Wireless Airphone",
- "Seth Riley",
- "$250.50",
- "Lotu Arnich",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK261",
- "/images/product4.png",
- "Jebble Smart Watch",
- "Gilbert Dan",
- "$289.50",
- "Zoetic Fashion",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK262",
- "/images/product5.png",
- "Admas Airpod x-Zon",
- "Joshua Glen",
- "$289.50",
- "Airpod",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK263",
- "/images/product6.png",
- "Smart Satch F8 Pro",
- "Lewis Milton",
- "$289.50",
- "Smart Satch",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK264",
- "/images/product7.png",
- "Nord Fold ZL",
- "Liam Ethan",
- "$289.50",
- "Nord",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK265",
- "/images/product8.png",
- "Wall Clock Cimbina",
- "Ramon Miles",
- "$289.50",
- "Clock",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK266",
- "/images/product9.png",
- "Galaxo T6 Munsun",
- "Brian Roberto",
- "$289.50",
- "Smart Phone",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK267",
- "/images/product1.png",
- "Laptop Macos Pro",
- "Colin Firth",
- "$289.50",
- "Boetic Fashion",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK268",
- "/images/product2.png",
- "Smart Camera XD6",
- "Wade Dave",
- "$189.50",
- "Aronic Conver",
- "2021-12-19",
- "Out of Stock",
- "dangerBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK269",
- "/images/product3.png",
- "Pixi 8 Wireless Airphone",
- "Seth Riley",
- "$250.50",
- "Lotu Arnich",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK270",
- "/images/product4.png",
- "Jebble Smart Watch",
- "Gilbert Dan",
- "$289.50",
- "Zoetic Fashion",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK271",
- "/images/product5.png",
- "Admas Airpod x-Zon",
- "Joshua Glen",
- "$289.50",
- "Airpod",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK272",
- "/images/product6.png",
- "Smart Satch F8 Pro",
- "Lewis Milton",
- "$289.50",
- "Smart Satch",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK273",
- "/images/product7.png",
- "Nord Fold ZL",
- "Liam Ethan",
- "$289.50",
- "Nord",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK274",
- "/images/product8.png",
- "Wall Clock Cimbina",
- "Ramon Miles",
- "$289.50",
- "Clock",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK275",
- "/images/product9.png",
- "Galaxo T6 Munsun",
- "Brian Roberto",
- "$289.50",
- "Smart Phone",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
-].sort((a, b) => (a.orderID < b.orderID ? -1 : 1));
-
-export default function RecentOrders() {
- // Select
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- // Table
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(6);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
- Recent Orders
-
-
-
-
- Select
-
-
-
- Today
-
-
- Last 7 Days
-
-
- Last Month
-
- Last 12 Months
-
- All Time
-
-
-
-
-
-
-
-
-
-
-
- Order ID
-
-
-
- Product
-
-
-
- Customer
-
-
-
- Price
-
-
-
- Vendor
-
-
-
- Date
-
-
-
- Status
-
-
-
- Rating
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
- {row.orderID}
-
-
-
-
-
-
- {row.productTitle}
-
-
-
-
-
- {row.customer}
-
-
-
- {row.price}
-
-
-
- {row.vendor}
-
-
-
- {row.date}
-
-
-
- {row.status}
-
-
-
- {row.rating}
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/Dashboard/eCommerce/RevenuStatus.js b/components/Dashboard/eCommerce/RevenuStatus.js
deleted file mode 100644
index 555b747..0000000
--- a/components/Dashboard/eCommerce/RevenuStatus.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-
-const RevenuStatus = () => {
- // Select Form
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- // Chart
- const series = [
- {
- name: "income",
- data: [50, 48, 47, 48, 50, 48, 50, 48, 50, 48, 48],
- },
- ];
- const options = {
- chart: {
- toolbar: {
- show: false,
- },
- },
- dataLabels: {
- enabled: false,
- },
- stroke: {
- curve: "smooth",
- },
- colors: ["#757FEF"],
- xaxis: {
- categories: [
- "1 Jan",
- "2 Jan",
- "3 Jan",
- "4 Jan",
- "5 Jan",
- "6 Jan",
- "7 Jan",
- "8 Jan",
- "9 Jan",
- "10 Jan",
- "11 Jan",
- "12 Jan",
- ],
- labels: {
- style: {
- colors: "#A9A9C8",
- fontSize: "12px",
- },
- },
- },
- grid: {
- show: true,
- borderColor: "#f6f6f7",
- },
- tooltip: {
- x: {
- format: "dd/MM/yy HH:mm",
- },
- y: {
- formatter: function (val) {
- return "$" + val + "k";
- },
- },
- },
- };
-
- return (
- <>
-
-
-
- Revenu Status
-
-
-
- Select
-
- Today
- Last 7 Days
- Last Month
- Last 12 Months
- All Time
-
-
-
-
-
-
-
- >
- );
-};
-
-export default RevenuStatus;
diff --git a/components/Dashboard/eCommerce/SalesByCountries/SalesByCountriesChart.js b/components/Dashboard/eCommerce/SalesByCountries/SalesByCountriesChart.js
deleted file mode 100644
index 5097bef..0000000
--- a/components/Dashboard/eCommerce/SalesByCountries/SalesByCountriesChart.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { Component } from "react";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class SalesByCountriesChart extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [75, 40, 65, 80],
- options: {
- labels: ["Canada", "Russia", "Greenland", "USA"],
- colors: ["#757FEF", "#2DB6F5", "#EE368C", "#00B69B"],
- tooltip: {
- y: {
- formatter: function (val) {
- return "" + val + "%";
- },
- },
- },
- legend: {
- offsetY: 2,
- position: "bottom",
- horizontalAlign: "center",
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- width: 200,
- },
- legend: {
- position: "bottom",
- },
- },
- },
- ],
- },
- };
- }
-
- render() {
- return (
- <>
-
- >
- );
- }
-}
-
-export default SalesByCountriesChart;
diff --git a/components/Dashboard/eCommerce/SalesByCountries/index.js b/components/Dashboard/eCommerce/SalesByCountries/index.js
deleted file mode 100644
index 9cc6b85..0000000
--- a/components/Dashboard/eCommerce/SalesByCountries/index.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import { styled } from "@mui/material/styles";
-import LinearProgress, {
- linearProgressClasses,
-} from "@mui/material/LinearProgress";
-import SalesByCountriesChart from "./SalesByCountriesChart";
-
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
- height: 5,
- borderRadius: 5,
- [`&.${linearProgressClasses.colorPrimary}`]: {
- backgroundColor:
- theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
- },
- [`& .${linearProgressClasses.bar}`]: {
- borderRadius: 5,
- backgroundColor: theme.palette.mode === "light" ? "#757FEF" : "#F7FAFF",
- },
-}));
-
-const SalesByCountries = () => {
- // Dropdown
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Sales by Countries
-
-
-
-
-
-
-
-
-
-
- {/* SalesByCountriesChart */}
-
-
-
-
-
- Canada
-
- 75%
-
-
-
-
-
-
-
- Russia
-
- 40%
-
-
-
-
-
-
-
- Greenland
-
- 65%
-
-
-
-
-
-
-
- USA
-
- 80%
-
-
-
-
- >
- );
-};
-
-export default SalesByCountries;
diff --git a/components/Dashboard/eCommerce/TeamMembersList.js b/components/Dashboard/eCommerce/TeamMembersList.js
deleted file mode 100644
index 501e15e..0000000
--- a/components/Dashboard/eCommerce/TeamMembersList.js
+++ /dev/null
@@ -1,448 +0,0 @@
-import * as React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-
-function TeamMembersLists(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-TeamMembersLists.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(
- userImg,
- name,
- userName,
- email,
- roleIcon,
- role,
- status,
- badgeClass
-) {
- return {
- userImg,
- name,
- userName,
- email,
- roleIcon,
- role,
- status,
- badgeClass,
- };
-}
-
-const rows = [
- createData(
- "/images/user1.png",
- "Jordan Stevenson",
- "@jstevenson5c",
- "jordansteven@admash.com",
- "ri-macbook-line",
- "Admin",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user2.png",
- "Lucile Young",
- "@lyoung4a",
- "lucile@admash.com",
- "ri-edit-line",
- "Editor",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user3.png",
- "Francis Frank",
- "@ffrank7e",
- "frank43@admash.com",
- "ri-shield-user-fill",
- "Maintainer",
- "Inactive",
- "dangerBadge"
- ),
- createData(
- "/images/user4.png",
- "Phoebe Patterson",
- "@ppatterson2g",
- "phoebe57@admash.com",
- "ri-settings-2-line",
- "Author",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user5.png",
- "Wade Dave",
- "@wadedave",
- "wadedave1@admash.com",
- "ri-edit-line",
- "Editor",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user6.png",
- "Seth Ivan",
- "@sethivan",
- "sethivansds@admash.com",
- "ri-edit-line",
- "Editor",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user7.png",
- "Riley",
- "@riley",
- "riley@admash.com",
- "ri-edit-line",
- "Editor",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user8.png",
- "Gilbert",
- "@gilbert",
- "gilbert@admash.com",
- "ri-edit-line",
- "Editor",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user9.png",
- "Jorge",
- "@jorge",
- "jorge@admash.com",
- "ri-edit-line",
- "Editor",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user10.png",
- "Dan Brian",
- "@danbrian",
- "danbrian@admash.com",
- "ri-edit-line",
- "Editor",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user11.png",
- "Roberto",
- "@roberto",
- "roberto@admash.com",
- "ri-edit-line",
- "Editor",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user12.png",
- "Ramon",
- "@ramon",
- "ramon@admash.com",
- "ri-edit-line",
- "Editor",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user13.png",
- "Miles Liam",
- "@milesliam",
- "milesliam@admash.com",
- "ri-edit-line",
- "Editor",
- "Active",
- "successBadge"
- ),
- createData(
- "/images/user14.png",
- "Nathaniel",
- "@nathaniel",
- "nathaniel@admash.com",
- "ri-edit-line",
- "Editor",
- "Active",
- "successBadge"
- ),
-].sort((a, b) => (a.name < b.name ? -1 : 1));
-export default function TeamMembersList() {
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(5);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
- Team Members List
-
-
-
-
-
-
-
-
- User
-
-
-
- Email
-
-
-
- Role
-
-
-
- Status
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
-
-
-
-
- {row.name}
-
-
- {row.userName}
-
-
-
-
-
-
- {row.email}
-
-
-
- {row.role}
-
-
-
- {row.status}
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/Dashboard/eCommerce/VisitsByDay.js b/components/Dashboard/eCommerce/VisitsByDay.js
deleted file mode 100644
index a001f89..0000000
--- a/components/Dashboard/eCommerce/VisitsByDay.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-const VisitsByDay = () => {
- const series = [
- {
- name: "Visits This Weak",
- data: [80, 50, 30, 40, 100, 20, 50],
- },
- {
- name: "Visits Last Weak",
- data: [20, 30, 40, 80, 20, 80, 100],
- },
- ];
- const options = {
- chart: {
- toolbar: {
- show: false,
- },
- dropShadow: {
- enabled: true,
- blur: 1,
- left: 1,
- top: 1,
- },
- },
- stroke: {
- width: 2,
- },
- colors: ["#2DB6F5", "#E289F2"],
- fill: {
- opacity: 0.1,
- },
- markers: {
- size: 5,
- },
- xaxis: {
- categories: [
- "Monday",
- "Tuesday",
- "Wendsday",
- "Thursday",
- "Friday",
- "Saturday",
- "Sunday",
- ],
- },
- };
-
- return (
- <>
-
-
-
- Visits by Day
-
-
-
- Total 248.5k Visits
-
-
-
-
-
- >
- );
-};
-
-export default VisitsByDay;
diff --git a/components/Email/EmailLists.js b/components/Email/EmailLists.js
deleted file mode 100644
index a997dba..0000000
--- a/components/Email/EmailLists.js
+++ /dev/null
@@ -1,474 +0,0 @@
-import * as React from "react";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import Tooltip from "@mui/material/Tooltip";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import PrintIcon from "@mui/icons-material/Print";
-import DeleteIcon from "@mui/icons-material/Delete";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import Checkbox from "@mui/material/Checkbox";
-import StarBorderIcon from "@mui/icons-material/StarBorder";
-import StarIcon from "@mui/icons-material/Star";
-import Link from "next/link";
-
-const label = { inputProps: { "aria-label": "Checkbox demo" } };
-
-function EmailList(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-EmailList.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(name, text, readEmail, date) {
- return { name, readEmail, text, date };
-}
-
-const rows = [
- createData(
- "Benthon, me (2)",
- "Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
- "/email/read-email",
- "1 Jan 2022"
- ),
- createData(
- "Lucas Kriebel (via Twitter)",
- "Last pic over my village – Yeah i'd like that! Do you remember the video som..",
- "/email/read-email",
- "2 Jan 2022"
- ),
- createData(
- "Andrew Zimmer",
- "Mochila Beta: Subscription Confirmed – You've been confirmed! Welcome to ",
- "/email/read-email",
- "3 Jan 2022"
- ),
- createData(
- "Infinity HR",
- "You've been confirmed! Welcome to the ruling class of the inbox. For your ",
- "/email/read-email",
- "4 Jan 2022"
- ),
- createData(
- "keter (3)",
- "For your records, here is a copy of the information you submitted to us...",
- "/email/read-email",
- "5 Jan 2022"
- ),
- createData(
- "Death to Stock 2",
- "Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
- "/email/read-email",
- "6 Jan 2022"
- ),
- createData(
- "Heter (10)",
- "Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
- "/email/read-email",
- "7 Jan 2022"
- ),
- createData(
- "Erik, me (15)",
- "For your records, here is a copy of the information you submitted to us...",
- "/email/read-email",
- "8 Jan 2022"
- ),
- createData(
- "Death to Stock 4",
- "Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
- "/email/read-email",
- "9 Jan 2022"
- ),
- createData(
- "Erik, me (5)",
- "Off on Thursday – Eff that place, you might as well stay here with us inst",
- "/email/read-email",
- "10 Jan 2022"
- ),
- createData(
- "Benthon, me (3)",
- "Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
- "/email/read-email",
- "11 Jan 2022"
- ),
- createData(
- "Google Drive Team",
- "This Week's Top Stories – Our top pick for you on Medium this week The",
- "/email/read-email",
- "12 Jan 2022"
- ),
- createData(
- "Benthon, me (13)",
- "Weekend on Revibe – Today's Friday and we thought maybe you want so",
- "/email/read-email",
- "13 Jan 2022"
- ),
- createData(
- "me, Susanna (11)",
- "You can now use your storage in Google Drive – Hey Nicklas Sandell! Tha",
- "/email/read-email",
- "14 Jan 2022"
- ),
- createData(
- "EnvyTheme Support",
- "New Ticket Reply - eDemy - Michel Valenzuela",
- "/email/read-email",
- "15 Jan 2022"
- ),
- createData(
- "EnvyTheme Support 2",
- "New Ticket Reply - Abev - Manos Pappas",
- "/email/read-email",
- "16 Jan 2022"
- ),
- createData(
- "EnvyTheme Support 3",
- "New Ticket Reply - Lofi - Adarsh Raj",
- "/email/read-email",
- "11 Jan 2022"
- ),
-].sort((a, b) => (a.name < b.name ? -1 : 1));
-
-export default function EmailLists() {
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- // Dropdown
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Email List
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
-
-
-
- }
- checkedIcon={ }
- />
-
-
-
-
- {row.name}
-
-
-
-
-
- {row.text}
-
-
-
-
- {row.date}
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/Email/LeftSidebar.js b/components/Email/LeftSidebar.js
deleted file mode 100644
index 18b4965..0000000
--- a/components/Email/LeftSidebar.js
+++ /dev/null
@@ -1,375 +0,0 @@
-import React from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-import { Box } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import IconButton from "@mui/material/IconButton";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import ClearIcon from "@mui/icons-material/Clear";
-import SendIcon from "@mui/icons-material/Send";
-import styles from "@/components/Email/LeftSidebar.module.css";
-import Badge from "@mui/material/Badge";
-import { styled } from "@mui/material/styles";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import CloseIcon from "@mui/icons-material/Close";
-import PropTypes from "prop-types";
-
-import dynamic from "next/dynamic";
-const RichTextEditor = dynamic(() => import("@mantine/rte"), {
- ssr: false,
-});
-
-// Compose Modal
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
- "& .MuiDialogContent-root": {
- padding: theme.spacing(2),
- },
- "& .MuiDialogActions-root": {
- padding: theme.spacing(1),
- },
-}));
-
-function BootstrapDialogTitle(props) {
- const { children, onClose, ...other } = props;
-
- return (
-
- {children}
- {onClose ? (
- theme.palette.grey[500],
- }}
- >
-
-
- ) : null}
-
- );
-}
-
-BootstrapDialogTitle.propTypes = {
- children: PropTypes.node,
- onClose: PropTypes.func.isRequired,
-};
-// End Compose Modal
-
-const LeftSidebar = () => {
- const router = useRouter();
-
- // Compose modal
- const [open, setOpen] = React.useState(false);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
- const handleClose = () => {
- setOpen(false);
- };
-
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
- // End Compose Modal
-
- return (
- <>
-
-
- Compose
-
-
-
- mailbox
-
-
- {/* Nav */}
-
-
-
-
- Inbox
-
-
-
-
-
-
-
- Important
-
-
-
-
-
- Snooozed
-
-
-
-
-
- Draft
-
-
-
-
-
-
- Sent Mail
-
-
-
-
-
- Spam
-
-
-
-
-
-
- Trash
-
-
-
-
-
- labels
-
-
- {/* Nav */}
-
-
-
-
- Personal
-
-
-
-
-
-
- Company
-
-
-
-
-
- Wallet Balance
-
-
-
-
-
- Friends
-
-
-
-
-
- Family
-
-
-
-
-
- {/* Compose Modal */}
-
-
-
-
- New Message
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {" "}
- Send
-
-
-
-
-
-
-
- >
- );
-};
-
-export default LeftSidebar;
diff --git a/components/Email/LeftSidebar.module.css b/components/Email/LeftSidebar.module.css
deleted file mode 100644
index 2b917cb..0000000
--- a/components/Email/LeftSidebar.module.css
+++ /dev/null
@@ -1,75 +0,0 @@
-.leftNav {
- padding: 0;
- margin: 0 0 30px;
- list-style-type: none;
-}
-.leftNav li {
- margin-bottom: 15px;
-}
-.leftNav li:last-child {
- margin-bottom: 0;
-}
-.leftNav li a {
- text-decoration: none;
- color: #260944;
- font-size: 13px;
- font-weight: 500;
- display: block;
-}
-.leftNav li a:hover, .leftNav li a:hover i {
- color: var(--primaryColor);
-}
-.leftNav li.active > a, .leftNav li.active a i {
- color: var(--primaryColor) !important;
-}
-.leftNav li a i {
- color: #818093;
- font-size: 16px;
- position: relative;
- top: 3px;
- margin-right: 5px;
-}
-
-.leftNav li ul {
- padding: 0;
- margin: 15px 0 0;
- list-style-type: none;
-}
-.leftNav li ul li {
- position: relative;
- padding-left: 45px;
-}
-.leftNav li ul li::before {
- content: "";
- background-color: #818093;
- width: 6px;
- height: 6px;
- border-radius: 100%;
- position: absolute;
- left: 30px;
- top: 6px;
-}
-.leftNav li ul li a {
- color: #5B5B98;
- font-size: 13.5px;
-}
-
-/* For dark mode */
-[class="dark"] .leftNav li a {
- color: var(--darkHeadingTextColor);
-}
-[class="dark"] .leftNav li a span {
- color: var(--darkHeadingTextColor);
-}
-[class="dark"] .leftNav li a i {
- color: var(--darkHeadingTextColor);
-}
-[class="dark"] .leftNav li ul li a {
- color: var(--darkHeadingTextColor);
-}
-[class="dark"] .leftNav li a:hover, [class="dark"] .leftNav li a:hover i {
- color: var(--primaryColor);
-}
-[class="dark"] .leftNav li.active > a span, [class="dark"] .leftNav li.active a i {
- color: var(--primaryColor);
-}
\ No newline at end of file
diff --git a/components/Email/ReadEmailContent.js b/components/Email/ReadEmailContent.js
deleted file mode 100644
index 97b69dc..0000000
--- a/components/Email/ReadEmailContent.js
+++ /dev/null
@@ -1,262 +0,0 @@
-import * as React from "react";
-import IconButton from "@mui/material/IconButton";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import Tooltip from "@mui/material/Tooltip";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import PrintIcon from "@mui/icons-material/Print";
-import DeleteIcon from "@mui/icons-material/Delete";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-import ReplyIcon from '@mui/icons-material/Reply';
-import ForwardToInboxIcon from '@mui/icons-material/ForwardToInbox';
-
-export default function ReadEmailContent() {
- // Dropdown
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- EnvyTheme Support
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Jordan Stevenson
- From: jonathan@domain.com
-
-
-
-
- Dec 14, 2017, 5:17 AM
-
-
-
-
-
- Hi Coderthemes!
-
-
-
- Last pic over my village – Yeah i'd like that! Do you remember the video som..
-
-
-
- Praesent dui ex, dapibus eget mauris ut, finibus vestibulum enim. Quisque arcu leo, facilisis in fringilla id, luctus in tortor. Nunc vestibulum est quis orci varius viverra. Curabitur dictum volutpat massa vulputate molestie. In at felis ac velit maximus convallis.
-
-
-
- Sed elementum turpis eu lorem interdum, sed porttitor eros commodo. Nam eu venenatis tortor, id lacinia diam. Sed aliquam in dui et porta. Sed bibendum orci non tincidunt ultrices. Vivamus fringilla, mi lacinia dapibus condimentum, ipsum urna lacinia lacus, vel tincidunt mi nibh sit amet lorem.
-
-
-
- Checklists/Sub-tasks
-
-
-
- Your design preferences (Color, style, shapes, Fonts, others)
- Tell me, why is your item different?
- Do you want to bring up a specific feature of your item? If yes, please tell me
- Do you have any preference or specific thing you would like to change or improve on your item page?
- Do you want to include your item's or your provider's logo on the page? if yes, please send it to me in vector format (Ai or EPS)
- Please provide me with the copy or text to display
-
-
-
- Filling in this form with the above information will ensure that they will be able to start work quickly.
-
-
-
- You can complete your order by putting your coupon code into the Promotional code box and clicking ‘Apply Coupon’.
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
-
-
-
-
- }
- sx={{
- borderRadius: '8px',
- textTransform: 'capitalize',
- color: "#fff !important",
- }}
- className="mr-2"
- >
- Reply
-
-
- }
- sx={{
- borderRadius: '8px',
- textTransform: 'capitalize',
- color: "#fff !important",
- }}
- >
- Forward
-
-
-
-
- >
- );
-}
diff --git a/components/Forms/AdvancedElements/BasicDatePicker.js b/components/Forms/AdvancedElements/BasicDatePicker.js
deleted file mode 100644
index f93bc5e..0000000
--- a/components/Forms/AdvancedElements/BasicDatePicker.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import TextField from '@mui/material/TextField';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-
-export default function BasicDatePicker() {
- const [value, setValue] = React.useState(null);
-
- return (
-
-
- Date Picker
-
-
-
- {
- setValue(newValue);
- }}
- renderInput={(params) => }
- />
-
-
- );
-}
\ No newline at end of file
diff --git a/components/Forms/AdvancedElements/BasicTimePicker.js b/components/Forms/AdvancedElements/BasicTimePicker.js
deleted file mode 100644
index 3d5ec58..0000000
--- a/components/Forms/AdvancedElements/BasicTimePicker.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react';
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import TextField from '@mui/material/TextField';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-
-export default function BasicTimePicker() {
-
- const [value, setValue] = React.useState(null);
-
- return (
-
-
- Time Picker
-
-
-
- {
- setValue(newValue);
- }}
- renderInput={(params) => }
- />
-
-
- );
-}
\ No newline at end of file
diff --git a/components/Forms/AdvancedElements/CountrySelect.js b/components/Forms/AdvancedElements/CountrySelect.js
deleted file mode 100644
index 6c5812f..0000000
--- a/components/Forms/AdvancedElements/CountrySelect.js
+++ /dev/null
@@ -1,488 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-
-export default function CountrySelect() {
- return (
- <>
-
-
- Country Select
-
-
- option.label}
- renderOption={(props, option) => (
- img': { mr: 2, flexShrink: 0 } }} {...props}>
-
- {option.label} ({option.code}) +{option.phone}
-
- )}
- renderInput={(params) => (
-
- )}
- />
-
- >
- );
-}
-
-// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
-const countries = [
- { code: 'AD', label: 'Andorra', phone: '376' },
- {
- code: 'AE',
- label: 'United Arab Emirates',
- phone: '971',
- },
- { code: 'AF', label: 'Afghanistan', phone: '93' },
- {
- code: 'AG',
- label: 'Antigua and Barbuda',
- phone: '1-268',
- },
- { code: 'AI', label: 'Anguilla', phone: '1-264' },
- { code: 'AL', label: 'Albania', phone: '355' },
- { code: 'AM', label: 'Armenia', phone: '374' },
- { code: 'AO', label: 'Angola', phone: '244' },
- { code: 'AQ', label: 'Antarctica', phone: '672' },
- { code: 'AR', label: 'Argentina', phone: '54' },
- { code: 'AS', label: 'American Samoa', phone: '1-684' },
- { code: 'AT', label: 'Austria', phone: '43' },
- {
- code: 'AU',
- label: 'Australia',
- phone: '61',
- suggested: true,
- },
- { code: 'AW', label: 'Aruba', phone: '297' },
- { code: 'AX', label: 'Alland Islands', phone: '358' },
- { code: 'AZ', label: 'Azerbaijan', phone: '994' },
- {
- code: 'BA',
- label: 'Bosnia and Herzegovina',
- phone: '387',
- },
- { code: 'BB', label: 'Barbados', phone: '1-246' },
- { code: 'BD', label: 'Bangladesh', phone: '880' },
- { code: 'BE', label: 'Belgium', phone: '32' },
- { code: 'BF', label: 'Burkina Faso', phone: '226' },
- { code: 'BG', label: 'Bulgaria', phone: '359' },
- { code: 'BH', label: 'Bahrain', phone: '973' },
- { code: 'BI', label: 'Burundi', phone: '257' },
- { code: 'BJ', label: 'Benin', phone: '229' },
- { code: 'BL', label: 'Saint Barthelemy', phone: '590' },
- { code: 'BM', label: 'Bermuda', phone: '1-441' },
- { code: 'BN', label: 'Brunei Darussalam', phone: '673' },
- { code: 'BO', label: 'Bolivia', phone: '591' },
- { code: 'BR', label: 'Brazil', phone: '55' },
- { code: 'BS', label: 'Bahamas', phone: '1-242' },
- { code: 'BT', label: 'Bhutan', phone: '975' },
- { code: 'BV', label: 'Bouvet Island', phone: '47' },
- { code: 'BW', label: 'Botswana', phone: '267' },
- { code: 'BY', label: 'Belarus', phone: '375' },
- { code: 'BZ', label: 'Belize', phone: '501' },
- {
- code: 'CA',
- label: 'Canada',
- phone: '1',
- suggested: true,
- },
- {
- code: 'CC',
- label: 'Cocos (Keeling) Islands',
- phone: '61',
- },
- {
- code: 'CD',
- label: 'Congo, Democratic Republic of the',
- phone: '243',
- },
- {
- code: 'CF',
- label: 'Central African Republic',
- phone: '236',
- },
- {
- code: 'CG',
- label: 'Congo, Republic of the',
- phone: '242',
- },
- { code: 'CH', label: 'Switzerland', phone: '41' },
- { code: 'CI', label: "Cote d'Ivoire", phone: '225' },
- { code: 'CK', label: 'Cook Islands', phone: '682' },
- { code: 'CL', label: 'Chile', phone: '56' },
- { code: 'CM', label: 'Cameroon', phone: '237' },
- { code: 'CN', label: 'China', phone: '86' },
- { code: 'CO', label: 'Colombia', phone: '57' },
- { code: 'CR', label: 'Costa Rica', phone: '506' },
- { code: 'CU', label: 'Cuba', phone: '53' },
- { code: 'CV', label: 'Cape Verde', phone: '238' },
- { code: 'CW', label: 'Curacao', phone: '599' },
- { code: 'CX', label: 'Christmas Island', phone: '61' },
- { code: 'CY', label: 'Cyprus', phone: '357' },
- { code: 'CZ', label: 'Czech Republic', phone: '420' },
- {
- code: 'DE',
- label: 'Germany',
- phone: '49',
- suggested: true,
- },
- { code: 'DJ', label: 'Djibouti', phone: '253' },
- { code: 'DK', label: 'Denmark', phone: '45' },
- { code: 'DM', label: 'Dominica', phone: '1-767' },
- {
- code: 'DO',
- label: 'Dominican Republic',
- phone: '1-809',
- },
- { code: 'DZ', label: 'Algeria', phone: '213' },
- { code: 'EC', label: 'Ecuador', phone: '593' },
- { code: 'EE', label: 'Estonia', phone: '372' },
- { code: 'EG', label: 'Egypt', phone: '20' },
- { code: 'EH', label: 'Western Sahara', phone: '212' },
- { code: 'ER', label: 'Eritrea', phone: '291' },
- { code: 'ES', label: 'Spain', phone: '34' },
- { code: 'ET', label: 'Ethiopia', phone: '251' },
- { code: 'FI', label: 'Finland', phone: '358' },
- { code: 'FJ', label: 'Fiji', phone: '679' },
- {
- code: 'FK',
- label: 'Falkland Islands (Malvinas)',
- phone: '500',
- },
- {
- code: 'FM',
- label: 'Micronesia, Federated States of',
- phone: '691',
- },
- { code: 'FO', label: 'Faroe Islands', phone: '298' },
- {
- code: 'FR',
- label: 'France',
- phone: '33',
- suggested: true,
- },
- { code: 'GA', label: 'Gabon', phone: '241' },
- { code: 'GB', label: 'United Kingdom', phone: '44' },
- { code: 'GD', label: 'Grenada', phone: '1-473' },
- { code: 'GE', label: 'Georgia', phone: '995' },
- { code: 'GF', label: 'French Guiana', phone: '594' },
- { code: 'GG', label: 'Guernsey', phone: '44' },
- { code: 'GH', label: 'Ghana', phone: '233' },
- { code: 'GI', label: 'Gibraltar', phone: '350' },
- { code: 'GL', label: 'Greenland', phone: '299' },
- { code: 'GM', label: 'Gambia', phone: '220' },
- { code: 'GN', label: 'Guinea', phone: '224' },
- { code: 'GP', label: 'Guadeloupe', phone: '590' },
- { code: 'GQ', label: 'Equatorial Guinea', phone: '240' },
- { code: 'GR', label: 'Greece', phone: '30' },
- {
- code: 'GS',
- label: 'South Georgia and the South Sandwich Islands',
- phone: '500',
- },
- { code: 'GT', label: 'Guatemala', phone: '502' },
- { code: 'GU', label: 'Guam', phone: '1-671' },
- { code: 'GW', label: 'Guinea-Bissau', phone: '245' },
- { code: 'GY', label: 'Guyana', phone: '592' },
- { code: 'HK', label: 'Hong Kong', phone: '852' },
- {
- code: 'HM',
- label: 'Heard Island and McDonald Islands',
- phone: '672',
- },
- { code: 'HN', label: 'Honduras', phone: '504' },
- { code: 'HR', label: 'Croatia', phone: '385' },
- { code: 'HT', label: 'Haiti', phone: '509' },
- { code: 'HU', label: 'Hungary', phone: '36' },
- { code: 'ID', label: 'Indonesia', phone: '62' },
- { code: 'IE', label: 'Ireland', phone: '353' },
- { code: 'IL', label: 'Israel', phone: '972' },
- { code: 'IM', label: 'Isle of Man', phone: '44' },
- { code: 'IN', label: 'India', phone: '91' },
- {
- code: 'IO',
- label: 'British Indian Ocean Territory',
- phone: '246',
- },
- { code: 'IQ', label: 'Iraq', phone: '964' },
- {
- code: 'IR',
- label: 'Iran, Islamic Republic of',
- phone: '98',
- },
- { code: 'IS', label: 'Iceland', phone: '354' },
- { code: 'IT', label: 'Italy', phone: '39' },
- { code: 'JE', label: 'Jersey', phone: '44' },
- { code: 'JM', label: 'Jamaica', phone: '1-876' },
- { code: 'JO', label: 'Jordan', phone: '962' },
- {
- code: 'JP',
- label: 'Japan',
- phone: '81',
- suggested: true,
- },
- { code: 'KE', label: 'Kenya', phone: '254' },
- { code: 'KG', label: 'Kyrgyzstan', phone: '996' },
- { code: 'KH', label: 'Cambodia', phone: '855' },
- { code: 'KI', label: 'Kiribati', phone: '686' },
- { code: 'KM', label: 'Comoros', phone: '269' },
- {
- code: 'KN',
- label: 'Saint Kitts and Nevis',
- phone: '1-869',
- },
- {
- code: 'KP',
- label: "Korea, Democratic People's Republic of",
- phone: '850',
- },
- { code: 'KR', label: 'Korea, Republic of', phone: '82' },
- { code: 'KW', label: 'Kuwait', phone: '965' },
- { code: 'KY', label: 'Cayman Islands', phone: '1-345' },
- { code: 'KZ', label: 'Kazakhstan', phone: '7' },
- {
- code: 'LA',
- label: "Lao People's Democratic Republic",
- phone: '856',
- },
- { code: 'LB', label: 'Lebanon', phone: '961' },
- { code: 'LC', label: 'Saint Lucia', phone: '1-758' },
- { code: 'LI', label: 'Liechtenstein', phone: '423' },
- { code: 'LK', label: 'Sri Lanka', phone: '94' },
- { code: 'LR', label: 'Liberia', phone: '231' },
- { code: 'LS', label: 'Lesotho', phone: '266' },
- { code: 'LT', label: 'Lithuania', phone: '370' },
- { code: 'LU', label: 'Luxembourg', phone: '352' },
- { code: 'LV', label: 'Latvia', phone: '371' },
- { code: 'LY', label: 'Libya', phone: '218' },
- { code: 'MA', label: 'Morocco', phone: '212' },
- { code: 'MC', label: 'Monaco', phone: '377' },
- {
- code: 'MD',
- label: 'Moldova, Republic of',
- phone: '373',
- },
- { code: 'ME', label: 'Montenegro', phone: '382' },
- {
- code: 'MF',
- label: 'Saint Martin (French part)',
- phone: '590',
- },
- { code: 'MG', label: 'Madagascar', phone: '261' },
- { code: 'MH', label: 'Marshall Islands', phone: '692' },
- {
- code: 'MK',
- label: 'Macedonia, the Former Yugoslav Republic of',
- phone: '389',
- },
- { code: 'ML', label: 'Mali', phone: '223' },
- { code: 'MM', label: 'Myanmar', phone: '95' },
- { code: 'MN', label: 'Mongolia', phone: '976' },
- { code: 'MO', label: 'Macao', phone: '853' },
- {
- code: 'MP',
- label: 'Northern Mariana Islands',
- phone: '1-670',
- },
- { code: 'MQ', label: 'Martinique', phone: '596' },
- { code: 'MR', label: 'Mauritania', phone: '222' },
- { code: 'MS', label: 'Montserrat', phone: '1-664' },
- { code: 'MT', label: 'Malta', phone: '356' },
- { code: 'MU', label: 'Mauritius', phone: '230' },
- { code: 'MV', label: 'Maldives', phone: '960' },
- { code: 'MW', label: 'Malawi', phone: '265' },
- { code: 'MX', label: 'Mexico', phone: '52' },
- { code: 'MY', label: 'Malaysia', phone: '60' },
- { code: 'MZ', label: 'Mozambique', phone: '258' },
- { code: 'NA', label: 'Namibia', phone: '264' },
- { code: 'NC', label: 'New Caledonia', phone: '687' },
- { code: 'NE', label: 'Niger', phone: '227' },
- { code: 'NF', label: 'Norfolk Island', phone: '672' },
- { code: 'NG', label: 'Nigeria', phone: '234' },
- { code: 'NI', label: 'Nicaragua', phone: '505' },
- { code: 'NL', label: 'Netherlands', phone: '31' },
- { code: 'NO', label: 'Norway', phone: '47' },
- { code: 'NP', label: 'Nepal', phone: '977' },
- { code: 'NR', label: 'Nauru', phone: '674' },
- { code: 'NU', label: 'Niue', phone: '683' },
- { code: 'NZ', label: 'New Zealand', phone: '64' },
- { code: 'OM', label: 'Oman', phone: '968' },
- { code: 'PA', label: 'Panama', phone: '507' },
- { code: 'PE', label: 'Peru', phone: '51' },
- { code: 'PF', label: 'French Polynesia', phone: '689' },
- { code: 'PG', label: 'Papua New Guinea', phone: '675' },
- { code: 'PH', label: 'Philippines', phone: '63' },
- { code: 'PK', label: 'Pakistan', phone: '92' },
- { code: 'PL', label: 'Poland', phone: '48' },
- {
- code: 'PM',
- label: 'Saint Pierre and Miquelon',
- phone: '508',
- },
- { code: 'PN', label: 'Pitcairn', phone: '870' },
- { code: 'PR', label: 'Puerto Rico', phone: '1' },
- {
- code: 'PS',
- label: 'Palestine, State of',
- phone: '970',
- },
- { code: 'PT', label: 'Portugal', phone: '351' },
- { code: 'PW', label: 'Palau', phone: '680' },
- { code: 'PY', label: 'Paraguay', phone: '595' },
- { code: 'QA', label: 'Qatar', phone: '974' },
- { code: 'RE', label: 'Reunion', phone: '262' },
- { code: 'RO', label: 'Romania', phone: '40' },
- { code: 'RS', label: 'Serbia', phone: '381' },
- { code: 'RU', label: 'Russian Federation', phone: '7' },
- { code: 'RW', label: 'Rwanda', phone: '250' },
- { code: 'SA', label: 'Saudi Arabia', phone: '966' },
- { code: 'SB', label: 'Solomon Islands', phone: '677' },
- { code: 'SC', label: 'Seychelles', phone: '248' },
- { code: 'SD', label: 'Sudan', phone: '249' },
- { code: 'SE', label: 'Sweden', phone: '46' },
- { code: 'SG', label: 'Singapore', phone: '65' },
- { code: 'SH', label: 'Saint Helena', phone: '290' },
- { code: 'SI', label: 'Slovenia', phone: '386' },
- {
- code: 'SJ',
- label: 'Svalbard and Jan Mayen',
- phone: '47',
- },
- { code: 'SK', label: 'Slovakia', phone: '421' },
- { code: 'SL', label: 'Sierra Leone', phone: '232' },
- { code: 'SM', label: 'San Marino', phone: '378' },
- { code: 'SN', label: 'Senegal', phone: '221' },
- { code: 'SO', label: 'Somalia', phone: '252' },
- { code: 'SR', label: 'Suriname', phone: '597' },
- { code: 'SS', label: 'South Sudan', phone: '211' },
- {
- code: 'ST',
- label: 'Sao Tome and Principe',
- phone: '239',
- },
- { code: 'SV', label: 'El Salvador', phone: '503' },
- {
- code: 'SX',
- label: 'Sint Maarten (Dutch part)',
- phone: '1-721',
- },
- {
- code: 'SY',
- label: 'Syrian Arab Republic',
- phone: '963',
- },
- { code: 'SZ', label: 'Swaziland', phone: '268' },
- {
- code: 'TC',
- label: 'Turks and Caicos Islands',
- phone: '1-649',
- },
- { code: 'TD', label: 'Chad', phone: '235' },
- {
- code: 'TF',
- label: 'French Southern Territories',
- phone: '262',
- },
- { code: 'TG', label: 'Togo', phone: '228' },
- { code: 'TH', label: 'Thailand', phone: '66' },
- { code: 'TJ', label: 'Tajikistan', phone: '992' },
- { code: 'TK', label: 'Tokelau', phone: '690' },
- { code: 'TL', label: 'Timor-Leste', phone: '670' },
- { code: 'TM', label: 'Turkmenistan', phone: '993' },
- { code: 'TN', label: 'Tunisia', phone: '216' },
- { code: 'TO', label: 'Tonga', phone: '676' },
- { code: 'TR', label: 'Turkey', phone: '90' },
- {
- code: 'TT',
- label: 'Trinidad and Tobago',
- phone: '1-868',
- },
- { code: 'TV', label: 'Tuvalu', phone: '688' },
- {
- code: 'TW',
- label: 'Taiwan, Republic of China',
- phone: '886',
- },
- {
- code: 'TZ',
- label: 'United Republic of Tanzania',
- phone: '255',
- },
- { code: 'UA', label: 'Ukraine', phone: '380' },
- { code: 'UG', label: 'Uganda', phone: '256' },
- {
- code: 'US',
- label: 'United States',
- phone: '1',
- suggested: true,
- },
- { code: 'UY', label: 'Uruguay', phone: '598' },
- { code: 'UZ', label: 'Uzbekistan', phone: '998' },
- {
- code: 'VA',
- label: 'Holy See (Vatican City State)',
- phone: '379',
- },
- {
- code: 'VC',
- label: 'Saint Vincent and the Grenadines',
- phone: '1-784',
- },
- { code: 'VE', label: 'Venezuela', phone: '58' },
- {
- code: 'VG',
- label: 'British Virgin Islands',
- phone: '1-284',
- },
- {
- code: 'VI',
- label: 'US Virgin Islands',
- phone: '1-340',
- },
- { code: 'VN', label: 'Vietnam', phone: '84' },
- { code: 'VU', label: 'Vanuatu', phone: '678' },
- { code: 'WF', label: 'Wallis and Futuna', phone: '681' },
- { code: 'WS', label: 'Samoa', phone: '685' },
- { code: 'XK', label: 'Kosovo', phone: '383' },
- { code: 'YE', label: 'Yemen', phone: '967' },
- { code: 'YT', label: 'Mayotte', phone: '262' },
- { code: 'ZA', label: 'South Africa', phone: '27' },
- { code: 'ZM', label: 'Zambia', phone: '260' },
- { code: 'ZW', label: 'Zimbabwe', phone: '263' },
-];
\ No newline at end of file
diff --git a/components/Forms/AdvancedElements/DefaultSelect.js b/components/Forms/AdvancedElements/DefaultSelect.js
deleted file mode 100644
index 5cec2ad..0000000
--- a/components/Forms/AdvancedElements/DefaultSelect.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-export default function DefaultSelect() {
-
- const [age, setAge] = React.useState('');
-
- const handleChange = (event) => {
- setAge(event.target.value);
- };
-
- return (
- <>
-
-
- Default Select
-
-
-
- Age
-
- Ten
- Twenty
- Thirty
-
-
-
- >
- );
-}
diff --git a/components/Forms/AdvancedElements/MultiSelect.js b/components/Forms/AdvancedElements/MultiSelect.js
deleted file mode 100644
index 1d8e270..0000000
--- a/components/Forms/AdvancedElements/MultiSelect.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { useTheme } from '@mui/material/styles';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
- PaperProps: {
- style: {
- maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
- width: 250,
- },
- },
-};
-
-const names = [
- 'Oliver Hansen',
- 'Van Henry',
- 'April Tucker',
- 'Ralph Hubbard',
- 'Omar Alexander',
- 'Carlos Abbott',
- 'Miriam Wagner',
- 'Bradley Wilkerson',
- 'Virginia Andrews',
- 'Kelly Snyder',
-];
-
-function getStyles(name, personName, theme) {
- return {
- fontWeight:
- personName.indexOf(name) === -1
- ? theme.typography.fontWeightRegular
- : theme.typography.fontWeightMedium,
- };
-}
-
-export default function MultiSelect() {
-
- const theme = useTheme();
- const [personName, setPersonName] = React.useState([]);
-
- const handleChange = (event) => {
- const {
- target: { value },
- } = event;
- setPersonName(
- // On autofill we get a stringified value.
- typeof value === 'string' ? value.split(',') : value,
- );
- };
-
- return (
- <>
-
-
- Multi Select
-
-
-
- Name
- }
- MenuProps={MenuProps}
- >
- {names.map((name) => (
-
- {name}
-
- ))}
-
-
-
- >
- );
-}
diff --git a/components/Forms/AdvancedElements/MultipleSelectChip.js b/components/Forms/AdvancedElements/MultipleSelectChip.js
deleted file mode 100644
index 25d3af9..0000000
--- a/components/Forms/AdvancedElements/MultipleSelectChip.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import Chip from '@mui/material/Chip';
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
- PaperProps: {
- style: {
- maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
- width: 250,
- },
- },
-};
-
-const names = [
- 'Oliver Hansen',
- 'Van Henry',
- 'April Tucker',
- 'Ralph Hubbard',
- 'Omar Alexander',
- 'Carlos Abbott',
- 'Miriam Wagner',
- 'Bradley Wilkerson',
- 'Virginia Andrews',
- 'Kelly Snyder',
-];
-
-function getStyles(name, personName, theme) {
- return {
- fontWeight:
- personName.indexOf(name) === -1
- ? theme.typography.fontWeightRegular
- : theme.typography.fontWeightMedium,
- };
-}
-
-export default function MultipleSelectChip() {
- const theme = useTheme();
- const [personName, setPersonName] = React.useState([]);
-
- const handleChange = (event) => {
- const {
- target: { value },
- } = event;
- setPersonName(
- // On autofill we get a stringified value.
- typeof value === 'string' ? value.split(',') : value,
- );
- };
-
- return (
- <>
-
-
- Multiple Select Chip
-
-
-
- Chip
- }
- renderValue={(selected) => (
-
- {selected.map((value) => (
-
- ))}
-
- )}
- MenuProps={MenuProps}
- >
- {names.map((name) => (
-
- {name}
-
- ))}
-
-
-
- >
- );
-}
diff --git a/components/Forms/EditorArea.js b/components/Forms/EditorArea.js
deleted file mode 100644
index d875077..0000000
--- a/components/Forms/EditorArea.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import dynamic from 'next/dynamic'
-const RichTextEditor = dynamic(() => import('@mantine/rte'), {
- ssr: false,
-})
-
-const EditorArea = () => {
- return (
- <>
-
-
- Editor
-
-
-
-
-
-
- >
- )
-}
-
-export default EditorArea;
\ No newline at end of file
diff --git a/components/Forms/FileUploader/UploadMultipleFiles.js b/components/Forms/FileUploader/UploadMultipleFiles.js
deleted file mode 100644
index 1226553..0000000
--- a/components/Forms/FileUploader/UploadMultipleFiles.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import { Fragment, useState } from "react";
-import Box from "@mui/material/Box";
-import Link from "@mui/material/Link";
-import List from "@mui/material/List";
-import Button from "@mui/material/Button";
-import ListItem from "@mui/material/ListItem";
-import { styled } from "@mui/material/styles";
-import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
-import ClearIcon from "@mui/icons-material/Clear";
-import FileCopyIcon from "@mui/icons-material/FileCopy";
-import Card from "@mui/material/Card";
-import { useDropzone } from "react-dropzone";
-import styles from "@/components/Forms/FileUploader/UploadMultipleFiles.module.css";
-
-const FileUploaderMultiple = () => {
- // ** State
- const [files, setFiles] = useState([]);
-
- // ** Hooks
- const { getRootProps, getInputProps } = useDropzone({
- onDrop: (acceptedFiles) => {
- setFiles(acceptedFiles.map((file) => Object.assign(file)));
- },
- });
-
- const renderFilePreview = (file) => {
- if (file.type.startsWith("image")) {
- return (
-
- );
- } else {
- return ;
- }
- };
-
- const handleRemoveFile = (file) => {
- const uploadedFiles = files;
- const filtered = uploadedFiles.filter((i) => i.name !== file.name);
- setFiles([...filtered]);
- };
-
- const fileList = files.map((file) => (
-
-
-
- {renderFilePreview(file)}
-
-
-
- {file.name}
-
-
-
- handleRemoveFile(file)}>
-
-
-
- ));
-
- const handleLinkClick = (event) => {
- event.preventDefault();
- };
-
- const handleRemoveAllFiles = () => {
- setFiles([]);
- };
-
- return (
- <>
-
-
- Upload Multiple Files
-
-
-
-
-
-
-
-
- Drop files here or click to upload.
-
-
-
- Drop files here or click{" "}
-
- browse
- {" "}
- thorough your machine
-
-
-
-
-
- {files.length ? (
-
- {fileList}
-
-
- Remove All
-
-
-
- ) : null}
-
- >
- );
-};
-
-export default FileUploaderMultiple;
diff --git a/components/Forms/FileUploader/UploadMultipleFiles.module.css b/components/Forms/FileUploader/UploadMultipleFiles.module.css
deleted file mode 100644
index 814a684..0000000
--- a/components/Forms/FileUploader/UploadMultipleFiles.module.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.dropzone {
- background: #fdfdfd;
- border: 2px dashed #eee;
- padding: 20px;
- border-radius: 10px;
- cursor: pointer;
-}
-.thumbImage {
- margin-right: 30px;
-}
-.fileDetails {
- display: flex;
- align-items: center;
-}
-.filePreview {
- margin-right: 10px;
-}
-.fileName {
- font-size: 14px;
- font-weight: 500;
-}
-.buttons {
- text-align: end;
-}
-
-@media screen and (max-width: 900px) {
- .thumbImage {
- margin-right: 0;
- margin-bottom: 20px;
- }
-}
-
-/* For RTL Style */
-[dir="rtl"] .thumbImage {
- margin-right: 0;
- margin-left: 30px;
-}
-
-/* For dark mode */
-[class="dark"] .dropzone {
- background: #181717;
- border: 2px dashed var(--borderColor);
-}
\ No newline at end of file
diff --git a/components/Forms/FormLayouts/BasicForm.js b/components/Forms/FormLayouts/BasicForm.js
deleted file mode 100644
index 04f1524..0000000
--- a/components/Forms/FormLayouts/BasicForm.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Link from "next/link";
-import Grid from "@mui/material/Grid";
-import { Box } from "@mui/system";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
-import styles from "@/components/Authentication/Authentication.module.css";
-
-export default function BasicForm() {
-
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
- Basic Form
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Get Started
-
-
-
- Already have an account?{" "}
-
- Sign In
-
-
-
-
-
- >
- );
-}
diff --git a/components/Forms/FormLayouts/BasicWithIcons.js b/components/Forms/FormLayouts/BasicWithIcons.js
deleted file mode 100644
index 8d3be9e..0000000
--- a/components/Forms/FormLayouts/BasicWithIcons.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Link from "next/link";
-import Grid from "@mui/material/Grid";
-import { Box } from "@mui/system";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import AccountCircle from '@mui/icons-material/AccountCircle';
-import MailOutlineIcon from '@mui/icons-material/MailOutline';
-import LockIcon from '@mui/icons-material/Lock';
-
-export default function BasicWithIcons() {
-
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
- Basic With Icons
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Get Started
-
-
-
- Already have an account?{" "}
-
- Sign In
-
-
-
-
- >
- );
-}
diff --git a/components/Forms/FormLayouts/CustomStyles.js b/components/Forms/FormLayouts/CustomStyles.js
deleted file mode 100644
index eb521f4..0000000
--- a/components/Forms/FormLayouts/CustomStyles.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from 'react';
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Grid from "@mui/material/Grid";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import SendIcon from '@mui/icons-material/Send';
-
-import dynamic from 'next/dynamic'
-const RichTextEditor = dynamic(() => import('@mantine/rte'), {
- ssr: false,
-})
-
-const CustomStyles = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- // Select Priority
- const [priority, setPriority] = React.useState('');
- const handleChange = (event) => {
- setPriority(event.target.value);
- };
-
- return (
- <>
-
-
- Custom Styles
-
-
-
-
-
-
- First Name
-
-
-
-
-
-
- Email Address
-
-
-
-
-
-
- Message
-
-
-
-
-
-
-
- {" "}
- Send Message
-
-
-
-
-
- >
- )
-}
-
-export default CustomStyles;
\ No newline at end of file
diff --git a/components/Forms/FormLayouts/SignInForm.js b/components/Forms/FormLayouts/SignInForm.js
deleted file mode 100644
index 7a340fa..0000000
--- a/components/Forms/FormLayouts/SignInForm.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import * as React from "react";
-import Avatar from "@mui/material/Avatar";
-import Button from "@mui/material/Button";
-import CssBaseline from "@mui/material/CssBaseline";
-import TextField from "@mui/material/TextField";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
-import Link from "@mui/material/Link";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
-import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
-
-import Card from "@mui/material/Card";
-
-export default function SignInForm() {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
- Sign In
-
-
-
-
-
-
-
-
-
-
- Sign in
-
-
-
-
-
-
-
- }
- label="Remember me"
- />
-
-
- Sign In
-
-
-
-
-
- Forgot password?
-
-
-
-
- {"Don't have an account? Sign Up"}
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/Forms/FormLayouts/SignUpForm.js b/components/Forms/FormLayouts/SignUpForm.js
deleted file mode 100644
index bc01065..0000000
--- a/components/Forms/FormLayouts/SignUpForm.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import CssBaseline from '@mui/material/CssBaseline';
-import TextField from '@mui/material/TextField';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-import Link from '@mui/material/Link';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import Card from "@mui/material/Card";
-
-export default function SignUpForm() {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get('email'),
- password: data.get('password'),
- });
- };
-
- return (
- <>
-
-
- Sign Up
-
-
-
-
-
-
-
-
-
-
- Sign up
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- label="I want to receive inspiration, marketing promotions and updates via email."
- />
-
-
-
-
- Sign Up
-
-
-
-
-
- Already have an account? Sign in
-
-
-
-
-
-
-
- >
- );
-}
\ No newline at end of file
diff --git a/components/Notification/NotificationTable.js b/components/Notification/NotificationTable.js
deleted file mode 100644
index 0da41cb..0000000
--- a/components/Notification/NotificationTable.js
+++ /dev/null
@@ -1,447 +0,0 @@
-import * as React from "react";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import Tooltip from "@mui/material/Tooltip";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import PrintIcon from "@mui/icons-material/Print";
-import DeleteIcon from "@mui/icons-material/Delete";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import Checkbox from "@mui/material/Checkbox";
-import Link from "next/link";
-
-const label = { inputProps: { "aria-label": "Checkbox demo" } };
-
-function Notification(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-Notification.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(id, text, readEmail, date) {
- return { id, text, readEmail, date };
-}
-
-const rows = [
- createData(
- "1",
- "Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
- "/email/read-email",
- "1 Jan 2022"
- ),
- createData(
- "2",
- "Last pic over my village – Yeah i'd like that! Do you remember the video som..",
- "/email/read-email",
- "2 Jan 2022"
- ),
- createData(
- "3",
- "Mochila Beta: Subscription Confirmed – You've been confirmed! Welcome to ",
- "/email/read-email",
- "3 Jan 2022"
- ),
- createData(
- "4",
- "You've been confirmed! Welcome to the ruling class of the inbox. For your ",
- "/email/read-email",
- "4 Jan 2022"
- ),
- createData(
- "5",
- "For your records, here is a copy of the information you submitted to us...",
- "/email/read-email",
- "5 Jan 2022"
- ),
- createData(
- "6",
- "Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
- "/email/read-email",
- "6 Jan 2022"
- ),
- createData(
- "7",
- "Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
- "/email/read-email",
- "7 Jan 2022"
- ),
- createData(
- "8",
- "For your records, here is a copy of the information you submitted to us...",
- "/email/read-email",
- "8 Jan 2022"
- ),
- createData(
- "9",
- "Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
- "/email/read-email",
- "9 Jan 2022"
- ),
- createData(
- "10",
- "Off on Thursday – Eff that place, you might as well stay here with us inst",
- "/email/read-email",
- "10 Jan 2022"
- ),
- createData(
- "11",
- "Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
- "/email/read-email",
- "11 Jan 2022"
- ),
- createData(
- "12",
- "This Week's Top Stories – Our top pick for you on Medium this week The",
- "/email/read-email",
- "12 Jan 2022"
- ),
- createData(
- "13",
- "Weekend on Revibe – Today's Friday and we thought maybe you want so",
- "/email/read-email",
- "13 Jan 2022"
- ),
- createData(
- "14",
- "You can now use your storage in Google Drive – Hey Nicklas Sandell! Tha",
- "/email/read-email",
- "14 Jan 2022"
- ),
- createData(
- "15",
- "New Ticket Reply - eDemy - Michel Valenzuela",
- "/email/read-email",
- "15 Jan 2022"
- ),
- createData(
- "16",
- "New Ticket Reply - Abev - Manos Pappas",
- "/email/read-email",
- "16 Jan 2022"
- ),
- createData(
- "17",
- "New Ticket Reply - Lofi - Adarsh Raj",
- "/email/read-email",
- "11 Jan 2022"
- ),
-];
-
-export default function NotificationTable() {
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- // Dropdown
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Notification List
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
-
-
-
-
- {row.text}
-
-
-
-
- {row.date}
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/Pages/Charts/ApexCharts/AreaCharts/BasicAreaCharts.js b/components/Pages/Charts/ApexCharts/AreaCharts/BasicAreaCharts.js
deleted file mode 100644
index 0801bde..0000000
--- a/components/Pages/Charts/ApexCharts/AreaCharts/BasicAreaCharts.js
+++ /dev/null
@@ -1,297 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-const series = {
- monthDataSeries1: {
- prices: [
- 8107.85, 8128.0, 8122.9, 8165.5, 8340.7, 8423.7, 8423.5, 8514.3, 8481.85,
- 8487.7, 8506.9, 8626.2, 8668.95, 8602.3, 8607.55, 8512.9, 8496.25,
- 8500.65, 8881.1, 9340.85,
- ],
- dates: [
- "13 Nov 2018",
- "14 Nov 2018",
- "15 Nov 2018",
- "16 Nov 2018",
- "17 Nov 2018",
- "20 Nov 2018",
- "21 Nov 2018",
- "22 Nov 2018",
- "23 Nov 2018",
- "24 Nov 2018",
- "27 Nov 2018",
- "28 Nov 2018",
- "29 Nov 2018",
- "30 Nov 2018",
- "01 Dec 2018",
- "04 Dec 2018",
- "05 Dec 2018",
- "06 Dec 2018",
- "07 Dec 2018",
- "08 Dec 2018",
- ],
- },
- monthDataSeries2: {
- prices: [
- 8423.7, 8423.5, 8514.3, 8481.85, 8487.7, 8506.9, 8626.2, 8668.95, 8602.3,
- 8607.55, 8512.9, 8496.25, 8500.65, 8881.1, 9040.85, 8340.7, 8165.5,
- 8122.9, 8107.85, 8128.0,
- ],
- dates: [
- "13 Nov 2018",
- "14 Nov 2018",
- "15 Nov 2018",
- "16 Nov 2018",
- "17 Nov 2018",
- "20 Nov 2018",
- "21 Nov 2018",
- "22 Nov 2018",
- "23 Nov 2018",
- "24 Nov 2018",
- "27 Nov 2018",
- "28 Nov 2018",
- "29 Nov 2018",
- "30 Nov 2018",
- "01 Dec 2018",
- "04 Dec 2018",
- "05 Dec 2018",
- "06 Dec 2018",
- "07 Dec 2018",
- "08 Dec 2018",
- ],
- },
- monthDataSeries3: {
- prices: [
- 7114.25, 7126.6, 7116.95, 7203.7, 7233.75, 7451.0, 7381.15, 7348.95,
- 7347.75, 7311.25, 7266.4, 7253.25, 7215.45, 7266.35, 7315.25, 7237.2,
- 7191.4, 7238.95, 7222.6, 7217.9, 7359.3, 7371.55, 7371.15, 7469.2,
- 7429.25, 7434.65, 7451.1, 7475.25, 7566.25, 7556.8, 7525.55, 7555.45,
- 7560.9, 7490.7, 7527.6, 7551.9, 7514.85, 7577.95, 7592.3, 7621.95,
- 7707.95, 7859.1, 7815.7, 7739.0, 7778.7, 7839.45, 7756.45, 7669.2,
- 7580.45, 7452.85, 7617.25, 7701.6, 7606.8, 7620.05, 7513.85, 7498.45,
- 7575.45, 7601.95, 7589.1, 7525.85, 7569.5, 7702.5, 7812.7, 7803.75,
- 7816.3, 7851.15, 7912.2, 7972.8, 8145.0, 8161.1, 8121.05, 8071.25, 8088.2,
- 8154.45, 8148.3, 8122.05, 8132.65, 8074.55, 7952.8, 7885.55, 7733.9,
- 7897.15, 7973.15, 7888.5, 7842.8, 7838.4, 7909.85, 7892.75, 7897.75,
- 7820.05, 7904.4, 7872.2, 7847.5, 7849.55, 7789.6, 7736.35, 7819.4,
- 7875.35, 7871.8, 8076.5, 8114.8, 8193.55, 8217.1, 8235.05, 8215.3, 8216.4,
- 8301.55, 8235.25, 8229.75, 8201.95, 8164.95, 8107.85, 8128.0, 8122.9,
- 8165.5, 8340.7, 8423.7, 8423.5, 8514.3, 8481.85, 8487.7, 8506.9, 8626.2,
- ],
- dates: [
- "02 Jun 2018",
- "05 Jun 2018",
- "06 Jun 2018",
- "07 Jun 2018",
- "08 Jun 2018",
- "09 Jun 2018",
- "12 Jun 2018",
- "13 Jun 2018",
- "14 Jun 2018",
- "15 Jun 2018",
- "16 Jun 2018",
- "19 Jun 2018",
- "20 Jun 2018",
- "21 Jun 2018",
- "22 Jun 2018",
- "23 Jun 2018",
- "27 Jun 2018",
- "28 Jun 2018",
- "29 Jun 2018",
- "30 Jun 2018",
- "03 Jul 2018",
- "04 Jul 2018",
- "05 Jul 2018",
- "06 Jul 2018",
- "07 Jul 2018",
- "10 Jul 2018",
- "11 Jul 2018",
- "12 Jul 2018",
- "13 Jul 2018",
- "14 Jul 2018",
- "17 Jul 2018",
- "18 Jul 2018",
- "19 Jul 2018",
- "20 Jul 2018",
- "21 Jul 2018",
- "24 Jul 2018",
- "25 Jul 2018",
- "26 Jul 2018",
- "27 Jul 2018",
- "28 Jul 2018",
- "31 Jul 2018",
- "01 Aug 2018",
- "02 Aug 2018",
- "03 Aug 2018",
- "04 Aug 2018",
- "07 Aug 2018",
- "08 Aug 2018",
- "09 Aug 2018",
- "10 Aug 2018",
- "11 Aug 2018",
- "14 Aug 2018",
- "16 Aug 2018",
- "17 Aug 2018",
- "18 Aug 2018",
- "21 Aug 2018",
- "22 Aug 2018",
- "23 Aug 2018",
- "24 Aug 2018",
- "28 Aug 2018",
- "29 Aug 2018",
- "30 Aug 2018",
- "31 Aug 2018",
- "01 Sep 2018",
- "04 Sep 2018",
- "05 Sep 2018",
- "06 Sep 2018",
- "07 Sep 2018",
- "08 Sep 2018",
- "11 Sep 2018",
- "12 Sep 2018",
- "13 Sep 2018",
- "14 Sep 2018",
- "15 Sep 2018",
- "18 Sep 2018",
- "19 Sep 2018",
- "20 Sep 2018",
- "21 Sep 2018",
- "22 Sep 2018",
- "25 Sep 2018",
- "26 Sep 2018",
- "27 Sep 2018",
- "28 Sep 2018",
- "29 Sep 2018",
- "03 Oct 2018",
- "04 Oct 2018",
- "05 Oct 2018",
- "06 Oct 2018",
- "09 Oct 2018",
- "10 Oct 2018",
- "11 Oct 2018",
- "12 Oct 2018",
- "13 Oct 2018",
- "16 Oct 2018",
- "17 Oct 2018",
- "18 Oct 2018",
- "19 Oct 2018",
- "23 Oct 2018",
- "24 Oct 2018",
- "25 Oct 2018",
- "26 Oct 2018",
- "27 Oct 2018",
- "30 Oct 2018",
- "31 Oct 2018",
- "01 Nov 2018",
- "02 Nov 2018",
- "03 Nov 2018",
- "06 Nov 2018",
- "07 Nov 2018",
- "08 Nov 2018",
- "09 Nov 2018",
- "10 Nov 2018",
- "13 Nov 2018",
- "14 Nov 2018",
- "15 Nov 2018",
- "16 Nov 2018",
- "17 Nov 2018",
- "20 Nov 2018",
- "21 Nov 2018",
- "22 Nov 2018",
- "23 Nov 2018",
- "24 Nov 2018",
- "27 Nov 2018",
- "28 Nov 2018",
- ],
- },
-};
-
-class BasicAreaCharts extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "STOCK ABC",
- data: series.monthDataSeries1.prices,
- },
- ],
- options: {
- chart: {
- zoom: {
- enabled: false,
- },
- },
- dataLabels: {
- enabled: false,
- },
- stroke: {
- curve: "straight",
- },
-
- title: {
- text: "Fundamental Analysis of Stocks",
- align: "left",
- },
- subtitle: {
- text: "Price Movements",
- align: "left",
- },
- labels: series.monthDataSeries1.dates,
- xaxis: {
- type: "datetime",
- },
- yaxis: {
- opposite: true,
- },
- legend: {
- horizontalAlign: "left",
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Basic
-
-
-
-
- >
- );
- }
-}
-
-export default BasicAreaCharts;
diff --git a/components/Pages/Charts/ApexCharts/AreaCharts/DatetimeXAxis.js b/components/Pages/Charts/ApexCharts/AreaCharts/DatetimeXAxis.js
deleted file mode 100644
index ad72661..0000000
--- a/components/Pages/Charts/ApexCharts/AreaCharts/DatetimeXAxis.js
+++ /dev/null
@@ -1,500 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class DatetimeXAxis extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- data: [
- [1327359500000, 30.95],
- [1327445000000, 31.34],
- [1327532400000, 31.18],
- [1327618800000, 31.05],
- [1327878000000, 31.0],
- [1327964400000, 30.95],
- [1328050800000, 31.24],
- [1328137200000, 31.29],
- [1328223500000, 31.85],
- [1328482800000, 31.86],
- [1328569200000, 32.28],
- [1328655500000, 32.1],
- [1328742000000, 32.65],
- [1328828400000, 32.21],
- [1329087500000, 32.35],
- [1329174000000, 32.44],
- [1329260400000, 32.46],
- [1329346800000, 32.86],
- [1329433200000, 32.75],
- [1329778800000, 32.54],
- [1329865200000, 32.33],
- [1329951500000, 32.97],
- [1330038000000, 33.41],
- [1330297200000, 33.27],
- [1330383500000, 33.27],
- [1330470000000, 32.89],
- [1330556400000, 33.1],
- [1330642800000, 33.73],
- [1330902000000, 33.22],
- [1330988400000, 31.99],
- [1331074800000, 32.41],
- [1331161200000, 33.05],
- [1331247500000, 33.64],
- [1331506800000, 33.56],
- [1331593200000, 34.22],
- [1331679500000, 33.77],
- [1331765000000, 34.17],
- [1331852400000, 33.82],
- [1332111500000, 34.51],
- [1332198000000, 33.16],
- [1332284400000, 33.56],
- [1332370800000, 33.71],
- [1332457200000, 33.81],
- [1332712800000, 34.4],
- [1332799200000, 34.63],
- [1332885500000, 34.46],
- [1332972000000, 34.48],
- [1333058400000, 34.31],
- [1333317500000, 34.7],
- [1333404000000, 34.31],
- [1333490400000, 33.46],
- [1333576800000, 33.59],
- [1333922400000, 33.22],
- [1334008800000, 32.61],
- [1334095200000, 33.01],
- [1334181500000, 33.55],
- [1334268000000, 33.18],
- [1334527200000, 32.84],
- [1334613500000, 33.84],
- [1334700000000, 33.39],
- [1334786400000, 32.91],
- [1334872800000, 33.06],
- [1335132000000, 32.62],
- [1335218400000, 32.4],
- [1335304800000, 33.13],
- [1335391200000, 33.26],
- [1335477500000, 33.58],
- [1335736800000, 33.55],
- [1335823200000, 33.77],
- [1335909500000, 33.76],
- [1335995000000, 33.32],
- [1336082400000, 32.61],
- [1336341500000, 32.52],
- [1336428000000, 32.67],
- [1336514400000, 32.52],
- [1336500800000, 31.92],
- [1336687200000, 32.2],
- [1336946400000, 32.23],
- [1337032800000, 32.33],
- [1337119200000, 32.36],
- [1337205500000, 32.01],
- [1337292000000, 31.31],
- [1337551200000, 32.01],
- [1337637500000, 32.01],
- [1337724000000, 32.18],
- [1337810400000, 31.54],
- [1337896800000, 31.6],
- [1338242400000, 32.05],
- [1338328800000, 31.29],
- [1338415200000, 31.05],
- [1338501500000, 29.82],
- [1338760800000, 30.31],
- [1338847200000, 30.7],
- [1338933500000, 31.69],
- [1339020000000, 31.32],
- [1339106400000, 31.65],
- [1339365500000, 31.13],
- [1339452000000, 31.77],
- [1339538400000, 31.79],
- [1339624800000, 31.67],
- [1339711200000, 32.39],
- [1339970400000, 32.63],
- [1340056800000, 32.89],
- [1340143200000, 31.99],
- [1340229500000, 31.23],
- [1340315000000, 31.57],
- [1340575200000, 30.84],
- [1340661500000, 31.07],
- [1340748000000, 31.41],
- [1340834400000, 31.17],
- [1340920800000, 32.37],
- [1341180000000, 32.19],
- [1341266400000, 32.51],
- [1341439200000, 32.53],
- [1341525500000, 31.37],
- [1341784800000, 30.43],
- [1341871200000, 30.44],
- [1341957500000, 30.2],
- [1342044000000, 30.14],
- [1342130400000, 30.65],
- [1342389500000, 30.4],
- [1342475000000, 30.65],
- [1342562400000, 31.43],
- [1342648800000, 31.89],
- [1342735200000, 31.38],
- [1342994400000, 30.64],
- [1343080800000, 30.02],
- [1343167200000, 30.33],
- [1343253500000, 30.95],
- [1343340000000, 31.89],
- [1343599200000, 31.01],
- [1343685500000, 30.88],
- [1343772000000, 30.69],
- [1343858400000, 30.58],
- [1343944800000, 32.02],
- [1344204000000, 32.14],
- [1344290400000, 32.37],
- [1344376800000, 32.51],
- [1344463200000, 32.65],
- [1344549500000, 32.64],
- [1344808800000, 32.27],
- [1344895200000, 32.1],
- [1344981500000, 32.91],
- [1345068000000, 33.65],
- [1345154400000, 33.8],
- [1345413500000, 33.92],
- [1345500000000, 33.75],
- [1345586400000, 33.84],
- [1345672800000, 33.5],
- [1345759200000, 32.26],
- [1346018400000, 32.32],
- [1346104800000, 32.06],
- [1346191200000, 31.96],
- [1346277500000, 31.46],
- [1346364000000, 31.27],
- [1346709500000, 31.43],
- [1346795000000, 32.26],
- [1346882400000, 32.79],
- [1346968800000, 32.46],
- [1347228000000, 32.13],
- [1347314400000, 32.43],
- [1347400800000, 32.42],
- [1347487200000, 32.81],
- [1347573500000, 33.34],
- [1347832800000, 33.41],
- [1347919200000, 32.57],
- [1348005500000, 33.12],
- [1348092000000, 34.53],
- [1348178400000, 33.83],
- [1348437500000, 33.41],
- [1348524000000, 32.9],
- [1348610400000, 32.53],
- [1348696800000, 32.8],
- [1348783200000, 32.44],
- [1349042400000, 32.62],
- [1349128800000, 32.57],
- [1349215200000, 32.6],
- [1349301500000, 32.68],
- [1349388000000, 32.47],
- [1349647200000, 32.23],
- [1349733500000, 31.68],
- [1349820000000, 31.51],
- [1349906400000, 31.78],
- [1349992800000, 31.94],
- [1350252000000, 32.33],
- [1350338400000, 33.24],
- [1350424800000, 33.44],
- [1350511200000, 33.48],
- [1350597500000, 33.24],
- [1350856800000, 33.49],
- [1350943200000, 33.31],
- [1351029500000, 33.36],
- [1351115000000, 33.4],
- [1351202400000, 34.01],
- [1351638000000, 34.02],
- [1351724400000, 34.36],
- [1351810800000, 34.39],
- [1352070000000, 34.24],
- [1352156400000, 34.39],
- [1352242800000, 33.47],
- [1352329200000, 32.98],
- [1352415500000, 32.9],
- [1352674800000, 32.7],
- [1352761200000, 32.54],
- [1352847500000, 32.23],
- [1352934000000, 32.64],
- [1353020400000, 32.65],
- [1353279500000, 32.92],
- [1353365000000, 32.64],
- [1353452400000, 32.84],
- [1353625200000, 33.4],
- [1353884400000, 33.3],
- [1353970800000, 33.18],
- [1354057200000, 33.88],
- [1354143500000, 34.09],
- [1354230000000, 34.61],
- [1354489200000, 34.7],
- [1354575500000, 35.3],
- [1354662000000, 35.4],
- [1354748400000, 35.14],
- [1354834800000, 35.48],
- [1355094000000, 35.75],
- [1355180400000, 35.54],
- [1355266800000, 35.96],
- [1355353200000, 35.53],
- [1355439500000, 37.56],
- [1355698800000, 37.42],
- [1355785200000, 37.49],
- [1355871500000, 38.09],
- [1355958000000, 37.87],
- [1356044400000, 37.71],
- [1356303500000, 37.53],
- [1356476400000, 37.55],
- [1356562800000, 37.3],
- [1356649200000, 36.9],
- [1356908400000, 37.68],
- [1357081200000, 38.34],
- [1357167500000, 37.75],
- [1357254000000, 38.13],
- [1357513200000, 37.94],
- [1357599500000, 38.14],
- [1357685000000, 38.66],
- [1357772400000, 38.62],
- [1357858800000, 38.09],
- [1358118000000, 38.16],
- [1358204400000, 38.15],
- [1358290800000, 37.88],
- [1358377200000, 37.73],
- [1358463500000, 37.98],
- [1358809200000, 37.95],
- [1358895500000, 38.25],
- [1358982000000, 38.1],
- [1359068400000, 38.32],
- [1359327500000, 38.24],
- [1359414000000, 38.52],
- [1359500400000, 37.94],
- [1359586800000, 37.83],
- [1359673200000, 38.34],
- [1359932400000, 38.1],
- [1350018800000, 38.51],
- [1360105200000, 38.4],
- [1360191500000, 38.07],
- [1360278000000, 39.12],
- [1360537200000, 38.64],
- [1360623500000, 38.89],
- [1360710000000, 38.81],
- [1360796400000, 38.61],
- [1360882800000, 38.63],
- [1361228400000, 38.99],
- [1361314800000, 38.77],
- [1361401200000, 38.34],
- [1361487500000, 38.55],
- [1361746800000, 38.11],
- [1361833200000, 38.59],
- [1361919500000, 39.6],
- ],
- },
- ],
- options: {
- chart: {
- id: "area-datetime",
- zoom: {
- autoScaleYaxis: true,
- },
- },
- annotations: {
- yaxis: [
- {
- y: 30,
- borderColor: "#999",
- label: {
- show: true,
- text: "Support",
- style: {
- color: "#fff",
- background: "#00E396",
- },
- },
- },
- ],
- xaxis: [
- {
- x: new Date("14 Nov 2012").getTime(),
- borderColor: "#999",
- yAxisIndex: 0,
- label: {
- show: true,
- text: "Rally",
- style: {
- color: "#fff",
- background: "#775DD0",
- },
- },
- },
- ],
- },
- dataLabels: {
- enabled: false,
- },
- markers: {
- size: 0,
- style: "hollow",
- },
- xaxis: {
- type: "datetime",
- min: new Date("01 Mar 2012").getTime(),
- tickAmount: 6,
- },
- tooltip: {
- x: {
- format: "dd MMM yyyy",
- },
- },
- fill: {
- type: "gradient",
- gradient: {
- shadeIntensity: 1,
- opacityFrom: 0.7,
- opacityTo: 0.9,
- stops: [0, 100],
- },
- },
- },
-
- selection: "one_year",
- };
- }
-
- updateData(timeline) {
- this.setState({
- selection: timeline,
- });
-
- switch (timeline) {
- case "one_month":
- ApexCharts.exec(
- "area-datetime",
- "zoomX",
- new Date("28 Jan 2013").getTime(),
- new Date("27 Feb 2013").getTime()
- );
- break;
- case "six_months":
- ApexCharts.exec(
- "area-datetime",
- "zoomX",
- new Date("27 Sep 2012").getTime(),
- new Date("27 Feb 2013").getTime()
- );
- break;
- case "one_year":
- ApexCharts.exec(
- "area-datetime",
- "zoomX",
- new Date("27 Feb 2012").getTime(),
- new Date("27 Feb 2013").getTime()
- );
- break;
- case "ytd":
- ApexCharts.exec(
- "area-datetime",
- "zoomX",
- new Date("01 Jan 2013").getTime(),
- new Date("27 Feb 2013").getTime()
- );
- break;
- case "all":
- ApexCharts.exec(
- "area-datetime",
- "zoomX",
- new Date("23 Jan 2012").getTime(),
- new Date("27 Feb 2013").getTime()
- );
- break;
- default:
- }
- }
-
- render() {
- return (
- <>
-
-
- Spline
-
-
-
-
- this.updateData("one_month")}
- className={this.state.selection === "one_month" ? "active" : ""}
- >
- 1M
-
-
- this.updateData("six_months")}
- className={
- this.state.selection === "six_months" ? "active" : ""
- }
- >
- 6M
-
-
- this.updateData("one_year")}
- className={this.state.selection === "one_year" ? "active" : ""}
- >
- 1Y
-
-
- this.updateData("ytd")}
- className={this.state.selection === "ytd" ? "active" : ""}
- >
- YTD
-
-
- this.updateData("all")}
- className={this.state.selection === "all" ? "active" : ""}
- >
- ALL
-
-
-
-
-
-
-
-
- >
- );
- }
-}
-
-export default DatetimeXAxis;
diff --git a/components/Pages/Charts/ApexCharts/AreaCharts/Negative.js b/components/Pages/Charts/ApexCharts/AreaCharts/Negative.js
deleted file mode 100644
index 0d3601a..0000000
--- a/components/Pages/Charts/ApexCharts/AreaCharts/Negative.js
+++ /dev/null
@@ -1,291 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class Negative extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "north",
- data: [
- {
- x: 1996,
- y: 322,
- },
- {
- x: 1997,
- y: 324,
- },
- {
- x: 1998,
- y: 329,
- },
- {
- x: 1999,
- y: 342,
- },
- {
- x: 2000,
- y: 348,
- },
- {
- x: 2001,
- y: 334,
- },
- {
- x: 2002,
- y: 325,
- },
- {
- x: 2003,
- y: 316,
- },
- {
- x: 2004,
- y: 318,
- },
- {
- x: 2005,
- y: 330,
- },
- {
- x: 2006,
- y: 355,
- },
- {
- x: 2007,
- y: 366,
- },
- {
- x: 2008,
- y: 337,
- },
- {
- x: 2009,
- y: 352,
- },
- {
- x: 2010,
- y: 377,
- },
- {
- x: 2011,
- y: 383,
- },
- {
- x: 2012,
- y: 344,
- },
- {
- x: 2013,
- y: 366,
- },
- {
- x: 2014,
- y: 389,
- },
- {
- x: 2015,
- y: 334,
- },
- ],
- },
- {
- name: "south",
- data: [
- {
- x: 1996,
- y: 162,
- },
- {
- x: 1997,
- y: 90,
- },
- {
- x: 1998,
- y: 50,
- },
- {
- x: 1999,
- y: 77,
- },
- {
- x: 2000,
- y: 35,
- },
- {
- x: 2001,
- y: -45,
- },
- {
- x: 2002,
- y: -88,
- },
- {
- x: 2003,
- y: -120,
- },
- {
- x: 2004,
- y: -156,
- },
- {
- x: 2005,
- y: -123,
- },
- {
- x: 2006,
- y: -88,
- },
- {
- x: 2007,
- y: -66,
- },
- {
- x: 2008,
- y: -45,
- },
- {
- x: 2009,
- y: -29,
- },
- {
- x: 2010,
- y: -45,
- },
- {
- x: 2011,
- y: -88,
- },
- {
- x: 2012,
- y: -132,
- },
- {
- x: 2013,
- y: -146,
- },
- {
- x: 2014,
- y: -169,
- },
- {
- x: 2015,
- y: -184,
- },
- ],
- },
- ],
- options: {
- dataLabels: {
- enabled: false,
- },
- stroke: {
- curve: "straight",
- },
-
- title: {
- text: "Area with Negative Values",
- align: "left",
- style: {
- fontSize: "14px",
- },
- },
- xaxis: {
- type: "datetime",
- axisBorder: {
- show: false,
- },
- axisTicks: {
- show: false,
- },
- },
- yaxis: {
- tickAmount: 4,
- floating: false,
-
- labels: {
- style: {
- colors: "#8e8da4",
- },
- offsetY: -7,
- offsetX: 0,
- },
- axisBorder: {
- show: false,
- },
- axisTicks: {
- show: false,
- },
- },
- fill: {
- opacity: 0.5,
- },
- tooltip: {
- x: {
- format: "yyyy",
- },
- fixed: {
- enabled: false,
- position: "topRight",
- },
- },
- grid: {
- yaxis: {
- lines: {
- offsetX: -30,
- },
- },
- padding: {
- left: 20,
- },
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Negative
-
-
-
-
- >
- );
- }
-}
-
-export default Negative;
diff --git a/components/Pages/Charts/ApexCharts/AreaCharts/Spline.js b/components/Pages/Charts/ApexCharts/AreaCharts/Spline.js
deleted file mode 100644
index df1a124..0000000
--- a/components/Pages/Charts/ApexCharts/AreaCharts/Spline.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class Spline extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "series1",
- data: [31, 40, 28, 51, 42, 109, 100],
- },
- {
- name: "series2",
- data: [11, 32, 45, 32, 34, 52, 41],
- },
- ],
- options: {
- dataLabels: {
- enabled: false,
- },
- stroke: {
- curve: "smooth",
- },
- xaxis: {
- type: "datetime",
- categories: [
- "2018-09-19T00:00:00.000Z",
- "2018-09-19T01:30:00.000Z",
- "2018-09-19T02:30:00.000Z",
- "2018-09-19T03:30:00.000Z",
- "2018-09-19T04:30:00.000Z",
- "2018-09-19T05:30:00.000Z",
- "2018-09-19T06:30:00.000Z",
- ],
- },
- tooltip: {
- x: {
- format: "dd/MM/yy HH:mm",
- },
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Spline
-
-
-
-
- >
- );
- }
-}
-
-export default Spline;
diff --git a/components/Pages/Charts/ApexCharts/BarCharts/BasicBarCharts.js b/components/Pages/Charts/ApexCharts/BarCharts/BasicBarCharts.js
deleted file mode 100644
index 7485d78..0000000
--- a/components/Pages/Charts/ApexCharts/BarCharts/BasicBarCharts.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class BasicBarCharts extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
- },
- ],
- options: {
- plotOptions: {
- bar: {
- borderRadius: 4,
- horizontal: true,
- },
- },
- dataLabels: {
- enabled: false,
- },
- xaxis: {
- categories: [
- "South Korea",
- "Canada",
- "United Kingdom",
- "Netherlands",
- "Italy",
- "France",
- "Japan",
- "United States",
- "China",
- "Germany",
- ],
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Basic Bar Charts
-
-
-
-
- >
- );
- }
-}
-
-export default BasicBarCharts;
diff --git a/components/Pages/Charts/ApexCharts/BarCharts/Grouped.js b/components/Pages/Charts/ApexCharts/BarCharts/Grouped.js
deleted file mode 100644
index e5dce52..0000000
--- a/components/Pages/Charts/ApexCharts/BarCharts/Grouped.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class Grouped extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- data: [44, 55, 41, 64, 22, 43, 21],
- },
- {
- data: [53, 32, 33, 52, 13, 44, 32],
- },
- ],
- options: {
- chart: {
- type: "bar",
- height: 430,
- },
- plotOptions: {
- bar: {
- horizontal: true,
- dataLabels: {
- position: "top",
- },
- },
- },
- dataLabels: {
- enabled: true,
- offsetX: -6,
- style: {
- fontSize: "12px",
- colors: ["#fff"],
- },
- },
- stroke: {
- show: true,
- width: 1,
- colors: ["#fff"],
- },
- tooltip: {
- shared: true,
- intersect: false,
- },
- xaxis: {
- categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Grouped
-
-
-
-
- >
- );
- }
-}
-
-export default Grouped;
diff --git a/components/Pages/Charts/ApexCharts/BarCharts/StackedBar.js b/components/Pages/Charts/ApexCharts/BarCharts/StackedBar.js
deleted file mode 100644
index a6d688f..0000000
--- a/components/Pages/Charts/ApexCharts/BarCharts/StackedBar.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { Component } from 'react';
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class StackedBar extends Component {
-
- constructor(props) {
- super(props);
-
- this.state = {
-
- series: [{
- name: 'Marine Sprite',
- data: [44, 55, 41, 37, 22, 43, 21]
- }, {
- name: 'Striking Calf',
- data: [53, 32, 33, 52, 13, 43, 32]
- }, {
- name: 'Tank Picture',
- data: [12, 17, 11, 9, 15, 11, 20]
- }, {
- name: 'Bucket Slope',
- data: [9, 7, 5, 8, 6, 9, 4]
- }, {
- name: 'Reborn Kid',
- data: [25, 12, 19, 32, 25, 24, 10]
- }],
- options: {
- chart: {
- type: 'bar',
- height: 350,
- stacked: true,
- },
- plotOptions: {
- bar: {
- horizontal: true,
- dataLabels: {
- total: {
- enabled: true,
- offsetX: 0,
- style: {
- fontSize: '13px',
- fontWeight: 900
- }
- }
- }
- },
- },
- stroke: {
- width: 1,
- colors: ['#fff']
- },
- title: {
- text: 'Fiction Books Sales'
- },
- xaxis: {
- categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
- labels: {
- formatter: function (val) {
- return val + "K"
- }
- }
- },
- yaxis: {
- title: {
- text: undefined
- },
- },
- tooltip: {
- y: {
- formatter: function (val) {
- return val + "K"
- }
- }
- },
- fill: {
- opacity: 1
- },
- legend: {
- position: 'top',
- horizontalAlign: 'left',
- offsetX: 40
- }
- },
-
-
- };
- }
-
- render() {
- return (
- <>
-
-
- Stacked Bar
-
-
-
-
- >
- );
- }
-}
-
-export default StackedBar;
diff --git a/components/Pages/Charts/ApexCharts/BarCharts/StackedBars100.js b/components/Pages/Charts/ApexCharts/BarCharts/StackedBars100.js
deleted file mode 100644
index f78a992..0000000
--- a/components/Pages/Charts/ApexCharts/BarCharts/StackedBars100.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class StackedBars100 extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "Marine Sprite",
- data: [44, 55, 41, 37, 22, 43, 21],
- },
- {
- name: "Striking Calf",
- data: [53, 32, 33, 52, 13, 43, 32],
- },
- {
- name: "Tank Picture",
- data: [12, 17, 11, 9, 15, 11, 20],
- },
- {
- name: "Bucket Slope",
- data: [9, 7, 5, 8, 6, 9, 4],
- },
- {
- name: "Reborn Kid",
- data: [25, 12, 19, 32, 25, 24, 10],
- },
- ],
- options: {
- chart: {
- type: "bar",
- height: 350,
- stacked: true,
- stackType: "100%",
- },
- plotOptions: {
- bar: {
- horizontal: true,
- },
- },
- stroke: {
- width: 1,
- colors: ["#fff"],
- },
- title: {
- text: "100% Stacked Bar",
- },
- xaxis: {
- categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
- },
- tooltip: {
- y: {
- formatter: function (val) {
- return val + "K";
- },
- },
- },
- fill: {
- opacity: 1,
- },
- legend: {
- position: "top",
- horizontalAlign: "left",
- offsetX: 40,
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Stacked Bars 100
-
-
-
-
- >
- );
- }
-}
-
-export default StackedBars100;
diff --git a/components/Pages/Charts/ApexCharts/ColumnCharts/BasicColumnCharts.js b/components/Pages/Charts/ApexCharts/ColumnCharts/BasicColumnCharts.js
deleted file mode 100644
index 45552d6..0000000
--- a/components/Pages/Charts/ApexCharts/ColumnCharts/BasicColumnCharts.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class BasicColumnCharts extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "Net Profit",
- data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
- },
- {
- name: "Revenue",
- data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
- },
- {
- name: "Free Cash Flow",
- data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
- },
- ],
- options: {
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: "55%",
- endingShape: "rounded",
- },
- },
- dataLabels: {
- enabled: false,
- },
- stroke: {
- show: true,
- width: 2,
- colors: ["transparent"],
- },
- xaxis: {
- categories: [
- "Feb",
- "Mar",
- "Apr",
- "May",
- "Jun",
- "Jul",
- "Aug",
- "Sep",
- "Oct",
- ],
- },
- yaxis: {
- title: {
- text: "$ (thousands)",
- },
- },
- fill: {
- opacity: 1,
- },
- tooltip: {
- y: {
- formatter: function (val) {
- return "$ " + val + " thousands";
- },
- },
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Basic Column Charts
-
-
-
-
- >
- );
- }
-}
-
-export default BasicColumnCharts;
diff --git a/components/Pages/Charts/ApexCharts/ColumnCharts/ColumnWithDataLabels.js b/components/Pages/Charts/ApexCharts/ColumnCharts/ColumnWithDataLabels.js
deleted file mode 100644
index ef8ec2a..0000000
--- a/components/Pages/Charts/ApexCharts/ColumnCharts/ColumnWithDataLabels.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class ColumnWithDataLabels extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "Inflation",
- data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
- },
- ],
- options: {
- chart: {
- height: 350,
- type: "bar",
- },
- plotOptions: {
- bar: {
- borderRadius: 10,
- dataLabels: {
- position: "top", // top, center, bottom
- },
- },
- },
- dataLabels: {
- enabled: true,
- formatter: function (val) {
- return val + "%";
- },
- offsetY: -20,
- style: {
- fontSize: "12px",
- colors: ["#304758"],
- },
- },
-
- xaxis: {
- categories: [
- "Jan",
- "Feb",
- "Mar",
- "Apr",
- "May",
- "Jun",
- "Jul",
- "Aug",
- "Sep",
- "Oct",
- "Nov",
- "Dec",
- ],
- position: "top",
- axisBorder: {
- show: false,
- },
- axisTicks: {
- show: false,
- },
- crosshairs: {
- fill: {
- type: "gradient",
- gradient: {
- colorFrom: "#D8E3F0",
- colorTo: "#BED1E6",
- stops: [0, 100],
- opacityFrom: 0.4,
- opacityTo: 0.5,
- },
- },
- },
- tooltip: {
- enabled: true,
- },
- },
- yaxis: {
- axisBorder: {
- show: false,
- },
- axisTicks: {
- show: false,
- },
- labels: {
- show: false,
- formatter: function (val) {
- return val + "%";
- },
- },
- },
- title: {
- text: "Monthly Inflation in Argentina, 2002",
- floating: true,
- offsetY: 330,
- align: "center",
- style: {
- color: "#444",
- },
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Column With Data Labels
-
-
-
-
- >
- );
- }
-}
-
-export default ColumnWithDataLabels;
diff --git a/components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns.js b/components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns.js
deleted file mode 100644
index 923f10a..0000000
--- a/components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class StackedColumns extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "PRODUCT A",
- data: [44, 55, 41, 67, 22, 43],
- },
- {
- name: "PRODUCT B",
- data: [13, 23, 20, 8, 13, 27],
- },
- {
- name: "PRODUCT C",
- data: [11, 17, 15, 15, 21, 14],
- },
- {
- name: "PRODUCT D",
- data: [21, 7, 25, 13, 22, 8],
- },
- ],
- options: {
- chart: {
- type: "bar",
- height: 350,
- stacked: true,
- toolbar: {
- show: true,
- },
- zoom: {
- enabled: true,
- },
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- legend: {
- position: "bottom",
- offsetX: -10,
- offsetY: 0,
- },
- },
- },
- ],
- plotOptions: {
- bar: {
- horizontal: false,
- borderRadius: 10,
- dataLabels: {
- total: {
- enabled: true,
- style: {
- fontSize: "13px",
- fontWeight: 900,
- },
- },
- },
- },
- },
- xaxis: {
- type: "datetime",
- categories: [
- "01/01/2011 GMT",
- "01/02/2011 GMT",
- "01/03/2011 GMT",
- "01/04/2011 GMT",
- "01/05/2011 GMT",
- "01/06/2011 GMT",
- ],
- },
- legend: {
- position: "right",
- offsetY: 40,
- },
- fill: {
- opacity: 1,
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Stacked Columns
-
-
-
-
- >
- );
- }
-}
-
-export default StackedColumns;
diff --git a/components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns100.js b/components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns100.js
deleted file mode 100644
index 62523ae..0000000
--- a/components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns100.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class StackedColumns100 extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "PRODUCT A",
- data: [44, 55, 41, 67, 22, 43, 21, 49],
- },
- {
- name: "PRODUCT B",
- data: [13, 23, 20, 8, 13, 27, 33, 12],
- },
- {
- name: "PRODUCT C",
- data: [11, 17, 15, 15, 21, 14, 15, 13],
- },
- ],
- options: {
- chart: {
- type: "bar",
- height: 350,
- stacked: true,
- stackType: "100%",
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- legend: {
- position: "bottom",
- offsetX: -10,
- offsetY: 0,
- },
- },
- },
- ],
- xaxis: {
- categories: [
- "2011 Q1",
- "2011 Q2",
- "2011 Q3",
- "2011 Q4",
- "2012 Q1",
- "2012 Q2",
- "2012 Q3",
- "2012 Q4",
- ],
- },
- fill: {
- opacity: 1,
- },
- legend: {
- position: "right",
- offsetX: 0,
- offsetY: 50,
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Stacked Columns 100
-
-
-
-
- >
- );
- }
-}
-
-export default StackedColumns100;
diff --git a/components/Pages/Charts/ApexCharts/LineCharts/Basic.js b/components/Pages/Charts/ApexCharts/LineCharts/Basic.js
deleted file mode 100644
index 515718d..0000000
--- a/components/Pages/Charts/ApexCharts/LineCharts/Basic.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class Basic extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "Desktops",
- data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
- },
- ],
- options: {
- chart: {
- zoom: {
- enabled: false,
- },
- },
- dataLabels: {
- enabled: false,
- },
- stroke: {
- curve: "straight",
- },
- title: {
- text: "Product Trends by Month",
- align: "left",
- },
- grid: {
- row: {
- colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
- opacity: 0.5,
- },
- },
- xaxis: {
- categories: [
- "Jan",
- "Feb",
- "Mar",
- "Apr",
- "May",
- "Jun",
- "Jul",
- "Aug",
- "Sep",
- ],
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Basic
-
-
-
-
- >
- );
- }
-}
-
-export default Basic;
diff --git a/components/Pages/Charts/ApexCharts/LineCharts/Dashed.js b/components/Pages/Charts/ApexCharts/LineCharts/Dashed.js
deleted file mode 100644
index 3ff8b79..0000000
--- a/components/Pages/Charts/ApexCharts/LineCharts/Dashed.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class Dashed extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "Session Duration",
- data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10],
- },
- {
- name: "Page Views",
- data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35],
- },
- {
- name: "Total Visits",
- data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47],
- },
- ],
- options: {
- chart: {
- zoom: {
- enabled: false,
- },
- },
- dataLabels: {
- enabled: false,
- },
- stroke: {
- width: [5, 7, 5],
- curve: "straight",
- dashArray: [0, 8, 5],
- },
- title: {
- text: "Page Statistics",
- align: "left",
- },
- legend: {
- tooltipHoverFormatter: function (val, opts) {
- return (
- val +
- " - " +
- opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] +
- ""
- );
- },
- },
- markers: {
- size: 0,
- hover: {
- sizeOffset: 6,
- },
- },
- xaxis: {
- categories: [
- "01 Jan",
- "02 Jan",
- "03 Jan",
- "04 Jan",
- "05 Jan",
- "06 Jan",
- "07 Jan",
- "08 Jan",
- "09 Jan",
- "10 Jan",
- "11 Jan",
- "12 Jan",
- ],
- },
- tooltip: {
- y: [
- {
- title: {
- formatter: function (val) {
- return val + " (mins)";
- },
- },
- },
- {
- title: {
- formatter: function (val) {
- return val + " per session";
- },
- },
- },
- {
- title: {
- formatter: function (val) {
- return val;
- },
- },
- },
- ],
- },
- grid: {
- borderColor: "#f1f1f1",
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Realtime
-
-
-
-
- >
- );
- }
-}
-
-export default Dashed;
diff --git a/components/Pages/Charts/ApexCharts/LineCharts/Gradient.js b/components/Pages/Charts/ApexCharts/LineCharts/Gradient.js
deleted file mode 100644
index c98535e..0000000
--- a/components/Pages/Charts/ApexCharts/LineCharts/Gradient.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class Gradient extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "Sales",
- data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5],
- },
- ],
- options: {
- forecastDataPoints: {
- count: 7,
- },
- stroke: {
- width: 5,
- curve: "smooth",
- },
- xaxis: {
- type: "datetime",
- categories: [
- "1/11/2000",
- "2/11/2000",
- "3/11/2000",
- "4/11/2000",
- "5/11/2000",
- "6/11/2000",
- "7/11/2000",
- "8/11/2000",
- "9/11/2000",
- "10/11/2000",
- "11/11/2000",
- "12/11/2000",
- "1/11/2001",
- "2/11/2001",
- "3/11/2001",
- "4/11/2001",
- "5/11/2001",
- "6/11/2001",
- ],
- tickAmount: 10,
- labels: {
- formatter: function (value, timestamp, opts) {
- return opts.dateFormatter(new Date(timestamp), "dd MMM");
- },
- },
- },
- title: {
- text: "Forecast",
- align: "left",
- style: {
- fontSize: "16px",
- color: "#666",
- },
- },
- fill: {
- type: "gradient",
- gradient: {
- shade: "dark",
- gradientToColors: ["#FDD835"],
- shadeIntensity: 1,
- type: "horizontal",
- opacityFrom: 1,
- opacityTo: 1,
- stops: [0, 100, 100, 100],
- },
- },
- yaxis: {
- min: -10,
- max: 40,
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Gradient
-
-
-
-
- >
- );
- }
-}
-
-export default Gradient;
diff --git a/components/Pages/Charts/ApexCharts/LineCharts/Stepline.js b/components/Pages/Charts/ApexCharts/LineCharts/Stepline.js
deleted file mode 100644
index c764ea3..0000000
--- a/components/Pages/Charts/ApexCharts/LineCharts/Stepline.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class Stepline extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58],
- },
- ],
- options: {
- stroke: {
- curve: "stepline",
- },
- dataLabels: {
- enabled: false,
- },
- title: {
- text: "Stepline Chart",
- align: "left",
- },
- markers: {
- hover: {
- sizeOffset: 4,
- },
- },
- },
- };
- }
- render() {
- return (
- <>
-
-
- Zoomable Timeseries
-
-
-
-
- >
- );
- }
-}
-
-export default Stepline;
diff --git a/components/Pages/Charts/ApexCharts/MixedCharts/LineArea.js b/components/Pages/Charts/ApexCharts/MixedCharts/LineArea.js
deleted file mode 100644
index caf53b1..0000000
--- a/components/Pages/Charts/ApexCharts/MixedCharts/LineArea.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React, { Component } from 'react';
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class LineArea extends Component {
-
- constructor(props) {
- super(props);
-
- this.state = {
-
- series: [{
- name: 'TEAM A',
- type: 'area',
- data: [44, 55, 31, 47, 31, 43, 26, 41, 31, 47, 33]
- }, {
- name: 'TEAM B',
- type: 'line',
- data: [55, 69, 45, 61, 43, 54, 37, 52, 44, 61, 43]
- }],
- options: {
- chart: {
- height: 350,
- type: 'line',
- },
- stroke: {
- curve: 'smooth'
- },
- fill: {
- type:'solid',
- opacity: [0.35, 1],
- },
- labels: ['Dec 01', 'Dec 02','Dec 03','Dec 04','Dec 05','Dec 06','Dec 07','Dec 08','Dec 09 ','Dec 10','Dec 11'],
- markers: {
- size: 0
- },
- yaxis: [
- {
- title: {
- text: 'Series A',
- },
- },
- {
- opposite: true,
- title: {
- text: 'Series B',
- },
- },
- ],
- tooltip: {
- shared: true,
- intersect: false,
- y: {
- formatter: function (y) {
- if(typeof y !== "undefined") {
- return y.toFixed(0) + " points";
- }
- return y;
- }
- }
- }
- },
-
-
- };
- }
-
- render() {
- return (
- <>
-
-
- Line Area
-
-
-
-
- >
- );
- }
-}
-
-export default LineArea;
diff --git a/components/Pages/Charts/ApexCharts/MixedCharts/LineColumn.js b/components/Pages/Charts/ApexCharts/MixedCharts/LineColumn.js
deleted file mode 100644
index 40cc265..0000000
--- a/components/Pages/Charts/ApexCharts/MixedCharts/LineColumn.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { Component } from 'react';
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class LineColumn extends Component {
-
- constructor(props) {
- super(props);
-
- this.state = {
-
- series: [{
- name: 'Website Blog',
- type: 'column',
- data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
- }, {
- name: 'Social Media',
- type: 'line',
- data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
- }],
- options: {
- chart: {
- height: 350,
- type: 'line',
- },
- stroke: {
- width: [0, 4]
- },
- title: {
- text: 'Traffic Sources'
- },
- dataLabels: {
- enabled: true,
- enabledOnSeries: [1]
- },
- labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
- xaxis: {
- type: 'datetime'
- },
- yaxis: [{
- title: {
- text: 'Website Blog',
- },
-
- }, {
- opposite: true,
- title: {
- text: 'Social Media'
- }
- }]
- },
-
-
- };
- }
-
- render() {
- return (
- <>
-
-
- Line Column
-
-
-
-
- >
- );
- }
-}
-
-export default LineColumn;
diff --git a/components/Pages/Charts/ApexCharts/MixedCharts/LineColumnArea.js b/components/Pages/Charts/ApexCharts/MixedCharts/LineColumnArea.js
deleted file mode 100644
index b5b743e..0000000
--- a/components/Pages/Charts/ApexCharts/MixedCharts/LineColumnArea.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class LineColumnArea extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "TEAM A",
- type: "column",
- data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
- },
- {
- name: "TEAM B",
- type: "area",
- data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
- },
- {
- name: "TEAM C",
- type: "line",
- data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
- },
- ],
- options: {
- chart: {
- height: 350,
- type: "line",
- stacked: false,
- },
- stroke: {
- width: [0, 2, 5],
- curve: "smooth",
- },
- plotOptions: {
- bar: {
- columnWidth: "50%",
- },
- },
-
- fill: {
- opacity: [0.85, 0.25, 1],
- gradient: {
- inverseColors: false,
- shade: "light",
- type: "vertical",
- opacityFrom: 0.85,
- opacityTo: 0.55,
- stops: [0, 100, 100, 100],
- },
- },
- labels: [
- "01/01/2003",
- "02/01/2003",
- "03/01/2003",
- "04/01/2003",
- "05/01/2003",
- "06/01/2003",
- "07/01/2003",
- "08/01/2003",
- "09/01/2003",
- "10/01/2003",
- "11/01/2003",
- ],
- markers: {
- size: 0,
- },
- xaxis: {
- type: "datetime",
- },
- yaxis: {
- title: {
- text: "Points",
- },
- min: 0,
- },
- tooltip: {
- shared: true,
- intersect: false,
- y: {
- formatter: function (y) {
- if (typeof y !== "undefined") {
- return y.toFixed(0) + " points";
- }
- return y;
- },
- },
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Line Column Area
-
-
-
-
- >
- );
- }
-}
-
-export default LineColumnArea;
diff --git a/components/Pages/Charts/ApexCharts/MixedCharts/MultipleYAxis.js b/components/Pages/Charts/ApexCharts/MixedCharts/MultipleYAxis.js
deleted file mode 100644
index d361f37..0000000
--- a/components/Pages/Charts/ApexCharts/MixedCharts/MultipleYAxis.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class MultipleYAxis extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "Income",
- type: "column",
- data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6],
- },
- {
- name: "Cashflow",
- type: "column",
- data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5],
- },
- {
- name: "Revenue",
- type: "line",
- data: [20, 29, 37, 36, 44, 45, 50, 58],
- },
- ],
- options: {
- chart: {
- height: 350,
- type: "line",
- stacked: false,
- },
- dataLabels: {
- enabled: false,
- },
- stroke: {
- width: [1, 1, 4],
- },
- title: {
- text: "XYZ - Stock Analysis (2009 - 2016)",
- align: "left",
- offsetX: 110,
- },
- xaxis: {
- categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
- },
- yaxis: [
- {
- axisTicks: {
- show: true,
- },
- axisBorder: {
- show: true,
- color: "#008FFB",
- },
- labels: {
- style: {
- colors: "#008FFB",
- },
- },
- title: {
- text: "Income (thousand crores)",
- style: {
- color: "#008FFB",
- },
- },
- tooltip: {
- enabled: true,
- },
- },
- {
- seriesName: "Income",
- opposite: true,
- axisTicks: {
- show: true,
- },
- axisBorder: {
- show: true,
- color: "#00E396",
- },
- labels: {
- style: {
- colors: "#00E396",
- },
- },
- title: {
- text: "Operating Cashflow (thousand crores)",
- style: {
- color: "#00E396",
- },
- },
- },
- {
- seriesName: "Revenue",
- opposite: true,
- axisTicks: {
- show: true,
- },
- axisBorder: {
- show: true,
- color: "#FEB019",
- },
- labels: {
- style: {
- colors: "#FEB019",
- },
- },
- title: {
- text: "Revenue (thousand crores)",
- style: {
- color: "#FEB019",
- },
- },
- },
- ],
- tooltip: {
- fixed: {
- enabled: true,
- position: "topLeft", // topRight, topLeft, bottomRight, bottomLeft
- offsetY: 30,
- offsetX: 60,
- },
- },
- legend: {
- horizontalAlign: "left",
- offsetX: 40,
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Multiple Y Axis
-
-
-
-
- >
- );
- }
-}
-
-export default MultipleYAxis;
diff --git a/components/Pages/Charts/ApexCharts/PieCharts/DonutWithPattern.js b/components/Pages/Charts/ApexCharts/PieCharts/DonutWithPattern.js
deleted file mode 100644
index 4faae0e..0000000
--- a/components/Pages/Charts/ApexCharts/PieCharts/DonutWithPattern.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class PieCharts extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [44, 55, 41, 17, 15],
- options: {
- chart: {
- width: 380,
- type: "donut",
- dropShadow: {
- enabled: true,
- color: "#111",
- top: -1,
- left: 3,
- blur: 3,
- opacity: 0.2,
- },
- },
- stroke: {
- width: 0,
- },
- plotOptions: {
- pie: {
- donut: {
- labels: {
- show: true,
- total: {
- showAlways: true,
- show: true,
- },
- },
- },
- },
- },
- labels: ["Comedy", "Action", "SciFi", "Drama", "Horror"],
- dataLabels: {
- dropShadow: {
- blur: 3,
- opacity: 0.8,
- },
- },
- fill: {
- type: "pattern",
- opacity: 1,
- pattern: {
- enabled: true,
- style: [
- "verticalLines",
- "squares",
- "horizontalLines",
- "circles",
- "slantedLines",
- ],
- },
- },
- states: {
- hover: {
- filter: "none",
- },
- },
- theme: {
- palette: "palette2",
- },
- title: {
- text: "Favourite Movie Type",
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- width: 200,
- },
- legend: {
- position: "bottom",
- },
- },
- },
- ],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Pie Charts
-
-
-
-
- >
- );
- }
-}
-
-export default PieCharts;
diff --git a/components/Pages/Charts/ApexCharts/PieCharts/GradientDonut.js b/components/Pages/Charts/ApexCharts/PieCharts/GradientDonut.js
deleted file mode 100644
index 2141ca5..0000000
--- a/components/Pages/Charts/ApexCharts/PieCharts/GradientDonut.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class GradientDonut extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [44, 55, 41, 17, 15],
- options: {
- chart: {
- width: 380,
- type: "donut",
- },
- plotOptions: {
- pie: {
- startAngle: -90,
- endAngle: 270,
- },
- },
- dataLabels: {
- enabled: false,
- },
- fill: {
- type: "gradient",
- },
- legend: {
- formatter: function (val, opts) {
- return val + " - " + opts.w.globals.series[opts.seriesIndex];
- },
- },
- title: {
- text: "Gradient Donut with custom Start-angle",
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- width: 200,
- },
- legend: {
- position: "bottom",
- },
- },
- },
- ],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Gradient Donut
-
-
-
-
- >
- );
- }
-}
-
-export default GradientDonut;
diff --git a/components/Pages/Charts/ApexCharts/PieCharts/MonochromePie.js b/components/Pages/Charts/ApexCharts/PieCharts/MonochromePie.js
deleted file mode 100644
index 44e4fb4..0000000
--- a/components/Pages/Charts/ApexCharts/PieCharts/MonochromePie.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { Component } from 'react';
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class MonochromePie extends Component {
-
- constructor(props) {
- super(props);
-
- this.state = {
-
- series: [25, 15, 44, 55, 41, 17],
- options: {
- chart: {
- width: '100%',
- type: 'pie',
- },
- labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
- theme: {
- monochrome: {
- enabled: true
- }
- },
- plotOptions: {
- pie: {
- dataLabels: {
- offset: -5
- }
- }
- },
- title: {
- text: "Monochrome Pie"
- },
- dataLabels: {
- formatter(val, opts) {
- const name = opts.w.globals.labels[opts.seriesIndex]
- return [name, val.toFixed(1) + '%']
- }
- },
- legend: {
- show: false
- }
- },
-
-
- };
- }
-
- render() {
- return (
- <>
-
-
- Monochrome Pie
-
-
-
-
- >
- );
- }
-}
-
-export default MonochromePie;
diff --git a/components/Pages/Charts/ApexCharts/PieCharts/SimpleDonut.js b/components/Pages/Charts/ApexCharts/PieCharts/SimpleDonut.js
deleted file mode 100644
index 625a686..0000000
--- a/components/Pages/Charts/ApexCharts/PieCharts/SimpleDonut.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class SimpleDonut extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [44, 55, 41, 17, 15],
- options: {
- chart: {
- type: "donut",
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- width: 200,
- },
- legend: {
- position: "bottom",
- },
- },
- },
- ],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Simple Donut
-
-
-
-
- >
- );
- }
-}
-
-export default SimpleDonut;
diff --git a/components/Pages/Charts/ApexCharts/PieCharts/SimplePieChart.js b/components/Pages/Charts/ApexCharts/PieCharts/SimplePieChart.js
deleted file mode 100644
index e721a9c..0000000
--- a/components/Pages/Charts/ApexCharts/PieCharts/SimplePieChart.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class SimplePieChart extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [44, 55, 13, 43, 22],
- options: {
- chart: {
- width: 380,
- type: "pie",
- },
- labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- width: 200,
- },
- legend: {
- position: "bottom",
- },
- },
- },
- ],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Simple Pie Chart
-
-
-
-
- >
- );
- }
-}
-
-export default SimplePieChart;
diff --git a/components/Pages/Charts/ApexCharts/PieCharts/UpdateDonut.js b/components/Pages/Charts/ApexCharts/PieCharts/UpdateDonut.js
deleted file mode 100644
index 8d8889f..0000000
--- a/components/Pages/Charts/ApexCharts/PieCharts/UpdateDonut.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class UpdateDonut extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [44, 55, 13, 33],
- options: {
- chart: {
- width: 380,
- type: "donut",
- },
- dataLabels: {
- enabled: false,
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- width: 200,
- },
- legend: {
- show: false,
- },
- },
- },
- ],
- legend: {
- position: "right",
- offsetY: 0,
- height: 230,
- },
- },
- };
- }
-
- appendData() {
- var arr = this.state.series.slice();
- arr.push(Math.floor(Math.random() * (100 - 1 + 1)) + 1);
-
- this.setState({
- series: arr,
- });
- }
-
- removeData() {
- if (this.state.series.length === 1) return;
-
- var arr = this.state.series.slice();
- arr.pop();
-
- this.setState({
- series: arr,
- });
- }
-
- randomize() {
- this.setState({
- series: this.state.series.map(function () {
- return Math.floor(Math.random() * (100 - 1 + 1)) + 1;
- }),
- });
- }
-
- reset() {
- this.setState({
- series: [44, 55, 13, 33],
- });
- }
-
- render() {
- return (
- <>
-
-
- Update Donut
-
-
-
-
-
-
- this.appendData()}>+ ADD
-
- this.removeData()}>- REMOVE
-
- this.randomize()}>RANDOMIZE
-
- this.reset()}>RESET
-
-
-
- >
- );
- }
-}
-
-export default UpdateDonut;
diff --git a/components/Pages/Charts/ApexCharts/PolarAreaCharts/BasicPolarAreaCharts.js b/components/Pages/Charts/ApexCharts/PolarAreaCharts/BasicPolarAreaCharts.js
deleted file mode 100644
index cea1024..0000000
--- a/components/Pages/Charts/ApexCharts/PolarAreaCharts/BasicPolarAreaCharts.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class BasicPolarAreaCharts extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
- options: {
- chart: {
- type: "polarArea",
- },
- stroke: {
- colors: ["#fff"],
- },
- fill: {
- opacity: 0.8,
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- width: 200,
- },
- legend: {
- position: "bottom",
- },
- },
- },
- ],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Basic Polar Area Charts
-
-
-
-
- >
- );
- }
-}
-
-export default BasicPolarAreaCharts;
diff --git a/components/Pages/Charts/ApexCharts/PolarAreaCharts/Monochrome.js b/components/Pages/Charts/ApexCharts/PolarAreaCharts/Monochrome.js
deleted file mode 100644
index 12583c8..0000000
--- a/components/Pages/Charts/ApexCharts/PolarAreaCharts/Monochrome.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class Monochrome extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [42, 47, 52, 58, 65],
- options: {
- labels: ["Rose A", "Rose B", "Rose C", "Rose D", "Rose E"],
- fill: {
- opacity: 1,
- },
- stroke: {
- width: 1,
- colors: undefined,
- },
- yaxis: {
- show: false,
- },
- legend: {
- position: "bottom",
- },
- plotOptions: {
- polarArea: {
- rings: {
- strokeWidth: 0,
- },
- spokes: {
- strokeWidth: 0,
- },
- },
- },
- theme: {
- monochrome: {
- enabled: true,
- shadeTo: "light",
- shadeIntensity: 0.6,
- },
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- chart: {
- width: 200,
- },
-
- },
- },
- ],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Monochrome
-
-
-
-
- >
- );
- }
-}
-
-export default Monochrome;
diff --git a/components/Pages/Charts/ApexCharts/RadarCharts/BasicRadarCharts.js b/components/Pages/Charts/ApexCharts/RadarCharts/BasicRadarCharts.js
deleted file mode 100644
index 07e8f22..0000000
--- a/components/Pages/Charts/ApexCharts/RadarCharts/BasicRadarCharts.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class BasicRadarCharts extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "Series 1",
- data: [80, 50, 30, 40, 100, 20],
- },
- ],
- options: {
- chart: {
- height: 350,
- type: "radar",
- },
- title: {
- text: "Basic Radar Chart",
- },
- xaxis: {
- categories: ["January", "February", "March", "April", "May", "June"],
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Basic Radar Charts
-
-
-
-
- >
- );
- }
-}
-
-export default BasicRadarCharts;
diff --git a/components/Pages/Charts/ApexCharts/RadarCharts/RadarMultipleSeries.js b/components/Pages/Charts/ApexCharts/RadarCharts/RadarMultipleSeries.js
deleted file mode 100644
index 39a6a01..0000000
--- a/components/Pages/Charts/ApexCharts/RadarCharts/RadarMultipleSeries.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class RadarMultipleSeries extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "Series 1",
- data: [80, 50, 30, 40, 100, 20],
- },
- {
- name: "Series 2",
- data: [20, 30, 40, 80, 20, 80],
- },
- {
- name: "Series 3",
- data: [44, 76, 78, 13, 43, 10],
- },
- ],
- options: {
- chart: {
- height: 350,
- type: "radar",
- dropShadow: {
- enabled: true,
- blur: 1,
- left: 1,
- top: 1,
- },
- },
- title: {
- text: "Radar Chart - Multi Series",
- },
- stroke: {
- width: 2,
- },
- fill: {
- opacity: 0.1,
- },
- markers: {
- size: 0,
- },
- xaxis: {
- categories: ["2011", "2012", "2013", "2014", "2015", "2016"],
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Radar Multiple Series
-
-
-
-
- >
- );
- }
-}
-
-export default RadarMultipleSeries;
diff --git a/components/Pages/Charts/ApexCharts/RadarCharts/RadarWithPolygonFill.js b/components/Pages/Charts/ApexCharts/RadarCharts/RadarWithPolygonFill.js
deleted file mode 100644
index 3ac0e98..0000000
--- a/components/Pages/Charts/ApexCharts/RadarCharts/RadarWithPolygonFill.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class RadarWithPolygonFill extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [
- {
- name: "Series 1",
- data: [20, 100, 40, 30, 50, 80, 33],
- },
- ],
- options: {
- chart: {
- height: 350,
- type: "radar",
- },
- dataLabels: {
- enabled: true,
- },
- plotOptions: {
- radar: {
- size: 140,
- polygons: {
- strokeColors: "#e9e9e9",
- fill: {
- colors: ["#f8f8f8", "#fff"],
- },
- },
- },
- },
- title: {
- text: "Radar with Polygon Fill",
- },
- colors: ["#FF4560"],
- markers: {
- size: 4,
- colors: ["#fff"],
- strokeColor: "#FF4560",
- strokeWidth: 2,
- },
- tooltip: {
- y: {
- formatter: function (val) {
- return val;
- },
- },
- },
- xaxis: {
- categories: [
- "Sunday",
- "Monday",
- "Tuesday",
- "Wednesday",
- "Thursday",
- "Friday",
- "Saturday",
- ],
- },
- yaxis: {
- tickAmount: 7,
- labels: {
- formatter: function (val, i) {
- if (i % 2 === 0) {
- return val;
- } else {
- return "";
- }
- },
- },
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Radar with Polygon-fill
-
-
-
-
- >
- );
- }
-}
-
-export default RadarWithPolygonFill;
diff --git a/components/Pages/Charts/ApexCharts/RadialBarCharts/BasicRadialBarCharts.js b/components/Pages/Charts/ApexCharts/RadialBarCharts/BasicRadialBarCharts.js
deleted file mode 100644
index a1acbde..0000000
--- a/components/Pages/Charts/ApexCharts/RadialBarCharts/BasicRadialBarCharts.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class BasicRadialBarCharts extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [70],
- options: {
- chart: {
- height: 350,
- type: "radialBar",
- },
- plotOptions: {
- radialBar: {
- hollow: {
- size: "70%",
- },
- },
- },
- labels: ["Cricket"],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Basic Radial Bar Charts
-
-
-
-
- >
- );
- }
-}
-
-export default BasicRadialBarCharts;
diff --git a/components/Pages/Charts/ApexCharts/RadialBarCharts/CustomAngleCircle.js b/components/Pages/Charts/ApexCharts/RadialBarCharts/CustomAngleCircle.js
deleted file mode 100644
index 125a2af..0000000
--- a/components/Pages/Charts/ApexCharts/RadialBarCharts/CustomAngleCircle.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class CustomAngleCircle extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [76, 67, 61, 90],
- options: {
- plotOptions: {
- radialBar: {
- offsetY: 0,
- startAngle: 0,
- endAngle: 270,
- hollow: {
- margin: 5,
- size: "50%",
- background: "transparent",
- image: undefined,
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- show: false,
- },
- },
- },
- },
- colors: ["#1ab7ea", "#0084ff", "#39539E", "#0077B5"],
- labels: ["Vimeo", "Messenger", "Facebook", "LinkedIn"],
- legend: {
- show: true,
- floating: true,
- fontSize: "12px",
- position: "left",
- offsetX: 0,
- offsetY: 0,
- labels: {
- useSeriesColors: true,
- },
- markers: {
- size: 0,
- },
- formatter: function (seriesName, opts) {
- return seriesName + ": " + opts.w.globals.series[opts.seriesIndex];
- },
- itemMargin: {
- vertical: 3,
- },
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- legend: {
- show: false,
- },
- },
- },
- ],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Custom Angle Circle
-
-
-
-
- >
- );
- }
-}
-
-export default CustomAngleCircle;
diff --git a/components/Pages/Charts/ApexCharts/RadialBarCharts/MultipleRadialbars.js b/components/Pages/Charts/ApexCharts/RadialBarCharts/MultipleRadialbars.js
deleted file mode 100644
index d32fe02..0000000
--- a/components/Pages/Charts/ApexCharts/RadialBarCharts/MultipleRadialbars.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, { Component } from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class MultipleRadialbars extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [44, 55, 67, 83],
- options: {
- chart: {
- height: 350,
- type: "radialBar",
- },
- plotOptions: {
- radialBar: {
- dataLabels: {
- name: {
- fontSize: "22px",
- },
- value: {
- fontSize: "16px",
- },
- total: {
- show: true,
- label: "Total",
- formatter: function (w) {
- // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
- return 249;
- },
- },
- },
- },
- },
- labels: ["Apples", "Oranges", "Bananas", "Berries"],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
- Multiple Radialbars
-
-
-
-
- >
- );
- }
-}
-
-export default MultipleRadialbars;
diff --git a/components/Pages/Charts/NavBar.js b/components/Pages/Charts/NavBar.js
deleted file mode 100644
index f8aeb41..0000000
--- a/components/Pages/Charts/NavBar.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { useRouter } from "next/router";
-import styles from '@/components/Pages/Charts/NavBar.module.css'
-
-const NavBar = () => {
- const router = useRouter();
-
- return (
- <>
-
-
-
-
- ApexCharts
-
-
-
-
- Recharts
-
-
-
-
- >
- )
-}
-
-export default NavBar;
\ No newline at end of file
diff --git a/components/Pages/Charts/NavBar.module.css b/components/Pages/Charts/NavBar.module.css
deleted file mode 100644
index 4727a47..0000000
--- a/components/Pages/Charts/NavBar.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.topNavStyle {
- margin-bottom: 20px;
- border-bottom: 1px solid #eee;
-}
-.topNavStyle ul {
- list-style-type: none;
- padding: 0;
- margin: 0;
-}
-.topNavStyle ul li {
- display: inline-block;
- margin-right: 10px;
-}
-.topNavStyle ul li:last-child {
- margin-right: 0;
-}
-.topNavStyle ul li a {
- background-color: #fff;
- padding: 10px 30px;
- display: inline-block;
- border-radius: 20px 20px 0 0;
- text-decoration: none;
- font-weight: 500;
-}
-.topNavStyle ul li a:hover, .topNavStyle ul li.active a {
- background-color: var(--primaryColor);
- color: #fff;
-}
-
-/* For dark mode */
-[class="dark"] .topNavStyle {
- border-bottom: 1px solid var(--borderColor);
-}
\ No newline at end of file
diff --git a/components/Pages/Charts/Recharts/AreaChart/SimpleAreaChart.js b/components/Pages/Charts/Recharts/AreaChart/SimpleAreaChart.js
deleted file mode 100644
index 465102a..0000000
--- a/components/Pages/Charts/Recharts/AreaChart/SimpleAreaChart.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- AreaChart,
- Area,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- {
- name: "Page A",
- uv: 4000,
- pv: 2400,
- amt: 2400,
- },
- {
- name: "Page B",
- uv: 3000,
- pv: 1398,
- amt: 2210,
- },
- {
- name: "Page C",
- uv: 2000,
- pv: 9800,
- amt: 2290,
- },
- {
- name: "Page D",
- uv: 2780,
- pv: 3908,
- amt: 2000,
- },
- {
- name: "Page E",
- uv: 1890,
- pv: 4800,
- amt: 2181,
- },
- {
- name: "Page F",
- uv: 2390,
- pv: 3800,
- amt: 2500,
- },
- {
- name: "Page G",
- uv: 3490,
- pv: 4300,
- amt: 2100,
- },
-];
-
-const SimpleAreaChart = () => {
- return (
- <>
-
-
- Simple Area Chart
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default SimpleAreaChart;
diff --git a/components/Pages/Charts/Recharts/AreaChart/StackedAreaChart.js b/components/Pages/Charts/Recharts/AreaChart/StackedAreaChart.js
deleted file mode 100644
index 78c84f9..0000000
--- a/components/Pages/Charts/Recharts/AreaChart/StackedAreaChart.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- AreaChart,
- Area,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- {
- name: "Page A",
- uv: 4000,
- pv: 2400,
- amt: 2400,
- },
- {
- name: "Page B",
- uv: 3000,
- pv: 1398,
- amt: 2210,
- },
- {
- name: "Page C",
- uv: 2000,
- pv: 9800,
- amt: 2290,
- },
- {
- name: "Page D",
- uv: 2780,
- pv: 3908,
- amt: 2000,
- },
- {
- name: "Page E",
- uv: 1890,
- pv: 4800,
- amt: 2181,
- },
- {
- name: "Page F",
- uv: 2390,
- pv: 3800,
- amt: 2500,
- },
- {
- name: "Page G",
- uv: 3490,
- pv: 4300,
- amt: 2100,
- },
-];
-
-const StackedAreaChart = () => {
- return (
- <>
-
-
- Stacked Area Chart
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default StackedAreaChart;
diff --git a/components/Pages/Charts/Recharts/BarChart/SimpleBarChart.js b/components/Pages/Charts/Recharts/BarChart/SimpleBarChart.js
deleted file mode 100644
index ecea2e1..0000000
--- a/components/Pages/Charts/Recharts/BarChart/SimpleBarChart.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- BarChart,
- Bar,
- Cell,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- {
- name: "Page A",
- uv: 4000,
- pv: 2400,
- amt: 2400,
- },
- {
- name: "Page B",
- uv: 3000,
- pv: 1398,
- amt: 2210,
- },
- {
- name: "Page C",
- uv: 2000,
- pv: 9800,
- amt: 2290,
- },
- {
- name: "Page D",
- uv: 2780,
- pv: 3908,
- amt: 2000,
- },
- {
- name: "Page E",
- uv: 1890,
- pv: 4800,
- amt: 2181,
- },
- {
- name: "Page F",
- uv: 2390,
- pv: 3800,
- amt: 2500,
- },
- {
- name: "Page G",
- uv: 3490,
- pv: 4300,
- amt: 2100,
- },
-];
-
-const SimpleBarChart = () => {
- return (
- <>
-
-
- Tiny Bar Chart
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default SimpleBarChart;
diff --git a/components/Pages/Charts/Recharts/BarChart/TinyBarChart.js b/components/Pages/Charts/Recharts/BarChart/TinyBarChart.js
deleted file mode 100644
index 2cd2612..0000000
--- a/components/Pages/Charts/Recharts/BarChart/TinyBarChart.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- BarChart,
- Bar,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- {
- name: "Page A",
- uv: 4000,
- pv: 2400,
- amt: 2400,
- },
- {
- name: "Page B",
- uv: 3000,
- pv: 1398,
- amt: 2210,
- },
- {
- name: "Page C",
- uv: 2000,
- pv: 9800,
- amt: 2290,
- },
- {
- name: "Page D",
- uv: 2780,
- pv: 3908,
- amt: 2000,
- },
- {
- name: "Page E",
- uv: 1890,
- pv: 4800,
- amt: 2181,
- },
- {
- name: "Page F",
- uv: 2390,
- pv: 3800,
- amt: 2500,
- },
- {
- name: "Page G",
- uv: 3490,
- pv: 4300,
- amt: 2100,
- },
-];
-
-const TinyBarChart = () => {
- return (
- <>
-
-
- Tiny Bar Chart
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default TinyBarChart;
diff --git a/components/Pages/Charts/Recharts/ComposedChart/LineBarAreaComposedChart.js b/components/Pages/Charts/Recharts/ComposedChart/LineBarAreaComposedChart.js
deleted file mode 100644
index c30989a..0000000
--- a/components/Pages/Charts/Recharts/ComposedChart/LineBarAreaComposedChart.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- ComposedChart,
- Line,
- Area,
- Bar,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- Scatter,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- {
- name: "Page A",
- uv: 590,
- pv: 800,
- amt: 1400,
- cnt: 490,
- },
- {
- name: "Page B",
- uv: 868,
- pv: 967,
- amt: 1506,
- cnt: 590,
- },
- {
- name: "Page C",
- uv: 1397,
- pv: 1098,
- amt: 989,
- cnt: 350,
- },
- {
- name: "Page D",
- uv: 1480,
- pv: 1200,
- amt: 1228,
- cnt: 480,
- },
- {
- name: "Page E",
- uv: 1520,
- pv: 1108,
- amt: 1100,
- cnt: 460,
- },
- {
- name: "Page F",
- uv: 1400,
- pv: 680,
- amt: 1700,
- cnt: 380,
- },
-];
-
-const LineBarAreaComposedChart = () => {
- return (
- <>
-
-
- Line Bar Area Composed Chart
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default LineBarAreaComposedChart;
diff --git a/components/Pages/Charts/Recharts/ComposedChart/SameDataComposedChart.js b/components/Pages/Charts/Recharts/ComposedChart/SameDataComposedChart.js
deleted file mode 100644
index 7cace4c..0000000
--- a/components/Pages/Charts/Recharts/ComposedChart/SameDataComposedChart.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- ComposedChart,
- Line,
- Area,
- Bar,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
-} from 'recharts';
-
-const data = [
- {
- name: 'Page A',
- uv: 590,
- pv: 800,
- amt: 1400,
- },
- {
- name: 'Page B',
- uv: 868,
- pv: 967,
- amt: 1506,
- },
- {
- name: 'Page C',
- uv: 1397,
- pv: 1098,
- amt: 989,
- },
- {
- name: 'Page D',
- uv: 1480,
- pv: 1200,
- amt: 1228,
- },
- {
- name: 'Page E',
- uv: 1520,
- pv: 1108,
- amt: 1100,
- },
- {
- name: 'Page F',
- uv: 1400,
- pv: 680,
- amt: 1700,
- },
-];
-
-const SameDataComposedChart = () => {
- return (
- <>
-
-
- Same Data Composed Chart
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default SameDataComposedChart;
diff --git a/components/Pages/Charts/Recharts/LineChart/SimpleLineChart.js b/components/Pages/Charts/Recharts/LineChart/SimpleLineChart.js
deleted file mode 100644
index 58d0414..0000000
--- a/components/Pages/Charts/Recharts/LineChart/SimpleLineChart.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- LineChart,
- Line,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- {
- name: "Page A",
- uv: 4000,
- pv: 2400,
- amt: 2400,
- },
- {
- name: "Page B",
- uv: 3000,
- pv: 1398,
- amt: 2210,
- },
- {
- name: "Page C",
- uv: 2000,
- pv: 9800,
- amt: 2290,
- },
- {
- name: "Page D",
- uv: 2780,
- pv: 3908,
- amt: 2000,
- },
- {
- name: "Page E",
- uv: 1890,
- pv: 4800,
- amt: 2181,
- },
- {
- name: "Page F",
- uv: 2390,
- pv: 3800,
- amt: 2500,
- },
- {
- name: "Page G",
- uv: 3490,
- pv: 4300,
- amt: 2100,
- },
-];
-
-const SimpleLineChart = () => {
- return (
- <>
-
-
- Simple Line Chart
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default SimpleLineChart;
diff --git a/components/Pages/Charts/Recharts/LineChart/VerticalLineChart.js b/components/Pages/Charts/Recharts/LineChart/VerticalLineChart.js
deleted file mode 100644
index b7d6b7b..0000000
--- a/components/Pages/Charts/Recharts/LineChart/VerticalLineChart.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- LineChart,
- Line,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- {
- name: "Page A",
- uv: 4000,
- pv: 2400,
- amt: 2400,
- },
- {
- name: "Page B",
- uv: 3000,
- pv: 1398,
- amt: 2210,
- },
- {
- name: "Page C",
- uv: 2000,
- pv: 9800,
- amt: 2290,
- },
- {
- name: "Page D",
- uv: 2780,
- pv: 3908,
- amt: 2000,
- },
- {
- name: "Page E",
- uv: 1890,
- pv: 4800,
- amt: 2181,
- },
- {
- name: "Page F",
- uv: 2390,
- pv: 3800,
- amt: 2500,
- },
- {
- name: "Page G",
- uv: 3490,
- pv: 4300,
- amt: 2100,
- },
-];
-
-const VerticalLineChart = () => {
- return (
- <>
-
-
- Vertical Line Chart
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default VerticalLineChart;
diff --git a/components/Pages/Charts/Recharts/PieChart/TwoLevelPieChart.js b/components/Pages/Charts/Recharts/PieChart/TwoLevelPieChart.js
deleted file mode 100644
index e090583..0000000
--- a/components/Pages/Charts/Recharts/PieChart/TwoLevelPieChart.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { PieChart, Pie, Sector, Cell, ResponsiveContainer } from "recharts";
-
-const data01 = [
- { name: "Group A", value: 400 },
- { name: "Group B", value: 300 },
- { name: "Group C", value: 300 },
- { name: "Group D", value: 200 },
-];
-const data02 = [
- { name: "A1", value: 100 },
- { name: "A2", value: 300 },
- { name: "B1", value: 100 },
- { name: "B2", value: 80 },
- { name: "B3", value: 40 },
- { name: "B4", value: 30 },
- { name: "B5", value: 50 },
- { name: "C1", value: 100 },
- { name: "C2", value: 200 },
- { name: "D1", value: 150 },
- { name: "D2", value: 50 },
-];
-
-const TwoLevelPieChart = () => {
- return (
- <>
-
-
- Two Level Pie Chart
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default TwoLevelPieChart;
diff --git a/components/Pages/Charts/Recharts/PieChart/TwoSimplePieChart.js b/components/Pages/Charts/Recharts/PieChart/TwoSimplePieChart.js
deleted file mode 100644
index 6d11bfe..0000000
--- a/components/Pages/Charts/Recharts/PieChart/TwoSimplePieChart.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { PieChart, Pie, Tooltip, ResponsiveContainer } from 'recharts';
-
-const data01 = [
- { name: 'Group A', value: 400 },
- { name: 'Group B', value: 300 },
- { name: 'Group C', value: 300 },
- { name: 'Group D', value: 200 },
- { name: 'Group E', value: 278 },
- { name: 'Group F', value: 189 },
-];
-
-const data02 = [
- { name: 'Group A', value: 2400 },
- { name: 'Group B', value: 4567 },
- { name: 'Group C', value: 1398 },
- { name: 'Group D', value: 9800 },
- { name: 'Group E', value: 3908 },
- { name: 'Group F', value: 4800 },
-];
-
-const TwoSimplePieChart = () => {
- return (
- <>
-
-
- Two Simple Pie Chart
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default TwoSimplePieChart;
diff --git a/components/Pages/Charts/Recharts/RadarChart/SimpleRadarChart.js b/components/Pages/Charts/Recharts/RadarChart/SimpleRadarChart.js
deleted file mode 100644
index 5c2b8f4..0000000
--- a/components/Pages/Charts/Recharts/RadarChart/SimpleRadarChart.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- Radar,
- RadarChart,
- PolarGrid,
- PolarAngleAxis,
- PolarRadiusAxis,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- {
- subject: "Math",
- A: 120,
- B: 110,
- fullMark: 150,
- },
- {
- subject: "Chinese",
- A: 98,
- B: 130,
- fullMark: 150,
- },
- {
- subject: "English",
- A: 86,
- B: 130,
- fullMark: 150,
- },
- {
- subject: "Geography",
- A: 99,
- B: 100,
- fullMark: 150,
- },
- {
- subject: "Physics",
- A: 85,
- B: 90,
- fullMark: 150,
- },
- {
- subject: "History",
- A: 65,
- B: 85,
- fullMark: 150,
- },
-];
-
-const SimpleRadarChart = () => {
- return (
- <>
-
-
- Simple Radar Chart
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default SimpleRadarChart;
diff --git a/components/Pages/Charts/Recharts/RadarChart/SpecifiedDomainRadarChart.js b/components/Pages/Charts/Recharts/RadarChart/SpecifiedDomainRadarChart.js
deleted file mode 100644
index 71e56c8..0000000
--- a/components/Pages/Charts/Recharts/RadarChart/SpecifiedDomainRadarChart.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- Radar,
- RadarChart,
- PolarGrid,
- Legend,
- PolarAngleAxis,
- PolarRadiusAxis,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- {
- subject: "Math",
- A: 120,
- B: 110,
- fullMark: 150,
- },
- {
- subject: "Chinese",
- A: 98,
- B: 130,
- fullMark: 150,
- },
- {
- subject: "English",
- A: 86,
- B: 130,
- fullMark: 150,
- },
- {
- subject: "Geography",
- A: 99,
- B: 100,
- fullMark: 150,
- },
- {
- subject: "Physics",
- A: 85,
- B: 90,
- fullMark: 150,
- },
- {
- subject: "History",
- A: 65,
- B: 85,
- fullMark: 150,
- },
-];
-
-const SpecifiedDomainRadarChart = () => {
- return (
- <>
-
-
- Specified Domain Radar Chart
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default SpecifiedDomainRadarChart;
diff --git a/components/Pages/Charts/Recharts/ScatterChart/SimpleScatterChart.js b/components/Pages/Charts/Recharts/ScatterChart/SimpleScatterChart.js
deleted file mode 100644
index 822a624..0000000
--- a/components/Pages/Charts/Recharts/ScatterChart/SimpleScatterChart.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- ScatterChart,
- Scatter,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- ResponsiveContainer,
-} from "recharts";
-
-const data = [
- { x: 100, y: 200, z: 200 },
- { x: 120, y: 100, z: 260 },
- { x: 170, y: 300, z: 400 },
- { x: 140, y: 250, z: 280 },
- { x: 150, y: 400, z: 500 },
- { x: 110, y: 280, z: 200 },
-];
-
-const SimpleScatterChart = () => {
- return (
- <>
-
-
- Simple Scatter Chart
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default SimpleScatterChart;
diff --git a/components/Pages/Charts/Recharts/ScatterChart/ThreeDimScatterChart.js b/components/Pages/Charts/Recharts/ScatterChart/ThreeDimScatterChart.js
deleted file mode 100644
index 197a1ec..0000000
--- a/components/Pages/Charts/Recharts/ScatterChart/ThreeDimScatterChart.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- ScatterChart,
- Scatter,
- XAxis,
- YAxis,
- ZAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
-} from 'recharts';
-
-const data01 = [
- { x: 100, y: 200, z: 200 },
- { x: 120, y: 100, z: 260 },
- { x: 170, y: 300, z: 400 },
- { x: 140, y: 250, z: 280 },
- { x: 150, y: 400, z: 500 },
- { x: 110, y: 280, z: 200 },
-];
-const data02 = [
- { x: 200, y: 260, z: 240 },
- { x: 240, y: 290, z: 220 },
- { x: 190, y: 290, z: 250 },
- { x: 198, y: 250, z: 210 },
- { x: 180, y: 280, z: 260 },
- { x: 210, y: 220, z: 230 },
-];
-
-const ThreeDimScatterChart = () => {
- return (
- <>
-
-
- Three Dim Scatter Chart
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default ThreeDimScatterChart;
diff --git a/components/Pages/Gallery/GalleryContent.js b/components/Pages/Gallery/GalleryContent.js
deleted file mode 100644
index 2acde00..0000000
--- a/components/Pages/Gallery/GalleryContent.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Masonry from '@mui/lab/Masonry';
-import { styled } from '@mui/material/styles';
-
-const Label = styled(Paper)(({ theme }) => ({
- backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
- ...theme.typography.body2,
- padding: theme.spacing(0.5),
- textAlign: 'center',
- color: theme.palette.text.secondary,
- borderBottomLeftRadius: 0,
- borderBottomRightRadius: 0,
-}));
-
-export default function GalleryContent() {
- return (
-
-
- {itemData.map((item, index) => (
-
-
{index + 1}
-
-
- ))}
-
-
- );
-}
-
-const itemData = [
- {
- img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
- title: 'Fern',
- },
- {
- img: 'https://images.unsplash.com/photo-1627308595229-7830a5c91f9f',
- title: 'Snacks',
- },
- {
- img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
- title: 'Mushrooms',
- },
- {
- img: 'https://images.unsplash.com/photo-1529655683826-aba9b3e77383',
- title: 'Tower',
- },
- {
- img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
- title: 'Sea star',
- },
- {
- img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
- title: 'Honey',
- },
- {
- img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
- title: 'Basketball',
- },
- {
- img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
- title: 'Breakfast',
- },
- {
- img: 'https://images.unsplash.com/photo-1627328715728-7bcc1b5db87d',
- title: 'Tree',
- },
- {
- img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
- title: 'Burger',
- },
- {
- img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
- title: 'Camera',
- },
- {
- img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
- title: 'Coffee',
- },
- {
- img: 'https://images.unsplash.com/photo-1627000086207-76eabf23aa2e',
- title: 'Camping Car',
- },
- {
- img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
- title: 'Hats',
- },
- {
- img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
- title: 'Tomato basil',
- },
- {
- img: 'https://images.unsplash.com/photo-1627328561499-a3584d4ee4f7',
- title: 'Mountain',
- },
- {
- img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
- title: 'Bike',
- },
- {
- img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
- title: 'Bike',
- },
-];
\ No newline at end of file
diff --git a/components/Pages/Invoice/InvoiceDetailsContent.js b/components/Pages/Invoice/InvoiceDetailsContent.js
deleted file mode 100644
index 08b4dc4..0000000
--- a/components/Pages/Invoice/InvoiceDetailsContent.js
+++ /dev/null
@@ -1,853 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import Button from "@mui/material/Button";
-
-const InvoiceDetailsContent = () => {
- return (
- <>
-
-
- {/* Invoice Details */}
-
-
- Invoice Details
-
-
- {/* Billed To: */}
-
-
- Billed To:
-
-
-
- Thomas Adison
-
-
-
- 32104 Main
-
-
-
- Apt. 4c
-
-
-
- Springfield ST 54321
-
-
-
- {/* Payment : */}
-
-
- Payment :
-
-
-
- Total Due: $12,110.55
-
-
-
- Bank Name: American Bank
-
-
-
- Country: United States
-
-
-
- IBAN: ETD95476213874685
-
-
-
- SWIFT code: BR91905
-
-
-
-
- {/* Invoice id */}
-
-
- Invoice #4987
-
-
- {/* Shipped To: */}
-
-
- Shipped To:
-
-
-
- Thomas Adison
-
-
-
- 32104 Main
-
-
-
- Apt. 4c
-
-
-
- Springfield ST 54321
-
-
-
- {/* Order Date : */}
-
-
- Order Date:
-
-
-
- October 14, 2021
-
-
-
-
-
- {/* Order Summary */}
-
- Order Summary
-
-
-
-
-
-
-
- Item
-
-
-
- Quantity
-
-
-
- Unit Price
-
-
-
- Price
-
-
-
-
-
-
-
-
-
-
- Laptop Macos Pro
-
-
-
-
-
- 2
-
-
-
- 200
-
-
-
- $400
-
-
-
-
-
-
-
-
- Smart Camera XD6
-
-
-
-
-
- 1
-
-
-
- 1
-
-
-
- $200.00
-
-
-
-
-
-
-
-
- Pixi 8 Wireless Airphone
-
-
-
-
-
- 1
-
-
-
- 1
-
-
-
- $120.00
-
-
-
-
-
-
-
-
- Jebble Smart Watch
-
-
-
-
-
- 1
-
-
-
- 1
-
-
-
- $120.00
-
-
-
-
-
-
-
-
- Airpod
-
-
-
-
-
- 1
-
-
-
- 1
-
-
-
- $120.00
-
-
-
- {/* Sub Total */}
-
-
- Sub Total :
-
-
-
- $960.00
-
-
-
-
-
- Discount :
-
-
-
- $60.00
-
-
-
-
-
- Shipping Charge :
-
-
-
- $50.00
-
-
-
-
-
- Estimated Tax :
-
-
-
- $00.00
-
-
-
-
-
- Total (USD) :
-
-
-
- $850.00
-
-
-
- {/* Print & Button Button */}
-
-
-
- Print
-
-
-
- download
-
-
-
-
-
-
-
- >
- );
-};
-
-export default InvoiceDetailsContent;
diff --git a/components/Pages/Invoice/InvoiceLists.js b/components/Pages/Invoice/InvoiceLists.js
deleted file mode 100644
index 0b304eb..0000000
--- a/components/Pages/Invoice/InvoiceLists.js
+++ /dev/null
@@ -1,627 +0,0 @@
-import * as React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Checkbox from '@mui/material/Checkbox';
-import Tooltip from "@mui/material/Tooltip";
-import DeleteIcon from "@mui/icons-material/Delete";
-import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-function InvoiceList(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-InvoiceList.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(
- orderID,
- productName,
- clientName,
- clientImg,
- email,
- issuedDate,
- total,
- balance,
- badgeClass,
-) {
- return {
- orderID,
- productName,
- clientName,
- clientImg,
- email,
- issuedDate,
- total,
- balance,
- badgeClass,
- };
-}
-
-const rows = [
- createData(
- "#14250",
- "Laptop Macos Pro",
- "Colin Firth",
- "/images/user1.png",
- "colinfirth@gmail.com",
- "10 Jan 2023",
- "$845",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14251",
- "Smart Camera XD6",
- "Wade Dave",
- "/images/user2.png",
- "wadedave@gmail.com",
- "11 Jan 2023",
- "$189.50",
- "Not Paid",
- "dangerBadge",
- ),
- createData(
- "#14252",
- "Pixi 8 Wireless Airphone",
- "Seth Riley",
- "/images/user3.png",
- "sethriley@gmail.com",
- "12 Jan 2023",
- "$250.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14253",
- "Jebble Smart Watch",
- "Gilbert Dan",
- "/images/user4.png",
- "gilbertdan@gmail.com",
- "13 Jan 2023",
- "$289.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14254",
- "Admas Airpod x-Zon",
- "Joshua Glen",
- "/images/user5.png",
- "joshuaGlen@gmail.com",
- "14 Jan 2023",
- "$289.50",
- "Not Paid",
- "dangerBadge",
- ),
- createData(
- "#14255",
- "Smart Satch F8 Pro",
- "Lewis Milton",
- "/images/user6.png",
- "lewisMilton@gmail.com",
- "15 Jan 2023",
- "$289.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14256",
- "Nord Fold ZL",
- "Liam Ethan",
- "/images/user7.png",
- "liamEthan@gmail.com",
- "16 Jan 2023",
- "$289.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14257",
- "Wall Clock Cimbina",
- "Ramon Miles",
- "/images/user8.png",
- "ramonMiles@gmail.com",
- "17 Jan 2023",
- "$289.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14258",
- "Galaxo T6 Munsun",
- "Brian Roberto",
- "/images/user9.png",
- "ramonMiles@gmail.com",
- "18 Jan 2023",
- "$289.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14259",
- "Laptop Macos Pro",
- "Colin Firth",
- "/images/user10.png",
- "colinFirth@gmail.com",
- "19 Jan 2023",
- "$289.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14260",
- "Smart Camera XD6",
- "Wade Dave",
- "/images/user11.png",
- "wadeDave@gmail.com",
- "20 Jan 2023",
- "$189.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14261",
- "Pixi 8 Wireless Airphone",
- "Seth Riley",
- "/images/user12.png",
- "wadeDave@gmail.com",
- "21 Jan 2023",
- "$250.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14262",
- "Jebble Smart Watch",
- "Gilbert Dan",
- "/images/user13.png",
- "wadeDave@gmail.com",
- "22 Jan 2023",
- "$289.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14263",
- "Admas Airpod x-Zon",
- "Joshua Glen",
- "/images/user14.png",
- "joshuaGlen@gmail.com",
- "23 Jan 2023",
- "$289.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14264",
- "Smart Satch F8 Pro",
- "Lewis Milton",
- "/images/user15.png",
- "lewisMilton@gmail.com",
- "24 Jan 2023",
- "$289.50",
- "Paid",
- "successBadge",
- ),
- createData(
- "#14265",
- "Nord Fold ZL",
- "Liam Ethan",
- "/images/product7.png",
- "liamEthan@gmail.com",
- "25 Jan 2023",
- "$289.50",
- "Paid",
- "successBadge",
- ),
-].sort((a, b) => (a.orderID < b.orderID ? -1 : 1));
-
-export default function InvoiceLists() {
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
- Invoice Lists
-
-
-
-
-
-
-
-
- #
-
-
-
- Product Name
-
-
-
- Client Name
-
-
-
- Issued Date
-
-
-
- Total
-
-
-
- Balance
-
-
-
- Action
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
-
- {row.orderID}
-
-
-
- {row.productName}
-
-
-
-
-
-
-
- {row.clientName}
-
-
- {row.email}
-
-
-
-
-
-
- {row.issuedDate}
-
-
-
- {row.total}
-
-
-
-
- {row.balance}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/Pages/Maps/BasicMarkers.js b/components/Pages/Maps/BasicMarkers.js
deleted file mode 100644
index b026dcf..0000000
--- a/components/Pages/Maps/BasicMarkers.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- ComposableMap,
- Geographies,
- Geography,
- Marker
-} from "react-simple-maps";
-
-const geoUrl =
- "https://raw.githubusercontent.com/deldersveld/topojson/master/continents/south-america.json";
-
-const markers = [
- {
- markerOffset: -30,
- name: "Buenos Aires",
- coordinates: [-58.3816, -34.6037]
- },
- { markerOffset: 15, name: "La Paz", coordinates: [-68.1193, -16.4897] },
- { markerOffset: 15, name: "Brasilia", coordinates: [-47.8825, -15.7942] },
- { markerOffset: 15, name: "Santiago", coordinates: [-70.6693, -33.4489] },
- { markerOffset: 15, name: "Bogota", coordinates: [-74.0721, 4.711] },
- { markerOffset: 15, name: "Quito", coordinates: [-78.4678, -0.1807] },
- { markerOffset: -30, name: "Georgetown", coordinates: [-58.1551, 6.8013] },
- { markerOffset: -30, name: "Asuncion", coordinates: [-57.5759, -25.2637] },
- { markerOffset: 15, name: "Paramaribo", coordinates: [-55.2038, 5.852] },
- { markerOffset: 15, name: "Montevideo", coordinates: [-56.1645, -34.9011] },
- { markerOffset: 15, name: "Caracas", coordinates: [-66.9036, 10.4806] },
- { markerOffset: 15, name: "Lima", coordinates: [-77.0428, -12.0464] }
-];
-
-const BasicMarkers = () => {
- return (
- <>
-
-
- Basic Markers
-
-
-
-
- {({ geographies }) =>
- geographies.map((geo) => (
-
- ))
- }
-
- {markers.map(({ name, coordinates, markerOffset }) => (
-
-
-
-
-
-
- {name}
-
-
- ))}
-
-
- >
- );
-};
-
-export default BasicMarkers;
\ No newline at end of file
diff --git a/components/Pages/Maps/EuropeMapWithGraticule.js b/components/Pages/Maps/EuropeMapWithGraticule.js
deleted file mode 100644
index ab5ab2e..0000000
--- a/components/Pages/Maps/EuropeMapWithGraticule.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import {
- ComposableMap,
- Geographies,
- Geography,
- Graticule
-} from "react-simple-maps";
-
-const geoUrl =
- "https://raw.githubusercontent.com/deldersveld/topojson/master/continents/europe.json";
-
-const EuropeMapWithGraticule = () => {
- return (
- <>
-
-
- Europe Map With Graticule
-
-
-
-
-
- {({ geographies }) =>
- geographies.map((geo) => (
-
- ))
- }
-
-
-
- >
- );
-};
-
-export default EuropeMapWithGraticule;
\ No newline at end of file
diff --git a/components/Pages/Maps/GoogleMap.js b/components/Pages/Maps/GoogleMap.js
deleted file mode 100644
index a845fd5..0000000
--- a/components/Pages/Maps/GoogleMap.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-
-const GoogleMap = () => {
- return (
- <>
-
-
- Google Map
-
-
-
-
- >
- );
-};
-
-export default GoogleMap;
diff --git a/components/Pages/Pricing/PricingPlanStyle1.js b/components/Pages/Pricing/PricingPlanStyle1.js
deleted file mode 100644
index 2c6dc88..0000000
--- a/components/Pages/Pricing/PricingPlanStyle1.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Button from "@mui/material/Button";
-import Link from "next/link";
-import styles from "@/components/Pages/Pricing/PricingPlanStyle1.module.css";
-
-const priceInfo = [
- {
- id: 1,
- title: "Basic Plan",
- subTitle: "A simple start for everyone",
- icon: "ri-shield-check-fill",
- price: "50",
- duration: "per month",
- priceLists: [
- {
- title: "Free Live Support",
- },
- {
- title: "30GB Disk Space",
- },
- {
- title: "Scalable Bandwith",
- },
- {
- title: "Free Setup",
- },
- ],
- },
- {
- id: 2,
- title: "Professional Plan",
- subTitle: "A simple start for everyone",
- icon: "ri-pie-chart-2-line",
- price: "50",
- duration: "per month",
- priceLists: [
- {
- title: "Free Live Support",
- },
- {
- title: "35GB Disk Space",
- },
- {
- title: "Scalable Bandwith",
- },
- {
- title: "Free Setup",
- },
- ],
- },
- {
- id: 3,
- title: "Enterprise Plan",
- subTitle: "A simple start for everyone",
- icon: "ri-briefcase-line",
- price: "150",
- duration: "per month",
- priceLists: [
- {
- title: "Free Live Support",
- },
- {
- title: "40GB Disk Space",
- },
- {
- title: "Scalable Bandwith",
- },
- {
- title: "Free Setup",
- },
- ],
- },
- {
- id: 4,
- title: "Unlimited Plan",
- subTitle: "A simple start for everyone",
- icon: "ri-star-half-line",
- price: "200",
- duration: "per month",
- priceLists: [
- {
- title: "Free Live Support",
- },
- {
- title: "50GB Disk Space",
- },
- {
- title: "Scalable Bandwith",
- },
- {
- title: "Free Setup",
- },
- ],
- },
-];
-
-const PricingPlanStyle1 = () => {
- return (
- <>
-
- Pricing Plans - 1
-
-
-
- {priceInfo.map((info) => (
-
-
-
-
-
- {info.title}
-
-
-
- {info.subTitle}
-
-
-
-
-
-
-
-
-
- ${info.price}/{" "}
- {info.duration}
-
-
-
-
-
- Sign Up Now
-
-
-
-
-
- {info.priceLists.map((list) => (
- {list.title}
- ))}
-
-
-
- ))}
-
- >
- );
-};
-
-export default PricingPlanStyle1;
diff --git a/components/Pages/Pricing/PricingPlanStyle1.module.css b/components/Pages/Pricing/PricingPlanStyle1.module.css
deleted file mode 100644
index 32fd2bf..0000000
--- a/components/Pages/Pricing/PricingPlanStyle1.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.icon {
- color: var(--primaryColor);
- font-size: 30px;
-}
-.priceList {
- list-style-type: none;
- padding: 0;
- margin: 0;
-}
-.priceList li {
- margin-bottom: 15px;
- position: relative;
- padding-left: 16px;
-}
-.priceList li:last-child {
- margin-bottom: 0;
-}
-.priceList li:before {
- content: '';
- background-color: var(--primaryColor);
- position: absolute;
- top: 4px;
- left: 0;
- width: 10px;
- height: 10px;
- border-radius: 100%;
-}
-
-/* For RTL Style */
-[dir="rtl"] .priceList li {
- padding-left: 0;
- padding-right: 16px;
-}
-[dir="rtl"] .priceList li:before {
- left: auto;
- right: 0;
-}
\ No newline at end of file
diff --git a/components/Pages/Pricing/PricingPlanStyle2.js b/components/Pages/Pricing/PricingPlanStyle2.js
deleted file mode 100644
index ccddddc..0000000
--- a/components/Pages/Pricing/PricingPlanStyle2.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Button from "@mui/material/Button";
-import Link from "next/link";
-import styles from "@/components/Pages/Pricing/PricingPlanStyle2.module.css";
-
-const priceInfo = [
- {
- id: 1,
- title: "Basic Plan",
- subTitle:
- "Perfect for an individual or a small team starting to get bigger",
- price: "50",
- duration: "per month",
- priceLists: [
- {
- title: "100 Responses a Month",
- },
- {
- title: "Unlimited Forms and Surveys",
- },
- {
- title: "Unlimited Fields",
- },
- {
- title: "Basic Form Creation Tools",
- },
- {
- title: "Up to 2 Subdomains",
- },
- ],
- },
- {
- id: 2,
- title: "Professional Plan",
- subTitle:
- "Perfect for an individual or a small team starting to get bigger",
- price: "50",
- duration: "per month",
- priceLists: [
- {
- title: "120 Responses a Month",
- },
- {
- title: "Unlimited Forms and Surveys",
- },
- {
- title: "Unlimited Fields",
- },
- {
- title: "Basic Form Creation Tools",
- },
- {
- title: "Up to 5 Subdomains",
- },
- ],
- },
- {
- id: 3,
- title: "Enterprise Plan",
- subTitle:
- "Perfect for an individual or a small team starting to get bigger",
- price: "150",
- duration: "per month",
- priceLists: [
- {
- title: "150 Responses a Month",
- },
- {
- title: "Unlimited Forms and Surveys",
- },
- {
- title: "Unlimited Fields",
- },
- {
- title: "Basic Form Creation Tools",
- },
- {
- title: "Up to 10 Subdomains",
- },
- ],
- },
-];
-
-const PricingPlanStyle2 = () => {
- return (
- <>
-
- Pricing Plans - 2
-
-
-
- {priceInfo.map((info) => (
-
-
-
-
-
- {info.title}
-
-
-
- {info.subTitle}
-
-
-
-
-
- ${info.price}/{" "}
- {info.duration}
-
-
-
-
-
- Get Started
-
-
-
-
-
- {info.priceLists.map((list) => (
-
- {list.title}
-
- ))}
-
-
-
- ))}
-
- >
- );
-};
-
-export default PricingPlanStyle2;
diff --git a/components/Pages/Pricing/PricingPlanStyle2.module.css b/components/Pages/Pricing/PricingPlanStyle2.module.css
deleted file mode 100644
index aa08a7f..0000000
--- a/components/Pages/Pricing/PricingPlanStyle2.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.priceList {
- list-style-type: none;
- padding: 0;
- margin: 0;
-}
-.priceList li {
- margin-bottom: 15px;
- position: relative;
- padding-left: 30px;
-}
-.priceList li:last-child {
- margin-bottom: 0;
-}
-.priceList li i {
- background-color: rgba(117, 127, 239, 0.1);
- position: absolute;
- top: 0px;
- left: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
- border-radius: 100%;
- text-align: center;
-}
-
-/* For RTL Style */
-[dir="rtl"] .priceList li {
- padding-left: 0;
- padding-right: 30px;
-}
-[dir="rtl"] .priceList li i {
- left: auto;
- right: 0;
-}
\ No newline at end of file
diff --git a/components/Pages/Profile/ActivityTimeline/ActivityTimeline.module.css b/components/Pages/Profile/ActivityTimeline/ActivityTimeline.module.css
deleted file mode 100644
index 5d8b844..0000000
--- a/components/Pages/Profile/ActivityTimeline/ActivityTimeline.module.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.timelineList .tList {
- position: relative;
- margin-bottom: 15px;
- padding-bottom: 15px;
- border-bottom: 1px solid #F7FAFF;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.timelineList .tList:last-child {
- border: none;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-.timelineList .tList .content {
- display: flex;
- align-items: center;
-}
-.timelineList .tList .content img {
- margin-right: 10px;
- width: 27px;
-}
-.timelineList .tList .content h5 {
- margin: 0;
- color: #5B5B98;
- font-size: 13px;
- font-weight: 500;
-}
-.timelineList .tList .date {
- color: #A9A9C8;
- font-size: 12px;
- margin: 0;
-}
-
-@media only screen and (min-width: 1800px) {
- .timelineList .tList {
- margin-bottom: 16.5px;
- padding-bottom: 16.5px;
- }
-}
\ No newline at end of file
diff --git a/components/Pages/Profile/ActivityTimeline/index.js b/components/Pages/Profile/ActivityTimeline/index.js
deleted file mode 100644
index 265ecda..0000000
--- a/components/Pages/Profile/ActivityTimeline/index.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import styles from "@/components/Dashboard/ProjectManagement/ActivityTimeline/ActivityTimeline.module.css";
-
-const ActivityTimelineData = [
- {
- id: "1",
- image: '/images/pdf-icon.png',
- title: "Donald updated the status",
- time: "54 min ago",
- },
- {
- id: "2",
- image: '/images/man.png',
- title: "Design new UI and check sales",
- time: "10 hours ago",
- },
- {
- id: "3",
- title: "James Bangs Client Meeting",
- image: '/images/small-product-img.png',
- time: "5 min ago",
- },
- {
- id: "4",
- title: "Joseph Rust opened new showcase",
- image: '/images/small-product-img2.png',
- time: "10 min ago",
- },
- {
- id: "5",
- title: "Brust opened new showcase",
- image: '/images/small-product-img3.png',
- time: "15 min ago",
- },
- {
- id: "6",
- title: "Create a new project for client",
- image: '/images/man.png',
- time: "20 min ago",
- },
-];
-
-const ActivityTimeline = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Activity Timeline
-
-
-
-
-
-
-
-
-
-
-
- {ActivityTimelineData.slice(0, 6).map((timeline) => (
-
-
-
-
{timeline.title}
-
-
{timeline.time}
-
- ))}
-
-
- >
- );
-};
-
-export default ActivityTimeline;
diff --git a/components/Pages/Profile/Features.js b/components/Pages/Profile/Features.js
deleted file mode 100644
index d9e2d26..0000000
--- a/components/Pages/Profile/Features.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-
-const FeaturesData = [
- {
- id: "1",
- subTitle: "Completed Projects",
- title: "24k",
- image: "/images/users-icon.png",
- },
- {
- id: "2",
- subTitle: "Pending Projects",
- title: "17",
- image: "/images/graph-icon.png",
- },
- {
- id: "3",
- subTitle: "Total Revenue",
- title: "16.2M",
- image: "/images/work-icon.png",
- }
-];
-
-const Features = () => {
- return (
- <>
-
- {FeaturesData.map((feature) => (
-
-
-
-
-
-
-
-
-
- {feature.subTitle}
-
-
- {feature.title}
-
-
-
-
-
- ))}
-
- >
- );
-};
-
-export default Features;
diff --git a/components/Pages/Profile/ImpressionShare.js b/components/Pages/Profile/ImpressionShare.js
deleted file mode 100644
index a8ccbb0..0000000
--- a/components/Pages/Profile/ImpressionShare.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { Component } from "react";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-import styles from "@/components/Dashboard/Analytics/Profile/ImpressionShare.module.css"
-
-class ImpressionShare extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- series: [45],
- options: {
- chart: {
- type: "radialBar",
- offsetY: -20,
- sparkline: {
- enabled: true,
- },
- },
- plotOptions: {
- radialBar: {
- startAngle: -110,
- endAngle: 110,
- track: {
- background: "#e7e7e7",
- strokeWidth: "90%",
- margin: 5,
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- offsetY: -2,
- fontSize: "15px",
- fontWeight: "500",
- color: '#5B5B98'
- },
- },
- },
- },
- grid: {
- padding: {
- top: -10,
- },
- },
- fill: {
- colors: ["#00B69B"],
- },
- labels: ["Average Results"],
- },
- };
- }
-
- render() {
- return (
- <>
-
-
-
Excellent
- Impression Share
-
- >
- );
- }
-}
-
-export default ImpressionShare;
diff --git a/components/Pages/Profile/ImpressionShare.module.css b/components/Pages/Profile/ImpressionShare.module.css
deleted file mode 100644
index 57a83ce..0000000
--- a/components/Pages/Profile/ImpressionShare.module.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.chartBox {
- text-align: center;
- top: 12px;
- position: relative;
-}
-.chartBox h4 {
- margin: 0;
- color: #00B69B;
- font-weight: 500;
- font-size: 11px;
- line-height: 14px;
- position: absolute;
- bottom: 30px;
- left: 0;
- right: 0;
-}
-.chartBox h3 {
- margin: 0;
- color: #5B5B98;
- font-weight: 500;
- font-size: 12px;
- position: relative;
- bottom: 7px;
-}
\ No newline at end of file
diff --git a/components/Pages/Profile/MyTasks.js b/components/Pages/Profile/MyTasks.js
deleted file mode 100644
index 7df9c01..0000000
--- a/components/Pages/Profile/MyTasks.js
+++ /dev/null
@@ -1,415 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import IconButton from "@mui/material/IconButton";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Tooltip from "@mui/material/Tooltip";
-
-function MyTask(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-MyTask.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(name, startDate, endDate, status, badgeClass, budget) {
- return {
- name,
- startDate,
- endDate,
- status,
- badgeClass,
- budget
- };
-}
-
-const rows = [
- createData(
- "Public Beta Release",
- "1 Jan 2022",
- "1 Apr 2022",
- "Completed",
- "successBadge",
- "$1250"
- ),
- createData(
- "Fix Platform Errors",
- "1 Mar 2022",
- "1 May 2022",
- "Completed",
- "successBadge",
- "$1550"
- ),
- createData(
- "Launch our Mobile App",
- "15 Apr 2022",
- "15 Jun 2022",
- "On Going",
- "primaryBadge",
- "$2500"
- ),
- createData(
- "Add the New Pricing Page",
- "15 May 2022",
- "15 Jun 2022",
- "Pending",
- "dangerBadge",
- "$100"
- ),
- createData(
- "Redesign New Online Shop",
- "15 Jun 2022",
- "15 Aug 2022",
- "On Going",
- "primaryBadge",
- "$1000"
- ),
- createData(
- "Material Ui Design",
- "15 Jul 2022",
- "15 Sep 2022",
- "On Going",
- "primaryBadge",
- "$2200"
- ),
- createData(
- "Add Progress Track",
- "15 Mar 2022",
- "15 May 2022",
- "Completed",
- "successBadge",
- "$1400"
- ),
- createData(
- "Web Design",
- "15 Aug 2022",
- "15 Dec 2022",
- "On Going",
- "primaryBadge",
- "$4000"
- ),
- createData(
- "Web Development",
- "15 Nov 2022",
- "15 Jan 2023",
- "On Going",
- "primaryBadge",
- "$400"
- ),
- createData(
- "React App Development",
- "15 Jan 2022",
- "15 Mar 2022",
- "Completed",
- "successBadge",
- "$1200"
- ),
- createData(
- "eCommerce Development",
- "15 Mar 2022",
- "15 May 2022",
- "On Going",
- "primaryBadge",
- "$250"
- ),
- createData(
- "App Development",
- "15 May 2022",
- "15 Jul 2022",
- "On Going",
- "primaryBadge",
- "$3400"
- ),
-].sort((a, b) => (a.name < b.name ? -1 : 1));
-
-const MyTasks = () => {
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(8);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
- My Tasks
-
-
-
-
-
-
-
-
- Name
-
-
-
- Start Date
-
-
-
- End Date
-
-
-
- Status
-
-
-
- Budget
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
- {row.name}
-
-
-
- {row.startDate}
-
-
-
- {row.endDate}
-
-
-
- {row.status}
-
-
-
- {row.budget}
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default MyTasks;
diff --git a/components/Pages/Profile/Overview.js b/components/Pages/Profile/Overview.js
deleted file mode 100644
index 37fd350..0000000
--- a/components/Pages/Profile/Overview.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-const Overview = () => {
- // Select Form
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- // Chart
- const series = [
- {
- name: "Income",
- data: [20, 35, 20, 40, 40, 50, 25, 25, 35, 30, 25, 40],
- },
- ];
- const options = {
- chart: {
- toolbar: {
- show: false,
- },
- events: {
- click: function (chart, w, e) {
- // console.log(chart, w, e)
- },
- },
- },
- colors: ["#90C6E0"],
- plotOptions: {
- bar: {
- columnWidth: "30%",
- distributed: true,
- },
- },
- dataLabels: {
- enabled: false,
- },
- legend: {
- show: false,
- },
- xaxis: {
- categories: [
- ["Jan"],
- ["Feb"],
- ["Mar"],
- ["Api"],
- ["May"],
- ["Jun"],
- ["Jul"],
- ["Aug"],
- ["Sep"],
- ["Oct"],
- ["Nov"],
- ["Dec"],
- ],
- labels: {
- style: {
- colors: "#A9A9C8",
- fontSize: "12px",
- },
- },
- },
- yaxis: {
- labels: {
- style: {
- colors: "#A9A9C8",
- fontSize: "12px",
- },
- },
- axisBorder: {
- show: false,
- colors: "#f6f6f7",
- },
- },
- fill: {
- opacity: 1,
- },
- tooltip: {
- y: {
- formatter: function (val) {
- return "$" + val + "k";
- },
- },
- },
- grid: {
- show: true,
- borderColor: "#EDEFF5",
- strokeDashArray: 5,
- },
- };
-
- return (
- <>
-
-
-
- Overview
-
-
-
- Select
-
- Today
- This Week
- Last Month
- Last 12 Months
- All Time
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Overview;
diff --git a/components/Pages/Profile/PersonalInformation/index.js b/components/Pages/Profile/PersonalInformation/index.js
deleted file mode 100644
index 1082306..0000000
--- a/components/Pages/Profile/PersonalInformation/index.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-
-const personalInfo = [
- {
- title: 'Full Name :',
- text: 'Andrew Burns',
- },
- {
- title: 'Mobile :',
- text: '(123) 123 1234',
- },
- {
- title: 'Email :',
- text: 'andrewburns@gmail.com',
- },
- {
- title: 'Location : ',
- text: 'USA',
- },
- {
- title: 'Experience : ',
- text: 'Back end Developer',
- },
-]
-
-const PersonalInformation = () => {
- return (
- <>
-
-
-
- Personal Information
-
-
-
-
-
- About Me:
-
-
- Hi I'm Andrew Burns,has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
-
- {personalInfo.map((info) => (
-
-
- {info.title}
-
-
- {info.text}
-
- ))}
-
-
- >
- );
-};
-
-export default PersonalInformation;
diff --git a/components/Pages/Profile/Profile.module.css b/components/Pages/Profile/Profile.module.css
deleted file mode 100644
index b5f1395..0000000
--- a/components/Pages/Profile/Profile.module.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.profileBox {
- background-color: #fff;
- border-radius: 10px;
- position: relative;
- margin-bottom: 15px;
-}
-.header {
- background: #EAEDFB;
- border-radius: 10px 10px 0px 0px;
- padding: 30px 15px 50px;
- position: relative;
-}
-.headerContent {
- max-width: 300px;
- position: relative;
- z-index: 1;
-}
-.header h1 {
- margin: 0 0 10px;
- font-size: 18px;
- color: #757FEF;
- font-weight: 500;
-}
-.header p {
- margin: 0;
- font-size: 14px;
- color: #757FEF;
-}
-.header img {
- position: absolute;
- bottom: 0;
- right: 0;
-}
-.profileInfoContent {
- padding: 0 15px 30px;
-}
-.profileInfo {
- position: relative;
-}
-.profileInfo img {
- position: absolute;
- top: -30px;
- width: 60px;
- height: 60px;
- border: 5px solid #fff;
- border-radius: 100%;
- box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-}
-.profileInfo h3 {
- margin: 0 0 5px;
- font-size: 14px;
- padding-top: 45px;
-}
-.profileInfo p {
- margin: 0;
- font-size: 13px;
-}
\ No newline at end of file
diff --git a/components/Pages/Profile/ProfileContent.js b/components/Pages/Profile/ProfileContent.js
deleted file mode 100644
index f28615d..0000000
--- a/components/Pages/Profile/ProfileContent.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import styles from "@/components/Dashboard/Analytics/Profile/Profile.module.css";
-import ImpressionShare from "./ImpressionShare";
-
-const ProfileContent = () => {
- return (
- <>
-
-
-
-
Welcome to admash Dashboard!
-
- You have done 68% 😎 more sales today. Check your new badge in
- your profile.
-
-
-
-
-
-
-
-
-
-
-
Andrew Burns
-
Programmer
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default ProfileContent;
diff --git a/components/Pages/Search/SearchContent.js b/components/Pages/Search/SearchContent.js
deleted file mode 100644
index d7ea71e..0000000
--- a/components/Pages/Search/SearchContent.js
+++ /dev/null
@@ -1,213 +0,0 @@
-import * as React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Pagination from '@mui/material/Pagination';
-
-export default function SearchContent() {
- return (
- <>
-
-
- 120 results found for “Ipsum”
-
-
-
-
-
- What is Lorem Ipsum?
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-
-
- What is Lorem Ipsum?
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-
-
- What is Lorem Ipsum?
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-
-
- What is Lorem Ipsum?
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-
-
- What is Lorem Ipsum?
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-
-
- What is Lorem Ipsum?
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-
-
- What is Lorem Ipsum?
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-
- {/* Pagination */}
-
-
- >
- );
-}
diff --git a/components/Pages/TermsConditions/TermsConditionsContent.js b/components/Pages/TermsConditions/TermsConditionsContent.js
deleted file mode 100644
index be5e7aa..0000000
--- a/components/Pages/TermsConditions/TermsConditionsContent.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import Card from "@mui/material/Card";
-import styles from '@/components/Pages/TermsConditions/TermsConditionsContent.module.css'
-
-const TermsConditionsContent = () => {
- return (
- <>
-
-
-
Terms & Conditions
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
Privacy Policy
-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
-
-
License Usage
-
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
-
-
Media
-
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
-
-
Product Updates
-
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
-
-
Cookies
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
-
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
-
-
Last update: January 25, 2023
-
-
- >
- )
-}
-
-export default TermsConditionsContent;
\ No newline at end of file
diff --git a/components/Pages/TermsConditions/TermsConditionsContent.module.css b/components/Pages/TermsConditions/TermsConditionsContent.module.css
deleted file mode 100644
index e949fb4..0000000
--- a/components/Pages/TermsConditions/TermsConditionsContent.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.termsConditionsContent h1 {
- margin-top: 0;
- margin-bottom: 10px;
-}
-.termsConditionsContent h2 {
- margin-top: 0;
- margin-bottom: 10px;
-}
-.termsConditionsContent h3 {
- margin-top: 0;
- margin-bottom: 10px;
-}
-.termsConditionsContent h4 {
- margin-top: 0;
- margin-bottom: 10px;
-}
-.termsConditionsContent h5 {
- margin-top: 0;
- margin-bottom: 10px;
-}
-.termsConditionsContent h6 {
- margin-top: 0;
- margin-bottom: 10px;
-}
-.termsConditionsContent p {
- margin-top: 0;
- margin-bottom: 20px;
-}
-.termsConditionsContent ul, .termsConditionsContent ol {
- margin-bottom: 20px;
-}
-.termsConditionsContent ul li, .termsConditionsContent ol li {
- margin-bottom: 10px;
-}
-.termsConditionsContent ul li:last-child, .termsConditionsContent ol li:last-child {
- margin-bottom: 0;
-}
\ No newline at end of file
diff --git a/components/Pages/Testimonials/TestimonialsOne.js b/components/Pages/Testimonials/TestimonialsOne.js
deleted file mode 100644
index 3ab0b43..0000000
--- a/components/Pages/Testimonials/TestimonialsOne.js
+++ /dev/null
@@ -1,266 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation } from "swiper";
-import styles from "@/components/Pages/Testimonials/TestimonialsOne.module.css";
-
-const Feedbacks = [
- {
- id: 1,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user1.png",
- name: "Roberto",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 2,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user2.png",
- name: "Ramon",
- designation: 'UI/UX Designer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 3,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user3.png",
- name: "Nathaniel",
- designation: 'Angular Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 4,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user4.png",
- name: "Milton",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 5,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user5.png",
- name: "Antonio",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 6,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user6.png",
- name: "Julian",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
-]
-
-const TestimonialsOne = () => {
- return (
- <>
-
-
- Testimonials One
-
-
-
- {Feedbacks.map((feedback) => (
-
-
-
-
- {feedback.feedbackText}
-
-
-
-
-
-
-
-
-
-
{feedback.name}
-
{feedback.designation}
-
- {feedback.ratings.map((rating) => (
-
-
-
- ))}
-
-
-
-
-
- ))}
-
-
- >
- );
-};
-
-export default TestimonialsOne;
diff --git a/components/Pages/Testimonials/TestimonialsOne.module.css b/components/Pages/Testimonials/TestimonialsOne.module.css
deleted file mode 100644
index 479efd9..0000000
--- a/components/Pages/Testimonials/TestimonialsOne.module.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.feedbackText {
- background-color: #f2f1f3;
- padding: 30px;
- border-radius: 25px 25px 25px 0;
- font-size: 16px;
- margin-bottom: 20px;
-}
-.feedbackImg {
- display: flex;
-}
-.feedbackImg img {
- width: 50px;
- height: 50px;
- border-radius: 100%;
- margin-right: 10px;
-}
-.feedbackImg h4 {
- margin: 0 0 3px;
- font-size: 14px;
-}
-.feedbackImg p {
- margin: 0 0 5px;
- font-size: 12px;
-}
-.feedbackImg ul {
- margin: 0;
- list-style-type: none;
- padding: 0;
-}
-.feedbackImg ul li {
- display: inline-block;
- margin-right: 3px;
- color: #ffc744;
-}
-.feedbackImg ul li:last-child {
- margin-right: 0;
-}
-
-/* For RTL Style */
-[dir="rtl"] .feedbackText {
- border-radius: 25px 25px 0 25px;
-}
-[dir="rtl"] .feedbackImg img {
- margin-right: 0;
- margin-left: 10px;
-}
-[dir="rtl"] .feedbackImg ul li {
- margin-right: 0;
- margin-left: 3px;
-}
-[dir="rtl"] .feedbackImg ul li:last-child {
- margin-left: 0;
-}
-
-/* For dark mode */
-[class="dark"] .feedbackText {
- background-color: var(--colorBlack);
-}
-[class="dark"] .feedbackText q {
- color: var(--darkBodyTextColor);
-}
\ No newline at end of file
diff --git a/components/Pages/Testimonials/TestimonialsThree.js b/components/Pages/Testimonials/TestimonialsThree.js
deleted file mode 100644
index 8a23bef..0000000
--- a/components/Pages/Testimonials/TestimonialsThree.js
+++ /dev/null
@@ -1,265 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Pagination } from "swiper";
-import styles from "@/components/Pages/Testimonials/TestimonialsThree.module.css";
-
-const Feedbacks = [
- {
- id: 1,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/member1.png",
- name: "Roberto",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 2,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/member2.png",
- name: "Ramon",
- designation: 'UI/UX Designer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 3,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/member3.png",
- name: "Nathaniel",
- designation: 'Angular Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 4,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/member4.png",
- name: "Milton",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 5,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/member5.png",
- name: "Antonio",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 6,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/member6.png",
- name: "Julian",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
-]
-
-const TestimonialsThree = () => {
- return (
- <>
-
-
- Testimonials Three
-
-
-
- {Feedbacks.map((feedback) => (
-
-
-
-
-
-
-
-
-
-
{feedback.name}
-
{feedback.designation}
-
- {feedback.ratings.map((rating) => (
-
-
-
- ))}
-
-
-
-
-
- {feedback.feedbackText}
-
-
-
-
- ))}
-
-
- >
- );
-};
-
-export default TestimonialsThree;
diff --git a/components/Pages/Testimonials/TestimonialsThree.module.css b/components/Pages/Testimonials/TestimonialsThree.module.css
deleted file mode 100644
index 48f4492..0000000
--- a/components/Pages/Testimonials/TestimonialsThree.module.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.feedbackContent {
- text-align: center;
-}
-.feedbackText {
- background-color: #f2f1f3;
- padding: 40px 30px;
- border-radius: 10px;
- font-size: 16px;
- margin-bottom: 20px;
-}
-.feedbackImg {
- margin-bottom: 10px;
-}
-.feedbackImg img {
- width: 100px;
- height: 100px;
- border-radius: 100%;
- margin-bottom: 5px;
-}
-.feedbackImg h4 {
- margin: 0 0 3px;
- font-size: 18px;
-}
-.feedbackImg p {
- margin: 0 0 5px;
- font-size: 13px;
-}
-.feedbackImg ul {
- margin: 0;
- list-style-type: none;
- padding: 0;
-}
-.feedbackImg ul li {
- display: inline-block;
- margin-right: 3px;
- color: #ffc744;
-}
-.feedbackImg ul li:last-child {
- margin-right: 0;
-}
-
-/* For dark mode */
-[class="dark"] .feedbackText {
- background-color: var(--colorBlack);
-}
-[class="dark"] .feedbackText q {
- color: var(--darkBodyTextColor);
-}
\ No newline at end of file
diff --git a/components/Pages/Testimonials/TestimonialsTwo.js b/components/Pages/Testimonials/TestimonialsTwo.js
deleted file mode 100644
index 7f2e46e..0000000
--- a/components/Pages/Testimonials/TestimonialsTwo.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation } from "swiper";
-import styles from "@/components/Pages/Testimonials/TestimonialsTwo.module.css";
-
-const Feedbacks = [
- {
- id: 1,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user1.png",
- name: "Roberto",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 2,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user2.png",
- name: "Ramon",
- designation: 'UI/UX Designer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 3,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user3.png",
- name: "Nathaniel",
- designation: 'Angular Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 4,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user4.png",
- name: "Milton",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 5,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user5.png",
- name: "Antonio",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
- {
- id: 6,
- feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
- image: "/images/user6.png",
- name: "Julian",
- designation: 'React Developer',
- ratings: [
- {
- id: 1,
- icon: "ri-star-fill",
- },
- {
- id: 2,
- icon: "ri-star-fill",
- },
- {
- id: 3,
- icon: "ri-star-fill",
- },
- {
- id: 4,
- icon: "ri-star-fill",
- },
- {
- id: 5,
- icon: "ri-star-fill",
- }
- ]
- },
-]
-
-const TestimonialsTwo = () => {
- return (
- <>
-
-
- Testimonials Two
-
-
-
- {Feedbacks.map((feedback) => (
-
-
-
-
-
-
-
-
-
-
{feedback.name}
-
{feedback.designation}
-
- {feedback.ratings.map((rating) => (
-
-
-
- ))}
-
-
-
-
-
- {feedback.feedbackText}
-
-
-
-
- ))}
-
-
- >
- );
-};
-
-export default TestimonialsTwo;
diff --git a/components/Pages/Testimonials/TestimonialsTwo.module.css b/components/Pages/Testimonials/TestimonialsTwo.module.css
deleted file mode 100644
index 45a51ed..0000000
--- a/components/Pages/Testimonials/TestimonialsTwo.module.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.feedbackText {
- background-color: #f2f1f3;
- padding: 40px 30px;
- border-radius: 25px;
- font-size: 16px;
- margin-bottom: 20px;
-}
-.feedbackImg {
- display: flex;
- margin-bottom: 10px;
-}
-.feedbackImg img {
- width: 50px;
- height: 50px;
- border-radius: 100%;
- margin-right: 10px;
-}
-.feedbackImg h4 {
- margin: 0 0 3px;
- font-size: 14px;
-}
-.feedbackImg p {
- margin: 0 0 5px;
- font-size: 12px;
-}
-.feedbackImg ul {
- margin: 0;
- list-style-type: none;
- padding: 0;
-}
-.feedbackImg ul li {
- display: inline-block;
- margin-right: 3px;
- color: #ffc744;
-}
-.feedbackImg ul li:last-child {
- margin-right: 0;
-}
-
-/* For RTL Style */
-[dir="rtl"] .feedbackImg img {
- margin-right: 0;
- margin-left: 10px;
-}
-[dir="rtl"] .feedbackImg ul li {
- margin-right: 0;
- margin-left: 3px;
-}
-[dir="rtl"] .feedbackImg ul li:last-child {
- margin-left: 0;
-}
-
-/* For dark mode */
-[class="dark"] .feedbackText {
- background-color: var(--colorBlack);
-}
-[class="dark"] .feedbackText q {
- color: var(--darkBodyTextColor);
-}
\ No newline at end of file
diff --git a/components/Pages/Timeline/TimelineStyle1.js b/components/Pages/Timeline/TimelineStyle1.js
deleted file mode 100644
index 75b84e0..0000000
--- a/components/Pages/Timeline/TimelineStyle1.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import * as React from "react";
-import Timeline from "@mui/lab/Timeline";
-import TimelineItem from "@mui/lab/TimelineItem";
-import TimelineSeparator from "@mui/lab/TimelineSeparator";
-import TimelineConnector from "@mui/lab/TimelineConnector";
-import TimelineContent from "@mui/lab/TimelineContent";
-import TimelineOppositeContent from "@mui/lab/TimelineOppositeContent";
-import TimelineDot from "@mui/lab/TimelineDot";
-import FastfoodIcon from "@mui/icons-material/Fastfood";
-import LaptopMacIcon from "@mui/icons-material/LaptopMac";
-import HotelIcon from "@mui/icons-material/Hotel";
-import RepeatIcon from "@mui/icons-material/Repeat";
-import Typography from "@mui/material/Typography";
-import Card from "@mui/material/Card";
-
-export default function TimelineStyle1() {
- return (
- <>
-
-
- Timeline Style 1
-
-
-
-
-
- 9:30 am
-
-
-
-
-
-
-
-
-
-
-
-
- Eat
-
-
- Because you need strength
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-
-
-
- 10:00 am
-
-
-
-
-
-
-
-
-
-
-
-
- Code
-
- Because it's awesome!
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem
- accusantium doloremque laudantium.
-
-
-
-
-
-
- 12:30 pm
-
-
-
-
-
-
-
-
-
-
-
-
- Sleep
-
-
- Because you need rest
-
-
- But I must explain to you how all this mistaken idea of
- denouncing pleasure and praising.
-
-
-
-
-
-
- 9:30 am
-
-
-
-
-
-
-
-
-
-
-
-
- Repeat
-
-
-
- Because this is the life you love!
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui
- blanditiis praesentium!
-
-
-
-
-
- >
- );
-}
diff --git a/components/Pages/Timeline/TimelineStyle2.js b/components/Pages/Timeline/TimelineStyle2.js
deleted file mode 100644
index b680914..0000000
--- a/components/Pages/Timeline/TimelineStyle2.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import * as React from "react";
-import Timeline from "@mui/lab/Timeline";
-import TimelineItem from "@mui/lab/TimelineItem";
-import TimelineSeparator from "@mui/lab/TimelineSeparator";
-import TimelineConnector from "@mui/lab/TimelineConnector";
-import TimelineContent from "@mui/lab/TimelineContent";
-import TimelineDot from "@mui/lab/TimelineDot";
-import TimelineOppositeContent, {
- timelineOppositeContentClasses,
-} from "@mui/lab/TimelineOppositeContent";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-
-export default function TimelineStyle2() {
- return (
- <>
-
-
- Timeline Style 2
-
-
-
-
-
- Jan 15, 2023 (09:30 am)
-
-
-
-
-
-
-
-
-
- First Event
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
- nisi ut aliquip ex ea commodo consequat.
-
-
-
-
-
-
- Jan 16, 2023 (09:30 am)
-
-
-
-
-
-
-
-
-
- Second Event
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
- nisi ut aliquip ex ea commodo consequat.
-
-
-
-
-
-
- Jan 17, 2023 (09:30 am)
-
-
-
-
-
-
-
-
-
- Third Event
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
- nisi ut aliquip ex ea commodo consequat.
-
-
-
-
-
-
- Jan 18, 2023 (09:30 am)
-
-
-
-
-
-
-
-
- Fourth Event
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem
- accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
- quae ab illo inventore veritatis et quasi architecto beatae
- vitae dicta sunt explicabo.
-
-
-
-
-
- >
- );
-}
diff --git a/components/Projects/AllProjects/AllProjects.module.css b/components/Projects/AllProjects/AllProjects.module.css
deleted file mode 100644
index 2a6231c..0000000
--- a/components/Projects/AllProjects/AllProjects.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.members {
- display: flex;
- align-items: center;
- position: relative;
-}
-.members img {
- border-radius: 100%;
- border: 2px solid #fff;
- margin-left: -6px;
-}
\ No newline at end of file
diff --git a/components/Projects/AllProjects/index.js b/components/Projects/AllProjects/index.js
deleted file mode 100644
index a0db625..0000000
--- a/components/Projects/AllProjects/index.js
+++ /dev/null
@@ -1,1116 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import { styled } from "@mui/material/styles";
-import LinearProgress, {
- linearProgressClasses,
-} from "@mui/material/LinearProgress";
-import styles from "@/components/Projects/AllProjects/AllProjects.module.css";
-
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
- height: 5,
- borderRadius: 5,
- [`&.${linearProgressClasses.colorPrimary}`]: {
- backgroundColor:
- theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
- },
- [`& .${linearProgressClasses.bar}`]: {
- borderRadius: 5,
- backgroundColor: theme.palette.mode === "light" ? "#757FEF" : "#308fe8",
- },
-}));
-
-const AllProjects = () => {
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- return (
- <>
-
-
-
- All Projects
-
-
-
-
- Select
-
-
-
- Today
-
-
- Last 7 Days
-
-
- This Month
-
-
- Last 12 Months
-
-
- All Time
-
-
-
-
-
-
-
-
-
-
-
- Project Name
-
-
-
- Members
-
-
-
- Budget
-
-
-
- Status
-
-
-
- Completion
-
-
-
- Due Date
-
-
-
-
-
- {/* TableRow 1 */}
-
-
-
-
-
- Product UI/UX Design
-
-
-
-
-
-
-
-
-
- $14,000
-
-
-
- On Going
-
-
-
-
- 70%
-
-
-
-
-
- 08 Mar 2021
-
-
-
- {/* TableRow 2 */}
-
-
-
-
-
- Public Beta Release
-
-
-
-
-
-
-
-
-
-
-
-
- $14,000
-
-
-
- On Going
-
-
-
-
- 60%
-
-
-
-
-
- 17 Apr 2021
-
-
-
- {/* TableRow 3 */}
-
-
-
-
-
- SEO Marketing
-
-
-
-
-
-
-
-
-
-
-
-
- $12,000
-
-
-
- On Going
-
-
-
-
- 75%
-
-
-
-
-
- 10 Sep 2021
-
-
-
- {/* TableRow 4 */}
-
-
-
-
-
- New Office Building
-
-
-
-
-
-
-
-
-
- $9,000
-
-
-
- Pending
-
-
-
-
- 0%
-
-
-
-
-
- 06 Aug 2022
-
-
-
- {/* TableRow 5 */}
-
-
-
-
-
- Product Devlopment
-
-
-
-
-
-
-
-
-
- $16,000
-
-
-
- Completed
-
-
-
-
- 100%
-
-
-
-
-
- 08 Mar 2022
-
-
-
- {/* TableRow 6 */}
-
-
-
-
-
- Public Beta Release 2
-
-
-
-
-
-
-
-
-
- $6,000
-
-
-
- Complete
-
-
-
-
- 100%
-
-
-
-
-
- 1 Jan 2022
-
-
-
- {/* TableRow 7 */}
-
-
-
-
-
- Market and SEO
-
-
-
-
-
-
-
-
-
-
-
-
- $5,000
-
-
-
- Complete
-
-
-
-
- 100%
-
-
-
-
-
- 1 Jan 2021
-
-
-
- {/* TableRow 8 */}
-
-
-
-
-
- New Office Building
-
-
-
-
-
-
-
-
-
-
-
-
- $2,000
-
-
-
- Pending
-
-
-
-
- 10%
-
-
-
-
-
- 1 Feb 2021
-
-
-
- {/* TableRow 9 */}
-
-
-
-
-
- Public Beta Release
-
-
-
-
-
-
-
-
-
-
-
-
- $7,000
-
-
-
- Complete
-
-
-
-
- 100%
-
-
-
-
-
- 1 Mar 2021
-
-
-
- {/* TableRow 10 */}
-
-
-
-
-
- Market and SEO
-
-
-
-
-
-
-
-
-
-
-
-
- $1,000
-
-
-
- Complete
-
-
-
-
- 100%
-
-
-
-
-
- 1 Apr 2021
-
-
-
- {/* TableRow 11 */}
-
-
-
-
-
- New Office Building
-
-
-
-
-
-
-
-
-
-
-
-
- $1500
-
-
-
- Complete
-
-
-
-
- 100%
-
-
-
-
-
- 1 Mar 2021
-
-
-
- {/* TableRow 12 */}
-
-
-
-
-
- Product Devlopment
-
-
-
-
-
-
-
-
-
-
-
-
- $2500
-
-
-
- Complete
-
-
-
-
- 100%
-
-
-
-
-
- 1 Apr 2021
-
-
-
-
-
-
- >
- );
-};
-
-export default AllProjects;
diff --git a/components/Projects/KanbanBoard/InReview.js b/components/Projects/KanbanBoard/InReview.js
deleted file mode 100644
index f124bbb..0000000
--- a/components/Projects/KanbanBoard/InReview.js
+++ /dev/null
@@ -1,420 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import Checkbox from '@mui/material/Checkbox';
-import Tooltip from "@mui/material/Tooltip";
-import DeleteIcon from "@mui/icons-material/Delete";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-const newProjects = [
- {
- id: 1,
- projectName: "Mobile App Development",
- category: "Mobile App",
- totalTask: "10/50",
- teamMembers: [
- {
- id: 1,
- image: "/images/member1.png",
- },
- {
- id: 2,
- image: "/images/member2.png",
- },
- {
- id: 3,
- image: "/images/member3.png",
- },
- {
- id: 4,
- image: "/images/member4.png",
- },
- {
- id: 5,
- image: "/images/member5.png",
- },
- {
- id: 6,
- image: "/images/member6.png",
- },
- ],
- },
- {
- id: 2,
- projectName: "Web Development",
- category: "React JS",
- totalTask: "50/100",
- teamMembers: [
- {
- id: 7,
- image: "/images/member5.png",
- },
- {
- id: 8,
- image: "/images/member6.png",
- },
- {
- id: 9,
- image: "/images/member7.png",
- },
- {
- id: 10,
- image: "/images/member8.png",
- },
- {
- id: 11,
- image: "/images/member9.png",
- },
- {
- id: 12,
- image: "/images/member10.png",
- },
- ],
- },
- {
- id: 3,
- projectName: "E-Commerce Development",
- category: "React JS",
- totalTask: "60/100",
- teamMembers: [
- {
- id: 6,
- image: "/images/member1.png",
- },
- {
- id: 5,
- image: "/images/member2.png",
- },
- {
- id: 4,
- image: "/images/member3.png",
- },
- {
- id: 3,
- image: "/images/member4.png",
- },
- {
- id: 2,
- image: "/images/member5.png",
- },
- {
- id: 1,
- image: "/images/member6.png",
- },
- ],
- },
- {
- id: 4,
- projectName: "Digital Marketing",
- category: "SEO",
- totalTask: "10/50",
- teamMembers: [
- {
- id: 5,
- image: "/images/member4.png",
- },
- {
- id: 2,
- image: "/images/member6.png",
- },
- {
- id: 1,
- image: "/images/member12.png",
- },
- {
- id: 4,
- image: "/images/member13.png",
- },
- {
- id: 5,
- image: "/images/member5.png",
- },
- {
- id: 6,
- image: "/images/member3.png",
- },
- ],
- },
- {
- id: 5,
- projectName: "WordPress Development",
- category: "WordPress",
- totalTask: "45/100",
- teamMembers: [
- {
- id: 1,
- image: "/images/member8.png",
- },
- {
- id: 2,
- image: "/images/member9.png",
- },
- {
- id: 3,
- image: "/images/member10.png",
- },
- {
- id: 4,
- image: "/images/member11.png",
- },
- {
- id: 5,
- image: "/images/member12.png",
- },
- {
- id: 6,
- image: "/images/member13.png",
- },
- ],
- },
-]
-
-const InReview = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- In Review
-
-
-
-
-
-
-
-
-
-
- {/* Card */}
-
-
-
-
-
-
-
-
- 55
-
-
-
- Added: 13 Projects this month
-
-
-
-
-
-
- 5.80%
-
-
-
-
-
- {/* Card */}
- {newProjects.map((project) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {project.projectName}
-
-
-
- {project.category}
-
-
-
-
- {project.totalTask}
-
-
-
- {project.teamMembers.map((member) => (
-
- ))}
-
-
-
- ))}
-
- >
- );
-};
-
-export default InReview;
diff --git a/components/Projects/KanbanBoard/NewProjects.js b/components/Projects/KanbanBoard/NewProjects.js
deleted file mode 100644
index 63ec8d5..0000000
--- a/components/Projects/KanbanBoard/NewProjects.js
+++ /dev/null
@@ -1,420 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import Checkbox from '@mui/material/Checkbox';
-import Tooltip from "@mui/material/Tooltip";
-import DeleteIcon from "@mui/icons-material/Delete";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-const newProjects = [
- {
- id: 1,
- projectName: "Mobile App Development",
- category: "Mobile App",
- totalTask: "10/50",
- teamMembers: [
- {
- id: 1,
- image: "/images/member1.png",
- },
- {
- id: 2,
- image: "/images/member2.png",
- },
- {
- id: 3,
- image: "/images/member3.png",
- },
- {
- id: 4,
- image: "/images/member4.png",
- },
- {
- id: 5,
- image: "/images/member5.png",
- },
- {
- id: 6,
- image: "/images/member6.png",
- },
- ],
- },
- {
- id: 2,
- projectName: "Web Development",
- category: "React JS",
- totalTask: "50/100",
- teamMembers: [
- {
- id: 7,
- image: "/images/member5.png",
- },
- {
- id: 8,
- image: "/images/member6.png",
- },
- {
- id: 9,
- image: "/images/member7.png",
- },
- {
- id: 10,
- image: "/images/member8.png",
- },
- {
- id: 11,
- image: "/images/member9.png",
- },
- {
- id: 12,
- image: "/images/member10.png",
- },
- ],
- },
- {
- id: 3,
- projectName: "E-Commerce Development",
- category: "React JS",
- totalTask: "60/100",
- teamMembers: [
- {
- id: 6,
- image: "/images/member1.png",
- },
- {
- id: 5,
- image: "/images/member2.png",
- },
- {
- id: 4,
- image: "/images/member3.png",
- },
- {
- id: 3,
- image: "/images/member4.png",
- },
- {
- id: 2,
- image: "/images/member5.png",
- },
- {
- id: 1,
- image: "/images/member6.png",
- },
- ],
- },
- {
- id: 4,
- projectName: "Digital Marketing",
- category: "SEO",
- totalTask: "10/50",
- teamMembers: [
- {
- id: 5,
- image: "/images/member4.png",
- },
- {
- id: 2,
- image: "/images/member6.png",
- },
- {
- id: 1,
- image: "/images/member12.png",
- },
- {
- id: 4,
- image: "/images/member13.png",
- },
- {
- id: 5,
- image: "/images/member5.png",
- },
- {
- id: 6,
- image: "/images/member3.png",
- },
- ],
- },
- {
- id: 5,
- projectName: "WordPress Development",
- category: "WordPress",
- totalTask: "45/100",
- teamMembers: [
- {
- id: 1,
- image: "/images/member8.png",
- },
- {
- id: 2,
- image: "/images/member9.png",
- },
- {
- id: 3,
- image: "/images/member10.png",
- },
- {
- id: 4,
- image: "/images/member11.png",
- },
- {
- id: 5,
- image: "/images/member12.png",
- },
- {
- id: 6,
- image: "/images/member13.png",
- },
- ],
- },
-]
-
-const NewProjects = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- New Projects
-
-
-
-
-
-
-
-
-
-
- {/* Card */}
-
-
-
-
-
-
-
-
- 41
-
-
-
- Added: 13 Projects this month
-
-
-
-
-
-
- 5.80%
-
-
-
-
-
- {/* Card */}
- {newProjects.map((project) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {project.projectName}
-
-
-
- {project.category}
-
-
-
-
- {project.totalTask}
-
-
-
- {project.teamMembers.map((member) => (
-
- ))}
-
-
-
- ))}
-
- >
- );
-};
-
-export default NewProjects;
diff --git a/components/Projects/KanbanBoard/ToDo.js b/components/Projects/KanbanBoard/ToDo.js
deleted file mode 100644
index e36e4a4..0000000
--- a/components/Projects/KanbanBoard/ToDo.js
+++ /dev/null
@@ -1,420 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import Checkbox from '@mui/material/Checkbox';
-import Tooltip from "@mui/material/Tooltip";
-import DeleteIcon from "@mui/icons-material/Delete";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-const newProjects = [
- {
- id: 1,
- projectName: "Mobile App Development",
- category: "Mobile App",
- totalTask: "10/50",
- teamMembers: [
- {
- id: 1,
- image: "/images/member1.png",
- },
- {
- id: 2,
- image: "/images/member2.png",
- },
- {
- id: 3,
- image: "/images/member3.png",
- },
- {
- id: 4,
- image: "/images/member4.png",
- },
- {
- id: 5,
- image: "/images/member5.png",
- },
- {
- id: 6,
- image: "/images/member6.png",
- },
- ],
- },
- {
- id: 2,
- projectName: "Web Development",
- category: "React JS",
- totalTask: "50/100",
- teamMembers: [
- {
- id: 7,
- image: "/images/member5.png",
- },
- {
- id: 8,
- image: "/images/member6.png",
- },
- {
- id: 9,
- image: "/images/member7.png",
- },
- {
- id: 10,
- image: "/images/member8.png",
- },
- {
- id: 11,
- image: "/images/member9.png",
- },
- {
- id: 12,
- image: "/images/member10.png",
- },
- ],
- },
- {
- id: 3,
- projectName: "E-Commerce Development",
- category: "React JS",
- totalTask: "60/100",
- teamMembers: [
- {
- id: 6,
- image: "/images/member1.png",
- },
- {
- id: 5,
- image: "/images/member2.png",
- },
- {
- id: 4,
- image: "/images/member3.png",
- },
- {
- id: 3,
- image: "/images/member4.png",
- },
- {
- id: 2,
- image: "/images/member5.png",
- },
- {
- id: 1,
- image: "/images/member6.png",
- },
- ],
- },
- {
- id: 4,
- projectName: "Digital Marketing",
- category: "SEO",
- totalTask: "10/50",
- teamMembers: [
- {
- id: 5,
- image: "/images/member4.png",
- },
- {
- id: 2,
- image: "/images/member6.png",
- },
- {
- id: 1,
- image: "/images/member12.png",
- },
- {
- id: 4,
- image: "/images/member13.png",
- },
- {
- id: 5,
- image: "/images/member5.png",
- },
- {
- id: 6,
- image: "/images/member3.png",
- },
- ],
- },
- {
- id: 5,
- projectName: "WordPress Development",
- category: "WordPress",
- totalTask: "45/100",
- teamMembers: [
- {
- id: 1,
- image: "/images/member8.png",
- },
- {
- id: 2,
- image: "/images/member9.png",
- },
- {
- id: 3,
- image: "/images/member10.png",
- },
- {
- id: 4,
- image: "/images/member11.png",
- },
- {
- id: 5,
- image: "/images/member12.png",
- },
- {
- id: 6,
- image: "/images/member13.png",
- },
- ],
- },
-]
-
-const ToDo = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- To Do
-
-
-
-
-
-
-
-
-
-
- {/* Card */}
-
-
-
-
-
-
-
-
- 50
-
-
-
- Added: 13 Projects this month
-
-
-
-
-
-
- 5.80%
-
-
-
-
-
- {/* Card */}
- {newProjects.map((project) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {project.projectName}
-
-
-
- {project.category}
-
-
-
-
- {project.totalTask}
-
-
-
- {project.teamMembers.map((member) => (
-
- ))}
-
-
-
- ))}
-
- >
- );
-};
-
-export default ToDo;
diff --git a/components/Projects/ProjectCreate/CategoriesSelect.js b/components/Projects/ProjectCreate/CategoriesSelect.js
deleted file mode 100644
index e8ffa47..0000000
--- a/components/Projects/ProjectCreate/CategoriesSelect.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as React from "react";
-import { useTheme } from "@mui/material/styles";
-import Box from "@mui/material/Box";
-import OutlinedInput from "@mui/material/OutlinedInput";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import Chip from "@mui/material/Chip";
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
- PaperProps: {
- style: {
- maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
- width: 250,
- },
- },
-};
-
-const names = [
- "UI/UX Design",
- "Frontend Development",
- "Backend Development",
- "React App",
- "E-commerce",
- "PSD To HTML",
-];
-
-function getStyles(name, personName, theme) {
- return {
- fontWeight:
- personName.indexOf(name) === -1
- ? theme.typography.fontWeightRegular
- : theme.typography.fontWeightMedium,
- };
-}
-
-const Categories = () => {
- const theme = useTheme();
- const [personName, setPersonName] = React.useState([]);
-
- const handleChange = (event) => {
- const {
- target: { value },
- } = event;
- setPersonName(
- // On autofill we get a stringified value.
- typeof value === "string" ? value.split(",") : value
- );
- };
-
- return (
- <>
-
- Select
- }
- renderValue={(selected) => (
-
- {selected.map((value) => (
-
- ))}
-
- )}
- MenuProps={MenuProps}
- >
- {names.map((name) => (
-
- {name}
-
- ))}
-
-
- >
- );
-};
-
-export default Categories;
diff --git a/components/Projects/ProjectCreate/MemberSelect.js b/components/Projects/ProjectCreate/MemberSelect.js
deleted file mode 100644
index 1c51c15..0000000
--- a/components/Projects/ProjectCreate/MemberSelect.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import Chip from '@mui/material/Chip';
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
- PaperProps: {
- style: {
- maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
- width: 250,
- },
- },
-};
-
-const names = [
- 'Oliver Hansen',
- 'Van Henry',
- 'April Tucker',
- 'Ralph Hubbard',
- 'Omar Alexander',
- 'Carlos Abbott',
- 'Miriam Wagner',
- 'Bradley Wilkerson',
- 'Virginia Andrews',
- 'Kelly Snyder',
-];
-
-function getStyles(name, personName, theme) {
- return {
- fontWeight:
- personName.indexOf(name) === -1
- ? theme.typography.fontWeightRegular
- : theme.typography.fontWeightMedium,
- };
-}
-
-export default function MemberSelect() {
- const theme = useTheme();
- const [personName, setPersonName] = React.useState([]);
-
- const handleChange = (event) => {
- const {
- target: { value },
- } = event;
- setPersonName(
- // On autofill we get a stringified value.
- typeof value === 'string' ? value.split(',') : value,
- );
- };
-
- return (
-
-
- Select
- }
- renderValue={(selected) => (
-
- {selected.map((value) => (
-
- ))}
-
- )}
- MenuProps={MenuProps}
- >
- {names.map((name) => (
-
- {name}
-
- ))}
-
-
-
- );
-}
\ No newline at end of file
diff --git a/components/Projects/Task/CompletedTasks.js b/components/Projects/Task/CompletedTasks.js
deleted file mode 100644
index 7f5fa50..0000000
--- a/components/Projects/Task/CompletedTasks.js
+++ /dev/null
@@ -1,224 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-const CompletedTasks = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- // Chart
- const series = [
- {
- name: "Task",
- data: [21, 22, 10, 28, 16, 21, 13, 30],
- },
- ];
- const options = {
- chart: {
- toolbar: {
- show: false,
- },
- events: {
- click: function (chart, w, e) {
- // console.log(chart, w, e)
- },
- },
- },
- colors: ["#757FEF"],
- plotOptions: {
- bar: {
- columnWidth: "30%",
- distributed: true,
- borderRadius: 6,
- },
- },
- dataLabels: {
- enabled: false,
- },
- legend: {
- show: false,
- },
- xaxis: {
- categories: [
- ["1 Jan"],
- ["2 Jan"],
- ["3 Jan"],
- ["4 Jan"],
- ["5 Jan"],
- ["6 Jan"],
- ["7 Jan"],
- ["8 Jan"],
- ],
- labels: {
- show: false,
- },
- axisTicks: {
- show: false,
- },
- },
- yaxis: {
- show: false,
- },
- grid: {
- show: false,
- },
- fill: {
- opacity: 1,
- },
- };
-
- return (
- <>
-
-
-
- Completed Tasks
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Target
-
-
- {" "}
- 20k
-
-
-
-
-
- Last Week
-
-
- {" "}
- 5.50k
-
-
-
-
-
- Last Month
-
-
- {" "}
- 50k
-
-
-
-
- >
- );
-};
-
-export default CompletedTasks;
diff --git a/components/Projects/Task/MyTasks.js b/components/Projects/Task/MyTasks.js
deleted file mode 100644
index c2acb8b..0000000
--- a/components/Projects/Task/MyTasks.js
+++ /dev/null
@@ -1,672 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import IconButton from "@mui/material/IconButton";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Tooltip from "@mui/material/Tooltip";
-import Checkbox from '@mui/material/Checkbox';
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-import Grid from "@mui/material/Grid";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import CloseIcon from '@mui/icons-material/Close';
-
-// Add Task modal
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
- '& .MuiDialogContent-root': {
- padding: theme.spacing(2),
- },
- '& .MuiDialogActions-root': {
- padding: theme.spacing(1),
- },
-}));
-
-function BootstrapDialogTitle(props) {
- const { children, onClose, ...other } = props;
-
- return (
-
- {children}
- {onClose ? (
- theme.palette.grey[500],
- }}
- >
-
-
- ) : null}
-
- );
-}
-
-BootstrapDialogTitle.propTypes = {
- children: PropTypes.node,
- onClose: PropTypes.func.isRequired,
-};
-// End Add Task Modal
-
-function MyTask(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-MyTask.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(task, dedline, status, badgeClass, assignee, memberName) {
- return {
- task,
- dedline,
- status,
- badgeClass,
- assignee,
- memberName,
- };
-}
-
-const rows = [
- createData(
- "Public Beta Release",
- "14 Feb 2022",
- "On Going",
- "successBadge",
- "/images/user1.png",
- "Wade"
- ),
- createData(
- "Fix Platform Errors",
- "15 Mar 2022",
- "Completed",
- "primaryBadge",
- "/images/user2.png",
- "Dave"
- ),
- createData(
- "Launch our Mobile App",
- "15 Apr 2022",
- "On Going",
- "successBadge",
- "/images/user3.png",
- "Liam"
- ),
- createData(
- "Add the New Pricing Page",
- "15 May 2022",
- "Pending",
- "dangerBadge",
- "/images/user4.png",
- "Nathaniel"
- ),
- createData(
- "Redesign New Online Shop",
- "15 Jun 2022",
- "On Going",
- "successBadge",
- "/images/user5.png",
- "Lewis"
- ),
- createData(
- "Material Ui Design",
- "15 Jul 2022",
- "On Going",
- "successBadge",
- "/images/user6.png",
- "Milton"
- ),
- createData(
- "Add Progress Track",
- "15 Mar 2022",
- "Completed",
- "primaryBadge",
- "/images/user7.png",
- "Claude"
- ),
- createData(
- "Web Design",
- "15 Aug 2022",
- "On Going",
- "successBadge",
- "/images/user8.png",
- "Harvey"
- ),
- createData(
- "Web Development",
- "15 Nov 2022",
- "On Going",
- "successBadge",
- "/images/user9.png",
- "Blake"
- ),
- createData(
- "React App Development",
- "15 Dec 2022",
- "Completed",
- "primaryBadge",
- "/images/user10.png",
- "Antonio"
- ),
- createData(
- "eCommerce Development",
- "15 Nov 2022",
- "On Going",
- "successBadge",
- "/images/user11.png",
- "Conner"
- ),
- createData(
- "App Development",
- "15 Nov 2022",
- "On Going",
- "successBadge",
- "/images/user12.png",
- "Shane"
- ),
-].sort((a, b) => (a.task < b.task ? -1 : 1));
-
-const MyTasks = () => {
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(8);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- // Add task modal
- const [open, setOpen] = React.useState(false);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
- const handleClose = () => {
- setOpen(false);
- };
-
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
- // End Add Task Modal
-
- return (
- <>
-
-
-
- My Tasks
-
-
-
- {" "}
- Add Task
-
-
-
-
-
-
-
-
- Task
-
-
- Dedline
-
-
- Status
-
-
- Assignee
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
- {row.task}
-
-
-
- {row.dedline}
-
-
-
- {row.status}
-
-
-
-
-
-
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- {/* Add task modal */}
-
-
-
-
- Add Task
-
-
-
-
-
-
-
-
-
-
-
-
- Task
-
-
-
-
-
-
-
- Member
-
-
-
-
-
-
-
- Dedline
-
-
-
-
-
-
-
- Status
-
-
-
-
-
-
- {" "}
- Add Task
-
-
-
-
-
-
-
- >
- );
-};
-
-export default MyTasks;
diff --git a/components/Projects/Task/TasksPerformance/TasksPerformanceChart.js b/components/Projects/Task/TasksPerformance/TasksPerformanceChart.js
deleted file mode 100644
index 78b52e0..0000000
--- a/components/Projects/Task/TasksPerformance/TasksPerformanceChart.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { Component } from "react";
-import { Box, Typography } from "@mui/material";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-
-class TasksPerformanceChart extends Component {
- constructor(props) {
- super(props);
- this.state = {
- series: [76, 67, 61, 90],
- options: {
- plotOptions: {
- radialBar: {
- offsetY: 0,
- startAngle: 0,
- endAngle: 270,
- hollow: {
- margin: 5,
- size: "25%",
- background: "transparent",
- image: undefined,
- },
- dataLabels: {
- name: {
- show: false,
- },
- value: {
- show: false,
- },
- },
- },
- },
- colors: ["#757FEF", "#9EA5F4", "#C8CCF9", "#F1F2FD"],
- labels: ["Completed", "Active", "Assigned", "Pending"],
- legend: {
- show: true,
- floating: true,
- fontSize: "14px",
- position: "left",
- offsetY: 0,
- labels: {
- color: "#5B5B98"
- },
- markers: {
- size: 0,
- },
- formatter: function (seriesName, opts) {
- return seriesName + ": " + opts.w.globals.series[opts.seriesIndex];
- },
- itemMargin: {
- vertical: 3,
- },
- },
- responsive: [
- {
- breakpoint: 480,
- options: {
- legend: {
- show: false,
- },
- chart: {
- height: 270
- },
- },
- },
- ],
- fill: {
- opacity: 1,
- },
- },
- };
- }
-
- render() {
- return (
- <>
-
-
-
-
-
- Target
-
-
- {" "}
- 30k
-
-
-
-
-
- Last Week
-
-
- {" "}
- 40k
-
-
-
-
-
- Last Month
-
-
- {" "}
- 60k
-
-
-
- >
- );
- }
-}
-
-export default TasksPerformanceChart;
diff --git a/components/Projects/Task/TasksPerformance/index.js b/components/Projects/Task/TasksPerformance/index.js
deleted file mode 100644
index 3364fb8..0000000
--- a/components/Projects/Task/TasksPerformance/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import TasksPerformanceChart from "./TasksPerformanceChart";
-
-const TasksPerformance = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Tasks Performance
-
-
-
-
-
-
-
-
-
-
- {/* TasksPerformanceChart */}
-
-
- >
- );
-};
-
-export default TasksPerformance;
diff --git a/components/Projects/Task/TotalUsers/TotalUsersChart.js b/components/Projects/Task/TotalUsers/TotalUsersChart.js
deleted file mode 100644
index 88173da..0000000
--- a/components/Projects/Task/TotalUsers/TotalUsersChart.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, { Component } from "react";
-import { Box, Typography } from "@mui/material";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), {
- ssr: false,
-});
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
-
-class TotalUsersChart extends Component {
- constructor(props) {
- super(props);
- this.state = {
- series: [44, 55, 13],
- options: {
- labels: ["Target", "Last week", "Last Month"],
- colors: ["#757FEF", "#90C6E0", "#E040FB"],
- legend: {
- show: false,
- },
- tooltip: {
- y: {
- formatter: function (val) {
- return "" + val + "k";
- },
- },
- },
- responsive: [{
- breakpoint: 480,
- options: {
- chart: {
- height: 270
- },
- }
- }]
- },
- };
- }
-
- render() {
- return (
- <>
-
-
-
-
-
- Target
-
-
- 18k
-
-
-
-
-
- Last Week
-
-
- 5.21k
-
-
-
-
-
- Last Month
-
-
- 32k
-
-
-
- >
- );
- }
-}
-
-export default TotalUsersChart;
diff --git a/components/Projects/Task/TotalUsers/index.js b/components/Projects/Task/TotalUsers/index.js
deleted file mode 100644
index 5bee2f2..0000000
--- a/components/Projects/Task/TotalUsers/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import TotalUsersChart from "./TotalUsersChart";
-
-const TotalUsers = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
-
-
-
- Total Users
-
-
-
-
-
-
-
-
-
-
- {/* TotalUsersChart */}
-
-
- >
- );
-};
-
-export default TotalUsers;
diff --git a/components/Settings/Account/ChangePassword.js b/components/Settings/Account/ChangePassword.js
deleted file mode 100644
index dd71ad5..0000000
--- a/components/Settings/Account/ChangePassword.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-
-export default function ChangePassword() {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get('email'),
- password: data.get('password'),
- });
- };
-
- return (
- <>
-
-
-
- Security
-
-
-
- Update your password here.
-
-
-
-
-
-
-
- Old Password
-
-
-
-
-
-
- New Password
-
-
-
-
-
-
- Confirm Password
-
-
-
-
-
-
- Email Address
-
-
-
-
-
-
-
- Change Password
-
-
-
- >
- );
-}
\ No newline at end of file
diff --git a/components/Settings/Account/PrivacyPolicyContent.js b/components/Settings/Account/PrivacyPolicyContent.js
deleted file mode 100644
index a5eace4..0000000
--- a/components/Settings/Account/PrivacyPolicyContent.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-
-export default function PrivacyPolicyContent() {
- return (
- <>
-
-
-
- Security:
-
-
-
-
- Two-factor Authentication
-
-
-
- Two-factor authentication is an enhanced security meansur. Once enabled, you'll be required to give two types of identification when you log into Google Authentication and SMS are Supported.
-
-
-
-
-
- Secondary Verification
-
-
-
- Two-factor authentication is an enhanced security meansur. Once enabled, you'll be required to give two types of identification when you log into Google Authentication and SMS are Supported.
-
-
-
-
-
- Backup Codes
-
-
-
- Two-factor authentication is an enhanced security meansur. Once enabled, you'll be required to give two types of identification when you log into Google Authentication and SMS are Supported.
-
-
-
-
-
- Desktop, email, chat, purchase notifications
-
-
-
- Two-factor authentication is an enhanced security meansur. Once enabled, you'll be required to give two types of identification when you log into Google Authentication and SMS are Supported.
-
-
-
-
-
- Delete this account :
-
-
-
- Two-factor authentication is an enhanced security meansur. Once enabled, you'll be required to give two types of identification when you log into Google Authentication and SMS are Supported.
-
-
-
-
-
- close & delete this account
-
-
-
- Cancel
-
-
- >
- );
-}
\ No newline at end of file
diff --git a/components/Settings/Account/Profile.js b/components/Settings/Account/Profile.js
deleted file mode 100644
index f47b541..0000000
--- a/components/Settings/Account/Profile.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-
-export default function Profile() {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get('email'),
- password: data.get('password'),
- });
- };
-
- return (
- <>
-
-
-
- Profile
-
-
-
- Update your photo and personal details here.
-
-
-
-
-
-
-
- First Name
-
-
-
-
-
-
- Last Name
-
-
-
-
-
-
-
- Email Address
-
-
-
-
-
-
-
- Upload Image
-
-
-
-
-
-
-
-
-
-
-
- Update
-
-
-
- >
- );
-}
\ No newline at end of file
diff --git a/components/Settings/NavBar.js b/components/Settings/NavBar.js
deleted file mode 100644
index ef47270..0000000
--- a/components/Settings/NavBar.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { useRouter } from "next/router";
-import styles from '@/components/Settings/NavBar.module.css'
-
-const NavBar = () => {
- const router = useRouter();
-
- return (
- <>
-
-
-
-
- Account
-
-
-
-
- Security
-
-
-
-
- Privacy Policy
-
-
-
-
- >
- )
-}
-
-export default NavBar;
\ No newline at end of file
diff --git a/components/Settings/NavBar.module.css b/components/Settings/NavBar.module.css
deleted file mode 100644
index 255198a..0000000
--- a/components/Settings/NavBar.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.topNavStyle {
- margin-bottom: 10px;
-}
-.topNavStyle ul {
- list-style-type: none;
- padding: 0;
- margin: 0;
-}
-.topNavStyle ul li {
- display: inline-block;
- margin-right: 10px;
- margin-bottom: 10px;
-}
-.topNavStyle ul li:last-child {
- margin-right: 0;
-}
-.topNavStyle ul li a {
- background-color: rgba(161, 98, 247, 0.1);
- padding: 10px 25px;
- display: inline-block;
- border-radius: 5px;
- text-decoration: none;
- font-weight: 500;
-}
-.topNavStyle ul li a:hover, .topNavStyle ul li.active a {
- background-color: var(--primaryColor);
- color: #fff;
-}
-
-/* For RTL Style */
-[dir="rtl"] .topNavStyle ul li {
- margin-right: 0;
- margin-left: 10px;
-}
-[dir="rtl"] .topNavStyle ul li:last-child {
- margin-left: 0;
-}
\ No newline at end of file
diff --git a/components/UIElements/Accordion/BasicAccordion.js b/components/UIElements/Accordion/BasicAccordion.js
deleted file mode 100644
index b8c6552..0000000
--- a/components/UIElements/Accordion/BasicAccordion.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-export default function BasicAccordion() {
- return (
- <>
-
-
- Basic Accordion
-
-
-
- }
- aria-controls="panel1a-content"
- id="panel1a-header"
- >
- Accordion 1
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
- malesuada lacus ex, sit amet blandit leo lobortis eget.
-
-
-
-
-
- }
- aria-controls="panel2a-content"
- id="panel2a-header"
- >
- Accordion 2
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
- malesuada lacus ex, sit amet blandit leo lobortis eget.
-
-
-
-
-
- }
- aria-controls="panel3a-content"
- id="panel3a-header"
- >
- Disabled Accordion
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Accordion/ControlledAccordion.js b/components/UIElements/Accordion/ControlledAccordion.js
deleted file mode 100644
index abd53ae..0000000
--- a/components/UIElements/Accordion/ControlledAccordion.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Accordion from "@mui/material/Accordion";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-
-export default function ControlledAccordion() {
- const [expanded, setExpanded] = React.useState(false);
-
- const handleChange = (panel) => (event, isExpanded) => {
- setExpanded(isExpanded ? panel : false);
- };
-
- return (
- <>
-
-
- Controlled Accordion
-
-
-
- }
- aria-controls="panel1bh-content"
- id="panel1bh-header"
- >
-
- General settings
-
-
- I am an accordion
-
-
-
-
-
- Nulla facilisi. Phasellus sollicitudin nulla et quam mattis
- feugiat. Aliquam eget maximus est, id dignissim quam.
-
-
-
-
-
- }
- aria-controls="panel2bh-content"
- id="panel2bh-header"
- >
-
- Users
-
-
- You are currently not an owner
-
-
-
-
-
- Donec placerat, lectus sed mattis semper, neque lectus feugiat
- lectus, varius pulvinar diam eros in elit. Pellentesque convallis
- laoreet laoreet.
-
-
-
-
-
- }
- aria-controls="panel3bh-content"
- id="panel3bh-header"
- >
-
- Advanced settings
-
-
- Filtering has been entirely disabled for whole web server
-
-
-
-
-
- Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer
- sit amet egestas eros, vitae egestas augue. Duis vel est augue.
-
-
-
-
-
- }
- aria-controls="panel4bh-content"
- id="panel4bh-header"
- >
-
- Personal data
-
-
-
-
-
- Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer
- sit amet egestas eros, vitae egestas augue. Duis vel est augue.
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Accordion/Customization.js b/components/UIElements/Accordion/Customization.js
deleted file mode 100644
index 3a7941a..0000000
--- a/components/UIElements/Accordion/Customization.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
-import MuiAccordion from "@mui/material/Accordion";
-import MuiAccordionSummary from "@mui/material/AccordionSummary";
-import MuiAccordionDetails from "@mui/material/AccordionDetails";
-
-const Accordion = styled((props) => (
-
-))(({ theme }) => ({
- border: `1px solid ${theme.palette.divider}`,
- "&:not(:last-child)": {
- borderBottom: 0,
- },
- "&:before": {
- display: "none",
- },
-}));
-
-const AccordionSummary = styled((props) => (
- }
- {...props}
- />
-))(({ theme }) => ({
- backgroundColor:
- theme.palette.mode === "dark"
- ? "rgba(255, 255, 255, .05)"
- : "rgba(0, 0, 0, .03)",
- flexDirection: "row-reverse",
- "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
- transform: "rotate(90deg)",
- },
- "& .MuiAccordionSummary-content": {
- marginLeft: theme.spacing(1),
- },
-}));
-
-const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
- padding: theme.spacing(2),
- borderTop: "1px solid rgba(0, 0, 0, .125)",
-}));
-
-export default function Customization() {
- const [expanded, setExpanded] = React.useState("panel1");
-
- const handleChange = (panel) => (event, newExpanded) => {
- setExpanded(newExpanded ? panel : false);
- };
-
- return (
- <>
-
-
- Customization
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
- eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
- eget.
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
- eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
- eget.
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
- eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
- eget.
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Alerts/Actions.js b/components/UIElements/Alerts/Actions.js
deleted file mode 100644
index 263babd..0000000
--- a/components/UIElements/Alerts/Actions.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Alert from "@mui/material/Alert";
-import Stack from "@mui/material/Stack";
-import Button from '@mui/material/Button';
-
-const Actions = () => {
- return (
- <>
-
-
- Actions
-
-
-
- {}}>This is a success alert — check it out!
-
- UNDO
-
- }
- >
- This is a success alert — check it out!
-
-
-
- >
- );
-};
-
-export default Actions;
diff --git a/components/UIElements/Alerts/BasicAlerts.js b/components/UIElements/Alerts/BasicAlerts.js
deleted file mode 100644
index 30624b4..0000000
--- a/components/UIElements/Alerts/BasicAlerts.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Alert from "@mui/material/Alert";
-import Stack from "@mui/material/Stack";
-
-const BasicAlerts = () => {
- return (
- <>
-
-
- Basic Alerts
-
-
-
- This is an error alert — check it out!
-
-
- This is a warning alert — check it out!
-
-
- This is an info alert — check it out!
-
-
- This is a success alert — check it out!
-
-
-
- >
- );
-};
-
-export default BasicAlerts;
diff --git a/components/UIElements/Alerts/Color.js b/components/UIElements/Alerts/Color.js
deleted file mode 100644
index 28badad..0000000
--- a/components/UIElements/Alerts/Color.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Alert from '@mui/material/Alert';
-
-const Color = () => {
- return (
- <>
-
-
- Color
-
-
-
- This is a success alert — check it out!
-
-
- >
- );
-};
-
-export default Color;
diff --git a/components/UIElements/Alerts/DescriptionAlerts.js b/components/UIElements/Alerts/DescriptionAlerts.js
deleted file mode 100644
index f5ae92c..0000000
--- a/components/UIElements/Alerts/DescriptionAlerts.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Alert from "@mui/material/Alert";
-import Stack from "@mui/material/Stack";
-import AlertTitle from '@mui/material/AlertTitle';
-
-const DescriptionAlerts = () => {
- return (
- <>
-
-
- Description Alerts
-
-
-
-
- Error
- This is an error alert — check it out!
-
-
-
- Warning
- This is a warning alert — check it out!
-
-
-
- Info
- This is an info alert — check it out!
-
-
-
- Success
- This is a success alert — check it out!
-
-
-
- >
- );
-};
-
-export default DescriptionAlerts;
diff --git a/components/UIElements/Alerts/Filled.js b/components/UIElements/Alerts/Filled.js
deleted file mode 100644
index aa22cde..0000000
--- a/components/UIElements/Alerts/Filled.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Alert from '@mui/material/Alert';
-import Stack from '@mui/material/Stack';
-
-const Filled = () => {
- return (
- <>
-
-
- Filled
-
-
-
-
- This is an error alert — check it out!
-
-
- This is a warning alert — check it out!
-
-
- This is an info alert — check it out!
-
-
- This is a success alert — check it out!
-
-
-
- >
- );
-};
-
-export default Filled;
diff --git a/components/UIElements/Alerts/Icons.js b/components/UIElements/Alerts/Icons.js
deleted file mode 100644
index 201fb1e..0000000
--- a/components/UIElements/Alerts/Icons.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Alert from "@mui/material/Alert";
-import CheckIcon from '@mui/icons-material/Check';
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
-import Stack from '@mui/material/Stack';
-
-const Icons = () => {
- return (
- <>
-
-
- Icons
-
-
-
- } severity="success">
- This is a success alert — check it out!
-
- ,
- }}
- >
- This is a success alert — check it out!
-
-
- This is a success alert — check it out!
-
-
-
- >
- );
-};
-
-export default Icons;
diff --git a/components/UIElements/Alerts/Transition.js b/components/UIElements/Alerts/Transition.js
deleted file mode 100644
index c597ce3..0000000
--- a/components/UIElements/Alerts/Transition.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Alert from "@mui/material/Alert";
-import IconButton from '@mui/material/IconButton';
-import Collapse from '@mui/material/Collapse';
-import Button from '@mui/material/Button';
-import CloseIcon from '@mui/icons-material/Close';
-
-const Transition = () => {
- const [open, setOpen] = React.useState(true);
- return (
- <>
-
-
- Transition
-
-
-
-
- {
- setOpen(false);
- }}
- >
-
-
- }
- sx={{ mb: 2 }}
- >
- Close me!
-
-
- {
- setOpen(true);
- }}
- >
- Re-open
-
-
-
- >
- );
-};
-
-export default Transition;
diff --git a/components/UIElements/Alerts/Variants.js b/components/UIElements/Alerts/Variants.js
deleted file mode 100644
index 36cf49f..0000000
--- a/components/UIElements/Alerts/Variants.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Alert from '@mui/material/Alert';
-import Stack from '@mui/material/Stack';
-
-const Variants = () => {
- return (
- <>
-
-
- Variants
-
-
-
-
- This is an error alert — check it out!
-
-
- This is a warning alert — check it out!
-
-
- This is an info alert — check it out!
-
-
- This is a success alert — check it out!
-
-
-
- >
- );
-};
-
-export default Variants;
diff --git a/components/UIElements/Autocomplete/ComboBox.js b/components/UIElements/Autocomplete/ComboBox.js
deleted file mode 100644
index bee2572..0000000
--- a/components/UIElements/Autocomplete/ComboBox.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import TextField from "@mui/material/TextField";
-import Autocomplete from "@mui/material/Autocomplete";
-
-const ComboBox = () => {
- return (
- <>
-
-
- Combo Box
-
-
- }
- />
-
- >
- );
-};
-
-export default ComboBox;
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
- { label: "The Shawshank Redemption", year: 1994 },
- { label: "The Godfather", year: 1972 },
- { label: "The Godfather: Part II", year: 1974 },
- { label: "The Dark Knight", year: 2008 },
- { label: "12 Angry Men", year: 1957 },
- { label: "Schindler's List", year: 1993 },
- { label: "Pulp Fiction", year: 1994 },
- {
- label: "The Lord of the Rings: The Return of the King",
- year: 2003,
- },
- { label: "The Good, the Bad and the Ugly", year: 1966 },
- { label: "Fight Club", year: 1999 },
- {
- label: "The Lord of the Rings: The Fellowship of the Ring",
- year: 2001,
- },
- {
- label: "Star Wars: Episode V - The Empire Strikes Back",
- year: 1980,
- },
- { label: "Forrest Gump", year: 1994 },
- { label: "Inception", year: 2010 },
- {
- label: "The Lord of the Rings: The Two Towers",
- year: 2002,
- },
- { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
- { label: "Goodfellas", year: 1990 },
- { label: "The Matrix", year: 1999 },
- { label: "Seven Samurai", year: 1954 },
- {
- label: "Star Wars: Episode IV - A New Hope",
- year: 1977,
- },
- { label: "City of God", year: 2002 },
- { label: "Se7en", year: 1995 },
- { label: "The Silence of the Lambs", year: 1991 },
- { label: "It's a Wonderful Life", year: 1946 },
- { label: "Life Is Beautiful", year: 1997 },
- { label: "The Usual Suspects", year: 1995 },
- { label: "Léon: The Professional", year: 1994 },
- { label: "Spirited Away", year: 2001 },
- { label: "Saving Private Ryan", year: 1998 },
- { label: "Once Upon a Time in the West", year: 1968 },
- { label: "American History X", year: 1998 },
- { label: "Interstellar", year: 2014 },
- { label: "Casablanca", year: 1942 },
- { label: "City Lights", year: 1931 },
- { label: "Psycho", year: 1960 },
- { label: "The Green Mile", year: 1999 },
- { label: "The Intouchables", year: 2011 },
- { label: "Modern Times", year: 1936 },
- { label: "Raiders of the Lost Ark", year: 1981 },
- { label: "Rear Window", year: 1954 },
- { label: "The Pianist", year: 2002 },
- { label: "The Departed", year: 2006 },
- { label: "Terminator 2: Judgment Day", year: 1991 },
- { label: "Back to the Future", year: 1985 },
- { label: "Whiplash", year: 2014 },
- { label: "Gladiator", year: 2000 },
- { label: "Memento", year: 2000 },
- { label: "The Prestige", year: 2006 },
- { label: "The Lion King", year: 1994 },
- { label: "Apocalypse Now", year: 1979 },
- { label: "Alien", year: 1979 },
- { label: "Sunset Boulevard", year: 1950 },
- {
- label:
- "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
- year: 1964,
- },
- { label: "The Great Dictator", year: 1940 },
- { label: "Cinema Paradiso", year: 1988 },
- { label: "The Lives of Others", year: 2006 },
- { label: "Grave of the Fireflies", year: 1988 },
- { label: "Paths of Glory", year: 1957 },
- { label: "Django Unchained", year: 2012 },
- { label: "The Shining", year: 1980 },
- { label: "WALL·E", year: 2008 },
- { label: "American Beauty", year: 1999 },
- { label: "The Dark Knight Rises", year: 2012 },
- { label: "Princess Mononoke", year: 1997 },
- { label: "Aliens", year: 1986 },
- { label: "Oldboy", year: 2003 },
- { label: "Once Upon a Time in America", year: 1984 },
- { label: "Witness for the Prosecution", year: 1957 },
- { label: "Das Boot", year: 1981 },
- { label: "Citizen Kane", year: 1941 },
- { label: "North by Northwest", year: 1959 },
- { label: "Vertigo", year: 1958 },
- {
- label: "Star Wars: Episode VI - Return of the Jedi",
- year: 1983,
- },
- { label: "Reservoir Dogs", year: 1992 },
- { label: "Braveheart", year: 1995 },
- { label: "M", year: 1931 },
- { label: "Requiem for a Dream", year: 2000 },
- { label: "Amélie", year: 2001 },
- { label: "A Clockwork Orange", year: 1971 },
- { label: "Like Stars on Earth", year: 2007 },
- { label: "Taxi Driver", year: 1976 },
- { label: "Lawrence of Arabia", year: 1962 },
- { label: "Double Indemnity", year: 1944 },
- {
- label: "Eternal Sunshine of the Spotless Mind",
- year: 2004,
- },
- { label: "Amadeus", year: 1984 },
- { label: "To Kill a Mockingbird", year: 1962 },
- { label: "Toy Story 3", year: 2010 },
- { label: "Logan", year: 2017 },
- { label: "Full Metal Jacket", year: 1987 },
- { label: "Dangal", year: 2016 },
- { label: "The Sting", year: 1973 },
- { label: "2001: A Space Odyssey", year: 1968 },
- { label: "Singin' in the Rain", year: 1952 },
- { label: "Toy Story", year: 1995 },
- { label: "Bicycle Thieves", year: 1948 },
- { label: "The Kid", year: 1921 },
- { label: "Inglourious Basterds", year: 2009 },
- { label: "Snatch", year: 2000 },
- { label: "3 Idiots", year: 2009 },
- { label: "Monty Python and the Holy Grail", year: 1975 },
-];
diff --git a/components/UIElements/Autocomplete/CountrySelect.js b/components/UIElements/Autocomplete/CountrySelect.js
deleted file mode 100644
index f3cebfc..0000000
--- a/components/UIElements/Autocomplete/CountrySelect.js
+++ /dev/null
@@ -1,494 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from "@mui/material/Box";
-import TextField from "@mui/material/TextField";
-import Autocomplete from "@mui/material/Autocomplete";
-
-const CountrySelect = () => {
- return (
- <>
-
-
- Country Select
-
-
- option.label}
- renderOption={(props, option) => (
- img": { mr: 2, flexShrink: 0 } }}
- {...props}
- >
-
- {option.label} ({option.code}) +{option.phone}
-
- )}
- renderInput={(params) => (
-
- )}
- />
-
- >
- );
-};
-
-export default CountrySelect;
-
-// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
-const countries = [
- { code: "AD", label: "Andorra", phone: "376" },
- {
- code: "AE",
- label: "United Arab Emirates",
- phone: "971",
- },
- { code: "AF", label: "Afghanistan", phone: "93" },
- {
- code: "AG",
- label: "Antigua and Barbuda",
- phone: "1-268",
- },
- { code: "AI", label: "Anguilla", phone: "1-264" },
- { code: "AL", label: "Albania", phone: "355" },
- { code: "AM", label: "Armenia", phone: "374" },
- { code: "AO", label: "Angola", phone: "244" },
- { code: "AQ", label: "Antarctica", phone: "672" },
- { code: "AR", label: "Argentina", phone: "54" },
- { code: "AS", label: "American Samoa", phone: "1-684" },
- { code: "AT", label: "Austria", phone: "43" },
- {
- code: "AU",
- label: "Australia",
- phone: "61",
- suggested: true,
- },
- { code: "AW", label: "Aruba", phone: "297" },
- { code: "AX", label: "Alland Islands", phone: "358" },
- { code: "AZ", label: "Azerbaijan", phone: "994" },
- {
- code: "BA",
- label: "Bosnia and Herzegovina",
- phone: "387",
- },
- { code: "BB", label: "Barbados", phone: "1-246" },
- { code: "BD", label: "Bangladesh", phone: "880" },
- { code: "BE", label: "Belgium", phone: "32" },
- { code: "BF", label: "Burkina Faso", phone: "226" },
- { code: "BG", label: "Bulgaria", phone: "359" },
- { code: "BH", label: "Bahrain", phone: "973" },
- { code: "BI", label: "Burundi", phone: "257" },
- { code: "BJ", label: "Benin", phone: "229" },
- { code: "BL", label: "Saint Barthelemy", phone: "590" },
- { code: "BM", label: "Bermuda", phone: "1-441" },
- { code: "BN", label: "Brunei Darussalam", phone: "673" },
- { code: "BO", label: "Bolivia", phone: "591" },
- { code: "BR", label: "Brazil", phone: "55" },
- { code: "BS", label: "Bahamas", phone: "1-242" },
- { code: "BT", label: "Bhutan", phone: "975" },
- { code: "BV", label: "Bouvet Island", phone: "47" },
- { code: "BW", label: "Botswana", phone: "267" },
- { code: "BY", label: "Belarus", phone: "375" },
- { code: "BZ", label: "Belize", phone: "501" },
- {
- code: "CA",
- label: "Canada",
- phone: "1",
- suggested: true,
- },
- {
- code: "CC",
- label: "Cocos (Keeling) Islands",
- phone: "61",
- },
- {
- code: "CD",
- label: "Congo, Democratic Republic of the",
- phone: "243",
- },
- {
- code: "CF",
- label: "Central African Republic",
- phone: "236",
- },
- {
- code: "CG",
- label: "Congo, Republic of the",
- phone: "242",
- },
- { code: "CH", label: "Switzerland", phone: "41" },
- { code: "CI", label: "Cote d'Ivoire", phone: "225" },
- { code: "CK", label: "Cook Islands", phone: "682" },
- { code: "CL", label: "Chile", phone: "56" },
- { code: "CM", label: "Cameroon", phone: "237" },
- { code: "CN", label: "China", phone: "86" },
- { code: "CO", label: "Colombia", phone: "57" },
- { code: "CR", label: "Costa Rica", phone: "506" },
- { code: "CU", label: "Cuba", phone: "53" },
- { code: "CV", label: "Cape Verde", phone: "238" },
- { code: "CW", label: "Curacao", phone: "599" },
- { code: "CX", label: "Christmas Island", phone: "61" },
- { code: "CY", label: "Cyprus", phone: "357" },
- { code: "CZ", label: "Czech Republic", phone: "420" },
- {
- code: "DE",
- label: "Germany",
- phone: "49",
- suggested: true,
- },
- { code: "DJ", label: "Djibouti", phone: "253" },
- { code: "DK", label: "Denmark", phone: "45" },
- { code: "DM", label: "Dominica", phone: "1-767" },
- {
- code: "DO",
- label: "Dominican Republic",
- phone: "1-809",
- },
- { code: "DZ", label: "Algeria", phone: "213" },
- { code: "EC", label: "Ecuador", phone: "593" },
- { code: "EE", label: "Estonia", phone: "372" },
- { code: "EG", label: "Egypt", phone: "20" },
- { code: "EH", label: "Western Sahara", phone: "212" },
- { code: "ER", label: "Eritrea", phone: "291" },
- { code: "ES", label: "Spain", phone: "34" },
- { code: "ET", label: "Ethiopia", phone: "251" },
- { code: "FI", label: "Finland", phone: "358" },
- { code: "FJ", label: "Fiji", phone: "679" },
- {
- code: "FK",
- label: "Falkland Islands (Malvinas)",
- phone: "500",
- },
- {
- code: "FM",
- label: "Micronesia, Federated States of",
- phone: "691",
- },
- { code: "FO", label: "Faroe Islands", phone: "298" },
- {
- code: "FR",
- label: "France",
- phone: "33",
- suggested: true,
- },
- { code: "GA", label: "Gabon", phone: "241" },
- { code: "GB", label: "United Kingdom", phone: "44" },
- { code: "GD", label: "Grenada", phone: "1-473" },
- { code: "GE", label: "Georgia", phone: "995" },
- { code: "GF", label: "French Guiana", phone: "594" },
- { code: "GG", label: "Guernsey", phone: "44" },
- { code: "GH", label: "Ghana", phone: "233" },
- { code: "GI", label: "Gibraltar", phone: "350" },
- { code: "GL", label: "Greenland", phone: "299" },
- { code: "GM", label: "Gambia", phone: "220" },
- { code: "GN", label: "Guinea", phone: "224" },
- { code: "GP", label: "Guadeloupe", phone: "590" },
- { code: "GQ", label: "Equatorial Guinea", phone: "240" },
- { code: "GR", label: "Greece", phone: "30" },
- {
- code: "GS",
- label: "South Georgia and the South Sandwich Islands",
- phone: "500",
- },
- { code: "GT", label: "Guatemala", phone: "502" },
- { code: "GU", label: "Guam", phone: "1-671" },
- { code: "GW", label: "Guinea-Bissau", phone: "245" },
- { code: "GY", label: "Guyana", phone: "592" },
- { code: "HK", label: "Hong Kong", phone: "852" },
- {
- code: "HM",
- label: "Heard Island and McDonald Islands",
- phone: "672",
- },
- { code: "HN", label: "Honduras", phone: "504" },
- { code: "HR", label: "Croatia", phone: "385" },
- { code: "HT", label: "Haiti", phone: "509" },
- { code: "HU", label: "Hungary", phone: "36" },
- { code: "ID", label: "Indonesia", phone: "62" },
- { code: "IE", label: "Ireland", phone: "353" },
- { code: "IL", label: "Israel", phone: "972" },
- { code: "IM", label: "Isle of Man", phone: "44" },
- { code: "IN", label: "India", phone: "91" },
- {
- code: "IO",
- label: "British Indian Ocean Territory",
- phone: "246",
- },
- { code: "IQ", label: "Iraq", phone: "964" },
- {
- code: "IR",
- label: "Iran, Islamic Republic of",
- phone: "98",
- },
- { code: "IS", label: "Iceland", phone: "354" },
- { code: "IT", label: "Italy", phone: "39" },
- { code: "JE", label: "Jersey", phone: "44" },
- { code: "JM", label: "Jamaica", phone: "1-876" },
- { code: "JO", label: "Jordan", phone: "962" },
- {
- code: "JP",
- label: "Japan",
- phone: "81",
- suggested: true,
- },
- { code: "KE", label: "Kenya", phone: "254" },
- { code: "KG", label: "Kyrgyzstan", phone: "996" },
- { code: "KH", label: "Cambodia", phone: "855" },
- { code: "KI", label: "Kiribati", phone: "686" },
- { code: "KM", label: "Comoros", phone: "269" },
- {
- code: "KN",
- label: "Saint Kitts and Nevis",
- phone: "1-869",
- },
- {
- code: "KP",
- label: "Korea, Democratic People's Republic of",
- phone: "850",
- },
- { code: "KR", label: "Korea, Republic of", phone: "82" },
- { code: "KW", label: "Kuwait", phone: "965" },
- { code: "KY", label: "Cayman Islands", phone: "1-345" },
- { code: "KZ", label: "Kazakhstan", phone: "7" },
- {
- code: "LA",
- label: "Lao People's Democratic Republic",
- phone: "856",
- },
- { code: "LB", label: "Lebanon", phone: "961" },
- { code: "LC", label: "Saint Lucia", phone: "1-758" },
- { code: "LI", label: "Liechtenstein", phone: "423" },
- { code: "LK", label: "Sri Lanka", phone: "94" },
- { code: "LR", label: "Liberia", phone: "231" },
- { code: "LS", label: "Lesotho", phone: "266" },
- { code: "LT", label: "Lithuania", phone: "370" },
- { code: "LU", label: "Luxembourg", phone: "352" },
- { code: "LV", label: "Latvia", phone: "371" },
- { code: "LY", label: "Libya", phone: "218" },
- { code: "MA", label: "Morocco", phone: "212" },
- { code: "MC", label: "Monaco", phone: "377" },
- {
- code: "MD",
- label: "Moldova, Republic of",
- phone: "373",
- },
- { code: "ME", label: "Montenegro", phone: "382" },
- {
- code: "MF",
- label: "Saint Martin (French part)",
- phone: "590",
- },
- { code: "MG", label: "Madagascar", phone: "261" },
- { code: "MH", label: "Marshall Islands", phone: "692" },
- {
- code: "MK",
- label: "Macedonia, the Former Yugoslav Republic of",
- phone: "389",
- },
- { code: "ML", label: "Mali", phone: "223" },
- { code: "MM", label: "Myanmar", phone: "95" },
- { code: "MN", label: "Mongolia", phone: "976" },
- { code: "MO", label: "Macao", phone: "853" },
- {
- code: "MP",
- label: "Northern Mariana Islands",
- phone: "1-670",
- },
- { code: "MQ", label: "Martinique", phone: "596" },
- { code: "MR", label: "Mauritania", phone: "222" },
- { code: "MS", label: "Montserrat", phone: "1-664" },
- { code: "MT", label: "Malta", phone: "356" },
- { code: "MU", label: "Mauritius", phone: "230" },
- { code: "MV", label: "Maldives", phone: "960" },
- { code: "MW", label: "Malawi", phone: "265" },
- { code: "MX", label: "Mexico", phone: "52" },
- { code: "MY", label: "Malaysia", phone: "60" },
- { code: "MZ", label: "Mozambique", phone: "258" },
- { code: "NA", label: "Namibia", phone: "264" },
- { code: "NC", label: "New Caledonia", phone: "687" },
- { code: "NE", label: "Niger", phone: "227" },
- { code: "NF", label: "Norfolk Island", phone: "672" },
- { code: "NG", label: "Nigeria", phone: "234" },
- { code: "NI", label: "Nicaragua", phone: "505" },
- { code: "NL", label: "Netherlands", phone: "31" },
- { code: "NO", label: "Norway", phone: "47" },
- { code: "NP", label: "Nepal", phone: "977" },
- { code: "NR", label: "Nauru", phone: "674" },
- { code: "NU", label: "Niue", phone: "683" },
- { code: "NZ", label: "New Zealand", phone: "64" },
- { code: "OM", label: "Oman", phone: "968" },
- { code: "PA", label: "Panama", phone: "507" },
- { code: "PE", label: "Peru", phone: "51" },
- { code: "PF", label: "French Polynesia", phone: "689" },
- { code: "PG", label: "Papua New Guinea", phone: "675" },
- { code: "PH", label: "Philippines", phone: "63" },
- { code: "PK", label: "Pakistan", phone: "92" },
- { code: "PL", label: "Poland", phone: "48" },
- {
- code: "PM",
- label: "Saint Pierre and Miquelon",
- phone: "508",
- },
- { code: "PN", label: "Pitcairn", phone: "870" },
- { code: "PR", label: "Puerto Rico", phone: "1" },
- {
- code: "PS",
- label: "Palestine, State of",
- phone: "970",
- },
- { code: "PT", label: "Portugal", phone: "351" },
- { code: "PW", label: "Palau", phone: "680" },
- { code: "PY", label: "Paraguay", phone: "595" },
- { code: "QA", label: "Qatar", phone: "974" },
- { code: "RE", label: "Reunion", phone: "262" },
- { code: "RO", label: "Romania", phone: "40" },
- { code: "RS", label: "Serbia", phone: "381" },
- { code: "RU", label: "Russian Federation", phone: "7" },
- { code: "RW", label: "Rwanda", phone: "250" },
- { code: "SA", label: "Saudi Arabia", phone: "966" },
- { code: "SB", label: "Solomon Islands", phone: "677" },
- { code: "SC", label: "Seychelles", phone: "248" },
- { code: "SD", label: "Sudan", phone: "249" },
- { code: "SE", label: "Sweden", phone: "46" },
- { code: "SG", label: "Singapore", phone: "65" },
- { code: "SH", label: "Saint Helena", phone: "290" },
- { code: "SI", label: "Slovenia", phone: "386" },
- {
- code: "SJ",
- label: "Svalbard and Jan Mayen",
- phone: "47",
- },
- { code: "SK", label: "Slovakia", phone: "421" },
- { code: "SL", label: "Sierra Leone", phone: "232" },
- { code: "SM", label: "San Marino", phone: "378" },
- { code: "SN", label: "Senegal", phone: "221" },
- { code: "SO", label: "Somalia", phone: "252" },
- { code: "SR", label: "Suriname", phone: "597" },
- { code: "SS", label: "South Sudan", phone: "211" },
- {
- code: "ST",
- label: "Sao Tome and Principe",
- phone: "239",
- },
- { code: "SV", label: "El Salvador", phone: "503" },
- {
- code: "SX",
- label: "Sint Maarten (Dutch part)",
- phone: "1-721",
- },
- {
- code: "SY",
- label: "Syrian Arab Republic",
- phone: "963",
- },
- { code: "SZ", label: "Swaziland", phone: "268" },
- {
- code: "TC",
- label: "Turks and Caicos Islands",
- phone: "1-649",
- },
- { code: "TD", label: "Chad", phone: "235" },
- {
- code: "TF",
- label: "French Southern Territories",
- phone: "262",
- },
- { code: "TG", label: "Togo", phone: "228" },
- { code: "TH", label: "Thailand", phone: "66" },
- { code: "TJ", label: "Tajikistan", phone: "992" },
- { code: "TK", label: "Tokelau", phone: "690" },
- { code: "TL", label: "Timor-Leste", phone: "670" },
- { code: "TM", label: "Turkmenistan", phone: "993" },
- { code: "TN", label: "Tunisia", phone: "216" },
- { code: "TO", label: "Tonga", phone: "676" },
- { code: "TR", label: "Turkey", phone: "90" },
- {
- code: "TT",
- label: "Trinidad and Tobago",
- phone: "1-868",
- },
- { code: "TV", label: "Tuvalu", phone: "688" },
- {
- code: "TW",
- label: "Taiwan, Republic of China",
- phone: "886",
- },
- {
- code: "TZ",
- label: "United Republic of Tanzania",
- phone: "255",
- },
- { code: "UA", label: "Ukraine", phone: "380" },
- { code: "UG", label: "Uganda", phone: "256" },
- {
- code: "US",
- label: "United States",
- phone: "1",
- suggested: true,
- },
- { code: "UY", label: "Uruguay", phone: "598" },
- { code: "UZ", label: "Uzbekistan", phone: "998" },
- {
- code: "VA",
- label: "Holy See (Vatican City State)",
- phone: "379",
- },
- {
- code: "VC",
- label: "Saint Vincent and the Grenadines",
- phone: "1-784",
- },
- { code: "VE", label: "Venezuela", phone: "58" },
- {
- code: "VG",
- label: "British Virgin Islands",
- phone: "1-284",
- },
- {
- code: "VI",
- label: "US Virgin Islands",
- phone: "1-340",
- },
- { code: "VN", label: "Vietnam", phone: "84" },
- { code: "VU", label: "Vanuatu", phone: "678" },
- { code: "WF", label: "Wallis and Futuna", phone: "681" },
- { code: "WS", label: "Samoa", phone: "685" },
- { code: "XK", label: "Kosovo", phone: "383" },
- { code: "YE", label: "Yemen", phone: "967" },
- { code: "YT", label: "Mayotte", phone: "262" },
- { code: "ZA", label: "South Africa", phone: "27" },
- { code: "ZM", label: "Zambia", phone: "260" },
- { code: "ZW", label: "Zimbabwe", phone: "263" },
-];
diff --git a/components/UIElements/Autocomplete/CustomizeTextareaComponent.js b/components/UIElements/Autocomplete/CustomizeTextareaComponent.js
deleted file mode 100644
index 6d6eef3..0000000
--- a/components/UIElements/Autocomplete/CustomizeTextareaComponent.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import TextareaAutosize from '@mui/base/TextareaAutosize';
-
-const CustomizeTextareaComponent = () => {
- return (
- <>
-
-
- Customize Textarea Component
-
-
-
-
- >
- );
-};
-
-export default CustomizeTextareaComponent;
diff --git a/components/UIElements/Autocomplete/CustomizedHook.js b/components/UIElements/Autocomplete/CustomizedHook.js
deleted file mode 100644
index e0d9647..0000000
--- a/components/UIElements/Autocomplete/CustomizedHook.js
+++ /dev/null
@@ -1,363 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import PropTypes from "prop-types";
-import useAutocomplete from '@mui/base/useAutocomplete';
-import CheckIcon from "@mui/icons-material/Check";
-import CloseIcon from "@mui/icons-material/Close";
-import { styled } from "@mui/material/styles";
-import { autocompleteClasses } from "@mui/material/Autocomplete";
-
-const Root = styled("div")(
- ({ theme }) => `
- color: ${
- theme.palette.mode === "dark" ? "rgba(255,255,255,0.65)" : "rgba(0,0,0,.85)"
- };
- font-size: 14px;
-`
-);
-
-const Label = styled("label")`
- padding: 0 0 4px;
- line-height: 1.5;
- display: block;
-`;
-
-const InputWrapper = styled("div")(
- ({ theme }) => `
- width: 300px;
- border: 1px solid ${theme.palette.mode === "dark" ? "#434343" : "#d9d9d9"};
- background-color: ${theme.palette.mode === "dark" ? "#141414" : "#fff"};
- border-radius: 4px;
- padding: 1px;
- display: flex;
- flex-wrap: wrap;
-
- &:hover {
- border-color: ${theme.palette.mode === "dark" ? "#177ddc" : "#40a9ff"};
- }
-
- &.focused {
- border-color: ${theme.palette.mode === "dark" ? "#177ddc" : "#40a9ff"};
- box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
- }
-
- & input {
- background-color: ${theme.palette.mode === "dark" ? "#141414" : "#fff"};
- color: ${
- theme.palette.mode === "dark"
- ? "rgba(255,255,255,0.65)"
- : "rgba(0,0,0,.85)"
- };
- height: 30px;
- box-sizing: border-box;
- padding: 4px 6px;
- width: 0;
- min-width: 30px;
- flex-grow: 1;
- border: 0;
- margin: 0;
- outline: 0;
- }
-`
-);
-
-function Tag(props) {
- const { label, onDelete, ...other } = props;
- return (
-
- {label}
-
-
- );
-}
-
-Tag.propTypes = {
- label: PropTypes.string.isRequired,
- onDelete: PropTypes.func.isRequired,
-};
-
-const StyledTag = styled(Tag)(
- ({ theme }) => `
- display: flex;
- align-items: center;
- height: 24px;
- margin: 2px;
- line-height: 22px;
- background-color: ${
- theme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "#fafafa"
- };
- border: 1px solid ${theme.palette.mode === "dark" ? "#303030" : "#e8e8e8"};
- border-radius: 2px;
- box-sizing: content-box;
- padding: 0 4px 0 10px;
- outline: 0;
- overflow: hidden;
-
- &:focus {
- border-color: ${theme.palette.mode === "dark" ? "#177ddc" : "#40a9ff"};
- background-color: ${theme.palette.mode === "dark" ? "#003b57" : "#e6f7ff"};
- }
-
- & span {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- & svg {
- font-size: 12px;
- cursor: pointer;
- padding: 4px;
- }
-`
-);
-
-const Listbox = styled("ul")(
- ({ theme }) => `
- width: 300px;
- margin: 2px 0 0;
- padding: 0;
- position: absolute;
- list-style: none;
- background-color: ${theme.palette.mode === "dark" ? "#141414" : "#fff"};
- overflow: auto;
- max-height: 250px;
- border-radius: 4px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
- z-index: 1;
-
- & li {
- padding: 5px 12px;
- display: flex;
-
- & span {
- flex-grow: 1;
- }
-
- & svg {
- color: transparent;
- }
- }
-
- & li[aria-selected='true'] {
- background-color: ${theme.palette.mode === "dark" ? "#2b2b2b" : "#fafafa"};
- font-weight: 500;
-
- & svg {
- color: #1890ff;
- }
- }
-
- & li.${autocompleteClasses.focused} {
- background-color: ${theme.palette.mode === "dark" ? "#003b57" : "#e6f7ff"};
- cursor: pointer;
-
- & svg {
- color: currentColor;
- }
- }
-`
-);
-
-const CustomizedHook = () => {
- const {
- getRootProps,
- getInputLabelProps,
- getInputProps,
- getTagProps,
- getListboxProps,
- getOptionProps,
- groupedOptions,
- value,
- focused,
- setAnchorEl,
- } = useAutocomplete({
- id: "customized-hook-demo",
- defaultValue: [top100Films[1]],
- multiple: true,
- options: top100Films,
- getOptionLabel: (option) => option.title,
- });
-
- return (
- <>
-
-
- Customized Hook
-
-
-
-
- Customized hook
-
- {value.map((option, index) => (
-
- ))}
-
-
-
-
- {groupedOptions.length > 0 ? (
-
- {groupedOptions.map((option, index) => (
-
- {option.title}
-
-
- ))}
-
- ) : null}
-
-
- >
- );
-};
-
-export default CustomizedHook;
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
- { title: "The Shawshank Redemption", year: 1994 },
- { title: "The Godfather", year: 1972 },
- { title: "The Godfather: Part II", year: 1974 },
- { title: "The Dark Knight", year: 2008 },
- { title: "12 Angry Men", year: 1957 },
- { title: "Schindler's List", year: 1993 },
- { title: "Pulp Fiction", year: 1994 },
- {
- title: "The Lord of the Rings: The Return of the King",
- year: 2003,
- },
- { title: "The Good, the Bad and the Ugly", year: 1966 },
- { title: "Fight Club", year: 1999 },
- {
- title: "The Lord of the Rings: The Fellowship of the Ring",
- year: 2001,
- },
- {
- title: "Star Wars: Episode V - The Empire Strikes Back",
- year: 1980,
- },
- { title: "Forrest Gump", year: 1994 },
- { title: "Inception", year: 2010 },
- {
- title: "The Lord of the Rings: The Two Towers",
- year: 2002,
- },
- { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
- { title: "Goodfellas", year: 1990 },
- { title: "The Matrix", year: 1999 },
- { title: "Seven Samurai", year: 1954 },
- {
- title: "Star Wars: Episode IV - A New Hope",
- year: 1977,
- },
- { title: "City of God", year: 2002 },
- { title: "Se7en", year: 1995 },
- { title: "The Silence of the Lambs", year: 1991 },
- { title: "It's a Wonderful Life", year: 1946 },
- { title: "Life Is Beautiful", year: 1997 },
- { title: "The Usual Suspects", year: 1995 },
- { title: "Léon: The Professional", year: 1994 },
- { title: "Spirited Away", year: 2001 },
- { title: "Saving Private Ryan", year: 1998 },
- { title: "Once Upon a Time in the West", year: 1968 },
- { title: "American History X", year: 1998 },
- { title: "Interstellar", year: 2014 },
- { title: "Casablanca", year: 1942 },
- { title: "City Lights", year: 1931 },
- { title: "Psycho", year: 1960 },
- { title: "The Green Mile", year: 1999 },
- { title: "The Intouchables", year: 2011 },
- { title: "Modern Times", year: 1936 },
- { title: "Raiders of the Lost Ark", year: 1981 },
- { title: "Rear Window", year: 1954 },
- { title: "The Pianist", year: 2002 },
- { title: "The Departed", year: 2006 },
- { title: "Terminator 2: Judgment Day", year: 1991 },
- { title: "Back to the Future", year: 1985 },
- { title: "Whiplash", year: 2014 },
- { title: "Gladiator", year: 2000 },
- { title: "Memento", year: 2000 },
- { title: "The Prestige", year: 2006 },
- { title: "The Lion King", year: 1994 },
- { title: "Apocalypse Now", year: 1979 },
- { title: "Alien", year: 1979 },
- { title: "Sunset Boulevard", year: 1950 },
- {
- title:
- "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
- year: 1964,
- },
- { title: "The Great Dictator", year: 1940 },
- { title: "Cinema Paradiso", year: 1988 },
- { title: "The Lives of Others", year: 2006 },
- { title: "Grave of the Fireflies", year: 1988 },
- { title: "Paths of Glory", year: 1957 },
- { title: "Django Unchained", year: 2012 },
- { title: "The Shining", year: 1980 },
- { title: "WALL·E", year: 2008 },
- { title: "American Beauty", year: 1999 },
- { title: "The Dark Knight Rises", year: 2012 },
- { title: "Princess Mononoke", year: 1997 },
- { title: "Aliens", year: 1986 },
- { title: "Oldboy", year: 2003 },
- { title: "Once Upon a Time in America", year: 1984 },
- { title: "Witness for the Prosecution", year: 1957 },
- { title: "Das Boot", year: 1981 },
- { title: "Citizen Kane", year: 1941 },
- { title: "North by Northwest", year: 1959 },
- { title: "Vertigo", year: 1958 },
- {
- title: "Star Wars: Episode VI - Return of the Jedi",
- year: 1983,
- },
- { title: "Reservoir Dogs", year: 1992 },
- { title: "Braveheart", year: 1995 },
- { title: "M", year: 1931 },
- { title: "Requiem for a Dream", year: 2000 },
- { title: "Amélie", year: 2001 },
- { title: "A Clockwork Orange", year: 1971 },
- { title: "Like Stars on Earth", year: 2007 },
- { title: "Taxi Driver", year: 1976 },
- { title: "Lawrence of Arabia", year: 1962 },
- { title: "Double Indemnity", year: 1944 },
- {
- title: "Eternal Sunshine of the Spotless Mind",
- year: 2004,
- },
- { title: "Amadeus", year: 1984 },
- { title: "To Kill a Mockingbird", year: 1962 },
- { title: "Toy Story 3", year: 2010 },
- { title: "Logan", year: 2017 },
- { title: "Full Metal Jacket", year: 1987 },
- { title: "Dangal", year: 2016 },
- { title: "The Sting", year: 1973 },
- { title: "2001: A Space Odyssey", year: 1968 },
- { title: "Singin' in the Rain", year: 1952 },
- { title: "Toy Story", year: 1995 },
- { title: "Bicycle Thieves", year: 1948 },
- { title: "The Kid", year: 1921 },
- { title: "Inglourious Basterds", year: 2009 },
- { title: "Snatch", year: 2000 },
- { title: "3 Idiots", year: 2009 },
- { title: "Monty Python and the Holy Grail", year: 1975 },
-];
diff --git a/components/UIElements/Autocomplete/LimitTags.js b/components/UIElements/Autocomplete/LimitTags.js
deleted file mode 100644
index 231fa07..0000000
--- a/components/UIElements/Autocomplete/LimitTags.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-
-const LimitTags= () => {
- return (
- <>
-
-
- LimitTags
-
-
- option.title}
- defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
- renderInput={(params) => (
-
- )}
- sx={{ width: '500px' }}
- />
-
- >
- );
-};
-
-export default LimitTags;
-
-// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
- { title: 'The Shawshank Redemption', year: 1994 },
- { title: 'The Godfather', year: 1972 },
- { title: 'The Godfather: Part II', year: 1974 },
- { title: 'The Dark Knight', year: 2008 },
- { title: '12 Angry Men', year: 1957 },
- { title: "Schindler's List", year: 1993 },
- { title: 'Pulp Fiction', year: 1994 },
- {
- title: 'The Lord of the Rings: The Return of the King',
- year: 2003,
- },
- { title: 'The Good, the Bad and the Ugly', year: 1966 },
- { title: 'Fight Club', year: 1999 },
- {
- title: 'The Lord of the Rings: The Fellowship of the Ring',
- year: 2001,
- },
- {
- title: 'Star Wars: Episode V - The Empire Strikes Back',
- year: 1980,
- },
- { title: 'Forrest Gump', year: 1994 },
- { title: 'Inception', year: 2010 },
- {
- title: 'The Lord of the Rings: The Two Towers',
- year: 2002,
- },
- { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
- { title: 'Goodfellas', year: 1990 },
- { title: 'The Matrix', year: 1999 },
- { title: 'Seven Samurai', year: 1954 },
- {
- title: 'Star Wars: Episode IV - A New Hope',
- year: 1977,
- },
- { title: 'City of God', year: 2002 },
- { title: 'Se7en', year: 1995 },
- { title: 'The Silence of the Lambs', year: 1991 },
- { title: "It's a Wonderful Life", year: 1946 },
- { title: 'Life Is Beautiful', year: 1997 },
- { title: 'The Usual Suspects', year: 1995 },
- { title: 'Léon: The Professional', year: 1994 },
- { title: 'Spirited Away', year: 2001 },
- { title: 'Saving Private Ryan', year: 1998 },
- { title: 'Once Upon a Time in the West', year: 1968 },
- { title: 'American History X', year: 1998 },
- { title: 'Interstellar', year: 2014 },
- { title: 'Casablanca', year: 1942 },
- { title: 'City Lights', year: 1931 },
- { title: 'Psycho', year: 1960 },
- { title: 'The Green Mile', year: 1999 },
- { title: 'The Intouchables', year: 2011 },
- { title: 'Modern Times', year: 1936 },
- { title: 'Raiders of the Lost Ark', year: 1981 },
- { title: 'Rear Window', year: 1954 },
- { title: 'The Pianist', year: 2002 },
- { title: 'The Departed', year: 2006 },
- { title: 'Terminator 2: Judgment Day', year: 1991 },
- { title: 'Back to the Future', year: 1985 },
- { title: 'Whiplash', year: 2014 },
- { title: 'Gladiator', year: 2000 },
- { title: 'Memento', year: 2000 },
- { title: 'The Prestige', year: 2006 },
- { title: 'The Lion King', year: 1994 },
- { title: 'Apocalypse Now', year: 1979 },
- { title: 'Alien', year: 1979 },
- { title: 'Sunset Boulevard', year: 1950 },
- {
- title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
- year: 1964,
- },
- { title: 'The Great Dictator', year: 1940 },
- { title: 'Cinema Paradiso', year: 1988 },
- { title: 'The Lives of Others', year: 2006 },
- { title: 'Grave of the Fireflies', year: 1988 },
- { title: 'Paths of Glory', year: 1957 },
- { title: 'Django Unchained', year: 2012 },
- { title: 'The Shining', year: 1980 },
- { title: 'WALL·E', year: 2008 },
- { title: 'American Beauty', year: 1999 },
- { title: 'The Dark Knight Rises', year: 2012 },
- { title: 'Princess Mononoke', year: 1997 },
- { title: 'Aliens', year: 1986 },
- { title: 'Oldboy', year: 2003 },
- { title: 'Once Upon a Time in America', year: 1984 },
- { title: 'Witness for the Prosecution', year: 1957 },
- { title: 'Das Boot', year: 1981 },
- { title: 'Citizen Kane', year: 1941 },
- { title: 'North by Northwest', year: 1959 },
- { title: 'Vertigo', year: 1958 },
- {
- title: 'Star Wars: Episode VI - Return of the Jedi',
- year: 1983,
- },
- { title: 'Reservoir Dogs', year: 1992 },
- { title: 'Braveheart', year: 1995 },
- { title: 'M', year: 1931 },
- { title: 'Requiem for a Dream', year: 2000 },
- { title: 'Amélie', year: 2001 },
- { title: 'A Clockwork Orange', year: 1971 },
- { title: 'Like Stars on Earth', year: 2007 },
- { title: 'Taxi Driver', year: 1976 },
- { title: 'Lawrence of Arabia', year: 1962 },
- { title: 'Double Indemnity', year: 1944 },
- {
- title: 'Eternal Sunshine of the Spotless Mind',
- year: 2004,
- },
- { title: 'Amadeus', year: 1984 },
- { title: 'To Kill a Mockingbird', year: 1962 },
- { title: 'Toy Story 3', year: 2010 },
- { title: 'Logan', year: 2017 },
- { title: 'Full Metal Jacket', year: 1987 },
- { title: 'Dangal', year: 2016 },
- { title: 'The Sting', year: 1973 },
- { title: '2001: A Space Odyssey', year: 1968 },
- { title: "Singin' in the Rain", year: 1952 },
- { title: 'Toy Story', year: 1995 },
- { title: 'Bicycle Thieves', year: 1948 },
- { title: 'The Kid', year: 1921 },
- { title: 'Inglourious Basterds', year: 2009 },
- { title: 'Snatch', year: 2000 },
- { title: '3 Idiots', year: 2009 },
- { title: 'Monty Python and the Holy Grail', year: 1975 },
-];
\ No newline at end of file
diff --git a/components/UIElements/Avatar/GroupUserExample.js b/components/UIElements/Avatar/GroupUserExample.js
deleted file mode 100644
index a1c1d2a..0000000
--- a/components/UIElements/Avatar/GroupUserExample.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
-import Button from '@mui/material/Button';
-
-const GroupUserExample = () => {
- return (
- <>
-
-
- Group User Example
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- View Details
-
-
-
-
- >
- );
-};
-
-export default GroupUserExample;
diff --git a/components/UIElements/Avatar/Grouped.js b/components/UIElements/Avatar/Grouped.js
deleted file mode 100644
index a0ff0b7..0000000
--- a/components/UIElements/Avatar/Grouped.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
-
-const Grouped = () => {
- return (
- <>
-
-
- Grouped
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Grouped;
diff --git a/components/UIElements/Avatar/IconAvatars.js b/components/UIElements/Avatar/IconAvatars.js
deleted file mode 100644
index 1bbb1f7..0000000
--- a/components/UIElements/Avatar/IconAvatars.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { deepOrange, green, pink, red } from '@mui/material/colors';
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-import FolderIcon from '@mui/icons-material/Folder';
-import PageviewIcon from '@mui/icons-material/Pageview';
-import AssignmentIcon from '@mui/icons-material/Assignment';
-import PersonIcon from '@mui/icons-material/Person';
-import DeleteIcon from '@mui/icons-material/Delete';
-
-const IconAvatars = () => {
- return (
- <>
-
-
- Icon Avatars
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default IconAvatars;
diff --git a/components/UIElements/Avatar/ImageAvatars.js b/components/UIElements/Avatar/ImageAvatars.js
deleted file mode 100644
index bb8fbdf..0000000
--- a/components/UIElements/Avatar/ImageAvatars.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-
-const ImageAvatars = () => {
- return (
- <>
-
-
- Image Avatars
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default ImageAvatars;
diff --git a/components/UIElements/Avatar/LetterAvatars.js b/components/UIElements/Avatar/LetterAvatars.js
deleted file mode 100644
index 0873334..0000000
--- a/components/UIElements/Avatar/LetterAvatars.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-
-function stringToColor(string) {
- let hash = 0;
- let i;
-
- /* eslint-disable no-bitwise */
- for (i = 0; i < string.length; i += 1) {
- hash = string.charCodeAt(i) + ((hash << 5) - hash);
- }
-
- let color = '#';
-
- for (i = 0; i < 3; i += 1) {
- const value = (hash >> (i * 8)) & 0xff;
- color += `00${value.toString(16)}`.slice(-2);
- }
- /* eslint-enable no-bitwise */
-
- return color;
-}
-
-function stringAvatar(name) {
- return {
- sx: {
- bgcolor: stringToColor(name),
- },
- children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
- };
-}
-
-const LetterAvatars = () => {
- return (
- <>
-
-
- Letter Avatars
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default LetterAvatars;
diff --git a/components/UIElements/Avatar/SingleUserExample.js b/components/UIElements/Avatar/SingleUserExample.js
deleted file mode 100644
index 950a52b..0000000
--- a/components/UIElements/Avatar/SingleUserExample.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import IconButton from '@mui/material/IconButton';
-import FacebookIcon from '@mui/icons-material/Facebook';
-import TwitterIcon from '@mui/icons-material/Twitter';
-import LinkedInIcon from '@mui/icons-material/LinkedIn';
-import Stack from '@mui/material/Stack';
-
-const SingleUserExample = () => {
- return (
- <>
-
-
- Single User Example
-
-
-
-
-
-
-
-
- Andrew Burns
-
-
-
- Programmer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default SingleUserExample;
diff --git a/components/UIElements/Avatar/SizesAvatars.js b/components/UIElements/Avatar/SizesAvatars.js
deleted file mode 100644
index a84059d..0000000
--- a/components/UIElements/Avatar/SizesAvatars.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-
-const SizesAvatars = () => {
- return (
- <>
-
-
- Sizes Avatars
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default SizesAvatars;
diff --git a/components/UIElements/Avatar/TotalAvatars.js b/components/UIElements/Avatar/TotalAvatars.js
deleted file mode 100644
index 6ab8b2b..0000000
--- a/components/UIElements/Avatar/TotalAvatars.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
-
-const TotalAvatars = () => {
- return (
- <>
-
-
- Total Avatars
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default TotalAvatars;
diff --git a/components/UIElements/Avatar/WithBadge.js b/components/UIElements/Avatar/WithBadge.js
deleted file mode 100644
index d5119d3..0000000
--- a/components/UIElements/Avatar/WithBadge.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { styled } from '@mui/material/styles';
-import Badge from '@mui/material/Badge';
-import Avatar from '@mui/material/Avatar';
-import Stack from '@mui/material/Stack';
-
-const StyledBadge = styled(Badge)(({ theme }) => ({
- '& .MuiBadge-badge': {
- backgroundColor: '#44b700',
- color: '#44b700',
- boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
- '&::after': {
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- borderRadius: '50%',
- animation: 'ripple 1.2s infinite ease-in-out',
- border: '1px solid currentColor',
- content: '""',
- },
- },
- '@keyframes ripple': {
- '0%': {
- transform: 'scale(.8)',
- opacity: 1,
- },
- '100%': {
- transform: 'scale(2.4)',
- opacity: 0,
- },
- },
-}));
-
-const SmallAvatar = styled(Avatar)(({ theme }) => ({
- width: 22,
- height: 22,
- border: `2px solid ${theme.palette.background.paper}`,
-}));
-
-const WithBadge = () => {
- return (
- <>
-
-
- With Badge
-
-
-
-
-
-
-
- }
- >
-
-
-
-
- >
- );
-};
-
-export default WithBadge;
diff --git a/components/UIElements/Badge/Accessibility.js b/components/UIElements/Badge/Accessibility.js
deleted file mode 100644
index 92eed8e..0000000
--- a/components/UIElements/Badge/Accessibility.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import IconButton from '@mui/material/IconButton';
-import Badge from '@mui/material/Badge';
-import MailIcon from '@mui/icons-material/Mail';
-
-function notificationsLabel(count) {
- if (count === 0) {
- return 'no notifications';
- }
- if (count > 99) {
- return 'more than 99 notifications';
- }
- return `${count} notifications`;
-}
-
-const Accessibility = () => {
- return (
- <>
-
-
- Accessibility
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Accessibility;
diff --git a/components/UIElements/Badge/BadgeOverlap.js b/components/UIElements/Badge/BadgeOverlap.js
deleted file mode 100644
index eb97ada..0000000
--- a/components/UIElements/Badge/BadgeOverlap.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Badge from '@mui/material/Badge';
-
-const shapeStyles = { bgcolor: 'primary.main', width: 40, height: 40 };
-const shapeCircleStyles = { borderRadius: '50%' };
-const rectangle = ;
-const circle = (
-
-);
-
-const BadgeOverlap = () => {
- return (
- <>
-
-
- Badge Overlap
-
-
-
-
- {rectangle}
-
-
- {rectangle}
-
-
- {circle}
-
-
- {circle}
-
-
-
- >
- );
-};
-
-export default BadgeOverlap;
diff --git a/components/UIElements/Badge/BasicBadge.js b/components/UIElements/Badge/BasicBadge.js
deleted file mode 100644
index 6f17153..0000000
--- a/components/UIElements/Badge/BasicBadge.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Badge from '@mui/material/Badge';
-import Stack from '@mui/material/Stack';
-import MailIcon from '@mui/icons-material/Mail';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-
-const BasicBadge = () => {
- return (
- <>
-
-
- Basic Badge
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default BasicBadge;
diff --git a/components/UIElements/Badge/Dynamic.js b/components/UIElements/Badge/Dynamic.js
deleted file mode 100644
index 4504292..0000000
--- a/components/UIElements/Badge/Dynamic.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Badge from '@mui/material/Badge';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Button from '@mui/material/Button';
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
-import MailIcon from '@mui/icons-material/Mail';
-import Switch from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const Dynamic = () => {
-
- const [count, setCount] = React.useState(1);
- const [invisible, setInvisible] = React.useState(false);
-
- const handleBadgeVisibility = () => {
- setInvisible(!invisible);
- };
-
- return (
- <>
-
-
- Dynamic
-
-
- *': {
- marginBottom: 2,
- },
- }}
- >
-
-
-
-
-
-
- {
- setCount(Math.max(count - 1, 0));
- }}
- >
-
-
- {
- setCount(count + 1);
- }}
- >
-
-
-
-
-
-
-
-
-
- }
- label="Show Badge"
- className="mr-4"
- />
-
-
-
- >
- );
-};
-
-export default Dynamic;
diff --git a/components/UIElements/Badge/MaximumValue.js b/components/UIElements/Badge/MaximumValue.js
deleted file mode 100644
index 5ac6483..0000000
--- a/components/UIElements/Badge/MaximumValue.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Stack from '@mui/material/Stack';
-import Badge from '@mui/material/Badge';
-import MailIcon from '@mui/icons-material/Mail';
-
-const MaximumValue = () => {
- return (
- <>
-
-
- Maximum Value
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default MaximumValue;
diff --git a/components/UIElements/Buttons/BasicFAB.js b/components/UIElements/Buttons/BasicFAB.js
deleted file mode 100644
index b1e26d8..0000000
--- a/components/UIElements/Buttons/BasicFAB.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Fab from '@mui/material/Fab';
-import AddIcon from '@mui/icons-material/Add';
-import EditIcon from '@mui/icons-material/Edit';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import NavigationIcon from '@mui/icons-material/Navigation';
-
-const BasicFAB = () => {
- return (
- <>
-
-
- Basic Favorite
-
-
- :not(style)': { m: 1 } }}>
-
-
-
-
-
-
-
-
-
-
- Navigate
-
-
-
-
-
-
-
- >
- );
-};
-
-export default BasicFAB;
diff --git a/components/UIElements/Buttons/BlockButtons.js b/components/UIElements/Buttons/BlockButtons.js
deleted file mode 100644
index 3e9698b..0000000
--- a/components/UIElements/Buttons/BlockButtons.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Button from '@mui/material/Button';
-
-const BlockButtons = () => {
- return (
- <>
-
-
- Block Buttons
-
-
-
- Primary
-
-
-
- Secondary
-
-
-
- Success
-
-
- >
- );
-};
-
-export default BlockButtons;
diff --git a/components/UIElements/Buttons/ButtonsWithIcon.js b/components/UIElements/Buttons/ButtonsWithIcon.js
deleted file mode 100644
index 8fe49f4..0000000
--- a/components/UIElements/Buttons/ButtonsWithIcon.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-import AddIcon from '@mui/icons-material/Add';
-import DeleteIcon from '@mui/icons-material/Delete';
-import SendIcon from '@mui/icons-material/Send';
-import PersonIcon from '@mui/icons-material/Person';
-import CheckIcon from '@mui/icons-material/Check';
-import InfoIcon from '@mui/icons-material/Info';
-import WarningIcon from '@mui/icons-material/Warning';
-
-const ButtonsWithIcon = () => {
- return (
- <>
-
-
- Buttons With Icon
-
-
-
- }
- variant="contained"
- color="primary"
- sx={{
- textTransform: 'capitalize',
- borderRadius: '10px',
- mt: '10px',
- p: '10px 30px',
- fontSize: '14px',
- color: '#fff !important',
- }}
- className="mr-10px"
- >
- Primary
-
-
- }
- variant="contained"
- color="secondary"
- sx={{
- textTransform: 'capitalize',
- borderRadius: '10px',
- mt: '10px',
- p: '10px 30px',
- fontSize: '14px',
- color: '#fff !important',
- }}
- className="mr-10px"
- >
- Secondary
-
-
- }
- variant="contained"
- color="success"
- sx={{
- textTransform: 'capitalize',
- borderRadius: '10px',
- mt: '10px',
- color: '#fff',
- p: '10px 30px',
- fontSize: '14px',
- color: '#fff !important',
- }}
- className="mr-10px"
- >
- Success
-
-
- }
- variant="contained"
- color="info"
- sx={{
- textTransform: 'capitalize',
- borderRadius: '10px',
- mt: '10px',
- color: '#fff',
- p: '10px 30px',
- fontSize: '14px',
- color: '#fff !important',
- }}
- className="mr-10px"
- >
- Info
-
-
- }
- variant="contained"
- color="warning"
- sx={{
- textTransform: 'capitalize',
- borderRadius: '10px',
- mt: '10px',
- color: '#fff',
- p: '10px 30px',
- fontSize: '14px',
- color: '#fff !important',
- }}
- className="mr-10px"
- >
- Warning
-
-
- }
- variant="contained"
- color="danger"
- sx={{
- textTransform: 'capitalize',
- borderRadius: '10px',
- mt: '10px',
- color: '#fff',
- p: '10px 30px',
- fontSize: '14px',
- color: '#fff !important',
- }}
- className="mr-10px"
- >
- Danger
-
-
- }
- variant="contained"
- color="dark"
- sx={{
- textTransform: 'capitalize',
- borderRadius: '10px',
- mt: '10px',
- color: '#fff',
- p: '10px 30px',
- fontSize: '14px',
- color: '#fff !important',
- }}
- className="mr-10px"
- >
- Dark
-
-
-
- >
- );
-};
-
-export default ButtonsWithIcon;
diff --git a/components/UIElements/Buttons/DefaultButtons.js b/components/UIElements/Buttons/DefaultButtons.js
deleted file mode 100644
index 335f084..0000000
--- a/components/UIElements/Buttons/DefaultButtons.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-
-const DefaultButtons = () => {
- return (
- <>
-
-
- Default Buttons
-
-
-
-
- Primary
-
-
-
- Secondary
-
-
-
- Success
-
-
-
- Info
-
-
-
- Warning
-
-
-
- Danger
-
-
-
- Dark
-
-
-
- >
- );
-};
-
-export default DefaultButtons;
diff --git a/components/UIElements/Buttons/Loading.js b/components/UIElements/Buttons/Loading.js
deleted file mode 100644
index 96a486b..0000000
--- a/components/UIElements/Buttons/Loading.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import LoadingButton from '@mui/lab/LoadingButton';
-import SaveIcon from '@mui/icons-material/Save';
-import Stack from '@mui/material/Stack';
-
-const Loading = () => {
- return (
- <>
-
-
- Loading
-
-
-
-
- Submit
-
-
-
- Fetch data
-
-
- }
- variant="outlined"
- className="for-dark-border"
- >
- Save
-
-
-
- >
- );
-};
-
-export default Loading;
diff --git a/components/UIElements/Buttons/OutlineButtons.js b/components/UIElements/Buttons/OutlineButtons.js
deleted file mode 100644
index 01b0903..0000000
--- a/components/UIElements/Buttons/OutlineButtons.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-
-const OutlineButtons = () => {
- return (
- <>
-
-
- Outline Buttons
-
-
-
-
- Primary
-
-
-
- Secondary
-
-
-
- Success
-
-
-
- Info
-
-
-
- Warning
-
-
-
- Danger
-
-
-
- Dark
-
-
-
- >
- );
-};
-
-export default OutlineButtons;
diff --git a/components/UIElements/Buttons/OutlineRoundedButtons.js b/components/UIElements/Buttons/OutlineRoundedButtons.js
deleted file mode 100644
index 1ccbaff..0000000
--- a/components/UIElements/Buttons/OutlineRoundedButtons.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-
-const OutlineRoundedButtons = () => {
- return (
- <>
-
-
- Outline Rounded Buttons
-
-
-
-
- Primary
-
-
-
- Secondary
-
-
-
- Success
-
-
-
- Info
-
-
-
- Warning
-
-
-
- Danger
-
-
-
- Dark
-
-
-
- >
- );
-};
-
-export default OutlineRoundedButtons;
diff --git a/components/UIElements/Buttons/RoundedButtons.js b/components/UIElements/Buttons/RoundedButtons.js
deleted file mode 100644
index 98bd673..0000000
--- a/components/UIElements/Buttons/RoundedButtons.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-
-const RoundedButtons = () => {
- return (
- <>
-
-
- Rounded Buttons
-
-
-
-
- Primary
-
-
-
- Secondary
-
-
-
- Success
-
-
-
- Info
-
-
-
- Warning
-
-
-
- Danger
-
-
-
- Dark
-
-
-
- >
- );
-};
-
-export default RoundedButtons;
diff --git a/components/UIElements/Buttons/SizesButtons.js b/components/UIElements/Buttons/SizesButtons.js
deleted file mode 100644
index 9fb6f9b..0000000
--- a/components/UIElements/Buttons/SizesButtons.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-
-const SizesButtons = () => {
- return (
- <>
-
-
- Sizes
-
-
-
-
- Small
- Medium
- Large
-
-
-
-
- Small
-
-
-
- Medium
-
-
-
- Large
-
-
-
-
-
- Small
-
-
-
- Medium
-
-
-
- Large
-
-
-
-
- >
- );
-};
-
-export default SizesButtons;
diff --git a/components/UIElements/Buttons/SoftButtons.js b/components/UIElements/Buttons/SoftButtons.js
deleted file mode 100644
index ad87ec7..0000000
--- a/components/UIElements/Buttons/SoftButtons.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-
-const SoftButtons = () => {
- return (
- <>
-
-
- Soft Buttons
-
-
-
-
- Primary
-
-
-
- Secondary
-
-
-
- Success
-
-
-
- Info
-
-
-
- Warning
-
-
-
- Danger
-
-
-
- Dark
-
-
-
- >
- );
-};
-
-export default SoftButtons;
diff --git a/components/UIElements/Cards/BasicCard.js b/components/UIElements/Cards/BasicCard.js
deleted file mode 100644
index 6ef859d..0000000
--- a/components/UIElements/Cards/BasicCard.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-const bull = (
-
- •
-
-);
-
-export default function BasicCard() {
- return (
-
-
-
- Word of the Day
-
-
-
- be{bull}nev{bull}o{bull}lent
-
-
-
- adjective
-
-
-
- well meaning and kindly.
-
- {'"a benevolent smile"'}
-
-
-
-
- Learn More
-
-
- );
-}
\ No newline at end of file
diff --git a/components/UIElements/Cards/Cards.module.css b/components/UIElements/Cards/Cards.module.css
deleted file mode 100644
index 459d296..0000000
--- a/components/UIElements/Cards/Cards.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.cardWithBgImg {
- border-radius: 10px;
- padding: 25px 20px;
- margin-bottom: 15px;
- position: relative;
- background-size: cover;
- background-position: center center;
-}
-.cardWithBgImg::before {
- content: '';
- position: absolute;
- width: 100%;
- height: 100%;
- bottom: 0;
- left: 0;
- background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
- border-radius: 10px;
-}
\ No newline at end of file
diff --git a/components/UIElements/Cards/ComplexInteraction.js b/components/UIElements/Cards/ComplexInteraction.js
deleted file mode 100644
index 2ae5e15..0000000
--- a/components/UIElements/Cards/ComplexInteraction.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import * as React from "react";
-import { styled } from "@mui/material/styles";
-import Card from "@mui/material/Card";
-import CardHeader from "@mui/material/CardHeader";
-import CardMedia from "@mui/material/CardMedia";
-import CardContent from "@mui/material/CardContent";
-import CardActions from "@mui/material/CardActions";
-import Collapse from "@mui/material/Collapse";
-import Avatar from "@mui/material/Avatar";
-import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
-import { red } from "@mui/material/colors";
-import FavoriteIcon from "@mui/icons-material/Favorite";
-import ShareIcon from "@mui/icons-material/Share";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-
-const ExpandMore = styled((props) => {
- const { expand, ...other } = props;
- return ;
-})(({ theme, expand }) => ({
- transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
- marginLeft: "auto",
- transition: theme.transitions.create("transform", {
- duration: theme.transitions.duration.shortest,
- }),
-}));
-
-export default function ComplexInteraction() {
- const [expanded, setExpanded] = React.useState(false);
-
- const handleExpandClick = () => {
- setExpanded(!expanded);
- };
-
- return (
-
-
- R
-
- }
- action={
-
-
-
- }
- title="Shrimp and Chorizo Paella"
- subheader="September 14, 2016"
- />
-
-
-
-
- This impressive paella is a perfect party dish and a fun meal to cook
- together with your guests. Add 1 cup of frozen peas along with the
- mussels, if you like.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Method:
-
-
- Heat 1/2 cup of the broth in a pot until simmering, add saffron and
- set aside for 10 minutes.
-
-
-
- Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet
- over medium-high heat. Add chicken, shrimp and chorizo, and cook,
- stirring occasionally until lightly browned, 6 to 8 minutes.
- Transfer shrimp to a large plate and set aside, leaving chicken and
- chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes,
- onion, salt and pepper, and cook, stirring often until thickened and
- fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2
- cups chicken broth; bring to a boil.
-
-
-
- Add rice and stir very gently to distribute. Top with artichokes and
- peppers, and cook without stirring, until most of the liquid is
- absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved
- shrimp and mussels, tucking them down into the rice, and cook again
- without stirring, until mussels have opened and rice is just tender,
- 5 to 7 minutes more. (Discard any mussels that don't open.)
-
-
-
- Set aside off of the heat to let rest for 10 minutes, and then
- serve.
-
-
-
-
- );
-}
diff --git a/components/UIElements/Cards/Media.js b/components/UIElements/Cards/Media.js
deleted file mode 100644
index 7708e31..0000000
--- a/components/UIElements/Cards/Media.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from 'react';
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-
-export default function Media() {
- return (
-
-
-
-
-
- Lizard
-
-
-
- Lizards are a widespread group of squamate reptiles, with over 6,000
- species, ranging across all continents except Antarctica
-
-
-
-
- Share
- Learn More
-
-
- );
-}
\ No newline at end of file
diff --git a/components/UIElements/Cards/UIControls.js b/components/UIElements/Cards/UIControls.js
deleted file mode 100644
index 4b1e911..0000000
--- a/components/UIElements/Cards/UIControls.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import SkipNextIcon from '@mui/icons-material/SkipNext';
-
-export default function UIControls() {
- const theme = useTheme();
-
- return (
-
-
-
-
- Live From Space
-
-
-
- Mac Miller
-
-
-
-
-
- {theme.direction === 'rtl' ? : }
-
-
-
-
-
-
-
- {theme.direction === 'rtl' ? : }
-
-
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/components/UIElements/Checkbox/Basic.js b/components/UIElements/Checkbox/Basic.js
deleted file mode 100644
index f62ef98..0000000
--- a/components/UIElements/Checkbox/Basic.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Checkbox from '@mui/material/Checkbox';
-
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-export default function Basic() {
- return (
- <>
-
-
- Basic
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Checkbox/Color.js b/components/UIElements/Checkbox/Color.js
deleted file mode 100644
index 237ee8d..0000000
--- a/components/UIElements/Checkbox/Color.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { pink } from '@mui/material/colors';
-import Checkbox from '@mui/material/Checkbox';
-
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-export default function Color() {
- return (
- <>
-
-
- Color
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Checkbox/Controlled.js b/components/UIElements/Checkbox/Controlled.js
deleted file mode 100644
index 991fcca..0000000
--- a/components/UIElements/Checkbox/Controlled.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Checkbox from '@mui/material/Checkbox';
-
-export default function Controlled() {
-
- const [checked, setChecked] = React.useState(true);
-
- const handleChange = (event) => {
- setChecked(event.target.checked);
- };
-
- return (
- <>
-
-
- Controlled
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Checkbox/Icon.js b/components/UIElements/Checkbox/Icon.js
deleted file mode 100644
index d3c491b..0000000
--- a/components/UIElements/Checkbox/Icon.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Checkbox from '@mui/material/Checkbox';
-import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
-import Favorite from '@mui/icons-material/Favorite';
-import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
-import BookmarkIcon from '@mui/icons-material/Bookmark';
-
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-export default function Icon() {
- return (
- <>
-
-
- Icon
-
-
-
- } checkedIcon={ } />
- }
- checkedIcon={ }
- />
-
-
- >
- );
-}
diff --git a/components/UIElements/Checkbox/Label.js b/components/UIElements/Checkbox/Label.js
deleted file mode 100644
index 2dfd591..0000000
--- a/components/UIElements/Checkbox/Label.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-
-export default function Label() {
- return (
- <>
-
-
- With Label
-
-
-
- } label="Label" />
- } label="Disabled" />
-
-
- >
- );
-}
diff --git a/components/UIElements/Checkbox/Size.js b/components/UIElements/Checkbox/Size.js
deleted file mode 100644
index dbd55cf..0000000
--- a/components/UIElements/Checkbox/Size.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Checkbox from '@mui/material/Checkbox';
-
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-export default function Size() {
- return (
- <>
-
-
- Size
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Chip/Basic.js b/components/UIElements/Chip/Basic.js
deleted file mode 100644
index 44ca45d..0000000
--- a/components/UIElements/Chip/Basic.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function Basic() {
- return (
- <>
-
-
- Basic
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Chip/ChipActions.js b/components/UIElements/Chip/ChipActions.js
deleted file mode 100644
index 38e275b..0000000
--- a/components/UIElements/Chip/ChipActions.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function ChipActions() {
-
- const handleClick = () => {
- console.info('You clicked the Chip.');
- };
-
- return (
- <>
-
-
- Chip Actions
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Chip/ChipAdornments.js b/components/UIElements/Chip/ChipAdornments.js
deleted file mode 100644
index f060a29..0000000
--- a/components/UIElements/Chip/ChipAdornments.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Avatar from '@mui/material/Avatar';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function ChipAdornments() {
- return (
- <>
-
-
- Chip Adornments
-
-
-
- M} label="Avatar" />
- }
- label="Avatar"
- variant="outlined"
- />
-
-
- >
- );
-}
diff --git a/components/UIElements/Chip/ChipArray.js b/components/UIElements/Chip/ChipArray.js
deleted file mode 100644
index 5f495e5..0000000
--- a/components/UIElements/Chip/ChipArray.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { styled } from '@mui/material/styles';
-import Chip from '@mui/material/Chip';
-import Paper from '@mui/material/Paper';
-import TagFacesIcon from '@mui/icons-material/TagFaces';
-
-const ListItem = styled('li')(({ theme }) => ({
- margin: theme.spacing(0.5),
-}));
-
-export default function ChipArray() {
-
- const [chipData, setChipData] = React.useState([
- { key: 0, label: 'Angular' },
- { key: 1, label: 'jQuery' },
- { key: 2, label: 'Polymer' },
- { key: 3, label: 'React' },
- { key: 4, label: 'Vue.js' },
- ]);
-
- const handleDelete = (chipToDelete) => () => {
- setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key));
- };
-
- return (
- <>
-
-
- Chip Array
-
-
-
- {chipData.map((data) => {
- let icon;
-
- if (data.label === 'React') {
- icon = ;
- }
-
- return (
-
-
-
- );
- })}
-
-
- >
- );
-}
diff --git a/components/UIElements/Chip/ClickableAndDeletable.js b/components/UIElements/Chip/ClickableAndDeletable.js
deleted file mode 100644
index 950056f..0000000
--- a/components/UIElements/Chip/ClickableAndDeletable.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function ClickableAndDeletable() {
- const handleClick = () => {
- console.info('You clicked the Chip.');
- };
-
- const handleDelete = () => {
- console.info('You clicked the delete icon.');
- };
-
- return (
- <>
-
-
- Clickable And Deletable
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Chip/ClickableLink.js b/components/UIElements/Chip/ClickableLink.js
deleted file mode 100644
index 5b7dc8a..0000000
--- a/components/UIElements/Chip/ClickableLink.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function ClickableLink() {
- return (
- <>
-
-
- Clickable Link
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Chip/ColorChip.js b/components/UIElements/Chip/ColorChip.js
deleted file mode 100644
index c863c13..0000000
--- a/components/UIElements/Chip/ColorChip.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function ColorChip() {
- return (
- <>
-
-
- Color Chip
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Chip/CustomDeleteIcon.js b/components/UIElements/Chip/CustomDeleteIcon.js
deleted file mode 100644
index 18717a7..0000000
--- a/components/UIElements/Chip/CustomDeleteIcon.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-import DoneIcon from '@mui/icons-material/Done';
-import DeleteIcon from '@mui/icons-material/Delete';
-
-export default function CustomDeleteIcon() {
-
- const handleClick = () => {
- console.info('You clicked the Chip.');
- };
-
- const handleDelete = () => {
- console.info('You clicked the delete icon.');
- };
-
- return (
- <>
-
-
- Custom Delete Icon
-
-
-
- }
- />
- }
- variant="outlined"
- />
-
-
- >
- );
-}
diff --git a/components/UIElements/Chip/Deletable.js b/components/UIElements/Chip/Deletable.js
deleted file mode 100644
index 6ddc0d6..0000000
--- a/components/UIElements/Chip/Deletable.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function Deletable() {
-
- const handleDelete = () => {
- console.info('You clicked the delete icon.');
- };
-
- return (
- <>
-
-
- Deletable
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Chip/IconChip.js b/components/UIElements/Chip/IconChip.js
deleted file mode 100644
index 52f68e2..0000000
--- a/components/UIElements/Chip/IconChip.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-import FaceIcon from '@mui/icons-material/Face';
-
-export default function IconChip() {
- return (
- <>
-
-
- Icon Chip
-
-
-
- } label="With Icon" />
- } label="With Icon" variant="outlined" />
-
-
- >
- );
-}
diff --git a/components/UIElements/Chip/SizesChip.js b/components/UIElements/Chip/SizesChip.js
deleted file mode 100644
index 32251f6..0000000
--- a/components/UIElements/Chip/SizesChip.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-export default function SizesChip() {
- return (
- <>
-
-
- Sizes Chip
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/ImageList/ImageListWithTitleBars.js b/components/UIElements/ImageList/ImageListWithTitleBars.js
deleted file mode 100644
index e4da7dd..0000000
--- a/components/UIElements/ImageList/ImageListWithTitleBars.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-import ImageListItemBar from '@mui/material/ImageListItemBar';
-import ListSubheader from '@mui/material/ListSubheader';
-import IconButton from '@mui/material/IconButton';
-import InfoIcon from '@mui/icons-material/Info';
-
-export default function ImageListWithTitleBars() {
- return (
- <>
-
-
- Image List With Title Bars
-
-
-
-
- December
-
- {itemData.map((item) => (
-
-
-
-
-
- }
- />
-
- ))}
-
-
- >
- );
-}
-
-const itemData = [
- {
- img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
- title: 'Breakfast',
- author: '@bkristastucchio',
- rows: 2,
- cols: 2,
- featured: true,
- },
- {
- img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
- title: 'Burger',
- author: '@rollelflex_graphy726',
- },
- {
- img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
- title: 'Camera',
- author: '@helloimnik',
- },
- {
- img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
- title: 'Coffee',
- author: '@nolanissac',
- cols: 2,
- },
- {
- img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
- title: 'Hats',
- author: '@hjrc33',
- cols: 2,
- },
- {
- img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
- title: 'Honey',
- author: '@arwinneil',
- rows: 2,
- cols: 2,
- featured: true,
- },
- {
- img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
- title: 'Basketball',
- author: '@tjdragotta',
- },
- {
- img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
- title: 'Fern',
- author: '@katie_wasserman',
- },
- {
- img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
- title: 'Mushrooms',
- author: '@silverdalex',
- rows: 2,
- cols: 2,
- },
- {
- img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
- title: 'Tomato basil',
- author: '@shelleypauls',
- },
- {
- img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
- title: 'Sea star',
- author: '@peterlaster',
- },
- {
- img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
- title: 'Bike',
- author: '@southside_customs',
- cols: 2,
- },
-];
\ No newline at end of file
diff --git a/components/UIElements/ImageList/MasonryImageList.js b/components/UIElements/ImageList/MasonryImageList.js
deleted file mode 100644
index f627e0b..0000000
--- a/components/UIElements/ImageList/MasonryImageList.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-
-export default function MasonryImageList() {
- return (
- <>
-
-
- Masonry Image List
-
-
-
-
- {itemData.map((item) => (
-
-
-
- ))}
-
-
-
- >
- );
-}
-
-const itemData = [
- {
- img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
- title: 'Bed',
- },
- {
- img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
- title: 'Books',
- },
- {
- img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
- title: 'Sink',
- },
- {
- img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
- title: 'Kitchen',
- },
- {
- img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
- title: 'Blinds',
- },
- {
- img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
- title: 'Chairs',
- },
- {
- img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
- title: 'Laptop',
- },
- {
- img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
- title: 'Doors',
- },
- {
- img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
- title: 'Coffee',
- },
- {
- img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
- title: 'Storage',
- },
- {
- img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
- title: 'Candle',
- },
- {
- img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
- title: 'Coffee table',
- },
-];
\ No newline at end of file
diff --git a/components/UIElements/ImageList/QuiltedImageList.js b/components/UIElements/ImageList/QuiltedImageList.js
deleted file mode 100644
index da12461..0000000
--- a/components/UIElements/ImageList/QuiltedImageList.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-
-function srcset(image, size, rows = 1, cols = 1) {
- return {
- src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
- srcSet: `${image}?w=${size * cols}&h=${
- size * rows
- }&fit=crop&auto=format&dpr=2 2x`,
- };
-}
-
-export default function QuiltedImageList() {
- return (
- <>
-
-
- Quilted Image List
-
-
-
- {itemData.map((item) => (
-
-
-
- ))}
-
-
- >
- );
-}
-
-const itemData = [
- {
- img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
- title: 'Breakfast',
- rows: 2,
- cols: 2,
- },
- {
- img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
- title: 'Burger',
- },
- {
- img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
- title: 'Camera',
- },
- {
- img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
- title: 'Coffee',
- cols: 2,
- },
- {
- img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
- title: 'Hats',
- cols: 2,
- },
- {
- img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
- title: 'Honey',
- author: '@arwinneil',
- rows: 2,
- cols: 2,
- },
- {
- img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
- title: 'Basketball',
- },
- {
- img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
- title: 'Fern',
- },
- {
- img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
- title: 'Mushrooms',
- rows: 2,
- cols: 2,
- },
- {
- img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
- title: 'Tomato basil',
- },
- {
- img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
- title: 'Sea star',
- },
- {
- img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
- title: 'Bike',
- cols: 2,
- },
-];
\ No newline at end of file
diff --git a/components/UIElements/ImageList/StandardImageList.js b/components/UIElements/ImageList/StandardImageList.js
deleted file mode 100644
index 9408cf9..0000000
--- a/components/UIElements/ImageList/StandardImageList.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-
-const itemData = [
- {
- img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
- title: 'Breakfast',
- },
- {
- img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
- title: 'Burger',
- },
- {
- img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
- title: 'Camera',
- },
- {
- img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
- title: 'Coffee',
- },
- {
- img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
- title: 'Hats',
- },
- {
- img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
- title: 'Honey',
- },
- {
- img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
- title: 'Basketball',
- },
- {
- img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
- title: 'Fern',
- },
- {
- img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
- title: 'Mushrooms',
- },
- {
- img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
- title: 'Tomato basil',
- },
- {
- img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
- title: 'Sea star',
- },
- {
- img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
- title: 'Bike',
- },
-];
-
-export default function StandardImageList() {
- return (
- <>
-
-
- Standard Image List
-
-
-
- {itemData.map((item) => (
-
-
-
- ))}
-
-
- >
- );
-}
diff --git a/components/UIElements/ImageList/TitleBarBelowImageStandard.js b/components/UIElements/ImageList/TitleBarBelowImageStandard.js
deleted file mode 100644
index c669a83..0000000
--- a/components/UIElements/ImageList/TitleBarBelowImageStandard.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-import ImageListItemBar from '@mui/material/ImageListItemBar';
-
-export default function TitleBarBelowImageStandard() {
- return (
- <>
-
-
- Title Bar Below Image Standard
-
-
-
- {itemData.map((item) => (
-
-
- by: {item.author}}
- position="below"
- />
-
- ))}
-
-
- >
- );
-}
-
-const itemData = [
- {
- img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
- title: 'Breakfast',
- author: '@bkristastucchio',
- },
- {
- img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
- title: 'Burger',
- author: '@rollelflex_graphy726',
- },
- {
- img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
- title: 'Camera',
- author: '@helloimnik',
- },
- {
- img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
- title: 'Coffee',
- author: '@nolanissac',
- },
- {
- img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
- title: 'Hats',
- author: '@hjrc33',
- },
- {
- img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
- title: 'Honey',
- author: '@arwinneil',
- },
- {
- img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
- title: 'Basketball',
- author: '@tjdragotta',
- },
- {
- img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
- title: 'Fern',
- author: '@katie_wasserman',
- },
- {
- img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
- title: 'Mushrooms',
- author: '@silverdalex',
- },
- {
- img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
- title: 'Tomato basil',
- author: '@shelleypauls',
- },
- {
- img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
- title: 'Sea star',
- author: '@peterlaster',
- },
- {
- img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
- title: 'Bike',
- author: '@southside_customs',
- },
-];
\ No newline at end of file
diff --git a/components/UIElements/ImageList/WovenImageList.js b/components/UIElements/ImageList/WovenImageList.js
deleted file mode 100644
index a9a635e..0000000
--- a/components/UIElements/ImageList/WovenImageList.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-
-export default function WovenImageList() {
- return (
- <>
-
-
- Woven Image List
-
-
-
- {itemData.map((item) => (
-
-
-
- ))}
-
-
- >
- );
-}
-
-const itemData = [
- {
- img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
- title: 'Bed',
- },
- {
- img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
- title: 'Kitchen',
- },
- {
- img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
- title: 'Sink',
- },
- {
- img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
- title: 'Books',
- },
- {
- img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
- title: 'Chairs',
- },
- {
- img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
- title: 'Candle',
- },
- {
- img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
- title: 'Laptop',
- },
- {
- img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
- title: 'Doors',
- },
- {
- img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
- title: 'Coffee',
- },
- {
- img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
- title: 'Storage',
- },
- {
- img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
- title: 'Coffee table',
- },
- {
- img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
- title: 'Blinds',
- },
-];
\ No newline at end of file
diff --git a/components/UIElements/List/BasicList.js b/components/UIElements/List/BasicList.js
deleted file mode 100644
index 4dab6af..0000000
--- a/components/UIElements/List/BasicList.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import Divider from '@mui/material/Divider';
-import InboxIcon from '@mui/icons-material/Inbox';
-import DraftsIcon from '@mui/icons-material/Drafts';
-
-export default function BasicList() {
- return (
- <>
-
-
- Basic List
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/List/FolderList.js b/components/UIElements/List/FolderList.js
deleted file mode 100644
index 61a988e..0000000
--- a/components/UIElements/List/FolderList.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import Avatar from '@mui/material/Avatar';
-import ImageIcon from '@mui/icons-material/Image';
-import WorkIcon from '@mui/icons-material/Work';
-import BeachAccessIcon from '@mui/icons-material/BeachAccess';
-
-export default function FolderList() {
- return (
- <>
-
-
- FolderList
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/List/ListControls.js b/components/UIElements/List/ListControls.js
deleted file mode 100644
index 666615c..0000000
--- a/components/UIElements/List/ListControls.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import Checkbox from '@mui/material/Checkbox';
-import IconButton from '@mui/material/IconButton';
-import CommentIcon from '@mui/icons-material/Comment';
-
-export default function ListControls() {
-
- const [checked, setChecked] = React.useState([0]);
-
- const handleToggle = (value) => () => {
- const currentIndex = checked.indexOf(value);
- const newChecked = [...checked];
-
- if (currentIndex === -1) {
- newChecked.push(value);
- } else {
- newChecked.splice(currentIndex, 1);
- }
-
- setChecked(newChecked);
- };
-
- return (
- <>
-
-
- List Controls
-
-
-
- {[0, 1, 2, 3].map((value) => {
- const labelId = `checkbox-list-label-${value}`;
-
- return (
-
-
-
- }
- disablePadding
- >
-
-
-
-
-
-
-
- );
- })}
-
-
- >
- );
-}
diff --git a/components/UIElements/List/NestedList.js b/components/UIElements/List/NestedList.js
deleted file mode 100644
index f9441fa..0000000
--- a/components/UIElements/List/NestedList.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import ListSubheader from '@mui/material/ListSubheader';
-import List from '@mui/material/List';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import Collapse from '@mui/material/Collapse';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import DraftsIcon from '@mui/icons-material/Drafts';
-import SendIcon from '@mui/icons-material/Send';
-import ExpandLess from '@mui/icons-material/ExpandLess';
-import ExpandMore from '@mui/icons-material/ExpandMore';
-import StarBorder from '@mui/icons-material/StarBorder';
-
-export default function NestedList() {
- const [open, setOpen] = React.useState(true);
-
- const handleClick = () => {
- setOpen(!open);
- };
-
- return (
- <>
-
-
- Nested List
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Modal/BasicModal.js b/components/UIElements/Modal/BasicModal.js
deleted file mode 100644
index ab9ac11..0000000
--- a/components/UIElements/Modal/BasicModal.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Modal from '@mui/material/Modal';
-
-const style = {
- position: 'absolute',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- width: 400,
- bgcolor: 'background.paper',
- border: '2px solid #000',
- boxShadow: 24,
- p: 4,
-};
-
-export default function BasicModal() {
-
- const [open, setOpen] = React.useState(false);
- const handleOpen = () => setOpen(true);
- const handleClose = () => setOpen(false);
-
- return (
- <>
-
-
- Basic Modal
-
-
-
- Open Modal
-
-
-
-
-
- Text in a modal
-
-
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Modal/CustomizationDialog.js b/components/UIElements/Modal/CustomizationDialog.js
deleted file mode 100644
index 8e89690..0000000
--- a/components/UIElements/Modal/CustomizationDialog.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-import Typography from '@mui/material/Typography';
-import Card from "@mui/material/Card";
-
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
- '& .MuiDialogContent-root': {
- padding: theme.spacing(2),
- },
- '& .MuiDialogActions-root': {
- padding: theme.spacing(1),
- },
-}));
-
-function BootstrapDialogTitle(props) {
- const { children, onClose, ...other } = props;
-
- return (
-
- {children}
- {onClose ? (
- theme.palette.grey[500],
- }}
- >
-
-
- ) : null}
-
- );
-}
-
-BootstrapDialogTitle.propTypes = {
- children: PropTypes.node,
- onClose: PropTypes.func.isRequired,
-};
-
-export default function CustomizationDialog() {
- const [open, setOpen] = React.useState(false);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
- <>
-
-
- Customization Dialog
-
-
-
- Open dialog
-
-
-
-
-
- Modal title
-
-
-
-
- Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
- dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
- consectetur ac, vestibulum at eros.
-
-
-
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-
-
-
- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
- magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
- ullamcorper nulla non metus auctor fringilla.
-
-
-
-
-
- Save changes
-
-
-
-
-
- >
- );
-}
\ No newline at end of file
diff --git a/components/UIElements/Modal/FullScreenDialogs.js b/components/UIElements/Modal/FullScreenDialogs.js
deleted file mode 100644
index 6e0898f..0000000
--- a/components/UIElements/Modal/FullScreenDialogs.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import ListItemText from '@mui/material/ListItemText';
-import ListItem from '@mui/material/ListItem';
-import List from '@mui/material/List';
-import Divider from '@mui/material/Divider';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import CloseIcon from '@mui/icons-material/Close';
-import Slide from '@mui/material/Slide';
-import Card from "@mui/material/Card";
-
-const Transition = React.forwardRef(function Transition(props, ref) {
- return ;
-});
-
-export default function FullScreenDialogs() {
- const [open, setOpen] = React.useState(false);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
- <>
-
-
- Full Screen Dialog
-
-
-
- Open full-screen dialog
-
-
-
-
-
-
-
-
-
- Sound
-
-
- save
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
\ No newline at end of file
diff --git a/components/UIElements/Modal/NestedModal.js b/components/UIElements/Modal/NestedModal.js
deleted file mode 100644
index 91395c8..0000000
--- a/components/UIElements/Modal/NestedModal.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Modal from '@mui/material/Modal';
-import Button from '@mui/material/Button';
-
-const style = {
- position: 'absolute',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- width: 400,
- bgcolor: 'background.paper',
- border: '2px solid #000',
- boxShadow: 24,
- pt: 2,
- px: 4,
- pb: 3,
-};
-
-function ChildModal() {
- const [open, setOpen] = React.useState(false);
- const handleOpen = () => {
- setOpen(true);
- };
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
-
- Open Child Modal
-
-
- Text in a child modal
-
- Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-
- Close Child Modal
-
-
-
- );
-}
-
-export default function NestedModal() {
-
- const [open, setOpen] = React.useState(false);
- const handleOpen = () => {
- setOpen(true);
- };
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
- <>
-
-
- Nested Modal
-
-
- Open Modal
-
-
-
- Text in a modal
-
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Modal/ScrollingLongContent.js b/components/UIElements/Modal/ScrollingLongContent.js
deleted file mode 100644
index 230ac40..0000000
--- a/components/UIElements/Modal/ScrollingLongContent.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-
-export default function ScrollingLongContent() {
- const [open, setOpen] = React.useState(false);
- const [scroll, setScroll] = React.useState('paper');
-
- const handleClickOpen = (scrollType) => () => {
- setOpen(true);
- setScroll(scrollType);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- const descriptionElementRef = React.useRef(null);
- React.useEffect(() => {
- if (open) {
- const { current: descriptionElement } = descriptionElementRef;
- if (descriptionElement !== null) {
- descriptionElement.focus();
- }
- }
- }, [open]);
-
- return (
- <>
-
-
- Scrolling Long Content
-
-
- scroll=paper
-
- scroll=body
-
-
-
- Subscribe
-
-
-
- {[...new Array(50)]
- .map(
- () => `Cras mattis consectetur purus sit amet fermentum.
- Cras justo odio, dapibus ac facilisis in, egestas eget quam.
- Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
- )
- .join('\n')}
-
-
-
-
- Cancel
- Subscribe
-
-
-
-
- >
- );
-}
\ No newline at end of file
diff --git a/components/UIElements/Modal/SimpleDialog.js b/components/UIElements/Modal/SimpleDialog.js
deleted file mode 100644
index 40d026f..0000000
--- a/components/UIElements/Modal/SimpleDialog.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
-import Avatar from '@mui/material/Avatar';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import DialogTitle from '@mui/material/DialogTitle';
-import Dialog from '@mui/material/Dialog';
-import PersonIcon from '@mui/icons-material/Person';
-import AddIcon from '@mui/icons-material/Add';
-import Typography from '@mui/material/Typography';
-import { blue } from '@mui/material/colors';
-import Card from "@mui/material/Card";
-
-const emails = ['username@gmail.com', 'user02@gmail.com'];
-
-function SimpleDialog(props) {
- const { onClose, selectedValue, open } = props;
-
- const handleClose = () => {
- onClose(selectedValue);
- };
-
- const handleListItemClick = (value) => {
- onClose(value);
- };
-
- return (
-
-
-
Set backup account
-
-
- {emails.map((email) => (
-
- handleListItemClick(email)} key={email}>
-
-
-
-
-
-
-
-
- ))}
-
-
- handleListItemClick('addAccount')}
- >
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-SimpleDialog.propTypes = {
- onClose: PropTypes.func.isRequired,
- open: PropTypes.bool.isRequired,
- selectedValue: PropTypes.string.isRequired,
-};
-
-export default function SimpleDialogDemo() {
- const [open, setOpen] = React.useState(false);
- const [selectedValue, setSelectedValue] = React.useState(emails[1]);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
-
- const handleClose = (value) => {
- setOpen(false);
- setSelectedValue(value);
- };
-
- return (
-
-
- Simple Dialog
-
-
-
-
- Selected: {selectedValue}
-
-
-
- Open simple dialog
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/components/UIElements/Modal/Transitions.js b/components/UIElements/Modal/Transitions.js
deleted file mode 100644
index 8a56c12..0000000
--- a/components/UIElements/Modal/Transitions.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Backdrop from '@mui/material/Backdrop';
-import Box from '@mui/material/Box';
-import Modal from '@mui/material/Modal';
-import Fade from '@mui/material/Fade';
-import Button from '@mui/material/Button';
-
-const style = {
- position: 'absolute',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- width: 400,
- bgcolor: 'background.paper',
- border: '2px solid #000',
- boxShadow: 24,
- p: 4,
-};
-
-export default function Transitions() {
- const [open, setOpen] = React.useState(false);
- const handleOpen = () => setOpen(true);
- const handleClose = () => setOpen(false);
-
- return (
- <>
-
-
- Transitions
-
-
- Open Modal
-
-
-
-
-
- Text in a modal
-
-
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Modal/TransitionsDialog.js b/components/UIElements/Modal/TransitionsDialog.js
deleted file mode 100644
index 47a967c..0000000
--- a/components/UIElements/Modal/TransitionsDialog.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import Slide from '@mui/material/Slide';
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-
-const Transition = React.forwardRef(function Transition(props, ref) {
- return ;
-});
-
-export default function TransitionsDialog() {
- const [open, setOpen] = React.useState(false);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
-
-
- Transitions Dialog
-
-
-
-
- Slide in alert dialog
-
-
-
-
- {"Use Google's location service?"}
-
-
-
- Let Google help apps determine location. This means sending anonymous
- location data to Google, even when no apps are running.
-
-
-
-
- Disagree
- Agree
-
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/components/UIElements/Pagination/BasicPagination.js b/components/UIElements/Pagination/BasicPagination.js
deleted file mode 100644
index 69da8e8..0000000
--- a/components/UIElements/Pagination/BasicPagination.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-
-export default function BasicPagination() {
- return (
- <>
-
-
- BasicPagination
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Pagination/CustomIcons.js b/components/UIElements/Pagination/CustomIcons.js
deleted file mode 100644
index 722735f..0000000
--- a/components/UIElements/Pagination/CustomIcons.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Pagination from '@mui/material/Pagination';
-import PaginationItem from '@mui/material/PaginationItem';
-import Stack from '@mui/material/Stack';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-
-export default function CustomIcons() {
- return (
- <>
-
-
- CustomIcons
-
-
-
- (
-
- )}
- />
-
-
- >
- );
-}
diff --git a/components/UIElements/Pagination/OutlinedPagination.js b/components/UIElements/Pagination/OutlinedPagination.js
deleted file mode 100644
index da39b14..0000000
--- a/components/UIElements/Pagination/OutlinedPagination.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-
-export default function OutlinedPagination() {
- return (
- <>
-
-
- Outlined Pagination
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Pagination/PaginationSize.js b/components/UIElements/Pagination/PaginationSize.js
deleted file mode 100644
index 69a1612..0000000
--- a/components/UIElements/Pagination/PaginationSize.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-
-export default function PaginationSize() {
- return (
- <>
-
-
- PaginationSize
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Pagination/RoundedPagination.js b/components/UIElements/Pagination/RoundedPagination.js
deleted file mode 100644
index 667368e..0000000
--- a/components/UIElements/Pagination/RoundedPagination.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-
-export default function RoundedPagination() {
- return (
- <>
-
-
- Rounded Pagination
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Progress/Circular.js b/components/UIElements/Progress/Circular.js
deleted file mode 100644
index d70d3e2..0000000
--- a/components/UIElements/Progress/Circular.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Stack from '@mui/material/Stack';
-import CircularProgress from '@mui/material/CircularProgress';
-
-export default function Circular() {
- return (
- <>
-
-
- Circular
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Progress/CircularDeterminate.js b/components/UIElements/Progress/CircularDeterminate.js
deleted file mode 100644
index f920abf..0000000
--- a/components/UIElements/Progress/CircularDeterminate.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Stack from '@mui/material/Stack';
-import CircularProgress from '@mui/material/CircularProgress';
-
-export default function CircularDeterminate() {
-
- const [progress, setProgress] = React.useState(0);
-
- React.useEffect(() => {
- const timer = setInterval(() => {
- setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
- }, 800);
-
- return () => {
- clearInterval(timer);
- };
- }, []);
-
- return (
- <>
-
-
- Circular Determinate
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Progress/CircularWithLabel.js b/components/UIElements/Progress/CircularWithLabel.js
deleted file mode 100644
index f3da4ac..0000000
--- a/components/UIElements/Progress/CircularWithLabel.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import CircularProgress from '@mui/material/CircularProgress';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Card from "@mui/material/Card";
-
-function CircularProgressWithLabel(props) {
- return (
-
-
-
-
- {`${Math.round(props.value)}%`}
-
-
-
- );
-}
-
-CircularProgressWithLabel.propTypes = {
- /**
- * The value of the progress indicator for the determinate variant.
- * Value between 0 and 100.
- * @default 0
- */
- value: PropTypes.number.isRequired,
-};
-
-export default function CircularStatic() {
- const [progress, setProgress] = React.useState(10);
-
- React.useEffect(() => {
- const timer = setInterval(() => {
- setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
- }, 800);
- return () => {
- clearInterval(timer);
- };
- }, []);
-
- return (
- <>
-
-
- Default
-
-
-
-
- >
- );
-}
\ No newline at end of file
diff --git a/components/UIElements/Progress/Customization.js b/components/UIElements/Progress/Customization.js
deleted file mode 100644
index 2df1fbf..0000000
--- a/components/UIElements/Progress/Customization.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import CircularProgress, {
- circularProgressClasses,
-} from '@mui/material/CircularProgress';
-import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
-
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
- height: 10,
- borderRadius: 5,
- [`&.${linearProgressClasses.colorPrimary}`]: {
- backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
- },
- [`& .${linearProgressClasses.bar}`]: {
- borderRadius: 5,
- backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8',
- },
-}));
-
-// Inspired by the former Facebook spinners.
-function FacebookCircularProgress(props) {
- return (
-
-
- theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
- }}
- size={40}
- thickness={4}
- {...props}
- value={100}
- />
- (theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8'),
- animationDuration: '550ms',
- position: 'absolute',
- left: 0,
- [`& .${circularProgressClasses.circle}`]: {
- strokeLinecap: 'round',
- },
- }}
- size={40}
- thickness={4}
- {...props}
- />
-
- );
-}
-
-export default function Customization() {
- return (
- <>
-
-
- Customization
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Progress/InteractiveIntegration.js b/components/UIElements/Progress/InteractiveIntegration.js
deleted file mode 100644
index a706f47..0000000
--- a/components/UIElements/Progress/InteractiveIntegration.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
-import { green } from '@mui/material/colors';
-import Button from '@mui/material/Button';
-import Fab from '@mui/material/Fab';
-import CheckIcon from '@mui/icons-material/Check';
-import SaveIcon from '@mui/icons-material/Save';
-
-export default function InteractiveIntegration() {
-
- const [loading, setLoading] = React.useState(false);
- const [success, setSuccess] = React.useState(false);
- const timer = React.useRef();
-
- const buttonSx = {
- ...(success && {
- bgcolor: green[500],
- '&:hover': {
- bgcolor: green[700],
- },
- }),
- };
-
- React.useEffect(() => {
- return () => {
- clearTimeout(timer.current);
- };
- }, []);
-
- const handleButtonClick = () => {
- if (!loading) {
- setSuccess(false);
- setLoading(true);
- timer.current = window.setTimeout(() => {
- setSuccess(true);
- setLoading(false);
- }, 2000);
- }
- };
-
- return (
- <>
-
-
- Interactive Integration
-
-
-
-
-
- {success ? : }
-
- {loading && (
-
- )}
-
-
-
-
- Accept terms
-
- {loading && (
-
- )}
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Progress/LinearIndeterminate.js b/components/UIElements/Progress/LinearIndeterminate.js
deleted file mode 100644
index f23a2b8..0000000
--- a/components/UIElements/Progress/LinearIndeterminate.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Stack from '@mui/material/Stack';
-import LinearProgress from '@mui/material/LinearProgress';
-
-export default function LinearIndeterminate() {
- return (
- <>
-
-
- Linear Indeterminate
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Radio/Color.js b/components/UIElements/Radio/Color.js
deleted file mode 100644
index 83d724c..0000000
--- a/components/UIElements/Radio/Color.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { pink } from '@mui/material/colors';
-import Radio from '@mui/material/Radio';
-
-export default function Color() {
-
- const [selectedValue, setSelectedValue] = React.useState('a');
-
- const handleChange = (event) => {
- setSelectedValue(event.target.value);
- };
-
- const controlProps = (item) => ({
- checked: selectedValue === item,
- onChange: handleChange,
- value: item,
- name: 'color-radio-button-demo',
- inputProps: { 'aria-label': item },
- });
-
- return (
- <>
-
-
- Color
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Radio/Controlled.js b/components/UIElements/Radio/Controlled.js
deleted file mode 100644
index 1e3ef42..0000000
--- a/components/UIElements/Radio/Controlled.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-
-export default function Controlled() {
- const [value, setValue] = React.useState('female');
-
- const handleChange = (event) => {
- setValue(event.target.value);
- };
-
- return (
- <>
-
-
- Controlled
-
-
-
- Gender
-
- } label="Female" />
- } label="Male" />
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Radio/Direction.js b/components/UIElements/Radio/Direction.js
deleted file mode 100644
index 3019ed2..0000000
--- a/components/UIElements/Radio/Direction.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-
-export default function Direction() {
- return (
- <>
-
-
- Direction
-
-
-
- Gender
-
- } label="Female" />
- } label="Male" />
- } label="Other" />
- }
- label="other"
- />
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Radio/Group.js b/components/UIElements/Radio/Group.js
deleted file mode 100644
index ccb30a5..0000000
--- a/components/UIElements/Radio/Group.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-
-export default function Group() {
- return (
- <>
-
-
- Radio Group
-
-
-
- Gender
-
- } label="Female" />
- } label="Male" />
- } label="Other" />
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Radio/Size.js b/components/UIElements/Radio/Size.js
deleted file mode 100644
index 0a198d7..0000000
--- a/components/UIElements/Radio/Size.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Radio from '@mui/material/Radio';
-
-export default function Size() {
-
- const [selectedValue, setSelectedValue] = React.useState('a');
- const handleChange = (event) => {
- setSelectedValue(event.target.value);
- };
-
- const controlProps = (item) => ({
- checked: selectedValue === item,
- onChange: handleChange,
- value: item,
- name: 'size-radio-button-demo',
- inputProps: { 'aria-label': item },
- });
-
- return (
- <>
-
-
- Size
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Rating/Basic.js b/components/UIElements/Rating/Basic.js
deleted file mode 100644
index 7ad686c..0000000
--- a/components/UIElements/Rating/Basic.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Rating from '@mui/material/Rating';
-
-export default function Basic() {
- const [value, setValue] = React.useState(2);
-
- return (
- <>
-
-
- Basic
-
-
- legend': { mt: 2 },
- }}
- >
- Controlled
- {
- setValue(newValue);
- }}
- />
-
- Read only
-
-
- Disabled
-
-
- No rating given
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Rating/Customization.js b/components/UIElements/Rating/Customization.js
deleted file mode 100644
index 89fde6e..0000000
--- a/components/UIElements/Rating/Customization.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Rating from '@mui/material/Rating';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
-
-const StyledRating = styled(Rating)({
- '& .MuiRating-iconFilled': {
- color: '#ff6d75',
- },
- '& .MuiRating-iconHover': {
- color: '#ff3d47',
- },
-});
-
-export default function Customization() {
- return (
- <>
-
-
- Customization
-
-
- legend': { mt: 2 },
- }}
- >
- Custom icon and color
- `${value} Heart${value !== 1 ? 's' : ''}`}
- precision={0.5}
- icon={ }
- emptyIcon={ }
- />
- 10 stars
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Rating/HoverFeedback.js b/components/UIElements/Rating/HoverFeedback.js
deleted file mode 100644
index 53c15ce..0000000
--- a/components/UIElements/Rating/HoverFeedback.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Rating from '@mui/material/Rating';
-import Box from '@mui/material/Box';
-import StarIcon from '@mui/icons-material/Star';
-
-const labels = {
- 0.5: 'Useless',
- 1: 'Useless+',
- 1.5: 'Poor',
- 2: 'Poor+',
- 2.5: 'Ok',
- 3: 'Ok+',
- 3.5: 'Good',
- 4: 'Good+',
- 4.5: 'Excellent',
- 5: 'Excellent+',
-};
-
-function getLabelText(value) {
- return `${value} Star${value !== 1 ? 's' : ''}, ${labels[value]}`;
-}
-
-export default function HoverFeedback() {
-
- const [value, setValue] = React.useState(2);
- const [hover, setHover] = React.useState(-1);
-
- return (
- <>
-
-
- Hover Feedback
-
-
-
- {
- setValue(newValue);
- }}
- onChangeActive={(event, newHover) => {
- setHover(newHover);
- }}
- emptyIcon={ }
- />
- {value !== null && (
-
- {labels[hover !== -1 ? hover : value]}
-
- )}
-
-
- >
- );
-}
diff --git a/components/UIElements/Rating/RadioGroup.js b/components/UIElements/Rating/RadioGroup.js
deleted file mode 100644
index 457cded..0000000
--- a/components/UIElements/Rating/RadioGroup.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import Rating from '@mui/material/Rating';
-import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
-import SentimentDissatisfiedIcon from '@mui/icons-material/SentimentDissatisfied';
-import SentimentSatisfiedIcon from '@mui/icons-material/SentimentSatisfied';
-import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAltOutlined';
-import SentimentVerySatisfiedIcon from '@mui/icons-material/SentimentVerySatisfied';
-
-const StyledRating = styled(Rating)(({ theme }) => ({
- '& .MuiRating-iconEmpty .MuiSvgIcon-root': {
- color: theme.palette.action.disabled,
- },
-}));
-
-const customIcons = {
- 1: {
- icon: ,
- label: 'Very Dissatisfied',
- },
- 2: {
- icon: ,
- label: 'Dissatisfied',
- },
- 3: {
- icon: ,
- label: 'Neutral',
- },
- 4: {
- icon: ,
- label: 'Satisfied',
- },
- 5: {
- icon: ,
- label: 'Very Satisfied',
- },
-};
-
-function IconContainer(props) {
- const { value, ...other } = props;
- return {customIcons[value].icon} ;
-}
-
-IconContainer.propTypes = {
- value: PropTypes.number.isRequired,
-};
-
-export default function RadioGroup() {
- return (
- <>
-
-
- Radio Group
-
-
- customIcons[value].label}
- highlightSelectedOnly
- />
-
- >
- );
-}
diff --git a/components/UIElements/Rating/RatingPrecision.js b/components/UIElements/Rating/RatingPrecision.js
deleted file mode 100644
index 97cf1ac..0000000
--- a/components/UIElements/Rating/RatingPrecision.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Rating from '@mui/material/Rating';
-import Stack from '@mui/material/Stack';
-
-export default function RatingPrecision() {
- return (
- <>
-
-
- Rating Precision
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Rating/Sizes.js b/components/UIElements/Rating/Sizes.js
deleted file mode 100644
index c425f3e..0000000
--- a/components/UIElements/Rating/Sizes.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Rating from '@mui/material/Rating';
-import Stack from '@mui/material/Stack';
-
-export default function Sizes() {
- return (
- <>
-
-
- Sizes
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Select/AutoWidth.js b/components/UIElements/Select/AutoWidth.js
deleted file mode 100644
index 3cb5d63..0000000
--- a/components/UIElements/Select/AutoWidth.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-export default function AutoWidth() {
-
- const [age, setAge] = React.useState('');
-
- const handleChange = (event) => {
- setAge(event.target.value);
- };
-
- return (
- <>
-
-
- Auto Width
-
-
-
-
- Age
-
-
- None
-
- Twenty
- Twenty one
- Twenty one and a half
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Select/Basic.js b/components/UIElements/Select/Basic.js
deleted file mode 100644
index c713d9e..0000000
--- a/components/UIElements/Select/Basic.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-export default function Basic() {
-
- const [age, setAge] = React.useState('');
-
- const handleChange = (event) => {
- setAge(event.target.value);
- };
-
- return (
- <>
-
-
- Basic
-
-
-
-
- Age
-
- Ten
- Twenty
- Thirty
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Select/Customization.js b/components/UIElements/Select/Customization.js
deleted file mode 100644
index b8743c0..0000000
--- a/components/UIElements/Select/Customization.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { styled } from '@mui/material/styles';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import NativeSelect from '@mui/material/NativeSelect';
-import InputBase from '@mui/material/InputBase';
-
-const BootstrapInput = styled(InputBase)(({ theme }) => ({
- 'label + &': {
- marginTop: theme.spacing(3),
- },
- '& .MuiInputBase-input': {
- borderRadius: 4,
- position: 'relative',
- backgroundColor: theme.palette.background.paper,
- border: '1px solid #ced4da',
- fontSize: 16,
- padding: '10px 26px 10px 12px',
- transition: theme.transitions.create(['border-color', 'box-shadow']),
- // Use the system font instead of the default Roboto font.
- fontFamily: [
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- ].join(','),
- '&:focus': {
- borderRadius: 4,
- borderColor: '#80bdff',
- boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
- },
- },
-}));
-
-export default function Customization() {
-
- const [age, setAge] = React.useState('');
- const handleChange = (event) => {
- setAge(event.target.value);
- };
-
- return (
- <>
-
-
- Customization
-
-
-
-
- Age
-
-
-
-
- Age
- }
- >
-
- None
-
- Ten
- Twenty
- Thirty
-
-
-
-
- Age
- }
- >
-
- Ten
- Twenty
- Thirty
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Select/MultipleSelectCheckmarks.js b/components/UIElements/Select/MultipleSelectCheckmarks.js
deleted file mode 100644
index 467b476..0000000
--- a/components/UIElements/Select/MultipleSelectCheckmarks.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import ListItemText from '@mui/material/ListItemText';
-import Select from '@mui/material/Select';
-import Checkbox from '@mui/material/Checkbox';
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
- PaperProps: {
- style: {
- maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
- width: 250,
- },
- },
-};
-
-const names = [
- 'Oliver Hansen',
- 'Van Henry',
- 'April Tucker',
- 'Ralph Hubbard',
- 'Omar Alexander',
- 'Carlos Abbott',
- 'Miriam Wagner',
- 'Bradley Wilkerson',
- 'Virginia Andrews',
- 'Kelly Snyder',
-];
-
-export default function MultipleSelectCheckmarks() {
-
- const [personName, setPersonName] = React.useState([]);
-
- const handleChange = (event) => {
- const {
- target: { value },
- } = event;
- setPersonName(
- // On autofill we get a stringified value.
- typeof value === 'string' ? value.split(',') : value,
- );
- };
-
- return (
- <>
-
-
- Multiple Select Checkmarks
-
-
- <>
-
- Tag
- }
- renderValue={(selected) => selected.join(', ')}
- MenuProps={MenuProps}
- >
- {names.map((name) => (
-
- -1} />
-
-
- ))}
-
-
- >
-
- >
- );
-}
diff --git a/components/UIElements/Select/MultipleSelectChip.js b/components/UIElements/Select/MultipleSelectChip.js
deleted file mode 100644
index ddf3bd5..0000000
--- a/components/UIElements/Select/MultipleSelectChip.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import Chip from '@mui/material/Chip';
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
- PaperProps: {
- style: {
- maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
- width: 250,
- },
- },
-};
-
-const names = [
- 'Oliver Hansen',
- 'Van Henry',
- 'April Tucker',
- 'Ralph Hubbard',
- 'Omar Alexander',
- 'Carlos Abbott',
- 'Miriam Wagner',
- 'Bradley Wilkerson',
- 'Virginia Andrews',
- 'Kelly Snyder',
-];
-
-function getStyles(name, personName, theme) {
- return {
- fontWeight:
- personName.indexOf(name) === -1
- ? theme.typography.fontWeightRegular
- : theme.typography.fontWeightMedium,
- };
-}
-
-export default function MultipleSelectChip() {
- const theme = useTheme();
- const [personName, setPersonName] = React.useState([]);
-
- const handleChange = (event) => {
- const {
- target: { value },
- } = event;
- setPersonName(
- // On autofill we get a stringified value.
- typeof value === 'string' ? value.split(',') : value,
- );
- };
-
- return (
- <>
-
-
- Multiple Select Chip
-
-
- <>
-
- Chip
- }
- renderValue={(selected) => (
-
- {selected.map((value) => (
-
- ))}
-
- )}
- MenuProps={MenuProps}
- >
- {names.map((name) => (
-
- {name}
-
- ))}
-
-
- >
-
- >
- );
-}
diff --git a/components/UIElements/Select/MultipleSelectDefault.js b/components/UIElements/Select/MultipleSelectDefault.js
deleted file mode 100644
index c34c04c..0000000
--- a/components/UIElements/Select/MultipleSelectDefault.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { useTheme } from '@mui/material/styles';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
- PaperProps: {
- style: {
- maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
- width: 250,
- },
- },
-};
-
-const names = [
- 'Oliver Hansen',
- 'Van Henry',
- 'April Tucker',
- 'Ralph Hubbard',
- 'Omar Alexander',
- 'Carlos Abbott',
- 'Miriam Wagner',
- 'Bradley Wilkerson',
- 'Virginia Andrews',
- 'Kelly Snyder',
-];
-
-function getStyles(name, personName, theme) {
- return {
- fontWeight:
- personName.indexOf(name) === -1
- ? theme.typography.fontWeightRegular
- : theme.typography.fontWeightMedium,
- };
-}
-
-
-export default function MultipleSelectDefault() {
-
- const theme = useTheme();
- const [personName, setPersonName] = React.useState([]);
-
- const handleChange = (event) => {
- const {
- target: { value },
- } = event;
- setPersonName(
- // On autofill we get a stringified value.
- typeof value === 'string' ? value.split(',') : value,
- );
- };
-
- return (
- <>
-
-
- Multiple Select Default
-
-
-
-
- Name
- }
- MenuProps={MenuProps}
- >
- {names.map((name) => (
-
- {name}
-
- ))}
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Skeleton/Animations.js b/components/UIElements/Skeleton/Animations.js
deleted file mode 100644
index 3094467..0000000
--- a/components/UIElements/Skeleton/Animations.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Skeleton from '@mui/material/Skeleton';
-
-export default function Animations() {
- return (
- <>
-
-
- Animations
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Skeleton/PulsateExample.js b/components/UIElements/Skeleton/PulsateExample.js
deleted file mode 100644
index ef70126..0000000
--- a/components/UIElements/Skeleton/PulsateExample.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import PropTypes from 'prop-types';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Skeleton from '@mui/material/Skeleton';
-
-const data = [
- {
- src: 'https://i.ytimg.com/vi/pLqipJNItIo/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLBkklsyaw9FxDmMKapyBYCn9tbPNQ',
- title: 'Don Diablo @ Tomorrowland Main Stage 2019 | Official…',
- channel: 'Don Diablo',
- views: '396k views',
- createdAt: 'a week ago',
- },
- {
- src: 'https://i.ytimg.com/vi/_Uu12zY01ts/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCpX6Jan2rxrCAZxJYDXppTP4MoQA',
- title: 'Queen - Greatest Hits',
- channel: 'Queen Official',
- views: '40M views',
- createdAt: '3 years ago',
- },
- {
- src: 'https://i.ytimg.com/vi/kkLk2XWMBf8/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLB4GZTFu1Ju2EPPPXnhMZtFVvYBaw',
- title: 'Calvin Harris, Sam Smith - Promises (Official Video)',
- channel: 'Calvin Harris',
- views: '130M views',
- createdAt: '10 months ago',
- },
-];
-
-function Media(props) {
- const { loading = false } = props;
-
- return (
-
- {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
-
- {item ? (
-
- ) : (
-
- )}
-
- {item ? (
-
-
- {item.title}
-
-
- {item.channel}
-
-
- {`${item.views} • ${item.createdAt}`}
-
-
- ) : (
-
-
-
-
- )}
-
- ))}
-
- );
-}
-
-Media.propTypes = {
- loading: PropTypes.bool,
-};
-
-export default function PulsateExample() {
- return (
- <>
-
-
- Pulsate Example
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Skeleton/Variants.js b/components/UIElements/Skeleton/Variants.js
deleted file mode 100644
index 4c59f0a..0000000
--- a/components/UIElements/Skeleton/Variants.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Skeleton from '@mui/material/Skeleton';
-import Stack from '@mui/material/Stack';
-
-export default function Variants() {
- return (
- <>
-
-
- Variants
-
-
-
- {/* For variant="text", adjust the height via font-size */}
-
-
- {/* For other variants, adjust the size with `width` and `height` */}
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Skeleton/WaveExample.js b/components/UIElements/Skeleton/WaveExample.js
deleted file mode 100644
index 990d6a3..0000000
--- a/components/UIElements/Skeleton/WaveExample.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from "react";
-import PropTypes from 'prop-types';
-import Card from '@mui/material/Card';
-import CardHeader from '@mui/material/CardHeader';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Avatar from '@mui/material/Avatar';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import Skeleton from '@mui/material/Skeleton';
-
-function Media(props) {
- const { loading = false } = props;
-
- return (
-
-
- ) : (
-
- )
- }
- action={
- loading ? null : (
-
-
-
- )
- }
- title={
- loading ? (
-
- ) : (
- 'Ted'
- )
- }
- subheader={
- loading ? (
-
- ) : (
- '5 hours ago'
- )
- }
- />
- {loading ? (
-
- ) : (
-
- )}
-
-
- {loading ? (
-
-
-
-
- ) : (
-
- {
- "Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success:"
- }
-
- )}
-
-
- );
-}
-
-Media.propTypes = {
- loading: PropTypes.bool,
-};
-
-export default function WaveExample() {
- return (
- <>
-
-
- Wave Example
-
-
- <>
-
-
- >
-
- >
- );
-}
diff --git a/components/UIElements/Slider/Continuous.js b/components/UIElements/Slider/Continuous.js
deleted file mode 100644
index f250c44..0000000
--- a/components/UIElements/Slider/Continuous.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Slider from '@mui/material/Slider';
-import VolumeDown from '@mui/icons-material/VolumeDown';
-import VolumeUp from '@mui/icons-material/VolumeUp';
-
-export default function Continuous() {
-
- const [value, setValue] = React.useState(30);
-
- const handleChange = (event, newValue) => {
- setValue(newValue);
- };
-
- return (
- <>
-
-
- Continuous
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Slider/CustomMarks.js b/components/UIElements/Slider/CustomMarks.js
deleted file mode 100644
index 3ec83ef..0000000
--- a/components/UIElements/Slider/CustomMarks.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-const marks = [
- {
- value: 0,
- label: '0°C',
- },
- {
- value: 20,
- label: '20°C',
- },
- {
- value: 37,
- label: '37°C',
- },
- {
- value: 100,
- label: '100°C',
- },
-];
-
-function valuetext(value) {
- return `${value}°C`;
-}
-
-export default function CustomMarks() {
- return (
- <>
-
-
- Custom Marks
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Slider/Discrete.js b/components/UIElements/Slider/Discrete.js
deleted file mode 100644
index 75d6994..0000000
--- a/components/UIElements/Slider/Discrete.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-function valuetext(value) {
- return `${value}°C`;
-}
-
-export default function Discrete() {
- return (
- <>
-
-
- Discrete
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Slider/LabelAlwaysVisible.js b/components/UIElements/Slider/LabelAlwaysVisible.js
deleted file mode 100644
index 47fe862..0000000
--- a/components/UIElements/Slider/LabelAlwaysVisible.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-const marks = [
- {
- value: 0,
- label: '0°C',
- },
- {
- value: 20,
- label: '20°C',
- },
- {
- value: 37,
- label: '37°C',
- },
- {
- value: 100,
- label: '100°C',
- },
-];
-
-function valuetext(value) {
- return `${value}°C`;
-}
-
-export default function LabelAlwaysVisible() {
- return (
- <>
-
-
- Label Always Visible
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Slider/RestrictedValues.js b/components/UIElements/Slider/RestrictedValues.js
deleted file mode 100644
index 5aa158d..0000000
--- a/components/UIElements/Slider/RestrictedValues.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-const marks = [
- {
- value: 0,
- label: '0°C',
- },
- {
- value: 20,
- label: '20°C',
- },
- {
- value: 37,
- label: '37°C',
- },
- {
- value: 100,
- label: '100°C',
- },
-];
-
-function valuetext(value) {
- return `${value}°C`;
-}
-
-function valueLabelFormat(value) {
- return marks.findIndex((mark) => mark.value === value) + 1;
-}
-
-export default function RestrictedValues() {
- return (
- <>
-
-
- Restricted Values
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Slider/Sizes.js b/components/UIElements/Slider/Sizes.js
deleted file mode 100644
index 88c4a1f..0000000
--- a/components/UIElements/Slider/Sizes.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-export default function Sizes() {
- return (
- <>
-
-
- Sizes
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Slider/SmallSteps.js b/components/UIElements/Slider/SmallSteps.js
deleted file mode 100644
index ead94d0..0000000
--- a/components/UIElements/Slider/SmallSteps.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-function valuetext(value) {
- return `${value}°C`;
-}
-
-export default function SmallSteps() {
- return (
- <>
-
-
- Small Steps
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Snackbar/ComplementaryProjects.js b/components/UIElements/Snackbar/ComplementaryProjects.js
deleted file mode 100644
index 1345e30..0000000
--- a/components/UIElements/Snackbar/ComplementaryProjects.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Button from '@mui/material/Button';
-import { SnackbarProvider, useSnackbar } from 'notistack';
-
-function MyApp() {
- const { enqueueSnackbar } = useSnackbar();
-
- const handleClick = () => {
- enqueueSnackbar('I love snacks.');
- };
-
- const handleClickVariant = (variant) => () => {
- // variant could be success, error, warning, info, or default
- enqueueSnackbar('This is a success message!', { variant });
- };
-
- return (
-
- Show snackbar
- Show success snackbar
-
- );
-}
-
-export default function ComplementaryProjects() {
- return (
- <>
-
-
- Complementary Projects
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Snackbar/Customization.js b/components/UIElements/Snackbar/Customization.js
deleted file mode 100644
index 8a38638..0000000
--- a/components/UIElements/Snackbar/Customization.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-import Snackbar from '@mui/material/Snackbar';
-import MuiAlert from '@mui/material/Alert';
-
-const Alert = React.forwardRef(function Alert(props, ref) {
- return ;
-});
-
-export default function Customization() {
-
- const [open, setOpen] = React.useState(false);
-
- const handleClick = () => {
- setOpen(true);
- };
-
- const handleClose = (event, reason) => {
- if (reason === 'clickaway') {
- return;
- }
-
- setOpen(false);
- };
-
- return (
- <>
-
-
- Customization
-
-
-
-
- Open success snackbar
-
-
-
-
- This is a success message!
-
-
-
- This is an error message!
-
- This is a warning message!
-
- This is an information message!
-
- This is a success message!
-
-
- >
- );
-}
diff --git a/components/UIElements/Snackbar/PositionedSnackbars.js b/components/UIElements/Snackbar/PositionedSnackbars.js
deleted file mode 100644
index f9ef58f..0000000
--- a/components/UIElements/Snackbar/PositionedSnackbars.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Button from '@mui/material/Button';
-import Snackbar from '@mui/material/Snackbar';
-
-export default function PositionedSnackbars() {
-
- const [state, setState] = React.useState({
- open: false,
- vertical: 'top',
- horizontal: 'center',
- });
- const { vertical, horizontal, open } = state;
-
- const handleClick = (newState) => () => {
- setState({ open: true, ...newState });
- };
-
- const handleClose = () => {
- setState({ ...state, open: false });
- };
-
- const buttons = (
-
-
- Top-Center
-
-
- Top-Right
-
-
- Bottom-Right
-
-
- Bottom-Center
-
-
- Bottom-Left
-
-
- Top-Left
-
-
- );
-
- return (
- <>
-
-
- Positioned Snackbars
-
-
-
- {buttons}
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Snackbar/SimpleSnackbars.js b/components/UIElements/Snackbar/SimpleSnackbars.js
deleted file mode 100644
index 27a1134..0000000
--- a/components/UIElements/Snackbar/SimpleSnackbars.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Button from '@mui/material/Button';
-import Snackbar from '@mui/material/Snackbar';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-
-export default function SimpleSnackbars() {
-
- const [open, setOpen] = React.useState(false);
-
- const handleClick = () => {
- setOpen(true);
- };
-
- const handleClose = (event, reason) => {
- if (reason === 'clickaway') {
- return;
- }
-
- setOpen(false);
- };
-
- const action = (
-
-
- UNDO
-
-
-
-
-
- );
-
- return (
- <>
-
-
- Simple Snackbars
-
-
- <>
-
- Open simple snackbar
-
-
- >
-
- >
- );
-}
diff --git a/components/UIElements/Stepper/AlternativeLabel.js b/components/UIElements/Stepper/AlternativeLabel.js
deleted file mode 100644
index bcb189a..0000000
--- a/components/UIElements/Stepper/AlternativeLabel.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-
-const steps = [
- 'Select master blaster campaign settings',
- 'Create an ad group',
- 'Create an ad',
-];
-
-export default function AlternativeLabel() {
- return (
- <>
-
-
- Alternative Label
-
-
-
-
- {steps.map((label) => (
-
- {label}
-
- ))}
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Stepper/CustomizedHorizontalStepper.js b/components/UIElements/Stepper/CustomizedHorizontalStepper.js
deleted file mode 100644
index 40af482..0000000
--- a/components/UIElements/Stepper/CustomizedHorizontalStepper.js
+++ /dev/null
@@ -1,211 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import Stack from '@mui/material/Stack';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-import Check from '@mui/icons-material/Check';
-import SettingsIcon from '@mui/icons-material/Settings';
-import GroupAddIcon from '@mui/icons-material/GroupAdd';
-import VideoLabelIcon from '@mui/icons-material/VideoLabel';
-import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
-
-const QontoConnector = styled(StepConnector)(({ theme }) => ({
- [`&.${stepConnectorClasses.alternativeLabel}`]: {
- top: 10,
- left: 'calc(-50% + 16px)',
- right: 'calc(50% + 16px)',
- },
- [`&.${stepConnectorClasses.active}`]: {
- [`& .${stepConnectorClasses.line}`]: {
- borderColor: '#784af4',
- },
- },
- [`&.${stepConnectorClasses.completed}`]: {
- [`& .${stepConnectorClasses.line}`]: {
- borderColor: '#784af4',
- },
- },
- [`& .${stepConnectorClasses.line}`]: {
- borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0',
- borderTopWidth: 3,
- borderRadius: 1,
- },
-}));
-
-const QontoStepIconRoot = styled('div')(({ theme, ownerState }) => ({
- color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#eaeaf0',
- display: 'flex',
- height: 22,
- alignItems: 'center',
- ...(ownerState.active && {
- color: '#784af4',
- }),
- '& .QontoStepIcon-completedIcon': {
- color: '#784af4',
- zIndex: 1,
- fontSize: 18,
- },
- '& .QontoStepIcon-circle': {
- width: 8,
- height: 8,
- borderRadius: '50%',
- backgroundColor: 'currentColor',
- },
-}));
-
-function QontoStepIcon(props) {
- const { active, completed, className } = props;
-
- return (
-
- {completed ? (
-
- ) : (
-
- )}
-
- );
-}
-
-QontoStepIcon.propTypes = {
- /**
- * Whether this step is active.
- * @default false
- */
- active: PropTypes.bool,
- className: PropTypes.string,
- /**
- * Mark the step as completed. Is passed to child components.
- * @default false
- */
- completed: PropTypes.bool,
-};
-
-const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
- [`&.${stepConnectorClasses.alternativeLabel}`]: {
- top: 22,
- },
- [`&.${stepConnectorClasses.active}`]: {
- [`& .${stepConnectorClasses.line}`]: {
- backgroundImage:
- 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
- },
- },
- [`&.${stepConnectorClasses.completed}`]: {
- [`& .${stepConnectorClasses.line}`]: {
- backgroundImage:
- 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
- },
- },
- [`& .${stepConnectorClasses.line}`]: {
- height: 3,
- border: 0,
- backgroundColor:
- theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0',
- borderRadius: 1,
- },
-}));
-
-const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({
- backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
- zIndex: 1,
- color: '#fff',
- width: 50,
- height: 50,
- display: 'flex',
- borderRadius: '50%',
- justifyContent: 'center',
- alignItems: 'center',
- ...(ownerState.active && {
- backgroundImage:
- 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
- boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
- }),
- ...(ownerState.completed && {
- backgroundImage:
- 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
- }),
-}));
-
-function ColorlibStepIcon(props) {
- const { active, completed, className } = props;
-
- const icons = {
- 1: ,
- 2: ,
- 3: ,
- };
-
- return (
-
- {icons[String(props.icon)]}
-
- );
-}
-
-ColorlibStepIcon.propTypes = {
- /**
- * Whether this step is active.
- * @default false
- */
- active: PropTypes.bool,
- className: PropTypes.string,
- /**
- * Mark the step as completed. Is passed to child components.
- * @default false
- */
- completed: PropTypes.bool,
- /**
- * The label displayed in the step icon.
- */
- icon: PropTypes.node,
-};
-
-const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
-
-export default function CustomizedHorizontalStepper() {
- return (
- <>
-
-
- Customized Horizontal Stepper
-
-
-
- }>
- {steps.map((label) => (
-
- {label}
-
- ))}
-
- }>
- {steps.map((label) => (
-
- {label}
-
- ))}
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Stepper/ErrorStep.js b/components/UIElements/Stepper/ErrorStep.js
deleted file mode 100644
index e49c61e..0000000
--- a/components/UIElements/Stepper/ErrorStep.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-
-const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
-
-export default function ErrorStep() {
- const isStepFailed = (step) => {
- return step === 1;
- };
-
- return (
- <>
-
-
- Error Step
-
-
-
-
- {steps.map((label, index) => {
- const labelProps = {};
- if (isStepFailed(index)) {
- labelProps.optional = (
-
- Alert message
-
- );
-
- labelProps.error = true;
- }
-
- return (
-
- {label}
-
- );
- })}
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Stepper/HorizontalStepper.js b/components/UIElements/Stepper/HorizontalStepper.js
deleted file mode 100644
index 375d154..0000000
--- a/components/UIElements/Stepper/HorizontalStepper.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-import Button from '@mui/material/Button';
-
-const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
-
-export default function HorizontalStepper() {
-
- const [activeStep, setActiveStep] = React.useState(0);
- const [skipped, setSkipped] = React.useState(new Set());
-
- const isStepOptional = (step) => {
- return step === 1;
- };
-
- const isStepSkipped = (step) => {
- return skipped.has(step);
- };
-
- const handleNext = () => {
- let newSkipped = skipped;
- if (isStepSkipped(activeStep)) {
- newSkipped = new Set(newSkipped.values());
- newSkipped.delete(activeStep);
- }
-
- setActiveStep((prevActiveStep) => prevActiveStep + 1);
- setSkipped(newSkipped);
- };
-
- const handleBack = () => {
- setActiveStep((prevActiveStep) => prevActiveStep - 1);
- };
-
- const handleSkip = () => {
- if (!isStepOptional(activeStep)) {
- // You probably want to guard against something like this,
- // it should never occur unless someone's actively trying to break something.
- throw new Error("You can't skip a step that isn't optional.");
- }
-
- setActiveStep((prevActiveStep) => prevActiveStep + 1);
- setSkipped((prevSkipped) => {
- const newSkipped = new Set(prevSkipped.values());
- newSkipped.add(activeStep);
- return newSkipped;
- });
- };
-
- const handleReset = () => {
- setActiveStep(0);
- };
-
- return (
- <>
-
-
- Horizontal Stepper
-
-
-
-
- {steps.map((label, index) => {
- const stepProps = {};
- const labelProps = {};
- if (isStepOptional(index)) {
- labelProps.optional = (
- Optional
- );
- }
- if (isStepSkipped(index)) {
- stepProps.completed = false;
- }
- return (
-
- {label}
-
- );
- })}
-
- {activeStep === steps.length ? (
-
-
- All steps completed - you're finished
-
-
-
- Reset
-
-
- ) : (
-
- Step {activeStep + 1}
-
-
- Back
-
-
- {isStepOptional(activeStep) && (
-
- Skip
-
- )}
-
-
- {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
-
-
-
- )}
-
-
- >
- );
-}
diff --git a/components/UIElements/Stepper/MobileStepperText.js b/components/UIElements/Stepper/MobileStepperText.js
deleted file mode 100644
index 1118584..0000000
--- a/components/UIElements/Stepper/MobileStepperText.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import { useTheme } from '@mui/material/styles';
-import MobileStepper from '@mui/material/MobileStepper';
-import Paper from '@mui/material/Paper';
-import Button from '@mui/material/Button';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-
-const steps = [
- {
- label: 'Select campaign settings',
- description: `For each ad campaign that you create, you can control how much
- you're willing to spend on clicks and conversions, which networks
- and geographical locations you want your ads to show on, and more.`,
- },
- {
- label: 'Create an ad group',
- description:
- 'An ad group contains one or more ads which target a shared set of keywords.',
- },
- {
- label: 'Create an ad',
- description: `Try out different ad text to see what brings in the most customers,
- and learn how to enhance your ads using features like ad extensions.
- If you run into any problems with your ads, find out how to tell if
- they're running and how to resolve approval issues.`,
- },
-];
-
-export default function MobileStepperText() {
- const theme = useTheme();
- const [activeStep, setActiveStep] = React.useState(0);
- const maxSteps = steps.length;
-
- const handleNext = () => {
- setActiveStep((prevActiveStep) => prevActiveStep + 1);
- };
-
- const handleBack = () => {
- setActiveStep((prevActiveStep) => prevActiveStep - 1);
- };
-
- return (
- <>
-
-
- Mobile Stepper
-
-
-
-
- {steps[activeStep].label}
-
-
-
- {steps[activeStep].description}
-
-
-
- Next
- {theme.direction === 'rtl' ? (
-
- ) : (
-
- )}
-
- }
- backButton={
-
- {theme.direction === 'rtl' ? (
-
- ) : (
-
- )}
- Back
-
- }
- className="bg-black"
- />
-
-
- >
- );
-}
diff --git a/components/UIElements/Stepper/NonLinear.js b/components/UIElements/Stepper/NonLinear.js
deleted file mode 100644
index 6ab4a1f..0000000
--- a/components/UIElements/Stepper/NonLinear.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepButton from '@mui/material/StepButton';
-import Button from '@mui/material/Button';
-
-const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
-
-export default function NonLinear() {
-
- const [activeStep, setActiveStep] = React.useState(0);
- const [completed, setCompleted] = React.useState({});
-
- const totalSteps = () => {
- return steps.length;
- };
-
- const completedSteps = () => {
- return Object.keys(completed).length;
- };
-
- const isLastStep = () => {
- return activeStep === totalSteps() - 1;
- };
-
- const allStepsCompleted = () => {
- return completedSteps() === totalSteps();
- };
-
- const handleNext = () => {
- const newActiveStep =
- isLastStep() && !allStepsCompleted()
- ? // It's the last step, but not all steps have been completed,
- // find the first step that has been completed
- steps.findIndex((step, i) => !(i in completed))
- : activeStep + 1;
- setActiveStep(newActiveStep);
- };
-
- const handleBack = () => {
- setActiveStep((prevActiveStep) => prevActiveStep - 1);
- };
-
- const handleStep = (step) => () => {
- setActiveStep(step);
- };
-
- const handleComplete = () => {
- const newCompleted = completed;
- newCompleted[activeStep] = true;
- setCompleted(newCompleted);
- handleNext();
- };
-
- const handleReset = () => {
- setActiveStep(0);
- setCompleted({});
- };
-
- return (
- <>
-
-
- Non Linear
-
-
-
-
- {steps.map((label, index) => (
-
-
- {label}
-
-
- ))}
-
-
-
- {allStepsCompleted() ? (
-
-
- All steps completed - you're finished
-
-
-
- Reset
-
-
- ) : (
-
-
- Step {activeStep + 1}
-
-
-
-
- Back
-
-
-
-
-
- Next
-
-
- {activeStep !== steps.length &&
- (completed[activeStep] ? (
-
- Step {activeStep + 1} already completed
-
- ) : (
-
- {completedSteps() === totalSteps() - 1
- ? 'Finish'
- : 'Complete Step'}
-
- ))}
-
-
- )}
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Stepper/VerticalStepper.js b/components/UIElements/Stepper/VerticalStepper.js
deleted file mode 100644
index 8e7cf35..0000000
--- a/components/UIElements/Stepper/VerticalStepper.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-import StepContent from '@mui/material/StepContent';
-import Button from '@mui/material/Button';
-import Paper from '@mui/material/Paper';
-
-const steps = [
- {
- label: 'Select campaign settings',
- description: `For each ad campaign that you create, you can control how much
- you're willing to spend on clicks and conversions, which networks
- and geographical locations you want your ads to show on, and more.`,
- },
- {
- label: 'Create an ad group',
- description:
- 'An ad group contains one or more ads which target a shared set of keywords.',
- },
- {
- label: 'Create an ad',
- description: `Try out different ad text to see what brings in the most customers,
- and learn how to enhance your ads using features like ad extensions.
- If you run into any problems with your ads, find out how to tell if
- they're running and how to resolve approval issues.`,
- },
-];
-
-export default function VerticalStepper() {
-
- const [activeStep, setActiveStep] = React.useState(0);
-
- const handleNext = () => {
- setActiveStep((prevActiveStep) => prevActiveStep + 1);
- };
-
- const handleBack = () => {
- setActiveStep((prevActiveStep) => prevActiveStep - 1);
- };
-
- const handleReset = () => {
- setActiveStep(0);
- };
-
- return (
- <>
-
-
- Vertical Stepper
-
-
-
-
- {steps.map((step, index) => (
-
- Last step
- ) : null
- }
- >
- {step.label}
-
-
- {step.description}
-
-
-
- {index === steps.length - 1 ? 'Finish' : 'Continue'}
-
-
- Back
-
-
-
-
-
- ))}
-
- {activeStep === steps.length && (
-
- All steps completed - you're finished
-
- Reset
-
-
- )}
-
-
- >
- );
-}
diff --git a/components/UIElements/SwiperSlider/AutoplaySlider.js b/components/UIElements/SwiperSlider/AutoplaySlider.js
deleted file mode 100644
index 116a6b1..0000000
--- a/components/UIElements/SwiperSlider/AutoplaySlider.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from "react";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay, Pagination, Navigation } from "swiper";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-
-export default function AutoplaySlider() {
- return (
- <>
-
-
- Autoplay
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/SwiperSlider/Default.js b/components/UIElements/SwiperSlider/Default.js
deleted file mode 100644
index cd28fde..0000000
--- a/components/UIElements/SwiperSlider/Default.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-import { Swiper, SwiperSlide } from "swiper/react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-
-export default function Default() {
- return (
- <>
-
-
- Default
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/SwiperSlider/NavigationSlider.js b/components/UIElements/SwiperSlider/NavigationSlider.js
deleted file mode 100644
index fef10a4..0000000
--- a/components/UIElements/SwiperSlider/NavigationSlider.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from "react";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation } from "swiper";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-
-export default function NavigationSlider() {
- return (
- <>
-
-
- Navigation
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/SwiperSlider/PaginationDynamic.js b/components/UIElements/SwiperSlider/PaginationDynamic.js
deleted file mode 100644
index 159992e..0000000
--- a/components/UIElements/SwiperSlider/PaginationDynamic.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Pagination } from "swiper";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-
-export default function PaginationDynamic() {
- return (
- <>
-
-
- Pagination Dynamic
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/SwiperSlider/PaginationProgress.js b/components/UIElements/SwiperSlider/PaginationProgress.js
deleted file mode 100644
index 0756f95..0000000
--- a/components/UIElements/SwiperSlider/PaginationProgress.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from "react";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Pagination, Navigation } from "swiper";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-
-export default function PaginationProgress() {
- return (
- <>
-
-
- Pagination Progress
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/SwiperSlider/PaginationSlider.js b/components/UIElements/SwiperSlider/PaginationSlider.js
deleted file mode 100644
index 1070509..0000000
--- a/components/UIElements/SwiperSlider/PaginationSlider.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from "react";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Pagination } from "swiper";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-
-export default function PaginationSlider() {
- return (
- <>
-
-
- With Pagination Slider
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Switch/Basic.js b/components/UIElements/Switch/Basic.js
deleted file mode 100644
index 7a44ac1..0000000
--- a/components/UIElements/Switch/Basic.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Switch from '@mui/material/Switch';
-
-const label = { inputProps: { 'aria-label': 'Switch demo' } };
-
-export default function Basic() {
- return (
- <>
-
-
- Basic
-
-
- <>
-
-
-
-
- >
-
- >
- );
-}
diff --git a/components/UIElements/Switch/Color.js b/components/UIElements/Switch/Color.js
deleted file mode 100644
index 73d5130..0000000
--- a/components/UIElements/Switch/Color.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { alpha, styled } from '@mui/material/styles';
-import { pink } from '@mui/material/colors';
-import Switch from '@mui/material/Switch';
-
-const GreenSwitch = styled(Switch)(({ theme }) => ({
- '& .MuiSwitch-switchBase.Mui-checked': {
- color: pink[500],
- '&:hover': {
- backgroundColor: alpha(pink[500], theme.palette.action.hoverOpacity),
- },
- },
- '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
- backgroundColor: pink[500],
- },
-}));
-
-const label = { inputProps: { 'aria-label': 'Color switch demo' } };
-
-export default function Color() {
- return (
- <>
-
-
- Color
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Switch/Controlled.js b/components/UIElements/Switch/Controlled.js
deleted file mode 100644
index 441eeed..0000000
--- a/components/UIElements/Switch/Controlled.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Switch from '@mui/material/Switch';
-
-export default function Controlled() {
-
- const [checked, setChecked] = React.useState(true);
-
- const handleChange = (event) => {
- setChecked(event.target.checked);
- };
-
- return (
- <>
-
-
- Controlled
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Switch/Label.js b/components/UIElements/Switch/Label.js
deleted file mode 100644
index 2672abb..0000000
--- a/components/UIElements/Switch/Label.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-
-export default function Label() {
- return (
- <>
-
-
- Label
-
-
-
- } label="Label" />
- } label="Disabled" />
-
-
- >
- );
-}
diff --git a/components/UIElements/Switch/Size.js b/components/UIElements/Switch/Size.js
deleted file mode 100644
index 00c7c28..0000000
--- a/components/UIElements/Switch/Size.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Switch from '@mui/material/Switch';
-
-const label = { inputProps: { 'aria-label': 'Size switch demo' } };
-
-export default function Size() {
- return (
- <>
-
-
- Size
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Switch/SwitchesWithFormGroup.js b/components/UIElements/Switch/SwitchesWithFormGroup.js
deleted file mode 100644
index 4fc4011..0000000
--- a/components/UIElements/Switch/SwitchesWithFormGroup.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import FormLabel from '@mui/material/FormLabel';
-import FormControl from '@mui/material/FormControl';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormHelperText from '@mui/material/FormHelperText';
-import Switch from '@mui/material/Switch';
-
-export default function SwitchesWithFormGroup() {
-
- const [state, setState] = React.useState({
- gilad: true,
- jason: false,
- antoine: true,
- });
-
- const handleChange = (event) => {
- setState({
- ...state,
- [event.target.name]: event.target.checked,
- });
- };
-
- return (
- <>
-
-
- Switches With Form Group
-
-
-
- Assign responsibility
-
-
- }
- label="Gilad Gray"
- />
-
- }
- label="Jason Killian"
- />
-
- }
- label="Antoine Llorca"
- />
-
- Be careful
-
-
- >
- );
-}
diff --git a/components/UIElements/Table/BasicTable.js b/components/UIElements/Table/BasicTable.js
deleted file mode 100644
index e780911..0000000
--- a/components/UIElements/Table/BasicTable.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-
-function createData(name, calories, fat, carbs, protein) {
- return { name, calories, fat, carbs, protein };
-}
-
-const rows = [
- createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
- createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
- createData('Eclair', 262, 16.0, 24, 6.0),
- createData('Cupcake', 305, 3.7, 67, 4.3),
- createData('Gingerbread', 356, 16.0, 49, 3.9),
-];
-
-export default function BasicTable() {
- return (
- <>
-
-
- Basic Table
-
-
-
-
-
-
- Dessert (100g serving)
- Calories
- Fat (g)
- Carbs (g)
- Protein (g)
-
-
-
- {rows.map((row) => (
-
-
- {row.name}
-
- {row.calories}
- {row.fat}
- {row.carbs}
- {row.protein}
-
- ))}
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Table/CustomizationTable.js b/components/UIElements/Table/CustomizationTable.js
deleted file mode 100644
index 7e1b769..0000000
--- a/components/UIElements/Table/CustomizationTable.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { styled } from '@mui/material/styles';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell, { tableCellClasses } from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-
-const StyledTableCell = styled(TableCell)(({ theme }) => ({
- [`&.${tableCellClasses.head}`]: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- [`&.${tableCellClasses.body}`]: {
- fontSize: 14,
- },
-}));
-
-const StyledTableRow = styled(TableRow)(({ theme }) => ({
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- // hide last border
- '&:last-child td, &:last-child th': {
- border: 0,
- },
-}));
-
-function createData(name, calories, fat, carbs, protein) {
- return { name, calories, fat, carbs, protein };
-}
-
-const rows = [
- createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
- createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
- createData('Eclair', 262, 16.0, 24, 6.0),
- createData('Cupcake', 305, 3.7, 67, 4.3),
- createData('Gingerbread', 356, 16.0, 49, 3.9),
-];
-
-export default function CustomizationTable() {
- return (
- <>
-
-
- Customization Table
-
-
-
-
-
-
- Dessert (100g serving)
- Calories
- Fat (g)
- Carbs (g)
- Protein (g)
-
-
-
-
- {rows.map((row) => (
-
-
- {row.name}
-
- {row.calories}
- {row.fat}
- {row.carbs}
- {row.protein}
-
- ))}
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Table/DataTable.js b/components/UIElements/Table/DataTable.js
deleted file mode 100644
index 239bbcc..0000000
--- a/components/UIElements/Table/DataTable.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import { DataGrid } from '@mui/x-data-grid';
-
-const columns = [
- { field: 'id', headerName: 'ID', width: 70 },
- { field: 'firstName', headerName: 'First name', width: 130 },
- { field: 'lastName', headerName: 'Last name', width: 130 },
- {
- field: 'age',
- headerName: 'Age',
- type: 'number',
- width: 90,
- },
- {
- field: 'fullName',
- headerName: 'Full name',
- description: 'This column has a value getter and is not sortable.',
- sortable: false,
- width: 160,
- valueGetter: (params) =>
- `${params.row.firstName || ''} ${params.row.lastName || ''}`,
- },
-];
-
-const rows = [
- { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
- { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
- { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
- { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
- { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
- { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
- { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
- { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
- { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
-];
-
-export default function DataTable() {
- return (
- <>
-
-
- Data Table
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Table/DenseTable.js b/components/UIElements/Table/DenseTable.js
deleted file mode 100644
index c481469..0000000
--- a/components/UIElements/Table/DenseTable.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-
-function createData(name, calories, fat, carbs, protein) {
- return { name, calories, fat, carbs, protein };
-}
-
-const rows = [
- createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
- createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
- createData('Eclair', 262, 16.0, 24, 6.0),
- createData('Cupcake', 305, 3.7, 67, 4.3),
- createData('Gingerbread', 356, 16.0, 49, 3.9),
-];
-
-export default function DenseTable() {
- return (
- <>
-
-
- Dense Table
-
-
-
-
-
-
- Dessert (100g serving)
- Calories
- Fat (g)
- Carbs (g)
- Protein (g)
-
-
-
-
- {rows.map((row) => (
-
-
- {row.name}
-
- {row.calories}
- {row.fat}
- {row.carbs}
- {row.protein}
-
- ))}
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Table/SortingSelectingTable.js b/components/UIElements/Table/SortingSelectingTable.js
deleted file mode 100644
index 626c6c9..0000000
--- a/components/UIElements/Table/SortingSelectingTable.js
+++ /dev/null
@@ -1,402 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { alpha } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TablePagination from '@mui/material/TablePagination';
-import TableRow from '@mui/material/TableRow';
-import TableSortLabel from '@mui/material/TableSortLabel';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Paper from '@mui/material/Paper';
-import Checkbox from '@mui/material/Checkbox';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-import DeleteIcon from '@mui/icons-material/Delete';
-import FilterListIcon from '@mui/icons-material/FilterList';
-import { visuallyHidden } from '@mui/utils';
-import Card from "@mui/material/Card";
-
-function createData(name, calories, fat, carbs, protein) {
- return {
- name,
- calories,
- fat,
- carbs,
- protein,
- };
-}
-
-const rows = [
- createData('Cupcake', 305, 3.7, 67, 4.3),
- createData('Donut', 452, 25.0, 51, 4.9),
- createData('Eclair', 262, 16.0, 24, 6.0),
- createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
- createData('Gingerbread', 356, 16.0, 49, 3.9),
- createData('Honeycomb', 408, 3.2, 87, 6.5),
- createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
- createData('Jelly Bean', 375, 0.0, 94, 0.0),
- createData('KitKat', 518, 26.0, 65, 7.0),
- createData('Lollipop', 392, 0.2, 98, 0.0),
- createData('Marshmallow', 318, 0, 81, 2.0),
- createData('Nougat', 360, 19.0, 9, 37.0),
- createData('Oreo', 437, 18.0, 63, 4.0),
-];
-
-function descendingComparator(a, b, orderBy) {
- if (b[orderBy] < a[orderBy]) {
- return -1;
- }
- if (b[orderBy] > a[orderBy]) {
- return 1;
- }
- return 0;
-}
-
-function getComparator(order, orderBy) {
- return order === 'desc'
- ? (a, b) => descendingComparator(a, b, orderBy)
- : (a, b) => -descendingComparator(a, b, orderBy);
-}
-
-// This method is created for cross-browser compatibility, if you don't
-// need to support IE11, you can use Array.prototype.sort() directly
-function stableSort(array, comparator) {
- const stabilizedThis = array.map((el, index) => [el, index]);
- stabilizedThis.sort((a, b) => {
- const order = comparator(a[0], b[0]);
- if (order !== 0) {
- return order;
- }
- return a[1] - b[1];
- });
- return stabilizedThis.map((el) => el[0]);
-}
-
-const headCells = [
- {
- id: 'name',
- numeric: false,
- disablePadding: true,
- label: 'Dessert (100g serving)',
- },
- {
- id: 'calories',
- numeric: true,
- disablePadding: false,
- label: 'Calories',
- },
- {
- id: 'fat',
- numeric: true,
- disablePadding: false,
- label: 'Fat (g)',
- },
- {
- id: 'carbs',
- numeric: true,
- disablePadding: false,
- label: 'Carbs (g)',
- },
- {
- id: 'protein',
- numeric: true,
- disablePadding: false,
- label: 'Protein (g)',
- },
-];
-
-function EnhancedTableHead(props) {
- const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
- props;
- const createSortHandler = (property) => (event) => {
- onRequestSort(event, property);
- };
-
- return (
-
-
-
- 0 && numSelected < rowCount}
- checked={rowCount > 0 && numSelected === rowCount}
- onChange={onSelectAllClick}
- inputProps={{
- 'aria-label': 'select all desserts',
- }}
- />
-
- {headCells.map((headCell) => (
-
-
- {headCell.label}
- {orderBy === headCell.id ? (
-
- {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-
- ) : null}
-
-
- ))}
-
-
- );
-}
-
-EnhancedTableHead.propTypes = {
- numSelected: PropTypes.number.isRequired,
- onRequestSort: PropTypes.func.isRequired,
- onSelectAllClick: PropTypes.func.isRequired,
- order: PropTypes.oneOf(['asc', 'desc']).isRequired,
- orderBy: PropTypes.string.isRequired,
- rowCount: PropTypes.number.isRequired,
-};
-
-function EnhancedTableToolbar(props) {
- const { numSelected } = props;
-
- return (
- 0 && {
- bgcolor: (theme) =>
- alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
- }),
- }}
- className='ss-table-toolbar'
- >
- {numSelected > 0 ? (
-
- {numSelected} selected
-
- ) : (
-
- Nutrition
-
- )}
-
- {numSelected > 0 ? (
-
-
-
-
-
- ) : (
-
-
-
-
-
- )}
-
- );
-}
-
-EnhancedTableToolbar.propTypes = {
- numSelected: PropTypes.number.isRequired,
-};
-
-export default function EnhancedTable() {
- const [order, setOrder] = React.useState('asc');
- const [orderBy, setOrderBy] = React.useState('calories');
- const [selected, setSelected] = React.useState([]);
- const [page, setPage] = React.useState(0);
- const [dense, setDense] = React.useState(false);
- const [rowsPerPage, setRowsPerPage] = React.useState(5);
-
- const handleRequestSort = (event, property) => {
- const isAsc = orderBy === property && order === 'asc';
- setOrder(isAsc ? 'desc' : 'asc');
- setOrderBy(property);
- };
-
- const handleSelectAllClick = (event) => {
- if (event.target.checked) {
- const newSelected = rows.map((n) => n.name);
- setSelected(newSelected);
- return;
- }
- setSelected([]);
- };
-
- const handleClick = (event, name) => {
- const selectedIndex = selected.indexOf(name);
- let newSelected = [];
-
- if (selectedIndex === -1) {
- newSelected = newSelected.concat(selected, name);
- } else if (selectedIndex === 0) {
- newSelected = newSelected.concat(selected.slice(1));
- } else if (selectedIndex === selected.length - 1) {
- newSelected = newSelected.concat(selected.slice(0, -1));
- } else if (selectedIndex > 0) {
- newSelected = newSelected.concat(
- selected.slice(0, selectedIndex),
- selected.slice(selectedIndex + 1),
- );
- }
-
- setSelected(newSelected);
- };
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- const handleChangeDense = (event) => {
- setDense(event.target.checked);
- };
-
- const isSelected = (name) => selected.indexOf(name) !== -1;
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- return (
-
-
- Sorting & Selecting
-
-
-
-
-
-
-
-
-
- {/* if you don't need to support IE11, you can replace the `stableSort` call with:
- rows.sort(getComparator(order, orderBy)).slice() */}
- {stableSort(rows, getComparator(order, orderBy))
- .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
- .map((row, index) => {
- const isItemSelected = isSelected(row.name);
- const labelId = `enhanced-table-checkbox-${index}`;
-
- return (
- handleClick(event, row.name)}
- role="checkbox"
- aria-checked={isItemSelected}
- tabIndex={-1}
- key={row.name}
- selected={isItemSelected}
- >
-
-
-
-
- {row.name}
-
- {row.calories}
- {row.fat}
- {row.carbs}
- {row.protein}
-
- );
- })}
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
- }
- label="Dense padding"
- />
-
-
- );
-}
\ No newline at end of file
diff --git a/components/UIElements/Tabs/BasicTabs.js b/components/UIElements/Tabs/BasicTabs.js
deleted file mode 100644
index 397afcf..0000000
--- a/components/UIElements/Tabs/BasicTabs.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import PropTypes from 'prop-types';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-
-function TabPanel(props) {
- const { children, value, index, ...other } = props;
-
- return (
-
- {value === index && (
-
- {children}
-
- )}
-
- );
-}
-
-TabPanel.propTypes = {
- children: PropTypes.node,
- index: PropTypes.number.isRequired,
- value: PropTypes.number.isRequired,
-};
-
-function a11yProps(index) {
- return {
- id: `simple-tab-${index}`,
- 'aria-controls': `simple-tabpanel-${index}`,
- };
-}
-
-export default function BasicTabs() {
- const [value, setValue] = React.useState(0);
-
- const handleChange = (event, newValue) => {
- setValue(newValue);
- };
- return (
- <>
-
-
- Basic Tabs
-
-
-
-
-
-
-
-
-
-
-
- Item One
-
-
- Item Two
-
-
- Item Three
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Tabs/ExperimentalAPI.js b/components/UIElements/Tabs/ExperimentalAPI.js
deleted file mode 100644
index de31963..0000000
--- a/components/UIElements/Tabs/ExperimentalAPI.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Tab from '@mui/material/Tab';
-import TabContext from '@mui/lab/TabContext';
-import TabList from '@mui/lab/TabList';
-import TabPanel from '@mui/lab/TabPanel';
-
-export default function ExperimentalAPI() {
-
- const [value, setValue] = React.useState('1');
-
- const handleChange = (event, newValue) => {
- setValue(newValue);
- };
-
- return (
- <>
-
-
- Experimental API
-
-
-
-
-
-
-
-
-
-
-
- Item One
- Item Two
- Item Three
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Tabs/IconPosition.js b/components/UIElements/Tabs/IconPosition.js
deleted file mode 100644
index b63c45b..0000000
--- a/components/UIElements/Tabs/IconPosition.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import PhoneIcon from '@mui/icons-material/Phone';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import PersonPinIcon from '@mui/icons-material/PersonPin';
-import PhoneMissedIcon from '@mui/icons-material/PhoneMissed';
-
-export default function IconPosition() {
-
- const [value, setValue] = React.useState(0);
-
- const handleChange = (event, newValue) => {
- setValue(newValue);
- };
-
- return (
- <>
-
-
- Icon Position
-
-
-
- } label="top" />
- } iconPosition="start" label="start" />
- } iconPosition="end" label="end" />
- } iconPosition="bottom" label="bottom" />
-
-
- >
- );
-}
diff --git a/components/UIElements/Tabs/IconTabs.js b/components/UIElements/Tabs/IconTabs.js
deleted file mode 100644
index 1067b3e..0000000
--- a/components/UIElements/Tabs/IconTabs.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import PhoneIcon from '@mui/icons-material/Phone';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import PersonPinIcon from '@mui/icons-material/PersonPin';
-
-export default function IconTabs() {
-
- const [value, setValue] = React.useState(0);
-
- const handleChange = (event, newValue) => {
- setValue(newValue);
- };
-
- return (
- <>
-
-
- Icon Tabs
-
-
-
- } aria-label="phone" />
- } aria-label="favorite" />
- } aria-label="person" />
-
-
- >
- );
-}
diff --git a/components/UIElements/Tabs/VerticalTabs.js b/components/UIElements/Tabs/VerticalTabs.js
deleted file mode 100644
index 441b317..0000000
--- a/components/UIElements/Tabs/VerticalTabs.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import PropTypes from 'prop-types';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-
-function TabPanel(props) {
- const { children, value, index, ...other } = props;
-
- return (
-
- {value === index && (
-
- {children}
-
- )}
-
- );
-}
-
-TabPanel.propTypes = {
- children: PropTypes.node,
- index: PropTypes.number.isRequired,
- value: PropTypes.number.isRequired,
-};
-
-function a11yProps(index) {
- return {
- id: `vertical-tab-${index}`,
- 'aria-controls': `vertical-tabpanel-${index}`,
- };
-}
-
-export default function VerticalTabs() {
-
- const [value, setValue] = React.useState(0);
-
- const handleChange = (event, newValue) => {
- setValue(newValue);
- };
-
- return (
- <>
-
-
- Vertical Tabs
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Item One
-
-
-
- Item Two
-
-
-
- Item Three
-
-
-
- Item Four
-
-
-
- Item Five
-
-
-
- Item Six
-
-
-
- Item Seven
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Tooltip/BasicTooltip.js b/components/UIElements/Tooltip/BasicTooltip.js
deleted file mode 100644
index 181a5c4..0000000
--- a/components/UIElements/Tooltip/BasicTooltip.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Tooltip from '@mui/material/Tooltip';
-import IconButton from '@mui/material/IconButton';
-import Stack from '@mui/material/Stack';
-import DeleteIcon from '@mui/icons-material/Delete';
-import AlarmIcon from '@mui/icons-material/Alarm';
-import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
-
-export default function BasicTooltip() {
- return (
- <>
-
-
- Basic Tooltip
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Tooltip/PositionedTooltips.js b/components/UIElements/Tooltip/PositionedTooltips.js
deleted file mode 100644
index 93c6cec..0000000
--- a/components/UIElements/Tooltip/PositionedTooltips.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-
-export default function PositionedTooltips() {
- return (
- <>
-
-
- Positioned Tooltips
-
-
-
-
-
-
- top-start
-
-
- top
-
-
- top-end
-
-
-
-
-
-
-
- left-start
-
-
-
- left
-
-
-
- left-end
-
-
-
-
-
-
- right-start
-
-
-
-
- right
-
-
-
-
- right-end
-
-
-
-
-
-
-
-
- bottom-start
-
-
- bottom
-
-
- bottom-end
-
-
-
-
-
-
- View Demo
-
-
- >
- );
-}
diff --git a/components/UIElements/Transitions/CollapseTransitions.js b/components/UIElements/Transitions/CollapseTransitions.js
deleted file mode 100644
index 5e73944..0000000
--- a/components/UIElements/Transitions/CollapseTransitions.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Collapse from '@mui/material/Collapse';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-
-
- theme.palette.common.white,
- stroke: (theme) => theme.palette.divider,
- strokeWidth: 1,
- }}
- points="0,100 50,00, 100,100"
- />
-
-
-);
-
-export default function CollapseTransitions() {
-
- const [checked, setChecked] = React.useState(false);
-
- const handleChange = () => {
- setChecked((prev) => !prev);
- };
-
- return (
- <>
-
-
- Collapse
-
-
-
- }
- label="Show"
- />
- :not(style)': {
- display: 'flex',
- justifyContent: 'space-around',
- height: 120,
- width: 250,
- },
- }}
- >
-
- {icon}
-
- {icon}
-
-
-
-
-
- {icon}
-
-
-
-
- {icon}
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Transitions/FadeTransitions.js b/components/UIElements/Transitions/FadeTransitions.js
deleted file mode 100644
index f666c2e..0000000
--- a/components/UIElements/Transitions/FadeTransitions.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Fade from '@mui/material/Fade';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-
-
- theme.palette.common.white,
- stroke: (theme) => theme.palette.divider,
- strokeWidth: 1,
- }}
- points="0,100 50,00, 100,100"
- />
-
-
-);
-
-export default function FadeTransitions() {
-
- const [checked, setChecked] = React.useState(false);
-
- const handleChange = () => {
- setChecked((prev) => !prev);
- };
-
- return (
- <>
-
-
- Fade
-
-
-
- }
- label="Show"
- />
-
- {icon}
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Transitions/GrowTransitions.js b/components/UIElements/Transitions/GrowTransitions.js
deleted file mode 100644
index 8bd30c7..0000000
--- a/components/UIElements/Transitions/GrowTransitions.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Grow from '@mui/material/Grow';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-
-
- theme.palette.common.white,
- stroke: (theme) => theme.palette.divider,
- strokeWidth: 1,
- }}
- points="0,100 50,00, 100,100"
- />
-
-
-);
-
-export default function GrowTransitions() {
-
- const [checked, setChecked] = React.useState(false);
-
- const handleChange = () => {
- setChecked((prev) => !prev);
- };
-
- return (
- <>
-
-
- Grow Transitions
-
-
-
- }
- label="Show"
- />
-
- {icon}
- {/* Conditionally applies the timeout prop to change the entry speed. */}
-
- {icon}
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Transitions/SlideRelativeToAContainer.js b/components/UIElements/Transitions/SlideRelativeToAContainer.js
deleted file mode 100644
index 3bf88a2..0000000
--- a/components/UIElements/Transitions/SlideRelativeToAContainer.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Slide from '@mui/material/Slide';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-
-
- theme.palette.common.white,
- stroke: (theme) => theme.palette.divider,
- strokeWidth: 1,
- }}
- points="0,100 50,00, 100,100"
- />
-
-
-);
-export default function SlideRelativeToAContainer() {
-
- const [checked, setChecked] = React.useState(false);
- const containerRef = React.useRef(null);
-
- const handleChange = () => {
- setChecked((prev) => !prev);
- };
-
- return (
- <>
-
-
- Slide Relative To A Container
-
-
-
- theme.palette.mode === 'light' ? 'grey.100' : 'grey.900',
- overflow: 'hidden',
- }}
- ref={containerRef}
- className="bg-black"
- >
-
- }
- label="Show from target"
- />
-
- {icon}
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Transitions/SlideTransitions.js b/components/UIElements/Transitions/SlideTransitions.js
deleted file mode 100644
index e672a3a..0000000
--- a/components/UIElements/Transitions/SlideTransitions.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Slide from '@mui/material/Slide';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-
-
- theme.palette.common.white,
- stroke: (theme) => theme.palette.divider,
- strokeWidth: 1,
- }}
- points="0,100 50,00, 100,100"
- />
-
-
-);
-
-export default function SlideTransitions() {
-
- const [checked, setChecked] = React.useState(false);
-
- const handleChange = () => {
- setChecked((prev) => !prev);
- };
-
- return (
- <>
-
-
- Slide Transitions
-
-
-
-
- }
- label="Show"
- />
-
- {icon}
-
-
-
-
- >
- );
-}
diff --git a/components/UIElements/Transitions/ZoomTransitions.js b/components/UIElements/Transitions/ZoomTransitions.js
deleted file mode 100644
index 91cfdc6..0000000
--- a/components/UIElements/Transitions/ZoomTransitions.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Zoom from '@mui/material/Zoom';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-const icon = (
-
-
- theme.palette.common.white,
- stroke: (theme) => theme.palette.divider,
- strokeWidth: 1,
- }}
- points="0,100 50,00, 100,100"
- />
-
-
-);
-
-export default function ZoomTransitions() {
-
- const [checked, setChecked] = React.useState(false);
-
- const handleChange = () => {
- setChecked((prev) => !prev);
- };
-
- return (
- <>
-
-
- ZoomTransitions
-
-
-
- }
- label="Show"
- />
-
- {icon}
-
- {icon}
-
-
-
-
- >
- );
-}
diff --git a/components/_App/ControlPanelModal/DarkAndLightMode.js b/components/_App/ControlPanelModal/DarkAndLightMode.js
deleted file mode 100644
index a7d19b9..0000000
--- a/components/_App/ControlPanelModal/DarkAndLightMode.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useState, useEffect } from "react";
-import Button from '@mui/material/Button';
-import styles from "@/components/_App/ControlPanelModal/DarkAndLightMode.module.css";
-
-const DarkAndLightMode = () => {
- // Light/Dark Mode
- const [isDarkMode, setIsDarkMode] = useState(false);
-
- useEffect(() => {
- // Retrieve the user's preference from local storage
- const storedPreference = localStorage.getItem("theme");
- if (storedPreference === "dark") {
- setIsDarkMode(true);
- }
- }, []);
-
- const handleToggle = () => {
- setIsDarkMode(!isDarkMode);
- };
-
- useEffect(() => {
- // Update the user's preference in local storage
- localStorage.setItem("theme", isDarkMode ? "dark" : "light");
-
- // Update the class on the element to apply the selected mode
- const htmlElement = document.querySelector("html");
- if (isDarkMode) {
- htmlElement.classList.add("dark");
- } else {
- htmlElement.classList.remove("dark");
- }
- }, [isDarkMode]);
-
- return (
- <>
-
-
Dark/Light Mode
-
-
- Switch to {isDarkMode ? "Light Mode" : "Dark Mode"}
-
-
- >
- );
-};
-
-export default DarkAndLightMode;
diff --git a/components/_App/ControlPanelModal/DarkAndLightMode.module.css b/components/_App/ControlPanelModal/DarkAndLightMode.module.css
deleted file mode 100644
index 5fd83dc..0000000
--- a/components/_App/ControlPanelModal/DarkAndLightMode.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.darkModeBox {
- margin-bottom: 30px;
-}
-.darkModeBox h3 {
- font-weight: 500;
- border-bottom: 1px solid #eee !important;
- padding-bottom: 5px;
- margin: 0 0 15px 0;
- font-size: 15px;
- color: var(--headingColor) !important;
-}
\ No newline at end of file
diff --git a/components/_App/ControlPanelModal/OnlyLeftSidebarDarkMode.js b/components/_App/ControlPanelModal/OnlyLeftSidebarDarkMode.js
deleted file mode 100644
index bc105d5..0000000
--- a/components/_App/ControlPanelModal/OnlyLeftSidebarDarkMode.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useState, useEffect } from "react";
-import Button from "@mui/material/Button";
-import styles from "@/components/_App/ControlPanelModal/DarkAndLightMode.module.css";
-
-const OnlyLeftSidebarDarkMode = () => {
- // Light/Dark Mode
- const [isDarkMode, setIsDarkMode] = useState(false);
-
- useEffect(() => {
- // Retrieve the user's preference from local storage
- const storedPreference = localStorage.getItem("leftSidebarTheme");
- if (storedPreference === "leftsidebardark") {
- setIsDarkMode(true);
- }
- }, []);
-
- const handleToggle = () => {
- setIsDarkMode(!isDarkMode);
- };
-
- useEffect(() => {
- // Update the user's preference in local storage
- localStorage.setItem(
- "leftSidebarTheme", isDarkMode ? "leftsidebardark" : "light"
- );
-
- // Update the class on the element to apply the selected mode
- const htmlElement = document.querySelector("leftsidebardark");
- if (isDarkMode) {
- htmlElement.classList.add("leftsidebardark");
- } else {
- htmlElement.classList.remove("leftsidebardark");
- }
- }, [isDarkMode]);
-
- return (
- <>
-
-
Only Left Sidebar Dark/Light Mode
-
-
- Switch to {isDarkMode ? "Light Mode" : "Dark Mode"}
-
-
- >
- );
-};
-
-export default OnlyLeftSidebarDarkMode;
diff --git a/components/_App/ControlPanelModal/OnlyTopNavbarDark.js b/components/_App/ControlPanelModal/OnlyTopNavbarDark.js
deleted file mode 100644
index 8f599cf..0000000
--- a/components/_App/ControlPanelModal/OnlyTopNavbarDark.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useState, useEffect } from "react";
-import Button from '@mui/material/Button';
-import styles from "@/components/_App/ControlPanelModal/DarkAndLightMode.module.css";
-
-const OnlyTopNavbarDark = () => {
- // Light/Dark Mode
- const [isDarkMode, setIsDarkMode] = useState(false);
-
- useEffect(() => {
- // Retrieve the user's preference from local storage
- const storedPreference = localStorage.getItem("topNavbarDarkTheme");
- if (storedPreference === "TopNavbarDark") {
- setIsDarkMode(true);
- }
- }, []);
-
- const handleToggle = () => {
- setIsDarkMode(!isDarkMode);
- };
-
- useEffect(() => {
- // Update the user's preference in local storage
- localStorage.setItem("topNavbarDarkTheme", isDarkMode ? "TopNavbarDark" : "light");
-
- // Update the class on the element to apply the selected mode
- const htmlElement = document.querySelector("topnavbardark");
- if (isDarkMode) {
- htmlElement.classList.add("dark");
- } else {
- htmlElement.classList.remove("dark");
- }
- }, [isDarkMode]);
-
- return (
- <>
-
-
Only Top Navbar Dark/Light Mode
-
-
- Switch to {isDarkMode ? "Light Mode" : "Dark Mode"}
-
-
- >
- );
-};
-
-export default OnlyTopNavbarDark;
diff --git a/components/_App/ControlPanelModal/RTLSwitch.js b/components/_App/ControlPanelModal/RTLSwitch.js
deleted file mode 100644
index 362b153..0000000
--- a/components/_App/ControlPanelModal/RTLSwitch.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-import Button from '@mui/material/Button';
-import styles from "@/components/_App/ControlPanelModal/RTLSwitch.module.css";
-
-const RTLSwitch = () => {
- return (
- <>
-
-
LTR/RTL Demos
-
-
-
- Switch to LTR
-
-
-
- Switch to RTL
-
-
-
- >
- );
-};
-
-export default RTLSwitch;
diff --git a/components/_App/ControlPanelModal/RTLSwitch.module.css b/components/_App/ControlPanelModal/RTLSwitch.module.css
deleted file mode 100644
index 5fd83dc..0000000
--- a/components/_App/ControlPanelModal/RTLSwitch.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.darkModeBox {
- margin-bottom: 30px;
-}
-.darkModeBox h3 {
- font-weight: 500;
- border-bottom: 1px solid #eee !important;
- padding-bottom: 5px;
- margin: 0 0 15px 0;
- font-size: 15px;
- color: var(--headingColor) !important;
-}
\ No newline at end of file
diff --git a/components/_App/ControlPanelModal/index.js b/components/_App/ControlPanelModal/index.js
deleted file mode 100644
index 9bdb3db..0000000
--- a/components/_App/ControlPanelModal/index.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { useState } from "react";
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import CloseIcon from '@mui/icons-material/Close';
-import { Box } from "@mui/material";
-import Tooltip from "@mui/material/Tooltip";
-import Button from "@mui/material/Button";
-import RTLSwitch from '@/components/_App/ControlPanelModal/RTLSwitch';
-import DarkAndLightMode from '@/components/_App/ControlPanelModal/DarkAndLightMode';
-import OnlyLeftSidebarDarkMode from '@/components/_App/ControlPanelModal/OnlyLeftSidebarDarkMode';
-import OnlyTopNavbarDark from '@/components/_App/ControlPanelModal/OnlyTopNavbarDark';
-
-export default function ControlPanelModal() {
-
- const [isActiveSearchModal, setActiveSearchModal] = useState("false");
- const handleToggleSearchModal = () => {
- setActiveSearchModal(!isActiveSearchModal);
- };
-
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Control Panel
-
-
-
-
-
- {/* DarkAndLightMode */}
-
-
- {/* OnlyLeftSidebarDarkMode */}
-
-
- {/* OnlyTopNavbarDark */}
-
-
- {/* RTLSwitch */}
-
-
-
-
-
- Cancel
-
-
-
-
- >
- );
-}
\ No newline at end of file
diff --git a/components/_App/Footer.js b/components/_App/Footer.js
deleted file mode 100644
index 989c2e6..0000000
--- a/components/_App/Footer.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import { Stack, Box, Typography, Link } from "@mui/material";
-
-const Footer = () => {
- return (
- <>
-
-
-
- Copyright {' '}
- Admash is Proudly Owned by {' '}
-
- EnvyTheme
-
-
-
-
- >
- );
-};
-
-export default Footer;
diff --git a/components/_App/Layout.js b/components/_App/Layout.js
deleted file mode 100644
index 8c4d065..0000000
--- a/components/_App/Layout.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useState } from "react";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import LeftSidebar from "@/components/_App/LeftSidebar";
-import TopNavbar from "@/components/_App/TopNavbar";
-import Footer from "@/components/_App/Footer";
-import ScrollToTop from "./ScrollToTop";
-import ControlPanelModal from "./ControlPanelModal";
-
-const Layout = ({ children }) => {
- const router = useRouter();
-
- const [active, setActive] = useState(false);
-
- const toogleActive = () => {
- setActive(!active);
- };
-
- return (
- <>
-
-
- Admash - Material Design React Next Admin Dashboard Template
-
-
-
-
-
- {!(
- router.pathname === "/authentication/sign-in" ||
- router.pathname === "/authentication/sign-up" ||
- router.pathname === "/authentication/forgot-password" ||
- router.pathname === "/authentication/lock-screen" ||
- router.pathname === "/authentication/confirm-mail" ||
- router.pathname === "/authentication/logout"
- ) && (
- <>
-
-
-
- >
- )}
-
-
- {children}
-
- {!(
- router.pathname === "/authentication/sign-in" ||
- router.pathname === "/authentication/sign-up" ||
- router.pathname === "/authentication/forgot-password" ||
- router.pathname === "/authentication/lock-screen" ||
- router.pathname === "/authentication/confirm-mail" ||
- router.pathname === "/authentication/logout"
- ) && }
-
-
-
- {/* ScrollToTop */}
-
-
- {!(
- router.pathname === "/authentication/sign-in" ||
- router.pathname === "/authentication/sign-up" ||
- router.pathname === "/authentication/forgot-password" ||
- router.pathname === "/authentication/lock-screen" ||
- router.pathname === "/authentication/confirm-mail" ||
- router.pathname === "/authentication/logout"
- ) &&
-
- }
- >
- );
-};
-
-export default Layout;
diff --git a/components/_App/LeftSidebar/SidebarData.js b/components/_App/LeftSidebar/SidebarData.js
deleted file mode 100644
index 27ee37b..0000000
--- a/components/_App/LeftSidebar/SidebarData.js
+++ /dev/null
@@ -1,504 +0,0 @@
-import React from "react";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import GridViewIcon from "@mui/icons-material/GridView";
-import LayersIcon from "@mui/icons-material/Layers";
-import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import LockIcon from "@mui/icons-material/Lock";
-import SettingsIcon from "@mui/icons-material/Settings";
-import PostAddIcon from "@mui/icons-material/PostAdd";
-import MailOutlineIcon from "@mui/icons-material/MailOutline";
-import AddchartIcon from "@mui/icons-material/Addchart";
-import CopyAllIcon from "@mui/icons-material/CopyAll";
-import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout";
-import ViewQuiltIcon from "@mui/icons-material/ViewQuilt";
-import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
-
-export const SidebarData = [
- {
- title: "Dashboard",
- path: "/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "eCommerce",
- path: "/ecommerce/",
- },
- {
- title: "Analytics",
- path: "/analytics/",
- },
- {
- title: "Project Management",
- path: "/project-management/",
- },
- {
- title: "LMS Courses",
- path: "/lms-courses/",
- },
- ],
- },
- {
- title: "Apps",
- path: "/apps/file-manager/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "File Manager",
- path: "/apps/file-manager/",
- },
- {
- title: "Chat",
- path: "/apps/chat/",
- },
- {
- title: "To Do",
- path: "/apps/to-do/",
- },
- {
- title: "Calendar",
- path: "/apps/calendar/",
- },
- ],
- },
- {
- title: "Email",
- path: "/email/inbox/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "Inbox",
- path: "/email/inbox/",
- },
- {
- title: "Read Email",
- path: "/email/read-email/",
- },
- ],
- },
- {
- title: "Contact List",
- path: "/contact-list/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "Contact List",
- path: "/contact-list/",
- },
- {
- title: "Members Grid",
- path: "/contact-list/contact-list2/",
- },
- {
- title: "Members List",
- path: "/contact-list/members-list/",
- },
- {
- title: "Profile",
- path: "/contact-list/profile/",
- },
- ],
- },
- {
- title: "Projects",
- path: "/projects/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "Projects",
- path: "/projects/",
- },
- {
- title: "Project Create",
- path: "/projects/project-create/",
- },
- {
- title: "Clients",
- path: "/projects/clients/",
- },
- {
- title: "Team",
- path: "/projects/team/",
- },
- {
- title: "Task",
- path: "/projects/task/",
- },
- {
- title: "User",
- path: "/projects/user/",
- },
- {
- title: "Kanban board",
- path: "/projects/kanban-board/",
- },
- ],
- },
- {
- title: "Analytics",
- path: "/analytics/customers/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "Customers",
- path: "/analytics/customers/",
- },
- {
- title: "Reports",
- path: "/analytics/reports/",
- },
- ],
- },
- {
- title: "eCommerce",
- path: "/ecommerce/products/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "Products",
- path: "/ecommerce/products/",
- },
- {
- title: "Product Details",
- path: "/ecommerce/product-details/",
- },
- {
- title: "Create Product",
- path: "/ecommerce/create-product/",
- },
- {
- title: "Orders List",
- path: "/ecommerce/orders-list/",
- },
- {
- title: "Order Details",
- path: "/ecommerce/order-details/",
- },
- {
- title: "Customers",
- path: "/ecommerce/customers/",
- },
- {
- title: "Cart",
- path: "/ecommerce/cart/",
- },
- {
- title: "Checkout",
- path: "/ecommerce/checkout/",
- },
- {
- title: "Sellers",
- path: "/ecommerce/sellers/",
- },
- ],
- },
- {
- title: "UI Elements",
- path: "/ui-elements/alerts/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "Alerts",
- path: "/ui-elements/alerts/",
- },
- {
- title: "Autocomplete",
- path: "/ui-elements/autocomplete/",
- },
- {
- title: "Avatar",
- path: "/ui-elements/avatar/",
- },
- {
- title: "Badge",
- path: "/ui-elements/badge/",
- },
- {
- title: "Buttons",
- path: "/ui-elements/buttons/",
- },
- {
- title: "Cards",
- path: "/ui-elements/cards/",
- },
- {
- title: "Checkbox",
- path: "/ui-elements/checkbox/",
- },
- {
- title: "Swiper Slider",
- path: "/ui-elements/swiper-slider/",
- },
- {
- title: "Radio",
- path: "/ui-elements/radio/",
- },
- {
- title: "Rating",
- path: "/ui-elements/rating/",
- },
- {
- title: "Select",
- path: "/ui-elements/select/",
- },
- {
- title: "Slider",
- path: "/ui-elements/slider/",
- },
- {
- title: "Switch",
- path: "/ui-elements/switch/",
- },
- {
- title: "Chip",
- path: "/ui-elements/chip/",
- },
- {
- title: "List",
- path: "/ui-elements/list/",
- },
- {
- title: "Modal",
- path: "/ui-elements/modal/",
- },
- {
- title: "Table",
- path: "/ui-elements/table/",
- },
- {
- title: "Tooltip",
- path: "/ui-elements/tooltip/",
- },
- {
- title: "Progress",
- path: "/ui-elements/progress/",
- },
- {
- title: "Skeleton",
- path: "/ui-elements/skeleton/",
- },
- {
- title: "Snackbar",
- path: "/ui-elements/snackbar/",
- },
- {
- title: "Accordion",
- path: "/ui-elements/accordion/",
- },
- {
- title: "Pagination",
- path: "/ui-elements/pagination/",
- },
- {
- title: "Stepper",
- path: "/ui-elements/stepper/",
- },
- {
- title: "Tabs",
- path: "/ui-elements/tabs/",
- },
- {
- title: "Image List",
- path: "/ui-elements/image-list/",
- },
- {
- title: "Transitions",
- path: "/ui-elements/transitions/",
- },
- ],
- },
- {
- title: "Forms",
- path: "/forms/form-layouts/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "Basic Elements",
- path: "/forms/form-layouts/",
- },
- {
- title: "Advanced Elements",
- path: "/forms/advanced-elements/",
- },
- {
- title: "Editors",
- path: "/forms/editors/",
- },
- {
- title: "File Uploader",
- path: "/forms/file-uploader/",
- },
- ],
- },
- {
- title: "Pages",
- path: "/pages/invoice/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "Invoice",
- path: "/pages/invoice/",
- },
- {
- title: "Invoice Details",
- path: "/pages/invoice-details/",
- },
- {
- title: "ApexCharts",
- path: "/pages/apexcharts/",
- },
- {
- title: "Recharts",
- path: "/pages/recharts/",
- },
- {
- title: "Profile",
- path: "/pages/profile/",
- },
- {
- title: "Pricing",
- path: "/pages/pricing/",
- },
- {
- title: "Testimonials",
- path: "/pages/testimonials/",
- },
- {
- title: "Timeline",
- path: "/pages/timeline/",
- },
- {
- title: "FAQ",
- path: "/pages/faq/",
- },
- {
- title: "Gallery",
- path: "/pages/gallery/",
- },
- {
- title: "Support",
- path: "/pages/support/",
- },
- {
- title: "Search",
- path: "/pages/search/",
- },
- {
- title: "Material Icons",
- path: "/pages/material-icons/",
- },
- {
- title: "Remixicon",
- path: "/pages/remixicon/",
- },
- {
- title: "Maps",
- path: "/pages/maps/",
- },
- {
- title: "404 Error Page",
- path: "/404/",
- },
- {
- title: "Terms & Conditions",
- path: "/pages/terms-conditions/",
- },
- ],
- },
- {
- title: "Authentication",
- path: "/authentication/sign-in/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "Sign Up",
- path: "/authentication/sign-up/",
- },
- {
- title: "Forgot Password",
- path: "/authentication/forgot-password/",
- },
- {
- title: "Lock Screen",
- path: "/authentication/lock-screen/",
- },
- {
- title: "Confirm Mail",
- path: "/authentication/confirm-mail/",
- },
- {
- title: "Logout",
- path: "/authentication/logout/",
- },
- ],
- },
- {
- title: "Notification",
- path: "/notification/",
- icon: ,
- },
- {
- title: "Settings",
- path: "/settings/account/",
- icon: ,
- iconClosed: ,
- iconOpened: ,
-
- subNav: [
- {
- title: "Account",
- path: "/settings/account/",
- },
- {
- title: "Security",
- path: "/settings/security/",
- },
- {
- title: "Privacy Policy",
- path: "/settings/privacy-policy/",
- },
- {
- title: "Terms & Conditions",
- path: "/pages/terms-conditions/",
- },
- {
- title: "Logout",
- path: "/authentication/logout/",
- },
- ],
- },
-];
diff --git a/components/_App/LeftSidebar/SubMenu.js b/components/_App/LeftSidebar/SubMenu.js
deleted file mode 100644
index d1013e2..0000000
--- a/components/_App/LeftSidebar/SubMenu.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { styled } from "@mui/material/styles";
-import Link from "next/link";
-import styles from "@/components/_App/LeftSidebar/SubMenu.module.css";
-import { useRouter } from "next/router";
-
-const SidebarLabel = styled("span")(({ theme }) => ({
- position: "relative",
- top: "-3px",
-}));
-
-const SubMenu = ({ item }) => {
- const [subnav, setSubnav] = useState(false);
- const showSubnav = () => setSubnav(!subnav);
- const [currentPath, setCurrentPath] = useState("");
- const router = useRouter();
- // console.log(router.asPath)
-
- useEffect(() => {
- setCurrentPath(router.asPath);
- }, [router]);
-
- return (
- <>
-
-
- {item.icon}
- {item.title}
-
-
- {item.subNav && subnav
- ? item.iconOpened
- : item.subNav
- ? item.iconClosed
- : null}
-
-
- {subnav &&
- item.subNav.map((item, index) => {
- return (
-
- {item.icon}
- {item.title}
-
- );
- })}
- >
- );
-};
-
-export default SubMenu;
diff --git a/components/_App/LeftSidebar/SubMenu.module.css b/components/_App/LeftSidebar/SubMenu.module.css
deleted file mode 100644
index 31af553..0000000
--- a/components/_App/LeftSidebar/SubMenu.module.css
+++ /dev/null
@@ -1,92 +0,0 @@
-.sidebarLink {
- display: flex;
- color: #260944;
- justify-content: space-between;
- align-items: center;
- padding: 9px 20px;
- text-decoration: none;
- font-size: 14.5px;
- border-radius: 5px;
- font-weight: 500;
- margin-top: 3px;
- margin-bottom: 3px;
-}
-.sidebarLink svg {
- fill: #818093;
- position: relative;
- top: 2px;
-}
-.sidebarLink:hover {
- background: linear-gradient(90deg, rgba(172, 169, 255, 0.6) 0%, rgba(172, 169, 255, 0.37) 91.25%);
-}
-.sidebarLink2 {
- display: block;
- color: #5B5B98;
- justify-content: space-between;
- align-items: center;
- padding: 9px 20px 9px 50px;
- text-decoration: none;
- font-size: 14px;
- border-radius: 5px;
- font-weight: 500;
- position: relative;
-}
-.sidebarLink2::before {
- content: "";
- background-color: #818093;
- width: 6px;
- height: 6px;
- border-radius: 100%;
- position: absolute;
- left: 30px;
- top: 16px;
-}
-.sidebarLink2:hover::before {
- background-color: #fff;
-}
-.sidebarLink2:hover {
- background: #757FEF;
- color: #fff;
-}
-
-/* For RTL Style */
-[dir=rtl] .sidebarLink2 {
- padding: 9px 50px 9px 20px;
-}
-[dir=rtl] .sidebarLink2::before {
- left: auto;
- right: 30px;
-}
-
-/* For dark mode */
-[class="dark"] .sidebarLink, [class="leftsidebardark"] .sidebarLink {
- color: #f3f3f3;
-}
-[class="dark"] .sidebarLink svg, [class="leftsidebardark"] .sidebarLink svg {
- fill: #f3f3f3;
-}
-[class="dark"] .sidebarLink span, [class="leftsidebardark"] .sidebarLink svg {
- color: #f3f3f3;
-}
-[class="dark"] .sidebarLink:hover, [class="leftsidebardark"] .sidebarLink svg {
- color: #fff;
-}
-[class="dark"] .sidebarLink:hover span, [class="leftsidebardark"] .sidebarLink svg {
- color: #fff;
-}
-[class="dark"] .sidebarLink:hover svg, [class="leftsidebardark"] .sidebarLink svg {
- fill: #fff;
-}
-
-[class="dark"] .sidebarLink2, [class="leftsidebardark"] .sidebarLink2 {
- color: var(--darkHeadingTextColor);
-}
-[class="dark"] .sidebarLink2 span, [class="leftsidebardark"] .sidebarLink2 {
- color: var(--darkHeadingTextColor);
-}
-[class="dark"] .sidebarLink2:hover, [class="leftsidebardark"] .sidebarLink2 {
- color: #fff;
-}
-[class="dark"] .sidebarLink2:hover span, [class="leftsidebardark"] .sidebarLink2 {
- color: #fff;
-}
\ No newline at end of file
diff --git a/components/_App/LeftSidebar/index.js b/components/_App/LeftSidebar/index.js
deleted file mode 100644
index 5db0539..0000000
--- a/components/_App/LeftSidebar/index.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-import {
- Box
-} from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { SidebarData } from './SidebarData';
-import SubMenu from './SubMenu';
-import Link from 'next/link';
-import ClearIcon from '@mui/icons-material/Clear';
-import IconButton from '@mui/material/IconButton';
-
-const SidebarNav = styled("nav")(({ theme }) => ({
- background: '#fff',
- boxShadow: "0px 4px 20px rgba(47, 143, 232, 0.07)",
- width: '300px',
- padding: '30px 10px',
- height: '100vh',
- display: 'flex',
- justifyContent: 'center',
- position: 'fixed',
- top: 0,
- left: 0,
- transition: '350ms',
- zIndex: '10',
- overflowY: 'auto'
-}));
-
-const SidebarWrap = styled("div")(({ theme }) => ({
- width: '100%'
-}));
-
-const Sidebar = ({ toogleActive }) => {
- return (
- <>
-
-
-
-
-
-
-
- {/* For Dark Variation */}
-
-
-
-
-
-
-
-
- {SidebarData.map((item, index) => {
- return ;
- })}
-
-
-
- >
- );
-};
-
-export default Sidebar;
diff --git a/components/_App/ScrollToTop.js b/components/_App/ScrollToTop.js
deleted file mode 100644
index 0f0b429..0000000
--- a/components/_App/ScrollToTop.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-const ScrollToTop = () => {
- const [showScroll, setShowScroll] = useState(false);
-
- useEffect(() => {
- window.addEventListener("scroll", checkScrollTop);
- return function cleanup() {
- window.removeEventListener("scroll", checkScrollTop);
- };
- });
-
- const checkScrollTop = () => {
- if (!showScroll && window.pageYOffset > 100) {
- setShowScroll(true);
- } else if (showScroll && window.pageYOffset <= 100) {
- setShowScroll(false);
- }
- };
-
- const scrollTop = () => {
- window.scrollTo({ top: 0, behavior: "smooth" });
- };
-
- return (
- <>
-
-
-
- >
- );
-};
-
-export default ScrollToTop;
diff --git a/components/_App/TopNavbar/CurrentDate.js b/components/_App/TopNavbar/CurrentDate.js
deleted file mode 100644
index 74fda3d..0000000
--- a/components/_App/TopNavbar/CurrentDate.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import styles from "@/components/_App/TopNavbar/CurrentDate.module.css";
-
-function CurrentDate() {
- const [currentDate, setCurrentDate] = useState('');
-
- useEffect(() => {
- const options = { day: '2-digit', month: 'long', year: 'numeric' };
- const formatter = new Intl.DateTimeFormat('en-US', options);
- const date = new Date();
- setCurrentDate(formatter.format(date));
- }, []);
-
- return (
- <>
-
-
- {currentDate}
-
- >
- );
-}
-
-export default CurrentDate;
diff --git a/components/_App/TopNavbar/CurrentDate.module.css b/components/_App/TopNavbar/CurrentDate.module.css
deleted file mode 100644
index 5bd6b1c..0000000
--- a/components/_App/TopNavbar/CurrentDate.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.currentDate {
- border: 1px solid #E2E8F0;
- border-radius: 4px;
- display: flex;
- align-items: center;
- color: var(--primaryColor);
- padding: 10px 20px 10px 50px;
- font-weight: 500;
- font-size: 14px;
- position: relative;
-}
-.currentDate i {
- margin-right: 10px;
- font-size: 20px;
- position: absolute;
- left: 20px;
-}
-
-@media only screen and (max-width: 767px) {
- .currentDate {
- display: none;
- }
-}
-
-/* For dark mode */
-[class="dark"] .currentDate {
- border: 1px solid #373a40;
-}
\ No newline at end of file
diff --git a/components/_App/TopNavbar/Email.js b/components/_App/TopNavbar/Email.js
deleted file mode 100644
index 553c9af..0000000
--- a/components/_App/TopNavbar/Email.js
+++ /dev/null
@@ -1,225 +0,0 @@
-import * as React from "react";
-import styles from "@/components/_App/TopNavbar/Email.module.css";
-import {
- IconButton,
- Button,
- Typography,
- Tooltip,
- Menu,
- Link,
-} from "@mui/material";
-import MailOutlineIcon from "@mui/icons-material/MailOutline";
-
-const Email = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
- return (
- <>
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Email;
diff --git a/components/_App/TopNavbar/Email.module.css b/components/_App/TopNavbar/Email.module.css
deleted file mode 100644
index b51d293..0000000
--- a/components/_App/TopNavbar/Email.module.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.header {
- border-bottom: 1px solid #eee;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.header h4 {
- font-size: 16px;
- color: #030229;
- font-weight: 500;
-}
-.header button {
- text-transform: capitalize;
-}
-.notificationList {
- padding-top: 15px;
- padding-bottom: 15px;
- border-bottom: 1px solid #EEF0F7;
- max-width: 300px;
- width: 100%;
- cursor: pointer;
-}
-.notificationListContent {
- display: flex;
- align-items: center;
-}
-.rightArrow {
- position: relative;
- top: 2px;
-}
-
-/* For Dark Mode */
-[class="dark"] .header {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .header h4 {
- color: var(--darkHeadingTextColor);
-}
-[class="dark"] .notificationList {
- border-bottom: 1px solid var(--borderColor);
-}
\ No newline at end of file
diff --git a/components/_App/TopNavbar/Notification.js b/components/_App/TopNavbar/Notification.js
deleted file mode 100644
index c36f452..0000000
--- a/components/_App/TopNavbar/Notification.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import * as React from "react";
-import styles from "@/components/_App/TopNavbar/Notification.module.css";
-import {
- IconButton,
- Button,
- Typography,
- Tooltip,
- Menu,
- Link,
- Badge,
-} from "@mui/material";
-import NotificationsActiveIcon from "@mui/icons-material/NotificationsActive";
-
-const Notification = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
- return (
- <>
-
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Notification;
diff --git a/components/_App/TopNavbar/Notification.module.css b/components/_App/TopNavbar/Notification.module.css
deleted file mode 100644
index f4cff4a..0000000
--- a/components/_App/TopNavbar/Notification.module.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.header {
- border-bottom: 1px solid #eee;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.header h4 {
- font-size: 16px;
- color: #030229;
- font-weight: 500;
-}
-.header button {
- text-transform: capitalize;
-}
-.notificationList {
- position: relative;
- padding-left: 20px;
- padding-top: 15px;
- padding-bottom: 15px;
- border-bottom: 1px solid #EEF0F7;
- max-width: 255px;
- width: 100%;
- cursor: pointer;
-}
-.notificationList::before {
- content: '';
- position: absolute;
- left: 0;
- top: 17px;
- background: linear-gradient(149.1deg, #99B8F3 14.61%, #177FCB 130.18%);
- box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
- width: 10px;
- height: 10px;
- border-radius: 100%;
-}
-.notificationListContent {
- display: flex;
- align-items: center;
-}
-.rightArrow {
- position: relative;
- top: 2px;
-}
-
-/* For RTL Style */
-[dir=rtl] .notificationList {
- padding-left: 0;
- padding-right: 20px;
-}
-[dir=rtl] .notificationList::before {
- left: auto;
- right: 0;
-}
-
-/* For Dark Mode */
-[class="dark"] .header {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .header h4 {
- color: var(--darkHeadingTextColor);
-}
-[class="dark"] .notificationList {
- border-bottom: 1px solid var(--borderColor);
-}
\ No newline at end of file
diff --git a/components/_App/TopNavbar/Profile.js b/components/_App/TopNavbar/Profile.js
deleted file mode 100644
index e3a28fa..0000000
--- a/components/_App/TopNavbar/Profile.js
+++ /dev/null
@@ -1,199 +0,0 @@
-import * as React from "react";
-import {
- IconButton,
- Typography,
- Box,
- Tooltip,
- Avatar,
- Menu,
- MenuItem,
- Link,
- ListItemIcon,
- Divider,
-} from "@mui/material";
-import PersonIcon from "@mui/icons-material/Person";
-import Settings from "@mui/icons-material/Settings";
-import MailOutlineIcon from "@mui/icons-material/MailOutline";
-import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
-import AttachMoneyIcon from "@mui/icons-material/AttachMoney";
-import Logout from "@mui/icons-material/Logout";
-
-const Profile = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
- return (
- <>
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Profile;
diff --git a/components/_App/TopNavbar/SearchForm.js b/components/_App/TopNavbar/SearchForm.js
deleted file mode 100644
index f412fa7..0000000
--- a/components/_App/TopNavbar/SearchForm.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from "react";
-import { styled, alpha } from "@mui/material/styles";
-import InputBase from "@mui/material/InputBase";
-import SearchIcon from "@mui/icons-material/Search";
-
-const Search = styled("div")(({ theme }) => ({
- position: "relative",
- borderRadius: 100,
- backgroundColor: alpha(theme.palette.common.white, 0.15),
- "&:hover": {
- backgroundColor: alpha(theme.palette.common.white, 0.25),
- },
- marginRight: 0,
- marginLeft: "15px",
- width: "100%",
- [theme.breakpoints.up("sm")]: {
- marginRight: theme.spacing(1),
- width: "auto",
- },
-}));
-
-const SearchIconWrapper = styled("div")(({ theme }) => ({
- color: "#757FEF",
- padding: theme.spacing(0, 2),
- height: "100%",
- position: "absolute",
- right: "0",
- pointerEvents: "none",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- zIndex: "5",
-}));
-
-const StyledInputBase = styled(InputBase)(({ theme }) => ({
- color: "inherit",
- "& .MuiInputBase-input": {
- backgroundColor: "#F5F7FA",
- borderRadius: "30px",
- padding: theme.spacing(1.4, 0, 1.4, 2),
- // vertical padding + font size from searchIcon
- paddingRight: `calc(1em + ${theme.spacing(4)})`,
- transition: theme.transitions.create("width"),
- width: "100%",
- [theme.breakpoints.up("sm")]: {
- width: "260px",
- "&:focus": {
- width: "280px",
- },
- },
- },
-}));
-
-export default function SearchForm() {
- return (
- <>
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/_App/TopNavbar/index.js b/components/_App/TopNavbar/index.js
deleted file mode 100644
index 3e73095..0000000
--- a/components/_App/TopNavbar/index.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from "react";
-import { AppBar, Toolbar, IconButton, Stack, Typography } from "@mui/material";
-import SearchForm from "./SearchForm";
-import Email from "./Email";
-import Notification from "./Notification";
-import Profile from "./Profile";
-import Tooltip from "@mui/material/Tooltip";
-import CurrentDate from "./CurrentDate";
-
-const TopNavbar = ({ toogleActive }) => {
- return (
- <>
-
-
-
-
-
-
-
-
-
- {/* Search form */}
-
-
-
-
-
- {/* CurrentDate */}
-
-
- {/* Notification */}
-
-
- {/* Notification */}
-
-
- {/* Profile */}
-
-
-
-
-
- >
- );
-};
-
-export default TopNavbar;
diff --git a/components/eCommerce/Cart/HaveAPromoCode.js b/components/eCommerce/Cart/HaveAPromoCode.js
deleted file mode 100644
index ee76683..0000000
--- a/components/eCommerce/Cart/HaveAPromoCode.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-
-const HaveAPromoCode = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
-
-
- Have a Promo Code?
-
-
-
-
-
-
- Apply
-
-
-
- >
- );
-};
-
-export default HaveAPromoCode;
diff --git a/components/eCommerce/Cart/OrderSummary.js b/components/eCommerce/Cart/OrderSummary.js
deleted file mode 100644
index abec661..0000000
--- a/components/eCommerce/Cart/OrderSummary.js
+++ /dev/null
@@ -1,188 +0,0 @@
-import * as React from 'react';
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Button from "@mui/material/Button";
-import AddIcon from "@mui/icons-material/Add";
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-
-const OrderSummary = () => {
- return (
- <>
-
-
- Order Summary
-
-
-
-
-
-
-
- Sub Total :
-
-
-
- $760.00
-
-
-
-
-
- Discount :
-
-
-
- $60.00
-
-
-
-
-
- Shipping Charge :
-
-
-
- $50.00
-
-
-
-
-
- Estimated Tax :
-
-
-
- $00.00
-
-
-
-
-
- Total (USD) :
-
-
-
- $750.00
-
-
-
-
-
-
- >
- )
-}
-
-export default OrderSummary;
\ No newline at end of file
diff --git a/components/eCommerce/Cart/ShoppingCart.js b/components/eCommerce/Cart/ShoppingCart.js
deleted file mode 100644
index c02cbe1..0000000
--- a/components/eCommerce/Cart/ShoppingCart.js
+++ /dev/null
@@ -1,562 +0,0 @@
-import * as React from 'react';
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-import IconButton from '@mui/material/IconButton';
-import DeleteIcon from '@mui/icons-material/Delete';
-import TextareaAutosize from '@mui/base/TextareaAutosize';
-import Button from '@mui/material/Button';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import Tooltip from '@mui/material/Tooltip';
-import Link from 'next/link';
-
-const ShoppingCart = () => {
- return (
- <>
-
-
- Shopping Cart
-
-
-
-
-
-
-
- Product
-
-
-
- Price
-
-
-
- Quantity
-
-
-
- Total Amount
-
-
-
- Action
-
-
-
-
-
-
-
-
-
-
- Laptop Macos Pro
-
-
-
-
-
- $100.00
-
-
-
- 02
-
-
-
- $200
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Smart Camera XD6
-
-
-
-
-
- $200.00
-
-
-
- 01
-
-
-
- $200
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Pixi 8 Wireless Airphone
-
-
-
-
-
- $120.00
-
-
-
- 01
-
-
-
- $120
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Jebble Smart Watch
-
-
-
-
-
- $120.00
-
-
-
- 01
-
-
-
- $120
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Airpod
-
-
-
-
-
- $120.00
-
-
-
- 01
-
-
-
- $120
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Add a Note:
-
-
-
-
- }
- sx={{
- p: "10px 25px",
- mt: '10px',
- textTransform: 'capitalize',
- color: "#fff !important",
- }}
- >
- Checkout
-
-
-
-
-
- >
- )
-}
-
-export default ShoppingCart;
\ No newline at end of file
diff --git a/components/eCommerce/Checkout/BillingInformation.js b/components/eCommerce/Checkout/BillingInformation.js
deleted file mode 100644
index 6d56a4d..0000000
--- a/components/eCommerce/Checkout/BillingInformation.js
+++ /dev/null
@@ -1,334 +0,0 @@
-import * as React from "react";
-import { Box } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import { Typography } from "@mui/material";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-
-import dynamic from 'next/dynamic'
-const RichTextEditor = dynamic(() => import('@mantine/rte'), {
- ssr: false,
-})
-
-const BillingInformation = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- // Select dropdown
- const [countrySelect, setCountrySelect] = React.useState('');
- const handleChange = (event) => {
- setCountrySelect(event.target.value);
- };
-
- return (
- <>
-
-
-
- Billing Information
-
-
-
-
-
- First Name
-
-
-
-
-
-
-
- Last Name
-
-
-
-
-
-
-
- Email Address
-
-
-
-
-
-
-
- Phone
-
-
-
-
-
-
-
- Address
-
-
-
-
-
-
-
- Country
-
-
-
- Select
-
- USA
- Canada
- Australia
- UK
-
-
-
-
-
-
- Town/City
-
-
-
-
-
-
-
-
- State
-
-
-
-
-
-
-
- Zip Code
-
-
-
-
-
-
-
- Order Notes :
-
-
-
-
-
-
-
- Procced To Shipping
-
-
-
-
-
- >
- )
-}
-
-export default BillingInformation;
\ No newline at end of file
diff --git a/components/eCommerce/Checkout/ShoppingCart.js b/components/eCommerce/Checkout/ShoppingCart.js
deleted file mode 100644
index b6aaf00..0000000
--- a/components/eCommerce/Checkout/ShoppingCart.js
+++ /dev/null
@@ -1,440 +0,0 @@
-import * as React from "react";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-
-const ShoppingCart = () => {
- return (
- <>
-
-
- Shopping Cart
-
-
-
-
-
-
-
- Product
-
-
-
- Price
-
-
-
-
-
-
-
-
-
-
- Laptop Macos Pro
-
-
-
-
-
- $100.00
-
-
-
-
-
-
-
-
- Smart Camera XD6
-
-
-
-
-
- $200.00
-
-
-
-
-
-
-
-
- Pixi 8 Wireless Airphone
-
-
-
-
-
- $120.00
-
-
-
-
-
-
-
-
- Jebble Smart Watch
-
-
-
-
-
- $120.00
-
-
-
-
-
-
-
-
- Airpod
-
-
-
-
-
- $120.00
-
-
-
-
-
- Sub Total :
-
-
-
- $760.00
-
-
-
-
-
- Discount :
-
-
-
- $60.00
-
-
-
-
-
- Shipping Charge :
-
-
-
- $50.00
-
-
-
-
-
- Estimated Tax :
-
-
-
- $00.00
-
-
-
-
-
- Total (USD) :
-
-
-
- $750.00
-
-
-
-
-
-
- >
- );
-};
-
-export default ShoppingCart;
diff --git a/components/eCommerce/Customers/CustomersLists.js b/components/eCommerce/Customers/CustomersLists.js
deleted file mode 100644
index 8cdbef1..0000000
--- a/components/eCommerce/Customers/CustomersLists.js
+++ /dev/null
@@ -1,965 +0,0 @@
-import * as React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Grid from "@mui/material/Grid";
-import Tooltip from "@mui/material/Tooltip";
-import DeleteIcon from "@mui/icons-material/Delete";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-import Checkbox from '@mui/material/Checkbox';
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import CloseIcon from '@mui/icons-material/Close';
-
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-// Create new Modal
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
- '& .MuiDialogContent-root': {
- padding: theme.spacing(2),
- },
- '& .MuiDialogActions-root': {
- padding: theme.spacing(1),
- },
-}));
-
-function BootstrapDialogTitle(props) {
- const { children, onClose, ...other } = props;
-
- return (
-
- {children}
- {onClose ? (
- theme.palette.grey[500],
- }}
- >
-
-
- ) : null}
-
- );
-}
-
-BootstrapDialogTitle.propTypes = {
- children: PropTypes.node,
- onClose: PropTypes.func.isRequired,
-};
-// End Create new Modal
-
-function CustomersList(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-CustomersList.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(name, image, userName, email, phone, balance, orders, status, badgeClass, joiningDate, projects) {
- return {
- name,
- image,
- userName,
- email,
- phone,
- balance,
- orders,
- status,
- badgeClass,
- joiningDate,
- projects,
- };
-}
-
-const rows = [
- createData(
- "Evangelina Mcclain",
- "/images/user1.png",
- "@jstevenson5c",
- "jordansteve@gmail.com",
- "0018 5054 8877",
- "$3365.12",
- "165",
- "Active",
- "successBadge",
- "Jan 1, 2023",
- ),
- createData(
- "Candice Munoz",
- "/images/user2.png",
- "@candice3unoz",
- "candicemunoz@gmail.com",
- "0018 5054 7532",
- "$3550",
- "112",
- "Active",
- "successBadge",
- "Jan 2, 2023",
- ),
- createData(
- "Mike Mcclain",
- "/images/user3.png",
- "@mike4mcclain",
- "mikemcclain@gmail.com",
- "0018 3567 8422",
- "$3928",
- "240",
- "Deactivate",
- "dangerBadge",
- "Jan 3, 2023",
- ),
- createData(
- "Bernard Langley",
- "/images/user4.png",
- "@bernardlangley",
- "bernardlangley@gmail.com",
- "0018 9382 4820",
- "$4932",
- "350",
- "Active",
- "successBadge",
- "Jan 4, 2023",
- ),
- createData(
- "Kristie Hall",
- "/images/user5.png",
- "@kristie7hall",
- "kristiehall@gmail.com",
- "0018 4663 5732",
- "$4922",
- "384",
- "Active",
- "successBadge",
- "Jan 5, 2023",
- ),
- createData(
- "Bolton Obrien",
- "/images/user6.png",
- "@bolton4obrien",
- "boltonobrien@gmail.com",
- "0018 5743 5657",
- "$4663.12",
- "145",
- "Active",
- "successBadge",
- "Jan 6, 2023",
- ),
- createData(
- "Dee Alvarado",
- "/images/user7.png",
- "@dee3alvarado",
- "deealvarado@gmail.com",
- "0018 4532 6666",
- "$2343.12",
- "435",
- "Active",
- "successBadge",
- "Jan 7, 2023",
- ),
- createData(
- "Cervantes Kramer",
- "/images/user8.png",
- "@cervantes4kramer",
- "cervantes4kramer@gmail.com",
- "0018 54545 7878",
- "$345",
- "24",
- "Active",
- "successBadge",
- "Jan 8, 2023",
- ),
- createData(
- "Dejesus Michael",
- "/images/user9.png",
- "@dejesus1michael",
- "dejesusmichael@gmail.com",
- "0018 3552 6678",
- "$3365.12",
- "56",
- "Active",
- "successBadge",
- "Jan 9, 2023",
- ),
- createData(
- "Alissa Nelson",
- "/images/user10.png",
- "@alissa1nelson",
- "alissa1nelson@gmail.com",
- "0018 3354 6822",
- "$3522.12",
- "165",
- "Active",
- "successBadge",
- "Jan 10, 2023",
- ),
- createData(
- "Milton",
- "/images/user11.png",
- "@milton",
- "milton@gmail.com",
- "0018 366 2232",
- "$3434",
- "222",
- "Active",
- "successBadge",
- "Jan 11, 2023",
- ),
- createData(
- "Claude",
- "/images/user12.png",
- "@claude",
- "claude@gmail.com",
- "0018 4614 23211",
- "$4554.12",
- "673",
- "Active",
- "successBadge",
- "Jan 12, 2023",
- ),
- createData(
- "Joshua",
- "/images/user13.png",
- "@joshua",
- "joshua@gmail.com",
- "0018 3354 2532",
- "$2434.12",
- "463",
- "Active",
- "successBadge",
- "Jan 13, 2023",
- ),
- createData(
- "Harvey",
- "/images/user14.png",
- "@harvey",
- "harvey@gmail.com",
- "0018 3331 2224",
- "$453.12",
- "445",
- "Active",
- "successBadge",
- "Jan 14, 2023",
- ),
- createData(
- "Antonio",
- "/images/user15.png",
- "@antonio",
- "antonio@gmail.com",
- "0018 3354 6822",
- "$3522.12",
- "165",
- "Active",
- "successBadge",
- "Jan 15, 2023",
- ),
- createData(
- "Julian",
- "/images/user16.png",
- "@julian",
- "julian@gmail.com",
- "0018 4322 1231",
- "$455.12",
- "165",
- "Active",
- "successBadge",
- "Jan 16, 2023",
- ),
- createData(
- "Harold",
- "/images/user17.png",
- "@harold",
- "harold@gmail.com",
- "0018 455 3323",
- "$3422.12",
- "564",
- "Active",
- "successBadge",
- "Jan 17, 2023",
- ),
- createData(
- "Kingston",
- "/images/user18.png",
- "@kingston",
- "kingston@info.com",
- "0018 3453 4325",
- "$442.12",
- "6776",
- "Active",
- "successBadge",
- "Jan 18, 2023",
- ),
-].sort((a, b) => (a.name < b.name ? -1 : 1));
-
-export default function CustomersLists() {
- // Table
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- // Create new modal
- const [open, setOpen] = React.useState(false);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
- const handleClose = () => {
- setOpen(false);
- };
-
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
- // End Create new Modal
-
- return (
- <>
-
-
-
- Customers Lists
-
-
-
- {" "}
- Create New
-
-
-
-
-
-
-
-
- Name
-
-
-
- Email
-
-
-
- Phone
-
-
-
- Balance
-
-
-
- Orders
-
-
-
- Status
-
-
-
- Joining Date
-
-
-
- Action
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
-
-
-
-
- {row.name}
-
-
-
- {row.userName}
-
-
-
-
-
-
- {row.email}
-
-
-
- {row.phone}
-
-
-
- {row.balance}
-
-
-
- {row.orders}
-
-
-
- {row.status}
-
-
-
- {row.joiningDate}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- {/* Create new modal */}
-
-
-
-
- Create New
-
-
-
-
-
-
-
-
-
-
-
-
- Image
-
-
-
-
-
-
- Name
-
-
-
-
-
-
- User Name
-
-
-
-
-
-
- Email
-
-
-
-
-
-
- Phone Number
-
-
-
-
-
-
- Balance
-
-
-
-
-
-
- {" "}
- Create New
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/eCommerce/OrderDetails/TrackOrder/OrderTable.js b/components/eCommerce/OrderDetails/TrackOrder/OrderTable.js
deleted file mode 100644
index a1ac749..0000000
--- a/components/eCommerce/OrderDetails/TrackOrder/OrderTable.js
+++ /dev/null
@@ -1,612 +0,0 @@
-import * as React from 'react';
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Button from "@mui/material/Button";
-import AddIcon from "@mui/icons-material/Add";
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-
-const OrderTable = () => {
- return (
- <>
-
-
-
- Order #VL2667
-
-
-
- {" "}
- Invoice
-
-
-
-
-
-
-
-
- Product
-
-
-
- Price
-
-
-
- Quantity
-
-
-
- Total Amount
-
-
-
-
-
-
-
-
-
-
- Laptop Macos Pro
-
-
-
-
-
- $100.00
-
-
-
- 02
-
-
-
- $200
-
-
-
-
-
-
-
-
- Smart Camera XD6
-
-
-
-
-
- $200.00
-
-
-
- 01
-
-
-
- $200
-
-
-
-
-
-
-
-
- Pixi 8 Wireless Airphone
-
-
-
-
-
- $120.00
-
-
-
- 01
-
-
-
- $120
-
-
-
-
-
-
-
-
- Jebble Smart Watch
-
-
-
-
-
- $120.00
-
-
-
- 01
-
-
-
- $120
-
-
-
-
-
-
-
-
- Airpod
-
-
-
-
-
- $120.00
-
-
-
- 01
-
-
-
- $120
-
-
-
- {/* For Total Amount */}
-
-
- Sub Total :
-
-
-
- $760.00
-
-
-
-
-
- Discount :
-
-
-
- $60.00
-
-
-
-
-
- Shipping Charge :
-
-
-
- $50.00
-
-
-
-
-
- Estimated Tax :
-
-
-
- $00.00
-
-
-
-
-
- Total (USD) :
-
-
-
- $750.00
-
-
-
-
-
-
- >
- )
-}
-
-export default OrderTable;
\ No newline at end of file
diff --git a/components/eCommerce/OrderDetails/TrackOrder/TrackOrder.module.css b/components/eCommerce/OrderDetails/TrackOrder/TrackOrder.module.css
deleted file mode 100644
index 79b79ac..0000000
--- a/components/eCommerce/OrderDetails/TrackOrder/TrackOrder.module.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.timelineList .tList {
- position: relative;
- padding-left: 20px;
- margin-bottom: 16px;
- padding-bottom: 16px;
- border-bottom: 1px solid #F7FAFF;
-}
-.timelineList .tList:last-child {
- border: none;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-.timelineList .tList::before {
- content: '';
- background: linear-gradient(149.1deg, #99B8F3 14.61%, #177FCB 130.18%);
- box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
- width: 10px;
- height: 10px;
- border-radius: 100%;
- position: absolute;
- top: 4px;
- left: 0;
-}
-.timelineList .tList::after {
- content: '';
- background: #F7FAFF;
- width: 3px;
- height: 75px;
- border-radius: 5px;
- position: absolute;
- top: 18px;
- left: 3px;
-}
-.timelineList .tList h4 {
- font-weight: 500;
- font-size: 14px;
- margin: 0 0 10px;
-}
-.timelineList .tList .date {
- color: #A9A9C8;
- font-size: 12px;
- margin: 0;
-}
-.timelineList .tList .text {
- margin: 10px 0 0;
- font-size: 13px;
-}
-
-
-/* For RTL Style */
-[dir="rtl"] .timelineList .tList {
- padding-left: 0;
- padding-right: 20px;
-}
-[dir="rtl"] .timelineList .tList::before {
- left: auto;
- right: 0;
-}
-[dir="rtl"] .timelineList .tList::after {
- left: auto;
- right: 3px;
-}
-
-/* For dark mode */
-[class="dark"] .timelineList .tList {
- border-bottom: 1px solid var(--borderColor);
-}
-[class="dark"] .timelineList .tList:last-child {
- border-bottom: none;
-}
-.timelineList .tList::after {
- background: var(--borderColor);
-}
\ No newline at end of file
diff --git a/components/eCommerce/OrderDetails/TrackOrder/index.js b/components/eCommerce/OrderDetails/TrackOrder/index.js
deleted file mode 100644
index a8ad578..0000000
--- a/components/eCommerce/OrderDetails/TrackOrder/index.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import styles from "@/components/eCommerce/OrderDetails/TrackOrder/TrackOrder.module.css";
-
-const ActivityTimelineData = [
- {
- id: "1",
- title: "Order Placed",
- date: "April 21 2019 07:22 AM",
- text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered.",
- },
- {
- id: "2",
- title: "Packed",
- date: "April 22 2019 12:16 AM",
- text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered.",
- },
- {
- id: "3",
- title: "Shipped",
- date: "April 22 2019 05:16 PM",
- text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered.",
- },
- {
- id: "4",
- title: "Delivered",
- date: "Estimated Delivery Within 3 Days",
- text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered.",
- },
-];
-
-const TrackOrder = () => {
- return (
- <>
-
-
- Track Order
-
-
-
-
-
- Order ID:
-
-
-
- #VL2667
-
-
-
-
-
- Tracking ID:
-
-
-
- 1004152012012
-
-
-
-
-
- {ActivityTimelineData.slice(0, 4).map((timeline) => (
-
-
{timeline.title}
-
{timeline.date}
-
- {timeline.text}
-
-
- ))}
-
-
- >
- );
-};
-
-export default TrackOrder;
diff --git a/components/eCommerce/OrdersList/Features.js b/components/eCommerce/OrdersList/Features.js
deleted file mode 100644
index eb0090c..0000000
--- a/components/eCommerce/OrdersList/Features.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-
-const featuresData = [
- {
- id: 1,
- iconName: "ri-money-dollar-circle-line",
- progress: "1.3%",
- title: "Up from past week",
- lists: [
- {
- id: 1,
- title: "All Orders",
- number: "18k",
- },
- {
- id: 2,
- title: "Pending Orders",
- number: "5k",
- },
- {
- id: 3,
- title: "Complited Orders",
- number: "13k",
- }
- ]
- },
- {
- id: 2,
- iconName: "ri-bar-chart-line",
- progress: "50%",
- title: "Up from past week",
- lists: [
- {
- id: 1,
- title: "Canceled",
- number: "2k",
- },
- {
- id: 2,
- title: "Orders Returned",
- number: "3k",
- },
- {
- id: 3,
- title: "Damaged",
- number: "1k",
- }
- ]
- },
- {
- id: 3,
- iconName: "ri-star-fill",
- progress: "70%",
- title: "Up from past week",
- lists: [
- {
- id: 1,
- title: "Abandoned Cart",
- number: "5k",
- },
- {
- id: 2,
- title: "Customers",
- number: "10k",
- },
- {
- id: 3,
- title: "In Progress",
- number: "16k",
- }
- ]
- },
-]
-
-const Features = () => {
- return (
- <>
-
- {featuresData.map((feature) => (
-
-
-
-
-
-
-
-
- {feature.progress} {feature.title}
-
-
-
-
- {feature.lists.map((list) => (
-
-
- {list.title}
-
-
-
- {list.number}
-
-
- ))}
-
-
-
- ))}
-
- >
- )
-}
-
-export default Features;
\ No newline at end of file
diff --git a/components/eCommerce/OrdersList/OrdersLists.js b/components/eCommerce/OrdersList/OrdersLists.js
deleted file mode 100644
index df76bf2..0000000
--- a/components/eCommerce/OrdersList/OrdersLists.js
+++ /dev/null
@@ -1,679 +0,0 @@
-import * as React from "react";
-import { Box } from "@mui/material";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-
-function OrdersList(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-OrdersList.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(
- orderID,
- productImg,
- productTitle,
- customer,
- price,
- vendor,
- date,
- status,
- badgeClass,
- rating
-) {
- return {
- orderID,
- productImg,
- productTitle,
- customer,
- price,
- vendor,
- date,
- status,
- badgeClass,
- rating,
- };
-}
-
-const rows = [
- createData(
- "#SK258",
- "/images/product1.png",
- "Laptop Macos Pro",
- "Colin Firth",
- "$289.50",
- "Boetic Fashion",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK259",
- "/images/product2.png",
- "Smart Camera XD6",
- "Wade Dave",
- "$189.50",
- "Aronic Conver",
- "2021-12-19",
- "Out of Stock",
- "dangerBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK260",
- "/images/product3.png",
- "Pixi 8 Wireless Airphone",
- "Seth Riley",
- "$250.50",
- "Lotu Arnich",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK261",
- "/images/product4.png",
- "Jebble Smart Watch",
- "Gilbert Dan",
- "$289.50",
- "Zoetic Fashion",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK262",
- "/images/product5.png",
- "Admas Airpod x-Zon",
- "Joshua Glen",
- "$289.50",
- "Airpod",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK263",
- "/images/product6.png",
- "Smart Satch F8 Pro",
- "Lewis Milton",
- "$289.50",
- "Smart Satch",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK264",
- "/images/product7.png",
- "Nord Fold ZL",
- "Liam Ethan",
- "$289.50",
- "Nord",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK265",
- "/images/product8.png",
- "Wall Clock Cimbina",
- "Ramon Miles",
- "$289.50",
- "Clock",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK266",
- "/images/product9.png",
- "Galaxo T6 Munsun",
- "Brian Roberto",
- "$289.50",
- "Smart Phone",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK267",
- "/images/product1.png",
- "Laptop Macos Pro",
- "Colin Firth",
- "$289.50",
- "Boetic Fashion",
- "2021-12-19",
- "Pending",
- "primaryBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK268",
- "/images/product2.png",
- "Smart Camera XD6",
- "Wade Dave",
- "$189.50",
- "Aronic Conver",
- "2021-12-19",
- "Out of Stock",
- "dangerBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK269",
- "/images/product3.png",
- "Pixi 8 Wireless Airphone",
- "Seth Riley",
- "$250.50",
- "Lotu Arnich",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK270",
- "/images/product4.png",
- "Jebble Smart Watch",
- "Gilbert Dan",
- "$289.50",
- "Zoetic Fashion",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK271",
- "/images/product5.png",
- "Admas Airpod x-Zon",
- "Joshua Glen",
- "$289.50",
- "Airpod",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK272",
- "/images/product6.png",
- "Smart Satch F8 Pro",
- "Lewis Milton",
- "$289.50",
- "Smart Satch",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK273",
- "/images/product7.png",
- "Nord Fold ZL",
- "Liam Ethan",
- "$289.50",
- "Nord",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK274",
- "/images/product8.png",
- "Wall Clock Cimbina",
- "Ramon Miles",
- "$289.50",
- "Clock",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
- createData(
- "#SK275",
- "/images/product9.png",
- "Galaxo T6 Munsun",
- "Brian Roberto",
- "$289.50",
- "Smart Phone",
- "2021-12-19",
- "Delivered",
- "successBadge",
- "5.0 (61 votes)"
- ),
-].sort((a, b) => (a.orderID < b.orderID ? -1 : 1));
-
-export default function OrdersLists() {
- // Select
- const [select, setSelect] = React.useState("");
- const handleChange = (event) => {
- setSelect(event.target.value);
- };
-
- // Table
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- return (
- <>
-
-
-
- Recent Orders
-
-
-
-
-
- Select
-
-
-
- Today
-
-
- Last 7 Days
-
-
- Last Month
-
- Last 12 Months
-
- All Time
-
-
-
-
-
-
-
-
-
-
-
- Order ID
-
-
-
- Product
-
-
-
- Customer
-
-
-
- Price
-
-
-
- Vendor
-
-
-
- Date
-
-
-
- Status
-
-
-
- Rating
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
- {row.orderID}
-
-
-
-
-
-
- {row.productTitle}
-
-
-
-
-
- {row.customer}
-
-
-
- {row.price}
-
-
-
- {row.vendor}
-
-
-
- {row.date}
-
-
-
- {row.status}
-
-
-
- {row.rating}
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/components/eCommerce/ProductDetails/ProductDescription.js b/components/eCommerce/ProductDetails/ProductDescription.js
deleted file mode 100644
index c63b399..0000000
--- a/components/eCommerce/ProductDetails/ProductDescription.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-const ProductDescription = () => {
- return (
- <>
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-
- Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-
-
-
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
-
-
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
-
- >
- )
-}
-
-export default ProductDescription;
\ No newline at end of file
diff --git a/components/eCommerce/ProductDetails/ProductDetailsContent.js b/components/eCommerce/ProductDetails/ProductDetailsContent.js
deleted file mode 100644
index ed62096..0000000
--- a/components/eCommerce/ProductDetails/ProductDetailsContent.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-import StarIcon from "@mui/icons-material/Star";
-import Button from "@mui/material/Button";
-import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation } from "swiper";
-import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
-import styles from "@/components/eCommerce/ProductDetails/ProductDetailsContent.module.css";
-import ProductDescription from "./ProductDescription";
-import ProductReviews from "./ProductReviews";
-
-const ProductDetailsContent = () => {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Black T-Shirt Sleeve
-
-
-
-
-
-
-
-
-
-
- 5.0 (61 votes)
-
-
-
-
- Price:{" "}
-
- $200
- {" "}
- $150
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
- enim adlino minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat.
-
-
-
-
- Category : T-Shirt
-
-
- Availability : In Stock 10 Items
-
-
-
-
-
- Share :
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- sx={{
- p: "10px 25px",
- color: "#fff !important"
- }}
- >
- Add To Cart
-
-
-
-
-
-
-
-
- Description
- Reviews (3)
-
-
-
- {/* ProductDescription */}
-
-
-
-
- {/* ProductReviews */}
-
-
-
-
-
- >
- );
-};
-
-export default ProductDetailsContent;
diff --git a/components/eCommerce/ProductDetails/ProductDetailsContent.module.css b/components/eCommerce/ProductDetails/ProductDetailsContent.module.css
deleted file mode 100644
index 4103ddf..0000000
--- a/components/eCommerce/ProductDetails/ProductDetailsContent.module.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.metaTagList {
- list-style-type: none;
- margin: 0 0 15px;
- padding: 0;
-}
-.metaTagList li {
- margin-bottom: 10px;
-}
-.metaTagList li:last-child {
- margin-bottom: 0;
-}
-.metaTagList li span {
- font-weight: 500;
- width: 100px;
- display: inline-block;
-}
-
-.socialLink {
- list-style-type: none;
- margin: 0 0 25px;
- padding: 0;
-}
-.socialLink li {
- display: inline-block;
- margin-right: 10px;
-}
-.socialLink li:last-child {
- margin-right: 0;
-}
-.socialLink li span {
- font-weight: 500;
-}
-.socialLink li a {
- text-decoration: none;
- background: #EDEFF5;
- border-radius: 10px;
- color: var(--primaryColor);
- display: inline-block;
- width: 33px;
- height: 33px;
- line-height: 33px;
- border-radius: 100%;
- text-align: center;
-}
-.socialLink li a:hover {
- background-color: var(--primaryColor);
- color: #fff;
-}
-
-/* For RTL Style */
-[dir="rtl"] .socialLink li {
- margin-right: 0;
- margin-left: 10px;
-}
-[dir="rtl"] .socialLink li:last-child {
- margin-left: 0;
-}
\ No newline at end of file
diff --git a/components/eCommerce/ProductDetails/ProductReviews.js b/components/eCommerce/ProductDetails/ProductReviews.js
deleted file mode 100644
index cb027db..0000000
--- a/components/eCommerce/ProductDetails/ProductReviews.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-
-const ProductReviews = () => {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit.
-
-
-
-
-
-
Alvarado Turner
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit.
-
-
-
-
-
-
Riley Dave
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit.
-
-
-
-
-
-
Ivan Dan
-
-
-
-
- >
- )
-}
-
-export default ProductReviews;
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 0a5231a..ce5f898 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,22 +1,13 @@
-
version: '3'
services:
float-fleet:
- # image: registry.chiefsoft.net/wrenchboard-users-wrench:latest
build:
context: .
dockerfile: docker/Dockerfile
restart: unless-stopped
ports:
- 5504:3000
- # - 3800:3011
- # stdin_open: true
- working_dir: /usr/src/app
- volumes:
- - ./:/usr/src/app
- - /usr/src/app/node_modules
- - ./src/:/usr/src/app/src
- - ./build/:/usr/src/app/build
+ # - 3800:3011
extra_hosts:
- backend.wrenchboard.api.live:10.10.33.15
- backend.wrenchboard.api.test:10.10.33.15
@@ -26,9 +17,9 @@ services:
- apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
environment:
- CHOKIDAR_USEPOLLING=true
- # volumes:
- # - ./:/app
- # - /app/node_modules
+ # volumes:
+ # - ./:/app
+ # - /app/node_modules
tty: true
stdin_open: true
# working_dir: /app
diff --git a/docker/Dockerfile b/docker/Dockerfile
index b869482..3eac1fd 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -1,121 +1,23 @@
-# pull the base image
-# FROM node:alpine
-
-FROM alpine:3.15
-
-ENV NODE_VERSION 14.19.0
-
-RUN addgroup -g 1000 node \
- && adduser -u 1000 -G node -s /bin/sh -D node \
- && apk add --no-cache \
- libstdc++ \
- && apk add --no-cache --virtual .build-deps \
- curl \
- && ARCH= && alpineArch="$(apk --print-arch)" \
- && case "${alpineArch##*-}" in \
- x86_64) \
- ARCH='x64' \
- CHECKSUM="8d5e638d88b62de2f147dee812a5d74e4860a20468eb7ff32c41a02b58e2aebf" \
- ;; \
- *) ;; \
- esac \
- && if [ -n "${CHECKSUM}" ]; then \
- set -eu; \
- curl -fsSLO --compressed "https://unofficial-builds.nodejs.org/download/release/v$NODE_VERSION/node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz"; \
- echo "$CHECKSUM node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" | sha256sum -c - \
- && tar -xJf "node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" -C /usr/local --strip-components=1 --no-same-owner \
- && ln -s /usr/local/bin/node /usr/local/bin/nodejs; \
- else \
- echo "Building from source" \
- # backup build
- && apk add --no-cache --virtual .build-deps-full \
- binutils-gold \
- g++ \
- gcc \
- gnupg \
- libgcc \
- linux-headers \
- make \
- python3 \
- # gpg keys listed at https://github.com/nodejs/node#release-keys
- && for key in \
- 4ED778F539E3634C779C87C6D7062848A1AB005C \
- 94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
- 74F12602B6F1C4E913FAA37AD3A89613643B6201 \
- 71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
- 8FCCA13FEF1D0C2E91008E09770F7A9A5AE15600 \
- C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
- C82FA3AE1CBEDC6BE46B9360C43CEC45C17AB93C \
- DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
- A48C2BEE680E841632CD4E44F07496B3EB3C1762 \
- 108F52B48DB57BB0CC439B2997B01419BD92F80A \
- B9E2F5981AA6E0CD28160D9FF13993A75599653C \
- ; do \
- gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
- gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
- done \
- && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION.tar.xz" \
- && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/SHASUMS256.txt.asc" \
- && gpg --batch --decrypt --output SHASUMS256.txt SHASUMS256.txt.asc \
- && grep " node-v$NODE_VERSION.tar.xz\$" SHASUMS256.txt | sha256sum -c - \
- && tar -xf "node-v$NODE_VERSION.tar.xz" \
- && cd "node-v$NODE_VERSION" \
- && ./configure \
- && make -j$(getconf _NPROCESSORS_ONLN) V= \
- && make install \
- && apk del .build-deps-full \
- && cd .. \
- && rm -Rf "node-v$NODE_VERSION" \
- && rm "node-v$NODE_VERSION.tar.xz" SHASUMS256.txt.asc SHASUMS256.txt; \
- fi \
- && rm -f "node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" \
- && apk del .build-deps \
- # smoke tests
- && node --version \
- && npm --version
-
-ENV YARN_VERSION 1.22.17
-
-RUN apk add --no-cache --virtual .build-deps-yarn curl gnupg tar \
- && for key in \
- 6A010C5166006599AA17F08146C2130DFD2497F5 \
- ; do \
- gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
- gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
- done \
- && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
- && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz.asc" \
- && gpg --batch --verify yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
- && mkdir -p /opt \
- && tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
- && ln -s /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
- && ln -s /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
- && rm yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
- && apk del .build-deps-yarn \
- # smoke test
- && yarn --version
+# pull official base image
+FROM node:18.12.1-alpine
# set working directory
-# WORKDIR /app
-WORKDIR /usr/src/app
+WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
-# ENV PATH /app/node_modules/.bin:$PATH
-ENV PATH /usr/src/app/node_modules/.bin:$PATH
+ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
-RUN npm install
#COPY package-lock.json ./
-#RUN npm install --silent
+RUN npm install --silent
# RUN npm install react-scripts@3.4.1 -g --silent
# add app
COPY . ./
-# RUN npm run build
# start app
-CMD ["npm", "run","dev"]
-
+CMD ["npm","run", "start"]
+
# CMD ["yarn", "start"]
diff --git a/jsconfig.json b/jsconfig.json
deleted file mode 100644
index ae165f5..0000000
--- a/jsconfig.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "compilerOptions": {
- "baseUrl": ".",
- "paths": {
- "@/components/*": ["components/*"],
- "@/public/*": ["public/*"],
- "@/utils/*": ["utils/*"],
- "@/styles/*": ["styles/*"]
- }
- }
-}
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
deleted file mode 100644
index e9643e8..0000000
--- a/next.config.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
- reactStrictMode: true,
- trailingSlash: true,
- eslint: {
- // Warning: This allows production builds to successfully complete even if
- // your project has ESLint errors.
- ignoreDuringBuilds: true,
- },
- images: {
- unoptimized: true
- },
- optimizeFonts: false,
- i18n: {
- locales: ['en', 'ar'],
- defaultLocale: 'en',
- },
- // images: {
- // loader: "akamai",
- // path:
- // process.env.NODE_ENV === "production"
- // ? "https://admash-admin.envytheme.com/"
- // : "http://localhost:3000",
- // },
-}
-
-module.exports = nextConfig
diff --git a/package.json b/package.json
index 4bb99f3..316c064 100644
--- a/package.json
+++ b/package.json
@@ -1,43 +1,96 @@
{
- "name": "admash",
- "version": "1.3.0",
+ "name": "demo1",
+ "version": "8.1.5",
"private": true,
- "scripts": {
- "dev": "next dev",
- "build": "next build",
- "start": "next start",
- "lint": "next lint"
- },
+ "homepage": "/metronic8/react/demo1",
"dependencies": {
- "@emotion/react": "^11.10.5",
- "@emotion/styled": "^11.10.5",
- "@fullcalendar/core": "^6.0.2",
- "@fullcalendar/daygrid": "^6.0.2",
- "@fullcalendar/react": "^6.0.2",
- "@mantine/rte": "^5.10.0",
- "@mui/icons-material": "^5.10.15",
- "@mui/lab": "^5.0.0-alpha.115",
- "@mui/material": "^5.11.4",
- "@mui/x-data-grid": "^5.17.17",
- "@mui/x-date-pickers": "^5.0.12",
- "apexcharts": "^3.36.3",
- "dayjs": "^1.11.7",
- "eslint": "8.28.0",
- "eslint-config-next": "13.0.5",
- "next": "13.0.5",
- "notistack": "^2.0.8",
- "react": "^18.2.0",
- "react-apexcharts": "^1.4.0",
- "react-chartjs-2": "^5.0.1",
- "react-dom": "^18.2.0",
- "react-dropzone": "^14.2.3",
- "react-router-dom": "^6.4.3",
- "react-simple-maps": "^3.0.0",
- "react-tabs": "^6.0.0",
- "recharts": "^2.2.0",
- "swiper": "^8.4.5"
+ "@formatjs/intl-pluralrules": "4.3.3",
+ "@formatjs/intl-relativetimeformat": "10.0.1",
+ "@fortawesome/fontawesome-free": "6.1.1",
+ "@popperjs/core": "2.11.6",
+ "animate.css": "4.1.1",
+ "apexcharts": "3.35.0",
+ "axios": "0.26.1",
+ "bootstrap": "5.2.2",
+ "bootstrap-icons": "^1.5.0",
+ "chart.js": "3.7.1",
+ "clsx": "1.1.1",
+ "formik": "2.2.9",
+ "line-awesome": "1.3.0",
+ "nouislider": "15.5.1",
+ "prism-react-renderer": "1.3.1",
+ "prism-themes": "1.9.0",
+ "prismjs": "1.28.0",
+ "qs": "6.10.3",
+ "react": "18.0.0",
+ "react-dom": "18.0.0",
+ "react-scripts": "5.0.1",
+ "react-inlinesvg": "3.0.0",
+ "react-apexcharts": "1.4.0",
+ "react-bootstrap": "2.5.0-beta.1",
+ "react-copy-to-clipboard": "5.1.0",
+ "react-intl": "5.25.0",
+ "react-query": "3.38.0",
+ "react-router-dom": "6.3.0",
+ "react-table": "^7.7.0",
+ "react-topbar-progress-indicator": "4.1.1",
+ "socicon": "3.0.5",
+ "sass": "1.50.1",
+ "yup": "0.32.11"
},
"devDependencies": {
- "sass": "^1.57.1"
- }
-}
+ "@testing-library/jest-dom": "5.16.4",
+ "@testing-library/react": "13.1.1",
+ "@testing-library/user-event": "13.5.0",
+ "@types/bootstrap": "5.1.10",
+ "@types/chart.js": "2.9.37",
+ "@types/jest": "27.4.1",
+ "@types/node": "16.11.27",
+ "@types/react": "18.0.6",
+ "@types/react-dom": "18.0.2",
+ "@types/react-table": "^7.7.9",
+ "@types/prismjs": "1.26.0",
+ "@types/qs": "6.9.7",
+ "@types/react-copy-to-clipboard": "5.0.2",
+ "@types/sass-loader": "8.0.3",
+ "css-loader": "6.7.1",
+ "del": "6.0.0",
+ "mini-css-extract-plugin": "2.6.1",
+ "prettier": "2.6.2",
+ "rtlcss-webpack-plugin": "4.0.7",
+ "sass-loader": "13.0.2",
+ "typescript": "4.6.3",
+ "webpack": "5.74.0",
+ "webpack-cli": "4.10.0"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject",
+ "lint": "prettier --check .",
+ "format": "prettier --write .",
+ "rtl": "webpack --config=rtl.config.js"
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app",
+ "react-app/jest"
+ ]
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "eslintIgnore": [
+ "dist/*"
+ ]
+}
\ No newline at end of file
diff --git a/pages/404.js b/pages/404.js
deleted file mode 100644
index 1098e4b..0000000
--- a/pages/404.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Link from 'next/link';
-import Button from "@mui/material/Button";
-
-export default function ErrorPage() {
- return (
- <>
-
-
-
-
- Oops!! The page you are looking for doesn't exist!
-
-
-
- The page you are looking for might have been removed had its name changed or is temporarily unavailable.
-
-
-
-
- Back To Home
-
-
-
- >
- );
-}
diff --git a/pages/_app.js b/pages/_app.js
deleted file mode 100644
index 7c6ae63..0000000
--- a/pages/_app.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import '../styles/remixicon.css'
-import 'react-tabs/style/react-tabs.css';
-import "swiper/css";
-import "swiper/css/bundle";
-
-// Chat Styles
-import '../styles/chat.css'
-// Globals Styles
-import '../styles/globals.css'
-// Rtl Styles
-import '../styles/rtl.css'
-// Dark Mode Styles
-import '../styles/dark.css'
-// Left Sidebar Dark Mode Styles
-import '../styles/leftSidebarDark.css'
-// Theme Styles
-import theme from '../styles/theme'
-
-import { ThemeProvider, CssBaseline } from "@mui/material";
-import Layout from "@/components/_App/Layout";
-
-function MyApp({ Component, pageProps }) {
- return (
- <>
-
-
-
-
-
-
- >
- );
-}
-
-export default MyApp
diff --git a/pages/_document.js b/pages/_document.js
deleted file mode 100644
index 0473ec7..0000000
--- a/pages/_document.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
-
-class MyDocument extends Document {
- render() {
- const { locale } = this.props.__NEXT_DATA__;
- const dir = locale === "ar" ? "rtl" : "ltr";
- return (
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-export default MyDocument;
diff --git a/pages/analytics.js b/pages/analytics.js
deleted file mode 100644
index 147c627..0000000
--- a/pages/analytics.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import Features from "@/components/Dashboard/Analytics/Features";
-import Profile from "@/components/Dashboard/Analytics/Profile";
-import AudienceOverview from "@/components/Dashboard/Analytics/AudienceOverview";
-import VisitsByDayAndNetIncome from "@/components/Dashboard/Analytics/VisitsByDayAndNetIncome";
-import SalesAnalytics from "@/components/Dashboard/Analytics/SalesAnalytics";
-import TotalRevenue from "@/components/Dashboard/Analytics/TotalRevenue";
-import ActivityTimeline from "@/components/Dashboard/Analytics/ActivityTimeline";
-import RevenueReport from "@/components/Dashboard/Analytics/RevenueReport";
-import SessionsByCountries from "@/components/Dashboard/Analytics/SessionsByCountries";
-import TotalTransactions from "@/components/Dashboard/Analytics/TotalTransactions";
-import BrowserUsedAndTrafficReports from "@/components/Dashboard/Analytics/BrowserUsedAndTrafficReports";
-import Terminals from "@/components/Dashboard/Analytics/Terminals";
-import NewReturning from "@/components/Dashboard/Analytics/NewReturning";
-import Gender from "@/components/Dashboard/Analytics/Gender";
-import VisitorsAge from "@/components/Dashboard/Analytics/VisitorsAge";
-import SessionsDevice from "@/components/Dashboard/Analytics/SessionsDevice";
-
-export default function Analytics() {
- return (
- <>
- {/* Page title */}
-
-
Analytics
-
-
- Dashboard
-
-
- Analytics
-
-
-
-
-
-
- {/* Profile */}
-
-
- {/* VisitsByDayAndNetIncome */}
-
-
-
-
- {/* Features */}
-
-
- {/* AudienceOverview */}
-
-
-
-
-
-
-
-
- {/* SalesAnalytics */}
-
-
- {/* RevenueRepor */}
-
-
-
-
- {/* TotalRevenue */}
-
-
- {/* ActivityTimelin */}
-
-
-
-
-
-
- {/* SessionsByCountries */}
-
-
- {/* TotalTransactions */}
-
-
-
-
-
-
- {/* BrowserUsedAndTrafficReports */}
-
-
-
-
- {/* Terminals */}
-
-
-
-
-
-
- {/* NewReturning */}
-
-
-
-
- {/* Gender */}
-
-
-
-
- {/* VisitorsAge */}
-
-
-
-
- {/* SessionsDevice */}
-
-
-
- >
- );
-}
diff --git a/pages/analytics/customers.js b/pages/analytics/customers.js
deleted file mode 100644
index d4360e8..0000000
--- a/pages/analytics/customers.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import AudienceOverview from '@/components/Dashboard/Analytics/AudienceOverview';
-import VisitsByDay from "@/components/Analytics/Customers/VisitsByDay";
-import NetIncome from "@/components/Analytics/Customers/NetIncome";
-import NewSessions from "@/components/Analytics/Customers/NewSessions";
-import CustomersDetails from "@/components/Analytics/Customers/CustomersDetails";
-
-export default function Customers() {
- return (
- <>
- {/* Page title */}
-
-
Customers
-
-
- Dashboard
-
- Customers
-
-
-
- {/* AudienceOverview */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* CustomersDetails */}
-
- >
- );
-}
diff --git a/pages/analytics/reports.js b/pages/analytics/reports.js
deleted file mode 100644
index d6dff08..0000000
--- a/pages/analytics/reports.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import RevenueReport from "@/components/Dashboard/Analytics/RevenueReport";
-import AvarageReport from "@/components/Analytics/Reports/AvarageReport";
-import SessionsByCountries from "@/components/Dashboard/Analytics/SessionsByCountries";
-import BrowserUsedAndTrafficReports from "@/components/Analytics/Reports/BrowserUsedAndTrafficReports";
-
-export default function Reports() {
- return (
- <>
- {/* Page title */}
-
-
Reports
-
-
- Dashboard
-
- Reports
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/pages/apps/calendar.js b/pages/apps/calendar.js
deleted file mode 100644
index 60e6ad9..0000000
--- a/pages/apps/calendar.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import React from "react";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import FullCalendar from "@fullcalendar/react";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import events from "@/components/Apps/Calendar/Events";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import IconButton from "@mui/material/IconButton";
-import Grid from "@mui/material/Grid";
-import Backdrop from "@mui/material/Backdrop";
-import Button from "@mui/material/Button";
-import Fade from "@mui/material/Fade";
-import Modal from "@mui/material/Modal";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-import dayjs from "dayjs";
-import Stack from "@mui/material/Stack";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
-
-// Add event modal style
-const style = {
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- maxWidth: 500,
- width: '100%',
- bgcolor: "background.paper",
- boxShadow: 24,
- borderRadius: "8px",
-};
-
-const Calendar = () => {
- // Add event modal
- const [open, setOpen] = React.useState(false);
- const handleOpen = () => setOpen(true);
- const handleClose = () => setOpen(false);
-
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- // Date & Time ickers
- const [value, setValue] = React.useState(dayjs("2023-01-01T21:11:54"));
-
- const handleChange = (newValue) => {
- setValue(newValue);
- };
-
- return (
- <>
- {/* Page title */}
-
-
Calendar
-
-
- Dashboard
-
- Calendar
-
-
-
-
-
-
- Calendar
-
-
-
- {" "}
- Add Event
-
-
-
-
-
-
- {/* Add event modal */}
-
-
-
-
-
- Add New Event
-
-
-
-
-
-
-
-
-
-
-
-
- Event Name
-
-
-
-
-
-
-
- Date & Time
-
-
-
-
- }
- />
-
-
-
-
-
-
- {" "}
- Save
-
-
-
-
-
-
-
-
- >
- );
-};
-
-export default Calendar;
diff --git a/pages/apps/chat/index.js b/pages/apps/chat/index.js
deleted file mode 100644
index a585e4c..0000000
--- a/pages/apps/chat/index.js
+++ /dev/null
@@ -1,716 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import { styled, alpha } from "@mui/material/styles";
-import InputBase from "@mui/material/InputBase";
-import SearchIcon from "@mui/icons-material/Search";
-import Badge from "@mui/material/Badge";
-import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
-import ChatBox from "@/components/Apps/Chat/ChatBox";
-import ChatBoxTwo from "@/components/Apps/Chat/ChatBoxTwo";
-import ChatBoxThree from "@/components/Apps/Chat/ChatBoxThree";
-
-// Search field style
-const Search = styled("div")(({ theme }) => ({
- position: "relative",
- borderRadius: 100,
- backgroundColor: alpha(theme.palette.common.white, 0.15),
- "&:hover": {
- backgroundColor: alpha(theme.palette.common.white, 0.25),
- },
- marginRight: 0,
- marginLeft: 0,
- marginBottom: 20,
- width: "100%",
- [theme.breakpoints.up("xs")]: {
- marginRight: theme.spacing(1),
- width: "auto",
- },
-}));
-
-const SearchIconWrapper = styled("div")(({ theme }) => ({
- color: "#757FEF",
- padding: theme.spacing(0, 2),
- height: "100%",
- position: "absolute",
- right: "0",
- pointerEvents: "none",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- zIndex: "5",
-}));
-
-const StyledInputBase = styled(InputBase)(({ theme }) => ({
- color: "inherit",
- width: "100%",
- "& .MuiInputBase-input": {
- backgroundColor: "#F5F7FA",
- borderRadius: "30px",
- padding: theme.spacing(1.4, 0, 1.4, 2),
- },
-}));
-
-export default function Chat() {
- return (
- <>
- {/* Page title */}
-
-
Chat
-
-
- Dashboard
-
-
- Chat
-
-
-
-
-
-
-
-
-
- Messages
-
-
- {/* Search */}
-
-
-
-
-
-
-
- {/* All Messages */}
-
- ALL MESSAGES
-
-
-
- {/* Tab 1 */}
-
-
-
-
-
-
-
-
-
-
- Laurent Perrier
-
- Typing...
-
-
-
-
-
- 4:30 PM
-
-
-
-
-
-
-
-
-
- {/* Tab 2 */}
-
-
-
-
-
-
-
-
-
-
- Nunez Faulkner
-
-
- Hello everyone ...
-
-
-
-
-
-
- 9.36 AM
-
-
-
-
-
-
-
-
-
- {/* Tab 3 */}
-
-
-
-
-
-
-
-
-
-
- Bernard Langley
-
-
- That cool, go for it...
-
-
-
-
-
-
- 7.18 PM
-
-
-
-
-
- {/* Tab 4 */}
-
-
-
-
-
-
-
-
-
-
- Edwards Mckenz
-
- Great ! 🔥
-
-
-
-
-
- 08:30 PM
-
-
-
-
-
- {/* Tab 5 */}
-
-
-
-
-
-
-
-
-
-
- Elsie Melendez
-
- Typing...
-
-
-
-
-
- 2:30 PM
-
-
-
-
-
-
-
-
-
- {/* Tab 6 */}
-
-
-
-
-
-
-
-
-
-
- Mcleod Wagner
-
- What are you...
-
-
-
-
-
- 1:30 PM
-
-
-
-
-
- {/* Tab 7 */}
-
-
-
-
-
-
-
-
-
- Joseph Strickland
-
- Hello Joseph!!
-
-
-
-
-
- 7:30 PM
-
-
-
-
-
- {/* Tab 8 */}
-
-
-
-
-
-
-
-
-
- Joseph Strickland
-
- How are you?
-
-
-
-
-
- 5:30 PM
-
-
-
-
-
- {/* Tab 9 */}
-
-
-
-
-
-
-
-
-
- Silva Foster
-
- Cool! 🔥
-
-
-
-
-
- 8:30 PM
-
-
-
-
-
-
-
-
-
-
-
- {/* ChatBox */}
-
-
-
-
- {/* ChatBox */}
-
-
-
-
- {/* ChatBox */}
-
-
-
-
- {/* ChatBox */}
-
-
-
-
- {/* ChatBox */}
-
-
-
-
- {/* ChatBox */}
-
-
-
-
- {/* ChatBox */}
-
-
-
-
- {/* ChatBox */}
-
-
-
-
- {/* ChatBox */}
-
-
-
-
-
-
- >
- );
-}
diff --git a/pages/apps/file-manager/assets.js b/pages/apps/file-manager/assets.js
deleted file mode 100644
index 2cafcd6..0000000
--- a/pages/apps/file-manager/assets.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
-import AllAssets from '@/components/Apps/FileManager/AllAssets';
-
-export default function Assets() {
- return (
- <>
- {/* Page title */}
-
-
Assets
-
-
- Dashboard
-
- Assets
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* AllAssets */}
-
-
-
- >
- );
-}
diff --git a/pages/apps/file-manager/documents.js b/pages/apps/file-manager/documents.js
deleted file mode 100644
index b979b27..0000000
--- a/pages/apps/file-manager/documents.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
-import DocumentsFiles from '@/components/Apps/FileManager/DocumentsFiles';
-
-export default function Documents() {
- return (
- <>
- {/* Page title */}
-
-
Documents
-
-
- Dashboard
-
- Documents
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* DocumentsFiles */}
-
-
-
- >
- );
-}
diff --git a/pages/apps/file-manager/important.js b/pages/apps/file-manager/important.js
deleted file mode 100644
index 43191ef..0000000
--- a/pages/apps/file-manager/important.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
-import ImportantFiles from '@/components/Apps/FileManager/ImportantFiles';
-
-export default function Important() {
- return (
- <>
- {/* Page title */}
-
-
Important
-
-
- Dashboard
-
- Important
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* ImportantFiles */}
-
-
-
- >
- );
-}
diff --git a/pages/apps/file-manager/index.js b/pages/apps/file-manager/index.js
deleted file mode 100644
index bd2d486..0000000
--- a/pages/apps/file-manager/index.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import Grid from "@mui/material/Grid";
-import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
-import MyDrive from '@/components/Apps/FileManager/MyDrive';
-import RecentFiles from '@/components/Apps/FileManager/RecentFiles';
-import Files from '@/components/Apps/FileManager/Files';
-
-export default function FileManager() {
- return (
- <>
- {/* Page title */}
-
-
File Manager
-
-
- Dashboard
-
-
- File Manager
-
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* MyDrive */}
-
-
- {/* RecentFiles */}
-
-
- {/* Files */}
-
-
-
- >
- );
-}
diff --git a/pages/apps/file-manager/media.js b/pages/apps/file-manager/media.js
deleted file mode 100644
index 85d6008..0000000
--- a/pages/apps/file-manager/media.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
-import MediaFiles from '@/components/Apps/FileManager/MediaFiles';
-
-export default function Media() {
- return (
- <>
- {/* Page title */}
-
-
Media
-
-
- Dashboard
-
- Media
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* MediaFiles */}
-
-
-
- >
- );
-}
diff --git a/pages/apps/file-manager/personal.js b/pages/apps/file-manager/personal.js
deleted file mode 100644
index f2f1408..0000000
--- a/pages/apps/file-manager/personal.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
-import PersonalFiles from '@/components/Apps/FileManager/PersonalFiles';
-
-export default function Personal() {
- return (
- <>
- {/* Page title */}
-
-
Personal
-
-
- Dashboard
-
- Personal
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* PersonalFiles */}
-
-
-
- >
- );
-}
diff --git a/pages/apps/file-manager/projects.js b/pages/apps/file-manager/projects.js
deleted file mode 100644
index e41bf04..0000000
--- a/pages/apps/file-manager/projects.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
-import AllProjects from '@/components/Apps/FileManager/AllProjects';
-
-export default function Projects() {
- return (
- <>
- {/* Page title */}
-
-
Projects
-
-
- Dashboard
-
- Projects
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* AllProjects */}
-
-
-
- >
- );
-}
diff --git a/pages/apps/file-manager/recents.js b/pages/apps/file-manager/recents.js
deleted file mode 100644
index 5d7bdfc..0000000
--- a/pages/apps/file-manager/recents.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
-import AllRecentFiles from '@/components/Apps/FileManager/AllRecentFiles';
-
-export default function Recents() {
- return (
- <>
- {/* Page title */}
-
-
Recents
-
-
- Dashboard
-
- Recents
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* AllRecentFiles */}
-
-
-
- >
- );
-}
diff --git a/pages/apps/file-manager/templates.js b/pages/apps/file-manager/templates.js
deleted file mode 100644
index 45d2d18..0000000
--- a/pages/apps/file-manager/templates.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
-import TemplateFiles from '@/components/Apps/FileManager/TemplateFiles';
-
-export default function Templates() {
- return (
- <>
- {/* Page title */}
-
-
Templates
-
-
- Dashboard
-
- Templates
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* TemplateFiles */}
-
-
-
- >
- );
-}
diff --git a/pages/apps/file-manager/trash.js b/pages/apps/file-manager/trash.js
deleted file mode 100644
index 1844b34..0000000
--- a/pages/apps/file-manager/trash.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
-import TrashFiles from '@/components/Apps/FileManager/TrashFiles';
-
-export default function Trash() {
- return (
- <>
- {/* Page title */}
-
-
Trash
-
-
- Dashboard
-
- Trash
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* TrashFiles */}
-
-
-
- >
- );
-}
diff --git a/pages/apps/to-do.js b/pages/apps/to-do.js
deleted file mode 100644
index 1b29051..0000000
--- a/pages/apps/to-do.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import ToDoLists from '@/components/Apps/ToDoLists'
-
-export default function ToDo() {
- return (
- <>
- {/* Page title */}
-
-
To Do
-
-
- Dashboard
-
- To Do
-
-
-
-
- >
- );
-}
diff --git a/pages/authentication/confirm-mail.js b/pages/authentication/confirm-mail.js
deleted file mode 100644
index 29f68c4..0000000
--- a/pages/authentication/confirm-mail.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Typography } from "@mui/material";
-import { Box } from "@mui/system";
-import Button from "@mui/material/Button";
-
-export default function ConfirmMail() {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
- Success!
-
-
- A email has been send to{" "}
-
- envytheme@info.com
-
- . Please check for an email from company and click on the included
- link to reset your password.
-
-
-
- Back To Home
-
-
-
-
- >
- );
-}
diff --git a/pages/authentication/forgot-password.js b/pages/authentication/forgot-password.js
deleted file mode 100644
index 2d3c5b7..0000000
--- a/pages/authentication/forgot-password.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import ForgotPasswordForm from '@/components/Authentication/ForgotPasswordForm';
-
-export default function SignIn() {
- return (
- <>
-
- >
- );
-}
diff --git a/pages/authentication/lock-screen.js b/pages/authentication/lock-screen.js
deleted file mode 100644
index c7659ed..0000000
--- a/pages/authentication/lock-screen.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import LockScreenForm from '@/components/Authentication/LockScreenForm';
-
-export default function LockScreen() {
- return (
- <>
-
- >
- );
-}
diff --git a/pages/authentication/logout.js b/pages/authentication/logout.js
deleted file mode 100644
index 64e6fd9..0000000
--- a/pages/authentication/logout.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Typography } from "@mui/material";
-import { Box } from "@mui/system";
-import Button from "@mui/material/Button";
-
-export default function Logout() {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- You are Logged Out
-
-
-
- Thank you for using Admash admin template
-
-
-
- Sign In
-
-
-
-
- >
- );
-}
diff --git a/pages/authentication/sign-in.js b/pages/authentication/sign-in.js
deleted file mode 100644
index 392f744..0000000
--- a/pages/authentication/sign-in.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import SignInForm from '@/components/Authentication/SignInForm';
-
-export default function SignIn() {
- return (
- <>
-
- >
- );
-}
diff --git a/pages/authentication/sign-up.js b/pages/authentication/sign-up.js
deleted file mode 100644
index bca462f..0000000
--- a/pages/authentication/sign-up.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import SignUpForm from '@/components/Authentication/SignUpForm';
-
-export default function SignUp() {
- return (
- <>
-
- >
- );
-}
diff --git a/pages/contact-list/contact-list2.js b/pages/contact-list/contact-list2.js
deleted file mode 100644
index e5644f2..0000000
--- a/pages/contact-list/contact-list2.js
+++ /dev/null
@@ -1,227 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import CallIcon from '@mui/icons-material/Call';
-import MailOutlineIcon from '@mui/icons-material/MailOutline';
-import Stack from '@mui/material/Stack';
-import IconButton from '@mui/material/IconButton';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
-import Tooltip from '@mui/material/Tooltip';
-import styles from '@/styles/PageTitle.module.css'
-import Link from 'next/link';
-
-const contactLists = [
- {
- image: '/images/member1.png',
- name: 'Alvarado Turner',
- designation: 'React Developer',
- phonNumber: '+9003526765',
- email: 'alvarado@gmail.com',
- },
- {
- image: '/images/member2.png',
- name: 'Evangelina Mcclain',
- designation: 'Angular Developer',
- phonNumber: '+9003526765',
- email: 'evangelina@gmail.com',
- },
- {
- image: '/images/member3.png',
- name: 'Candice Munoz',
- designation: 'Vue Developer',
- phonNumber: '+9003526766',
- email: 'candice@gmail.com',
- },
- {
- image: '/images/member4.png',
- name: 'Bernard Langley',
- designation: 'UI/UX Designer',
- phonNumber: '+9003526767',
- email: 'bernard@gmail.com',
- },
- {
- image: '/images/member5.png',
- name: 'Kristie Hall',
- designation: 'Software Analyst',
- phonNumber: '+9003526846',
- email: 'kristie@gmail.com',
- },
- {
- image: '/images/member6.png',
- name: 'Bolton Obrien',
- designation: 'Support Engineer',
- phonNumber: '+9003526865',
- email: 'bolton@gmail.com',
- },
- {
- image: '/images/member7.png',
- name: 'Dee Alvarado',
- designation: 'SEO Specialist',
- phonNumber: '+9003526456',
- email: 'alvarado@gmail.com',
- },
- {
- image: '/images/member8.png',
- name: 'Cervantes Kramer',
- designation: 'Product Designer',
- phonNumber: '+9003526456',
- email: 'cervantes@gmail.com',
- },
- {
- image: '/images/member9.png',
- name: 'Dejesus Michael',
- designation: 'Content Writer',
- email: 'dejesus@gmail.com',
- phonNumber: '+9003526456',
- },
- {
- image: '/images/member10.png',
- name: 'Alissa Nelson',
- designation: 'Theme Developer',
- email: 'alissa@gmail.com',
- phonNumber: '+9003526355',
- },
- {
- image: '/images/member11.png',
- name: 'English Haney',
- designation: 'Digital Marketing Executive',
- email: 'english@gmail.com',
- phonNumber: '+9003526456',
- },
- {
- image: '/images/member12.png',
- name: 'Edwards Mckenzie',
- designation: 'Support Engineer',
- email: 'edwards@gmail.com',
- phonNumber: '+9003526456',
- },
-];
-
-export default function ContactList2() {
- return (
- <>
- {/* Page title */}
-
-
Contact List
-
-
- Dashboard
-
- Contact List
-
-
-
-
- {contactLists.map((contactList) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {contactList.name}
-
-
-
- {contactList.designation}
-
-
-
-
-
-
- {contactList.phonNumber}
-
-
-
-
-
-
- {contactList.email}
-
-
-
-
-
- ))}
-
- >
- );
-}
diff --git a/pages/contact-list/index.js b/pages/contact-list/index.js
deleted file mode 100644
index 56cc3c4..0000000
--- a/pages/contact-list/index.js
+++ /dev/null
@@ -1,265 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import Button from '@mui/material/Button';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-const contactLists = [
- {
- image: '/images/member1.png',
- name: 'Alvarado Turner',
- userName: '@alvaradoTurner',
- email: 'alvaradoTurner@gmail.com',
- projectUrl: '#',
- post: '18k',
- followers: '5.21k',
- followings: '32k',
- },
- {
- image: '/images/member2.png',
- name: 'Evangelina Mcclain',
- userName: '@evangelinaMcclain',
- email: 'evangelinaMcclain@gmail.com',
- projectUrl: '#',
- post: '10k',
- followers: '4.20k',
- followings: '15k',
- },
- {
- image: '/images/member3.png',
- name: 'Candice Munoz',
- userName: '@candiceMunoz',
- email: 'candiceMunoz@gmail.com',
- projectUrl: '#',
- post: '5k',
- followers: '2.20k',
- followings: '12k',
- },
- {
- image: '/images/member4.png',
- name: 'Bernard Langley',
- userName: '@bernardLangley',
- email: 'bernardLangley@gmail.com',
- projectUrl: '#',
- post: '19k',
- followers: '10.20k',
- followings: '30k',
- },
- {
- image: '/images/member5.png',
- name: 'Kristie Hall',
- userName: '@kristieHall',
- email: 'kristieHall@gmail.com',
- projectUrl: '#',
- post: '14k',
- followers: '9.20k',
- followings: '40k',
- },
- {
- image: '/images/member6.png',
- name: 'Bolton Obrien',
- userName: '@boltonObrien',
- email: 'boltonObrien@gmail.com',
- projectUrl: '#',
- post: '20k',
- followers: '19.20k',
- followings: '50k',
- },
- {
- image: '/images/member7.png',
- name: 'Dee Alvarado',
- userName: '@deeAlvarado',
- email: 'deeAlvarado@gmail.com',
- projectUrl: '#',
- post: '22k',
- followers: '30.20k',
- followings: '50k',
- },
- {
- image: '/images/member8.png',
- name: 'Cervantes Kramer',
- userName: '@cervantesKramer',
- email: 'cervantesKramer@gmail.com',
- projectUrl: '#',
- post: '25k',
- followers: '35.20k',
- followings: '10k',
- },
- {
- image: '/images/member9.png',
- name: 'Dejesus Michael',
- userName: '@dejesusMichael',
- email: 'dejesusMichael@gmail.com',
- projectUrl: '#',
- post: '16k',
- followers: '20.20k',
- followings: '5k',
- },
- {
- image: '/images/member10.png',
- name: 'Alissa Nelson',
- userName: '@alissaNelson',
- email: 'alissaNelson@gmail.com',
- projectUrl: '#',
- post: '13k',
- followers: '20.20k',
- followings: '250',
- },
- {
- image: '/images/member11.png',
- name: 'English Haney',
- userName: '@englishHaney',
- email: 'englishHaney@gmail.com',
- projectUrl: '#',
- post: '12k',
- followers: '12.20k',
- followings: '1205',
- },
- {
- image: '/images/member12.png',
- name: 'Edwards Mckenzie',
- userName: '@edwardsMckenzie',
- email: 'edwardsMckenzie@gmail.com',
- projectUrl: '#',
- post: '11k',
- followers: '30.20k',
- followings: '5k',
- },
-];
-
-export default function ContactList() {
- return (
- <>
- {/* Page title */}
-
-
Contact List
-
-
- Dashboard
-
- Contact List
-
-
-
-
- {contactLists.map((contactList) => (
-
-
-
-
- {contactList.name}
-
-
-
- {contactList.userName}
-
-
-
-
-
- Message
-
-
-
-
-
- Projects
-
-
-
-
-
-
-
- Post
-
-
- {contactList.post}
-
-
-
-
-
- Followers
-
-
- {contactList.followers}
-
-
-
-
-
- Followings
-
-
- {contactList.followings}
-
-
-
-
-
- ))}
-
- >
- );
-}
diff --git a/pages/contact-list/members-list.js b/pages/contact-list/members-list.js
deleted file mode 100644
index 02e7ca3..0000000
--- a/pages/contact-list/members-list.js
+++ /dev/null
@@ -1,883 +0,0 @@
-import * as React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Grid from "@mui/material/Grid";
-import Tooltip from "@mui/material/Tooltip";
-import DeleteIcon from "@mui/icons-material/Delete";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import Backdrop from "@mui/material/Backdrop";
-import Button from "@mui/material/Button";
-import Fade from "@mui/material/Fade";
-import Modal from "@mui/material/Modal";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-import Checkbox from '@mui/material/Checkbox';
-import styles from '@/styles/PageTitle.module.css'
-import Link from 'next/link';
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import CloseIcon from '@mui/icons-material/Close';
-
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-// Create new user Modal
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
- '& .MuiDialogContent-root': {
- padding: theme.spacing(2),
- },
- '& .MuiDialogActions-root': {
- padding: theme.spacing(1),
- },
-}));
-
-function BootstrapDialogTitle(props) {
- const { children, onClose, ...other } = props;
-
- return (
-
- {children}
- {onClose ? (
- theme.palette.grey[500],
- }}
- >
-
-
- ) : null}
-
- );
-}
-
-BootstrapDialogTitle.propTypes = {
- children: PropTypes.node,
- onClose: PropTypes.func.isRequired,
-};
-// End Create new user Modal
-
-function MembersLists(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-MembersLists.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(name, image, userName, email, tags, projects) {
- return {
- name,
- image,
- userName,
- email,
- tags,
- projects,
- };
-}
-
-const rows = [
- createData(
- "Evangelina Mcclain",
- "/images/user1.png",
- "@jstevenson5c",
- "jordansteve@gmail.com",
- "HTML, CSS & JS",
- "165"
- ),
- createData(
- "Candice Munoz",
- "/images/user2.png",
- "@candice3unoz",
- "candicemunoz@gmail.com",
- "React, Next.js",
- "120"
- ),
- createData(
- "Mike Mcclain",
- "/images/user3.png",
- "@mike4mcclain",
- "mikemcclain@gmail.com",
- "Angular, Gatsby",
- "220"
- ),
- createData(
- "Bernard Langley",
- "/images/user4.png",
- "@bernardlangley",
- "bernardlangley@gmail.com",
- "HTML, React & Sass",
- "122"
- ),
- createData(
- "Kristie Hall",
- "/images/user5.png",
- "@kristie7hall",
- "kristiehall@gmail.com",
- "React, Next.js & Sass",
- "360"
- ),
- createData(
- "Bolton Obrien",
- "/images/user6.png",
- "@bolton4obrien",
- "boltonobrien@gmail.com",
- "Angular, HTML & Sass",
- "250"
- ),
- createData(
- "Dee Alvarado",
- "/images/user7.png",
- "@dee3alvarado",
- "deealvarado@gmail.com",
- "React, Next.js & Sass",
- "140"
- ),
- createData(
- "Cervantes Kramer",
- "/images/user8.png",
- "@cervantes4kramer",
- "cervantes4kramer@gmail.com",
- "Gatsby, React & Sass",
- "345"
- ),
- createData(
- "Dejesus Michael",
- "/images/user9.png",
- "@dejesus1michael",
- "dejesusmichael@gmail.com",
- "React, Gatsby & Sass",
- "323"
- ),
- createData(
- "Alissa Nelson",
- "/images/user10.png",
- "@alissa1nelson",
- "alissa1nelson@gmail.com",
- "React, Gatsby & Sass",
- "451"
- ),
- createData(
- "Milton",
- "/images/user11.png",
- "@milton",
- "milton@gmail.com",
- "React, HTML & Sass",
- "432"
- ),
- createData(
- "Claude",
- "/images/user12.png",
- "@claude",
- "claude@gmail.com",
- "React, Gatsby & Sass",
- "543"
- ),
- createData(
- "Joshua",
- "/images/user13.png",
- "@joshua",
- "joshua@gmail.com",
- "React, Gatsby & Sass",
- "543"
- ),
- createData(
- "Harvey",
- "/images/user14.png",
- "@harvey",
- "harvey@gmail.com",
- "React, Gatsby & Sass",
- "432"
- ),
- createData(
- "Antonio",
- "/images/user15.png",
- "@antonio",
- "antonio@gmail.com",
- "React, Gatsby & Sass",
- "765"
- ),
- createData(
- "Julian",
- "/images/user16.png",
- "@julian",
- "julian@gmail.com",
- "React, Gatsby & Sass",
- "678"
- ),
- createData(
- "Harold",
- "/images/user17.png",
- "@harold",
- "harold@gmail.com",
- "React, Gatsby & Sass",
- "165"
- ),
- createData(
- "Kingston",
- "/images/user18.png",
- "@kingston",
- "kingston@info.com",
- "React, Gatsby & Sass",
- "165"
- ),
-].sort((a, b) => (a.name < b.name ? -1 : 1));
-
-export default function MembersList() {
- // Table
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- // Create new user modal
- const [open, setOpen] = React.useState(false);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
- const handleClose = () => {
- setOpen(false);
- };
-
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
- // End Add Task Modal
-
- return (
- <>
- {/* Page title */}
-
-
Member List
-
-
- Dashboard
-
- Member List
-
-
-
-
-
-
- Users List
-
-
-
- {" "}
- Create New User
-
-
-
-
-
-
-
-
- Name
-
-
-
- Email
-
-
-
- Tags
-
-
-
- Projects
-
-
-
- Action
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
-
-
-
-
- {row.name}
-
-
-
- {row.userName}
-
-
-
-
-
-
- {row.email}
-
-
-
- {row.tags}
-
-
-
- {row.projects}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- {/* Create new user modal */}
-
-
-
-
- Create New User
-
-
-
-
-
-
-
-
-
-
-
-
- Image
-
-
-
-
-
-
-
- Name
-
-
-
-
-
-
-
- User Name
-
-
-
-
-
-
-
- Email
-
-
-
-
-
-
-
- Tags
-
-
-
-
-
-
-
- Projects
-
-
-
-
-
-
-
- {" "}
- Cancel
-
-
-
- {" "}
- Create New User
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/pages/contact-list/profile.js b/pages/contact-list/profile.js
deleted file mode 100644
index 6ffb950..0000000
--- a/pages/contact-list/profile.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import ProfileInfo from '@/components/ContactList/ProfileInfo';
-import Features from '@/components/ContactList/Features';
-import PersonalInformation from '@/components/ContactList/PersonalInformation';
-import ActivityTimeline from '@/components/ContactList/ActivityTimeline';
-import Overview from '@/components/ContactList/Overview';
-import MyTasks from '@/components/ContactList/MyTasks';
-import styles from '@/styles/PageTitle.module.css'
-import Link from 'next/link';
-
-export default function Profile() {
- return (
- <>
- {/* Page title */}
-
-
Profile
-
-
- Dashboard
-
- Profile
-
-
-
-
-
- {/* ProfileInfo */}
-
-
- {/* Personal Information */}
-
-
- {/* ActivityTimeline */}
-
-
-
-
- {/* Features */}
-
-
- {/* Overview */}
-
-
- {/* MyTasks */}
-
-
-
- >
- );
-}
diff --git a/pages/ecommerce.js b/pages/ecommerce.js
deleted file mode 100644
index 54720af..0000000
--- a/pages/ecommerce.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import Features from "@/components/Dashboard/eCommerce/Features";
-import Ratings from "@/components/Dashboard/eCommerce/Ratings";
-import AudienceOverview from "@/components/Dashboard/eCommerce/AudienceOverview";
-import VisitsByDay from "@/components/Dashboard/eCommerce/VisitsByDay";
-import Impressions from "@/components/Dashboard/eCommerce/Impressions";
-import ActivityTimeline from "@/components/Dashboard/eCommerce/ActivityTimeline";
-import RevenuStatus from "@/components/Dashboard/eCommerce/RevenuStatus";
-import SalesByCountries from "@/components/Dashboard/eCommerce/SalesByCountries";
-import NewCustomers from "@/components/Dashboard/eCommerce/NewCustomers";
-import RecentOrders from "@/components/Dashboard/eCommerce/RecentOrders";
-import TeamMembersList from "@/components/Dashboard/eCommerce/TeamMembersList";
-import BestSellingProducts from "@/components/Dashboard/eCommerce/BestSellingProducts";
-import LiveVisitsOnOurSite from "@/components/Dashboard/eCommerce/LiveVisitsOnOurSite";
-
-export default function eCommerce() {
- return (
- <>
- {/* Page title */}
-
-
eCommerce
-
-
- Dashboard
-
-
- eCommerce
-
-
-
-
-
-
- {/* Features */}
-
-
- {/* AudienceOverview */}
-
-
-
-
- {/* VisitsByDay */}
-
-
-
-
- {/* Impressions */}
-
-
- {/* ActivityTimeline */}
-
-
-
-
- {/* RevenuStatus */}
-
-
-
-
-
-
- {/* Ratings */}
-
-
- {/* LiveVisitsOnOurSite */}
-
-
- {/* SalesByLocations */}
-
-
- {/* NewCustomers */}
-
-
-
-
- {/* Recent Orders */}
-
-
-
-
- {/* TeamMembersList */}
-
-
-
-
- {/* BestSellingProducts */}
-
-
-
- >
- );
-}
diff --git a/pages/ecommerce/cart.js b/pages/ecommerce/cart.js
deleted file mode 100644
index a479b5a..0000000
--- a/pages/ecommerce/cart.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import ShoppingCart from '@/components/eCommerce/Cart/ShoppingCart';
-import OrderSummary from '@/components/eCommerce/Cart/OrderSummary';
-import HaveAPromoCode from '@/components/eCommerce/Cart/HaveAPromoCode';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-const Cart = () => {
- return (
- <>
- {/* Page title */}
-
-
-
-
- {/* ShoppingCart */}
-
-
-
-
- {/* OrderSummary */}
-
-
- {/* HaveAPromoCode */}
-
-
-
- >
- )
-}
-
-export default Cart;
\ No newline at end of file
diff --git a/pages/ecommerce/checkout.js b/pages/ecommerce/checkout.js
deleted file mode 100644
index cb99b39..0000000
--- a/pages/ecommerce/checkout.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import ShoppingCart from '@/components/eCommerce/Checkout/ShoppingCart';
-import BillingInformation from '@/components/eCommerce/Checkout/BillingInformation';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-const Checkout = () => {
- return (
- <>
- {/* Page title */}
-
-
Checkout
-
-
- Dashboard
-
- Checkout
-
-
-
-
-
- {/* ShoppingCart */}
-
-
-
-
- {/* BillingInformation */}
-
-
-
- >
- )
-}
-
-export default Checkout;
\ No newline at end of file
diff --git a/pages/ecommerce/create-product.js b/pages/ecommerce/create-product.js
deleted file mode 100644
index 9fba186..0000000
--- a/pages/ecommerce/create-product.js
+++ /dev/null
@@ -1,384 +0,0 @@
-import * as React from "react";
-import { Box } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import { Typography } from "@mui/material";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-import dynamic from 'next/dynamic'
-const RichTextEditor = dynamic(() => import('@mantine/rte'), {
- ssr: false,
-})
-
-const CreateProduct = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- // Select dropdown
- const [categorySelect, setCategorySelect] = React.useState('');
- const handleChange = (event) => {
- setCategorySelect(event.target.value);
- };
-
- return (
- <>
- {/* Page title */}
-
-
Create Product
-
-
- Dashboard
-
- Create Product
-
-
-
-
-
-
- Create Product
-
-
-
-
-
- Product Name
-
-
-
-
-
-
- Short Description
-
-
-
-
-
-
- Category
-
-
-
- Select
-
- Laptop
- Camera
- Smart Watch
- iPhone
-
-
-
-
-
-
- Price
-
-
-
-
-
-
- Discount Price
-
-
-
-
-
-
- Stock
-
-
-
-
-
-
- Product Description
-
-
-
-
-
-
-
- Meta Title
-
-
-
-
-
-
- Meta Keywords
-
-
-
-
-
-
- Meta Description
-
-
-
-
-
-
-
- Product Image
-
-
-
-
-
-
-
-
-
-
- {" "}
- Create Product
-
-
-
-
-
- >
- )
-}
-
-export default CreateProduct;
\ No newline at end of file
diff --git a/pages/ecommerce/customers.js b/pages/ecommerce/customers.js
deleted file mode 100644
index 99fd6d2..0000000
--- a/pages/ecommerce/customers.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import CustomersLists from '@/components/eCommerce/Customers/CustomersLists';
-
-const Customers = () => {
- return (
- <>
- {/* Page title */}
-
-
Customers
-
-
- Dashboard
-
- Customers
-
-
-
-
- >
- )
-}
-
-export default Customers;
\ No newline at end of file
diff --git a/pages/ecommerce/order-details.js b/pages/ecommerce/order-details.js
deleted file mode 100644
index ff6998e..0000000
--- a/pages/ecommerce/order-details.js
+++ /dev/null
@@ -1,344 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import TrackOrder from "@/components/eCommerce/OrderDetails/TrackOrder";
-import OrderTable from "@/components/eCommerce/OrderDetails/TrackOrder/OrderTable";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-const OrderDetails = () => {
- return (
- <>
- {/* Page title */}
-
-
Order Details
-
-
- Dashboard
-
- Order Details
-
-
-
-
-
- {/* TrackOrder */}
-
-
-
-
- {/* OrderTable */}
-
-
-
-
-
-
-
-
- Shipping Information
-
-
-
- Thomas Adison
-
-
-
-
-
- Address:
-
- 3559 Roosevelt Wilson Lane San Bernardino, CA 92405
-
-
-
-
- Phone:
-
- (123) 456-7890
-
-
-
-
- Email:
-
- contact@gmail.com
-
-
-
-
-
-
-
-
- Billing Information
-
-
-
- Thomas Adison
-
-
-
-
-
- Payment Type:
-
- Credit Card
-
-
-
-
- Provider:
-
- Visa ending in 2851
-
-
-
-
- Valid Date:
-
- April 22 2019
-
-
-
-
- CVV:
-
- xxx
-
-
-
-
-
-
-
-
- Delivery Info
-
-
-
- UPS Delivery
-
-
-
-
-
- Order ID :
-
- xxxx235
-
-
-
-
- Payment Mode :
-
- COD
-
-
-
-
- Email:
-
- info@contact.com
-
-
-
-
-
- >
- );
-};
-
-export default OrderDetails;
diff --git a/pages/ecommerce/orders-list.js b/pages/ecommerce/orders-list.js
deleted file mode 100644
index 514620d..0000000
--- a/pages/ecommerce/orders-list.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import OrdersLists from '@/components/eCommerce/OrdersList/OrdersLists';
-import Features from '@/components/eCommerce/OrdersList/Features';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-const OrdersList = () => {
- return (
- <>
- {/* Page title */}
-
-
Orders List
-
-
- Dashboard
-
- Orders List
-
-
-
- {/* Features */}
-
-
- {/* OrdersLists */}
-
- >
- )
-}
-
-export default OrdersList;
\ No newline at end of file
diff --git a/pages/ecommerce/product-details.js b/pages/ecommerce/product-details.js
deleted file mode 100644
index 121a220..0000000
--- a/pages/ecommerce/product-details.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import ProductDetailsContent from "@/components/eCommerce/ProductDetails/ProductDetailsContent";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-export default function ProductDetails() {
- return (
- <>
- {/* Page title */}
-
-
Product Details
-
-
- Dashboard
-
- Product Details
-
-
-
-
- >
- );
-}
diff --git a/pages/ecommerce/products.js b/pages/ecommerce/products.js
deleted file mode 100644
index 2dc409f..0000000
--- a/pages/ecommerce/products.js
+++ /dev/null
@@ -1,1017 +0,0 @@
-import * as React from "react";
-import { Box } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Tooltip from "@mui/material/Tooltip";
-import DeleteIcon from "@mui/icons-material/Delete";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import Backdrop from "@mui/material/Backdrop";
-import Button from "@mui/material/Button";
-import Fade from "@mui/material/Fade";
-import Modal from "@mui/material/Modal";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-import dynamic from 'next/dynamic'
-const RichTextEditor = dynamic(() => import('@mantine/rte'), {
- ssr: false,
-})
-
-// Create Product Modal Style
-const style = {
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- height: "100%",
- maxWidth: '700px',
- width: '100%',
- overflow: "auto",
- bgcolor: "background.paper",
- boxShadow: 24,
- borderRadius: "8px",
-};
-
-function Product(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-Product.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(
- productImg,
- productTitle,
- category,
- price,
- orders,
- stock,
- rating,
-) {
- return {
- productImg,
- productTitle,
- category,
- price,
- orders,
- stock,
- rating,
- };
-}
-
-const rows = [
- createData(
- "/images/product1.png",
- "Laptop Macos Pro",
- "Laptop",
- "$289.50",
- "46",
- "12",
- "5.0 (61 votes)",
- ),
- createData(
- "/images/product2.png",
- "Smart Camera XD6",
- "Camera",
- "$189.50",
- "50",
- "Out of Stock",
- "5.0 (40 votes)"
- ),
- createData(
- "/images/product3.png",
- "Pixi 8 Wireless Airphone",
- "Phone",
- "$250.50",
- "45",
- "400",
- "5.0 (15 votes)"
- ),
- createData(
- "/images/product4.png",
- "Jebble Smart Watch",
- "Watch",
- "$289.50",
- "100",
- "200",
- "5.0 (99 votes)"
- ),
- createData(
- "/images/product5.png",
- "Admas Airpod x-Zon",
- "Airpod",
- "$289.50",
- "120",
- "Out of Stock",
- "5.0 (150 votes)"
- ),
- createData(
- "/images/product6.png",
- "Smart Watch F8 Pro",
- "Watch",
- "$289.50",
- "20",
- "100",
- "5.0 (5 votes)"
- ),
- createData(
- "/images/product7.png",
- "Nord Fold ZL",
- "Pone",
- "$289.50",
- "55",
- "108",
- "5.0 (11 votes)"
- ),
- createData(
- "/images/product8.png",
- "Wall Clock Cimbina",
- "Clock",
- "$289.50",
- "40",
- "100",
- "5.0 (4 votes)"
- ),
- createData(
- "/images/product9.png",
- "Galaxo T6 Munsun",
- "Smart Phone",
- "$289.50",
- "50",
- "130",
- "5.0 (55 votes)"
- ),
- createData(
- "/images/product1.png",
- "Macbook Pro",
- "Laptop",
- "$1,299.00",
- "120",
- "1500",
- "5.0 (150 votes)"
- ),
- createData(
- "/images/product2.png",
- "iphone 14 pro max",
- "Phone",
- "$1029",
- "200",
- "599",
- "5.0 (200 votes)"
- ),
- createData(
- "/images/product3.png",
- "HeadPhone",
- "HeadPhone",
- "$100.50",
- "25",
- "50",
- "5.0 (61 votes)"
- ),
- createData(
- "/images/product4.png",
- "Superstar shoes",
- "shoes",
- "$59.50",
- "45",
- "50",
- "5.0 (45 votes)"
- ),
- createData(
- "/images/product5.png",
- "Nike shirts",
- "Shirts",
- "$30.50",
- "32",
- "40",
- "5.0 (22 votes)"
- ),
- createData(
- "/images/product6.png",
- "Nike caps",
- "Caps",
- "$15.50",
- "33",
- "50",
- "5.0 (3 votes)"
- ),
- createData(
- "/images/product7.png",
- "Hoodie (Blue)",
- "Hoodie",
- "$59.50",
- "30",
- "55",
- "5.0 (44 votes)"
- ),
- createData(
- "/images/product8.png",
- "Wall Clock China",
- "Clock",
- "$100.50",
- "30",
- "230",
- "5.0 (45 votes)"
- ),
- createData(
- "/images/product9.png",
- "Galaxo T6 Munsun 2",
- "Phone",
- "$220.50",
- "22",
- "50",
- "5.0 (24 votes)"
- ),
-].sort((a, b) => (a.category < b.category ? -1 : 1));
-
-export default function Products() {
- // Table
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- // Create Product Modal & Form
- const [open, setOpen] = React.useState(false);
- const handleOpen = () => setOpen(true);
- const handleClose = () => setOpen(false);
-
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- // Select dropdown
- const [categorySelect, setCategorySelect] = React.useState('');
- const handleChange = (event) => {
- setCategorySelect(event.target.value);
- };
-
- return (
- <>
- {/* Page title */}
-
-
Products
-
-
- Dashboard
-
- Products
-
-
-
-
-
-
- Products
-
-
-
- {" "}
- Create Folder
-
-
-
-
-
-
-
-
- Product Name
-
-
-
- Category
-
-
-
- Price
-
-
-
- Orders
-
-
-
- Stock
-
-
-
- Rating
-
-
-
- Actions
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
-
-
- {row.productTitle}
-
-
-
-
-
- {row.category}
-
-
-
- {row.price}
-
-
-
- {row.orders}
-
-
-
- {row.stock}
-
-
-
- {row.rating}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- {/* Create Product Modal */}
-
-
-
-
-
- Create Product
-
-
-
-
-
-
-
-
-
-
-
-
- Product Name
-
-
-
-
-
-
- Short Description
-
-
-
-
-
-
- Category
-
-
-
- Select
-
- Laptop
- Camera
- Smart Watch
- iPhone
-
-
-
-
-
-
- Price
-
-
-
-
-
-
-
- Discount Price
-
-
-
-
-
-
-
- Stock
-
-
-
-
-
-
-
- Product Description
-
-
-
-
-
-
-
- Product Image
-
-
-
-
-
-
-
-
-
-
-
- {" "}
- Cancel
-
-
-
- {" "}
- Create Product
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/pages/ecommerce/sellers.js b/pages/ecommerce/sellers.js
deleted file mode 100644
index 7d01631..0000000
--- a/pages/ecommerce/sellers.js
+++ /dev/null
@@ -1,207 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import DeleteIcon from "@mui/icons-material/Delete";
-import Tooltip from "@mui/material/Tooltip";
-import BorderColorIcon from "@mui/icons-material/BorderColor";
-import Link from "next/link";
-import styles from '@/styles/PageTitle.module.css'
-
-const sellerLists = [
- {
- id: 1,
- brandLogo: "/images/seller1.png",
- brandName: "Nesta Technologies",
- sellersName: "Katia Stapleton",
- itemStock: "12,0558",
- walletBalance: "$48,450.00",
- viewUrl: "#",
- },
- {
- id: 2,
- brandLogo: "/images/seller2.png",
- brandName: "Force Medicines",
- sellersName: "Wade Dave",
- itemStock: "10,500",
- walletBalance: "$50,500.00",
- viewUrl: "#",
- },
- {
- id: 3,
- brandLogo: "/images/seller3.png",
- brandName: "Metelgo Sys",
- sellersName: "Gilbert Dan",
- itemStock: "8,450",
- walletBalance: "$60,450.00",
- viewUrl: "#",
- },
- {
- id: 4,
- brandLogo: "/images/seller4.png",
- brandName: "Digito Galatoxy",
- sellersName: "Roberto Ramon",
- itemStock: "15,0587",
- walletBalance: "$78,450.00",
- viewUrl: "#",
- },
- {
- id: 5,
- brandLogo: "/images/seller5.png",
- brandName: "Micro Technology",
- sellersName: "Nathaniel Liam",
- itemStock: "18,0558",
- walletBalance: "$65,450.00",
- viewUrl: "#",
- },
- {
- id: 6,
- brandLogo: "/images/seller6.png",
- brandName: "iTest Factory",
- sellersName: "Ethan Milton",
- itemStock: "19,0558",
- walletBalance: "$76,450.00",
- viewUrl: "#",
- },
- {
- id: 7,
- brandLogo: "/images/seller7.png",
- brandName: "Syntech Service",
- sellersName: "Joshua Harvey",
- itemStock: "20,0558",
- walletBalance: "$56,450.00",
- viewUrl: "#",
- },
- {
- id: 8,
- brandLogo: "/images/seller8.png",
- brandName: "Zotic Mentex",
- sellersName: "Antonio Connor",
- itemStock: "22,0558",
- walletBalance: "$90,450.00",
- viewUrl: "#",
- },
-];
-
-const Sellers = () => {
- return (
- <>
- {/* Page title */}
-
-
Sellers
-
-
- Dashboard
-
- Sellers
-
-
-
-
- {sellerLists.map((seller) => (
-
-
-
-
-
- {seller.brandName}
-
-
- {seller.sellersName}
-
-
-
- View Details
-
-
-
-
-
- Item Stock
-
-
- {seller.itemStock}
-
-
-
-
- Wallet Balance
-
-
- {seller.walletBalance}
-
-
-
-
- {/* Edit & Delete Button */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
- >
- );
-};
-
-export default Sellers;
diff --git a/pages/email/inbox.js b/pages/email/inbox.js
deleted file mode 100644
index 0daaa48..0000000
--- a/pages/email/inbox.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import LeftSidebar from '@/components/Email/LeftSidebar';
-import EmailLists from '@/components/Email/EmailLists';
-
-export default function Inbox() {
- return (
- <>
- {/* Page title */}
-
-
Email
-
-
- Dashboard
-
- Email
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* EmailList */}
-
-
-
- >
- );
-}
diff --git a/pages/email/read-email.js b/pages/email/read-email.js
deleted file mode 100644
index e98fe0a..0000000
--- a/pages/email/read-email.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import LeftSidebar from '@/components/Email/LeftSidebar';
-import ReadEmailContent from '@/components/Email/ReadEmailContent';
-
-export default function ReadEmail() {
- return (
- <>
- {/* Page title */}
-
-
Read Email
-
-
- Dashboard
-
- Read Email
-
-
-
-
-
- {/* LeftSidebar */}
-
-
-
-
- {/* ReadEmailContent */}
-
-
-
- >
- );
-}
diff --git a/pages/forms/advanced-elements.js b/pages/forms/advanced-elements.js
deleted file mode 100644
index 77d799e..0000000
--- a/pages/forms/advanced-elements.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import DefaultSelect from '@/components/Forms/AdvancedElements/DefaultSelect';
-import MultiSelect from '@/components/Forms/AdvancedElements/MultiSelect';
-import MultipleSelectChip from '@/components/Forms/AdvancedElements/MultipleSelectChip';
-import CountrySelect from '@/components/Forms/AdvancedElements/CountrySelect';
-import BasicDatePicker from '@/components/Forms/AdvancedElements/BasicDatePicker';
-import BasicTimePicker from '@/components/Forms/AdvancedElements/BasicTimePicker';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-export default function AdvancedElements() {
- return (
- <>
- {/* Page title */}
-
-
Advanced Elements
-
-
- Dashboard
-
- Advanced Elements
-
-
-
-
-
- {/* DefaultSelect */}
-
-
-
-
- {/* MultiSelect */}
-
-
-
-
- {/* MultipleSelectChip */}
-
-
-
-
- {/* CountrySelect */}
-
-
- {/* BasicTimePicker */}
-
-
- {/* BasicDatePicker */}
-
- >
- );
-}
diff --git a/pages/forms/editors.js b/pages/forms/editors.js
deleted file mode 100644
index 2e5ba3b..0000000
--- a/pages/forms/editors.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import EditorArea from '@/components/Forms/EditorArea';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-export default function Editors() {
- return (
- <>
- {/* Page title */}
-
-
Editors
-
-
- Dashboard
-
- Editors
-
-
-
-
- >
- );
-}
diff --git a/pages/forms/file-uploader.js b/pages/forms/file-uploader.js
deleted file mode 100644
index 1693d85..0000000
--- a/pages/forms/file-uploader.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import UploadMultipleFiles from '@/components/Forms/FileUploader/UploadMultipleFiles';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-export default function FileUploader() {
- return (
- <>
- {/* Page title */}
-
-
File Uploader
-
-
- Dashboard
-
- File Uploader
-
-
-
-
- >
- );
-}
diff --git a/pages/forms/form-layouts.js b/pages/forms/form-layouts.js
deleted file mode 100644
index 55aad24..0000000
--- a/pages/forms/form-layouts.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import BasicForm from '@/components/Forms/FormLayouts/BasicForm';
-import BasicWithIcons from '@/components/Forms/FormLayouts/BasicWithIcons';
-import SignInForm from '@/components/Forms/FormLayouts/SignInForm';
-import SignUpForm from '@/components/Forms/FormLayouts/SignUpForm';
-import CustomStyles from '@/components/Forms/FormLayouts/CustomStyles';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-export default function FormLayouts() {
- return (
- <>
- {/* Page title */}
-
-
Form Layouts
-
-
- Dashboard
-
- Form Layouts
-
-
-
-
-
- {/* BasicForm */}
-
-
- {/* SignIn */}
-
-
-
-
- {/* BasicWithIcons */}
-
-
- {/* SignUpForm */}
-
-
-
-
-
- >
- );
-}
diff --git a/pages/index.js b/pages/index.js
deleted file mode 100644
index 54720af..0000000
--- a/pages/index.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import Features from "@/components/Dashboard/eCommerce/Features";
-import Ratings from "@/components/Dashboard/eCommerce/Ratings";
-import AudienceOverview from "@/components/Dashboard/eCommerce/AudienceOverview";
-import VisitsByDay from "@/components/Dashboard/eCommerce/VisitsByDay";
-import Impressions from "@/components/Dashboard/eCommerce/Impressions";
-import ActivityTimeline from "@/components/Dashboard/eCommerce/ActivityTimeline";
-import RevenuStatus from "@/components/Dashboard/eCommerce/RevenuStatus";
-import SalesByCountries from "@/components/Dashboard/eCommerce/SalesByCountries";
-import NewCustomers from "@/components/Dashboard/eCommerce/NewCustomers";
-import RecentOrders from "@/components/Dashboard/eCommerce/RecentOrders";
-import TeamMembersList from "@/components/Dashboard/eCommerce/TeamMembersList";
-import BestSellingProducts from "@/components/Dashboard/eCommerce/BestSellingProducts";
-import LiveVisitsOnOurSite from "@/components/Dashboard/eCommerce/LiveVisitsOnOurSite";
-
-export default function eCommerce() {
- return (
- <>
- {/* Page title */}
-
-
eCommerce
-
-
- Dashboard
-
-
- eCommerce
-
-
-
-
-
-
- {/* Features */}
-
-
- {/* AudienceOverview */}
-
-
-
-
- {/* VisitsByDay */}
-
-
-
-
- {/* Impressions */}
-
-
- {/* ActivityTimeline */}
-
-
-
-
- {/* RevenuStatus */}
-
-
-
-
-
-
- {/* Ratings */}
-
-
- {/* LiveVisitsOnOurSite */}
-
-
- {/* SalesByLocations */}
-
-
- {/* NewCustomers */}
-
-
-
-
- {/* Recent Orders */}
-
-
-
-
- {/* TeamMembersList */}
-
-
-
-
- {/* BestSellingProducts */}
-
-
-
- >
- );
-}
diff --git a/pages/lms-courses.js b/pages/lms-courses.js
deleted file mode 100644
index 276ee25..0000000
--- a/pages/lms-courses.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import Features from '@/components/Dashboard/LMSCourses/Features';
-import YourProgress from "@/components/Dashboard/LMSCourses/YourProgress";
-import ExperienceIQ from "@/components/Dashboard/LMSCourses/ExperienceIQ";
-import HoursSpent from "@/components/Dashboard/LMSCourses/HoursSpent";
-import MyPlanning from "@/components/Dashboard/LMSCourses/MyPlanning";
-import TopInstructor from "@/components/Dashboard/LMSCourses/TopInstructor";
-import TotalWatched from "@/components/Dashboard/LMSCourses/TotalWatched";
-import CurrentCourses from "@/components/Dashboard/LMSCourses/CurrentCourses";
-import Courses from "@/components/Dashboard/LMSCourses/Courses";
-import ActiveCourse from "@/components/Dashboard/LMSCourses/ActiveCourse";
-import CourseCompletion from "@/components/Dashboard/LMSCourses/CourseCompletion";
-import Messages from "@/components/Dashboard/LMSCourses/Messages";
-import TopStudents from "@/components/Dashboard/LMSCourses/TopStudents";
-
-export default function LMSCourses() {
- return (
- <>
- {/* Page title */}
-
-
LMS Courses
-
-
- Dashboard
-
-
- LMS Courses
-
-
-
-
- {/* Features */}
-
-
-
-
- {/* YourProgress */}
-
-
-
-
- {/* HoursSpent */}
-
-
- {/* TopInstructor */}
-
-
-
-
- {/* MyPlanning */}
-
-
- {/* TotalWatched */}
-
-
-
-
- {/* CurrentCourse */}
-
-
- {/* Courses */}
-
-
-
-
- {/* ExperienceIQ */}
-
-
- {/* ActiveCourse */}
-
-
- {/* CourseCompletion */}
-
-
- {/* Messages */}
-
-
- {/* TopStudents */}
-
-
-
-
- >
- );
-}
diff --git a/pages/notification.js b/pages/notification.js
deleted file mode 100644
index 8a36811..0000000
--- a/pages/notification.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import NotificationTable from '@/components/Notification/NotificationTable';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Notification() {
- return (
- <>
- {/* Page title */}
-
-
Notification
-
-
- Dashboard
-
- Notification
-
-
-
-
- >
- );
-}
diff --git a/pages/pages/apexcharts.js b/pages/pages/apexcharts.js
deleted file mode 100644
index 216b059..0000000
--- a/pages/pages/apexcharts.js
+++ /dev/null
@@ -1,399 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import { Typography } from "@mui/material";
-import Basic from '@/components/Pages/Charts/ApexCharts/LineCharts/Basic';
-import Stepline from '@/components/Pages/Charts/ApexCharts/LineCharts/Stepline';
-import Gradient from '@/components/Pages/Charts/ApexCharts/LineCharts/Gradient';
-import Dashed from '@/components/Pages/Charts/ApexCharts/LineCharts/Dashed';
-import BasicAreaCharts from '@/components/Pages/Charts/ApexCharts/AreaCharts/BasicAreaCharts';
-import Spline from '@/components/Pages/Charts/ApexCharts/AreaCharts/Spline';
-import DatetimeXAxis from '@/components/Pages/Charts/ApexCharts/AreaCharts/DatetimeXAxis';
-import Negative from '@/components/Pages/Charts/ApexCharts/AreaCharts/Negative';
-import BasicColumnCharts from '@/components/Pages/Charts/ApexCharts/ColumnCharts/BasicColumnCharts';
-import ColumnWithDataLabels from '@/components/Pages/Charts/ApexCharts/ColumnCharts/ColumnWithDataLabels';
-import StackedColumns from '@/components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns';
-import StackedColumns100 from '@/components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns100';
-import BasicBarCharts from '@/components/Pages/Charts/ApexCharts/BarCharts/BasicBarCharts';
-import Grouped from '@/components/Pages/Charts/ApexCharts/BarCharts/Grouped';
-import StackedBar from '@/components/Pages/Charts/ApexCharts/BarCharts/StackedBar';
-import StackedBars100 from '@/components/Pages/Charts/ApexCharts/BarCharts/StackedBars100';
-import LineColumn from '@/components/Pages/Charts/ApexCharts/MixedCharts/LineColumn';
-import MultipleYAxis from '@/components/Pages/Charts/ApexCharts/MixedCharts/MultipleYAxis';
-import LineArea from '@/components/Pages/Charts/ApexCharts/MixedCharts/LineArea';
-import LineColumnArea from '@/components/Pages/Charts/ApexCharts/MixedCharts/LineColumnArea';
-import BasicPolarAreaCharts from '@/components/Pages/Charts/ApexCharts/PolarAreaCharts/BasicPolarAreaCharts';
-import Monochrome from '@/components/Pages/Charts/ApexCharts/PolarAreaCharts/Monochrome';
-import BasicRadarCharts from '@/components/Pages/Charts/ApexCharts/RadarCharts/BasicRadarCharts';
-import RadarMultipleSeries from '@/components/Pages/Charts/ApexCharts/RadarCharts/RadarMultipleSeries';
-import RadarWithPolygonFill from '@/components/Pages/Charts/ApexCharts/RadarCharts/RadarWithPolygonFill';
-import BasicRadialBarCharts from '@/components/Pages/Charts/ApexCharts/RadialBarCharts/BasicRadialBarCharts';
-import MultipleRadialbars from '@/components/Pages/Charts/ApexCharts/RadialBarCharts/MultipleRadialbars';
-import CustomAngleCircle from '@/components/Pages/Charts/ApexCharts/RadialBarCharts/CustomAngleCircle';
-import SimplePieChart from '@/components/Pages/Charts/ApexCharts/PieCharts/SimplePieChart';
-import SimpleDonut from '@/components/Pages/Charts/ApexCharts/PieCharts/SimpleDonut';
-import UpdateDonut from '@/components/Pages/Charts/ApexCharts/PieCharts/UpdateDonut';
-import MonochromePie from '@/components/Pages/Charts/ApexCharts/PieCharts/MonochromePie';
-import GradientDonut from '@/components/Pages/Charts/ApexCharts/PieCharts/GradientDonut';
-import PieCharts from '@/components/Pages/Charts/ApexCharts/PieCharts/DonutWithPattern';
-import NavBar from '@/components/Pages/Charts/NavBar';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-export default function Charts() {
- return (
- <>
- {/* Page title */}
-
-
Charts
-
-
- Dashboard
-
- Charts
-
-
-
- {/* Nav */}
-
-
- {/* Line Charts */}
-
- Line Charts
-
-
-
-
- {/* Basic */}
-
-
- {/* Gradient */}
-
-
-
-
- {/* Stepline */}
-
-
- {/* Dashed */}
-
-
-
-
- {/* Area Charts */}
-
- Area Charts
-
-
-
-
- {/* BasicAreaCharts */}
-
-
- {/* DatetimeXAxis */}
-
-
-
-
- {/* Spline */}
-
-
- {/* Negative */}
-
-
-
-
- {/* Column Charts */}
-
- Column Charts
-
-
-
-
- {/* BasicColumnCharts */}
-
-
- {/* StackedColumns */}
-
-
-
-
- {/* ColumnWithDataLabels */}
-
-
- {/* StackedColumns100 */}
-
-
-
-
- {/* Bar Charts */}
-
- Bar Charts
-
-
-
-
- {/* BasicBarCharts */}
-
-
- {/* StackedBar */}
-
-
-
-
- {/* Grouped */}
-
-
- {/* StackedBars100 */}
-
-
-
-
- {/* Mixed Charts */}
-
- Mixed Charts
-
-
-
-
- {/* LineColumn */}
-
-
- {/* LineArea */}
-
-
-
-
- {/* MultipleYAxis */}
-
-
- {/* LineColumnArea */}
-
-
-
-
- {/* Polar Area Charts */}
-
- Polar Area Charts
-
-
-
-
- {/* BasicPolarAreaCharts */}
-
-
-
-
- {/* Monochrome */}
-
-
-
-
- {/* Radar Charts */}
-
- Radar Charts
-
-
-
-
- {/* BasicRadarCharts */}
-
-
-
-
- {/* RadarMultipleSeries */}
-
-
-
-
- {/* RadarWithPolygonFill */}
-
-
-
-
- {/* RadialBar Charts */}
-
- RadialBar Charts
-
-
-
-
- {/* BasicRadialBarCharts */}
-
-
-
-
- {/* MultipleRadialbars */}
-
-
-
-
- {/* CustomAngleCircle */}
-
-
-
-
- {/* PieCharts */}
-
- Pie Charts
-
-
-
-
- {/* SimplePieChart */}
-
-
- {/* UpdateDonut */}
-
-
- {/* MonochromePie */}
-
-
-
-
- {/* SimpleDonut */}
-
-
- {/* GradientDonut */}
-
-
- {/* PieCharts */}
-
-
-
- >
- );
-}
diff --git a/pages/pages/faq.js b/pages/pages/faq.js
deleted file mode 100644
index 9e55ab8..0000000
--- a/pages/pages/faq.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import BasicAccordion from '@/components/UIElements/Accordion/BasicAccordion';
-import ControlledAccordion from '@/components/UIElements/Accordion/ControlledAccordion';
-import Customization from '@/components/UIElements/Accordion/Customization';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-export default function FAQ() {
- return (
- <>
- {/* Page title */}
-
-
- {/* BasicAccordion */}
-
-
- {/* ControlledAccordion */}
-
-
- {/* Customization */}
-
- >
- );
-}
diff --git a/pages/pages/gallery.js b/pages/pages/gallery.js
deleted file mode 100644
index 21f1a2b..0000000
--- a/pages/pages/gallery.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import GalleryContent from '@/components/Pages/Gallery/GalleryContent';
-
-export default function Gallery() {
- return (
- <>
- {/* Page title */}
-
-
Gallery
-
-
- Dashboard
-
- Gallery
-
-
-
-
- >
- );
-}
diff --git a/pages/pages/invoice-details.js b/pages/pages/invoice-details.js
deleted file mode 100644
index 0c770ad..0000000
--- a/pages/pages/invoice-details.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import InvoiceDetailsContent from '@/components/Pages/Invoice/InvoiceDetailsContent'
-
-export default function InvoiceDetails() {
- return (
- <>
- {/* Page title */}
-
-
Invoice Details
-
-
- Dashboard
-
- Invoice Details
-
-
-
-
- >
- );
-}
diff --git a/pages/pages/invoice.js b/pages/pages/invoice.js
deleted file mode 100644
index 814811c..0000000
--- a/pages/pages/invoice.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import InvoiceLists from '@/components/Pages/Invoice/InvoiceLists';
-
-export default function Invoice() {
- return (
- <>
- {/* Page title */}
-
-
Invoice
-
-
- Dashboard
-
- Invoice
-
-
-
-
- >
- );
-}
diff --git a/pages/pages/maps.js b/pages/pages/maps.js
deleted file mode 100644
index fc72744..0000000
--- a/pages/pages/maps.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import GoogleMap from '@/components/Pages/Maps/GoogleMap';
-import BasicMarkers from '@/components/Pages/Maps/BasicMarkers';
-import EuropeMapWithGraticule from '@/components/Pages/Maps/EuropeMapWithGraticule';
-
-export default function Maps() {
- return (
- <>
- {/* Page title */}
-
-
- {/* GoogleMap */}
-
-
- {/* BasicMarkers */}
-
-
- {/* EuropeMapWithGraticule */}
-
- >
- );
-}
diff --git a/pages/pages/material-icons.js b/pages/pages/material-icons.js
deleted file mode 100644
index a3cc13e..0000000
--- a/pages/pages/material-icons.js
+++ /dev/null
@@ -1,558 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import AbcIcon from '@mui/icons-material/Abc';
-import AcUnitIcon from '@mui/icons-material/AcUnit';
-import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';
-import AccessAlarmsIcon from '@mui/icons-material/AccessAlarms';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled';
-import AccessibilityIcon from '@mui/icons-material/Accessibility';
-import AccessibilityNewIcon from '@mui/icons-material/AccessibilityNew';
-import AccessibleIcon from '@mui/icons-material/Accessible';
-import AccessibleForwardIcon from '@mui/icons-material/AccessibleForward';
-import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
-import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
-import AccountBoxIcon from '@mui/icons-material/AccountBox';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
-import AccountTreeIcon from '@mui/icons-material/AccountTree';
-import AdUnitsIcon from '@mui/icons-material/AdUnits';
-import AdbIcon from '@mui/icons-material/Adb';
-import AddIcon from '@mui/icons-material/Add';
-import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
-import AddAlarmIcon from '@mui/icons-material/AddAlarm';
-import AddAlertIcon from '@mui/icons-material/AddAlert';
-import AddBoxIcon from '@mui/icons-material/AddBox';
-import AddBusinessIcon from '@mui/icons-material/AddBusiness';
-import AddCardIcon from '@mui/icons-material/AddCard';
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
-import AddToQueueIcon from '@mui/icons-material/AddToQueue';
-import AlbumIcon from '@mui/icons-material/Album';
-import AlignVerticalBottomIcon from '@mui/icons-material/AlignVerticalBottom';
-import AllInboxIcon from '@mui/icons-material/AllInbox';
-import Button from '@mui/material/Button';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-
-export default function MaterialIcons() {
- return (
- <>
- {/* Page title */}
-
-
Material Icons
-
-
- Dashboard
-
- Material Icons
-
-
-
-
-
- Material Icons
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- View All Icons
-
-
-
-
- >
- );
-}
diff --git a/pages/pages/pricing.js b/pages/pages/pricing.js
deleted file mode 100644
index 3783134..0000000
--- a/pages/pages/pricing.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PricingPlanStyle1 from '@/components/Pages/Pricing/PricingPlanStyle1';
-import PricingPlanStyle2 from '@/components/Pages/Pricing/PricingPlanStyle2';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Pricing() {
- return (
- <>
- {/* Page title */}
-
-
Pricing
-
-
- Dashboard
-
- Pricing
-
-
-
-
-
-
- >
- );
-}
diff --git a/pages/pages/profile.js b/pages/pages/profile.js
deleted file mode 100644
index 16a0db7..0000000
--- a/pages/pages/profile.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Features from '@/components/Pages/Profile/Features';
-import PersonalInformation from '@/components/Pages/Profile/PersonalInformation';
-import ActivityTimeline from '@/components/Pages/Profile/ActivityTimeline';
-import Overview from '@/components/Pages/Profile/Overview';
-import MyTasks from '@/components/Pages/Profile/MyTasks';
-import ProfileContent from '@/components/Pages/Profile/ProfileContent';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Profile() {
- return (
- <>
- {/* Page title */}
-
-
Profile
-
-
- Dashboard
-
- Profile
-
-
-
-
-
- {/* ProfileContent */}
-
-
- {/* Personal Information */}
-
-
- {/* ActivityTimeline */}
-
-
-
-
- {/* Features */}
-
-
- {/* Overview */}
-
-
- {/* MyTasks */}
-
-
-
- >
- );
-}
diff --git a/pages/pages/recharts.js b/pages/pages/recharts.js
deleted file mode 100644
index 30da6b8..0000000
--- a/pages/pages/recharts.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import NavBar from '@/components/Pages/Charts/NavBar';
-import SimpleLineChart from '@/components/Pages/Charts/Recharts/LineChart/SimpleLineChart';
-import VerticalLineChart from '@/components/Pages/Charts/Recharts/LineChart/VerticalLineChart';
-import SimpleAreaChart from '@/components/Pages/Charts/Recharts/AreaChart/SimpleAreaChart';
-import StackedAreaChart from '@/components/Pages/Charts/Recharts/AreaChart/StackedAreaChart';
-import TinyBarChart from '@/components/Pages/Charts/Recharts/BarChart/TinyBarChart';
-import SimpleBarChart from '@/components/Pages/Charts/Recharts/BarChart/SimpleBarChart';
-import LineBarAreaComposedChart from '@/components/Pages/Charts/Recharts/ComposedChart/LineBarAreaComposedChart';
-import SameDataComposedChart from '@/components/Pages/Charts/Recharts/ComposedChart/SameDataComposedChart';
-import SimpleScatterChart from '@/components/Pages/Charts/Recharts/ScatterChart/SimpleScatterChart';
-import ThreeDimScatterChart from '@/components/Pages/Charts/Recharts/ScatterChart/ThreeDimScatterChart';
-import TwoLevelPieChart from './../../components/Pages/Charts/Recharts/PieChart/TwoLevelPieChart';
-import TwoSimplePieChart from '@/components/Pages/Charts/Recharts/PieChart/TwoSimplePieChart';
-import SimpleRadarChart from '@/components/Pages/Charts/Recharts/RadarChart/SimpleRadarChart';
-import SpecifiedDomainRadarChart from '@/components/Pages/Charts/Recharts/RadarChart/SpecifiedDomainRadarChart';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Recharts() {
- return (
- <>
- {/* Page title */}
-
-
Recharts
-
-
- Dashboard
-
- Recharts
-
-
-
- {/* Nav */}
-
-
-
-
- {/* SimpleLineChart */}
-
-
-
-
- {/* VerticalLineChart */}
-
-
-
-
-
-
- {/* SimpleAreaChart */}
-
-
-
-
- {/* StackedAreaChart */}
-
-
-
-
-
-
- {/* TinyBarChart */}
-
-
-
-
- {/* SimpleBarChart */}
-
-
-
-
-
-
- {/* LineBarAreaComposedChart */}
-
-
-
-
- {/* SameDataComposedChart */}
-
-
-
-
-
-
- {/* SimpleScatterChart */}
-
-
-
-
- {/* ThreeDimScatterChart */}
-
-
-
-
-
-
- {/* TwoLevelPieChart */}
-
-
-
-
- {/* TwoSimplePieChart */}
-
-
-
-
-
-
- {/* SimpleRadarChart */}
-
-
-
-
- {/* SpecifiedDomainRadarChart */}
-
-
-
- >
- );
-}
diff --git a/pages/pages/remixicon.js b/pages/pages/remixicon.js
deleted file mode 100644
index e09fe0e..0000000
--- a/pages/pages/remixicon.js
+++ /dev/null
@@ -1,528 +0,0 @@
-import React from "react";
-import Card from "@mui/material/Card";
-import { Box, Typography } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import Button from '@mui/material/Button';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Remixicon() {
- return (
- <>
- {/* Page title */}
-
-
Remixicon
-
-
- Dashboard
-
- Remixicon
-
-
-
-
-
- Remixicon
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- View All Icons
-
-
-
-
- >
- );
-}
diff --git a/pages/pages/search.js b/pages/pages/search.js
deleted file mode 100644
index 5264c63..0000000
--- a/pages/pages/search.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import SearchContent from '@/components/Pages/Search/SearchContent';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Search() {
- return (
- <>
- {/* Page title */}
-
-
Search
-
-
- Dashboard
-
- Search
-
-
-
-
- >
- );
-}
diff --git a/pages/pages/support.js b/pages/pages/support.js
deleted file mode 100644
index f99170e..0000000
--- a/pages/pages/support.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import React from 'react';
-import { Typography } from "@mui/material";
-import Box from '@mui/material/Box';
-import Grid from "@mui/material/Grid";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import TextareaAutosize from '@mui/base/TextareaAutosize';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Support() {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- return (
- <>
- {/* Page title */}
-
-
Support
-
-
- Dashboard
-
- Support
-
-
-
-
-
-
-
- Contact with Us
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
-
-
-
-
- Name
-
-
-
-
-
-
- Email
-
-
-
-
-
-
- Subject
-
-
-
-
-
-
- Message
-
-
-
-
-
-
-
-
- Send Message
-
-
-
-
-
- >
- );
-}
diff --git a/pages/pages/terms-conditions.js b/pages/pages/terms-conditions.js
deleted file mode 100644
index b3c8e1d..0000000
--- a/pages/pages/terms-conditions.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import TermsConditionsContent from '@/components/Pages/TermsConditions/TermsConditionsContent';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function TermsConditions() {
- return (
- <>
- {/* Page title */}
-
-
Terms & Conditions
-
-
- Dashboard
-
- Terms & Conditions
-
-
-
-
- >
- );
-}
diff --git a/pages/pages/testimonials.js b/pages/pages/testimonials.js
deleted file mode 100644
index bc037ac..0000000
--- a/pages/pages/testimonials.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import TestimonialsOne from '@/components/Pages/Testimonials/TestimonialsOne';
-import TestimonialsTwo from '@/components/Pages/Testimonials/TestimonialsTwo';
-import TestimonialsThree from '@/components/Pages/Testimonials/TestimonialsThree';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Testimonials() {
- return (
- <>
- {/* Page title */}
-
-
Testimonials
-
-
- Dashboard
-
- Testimonials
-
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/pages/pages/timeline.js b/pages/pages/timeline.js
deleted file mode 100644
index e19b636..0000000
--- a/pages/pages/timeline.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import TimelineStyle1 from '@/components/Pages/Timeline/TimelineStyle1';
-import TimelineStyle2 from '@/components/Pages/Timeline/TimelineStyle2';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Timeline() {
- return (
- <>
- {/* Page title */}
-
-
Timeline
-
-
- Dashboard
-
- Timeline
-
-
-
-
-
-
- >
- );
-}
diff --git a/pages/project-management.js b/pages/project-management.js
deleted file mode 100644
index 4f07b24..0000000
--- a/pages/project-management.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import Features from '@/components/Dashboard/ProjectManagement/Features';
-import TaskDistribution from '@/components/Dashboard/ProjectManagement/TaskDistribution';
-import MyTasks from '@/components/Dashboard/ProjectManagement/MyTasks';
-import TotalUsers from '@/components/Dashboard/ProjectManagement/TotalUsers';
-import CompletedTasks from '@/components/Dashboard/ProjectManagement/CompletedTasks';
-import TasksPerformance from '@/components/Dashboard/ProjectManagement/TasksPerformance';
-import IssuesSummary from '@/components/Dashboard/ProjectManagement/IssuesSummary';
-import AllProjects from '@/components/Dashboard/ProjectManagement/AllProjects';
-import TeamMembers from '@/components/Dashboard/ProjectManagement/TeamMembers';
-import ActivityTimeline from '@/components/Dashboard/ProjectManagement/ActivityTimeline';
-
-export default function ProjectManagement() {
- return (
- <>
- {/* Page title */}
-
-
Project Management
-
-
- Dashboard
-
-
- Project Management
-
-
-
-
- {/* Features */}
-
-
-
-
- {/* TaskDistribution */}
-
-
-
-
- {/* MyTasks */}
-
-
-
-
-
-
- {/* TotalUsers */}
-
-
-
-
- {/* CompletedTasks */}
-
-
-
-
- {/* TasksPerformance */}
-
-
-
-
-
-
- {/* IssuesSummary */}
-
-
- {/* AllProjects */}
-
-
-
-
- {/* TeamMembers */}
-
-
- {/* ActivityTimeline */}
-
-
-
- >
- );
-}
diff --git a/pages/projects/clients.js b/pages/projects/clients.js
deleted file mode 100644
index ea439d0..0000000
--- a/pages/projects/clients.js
+++ /dev/null
@@ -1,245 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import Button from '@mui/material/Button';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-const clientsLists = [
- {
- image: '/images/member1.png',
- name: 'Alvarado Turner',
- userName: '@alvaradoTurner',
- email: 'alvaradoturner@gmail.com',
- projectsUrl: '#',
- location: 'New York, USA',
- phone: '+1 123 456 789',
- },
- {
- image: '/images/member2.png',
- name: 'Evangelina Mcclain',
- userName: '@evangelinaMcclain',
- email: 'evangelina@gmail.com',
- projectsUrl: '#',
- location: 'Switzerland',
- phone: '+1 123 468 789',
- },
- {
- image: '/images/member3.png',
- name: 'Candice Munoz',
- userName: '@candiceMunoz',
- email: 'candiceMunoz@gmail.com',
- projectsUrl: '#',
- location: 'Germany',
- phone: '+1 123 456 842',
- },
- {
- image: '/images/member4.png',
- name: 'Bernard Langley',
- userName: '@bernardLangley',
- email: 'bernardLangley@gmail.com',
- projectsUrl: '#',
- location: 'Canada',
- phone: '+1 123 256 789',
- },
- {
- image: '/images/member5.png',
- name: 'Kristie Hall',
- userName: '@kristieHall',
- email: 'kristieHall@gmail.com',
- projectsUrl: '#',
- location: 'United States',
- phone: '+1 123 456 742',
- },
- {
- image: '/images/member6.png',
- name: 'Bolton Obrien',
- userName: '@boltonObrien',
- email: 'boltonObrien@gmail.com',
- projectsUrl: '#',
- location: 'Sweden',
- phone: '+1 123 346 789',
- },
- {
- image: '/images/member7.png',
- name: 'Dee Alvarado',
- userName: '@deeAlvarado',
- email: 'deeAlvarado@gmail.com',
- projectsUrl: '#',
- location: 'Japan',
- phone: '+1 123 456 953',
- },
- {
- image: '/images/member8.png',
- name: 'Cervantes Kramer',
- userName: '@cervantesKramer',
- email: 'cervantesKramer@gmail.com',
- projectsUrl: '#',
- location: 'Australia',
- phone: '+1 123 368 789',
- },
- {
- image: '/images/member9.png',
- name: 'Dejesus Michael',
- userName: '@dejesusMichael',
- email: 'dejesusMichael@gmail.com',
- projectsUrl: '#',
- location: 'United Kingdom',
- phone: '+1 123 456 742',
- },
- {
- image: '/images/member10.png',
- name: 'Alissa Nelson',
- userName: '@alissaNelson',
- email: 'alissaNelson@gmail.com',
- projectsUrl: '#',
- location: 'France',
- phone: '+1 123 356 789',
- },
- {
- image: '/images/member11.png',
- name: 'English Haney',
- userName: '@englishHaney',
- email: 'englishHaney@gmail.com',
- projectsUrl: '#',
- location: 'Denmark',
- phone: '+1 123 456 566',
- },
- {
- image: '/images/member12.png',
- name: 'Edwards Mckenzie',
- userName: '@edwardsMckenzie',
- email: 'edwardsMckenzie@gmail.com',
- projectsUrl: '#',
- location: 'New Zealand',
- phone: '+1 123 357 789',
- },
-];
-
-export default function Clients() {
- return (
- <>
- {/* Page title */}
-
-
Clients
-
-
- Dashboard
-
- Clients
-
-
-
-
- {clientsLists.map((client) => (
-
-
-
-
- {client.name}
-
-
-
- {client.userName}
-
-
-
-
-
- Message
-
-
-
-
-
- Projects
-
-
-
-
-
-
-
- Location
-
-
- {client.location}
-
-
-
-
-
- Phone
-
-
- {client.phone}
-
-
-
-
-
- ))}
-
- >
- );
-}
diff --git a/pages/projects/index.js b/pages/projects/index.js
deleted file mode 100644
index 2253a2e..0000000
--- a/pages/projects/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css'
-import AllProjects from '@/components/Projects/AllProjects';
-
-const Projects = () => {
- return (
- <>
- {/* Page title */}
-
-
Projects
-
-
- Dashboard
-
- Projects
-
-
-
-
- >
- )
-}
-
-export default Projects;
\ No newline at end of file
diff --git a/pages/projects/kanban-board.js b/pages/projects/kanban-board.js
deleted file mode 100644
index 5a6bea6..0000000
--- a/pages/projects/kanban-board.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import NewProjects from "@/components/Projects/KanbanBoard/NewProjects";
-import ToDo from "@/components/Projects/KanbanBoard/ToDo";
-import InReview from "@/components/Projects/KanbanBoard/InReview";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-const KanbanBoard = () => {
- return (
- <>
- {/* Page title */}
-
-
Kanban Board
-
-
- Dashboard
-
- Kanban Board
-
-
-
-
-
- {/* NewProjects */}
-
-
-
-
- {/* ToDo */}
-
-
-
-
- {/* InReview */}
-
-
-
- >
- );
-};
-
-export default KanbanBoard;
diff --git a/pages/projects/project-create.js b/pages/projects/project-create.js
deleted file mode 100644
index 3883c97..0000000
--- a/pages/projects/project-create.js
+++ /dev/null
@@ -1,286 +0,0 @@
-import React from 'react';
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import Grid from "@mui/material/Grid";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import CategoriesSelect from '@/components/Projects/ProjectCreate/CategoriesSelect';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-import dynamic from 'next/dynamic'
-import MemberSelect from '@/components/Projects/ProjectCreate/MemberSelect';
-const RichTextEditor = dynamic(() => import('@mantine/rte'), {
- ssr: false,
-})
-
-const ProjectCreate = () => {
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
-
- // Select Priority
- const [priority, setPriority] = React.useState('');
- const handleChange = (event) => {
- setPriority(event.target.value);
- };
-
- return (
- <>
- {/* Page title */}
-
-
Project Create
-
-
- Dashboard
-
- Project Create
-
-
-
-
-
- Create Project
-
-
-
-
-
-
- Project Name
-
-
-
-
-
-
- Start Date
-
-
-
-
-
-
- End Date
-
-
-
-
-
-
- Project Description
-
-
-
-
-
-
-
- Budget
-
-
-
-
-
-
- Priority Status
-
-
-
- Priority
-
- High
- Medium
- Low
-
-
-
-
-
-
- Categories
-
-
- {/* CategoriesSelect */}
-
-
-
-
-
- Members
-
-
- {/* MemberSelect */}
-
-
-
-
-
- {" "}
- Create Project
-
-
-
-
-
- >
- )
-}
-
-export default ProjectCreate;
\ No newline at end of file
diff --git a/pages/projects/task.js b/pages/projects/task.js
deleted file mode 100644
index 1a69f38..0000000
--- a/pages/projects/task.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid";
-import TotalUsers from "@/components/Projects/Task/TotalUsers";
-import CompletedTasks from "@/components/Projects/Task/CompletedTasks";
-import TasksPerformance from "@/components/Projects/Task/TasksPerformance";
-import MyTasks from "@/components/Projects/Task/MyTasks";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-const Task = () => {
- return (
- <>
- {/* Page title */}
-
-
-
-
- {/* TotalUsers */}
-
-
-
-
- {/* CompletedTasks */}
-
-
-
-
- {/* TasksPerformance */}
-
-
-
-
- {/* MyTasks */}
-
- >
- );
-};
-
-export default Task;
diff --git a/pages/projects/team.js b/pages/projects/team.js
deleted file mode 100644
index c872327..0000000
--- a/pages/projects/team.js
+++ /dev/null
@@ -1,584 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-import Card from "@mui/material/Card";
-import Grid from "@mui/material/Grid";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
-import Button from '@mui/material/Button';
-import { styled } from "@mui/material/styles";
-import LinearProgress, {
- linearProgressClasses,
-} from "@mui/material/LinearProgress";
-
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
- height: 5,
- borderRadius: 5,
- [`&.${linearProgressClasses.colorPrimary}`]: {
- backgroundColor:
- theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
- },
- [`& .${linearProgressClasses.bar}`]: {
- borderRadius: 5,
- backgroundColor: theme.palette.mode === "light" ? "#757FEF" : "#308fe8",
- },
-}));
-
-const TeamMembers = [
- {
- id: 1,
- name: "Jason Haston",
- image: "/images/member1.png",
- designation: "Team Leader",
- teamName: "UI/UX Design Team",
- introText: "Contrary to popular belief, Lorem Ipsum is not simply",
- teamMemberLists: [
- {
- id: 1,
- image: "/images/member1.png",
- },
- {
- id: 2,
- image: "/images/member2.png",
- },
- {
- id: 3,
- image: "/images/member3.png",
- },
- {
- id: 4,
- image: "/images/member4.png",
- },
- {
- id: 5,
- image: "/images/member5.png",
- },
- {
- id: 6,
- image: "/images/member6.png",
- },
- ],
- viewDetailsLink: "#",
- projectName: "UI/UX Project",
- totalTask: "40/80",
- taskProgress: "50",
- },
- {
- id: 2,
- name: "Willie Miller",
- image: "/images/member2.png",
- designation: "Team Leader",
- teamName: "Frontend Developer Team",
- introText: "Contrary to popular belief, Lorem Ipsum is not simply",
- teamMemberLists: [
- {
- id: 1,
- image: "/images/member2.png",
- },
- {
- id: 2,
- image: "/images/member3.png",
- },
- {
- id: 3,
- image: "/images/member4.png",
- },
- {
- id: 4,
- image: "/images/member5.png",
- },
- {
- id: 5,
- image: "/images/member6.png",
- },
- ],
- viewDetailsLink: "#",
- projectName: "Transfer Money",
- totalTask: "60/100",
- taskProgress: "60",
- },
- {
- id: 3,
- name: "Jordan Stevenson",
- image: "/images/member3.png",
- designation: "Team Leader",
- teamName: "Web Design Team",
- introText: "Contrary to popular belief, Lorem Ipsum is not simply",
- teamMemberLists: [
- {
- id: 1,
- image: "/images/member3.png",
- },
- {
- id: 2,
- image: "/images/member4.png",
- },
- {
- id: 3,
- image: "/images/member5.png",
- },
- {
- id: 4,
- image: "/images/member6.png",
- },
- {
- id: 5,
- image: "/images/member7.png",
- },
- ],
- viewDetailsLink: "#",
- projectName: "Payment App",
- totalTask: "70/100",
- taskProgress: "70",
- },
- {
- id: 4,
- name: "Stevenson",
- image: "/images/member4.png",
- designation: "Team Leader",
- teamName: "ReactJS Team",
- introText: "Contrary to popular belief, Lorem Ipsum is not simply",
- teamMemberLists: [
- {
- id: 1,
- image: "/images/member4.png",
- },
- {
- id: 2,
- image: "/images/member5.png",
- },
- {
- id: 3,
- image: "/images/member6.png",
- },
- {
- id: 4,
- image: "/images/member7.png",
- },
- {
- id: 5,
- image: "/images/member8.png",
- },
- ],
- viewDetailsLink: "#",
- projectName: "React App",
- totalTask: "80/100",
- taskProgress: "80",
- },
- {
- id: 5,
- name: "Marnie Flowers",
- image: "/images/member5.png",
- designation: "Team Leader",
- teamName: "Angular JS Team",
- introText: "Contrary to popular belief, Lorem Ipsum is not simply",
- teamMemberLists: [
- {
- id: 1,
- image: "/images/member5.png",
- },
- {
- id: 2,
- image: "/images/member6.png",
- },
- {
- id: 3,
- image: "/images/member7.png",
- },
- {
- id: 4,
- image: "/images/member8.png",
- },
- {
- id: 5,
- image: "/images/member9.png",
- },
- ],
- viewDetailsLink: "#",
- projectName: "Payment App",
- totalTask: "90/100",
- taskProgress: "90",
- },
- {
- id: 6,
- name: "Steven Hari",
- image: "/images/member6.png",
- designation: "Team Leader",
- teamName: "Vue.js Team",
- introText: "Contrary to popular belief, Lorem Ipsum is not simply",
- teamMemberLists: [
- {
- id: 1,
- image: "/images/member6.png",
- },
- {
- id: 2,
- image: "/images/member7.png",
- },
- {
- id: 3,
- image: "/images/member8.png",
- },
- {
- id: 4,
- image: "/images/member9.png",
- },
- {
- id: 5,
- image: "/images/member10.png",
- },
- ],
- viewDetailsLink: "#",
- projectName: "Banking app",
- totalTask: "100/100",
- taskProgress: "100",
- },
- {
- id: 7,
- name: "Keith",
- image: "/images/member7.png",
- designation: "Team Leader",
- teamName: "Content Writing",
- introText: "Contrary to popular belief, Lorem Ipsum is not simply",
- teamMemberLists: [
- {
- id: 1,
- image: "/images/member7.png",
- },
- {
- id: 2,
- image: "/images/member8.png",
- },
- {
- id: 3,
- image: "/images/member9.png",
- },
- {
- id: 4,
- image: "/images/member10.png",
- },
- {
- id: 5,
- image: "/images/member11.png",
- },
- ],
- viewDetailsLink: "#",
- projectName: "Blogging Template",
- totalTask: "40/100",
- taskProgress: "40",
- },
- {
- id: 8,
- name: "Marion",
- image: "/images/member8.png",
- designation: "Team Leader",
- teamName: "E-commerce",
- introText: "Contrary to popular belief, Lorem Ipsum is not simply",
- teamMemberLists: [
- {
- id: 1,
- image: "/images/member9.png",
- },
- {
- id: 2,
- image: "/images/member1.png",
- },
- {
- id: 3,
- image: "/images/member2.png",
- },
- {
- id: 4,
- image: "/images/member3.png",
- },
- {
- id: 5,
- image: "/images/member4.png",
- },
- ],
- viewDetailsLink: "#",
- projectName: "E-commerce Template",
- totalTask: "55/100",
- taskProgress: "55",
- },
- {
- id: 9,
- name: "Marshall",
- image: "/images/member9.png",
- designation: "Team Leader",
- teamName: "App Development",
- introText: "Contrary to popular belief, Lorem Ipsum is not simply",
- teamMemberLists: [
- {
- id: 1,
- image: "/images/member9.png",
- },
- {
- id: 2,
- image: "/images/member3.png",
- },
- {
- id: 3,
- image: "/images/member4.png",
- },
- {
- id: 4,
- image: "/images/member5.png",
- },
- {
- id: 5,
- image: "/images/member6.png",
- },
- ],
- viewDetailsLink: "#",
- projectName: "Admin Template",
- totalTask: "40/100",
- taskProgress: "40",
- },
-]
-
-const Team = () => {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- return (
- <>
- {/* Page title */}
-
-
-
- {TeamMembers.map((member) => (
-
-
-
-
-
-
-
- {member.name}
-
-
- {member.designation}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {member.teamName}
-
-
- {member.introText}
-
-
-
-
-
-
- {member.teamMemberLists.map((team) => (
-
- ))}
-
-
-
-
-
-
- view details
-
-
-
-
-
-
-
-
-
- {member.projectName}
-
-
- {member.totalTask}
-
-
-
-
-
- {member.taskProgress}% Completed
-
-
-
-
-
-
-
-
- ))}
-
- >
- );
-};
-
-export default Team;
diff --git a/pages/projects/user.js b/pages/projects/user.js
deleted file mode 100644
index c59178d..0000000
--- a/pages/projects/user.js
+++ /dev/null
@@ -1,910 +0,0 @@
-import * as React from "react";
-import { Box, Typography } from "@mui/material";
-import Card from "@mui/material/Card";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import Grid from "@mui/material/Grid";
-import Tooltip from "@mui/material/Tooltip";
-import DeleteIcon from "@mui/icons-material/Delete";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
-import ClearIcon from "@mui/icons-material/Clear";
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-import Checkbox from '@mui/material/Checkbox';
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import CloseIcon from '@mui/icons-material/Close';
-
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-// Create new user Modal
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
- '& .MuiDialogContent-root': {
- padding: theme.spacing(2),
- },
- '& .MuiDialogActions-root': {
- padding: theme.spacing(1),
- },
-}));
-
-function BootstrapDialogTitle(props) {
- const { children, onClose, ...other } = props;
-
- return (
-
- {children}
- {onClose ? (
- theme.palette.grey[500],
- }}
- >
-
-
- ) : null}
-
- );
-}
-
-BootstrapDialogTitle.propTypes = {
- children: PropTypes.node,
- onClose: PropTypes.func.isRequired,
-};
-// End Create new user Modal
-
-function UsersList(props) {
- const theme = useTheme();
- const { count, page, rowsPerPage, onPageChange } = props;
-
- const handleFirstPageButtonClick = (event) => {
- onPageChange(event, 0);
- };
-
- const handleBackButtonClick = (event) => {
- onPageChange(event, page - 1);
- };
-
- const handleNextButtonClick = (event) => {
- onPageChange(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event) => {
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
-
- {theme.direction === "rtl" ? : }
-
-
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === "rtl" ? (
-
- ) : (
-
- )}
-
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === "rtl" ? : }
-
-
- );
-}
-
-UsersList.propTypes = {
- count: PropTypes.number.isRequired,
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.number.isRequired,
- rowsPerPage: PropTypes.number.isRequired,
-};
-
-function createData(name, userName, image, email, rolls, status, badgeClass, projects) {
- return {
- name,
- userName,
- image,
- email,
- rolls,
- status,
- badgeClass,
- projects
- };
-}
-
-const rows = [
- createData(
- "Evangelina Mcclain",
- "@jstevenson5c",
- "/images/user1.png",
- "jordansteve@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "165"
- ),
- createData(
- "Candice Munoz",
- "@candice3unoz",
- "/images/user2.png",
- "candicemunoz@gmail.com",
- "Administrator",
- "Active",
- "successBadge",
- "120"
- ),
- createData(
- "Mike Mcclain",
- "@mike4mcclain",
- "/images/user3.png",
- "mikemcclain@gmail.com",
- "Contributor",
- "Active",
- "successBadge",
- "220"
- ),
- createData(
- "Bernard Langley",
- "@bernardlangley",
- "/images/user4.png",
- "bernardlangley@gmail.com",
- "Agent",
- "Deactive",
- "dangerBadge",
- "122"
- ),
- createData(
- "Kristie Hall",
- "@kristie7hall",
- "/images/user5.png",
- "kristiehall@gmail.com",
- "Contributor",
- "Active",
- "successBadge",
- "360"
- ),
- createData(
- "Bolton Obrien",
- "@bolton4obrien",
- "/images/user6.png",
- "boltonobrien@gmail.com",
- "Administrator",
- "Active",
- "successBadge",
- "250"
- ),
- createData(
- "Dee Alvarado",
- "@dee3alvarado",
- "/images/user7.png",
- "deealvarado@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "140"
- ),
- createData(
- "Cervantes Kramer",
- "@cervantes4kramer",
- "/images/user8.png",
- "cervantes4kramer@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "345"
- ),
- createData(
- "Dejesus Michael",
- "@dejesus1michael",
- "/images/user9.png",
- "dejesusmichael@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "323"
- ),
- createData(
- "Alissa Nelson",
- "@alissa1nelson",
- "/images/user10.png",
- "alissa1nelson@gmail.com",
- "Agent",
- "Deactive",
- "dangerBadge",
- "451"
- ),
- createData(
- "Milton",
- "@milton",
- "/images/user11.png",
- "milton@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "432"
- ),
- createData(
- "Claude",
- "@claude",
- "/images/user12.png",
- "claude@gmail.com",
- "Agent",
- "Deactive",
- "dangerBadge",
- "543"
- ),
- createData(
- "Joshua",
- "@joshua",
- "/images/user13.png",
- "joshua@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "543"
- ),
- createData(
- "Harvey",
- "@harvey",
- "/images/user14.png",
- "harvey@gmail.com",
- "Agent",
- "Deactive",
- "dangerBadge",
- "432"
- ),
- createData(
- "Antonio",
- "@antonio",
- "/images/user15.png",
- "antonio@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "765"
- ),
- createData(
- "Julian",
- "@julian",
- "/images/user16.png",
- "julian@gmail.com",
- "Agent",
- "Active",
- "successBadge",
- "678"
- ),
- createData(
- "Harold",
- "@harold",
- "/images/user17.png",
- "harold@gmail.com",
- "Agent",
- "Deactive",
- "dangerBadge",
- "165"
- ),
- createData(
- "Kingston",
- "@kingston",
- "/images/user18.png",
- "kingston@info.com",
- "Agent",
- "Active",
- "successBadge",
- "165"
- ),
-].sort((a, b) => (a.name < b.name ? -1 : 1));
-
-export default function User() {
- // Table
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
- // Avoid a layout jump when reaching the last page with empty rows.
- const emptyRows =
- page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
-
- const handleChangeRowsPerPage = (event) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
-
- // Create new user modal
- const [open, setOpen] = React.useState(false);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
- const handleClose = () => {
- setOpen(false);
- };
-
- const handleSubmit = (event) => {
- event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get("email"),
- password: data.get("password"),
- });
- };
- // End Add Task Modal
-
- return (
- <>
- {/* Page title */}
-
-
Users
-
-
- Dashboard
-
- Users
-
-
-
-
-
-
- Users List
-
-
-
- {" "}
- Create New User
-
-
-
-
-
-
-
-
- Name
-
-
-
- Email
-
-
-
- Rolls
-
-
-
- Status
-
-
-
- Projects
-
-
-
- Action
-
-
-
-
-
- {(rowsPerPage > 0
- ? rows.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : rows
- ).map((row) => (
-
-
-
-
-
-
-
- {row.name}
-
-
- {row.userName}
-
-
-
-
-
-
- {row.email}
-
-
-
- {row.rolls}
-
-
-
- {row.status}
-
-
-
- {row.projects}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
- {emptyRows > 0 && (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- {/* Create new user modal */}
-
-
-
-
- Create New User
-
-
-
-
-
-
-
-
-
-
-
-
- Image
-
-
-
-
-
-
-
- Name
-
-
-
-
-
-
-
- User Name
-
-
-
-
-
-
-
- Email
-
-
-
-
-
-
-
- Rolls
-
-
-
-
-
-
-
- Projects
-
-
-
-
-
-
-
- {" "}
- Create New User
-
-
-
-
-
-
-
- >
- );
-}
diff --git a/pages/settings/account.js b/pages/settings/account.js
deleted file mode 100644
index 278544e..0000000
--- a/pages/settings/account.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import Profile from "@/components/Settings/Account/Profile";
-import NavBar from "@/components/Settings/NavBar";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-
-export default function Account() {
- return (
- <>
-
-
- Settings
-
-
- {/* NavBar */}
-
-
- {/* Profile */}
-
-
- >
- );
-}
diff --git a/pages/settings/privacy-policy.js b/pages/settings/privacy-policy.js
deleted file mode 100644
index 9a2b465..0000000
--- a/pages/settings/privacy-policy.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import NavBar from "@/components/Settings/NavBar";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import PrivacyPolicyContent from "@/components/Settings/Account/PrivacyPolicyContent";
-
-export default function PrivacyPolicy() {
- return (
- <>
-
-
- Privacy Policy
-
-
- {/* NavBar */}
-
-
- {/* PrivacyPolicyContent */}
-
-
- >
- );
-}
diff --git a/pages/settings/security.js b/pages/settings/security.js
deleted file mode 100644
index 8c1d128..0000000
--- a/pages/settings/security.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import NavBar from "@/components/Settings/NavBar";
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import ChangePassword from "@/components/Settings/Account/ChangePassword";
-
-export default function Account() {
- return (
- <>
-
-
- Settings
-
-
- {/* NavBar */}
-
-
- {/* ChangePassword */}
-
-
- >
- );
-}
diff --git a/pages/ui-elements/accordion.js b/pages/ui-elements/accordion.js
deleted file mode 100644
index a9c63dd..0000000
--- a/pages/ui-elements/accordion.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import BasicAccordion from '@/components/UIElements/Accordion/BasicAccordion';
-import ControlledAccordion from '@/components/UIElements/Accordion/ControlledAccordion';
-import Customization from '@/components/UIElements/Accordion/Customization';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Accordion() {
- return (
- <>
- {/* Page title */}
-
-
Accordion
-
-
- Dashboard
-
- Accordion
-
-
-
-
-
- {/* BasicAccordion */}
-
-
- {/* Customization */}
-
-
-
-
- {/* ControlledAccordion */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/alerts.js b/pages/ui-elements/alerts.js
deleted file mode 100644
index a63dea7..0000000
--- a/pages/ui-elements/alerts.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import BasicAlerts from '@/components/UIElements/Alerts/BasicAlerts';
-import DescriptionAlerts from '@/components/UIElements/Alerts/DescriptionAlerts';
-import Actions from '@/components/UIElements/Alerts/Actions';
-import Transition from '@/components/UIElements/Alerts/Transition';
-import Icons from '@/components/UIElements/Alerts/Icons';
-import Variants from '@/components/UIElements/Alerts/Variants';
-import Filled from '@/components/UIElements/Alerts/Filled';
-import Color from '@/components/UIElements/Alerts/Color';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Alerts() {
- return (
- <>
- {/* Page title */}
-
-
Alerts
-
-
- Dashboard
-
- Alerts
-
-
-
-
-
- {/* BasicAlerts */}
-
-
- {/* DescriptionAlerts */}
-
-
- {/* Variants */}
-
-
-
-
- {/* Actions */}
-
-
- {/* Transition */}
-
-
- {/* Icons */}
-
-
- {/* Filled */}
-
-
- {/* Color */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/autocomplete.js b/pages/ui-elements/autocomplete.js
deleted file mode 100644
index e315a49..0000000
--- a/pages/ui-elements/autocomplete.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import ComboBox from '@/components/UIElements/Autocomplete/ComboBox';
-import CountrySelect from '@/components/UIElements/Autocomplete/CountrySelect';
-import CustomizedHook from '@/components/UIElements/Autocomplete/CustomizedHook';
-import LimitTags from '@/components/UIElements/Autocomplete/LimitTags';
-import CustomizeTextareaComponent from '@/components/UIElements/Autocomplete/CustomizeTextareaComponent';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Autocomplete() {
- return (
- <>
- {/* Page title */}
-
-
Autocomplete
-
-
- Dashboard
-
- Autocomplete
-
-
-
-
-
- {/* ComboBox */}
-
-
- {/* CustomizedHook */}
-
-
- {/* CustomizeTextareaComponent */}
-
-
-
-
- {/* CountrySelect */}
-
-
- {/* LimitTags */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/avatar.js b/pages/ui-elements/avatar.js
deleted file mode 100644
index 02aa3e4..0000000
--- a/pages/ui-elements/avatar.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import SingleUserExample from '@/components/UIElements/Avatar/SingleUserExample';
-import GroupUserExample from '@/components/UIElements/Avatar/GroupUserExample';
-import ImageAvatars from '@/components/UIElements/Avatar/ImageAvatars';
-import LetterAvatars from '@/components/UIElements/Avatar/LetterAvatars';
-import SizesAvatars from '@/components/UIElements/Avatar/SizesAvatars';
-import IconAvatars from '@/components/UIElements/Avatar/IconAvatars';
-import Grouped from '@/components/UIElements/Avatar/Grouped';
-import TotalAvatars from '@/components/UIElements/Avatar/TotalAvatars';
-import WithBadge from '@/components/UIElements/Avatar/WithBadge';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Avatar() {
- return (
- <>
- {/* Page title */}
-
-
Avatar
-
-
- Dashboard
-
- Avatar
-
-
-
-
-
- {/* SingleUserExample */}
-
-
- {/* ImageAvatars */}
-
-
- {/* SizesAvatars */}
-
-
- {/* Grouped */}
-
-
- {/* WithBadge */}
-
-
-
-
- {/* GroupUserExample */}
-
-
- {/* LetterAvatars */}
-
-
- {/* IconAvatars */}
-
-
- {/* TotalAvatars */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/badge.js b/pages/ui-elements/badge.js
deleted file mode 100644
index 2137db8..0000000
--- a/pages/ui-elements/badge.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import BasicBadge from '@/components/UIElements/Badge/BasicBadge';
-import Dynamic from '@/components/UIElements/Badge/Dynamic';
-import MaximumValue from '@/components/UIElements/Badge/MaximumValue';
-import BadgeOverlap from '@/components/UIElements/Badge/BadgeOverlap';
-import Accessibility from '@/components/UIElements/Badge/Accessibility';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Badge() {
- return (
- <>
- {/* Page title */}
-
-
Badge
-
-
- Dashboard
-
- Badge
-
-
-
-
-
- {/* BasicBadge */}
-
-
- {/* MaximumValue */}
-
-
- {/* BadgeOverlap */}
-
-
-
-
- {/* Dynamic */}
-
-
- {/* Accessibility */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/buttons.js b/pages/ui-elements/buttons.js
deleted file mode 100644
index b35c35c..0000000
--- a/pages/ui-elements/buttons.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import DefaultButtons from '@/components/UIElements/Buttons/DefaultButtons';
-import OutlineButtons from '@/components/UIElements/Buttons/OutlineButtons';
-import SoftButtons from '@/components/UIElements/Buttons/SoftButtons';
-import ButtonsWithIcon from '@/components/UIElements/Buttons/ButtonsWithIcon';
-import RoundedButtons from '@/components/UIElements/Buttons/RoundedButtons';
-import OutlineRoundedButtons from '@/components/UIElements/Buttons/OutlineRoundedButtons';
-import SizesButtons from '@/components/UIElements/Buttons/SizesButtons';
-import Loading from '@/components/UIElements/Buttons/Loading';
-import BlockButtons from '@/components/UIElements/Buttons/BlockButtons';
-import BasicFAB from '@/components/UIElements/Buttons/BasicFAB';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Buttons() {
- return (
- <>
- {/* Page title */}
-
-
Buttons
-
-
- Dashboard
-
- Buttons
-
-
-
-
-
- {/* DefaultButtons */}
-
-
- {/* SoftButtons */}
-
-
- {/* RoundedButtons */}
-
-
- {/* SizesButtons */}
-
-
- {/* BlockButtons */}
-
-
-
-
- {/* OutlineButtons */}
-
-
- {/* ButtonsWithIcon */}
-
-
- {/* OutlineRoundedButtons */}
-
-
- {/* BasicFAB */}
-
-
- {/* Loading */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/cards.js b/pages/ui-elements/cards.js
deleted file mode 100644
index d770e2c..0000000
--- a/pages/ui-elements/cards.js
+++ /dev/null
@@ -1,975 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import { Box } from "@mui/material";
-import Button from '@mui/material/Button';
-import Card from "@mui/material/Card";
-import { Typography } from "@mui/material";
-import Link from 'next/link';
-import styles from '@/components/UIElements/Cards/Cards.module.css'
-import BasicCard from '@/components/UIElements/Cards/BasicCard';
-import ComplexInteraction from '@/components/UIElements/Cards/ComplexInteraction';
-import Media from '@/components/UIElements/Cards/Media';
-import UIControls from '@/components/UIElements/Cards/UIControls';
-
-export default function Cards() {
- return (
- <>
-
-
- {/* BasicCard */}
-
-
- {/* Start Card */}
-
-
-
- Primary
-
-
-
- Success
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
-
- View Details
-
-
-
- {/* End Card */}
-
- {/* Start Card */}
-
-
-
- Primary
-
-
-
- Success
-
-
-
- Warning
-
-
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
-
- View Details
-
-
-
- {/* End Card */}
-
- {/* Start Card */}
-
-
-
- Primary
-
-
-
- Warning
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
-
- View Details
-
-
-
- {/* End Card */}
-
-
-
- {/* ComplexInteraction */}
-
-
- {/* Start Card */}
-
-
-
- Primary
-
-
-
- Warning
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
-
- View Details
-
-
-
- {/* End Card */}
-
- {/* Start Card */}
-
-
-
-
- Primary
-
-
-
- Success
-
-
-
- Warning
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
- {/* End Card */}
-
- {/* Start Card */}
-
-
-
- Primary
-
-
-
- Warning
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
-
- View Details
-
-
-
- {/* End Card */}
-
-
-
-
- {/* Media */}
-
-
- {/* Start Card */}
-
-
-
- Primary
-
-
-
- Success
-
-
-
- Warning
-
-
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
-
- View Details
-
-
-
- {/* End Card */}
-
- {/* Start Card */}
-
-
-
- Primary
-
-
-
- Success
-
-
-
- Warning
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
-
- View Details
-
-
-
- {/* End Card */}
-
- {/* Start Card */}
-
-
-
-
- Primary
-
-
-
- Success
-
-
-
- Warning
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
- {/* End Card */}
-
-
-
- {/* UIControls */}
-
-
- {/* Start Card */}
-
-
-
- Primary
-
-
-
- Success
-
-
-
- Warning
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
-
- View Details
-
-
-
- {/* End Card */}
-
- {/* Start Card */}
-
-
-
-
- Primary
-
-
-
- Success
-
-
-
- Warning
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
- {/* End Card */}
-
- {/* Start Card */}
-
-
-
- Primary
-
-
-
- Success
-
-
-
-
- Nesta Technologies
-
-
-
- When you enter into any new area of science, you almost always find.
-
-
-
-
- View Details
-
-
-
- {/* End Card */}
-
-
- >
- );
-}
diff --git a/pages/ui-elements/checkbox.js b/pages/ui-elements/checkbox.js
deleted file mode 100644
index 7927618..0000000
--- a/pages/ui-elements/checkbox.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Basic from '@/components/UIElements/Checkbox/Basic';
-import Label from '@/components/UIElements/Checkbox/Label';
-import Size from '@/components/UIElements/Checkbox/Size';
-import Color from '@/components/UIElements/Checkbox/Color';
-import Icon from '@/components/UIElements/Checkbox/Icon';
-import Controlled from '@/components/UIElements/Checkbox/Controlled';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Checkbox() {
- return (
- <>
- {/* Page title */}
-
-
Checkbox
-
-
- Dashboard
-
- Checkbox
-
-
-
-
-
- {/* Basic */}
-
-
- {/* Size */}
-
-
- {/* Icon */}
-
-
-
-
- {/* Label */}
-
-
- {/* Color */}
-
-
- {/* Controlled */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/chip.js b/pages/ui-elements/chip.js
deleted file mode 100644
index 39b6fad..0000000
--- a/pages/ui-elements/chip.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Basic from '@/components/UIElements/Chip/Basic';
-import ChipActions from '@/components/UIElements/Chip/ChipActions';
-import Deletable from '@/components/UIElements/Chip/Deletable';
-import ClickableAndDeletable from '@/components/UIElements/Chip/ClickableAndDeletable';
-import ClickableLink from '@/components/UIElements/Chip/ClickableLink';
-import CustomDeleteIcon from '@/components/UIElements/Chip/CustomDeleteIcon';
-import ChipAdornments from '@/components/UIElements/Chip/ChipAdornments';
-import IconChip from '@/components/UIElements/Chip/IconChip';
-import ColorChip from '@/components/UIElements/Chip/ColorChip';
-import SizesChip from '@/components/UIElements/Chip/SizesChip';
-import ChipArray from '@/components/UIElements/Chip/ChipArray';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Chip() {
- return (
- <>
- {/* Page title */}
-
-
-
-
- {/* Basic */}
-
-
- {/* Deletable */}
-
-
- {/* ClickableLink */}
-
-
- {/* ChipAdornments */}
-
-
- {/* ColorChip */}
-
-
-
-
-
- {/* ChipActions */}
-
-
- {/* ClickableAndDeletable */}
-
-
- {/* CustomDeleteIcon */}
-
-
- {/* IconChip */}
-
-
- {/* SizesChip */}
-
-
- {/* ChipArray */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/image-list.js b/pages/ui-elements/image-list.js
deleted file mode 100644
index c7d3546..0000000
--- a/pages/ui-elements/image-list.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import StandardImageList from '@/components/UIElements/ImageList/StandardImageList';
-import QuiltedImageList from '@/components/UIElements/ImageList/QuiltedImageList';
-import WovenImageList from '@/components/UIElements/ImageList/WovenImageList';
-import MasonryImageList from '@/components/UIElements/ImageList/MasonryImageList';
-import ImageListWithTitleBars from '@/components/UIElements/ImageList/ImageListWithTitleBars';
-import TitleBarBelowImageStandard from '@/components/UIElements/ImageList/TitleBarBelowImageStandard';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function ImageList() {
- return (
- <>
- {/* Page title */}
-
-
Image List
-
-
- Dashboard
-
- Image List
-
-
-
-
-
- {/* StandardImageList */}
-
-
- {/* WovenImageList */}
-
-
- {/* ImageListWithTitleBars */}
-
-
-
-
- {/* QuiltedImageList */}
-
-
- {/* MasonryImageList */}
-
-
- {/* TitleBarBelowImageStandard */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/list.js b/pages/ui-elements/list.js
deleted file mode 100644
index 7fa113a..0000000
--- a/pages/ui-elements/list.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import BasicList from '@/components/UIElements/List/BasicList';
-import NestedList from '@/components/UIElements/List/NestedList';
-import FolderList from '@/components/UIElements/List/FolderList';
-import ListControls from '@/components/UIElements/List/ListControls';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function List() {
- return (
- <>
- {/* Page title */}
-
-
-
-
- {/* BasicList */}
-
-
- {/* FolderList */}
-
-
-
-
- {/* NestedList */}
-
-
- {/* ListControls */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/modal.js b/pages/ui-elements/modal.js
deleted file mode 100644
index c089c9f..0000000
--- a/pages/ui-elements/modal.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import BasicModal from '@/components/UIElements/Modal/BasicModal';
-import NestedModal from '@/components/UIElements/Modal/NestedModal';
-import Transitions from '@/components/UIElements/Modal/Transitions';
-import SimpleDialog from '@/components/UIElements/Modal/SimpleDialog';
-import TransitionsDialog from '@/components/UIElements/Modal/TransitionsDialog';
-import CustomizationDialog from '@/components/UIElements/Modal/CustomizationDialog';
-import FullScreenDialogs from '@/components/UIElements/Modal/FullScreenDialogs';
-import ScrollingLongContent from '@/components/UIElements/Modal/ScrollingLongContent';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Modal() {
- return (
- <>
- {/* Page title */}
-
-
Modal
-
-
- Dashboard
-
- Modal
-
-
-
-
-
- {/* BasicModal */}
-
-
- {/* Transitions */}
-
-
- {/* TransitionsDialog */}
-
-
- {/* FullScreenDialogs */}
-
-
-
-
- {/* NestedModal */}
-
-
- {/* SimpleDialog */}
-
-
- {/* CustomizationDialog */}
-
-
- {/* ScrollingLongContent */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/pagination.js b/pages/ui-elements/pagination.js
deleted file mode 100644
index fa63a54..0000000
--- a/pages/ui-elements/pagination.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import BasicPagination from '@/components/UIElements/Pagination/BasicPagination';
-import OutlinedPagination from '@/components/UIElements/Pagination/OutlinedPagination';
-import RoundedPagination from '@/components/UIElements/Pagination/RoundedPagination';
-import PaginationSize from '@/components/UIElements/Pagination/PaginationSize';
-import CustomIcons from '@/components/UIElements/Pagination/CustomIcons';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Pagination() {
- return (
- <>
- {/* Page title */}
-
-
Pagination
-
-
- Dashboard
-
- Pagination
-
-
-
-
-
- {/* BasicPagination */}
-
-
- {/* RoundedPagination */}
-
-
- {/* CustomIcons */}
-
-
-
-
- {/* OutlinedPagination */}
-
-
- {/* PaginationSize */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/progress.js b/pages/ui-elements/progress.js
deleted file mode 100644
index 02a1da6..0000000
--- a/pages/ui-elements/progress.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Circular from '@/components/UIElements/Progress/Circular';
-import CircularDeterminate from '@/components/UIElements/Progress/CircularDeterminate';
-import InteractiveIntegration from '@/components/UIElements/Progress/InteractiveIntegration';
-import CircularWithLabel from '@/components/UIElements/Progress/CircularWithLabel';
-import LinearIndeterminate from '@/components/UIElements/Progress/LinearIndeterminate';
-import Customization from '@/components/UIElements/Progress/Customization';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Progress() {
- return (
- <>
- {/* Page title */}
-
-
Progress
-
-
- Dashboard
-
- Progress
-
-
-
-
-
- {/* Circular */}
-
-
- {/* InteractiveIntegration */}
-
-
- {/* LinearIndeterminate */}
-
-
-
-
- {/* CircularDeterminate */}
-
-
- {/* CircularWithLabel */}
-
-
- {/* Customization */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/radio.js b/pages/ui-elements/radio.js
deleted file mode 100644
index 3084379..0000000
--- a/pages/ui-elements/radio.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Group from '@/components/UIElements/Radio/Group';
-import Direction from '@/components/UIElements/Radio/Direction';
-import Controlled from '@/components/UIElements/Radio/Controlled';
-import Size from '@/components/UIElements/Radio/Size';
-import Color from '@/components/UIElements/Radio/Color';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Radio() {
- return (
- <>
- {/* Page title */}
-
-
Radio
-
-
- Dashboard
-
- Radio
-
-
-
-
-
- {/* Group */}
-
-
- {/* Controlled */}
-
-
-
-
- {/* Direction */}
-
-
- {/* Size */}
-
-
- {/* Color */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/rating.js b/pages/ui-elements/rating.js
deleted file mode 100644
index 1c1f134..0000000
--- a/pages/ui-elements/rating.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Basic from '@/components/UIElements/Rating/Basic';
-import RatingPrecision from '@/components/UIElements/Rating/RatingPrecision';
-import HoverFeedback from '@/components/UIElements/Rating/HoverFeedback';
-import Sizes from '@/components/UIElements/Rating/Sizes';
-import Customization from '@/components/UIElements/Rating/Customization';
-import RadioGroup from '@/components/UIElements/Rating/RadioGroup';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Rating() {
- return (
- <>
- {/* Page title */}
-
-
Rating
-
-
- Dashboard
-
- Rating
-
-
-
-
-
- {/* Basic */}
-
-
- {/* Customization */}
-
-
-
-
- {/* RatingPrecision */}
-
-
- {/* HoverFeedback */}
-
-
- {/* Sizes */}
-
-
- {/* RadioGroup */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/select.js b/pages/ui-elements/select.js
deleted file mode 100644
index b0e4076..0000000
--- a/pages/ui-elements/select.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Basic from '@/components/UIElements/Select/Basic';
-import AutoWidth from '@/components/UIElements/Select/AutoWidth';
-import Customization from '@/components/UIElements/Select/Customization';
-import MultipleSelectDefault from '@/components/UIElements/Select/MultipleSelectDefault';
-import MultipleSelectCheckmarks from '@/components/UIElements/Select/MultipleSelectCheckmarks';
-import MultipleSelectChip from '@/components/UIElements/Select/MultipleSelectChip';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Select() {
- return (
- <>
- {/* Page title */}
-
-
Select
-
-
- Dashboard
-
- Select
-
-
-
-
-
- {/* Basic */}
-
-
- {/* Customization */}
-
-
- {/* MultipleSelectDefault */}
-
-
-
-
- {/* AutoWidth */}
-
-
- {/* MultipleSelectCheckmarks */}
-
-
- {/* MultipleSelectChip */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/skeleton.js b/pages/ui-elements/skeleton.js
deleted file mode 100644
index cf3eb51..0000000
--- a/pages/ui-elements/skeleton.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Variants from '@/components/UIElements/Skeleton/Variants';
-import Animations from '@/components/UIElements/Skeleton/Animations';
-import PulsateExample from '@/components/UIElements/Skeleton/PulsateExample';
-import WaveExample from '@/components/UIElements/Skeleton/WaveExample';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Skeleton() {
- return (
- <>
- {/* Page title */}
-
-
Skeleton
-
-
- Dashboard
-
- Skeleton
-
-
-
-
-
- {/* Variants */}
-
-
- {/* Animations */}
-
-
- {/* WaveExample */}
-
-
-
-
- {/* PulsateExample */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/slider.js b/pages/ui-elements/slider.js
deleted file mode 100644
index 198159a..0000000
--- a/pages/ui-elements/slider.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Continuous from '@/components/UIElements/Slider/Continuous';
-import Sizes from '@/components/UIElements/Slider/Sizes';
-import Discrete from '@/components/UIElements/Slider/Discrete';
-import SmallSteps from '@/components/UIElements/Slider/SmallSteps';
-import CustomMarks from '@/components/UIElements/Slider/CustomMarks';
-import RestrictedValues from '@/components/UIElements/Slider/RestrictedValues';
-import LabelAlwaysVisible from '@/components/UIElements/Slider/LabelAlwaysVisible';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Slider() {
- return (
- <>
- {/* Page title */}
-
-
Slider
-
-
- Dashboard
-
- Slider
-
-
-
-
-
- {/* Continuous */}
-
-
- {/* Discrete */}
-
-
- {/* CustomMarks */}
-
-
- {/* LabelAlwaysVisible */}
-
-
-
-
- {/* Sizes */}
-
-
- {/* SmallSteps */}
-
-
- {/* RestrictedValues */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/snackbar.js b/pages/ui-elements/snackbar.js
deleted file mode 100644
index 0fe38e6..0000000
--- a/pages/ui-elements/snackbar.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import SimpleSnackbars from '@/components/UIElements/Snackbar/SimpleSnackbars';
-import Customization from '@/components/UIElements/Snackbar/Customization';
-import PositionedSnackbars from '@/components/UIElements/Snackbar/PositionedSnackbars';
-import ComplementaryProjects from '@/components/UIElements/Snackbar/ComplementaryProjects';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Snackbar() {
- return (
- <>
- {/* Page title */}
-
-
Snackbar
-
-
- Dashboard
-
- Snackbar
-
-
-
-
-
- {/* SimpleSnackbars */}
-
-
- {/* PositionedSnackbars */}
-
-
- {/* ComplementaryProjects */}
-
-
-
-
- {/* Customization */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/stepper.js b/pages/ui-elements/stepper.js
deleted file mode 100644
index c4421a5..0000000
--- a/pages/ui-elements/stepper.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import HorizontalStepper from '@/components/UIElements/Stepper/HorizontalStepper';
-import NonLinear from '@/components/UIElements/Stepper/NonLinear';
-import AlternativeLabel from '@/components/UIElements/Stepper/AlternativeLabel';
-import ErrorStep from '@/components/UIElements/Stepper/ErrorStep';
-import CustomizedHorizontalStepper from '@/components/UIElements/Stepper/CustomizedHorizontalStepper';
-import VerticalStepper from '@/components/UIElements/Stepper/VerticalStepper';
-import MobileStepperText from '@/components/UIElements/Stepper/MobileStepperText';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Stepper() {
- return (
- <>
- {/* Page title */}
-
-
Stepper
-
-
- Dashboard
-
- Stepper
-
-
-
-
-
- {/* HorizontalStepper */}
-
-
- {/* AlternativeLabel */}
-
-
- {/* CustomizedHorizontalStepper */}
-
-
- {/* MobileStepper */}
-
-
-
-
- {/* NonLinear */}
-
-
- {/* ErrorStep */}
-
-
- {/* VerticalStepper */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/swiper-slider.js b/pages/ui-elements/swiper-slider.js
deleted file mode 100644
index 8d95b4d..0000000
--- a/pages/ui-elements/swiper-slider.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Default from '@/components/UIElements/SwiperSlider/Default';
-import NavigationSlider from '@/components/UIElements/SwiperSlider/NavigationSlider';
-import PaginationSlider from '@/components/UIElements/SwiperSlider/PaginationSlider';
-import PaginationDynamic from '@/components/UIElements/SwiperSlider/PaginationDynamic';
-import PaginationProgress from '@/components/UIElements/SwiperSlider/PaginationProgress';
-import AutoplaySlider from '@/components/UIElements/SwiperSlider/AutoplaySlider';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function SwiperSlider() {
- return (
- <>
- {/* Page title */}
-
-
Swiper Slider
-
-
- Dashboard
-
- Swiper Slider
-
-
-
-
-
- {/* Default */}
-
-
-
-
- {/* PaginationDynamic */}
-
-
-
-
- {/* NavigationSlider */}
-
-
-
-
- {/* PaginationProgress */}
-
-
-
-
- {/* PaginationSlider */}
-
-
-
-
- {/* AutoplaySlider */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/switch.js b/pages/ui-elements/switch.js
deleted file mode 100644
index 3e89a6c..0000000
--- a/pages/ui-elements/switch.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import Basic from '@/components/UIElements/Switch/Basic';
-import Label from '@/components/UIElements/Switch/Label';
-import Size from '@/components/UIElements/Switch/Size';
-import Color from '@/components/UIElements/Switch/Color';
-import Controlled from '@/components/UIElements/Switch/Controlled';
-import SwitchesWithFormGroup from '@/components/UIElements/Switch/SwitchesWithFormGroup';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Switch() {
- return (
- <>
- {/* Page title */}
-
-
Switch
-
-
- Dashboard
-
- Switch
-
-
-
-
-
- {/* Basic */}
-
-
- {/* Size */}
-
-
- {/* SwitchesWithFormGroup */}
-
-
-
-
- {/* Label */}
-
-
- {/* Color */}
-
-
- {/* Controlled */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/table.js b/pages/ui-elements/table.js
deleted file mode 100644
index a8e94ff..0000000
--- a/pages/ui-elements/table.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import BasicTable from '@/components/UIElements/Table/BasicTable';
-import RecentOrders from "@/components/Dashboard/eCommerce/RecentOrders";
-import TeamMembersList from "@/components/Dashboard/eCommerce/TeamMembersList";
-import BrowserUsedAndTrafficReports from "@/components/Dashboard/Analytics/BrowserUsedAndTrafficReports";
-import MyTasks from '@/components/Dashboard/ProjectManagement/MyTasks';
-import AllProjects from '@/components/Dashboard/ProjectManagement/AllProjects';
-import DataTable from '@/components/UIElements/Table/DataTable';
-import DenseTable from '@/components/UIElements/Table/DenseTable';
-import SortingSelectingTable from '@/components/UIElements/Table/SortingSelectingTable';
-import CustomizationTable from '@/components/UIElements/Table/CustomizationTable';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Table() {
- return (
- <>
- {/* Page title */}
-
-
Table
-
-
- Dashboard
-
- Table
-
-
-
- {/* BasicTable */}
-
-
- {/* RecentOrders */}
-
-
- {/* TeamMembersList */}
-
-
- {/* BrowserUsedAndTrafficReports */}
-
-
- {/* MyTasks */}
-
-
- {/* AllProjects */}
-
-
- {/* DataTable */}
-
-
- {/* DenseTable */}
-
-
- {/* SortingSelectingTable */}
-
-
- {/* CustomizationTable */}
-
- >
- );
-}
diff --git a/pages/ui-elements/tabs.js b/pages/ui-elements/tabs.js
deleted file mode 100644
index 79c1737..0000000
--- a/pages/ui-elements/tabs.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import BasicTabs from '@/components/UIElements/Tabs/BasicTabs';
-import ExperimentalAPI from '@/components/UIElements/Tabs/ExperimentalAPI';
-import VerticalTabs from '@/components/UIElements/Tabs/VerticalTabs';
-import IconTabs from '@/components/UIElements/Tabs/IconTabs';
-import IconPosition from '@/components/UIElements/Tabs/IconPosition';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Tabs() {
- return (
- <>
- {/* Page title */}
-
-
-
-
- {/* BasicTabs */}
-
-
- {/* FixedTabs */}
-
-
-
-
- {/* ExperimentalAPI */}
-
-
- {/* IconTabs */}
-
-
- {/* IconPosition */}
-
-
-
- >
- );
-}
diff --git a/pages/ui-elements/tooltip.js b/pages/ui-elements/tooltip.js
deleted file mode 100644
index a87421d..0000000
--- a/pages/ui-elements/tooltip.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import BasicTooltip from '@/components/UIElements/Tooltip/BasicTooltip';
-import PositionedTooltips from '@/components/UIElements/Tooltip/PositionedTooltips';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Tooltip() {
- return (
- <>
- {/* Page title */}
-
-
Tooltip
-
-
- Dashboard
-
- Tooltip
-
-
-
- {/* BasicTooltip */}
-
-
- {/* PositionedTooltips */}
-
- >
- );
-}
diff --git a/pages/ui-elements/transitions.js b/pages/ui-elements/transitions.js
deleted file mode 100644
index 9b9cf60..0000000
--- a/pages/ui-elements/transitions.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import Grid from "@mui/material/Grid";
-import CollapseTransitions from '@/components/UIElements/Transitions/CollapseTransitions';
-import FadeTransitions from '@/components/UIElements/Transitions/FadeTransitions';
-import GrowTransitions from '@/components/UIElements/Transitions/GrowTransitions';
-import SlideTransitions from '@/components/UIElements/Transitions/SlideTransitions';
-import SlideRelativeToAContainer from '@/components/UIElements/Transitions/SlideRelativeToAContainer';
-import ZoomTransitions from '@/components/UIElements/Transitions/ZoomTransitions';
-import Link from 'next/link';
-import styles from '@/styles/PageTitle.module.css';
-
-export default function Transitions() {
- return (
- <>
- {/* Page title */}
-
-
Transitions
-
-
- Dashboard
-
- Transitions
-
-
-
-
-
- {/* CollapseTransitions */}
-
-
- {/* SlideTransitions */}
-
-
- {/* SlideRelativeToAContainer */}
-
-
-
-
- {/* FadeTransitions */}
-
-
- {/* GrowTransitions */}
-
-
- {/* ZoomTransitions */}
-
-
-
- >
- );
-}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..94838e5
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/fonts/remixicon.eot b/public/fonts/remixicon.eot
deleted file mode 100644
index 40629af..0000000
Binary files a/public/fonts/remixicon.eot and /dev/null differ
diff --git a/public/fonts/remixicon.svg b/public/fonts/remixicon.svg
deleted file mode 100644
index a348334..0000000
--- a/public/fonts/remixicon.svg
+++ /dev/null
@@ -1,6835 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/public/fonts/remixicon.symbol.svg b/public/fonts/remixicon.symbol.svg
deleted file mode 100644
index 2522b6c..0000000
--- a/public/fonts/remixicon.symbol.svg
+++ /dev/null
@@ -1,11356 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/public/fonts/remixicon.ttf b/public/fonts/remixicon.ttf
deleted file mode 100644
index c461f40..0000000
Binary files a/public/fonts/remixicon.ttf and /dev/null differ
diff --git a/public/fonts/remixicon.woff b/public/fonts/remixicon.woff
deleted file mode 100644
index 62a756b..0000000
Binary files a/public/fonts/remixicon.woff and /dev/null differ
diff --git a/public/fonts/remixicon.woff2 b/public/fonts/remixicon.woff2
deleted file mode 100644
index 89a0b99..0000000
Binary files a/public/fonts/remixicon.woff2 and /dev/null differ
diff --git a/public/images/3d1.png b/public/images/3d1.png
deleted file mode 100644
index 63cdbf6..0000000
Binary files a/public/images/3d1.png and /dev/null differ
diff --git a/public/images/3d2.png b/public/images/3d2.png
deleted file mode 100644
index 36aa918..0000000
Binary files a/public/images/3d2.png and /dev/null differ
diff --git a/public/images/3d3.png b/public/images/3d3.png
deleted file mode 100644
index 3c5d737..0000000
Binary files a/public/images/3d3.png and /dev/null differ
diff --git a/public/images/3d4.png b/public/images/3d4.png
deleted file mode 100644
index e944392..0000000
Binary files a/public/images/3d4.png and /dev/null differ
diff --git a/public/images/burger-menu-icon.png b/public/images/burger-menu-icon.png
deleted file mode 100644
index 94bbbe6..0000000
Binary files a/public/images/burger-menu-icon.png and /dev/null differ
diff --git a/public/images/c+.png b/public/images/c+.png
deleted file mode 100644
index 58ed6ea..0000000
Binary files a/public/images/c+.png and /dev/null differ
diff --git a/public/images/card-img1.png b/public/images/card-img1.png
deleted file mode 100644
index 5585d79..0000000
Binary files a/public/images/card-img1.png and /dev/null differ
diff --git a/public/images/card-img2.png b/public/images/card-img2.png
deleted file mode 100644
index 1dee837..0000000
Binary files a/public/images/card-img2.png and /dev/null differ
diff --git a/public/images/card-img3.png b/public/images/card-img3.png
deleted file mode 100644
index 0ae120d..0000000
Binary files a/public/images/card-img3.png and /dev/null differ
diff --git a/public/images/card-img4.png b/public/images/card-img4.png
deleted file mode 100644
index 8634bff..0000000
Binary files a/public/images/card-img4.png and /dev/null differ
diff --git a/public/images/card-img5.png b/public/images/card-img5.png
deleted file mode 100644
index 7f93b65..0000000
Binary files a/public/images/card-img5.png and /dev/null differ
diff --git a/public/images/coffee.png b/public/images/coffee.png
deleted file mode 100644
index 154c7ec..0000000
Binary files a/public/images/coffee.png and /dev/null differ
diff --git a/public/images/contemplative-reptile.jpg b/public/images/contemplative-reptile.jpg
deleted file mode 100644
index 2348454..0000000
Binary files a/public/images/contemplative-reptile.jpg and /dev/null differ
diff --git a/public/images/course-brand1.png b/public/images/course-brand1.png
deleted file mode 100644
index 14e71ff..0000000
Binary files a/public/images/course-brand1.png and /dev/null differ
diff --git a/public/images/course-brand2.png b/public/images/course-brand2.png
deleted file mode 100644
index bffbe85..0000000
Binary files a/public/images/course-brand2.png and /dev/null differ
diff --git a/public/images/course-brand3.png b/public/images/course-brand3.png
deleted file mode 100644
index 6c3840b..0000000
Binary files a/public/images/course-brand3.png and /dev/null differ
diff --git a/public/images/course-brand4.png b/public/images/course-brand4.png
deleted file mode 100644
index 6eca91f..0000000
Binary files a/public/images/course-brand4.png and /dev/null differ
diff --git a/public/images/down-arrow.png b/public/images/down-arrow.png
deleted file mode 100644
index c389bb4..0000000
Binary files a/public/images/down-arrow.png and /dev/null differ
diff --git a/public/images/error.png b/public/images/error.png
deleted file mode 100644
index 31fc3f1..0000000
Binary files a/public/images/error.png and /dev/null differ
diff --git a/public/images/favicon.ico b/public/images/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/public/images/favicon.ico and /dev/null differ
diff --git a/public/images/favicon.png b/public/images/favicon.png
deleted file mode 100644
index 9db9b7a..0000000
Binary files a/public/images/favicon.png and /dev/null differ
diff --git a/public/images/fb-icon.png b/public/images/fb-icon.png
deleted file mode 100644
index 7982c0e..0000000
Binary files a/public/images/fb-icon.png and /dev/null differ
diff --git a/public/images/file1.png b/public/images/file1.png
deleted file mode 100644
index c2f4acf..0000000
Binary files a/public/images/file1.png and /dev/null differ
diff --git a/public/images/file10.png b/public/images/file10.png
deleted file mode 100644
index c2f4acf..0000000
Binary files a/public/images/file10.png and /dev/null differ
diff --git a/public/images/file2.png b/public/images/file2.png
deleted file mode 100644
index 6376c15..0000000
Binary files a/public/images/file2.png and /dev/null differ
diff --git a/public/images/file3.png b/public/images/file3.png
deleted file mode 100644
index 30331f9..0000000
Binary files a/public/images/file3.png and /dev/null differ
diff --git a/public/images/file4.png b/public/images/file4.png
deleted file mode 100644
index d86c175..0000000
Binary files a/public/images/file4.png and /dev/null differ
diff --git a/public/images/file5.png b/public/images/file5.png
deleted file mode 100644
index 160475c..0000000
Binary files a/public/images/file5.png and /dev/null differ
diff --git a/public/images/file6.png b/public/images/file6.png
deleted file mode 100644
index c2cd3d1..0000000
Binary files a/public/images/file6.png and /dev/null differ
diff --git a/public/images/file7.png b/public/images/file7.png
deleted file mode 100644
index 6c8c4f7..0000000
Binary files a/public/images/file7.png and /dev/null differ
diff --git a/public/images/file8.png b/public/images/file8.png
deleted file mode 100644
index 82fcab5..0000000
Binary files a/public/images/file8.png and /dev/null differ
diff --git a/public/images/file9.png b/public/images/file9.png
deleted file mode 100644
index 1c65ce7..0000000
Binary files a/public/images/file9.png and /dev/null differ
diff --git a/public/images/folder.png b/public/images/folder.png
deleted file mode 100644
index 5cbbe2e..0000000
Binary files a/public/images/folder.png and /dev/null differ
diff --git a/public/images/google-icon.png b/public/images/google-icon.png
deleted file mode 100644
index 3d66f35..0000000
Binary files a/public/images/google-icon.png and /dev/null differ
diff --git a/public/images/graph-icon.png b/public/images/graph-icon.png
deleted file mode 100644
index e0be787..0000000
Binary files a/public/images/graph-icon.png and /dev/null differ
diff --git a/public/images/haskell.png b/public/images/haskell.png
deleted file mode 100644
index 68d8659..0000000
Binary files a/public/images/haskell.png and /dev/null differ
diff --git a/public/images/hex-map.png b/public/images/hex-map.png
deleted file mode 100644
index 0fe5895..0000000
Binary files a/public/images/hex-map.png and /dev/null differ
diff --git a/public/images/icon1.png b/public/images/icon1.png
deleted file mode 100644
index 939692b..0000000
Binary files a/public/images/icon1.png and /dev/null differ
diff --git a/public/images/icon2.png b/public/images/icon2.png
deleted file mode 100644
index 417bab4..0000000
Binary files a/public/images/icon2.png and /dev/null differ
diff --git a/public/images/icon3.png b/public/images/icon3.png
deleted file mode 100644
index 5a82f32..0000000
Binary files a/public/images/icon3.png and /dev/null differ
diff --git a/public/images/icon4.png b/public/images/icon4.png
deleted file mode 100644
index 14c85d5..0000000
Binary files a/public/images/icon4.png and /dev/null differ
diff --git a/public/images/js.png b/public/images/js.png
deleted file mode 100644
index bdaec9a..0000000
Binary files a/public/images/js.png and /dev/null differ
diff --git a/public/images/live-from-space.jpg b/public/images/live-from-space.jpg
deleted file mode 100644
index f74b27b..0000000
Binary files a/public/images/live-from-space.jpg and /dev/null differ
diff --git a/public/images/logo-white.png b/public/images/logo-white.png
deleted file mode 100644
index 92d74f4..0000000
Binary files a/public/images/logo-white.png and /dev/null differ
diff --git a/public/images/man.png b/public/images/man.png
deleted file mode 100644
index fbe0587..0000000
Binary files a/public/images/man.png and /dev/null differ
diff --git a/public/images/media.png b/public/images/media.png
deleted file mode 100644
index 42a2631..0000000
Binary files a/public/images/media.png and /dev/null differ
diff --git a/public/images/member1.png b/public/images/member1.png
deleted file mode 100644
index c5f1a78..0000000
Binary files a/public/images/member1.png and /dev/null differ
diff --git a/public/images/member10.png b/public/images/member10.png
deleted file mode 100644
index 4eeec1a..0000000
Binary files a/public/images/member10.png and /dev/null differ
diff --git a/public/images/member11.png b/public/images/member11.png
deleted file mode 100644
index 10de3ec..0000000
Binary files a/public/images/member11.png and /dev/null differ
diff --git a/public/images/member12.png b/public/images/member12.png
deleted file mode 100644
index a00dea1..0000000
Binary files a/public/images/member12.png and /dev/null differ
diff --git a/public/images/member2.png b/public/images/member2.png
deleted file mode 100644
index 382e829..0000000
Binary files a/public/images/member2.png and /dev/null differ
diff --git a/public/images/member3.png b/public/images/member3.png
deleted file mode 100644
index 841a3f8..0000000
Binary files a/public/images/member3.png and /dev/null differ
diff --git a/public/images/member4.png b/public/images/member4.png
deleted file mode 100644
index fb84e97..0000000
Binary files a/public/images/member4.png and /dev/null differ
diff --git a/public/images/member5.png b/public/images/member5.png
deleted file mode 100644
index 43bd6b6..0000000
Binary files a/public/images/member5.png and /dev/null differ
diff --git a/public/images/member6.png b/public/images/member6.png
deleted file mode 100644
index 0f20f0b..0000000
Binary files a/public/images/member6.png and /dev/null differ
diff --git a/public/images/member7.png b/public/images/member7.png
deleted file mode 100644
index e42e982..0000000
Binary files a/public/images/member7.png and /dev/null differ
diff --git a/public/images/member8.png b/public/images/member8.png
deleted file mode 100644
index 3738b87..0000000
Binary files a/public/images/member8.png and /dev/null differ
diff --git a/public/images/member9.png b/public/images/member9.png
deleted file mode 100644
index 0dda776..0000000
Binary files a/public/images/member9.png and /dev/null differ
diff --git a/public/images/message.png b/public/images/message.png
deleted file mode 100644
index af720e9..0000000
Binary files a/public/images/message.png and /dev/null differ
diff --git a/public/images/oval.png b/public/images/oval.png
deleted file mode 100644
index d240fbe..0000000
Binary files a/public/images/oval.png and /dev/null differ
diff --git a/public/images/paella.jpg b/public/images/paella.jpg
deleted file mode 100644
index 1747662..0000000
Binary files a/public/images/paella.jpg and /dev/null differ
diff --git a/public/images/pdf-icon.png b/public/images/pdf-icon.png
deleted file mode 100644
index 61e3d77..0000000
Binary files a/public/images/pdf-icon.png and /dev/null differ
diff --git a/public/images/product-preview.png b/public/images/product-preview.png
deleted file mode 100644
index 29b9d6c..0000000
Binary files a/public/images/product-preview.png and /dev/null differ
diff --git a/public/images/product1.png b/public/images/product1.png
deleted file mode 100644
index bb81ba3..0000000
Binary files a/public/images/product1.png and /dev/null differ
diff --git a/public/images/product2.png b/public/images/product2.png
deleted file mode 100644
index ce3eab1..0000000
Binary files a/public/images/product2.png and /dev/null differ
diff --git a/public/images/product3.png b/public/images/product3.png
deleted file mode 100644
index 3f4ab26..0000000
Binary files a/public/images/product3.png and /dev/null differ
diff --git a/public/images/product4.png b/public/images/product4.png
deleted file mode 100644
index 23c21e1..0000000
Binary files a/public/images/product4.png and /dev/null differ
diff --git a/public/images/product5.png b/public/images/product5.png
deleted file mode 100644
index e9d3895..0000000
Binary files a/public/images/product5.png and /dev/null differ
diff --git a/public/images/product6.png b/public/images/product6.png
deleted file mode 100644
index 4121822..0000000
Binary files a/public/images/product6.png and /dev/null differ
diff --git a/public/images/product7.png b/public/images/product7.png
deleted file mode 100644
index 83b1e64..0000000
Binary files a/public/images/product7.png and /dev/null differ
diff --git a/public/images/product8.png b/public/images/product8.png
deleted file mode 100644
index fc559f7..0000000
Binary files a/public/images/product8.png and /dev/null differ
diff --git a/public/images/product9.png b/public/images/product9.png
deleted file mode 100644
index 5aeab00..0000000
Binary files a/public/images/product9.png and /dev/null differ
diff --git a/public/images/profile.png b/public/images/profile.png
deleted file mode 100644
index 0f74d45..0000000
Binary files a/public/images/profile.png and /dev/null differ
diff --git a/public/images/project-logo1.png b/public/images/project-logo1.png
deleted file mode 100644
index 80cf823..0000000
Binary files a/public/images/project-logo1.png and /dev/null differ
diff --git a/public/images/project-logo10.png b/public/images/project-logo10.png
deleted file mode 100644
index 79bbf51..0000000
Binary files a/public/images/project-logo10.png and /dev/null differ
diff --git a/public/images/project-logo11.png b/public/images/project-logo11.png
deleted file mode 100644
index 4eb6892..0000000
Binary files a/public/images/project-logo11.png and /dev/null differ
diff --git a/public/images/project-logo12.png b/public/images/project-logo12.png
deleted file mode 100644
index 6161607..0000000
Binary files a/public/images/project-logo12.png and /dev/null differ
diff --git a/public/images/project-logo13.png b/public/images/project-logo13.png
deleted file mode 100644
index a85b6c7..0000000
Binary files a/public/images/project-logo13.png and /dev/null differ
diff --git a/public/images/project-logo14.png b/public/images/project-logo14.png
deleted file mode 100644
index 5f4637b..0000000
Binary files a/public/images/project-logo14.png and /dev/null differ
diff --git a/public/images/project-logo2.png b/public/images/project-logo2.png
deleted file mode 100644
index 1b71dbf..0000000
Binary files a/public/images/project-logo2.png and /dev/null differ
diff --git a/public/images/project-logo3.png b/public/images/project-logo3.png
deleted file mode 100644
index 7cf4b2e..0000000
Binary files a/public/images/project-logo3.png and /dev/null differ
diff --git a/public/images/project-logo4.png b/public/images/project-logo4.png
deleted file mode 100644
index 03ba7a2..0000000
Binary files a/public/images/project-logo4.png and /dev/null differ
diff --git a/public/images/project-logo5.png b/public/images/project-logo5.png
deleted file mode 100644
index 3ccbb68..0000000
Binary files a/public/images/project-logo5.png and /dev/null differ
diff --git a/public/images/project-logo6.png b/public/images/project-logo6.png
deleted file mode 100644
index cd93c50..0000000
Binary files a/public/images/project-logo6.png and /dev/null differ
diff --git a/public/images/project-logo7.png b/public/images/project-logo7.png
deleted file mode 100644
index 2fb4578..0000000
Binary files a/public/images/project-logo7.png and /dev/null differ
diff --git a/public/images/project-logo8.png b/public/images/project-logo8.png
deleted file mode 100644
index a60c97e..0000000
Binary files a/public/images/project-logo8.png and /dev/null differ
diff --git a/public/images/project-logo9.png b/public/images/project-logo9.png
deleted file mode 100644
index 8c28885..0000000
Binary files a/public/images/project-logo9.png and /dev/null differ
diff --git a/public/images/seller1.png b/public/images/seller1.png
deleted file mode 100644
index 5296124..0000000
Binary files a/public/images/seller1.png and /dev/null differ
diff --git a/public/images/seller2.png b/public/images/seller2.png
deleted file mode 100644
index 6cccf04..0000000
Binary files a/public/images/seller2.png and /dev/null differ
diff --git a/public/images/seller3.png b/public/images/seller3.png
deleted file mode 100644
index 3a1f353..0000000
Binary files a/public/images/seller3.png and /dev/null differ
diff --git a/public/images/seller4.png b/public/images/seller4.png
deleted file mode 100644
index a06ff9d..0000000
Binary files a/public/images/seller4.png and /dev/null differ
diff --git a/public/images/seller5.png b/public/images/seller5.png
deleted file mode 100644
index b8dea35..0000000
Binary files a/public/images/seller5.png and /dev/null differ
diff --git a/public/images/seller6.png b/public/images/seller6.png
deleted file mode 100644
index 25e999a..0000000
Binary files a/public/images/seller6.png and /dev/null differ
diff --git a/public/images/seller7.png b/public/images/seller7.png
deleted file mode 100644
index 505e54d..0000000
Binary files a/public/images/seller7.png and /dev/null differ
diff --git a/public/images/seller8.png b/public/images/seller8.png
deleted file mode 100644
index 77292ed..0000000
Binary files a/public/images/seller8.png and /dev/null differ
diff --git a/public/images/slider-img1.jpg b/public/images/slider-img1.jpg
deleted file mode 100644
index 60acbbb..0000000
Binary files a/public/images/slider-img1.jpg and /dev/null differ
diff --git a/public/images/slider-img2.jpg b/public/images/slider-img2.jpg
deleted file mode 100644
index 8861147..0000000
Binary files a/public/images/slider-img2.jpg and /dev/null differ
diff --git a/public/images/slider-img3.jpg b/public/images/slider-img3.jpg
deleted file mode 100644
index 9c89781..0000000
Binary files a/public/images/slider-img3.jpg and /dev/null differ
diff --git a/public/images/slider-img4.jpg b/public/images/slider-img4.jpg
deleted file mode 100644
index e80c2aa..0000000
Binary files a/public/images/slider-img4.jpg and /dev/null differ
diff --git a/public/images/slider-img5.jpg b/public/images/slider-img5.jpg
deleted file mode 100644
index 7fc891e..0000000
Binary files a/public/images/slider-img5.jpg and /dev/null differ
diff --git a/public/images/small-product-img.png b/public/images/small-product-img.png
deleted file mode 100644
index 3aa12f9..0000000
Binary files a/public/images/small-product-img.png and /dev/null differ
diff --git a/public/images/small-product-img2.png b/public/images/small-product-img2.png
deleted file mode 100644
index ffb08fb..0000000
Binary files a/public/images/small-product-img2.png and /dev/null differ
diff --git a/public/images/small-product-img3.png b/public/images/small-product-img3.png
deleted file mode 100644
index 43b6140..0000000
Binary files a/public/images/small-product-img3.png and /dev/null differ
diff --git a/public/images/user1.png b/public/images/user1.png
deleted file mode 100644
index a592e0a..0000000
Binary files a/public/images/user1.png and /dev/null differ
diff --git a/public/images/user10.png b/public/images/user10.png
deleted file mode 100644
index e136879..0000000
Binary files a/public/images/user10.png and /dev/null differ
diff --git a/public/images/user11.png b/public/images/user11.png
deleted file mode 100644
index c3808e8..0000000
Binary files a/public/images/user11.png and /dev/null differ
diff --git a/public/images/user12.png b/public/images/user12.png
deleted file mode 100644
index d573a20..0000000
Binary files a/public/images/user12.png and /dev/null differ
diff --git a/public/images/user13.png b/public/images/user13.png
deleted file mode 100644
index 53f9513..0000000
Binary files a/public/images/user13.png and /dev/null differ
diff --git a/public/images/user14.png b/public/images/user14.png
deleted file mode 100644
index afc98f7..0000000
Binary files a/public/images/user14.png and /dev/null differ
diff --git a/public/images/user15.png b/public/images/user15.png
deleted file mode 100644
index 3cdce43..0000000
Binary files a/public/images/user15.png and /dev/null differ
diff --git a/public/images/user16.png b/public/images/user16.png
deleted file mode 100644
index e459d73..0000000
Binary files a/public/images/user16.png and /dev/null differ
diff --git a/public/images/user17.png b/public/images/user17.png
deleted file mode 100644
index 418fd6f..0000000
Binary files a/public/images/user17.png and /dev/null differ
diff --git a/public/images/user18.png b/public/images/user18.png
deleted file mode 100644
index 646f17f..0000000
Binary files a/public/images/user18.png and /dev/null differ
diff --git a/public/images/user19.png b/public/images/user19.png
deleted file mode 100644
index 669066e..0000000
Binary files a/public/images/user19.png and /dev/null differ
diff --git a/public/images/user2.png b/public/images/user2.png
deleted file mode 100644
index 0ac355b..0000000
Binary files a/public/images/user2.png and /dev/null differ
diff --git a/public/images/user20.png b/public/images/user20.png
deleted file mode 100644
index 42e9047..0000000
Binary files a/public/images/user20.png and /dev/null differ
diff --git a/public/images/user21.png b/public/images/user21.png
deleted file mode 100644
index b0df234..0000000
Binary files a/public/images/user21.png and /dev/null differ
diff --git a/public/images/user22.png b/public/images/user22.png
deleted file mode 100644
index 7168073..0000000
Binary files a/public/images/user22.png and /dev/null differ
diff --git a/public/images/user23.png b/public/images/user23.png
deleted file mode 100644
index 0ac355b..0000000
Binary files a/public/images/user23.png and /dev/null differ
diff --git a/public/images/user3.png b/public/images/user3.png
deleted file mode 100644
index 5242271..0000000
Binary files a/public/images/user3.png and /dev/null differ
diff --git a/public/images/user4.png b/public/images/user4.png
deleted file mode 100644
index d3a8ff0..0000000
Binary files a/public/images/user4.png and /dev/null differ
diff --git a/public/images/user5.png b/public/images/user5.png
deleted file mode 100644
index 76f95ab..0000000
Binary files a/public/images/user5.png and /dev/null differ
diff --git a/public/images/user6.png b/public/images/user6.png
deleted file mode 100644
index 5f4d9fa..0000000
Binary files a/public/images/user6.png and /dev/null differ
diff --git a/public/images/user7.png b/public/images/user7.png
deleted file mode 100644
index 3a7012e..0000000
Binary files a/public/images/user7.png and /dev/null differ
diff --git a/public/images/user8.png b/public/images/user8.png
deleted file mode 100644
index 8ef5dd1..0000000
Binary files a/public/images/user8.png and /dev/null differ
diff --git a/public/images/user9.png b/public/images/user9.png
deleted file mode 100644
index ff925ff..0000000
Binary files a/public/images/user9.png and /dev/null differ
diff --git a/public/images/users-icon.png b/public/images/users-icon.png
deleted file mode 100644
index 7715296..0000000
Binary files a/public/images/users-icon.png and /dev/null differ
diff --git a/public/images/work-icon.png b/public/images/work-icon.png
deleted file mode 100644
index 34e4cf5..0000000
Binary files a/public/images/work-icon.png and /dev/null differ
diff --git a/public/images/working-on-table.png b/public/images/working-on-table.png
deleted file mode 100644
index babd358..0000000
Binary files a/public/images/working-on-table.png and /dev/null differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..49fad37
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+ WrenchBoard
+
+
+
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
+
+
+
+
Loading ...
+
+
+
+
+
\ No newline at end of file
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..6abc28e
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,5 @@
+{
+ "short_name": "Metronic React App",
+ "name": "Metronic React App demo1",
+ "start_url": "."
+}
diff --git a/public/media/auth/404-error-dark.png b/public/media/auth/404-error-dark.png
new file mode 100644
index 0000000..43af447
Binary files /dev/null and b/public/media/auth/404-error-dark.png differ
diff --git a/public/media/auth/404-error.png b/public/media/auth/404-error.png
new file mode 100644
index 0000000..5e8542f
Binary files /dev/null and b/public/media/auth/404-error.png differ
diff --git a/public/media/auth/500-error-dark.png b/public/media/auth/500-error-dark.png
new file mode 100644
index 0000000..00c1da1
Binary files /dev/null and b/public/media/auth/500-error-dark.png differ
diff --git a/public/media/auth/500-error.png b/public/media/auth/500-error.png
new file mode 100644
index 0000000..923294e
Binary files /dev/null and b/public/media/auth/500-error.png differ
diff --git a/public/media/auth/505-error-dark.png b/public/media/auth/505-error-dark.png
new file mode 100644
index 0000000..4b202a9
Binary files /dev/null and b/public/media/auth/505-error-dark.png differ
diff --git a/public/media/auth/505-error.png b/public/media/auth/505-error.png
new file mode 100644
index 0000000..c839fd2
Binary files /dev/null and b/public/media/auth/505-error.png differ
diff --git a/public/media/auth/agency-dark.png b/public/media/auth/agency-dark.png
new file mode 100644
index 0000000..2e32b40
Binary files /dev/null and b/public/media/auth/agency-dark.png differ
diff --git a/public/media/auth/agency.png b/public/media/auth/agency.png
new file mode 100644
index 0000000..fefddd5
Binary files /dev/null and b/public/media/auth/agency.png differ
diff --git a/public/media/auth/bg1-dark.jpg b/public/media/auth/bg1-dark.jpg
new file mode 100644
index 0000000..7d6fa9d
Binary files /dev/null and b/public/media/auth/bg1-dark.jpg differ
diff --git a/public/media/auth/bg1.jpg b/public/media/auth/bg1.jpg
new file mode 100644
index 0000000..a305a07
Binary files /dev/null and b/public/media/auth/bg1.jpg differ
diff --git a/public/media/auth/bg10-dark.jpeg b/public/media/auth/bg10-dark.jpeg
new file mode 100644
index 0000000..5c73472
Binary files /dev/null and b/public/media/auth/bg10-dark.jpeg differ
diff --git a/public/media/auth/bg10.jpeg b/public/media/auth/bg10.jpeg
new file mode 100644
index 0000000..5e5040f
Binary files /dev/null and b/public/media/auth/bg10.jpeg differ
diff --git a/public/media/auth/bg11.png b/public/media/auth/bg11.png
new file mode 100644
index 0000000..dae20f6
Binary files /dev/null and b/public/media/auth/bg11.png differ
diff --git a/public/media/auth/bg2-dark.jpg b/public/media/auth/bg2-dark.jpg
new file mode 100644
index 0000000..8f215d0
Binary files /dev/null and b/public/media/auth/bg2-dark.jpg differ
diff --git a/public/media/auth/bg2.jpg b/public/media/auth/bg2.jpg
new file mode 100644
index 0000000..801c893
Binary files /dev/null and b/public/media/auth/bg2.jpg differ
diff --git a/public/media/auth/bg3-dark.jpg b/public/media/auth/bg3-dark.jpg
new file mode 100644
index 0000000..af52b55
Binary files /dev/null and b/public/media/auth/bg3-dark.jpg differ
diff --git a/public/media/auth/bg3.jpg b/public/media/auth/bg3.jpg
new file mode 100644
index 0000000..582b667
Binary files /dev/null and b/public/media/auth/bg3.jpg differ
diff --git a/public/media/auth/bg4-dark.jpg b/public/media/auth/bg4-dark.jpg
new file mode 100644
index 0000000..13d1d2d
Binary files /dev/null and b/public/media/auth/bg4-dark.jpg differ
diff --git a/public/media/auth/bg4.jpg b/public/media/auth/bg4.jpg
new file mode 100644
index 0000000..9c7b2d9
Binary files /dev/null and b/public/media/auth/bg4.jpg differ
diff --git a/public/media/auth/bg5-dark.jpg b/public/media/auth/bg5-dark.jpg
new file mode 100644
index 0000000..4c62196
Binary files /dev/null and b/public/media/auth/bg5-dark.jpg differ
diff --git a/public/media/auth/bg5.jpg b/public/media/auth/bg5.jpg
new file mode 100644
index 0000000..c8bd5b3
Binary files /dev/null and b/public/media/auth/bg5.jpg differ
diff --git a/public/media/auth/bg6-dark.jpg b/public/media/auth/bg6-dark.jpg
new file mode 100644
index 0000000..04bcc3e
Binary files /dev/null and b/public/media/auth/bg6-dark.jpg differ
diff --git a/public/media/auth/bg6.jpg b/public/media/auth/bg6.jpg
new file mode 100644
index 0000000..fe2b508
Binary files /dev/null and b/public/media/auth/bg6.jpg differ
diff --git a/public/media/auth/bg7-dark.jpg b/public/media/auth/bg7-dark.jpg
new file mode 100644
index 0000000..2a3c51c
Binary files /dev/null and b/public/media/auth/bg7-dark.jpg differ
diff --git a/public/media/auth/bg7.jpg b/public/media/auth/bg7.jpg
new file mode 100644
index 0000000..de6d180
Binary files /dev/null and b/public/media/auth/bg7.jpg differ
diff --git a/public/media/auth/bg8-dark.jpg b/public/media/auth/bg8-dark.jpg
new file mode 100644
index 0000000..e6bf942
Binary files /dev/null and b/public/media/auth/bg8-dark.jpg differ
diff --git a/public/media/auth/bg8.jpg b/public/media/auth/bg8.jpg
new file mode 100644
index 0000000..2cc808e
Binary files /dev/null and b/public/media/auth/bg8.jpg differ
diff --git a/public/media/auth/bg9-dark.jpg b/public/media/auth/bg9-dark.jpg
new file mode 100644
index 0000000..befbba9
Binary files /dev/null and b/public/media/auth/bg9-dark.jpg differ
diff --git a/public/media/auth/bg9.jpg b/public/media/auth/bg9.jpg
new file mode 100644
index 0000000..c6a390f
Binary files /dev/null and b/public/media/auth/bg9.jpg differ
diff --git a/public/media/auth/chart-graph-dark.png b/public/media/auth/chart-graph-dark.png
new file mode 100644
index 0000000..f3dd735
Binary files /dev/null and b/public/media/auth/chart-graph-dark.png differ
diff --git a/public/media/auth/chart-graph.png b/public/media/auth/chart-graph.png
new file mode 100644
index 0000000..7770796
Binary files /dev/null and b/public/media/auth/chart-graph.png differ
diff --git a/public/media/auth/membership-dark.png b/public/media/auth/membership-dark.png
new file mode 100644
index 0000000..d5ef702
Binary files /dev/null and b/public/media/auth/membership-dark.png differ
diff --git a/public/media/auth/membership.png b/public/media/auth/membership.png
new file mode 100644
index 0000000..e5be8d3
Binary files /dev/null and b/public/media/auth/membership.png differ
diff --git a/public/media/auth/ok-dark.png b/public/media/auth/ok-dark.png
new file mode 100644
index 0000000..d423365
Binary files /dev/null and b/public/media/auth/ok-dark.png differ
diff --git a/public/media/auth/ok.png b/public/media/auth/ok.png
new file mode 100644
index 0000000..c02b046
Binary files /dev/null and b/public/media/auth/ok.png differ
diff --git a/public/media/auth/please-verify-your-email-dark.png b/public/media/auth/please-verify-your-email-dark.png
new file mode 100644
index 0000000..e25dd76
Binary files /dev/null and b/public/media/auth/please-verify-your-email-dark.png differ
diff --git a/public/media/auth/please-verify-your-email.png b/public/media/auth/please-verify-your-email.png
new file mode 100644
index 0000000..85e333c
Binary files /dev/null and b/public/media/auth/please-verify-your-email.png differ
diff --git a/public/media/auth/welcome-dark.png b/public/media/auth/welcome-dark.png
new file mode 100644
index 0000000..ef8cc86
Binary files /dev/null and b/public/media/auth/welcome-dark.png differ
diff --git a/public/media/auth/welcome.png b/public/media/auth/welcome.png
new file mode 100644
index 0000000..70fe04b
Binary files /dev/null and b/public/media/auth/welcome.png differ
diff --git a/public/media/avatars/300-1.jpg b/public/media/avatars/300-1.jpg
new file mode 100644
index 0000000..7b5fb2e
Binary files /dev/null and b/public/media/avatars/300-1.jpg differ
diff --git a/public/media/avatars/300-10.jpg b/public/media/avatars/300-10.jpg
new file mode 100644
index 0000000..584e21b
Binary files /dev/null and b/public/media/avatars/300-10.jpg differ
diff --git a/public/media/avatars/300-11.jpg b/public/media/avatars/300-11.jpg
new file mode 100644
index 0000000..71545c8
Binary files /dev/null and b/public/media/avatars/300-11.jpg differ
diff --git a/public/media/avatars/300-12.jpg b/public/media/avatars/300-12.jpg
new file mode 100644
index 0000000..0c55f99
Binary files /dev/null and b/public/media/avatars/300-12.jpg differ
diff --git a/public/media/avatars/300-13.jpg b/public/media/avatars/300-13.jpg
new file mode 100644
index 0000000..40366a6
Binary files /dev/null and b/public/media/avatars/300-13.jpg differ
diff --git a/public/media/avatars/300-14.jpg b/public/media/avatars/300-14.jpg
new file mode 100644
index 0000000..b2b417e
Binary files /dev/null and b/public/media/avatars/300-14.jpg differ
diff --git a/public/media/avatars/300-15.jpg b/public/media/avatars/300-15.jpg
new file mode 100644
index 0000000..bc63b3a
Binary files /dev/null and b/public/media/avatars/300-15.jpg differ
diff --git a/public/media/avatars/300-16.jpg b/public/media/avatars/300-16.jpg
new file mode 100644
index 0000000..457d37f
Binary files /dev/null and b/public/media/avatars/300-16.jpg differ
diff --git a/public/media/avatars/300-17.jpg b/public/media/avatars/300-17.jpg
new file mode 100644
index 0000000..bb2a1d1
Binary files /dev/null and b/public/media/avatars/300-17.jpg differ
diff --git a/public/media/avatars/300-18.jpg b/public/media/avatars/300-18.jpg
new file mode 100644
index 0000000..4bdaf32
Binary files /dev/null and b/public/media/avatars/300-18.jpg differ
diff --git a/public/media/avatars/300-19.jpg b/public/media/avatars/300-19.jpg
new file mode 100644
index 0000000..4ec2eb8
Binary files /dev/null and b/public/media/avatars/300-19.jpg differ
diff --git a/public/media/avatars/300-2.jpg b/public/media/avatars/300-2.jpg
new file mode 100644
index 0000000..ff8e430
Binary files /dev/null and b/public/media/avatars/300-2.jpg differ
diff --git a/public/media/avatars/300-20.jpg b/public/media/avatars/300-20.jpg
new file mode 100644
index 0000000..1b20072
Binary files /dev/null and b/public/media/avatars/300-20.jpg differ
diff --git a/public/media/avatars/300-21.jpg b/public/media/avatars/300-21.jpg
new file mode 100644
index 0000000..f069199
Binary files /dev/null and b/public/media/avatars/300-21.jpg differ
diff --git a/public/media/avatars/300-22.jpg b/public/media/avatars/300-22.jpg
new file mode 100644
index 0000000..1c96e39
Binary files /dev/null and b/public/media/avatars/300-22.jpg differ
diff --git a/public/media/avatars/300-23.jpg b/public/media/avatars/300-23.jpg
new file mode 100644
index 0000000..27a2fa7
Binary files /dev/null and b/public/media/avatars/300-23.jpg differ
diff --git a/public/media/avatars/300-24.jpg b/public/media/avatars/300-24.jpg
new file mode 100644
index 0000000..599b2b2
Binary files /dev/null and b/public/media/avatars/300-24.jpg differ
diff --git a/public/media/avatars/300-25.jpg b/public/media/avatars/300-25.jpg
new file mode 100644
index 0000000..91ee2e2
Binary files /dev/null and b/public/media/avatars/300-25.jpg differ
diff --git a/public/media/avatars/300-26.jpg b/public/media/avatars/300-26.jpg
new file mode 100644
index 0000000..02c9ca1
Binary files /dev/null and b/public/media/avatars/300-26.jpg differ
diff --git a/public/media/avatars/300-27.jpg b/public/media/avatars/300-27.jpg
new file mode 100644
index 0000000..b5252de
Binary files /dev/null and b/public/media/avatars/300-27.jpg differ
diff --git a/public/media/avatars/300-28.jpg b/public/media/avatars/300-28.jpg
new file mode 100644
index 0000000..8928cd1
Binary files /dev/null and b/public/media/avatars/300-28.jpg differ
diff --git a/public/media/avatars/300-29.jpg b/public/media/avatars/300-29.jpg
new file mode 100644
index 0000000..8b893f3
Binary files /dev/null and b/public/media/avatars/300-29.jpg differ
diff --git a/public/media/avatars/300-3.jpg b/public/media/avatars/300-3.jpg
new file mode 100644
index 0000000..6378a6a
Binary files /dev/null and b/public/media/avatars/300-3.jpg differ
diff --git a/public/media/avatars/300-30.jpg b/public/media/avatars/300-30.jpg
new file mode 100644
index 0000000..62af080
Binary files /dev/null and b/public/media/avatars/300-30.jpg differ
diff --git a/public/media/avatars/300-4.jpg b/public/media/avatars/300-4.jpg
new file mode 100644
index 0000000..693ca71
Binary files /dev/null and b/public/media/avatars/300-4.jpg differ
diff --git a/public/media/avatars/300-5.jpg b/public/media/avatars/300-5.jpg
new file mode 100644
index 0000000..b439db5
Binary files /dev/null and b/public/media/avatars/300-5.jpg differ
diff --git a/public/media/avatars/300-6.jpg b/public/media/avatars/300-6.jpg
new file mode 100644
index 0000000..8497aa9
Binary files /dev/null and b/public/media/avatars/300-6.jpg differ
diff --git a/public/media/avatars/300-7.jpg b/public/media/avatars/300-7.jpg
new file mode 100644
index 0000000..4a05372
Binary files /dev/null and b/public/media/avatars/300-7.jpg differ
diff --git a/public/media/avatars/300-8.jpg b/public/media/avatars/300-8.jpg
new file mode 100644
index 0000000..3f2b4c1
Binary files /dev/null and b/public/media/avatars/300-8.jpg differ
diff --git a/public/media/avatars/300-9.jpg b/public/media/avatars/300-9.jpg
new file mode 100644
index 0000000..ff7e424
Binary files /dev/null and b/public/media/avatars/300-9.jpg differ
diff --git a/public/media/avatars/blank.png b/public/media/avatars/blank.png
new file mode 100644
index 0000000..a8598bc
Binary files /dev/null and b/public/media/avatars/blank.png differ
diff --git a/public/media/books/1.png b/public/media/books/1.png
new file mode 100644
index 0000000..e31f1b8
Binary files /dev/null and b/public/media/books/1.png differ
diff --git a/public/media/books/10.png b/public/media/books/10.png
new file mode 100644
index 0000000..0fc7bb5
Binary files /dev/null and b/public/media/books/10.png differ
diff --git a/public/media/books/11.png b/public/media/books/11.png
new file mode 100644
index 0000000..e931cc8
Binary files /dev/null and b/public/media/books/11.png differ
diff --git a/public/media/books/12.png b/public/media/books/12.png
new file mode 100644
index 0000000..7a41e96
Binary files /dev/null and b/public/media/books/12.png differ
diff --git a/public/media/books/13.png b/public/media/books/13.png
new file mode 100644
index 0000000..42dbdf3
Binary files /dev/null and b/public/media/books/13.png differ
diff --git a/public/media/books/2.png b/public/media/books/2.png
new file mode 100644
index 0000000..72d2213
Binary files /dev/null and b/public/media/books/2.png differ
diff --git a/public/media/books/3.png b/public/media/books/3.png
new file mode 100644
index 0000000..ad23d7a
Binary files /dev/null and b/public/media/books/3.png differ
diff --git a/public/media/books/4.png b/public/media/books/4.png
new file mode 100644
index 0000000..0c34922
Binary files /dev/null and b/public/media/books/4.png differ
diff --git a/public/media/books/5.png b/public/media/books/5.png
new file mode 100644
index 0000000..11870d7
Binary files /dev/null and b/public/media/books/5.png differ
diff --git a/public/media/books/6.png b/public/media/books/6.png
new file mode 100644
index 0000000..6514f70
Binary files /dev/null and b/public/media/books/6.png differ
diff --git a/public/media/books/7.png b/public/media/books/7.png
new file mode 100644
index 0000000..44e0211
Binary files /dev/null and b/public/media/books/7.png differ
diff --git a/public/media/books/8.png b/public/media/books/8.png
new file mode 100644
index 0000000..318cf8d
Binary files /dev/null and b/public/media/books/8.png differ
diff --git a/public/media/books/9.png b/public/media/books/9.png
new file mode 100644
index 0000000..d3154bf
Binary files /dev/null and b/public/media/books/9.png differ
diff --git a/public/media/books/img-72.jpg b/public/media/books/img-72.jpg
new file mode 100644
index 0000000..11d45eb
Binary files /dev/null and b/public/media/books/img-72.jpg differ
diff --git a/public/media/demos/demo1.png b/public/media/demos/demo1.png
new file mode 100644
index 0000000..fc1f89d
Binary files /dev/null and b/public/media/demos/demo1.png differ
diff --git a/public/media/demos/demo10.png b/public/media/demos/demo10.png
new file mode 100644
index 0000000..ad6447d
Binary files /dev/null and b/public/media/demos/demo10.png differ
diff --git a/public/media/demos/demo11.png b/public/media/demos/demo11.png
new file mode 100644
index 0000000..c1b9edc
Binary files /dev/null and b/public/media/demos/demo11.png differ
diff --git a/public/media/demos/demo12.png b/public/media/demos/demo12.png
new file mode 100644
index 0000000..bfc12ee
Binary files /dev/null and b/public/media/demos/demo12.png differ
diff --git a/public/media/demos/demo13.png b/public/media/demos/demo13.png
new file mode 100644
index 0000000..438e64b
Binary files /dev/null and b/public/media/demos/demo13.png differ
diff --git a/public/media/demos/demo14.png b/public/media/demos/demo14.png
new file mode 100644
index 0000000..b06dbcd
Binary files /dev/null and b/public/media/demos/demo14.png differ
diff --git a/public/media/demos/demo15.png b/public/media/demos/demo15.png
new file mode 100644
index 0000000..ed8ec6d
Binary files /dev/null and b/public/media/demos/demo15.png differ
diff --git a/public/media/demos/demo16.png b/public/media/demos/demo16.png
new file mode 100644
index 0000000..fb0f913
Binary files /dev/null and b/public/media/demos/demo16.png differ
diff --git a/public/media/demos/demo17.png b/public/media/demos/demo17.png
new file mode 100644
index 0000000..341c1b5
Binary files /dev/null and b/public/media/demos/demo17.png differ
diff --git a/public/media/demos/demo18.png b/public/media/demos/demo18.png
new file mode 100644
index 0000000..529cb49
Binary files /dev/null and b/public/media/demos/demo18.png differ
diff --git a/public/media/demos/demo19.png b/public/media/demos/demo19.png
new file mode 100644
index 0000000..8547e27
Binary files /dev/null and b/public/media/demos/demo19.png differ
diff --git a/public/media/demos/demo2.png b/public/media/demos/demo2.png
new file mode 100644
index 0000000..dde653f
Binary files /dev/null and b/public/media/demos/demo2.png differ
diff --git a/public/media/demos/demo20.png b/public/media/demos/demo20.png
new file mode 100644
index 0000000..1917209
Binary files /dev/null and b/public/media/demos/demo20.png differ
diff --git a/public/media/demos/demo21.png b/public/media/demos/demo21.png
new file mode 100644
index 0000000..84f9f54
Binary files /dev/null and b/public/media/demos/demo21.png differ
diff --git a/public/media/demos/demo22.png b/public/media/demos/demo22.png
new file mode 100644
index 0000000..634bac6
Binary files /dev/null and b/public/media/demos/demo22.png differ
diff --git a/public/media/demos/demo23.png b/public/media/demos/demo23.png
new file mode 100644
index 0000000..ec9bb94
Binary files /dev/null and b/public/media/demos/demo23.png differ
diff --git a/public/media/demos/demo24.png b/public/media/demos/demo24.png
new file mode 100644
index 0000000..ec45b45
Binary files /dev/null and b/public/media/demos/demo24.png differ
diff --git a/public/media/demos/demo3.png b/public/media/demos/demo3.png
new file mode 100644
index 0000000..a3245d0
Binary files /dev/null and b/public/media/demos/demo3.png differ
diff --git a/public/media/demos/demo4.png b/public/media/demos/demo4.png
new file mode 100644
index 0000000..8605b72
Binary files /dev/null and b/public/media/demos/demo4.png differ
diff --git a/public/media/demos/demo5.png b/public/media/demos/demo5.png
new file mode 100644
index 0000000..1edc613
Binary files /dev/null and b/public/media/demos/demo5.png differ
diff --git a/public/media/demos/demo6.png b/public/media/demos/demo6.png
new file mode 100644
index 0000000..c2315cf
Binary files /dev/null and b/public/media/demos/demo6.png differ
diff --git a/public/media/demos/demo7.png b/public/media/demos/demo7.png
new file mode 100644
index 0000000..4646d13
Binary files /dev/null and b/public/media/demos/demo7.png differ
diff --git a/public/media/demos/demo8.png b/public/media/demos/demo8.png
new file mode 100644
index 0000000..4f78656
Binary files /dev/null and b/public/media/demos/demo8.png differ
diff --git a/public/media/demos/demo9.png b/public/media/demos/demo9.png
new file mode 100644
index 0000000..6957cf1
Binary files /dev/null and b/public/media/demos/demo9.png differ
diff --git a/public/media/email/icon-bullet.svg b/public/media/email/icon-bullet.svg
new file mode 100644
index 0000000..5f233d8
--- /dev/null
+++ b/public/media/email/icon-bullet.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/email/icon-dribbble.svg b/public/media/email/icon-dribbble.svg
new file mode 100644
index 0000000..5cd6759
--- /dev/null
+++ b/public/media/email/icon-dribbble.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/email/icon-facebook.svg b/public/media/email/icon-facebook.svg
new file mode 100644
index 0000000..16af3e0
--- /dev/null
+++ b/public/media/email/icon-facebook.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/email/icon-linkedin.svg b/public/media/email/icon-linkedin.svg
new file mode 100644
index 0000000..55901a2
--- /dev/null
+++ b/public/media/email/icon-linkedin.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/email/icon-polygon.svg b/public/media/email/icon-polygon.svg
new file mode 100644
index 0000000..bba0b99
--- /dev/null
+++ b/public/media/email/icon-polygon.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/email/icon-positive-vote-1.svg b/public/media/email/icon-positive-vote-1.svg
new file mode 100644
index 0000000..cfb36ab
--- /dev/null
+++ b/public/media/email/icon-positive-vote-1.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/email/icon-positive-vote-2.svg b/public/media/email/icon-positive-vote-2.svg
new file mode 100644
index 0000000..5ccf96d
--- /dev/null
+++ b/public/media/email/icon-positive-vote-2.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/email/icon-positive-vote-3.svg b/public/media/email/icon-positive-vote-3.svg
new file mode 100644
index 0000000..4df3548
--- /dev/null
+++ b/public/media/email/icon-positive-vote-3.svg
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/email/icon-positive-vote-4.svg b/public/media/email/icon-positive-vote-4.svg
new file mode 100644
index 0000000..95c05b6
--- /dev/null
+++ b/public/media/email/icon-positive-vote-4.svg
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/email/icon-twitter.svg b/public/media/email/icon-twitter.svg
new file mode 100644
index 0000000..c08c172
--- /dev/null
+++ b/public/media/email/icon-twitter.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/email/img-1.png b/public/media/email/img-1.png
new file mode 100644
index 0000000..18f9b47
Binary files /dev/null and b/public/media/email/img-1.png differ
diff --git a/public/media/email/img-2.png b/public/media/email/img-2.png
new file mode 100644
index 0000000..c56cd34
Binary files /dev/null and b/public/media/email/img-2.png differ
diff --git a/public/media/email/img-3.jpg b/public/media/email/img-3.jpg
new file mode 100644
index 0000000..c313339
Binary files /dev/null and b/public/media/email/img-3.jpg differ
diff --git a/public/media/email/img-4.jpg b/public/media/email/img-4.jpg
new file mode 100644
index 0000000..4f73c84
Binary files /dev/null and b/public/media/email/img-4.jpg differ
diff --git a/public/media/email/img-5.jpg b/public/media/email/img-5.jpg
new file mode 100644
index 0000000..8cb9841
Binary files /dev/null and b/public/media/email/img-5.jpg differ
diff --git a/public/media/email/img-6.jpg b/public/media/email/img-6.jpg
new file mode 100644
index 0000000..162b8cf
Binary files /dev/null and b/public/media/email/img-6.jpg differ
diff --git a/public/media/email/logo-1.svg b/public/media/email/logo-1.svg
new file mode 100644
index 0000000..d2cacc5
--- /dev/null
+++ b/public/media/email/logo-1.svg
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/email/logo-2.svg b/public/media/email/logo-2.svg
new file mode 100644
index 0000000..3e312a4
--- /dev/null
+++ b/public/media/email/logo-2.svg
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/afghanistan.svg b/public/media/flags/afghanistan.svg
new file mode 100644
index 0000000..b3cb5bc
--- /dev/null
+++ b/public/media/flags/afghanistan.svg
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/aland-islands.svg b/public/media/flags/aland-islands.svg
new file mode 100644
index 0000000..71ae0d7
--- /dev/null
+++ b/public/media/flags/aland-islands.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/albania.svg b/public/media/flags/albania.svg
new file mode 100644
index 0000000..53b8683
--- /dev/null
+++ b/public/media/flags/albania.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/algeria.svg b/public/media/flags/algeria.svg
new file mode 100644
index 0000000..8692d52
--- /dev/null
+++ b/public/media/flags/algeria.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/american-samoa.svg b/public/media/flags/american-samoa.svg
new file mode 100644
index 0000000..da124ea
--- /dev/null
+++ b/public/media/flags/american-samoa.svg
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/andorra.svg b/public/media/flags/andorra.svg
new file mode 100644
index 0000000..448f90e
--- /dev/null
+++ b/public/media/flags/andorra.svg
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/angola.svg b/public/media/flags/angola.svg
new file mode 100644
index 0000000..734bbf1
--- /dev/null
+++ b/public/media/flags/angola.svg
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/anguilla.svg b/public/media/flags/anguilla.svg
new file mode 100644
index 0000000..2255268
--- /dev/null
+++ b/public/media/flags/anguilla.svg
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/antigua-and-barbuda.svg b/public/media/flags/antigua-and-barbuda.svg
new file mode 100644
index 0000000..b4c7c93
--- /dev/null
+++ b/public/media/flags/antigua-and-barbuda.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/argentina.svg b/public/media/flags/argentina.svg
new file mode 100644
index 0000000..0cd84ab
--- /dev/null
+++ b/public/media/flags/argentina.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/armenia.svg b/public/media/flags/armenia.svg
new file mode 100644
index 0000000..67a5a53
--- /dev/null
+++ b/public/media/flags/armenia.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/aruba.svg b/public/media/flags/aruba.svg
new file mode 100644
index 0000000..4f53a45
--- /dev/null
+++ b/public/media/flags/aruba.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/australia.svg b/public/media/flags/australia.svg
new file mode 100644
index 0000000..8fb8c0a
--- /dev/null
+++ b/public/media/flags/australia.svg
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/austria.svg b/public/media/flags/austria.svg
new file mode 100644
index 0000000..0be23ae
--- /dev/null
+++ b/public/media/flags/austria.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/azerbaijan.svg b/public/media/flags/azerbaijan.svg
new file mode 100644
index 0000000..fa12d8d
--- /dev/null
+++ b/public/media/flags/azerbaijan.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/azores-islands.svg b/public/media/flags/azores-islands.svg
new file mode 100644
index 0000000..40b29de
--- /dev/null
+++ b/public/media/flags/azores-islands.svg
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/bahamas.svg b/public/media/flags/bahamas.svg
new file mode 100644
index 0000000..c84792d
--- /dev/null
+++ b/public/media/flags/bahamas.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/bahrain.svg b/public/media/flags/bahrain.svg
new file mode 100644
index 0000000..374a7db
--- /dev/null
+++ b/public/media/flags/bahrain.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/balearic-islands.svg b/public/media/flags/balearic-islands.svg
new file mode 100644
index 0000000..c134fbf
--- /dev/null
+++ b/public/media/flags/balearic-islands.svg
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/bangladesh.svg b/public/media/flags/bangladesh.svg
new file mode 100644
index 0000000..0c948a0
--- /dev/null
+++ b/public/media/flags/bangladesh.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/barbados.svg b/public/media/flags/barbados.svg
new file mode 100644
index 0000000..bc5d4c1
--- /dev/null
+++ b/public/media/flags/barbados.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/basque-country.svg b/public/media/flags/basque-country.svg
new file mode 100644
index 0000000..619592a
--- /dev/null
+++ b/public/media/flags/basque-country.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/belarus.svg b/public/media/flags/belarus.svg
new file mode 100644
index 0000000..02d6a04
--- /dev/null
+++ b/public/media/flags/belarus.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/belgium.svg b/public/media/flags/belgium.svg
new file mode 100644
index 0000000..5359447
--- /dev/null
+++ b/public/media/flags/belgium.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/belize.svg b/public/media/flags/belize.svg
new file mode 100644
index 0000000..b89ae5f
--- /dev/null
+++ b/public/media/flags/belize.svg
@@ -0,0 +1,195 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/benin.svg b/public/media/flags/benin.svg
new file mode 100644
index 0000000..7599965
--- /dev/null
+++ b/public/media/flags/benin.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/bermuda.svg b/public/media/flags/bermuda.svg
new file mode 100644
index 0000000..7be8ebd
--- /dev/null
+++ b/public/media/flags/bermuda.svg
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/bhutan.svg b/public/media/flags/bhutan.svg
new file mode 100644
index 0000000..31fdde0
--- /dev/null
+++ b/public/media/flags/bhutan.svg
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/bolivia.svg b/public/media/flags/bolivia.svg
new file mode 100644
index 0000000..ee7868f
--- /dev/null
+++ b/public/media/flags/bolivia.svg
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/bonaire.svg b/public/media/flags/bonaire.svg
new file mode 100644
index 0000000..b7806da
--- /dev/null
+++ b/public/media/flags/bonaire.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/bosnia-and-herzegovina.svg b/public/media/flags/bosnia-and-herzegovina.svg
new file mode 100644
index 0000000..28e70bc
--- /dev/null
+++ b/public/media/flags/bosnia-and-herzegovina.svg
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/botswana.svg b/public/media/flags/botswana.svg
new file mode 100644
index 0000000..69a6911
--- /dev/null
+++ b/public/media/flags/botswana.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/brazil.svg b/public/media/flags/brazil.svg
new file mode 100644
index 0000000..6d38a61
--- /dev/null
+++ b/public/media/flags/brazil.svg
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/british-columbia.svg b/public/media/flags/british-columbia.svg
new file mode 100644
index 0000000..9793c4c
--- /dev/null
+++ b/public/media/flags/british-columbia.svg
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/british-indian-ocean-territory.svg b/public/media/flags/british-indian-ocean-territory.svg
new file mode 100644
index 0000000..6e1fcaf
--- /dev/null
+++ b/public/media/flags/british-indian-ocean-territory.svg
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/british-virgin-islands.svg b/public/media/flags/british-virgin-islands.svg
new file mode 100644
index 0000000..52174ad
--- /dev/null
+++ b/public/media/flags/british-virgin-islands.svg
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/brunei.svg b/public/media/flags/brunei.svg
new file mode 100644
index 0000000..4cca334
--- /dev/null
+++ b/public/media/flags/brunei.svg
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/bulgaria.svg b/public/media/flags/bulgaria.svg
new file mode 100644
index 0000000..60671ef
--- /dev/null
+++ b/public/media/flags/bulgaria.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/burkina-faso.svg b/public/media/flags/burkina-faso.svg
new file mode 100644
index 0000000..694be06
--- /dev/null
+++ b/public/media/flags/burkina-faso.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/burundi.svg b/public/media/flags/burundi.svg
new file mode 100644
index 0000000..3ffb8c8
--- /dev/null
+++ b/public/media/flags/burundi.svg
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/cambodia.svg b/public/media/flags/cambodia.svg
new file mode 100644
index 0000000..cbba946
--- /dev/null
+++ b/public/media/flags/cambodia.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/cameroon.svg b/public/media/flags/cameroon.svg
new file mode 100644
index 0000000..06a0179
--- /dev/null
+++ b/public/media/flags/cameroon.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/canada.svg b/public/media/flags/canada.svg
new file mode 100644
index 0000000..aa6531c
--- /dev/null
+++ b/public/media/flags/canada.svg
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/canary-islands.svg b/public/media/flags/canary-islands.svg
new file mode 100644
index 0000000..1b55832
--- /dev/null
+++ b/public/media/flags/canary-islands.svg
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/cape-verde.svg b/public/media/flags/cape-verde.svg
new file mode 100644
index 0000000..71f38fa
--- /dev/null
+++ b/public/media/flags/cape-verde.svg
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/cayman-islands.svg b/public/media/flags/cayman-islands.svg
new file mode 100644
index 0000000..8756e61
--- /dev/null
+++ b/public/media/flags/cayman-islands.svg
@@ -0,0 +1,146 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/central-african-republic.svg b/public/media/flags/central-african-republic.svg
new file mode 100644
index 0000000..00b434a
--- /dev/null
+++ b/public/media/flags/central-african-republic.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/ceuta.svg b/public/media/flags/ceuta.svg
new file mode 100644
index 0000000..38998e1
--- /dev/null
+++ b/public/media/flags/ceuta.svg
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/chad.svg b/public/media/flags/chad.svg
new file mode 100644
index 0000000..a1afd0d
--- /dev/null
+++ b/public/media/flags/chad.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/chile.svg b/public/media/flags/chile.svg
new file mode 100644
index 0000000..bea60c7
--- /dev/null
+++ b/public/media/flags/chile.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/china.svg b/public/media/flags/china.svg
new file mode 100644
index 0000000..c4f7a0c
--- /dev/null
+++ b/public/media/flags/china.svg
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/christmas-island.svg b/public/media/flags/christmas-island.svg
new file mode 100644
index 0000000..0107ea6
--- /dev/null
+++ b/public/media/flags/christmas-island.svg
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/cocos-island.svg b/public/media/flags/cocos-island.svg
new file mode 100644
index 0000000..5868744
--- /dev/null
+++ b/public/media/flags/cocos-island.svg
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/colombia.svg b/public/media/flags/colombia.svg
new file mode 100644
index 0000000..3f67537
--- /dev/null
+++ b/public/media/flags/colombia.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/comoros.svg b/public/media/flags/comoros.svg
new file mode 100644
index 0000000..923141a
--- /dev/null
+++ b/public/media/flags/comoros.svg
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/cook-islands.svg b/public/media/flags/cook-islands.svg
new file mode 100644
index 0000000..671a871
--- /dev/null
+++ b/public/media/flags/cook-islands.svg
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/corsica.svg b/public/media/flags/corsica.svg
new file mode 100644
index 0000000..528f6b1
--- /dev/null
+++ b/public/media/flags/corsica.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/costa-rica.svg b/public/media/flags/costa-rica.svg
new file mode 100644
index 0000000..596a10e
--- /dev/null
+++ b/public/media/flags/costa-rica.svg
@@ -0,0 +1,111 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/croatia.svg b/public/media/flags/croatia.svg
new file mode 100644
index 0000000..b37f9ba
--- /dev/null
+++ b/public/media/flags/croatia.svg
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/cuba.svg b/public/media/flags/cuba.svg
new file mode 100644
index 0000000..b84b10e
--- /dev/null
+++ b/public/media/flags/cuba.svg
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/curacao.svg b/public/media/flags/curacao.svg
new file mode 100644
index 0000000..286b87d
--- /dev/null
+++ b/public/media/flags/curacao.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/czech-republic.svg b/public/media/flags/czech-republic.svg
new file mode 100644
index 0000000..6e082b4
--- /dev/null
+++ b/public/media/flags/czech-republic.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/democratic-republic-of-congo.svg b/public/media/flags/democratic-republic-of-congo.svg
new file mode 100644
index 0000000..7fd9cc3
--- /dev/null
+++ b/public/media/flags/democratic-republic-of-congo.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/denmark.svg b/public/media/flags/denmark.svg
new file mode 100644
index 0000000..d2c9e7f
--- /dev/null
+++ b/public/media/flags/denmark.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/djibouti.svg b/public/media/flags/djibouti.svg
new file mode 100644
index 0000000..852b206
--- /dev/null
+++ b/public/media/flags/djibouti.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/dominica.svg b/public/media/flags/dominica.svg
new file mode 100644
index 0000000..c1228c6
--- /dev/null
+++ b/public/media/flags/dominica.svg
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/dominican-republic.svg b/public/media/flags/dominican-republic.svg
new file mode 100644
index 0000000..d96b67e
--- /dev/null
+++ b/public/media/flags/dominican-republic.svg
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/east-timor.svg b/public/media/flags/east-timor.svg
new file mode 100644
index 0000000..c6b2e2d
--- /dev/null
+++ b/public/media/flags/east-timor.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/ecuador.svg b/public/media/flags/ecuador.svg
new file mode 100644
index 0000000..4978a74
--- /dev/null
+++ b/public/media/flags/ecuador.svg
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/egypt.svg b/public/media/flags/egypt.svg
new file mode 100644
index 0000000..065d536
--- /dev/null
+++ b/public/media/flags/egypt.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/el-salvador.svg b/public/media/flags/el-salvador.svg
new file mode 100644
index 0000000..b2de291
--- /dev/null
+++ b/public/media/flags/el-salvador.svg
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/england.svg b/public/media/flags/england.svg
new file mode 100644
index 0000000..574257a
--- /dev/null
+++ b/public/media/flags/england.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/equatorial-guinea.svg b/public/media/flags/equatorial-guinea.svg
new file mode 100644
index 0000000..3cb6f88
--- /dev/null
+++ b/public/media/flags/equatorial-guinea.svg
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/eritrea.svg b/public/media/flags/eritrea.svg
new file mode 100644
index 0000000..0c737c0
--- /dev/null
+++ b/public/media/flags/eritrea.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/estonia.svg b/public/media/flags/estonia.svg
new file mode 100644
index 0000000..f44b53a
--- /dev/null
+++ b/public/media/flags/estonia.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/ethiopia.svg b/public/media/flags/ethiopia.svg
new file mode 100644
index 0000000..8990365
--- /dev/null
+++ b/public/media/flags/ethiopia.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/european-union.svg b/public/media/flags/european-union.svg
new file mode 100644
index 0000000..76377e8
--- /dev/null
+++ b/public/media/flags/european-union.svg
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/falkland-islands.svg b/public/media/flags/falkland-islands.svg
new file mode 100644
index 0000000..f5f0c22
--- /dev/null
+++ b/public/media/flags/falkland-islands.svg
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/fiji.svg b/public/media/flags/fiji.svg
new file mode 100644
index 0000000..21b61b7
--- /dev/null
+++ b/public/media/flags/fiji.svg
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/finland.svg b/public/media/flags/finland.svg
new file mode 100644
index 0000000..bae8824
--- /dev/null
+++ b/public/media/flags/finland.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/flag.svg b/public/media/flags/flag.svg
new file mode 100644
index 0000000..2f091d5
--- /dev/null
+++ b/public/media/flags/flag.svg
@@ -0,0 +1,171 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/france.svg b/public/media/flags/france.svg
new file mode 100644
index 0000000..d271892
--- /dev/null
+++ b/public/media/flags/france.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/french-polynesia.svg b/public/media/flags/french-polynesia.svg
new file mode 100644
index 0000000..9eb56ae
--- /dev/null
+++ b/public/media/flags/french-polynesia.svg
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/gabon.svg b/public/media/flags/gabon.svg
new file mode 100644
index 0000000..e7590c7
--- /dev/null
+++ b/public/media/flags/gabon.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/galapagos-islands.svg b/public/media/flags/galapagos-islands.svg
new file mode 100644
index 0000000..5c9bb4a
--- /dev/null
+++ b/public/media/flags/galapagos-islands.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/gambia.svg b/public/media/flags/gambia.svg
new file mode 100644
index 0000000..db309a4
--- /dev/null
+++ b/public/media/flags/gambia.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/georgia.svg b/public/media/flags/georgia.svg
new file mode 100644
index 0000000..19aeac1
--- /dev/null
+++ b/public/media/flags/georgia.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/germany.svg b/public/media/flags/germany.svg
new file mode 100644
index 0000000..4290c77
--- /dev/null
+++ b/public/media/flags/germany.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/ghana.svg b/public/media/flags/ghana.svg
new file mode 100644
index 0000000..3f83f4d
--- /dev/null
+++ b/public/media/flags/ghana.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/gibraltar.svg b/public/media/flags/gibraltar.svg
new file mode 100644
index 0000000..d7c167e
--- /dev/null
+++ b/public/media/flags/gibraltar.svg
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/greece.svg b/public/media/flags/greece.svg
new file mode 100644
index 0000000..9632b6f
--- /dev/null
+++ b/public/media/flags/greece.svg
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/greenland.svg b/public/media/flags/greenland.svg
new file mode 100644
index 0000000..c2b7355
--- /dev/null
+++ b/public/media/flags/greenland.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/grenada.svg b/public/media/flags/grenada.svg
new file mode 100644
index 0000000..9ec3356
--- /dev/null
+++ b/public/media/flags/grenada.svg
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/guam.svg b/public/media/flags/guam.svg
new file mode 100644
index 0000000..64bf9fd
--- /dev/null
+++ b/public/media/flags/guam.svg
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/guatemala.svg b/public/media/flags/guatemala.svg
new file mode 100644
index 0000000..4b4ff32
--- /dev/null
+++ b/public/media/flags/guatemala.svg
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/guernsey.svg b/public/media/flags/guernsey.svg
new file mode 100644
index 0000000..250079e
--- /dev/null
+++ b/public/media/flags/guernsey.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/guinea-bissau.svg b/public/media/flags/guinea-bissau.svg
new file mode 100644
index 0000000..03c737b
--- /dev/null
+++ b/public/media/flags/guinea-bissau.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/guinea.svg b/public/media/flags/guinea.svg
new file mode 100644
index 0000000..309f35d
--- /dev/null
+++ b/public/media/flags/guinea.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/haiti.svg b/public/media/flags/haiti.svg
new file mode 100644
index 0000000..fd0497d
--- /dev/null
+++ b/public/media/flags/haiti.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/hawaii.svg b/public/media/flags/hawaii.svg
new file mode 100644
index 0000000..4955f12
--- /dev/null
+++ b/public/media/flags/hawaii.svg
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/honduras.svg b/public/media/flags/honduras.svg
new file mode 100644
index 0000000..08d48d8
--- /dev/null
+++ b/public/media/flags/honduras.svg
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/hong-kong.svg b/public/media/flags/hong-kong.svg
new file mode 100644
index 0000000..bc23f8a
--- /dev/null
+++ b/public/media/flags/hong-kong.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/hungary.svg b/public/media/flags/hungary.svg
new file mode 100644
index 0000000..62a7816
--- /dev/null
+++ b/public/media/flags/hungary.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/iceland.svg b/public/media/flags/iceland.svg
new file mode 100644
index 0000000..93a5806
--- /dev/null
+++ b/public/media/flags/iceland.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/india.svg b/public/media/flags/india.svg
new file mode 100644
index 0000000..a35952d
--- /dev/null
+++ b/public/media/flags/india.svg
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/indonesia.svg b/public/media/flags/indonesia.svg
new file mode 100644
index 0000000..2f61500
--- /dev/null
+++ b/public/media/flags/indonesia.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/iran.svg b/public/media/flags/iran.svg
new file mode 100644
index 0000000..8f00529
--- /dev/null
+++ b/public/media/flags/iran.svg
@@ -0,0 +1,119 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/iraq.svg b/public/media/flags/iraq.svg
new file mode 100644
index 0000000..a78b6e9
--- /dev/null
+++ b/public/media/flags/iraq.svg
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/ireland.svg b/public/media/flags/ireland.svg
new file mode 100644
index 0000000..c1f75ba
--- /dev/null
+++ b/public/media/flags/ireland.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/isle-of-man.svg b/public/media/flags/isle-of-man.svg
new file mode 100644
index 0000000..9ff50f6
--- /dev/null
+++ b/public/media/flags/isle-of-man.svg
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/israel.svg b/public/media/flags/israel.svg
new file mode 100644
index 0000000..0c1f226
--- /dev/null
+++ b/public/media/flags/israel.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/italy.svg b/public/media/flags/italy.svg
new file mode 100644
index 0000000..2c3a2e3
--- /dev/null
+++ b/public/media/flags/italy.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/ivory-coast.svg b/public/media/flags/ivory-coast.svg
new file mode 100644
index 0000000..eea20db
--- /dev/null
+++ b/public/media/flags/ivory-coast.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/jamaica.svg b/public/media/flags/jamaica.svg
new file mode 100644
index 0000000..a709601
--- /dev/null
+++ b/public/media/flags/jamaica.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/japan.svg b/public/media/flags/japan.svg
new file mode 100644
index 0000000..7d0e0cb
--- /dev/null
+++ b/public/media/flags/japan.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/jersey.svg b/public/media/flags/jersey.svg
new file mode 100644
index 0000000..04130bb
--- /dev/null
+++ b/public/media/flags/jersey.svg
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/jordan.svg b/public/media/flags/jordan.svg
new file mode 100644
index 0000000..d05aa3d
--- /dev/null
+++ b/public/media/flags/jordan.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/kazakhstan.svg b/public/media/flags/kazakhstan.svg
new file mode 100644
index 0000000..40975f7
--- /dev/null
+++ b/public/media/flags/kazakhstan.svg
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/kenya.svg b/public/media/flags/kenya.svg
new file mode 100644
index 0000000..12ef6bc
--- /dev/null
+++ b/public/media/flags/kenya.svg
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/kiribati.svg b/public/media/flags/kiribati.svg
new file mode 100644
index 0000000..700fa69
--- /dev/null
+++ b/public/media/flags/kiribati.svg
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/kosovo.svg b/public/media/flags/kosovo.svg
new file mode 100644
index 0000000..7a9aea7
--- /dev/null
+++ b/public/media/flags/kosovo.svg
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/kuwait.svg b/public/media/flags/kuwait.svg
new file mode 100644
index 0000000..5f9514f
--- /dev/null
+++ b/public/media/flags/kuwait.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/kyrgyzstan.svg b/public/media/flags/kyrgyzstan.svg
new file mode 100644
index 0000000..646fd34
--- /dev/null
+++ b/public/media/flags/kyrgyzstan.svg
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/laos.svg b/public/media/flags/laos.svg
new file mode 100644
index 0000000..d05646e
--- /dev/null
+++ b/public/media/flags/laos.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/latvia.svg b/public/media/flags/latvia.svg
new file mode 100644
index 0000000..a2e0615
--- /dev/null
+++ b/public/media/flags/latvia.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/lebanon.svg b/public/media/flags/lebanon.svg
new file mode 100644
index 0000000..f41f74f
--- /dev/null
+++ b/public/media/flags/lebanon.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/lesotho.svg b/public/media/flags/lesotho.svg
new file mode 100644
index 0000000..57f22a4
--- /dev/null
+++ b/public/media/flags/lesotho.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/liberia.svg b/public/media/flags/liberia.svg
new file mode 100644
index 0000000..b0f6ecb
--- /dev/null
+++ b/public/media/flags/liberia.svg
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/libya.svg b/public/media/flags/libya.svg
new file mode 100644
index 0000000..33e2c2f
--- /dev/null
+++ b/public/media/flags/libya.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/liechtenstein.svg b/public/media/flags/liechtenstein.svg
new file mode 100644
index 0000000..b6075b9
--- /dev/null
+++ b/public/media/flags/liechtenstein.svg
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/lithuania.svg b/public/media/flags/lithuania.svg
new file mode 100644
index 0000000..e2ae265
--- /dev/null
+++ b/public/media/flags/lithuania.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/luxembourg.svg b/public/media/flags/luxembourg.svg
new file mode 100644
index 0000000..c81d754
--- /dev/null
+++ b/public/media/flags/luxembourg.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/macao.svg b/public/media/flags/macao.svg
new file mode 100644
index 0000000..25cbedc
--- /dev/null
+++ b/public/media/flags/macao.svg
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/madagascar.svg b/public/media/flags/madagascar.svg
new file mode 100644
index 0000000..7b0360b
--- /dev/null
+++ b/public/media/flags/madagascar.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/madeira.svg b/public/media/flags/madeira.svg
new file mode 100644
index 0000000..202611f
--- /dev/null
+++ b/public/media/flags/madeira.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/malawi.svg b/public/media/flags/malawi.svg
new file mode 100644
index 0000000..dd13a37
--- /dev/null
+++ b/public/media/flags/malawi.svg
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/malaysia.svg b/public/media/flags/malaysia.svg
new file mode 100644
index 0000000..d54136a
--- /dev/null
+++ b/public/media/flags/malaysia.svg
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/maldives.svg b/public/media/flags/maldives.svg
new file mode 100644
index 0000000..1459140
--- /dev/null
+++ b/public/media/flags/maldives.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/mali.svg b/public/media/flags/mali.svg
new file mode 100644
index 0000000..9059f81
--- /dev/null
+++ b/public/media/flags/mali.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/malta.svg b/public/media/flags/malta.svg
new file mode 100644
index 0000000..83bc352
--- /dev/null
+++ b/public/media/flags/malta.svg
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/marshall-island.svg b/public/media/flags/marshall-island.svg
new file mode 100644
index 0000000..7e51ddc
--- /dev/null
+++ b/public/media/flags/marshall-island.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/martinique.svg b/public/media/flags/martinique.svg
new file mode 100644
index 0000000..e80b49c
--- /dev/null
+++ b/public/media/flags/martinique.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/mauritania.svg b/public/media/flags/mauritania.svg
new file mode 100644
index 0000000..f5dba04
--- /dev/null
+++ b/public/media/flags/mauritania.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/mauritius.svg b/public/media/flags/mauritius.svg
new file mode 100644
index 0000000..96a7abf
--- /dev/null
+++ b/public/media/flags/mauritius.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/melilla.svg b/public/media/flags/melilla.svg
new file mode 100644
index 0000000..10b20a4
--- /dev/null
+++ b/public/media/flags/melilla.svg
@@ -0,0 +1,139 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/mexico.svg b/public/media/flags/mexico.svg
new file mode 100644
index 0000000..8f5d9b4
--- /dev/null
+++ b/public/media/flags/mexico.svg
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/micronesia.svg b/public/media/flags/micronesia.svg
new file mode 100644
index 0000000..07f6f94
--- /dev/null
+++ b/public/media/flags/micronesia.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/moldova.svg b/public/media/flags/moldova.svg
new file mode 100644
index 0000000..5e403f3
--- /dev/null
+++ b/public/media/flags/moldova.svg
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/monaco.svg b/public/media/flags/monaco.svg
new file mode 100644
index 0000000..565cf5f
--- /dev/null
+++ b/public/media/flags/monaco.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/mongolia.svg b/public/media/flags/mongolia.svg
new file mode 100644
index 0000000..0037448
--- /dev/null
+++ b/public/media/flags/mongolia.svg
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/montenegro.svg b/public/media/flags/montenegro.svg
new file mode 100644
index 0000000..bf10070
--- /dev/null
+++ b/public/media/flags/montenegro.svg
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/montserrat.svg b/public/media/flags/montserrat.svg
new file mode 100644
index 0000000..cf1b3ec
--- /dev/null
+++ b/public/media/flags/montserrat.svg
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/morocco.svg b/public/media/flags/morocco.svg
new file mode 100644
index 0000000..5acea60
--- /dev/null
+++ b/public/media/flags/morocco.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/mozambique.svg b/public/media/flags/mozambique.svg
new file mode 100644
index 0000000..63f579e
--- /dev/null
+++ b/public/media/flags/mozambique.svg
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/myanmar.svg b/public/media/flags/myanmar.svg
new file mode 100644
index 0000000..6bcce7d
--- /dev/null
+++ b/public/media/flags/myanmar.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/namibia.svg b/public/media/flags/namibia.svg
new file mode 100644
index 0000000..dd6fb2c
--- /dev/null
+++ b/public/media/flags/namibia.svg
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/nato.svg b/public/media/flags/nato.svg
new file mode 100644
index 0000000..f8603fe
--- /dev/null
+++ b/public/media/flags/nato.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/nauru.svg b/public/media/flags/nauru.svg
new file mode 100644
index 0000000..e922d0e
--- /dev/null
+++ b/public/media/flags/nauru.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/nepal.svg b/public/media/flags/nepal.svg
new file mode 100644
index 0000000..8009e9e
--- /dev/null
+++ b/public/media/flags/nepal.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/netherlands.svg b/public/media/flags/netherlands.svg
new file mode 100644
index 0000000..2f71030
--- /dev/null
+++ b/public/media/flags/netherlands.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/new-zealand.svg b/public/media/flags/new-zealand.svg
new file mode 100644
index 0000000..cc0ee7f
--- /dev/null
+++ b/public/media/flags/new-zealand.svg
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/nicaragua.svg b/public/media/flags/nicaragua.svg
new file mode 100644
index 0000000..27b6cca
--- /dev/null
+++ b/public/media/flags/nicaragua.svg
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/niger.svg b/public/media/flags/niger.svg
new file mode 100644
index 0000000..60a73a2
--- /dev/null
+++ b/public/media/flags/niger.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/nigeria.svg b/public/media/flags/nigeria.svg
new file mode 100644
index 0000000..41da495
--- /dev/null
+++ b/public/media/flags/nigeria.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/niue.svg b/public/media/flags/niue.svg
new file mode 100644
index 0000000..0c3b6d0
--- /dev/null
+++ b/public/media/flags/niue.svg
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/norfolk-island.svg b/public/media/flags/norfolk-island.svg
new file mode 100644
index 0000000..2082bdf
--- /dev/null
+++ b/public/media/flags/norfolk-island.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/north-korea.svg b/public/media/flags/north-korea.svg
new file mode 100644
index 0000000..31d1463
--- /dev/null
+++ b/public/media/flags/north-korea.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/northern-cyprus.svg b/public/media/flags/northern-cyprus.svg
new file mode 100644
index 0000000..0587fe0
--- /dev/null
+++ b/public/media/flags/northern-cyprus.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/northern-mariana-islands.svg b/public/media/flags/northern-mariana-islands.svg
new file mode 100644
index 0000000..4029970
--- /dev/null
+++ b/public/media/flags/northern-mariana-islands.svg
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/norway.svg b/public/media/flags/norway.svg
new file mode 100644
index 0000000..46ab6bf
--- /dev/null
+++ b/public/media/flags/norway.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/oman.svg b/public/media/flags/oman.svg
new file mode 100644
index 0000000..5030fca
--- /dev/null
+++ b/public/media/flags/oman.svg
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/ossetia.svg b/public/media/flags/ossetia.svg
new file mode 100644
index 0000000..7d8cdd0
--- /dev/null
+++ b/public/media/flags/ossetia.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/pakistan.svg b/public/media/flags/pakistan.svg
new file mode 100644
index 0000000..f792bfe
--- /dev/null
+++ b/public/media/flags/pakistan.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/palau.svg b/public/media/flags/palau.svg
new file mode 100644
index 0000000..19623a2
--- /dev/null
+++ b/public/media/flags/palau.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/palestine.svg b/public/media/flags/palestine.svg
new file mode 100644
index 0000000..0072a44
--- /dev/null
+++ b/public/media/flags/palestine.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/panama.svg b/public/media/flags/panama.svg
new file mode 100644
index 0000000..e89f18c
--- /dev/null
+++ b/public/media/flags/panama.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/papua-new-guinea.svg b/public/media/flags/papua-new-guinea.svg
new file mode 100644
index 0000000..05a76f9
--- /dev/null
+++ b/public/media/flags/papua-new-guinea.svg
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/paraguay.svg b/public/media/flags/paraguay.svg
new file mode 100644
index 0000000..8f2e962
--- /dev/null
+++ b/public/media/flags/paraguay.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/peru.svg b/public/media/flags/peru.svg
new file mode 100644
index 0000000..cd23022
--- /dev/null
+++ b/public/media/flags/peru.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/philippines.svg b/public/media/flags/philippines.svg
new file mode 100644
index 0000000..a6772d6
--- /dev/null
+++ b/public/media/flags/philippines.svg
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/pitcairn-islands.svg b/public/media/flags/pitcairn-islands.svg
new file mode 100644
index 0000000..ccd508d
--- /dev/null
+++ b/public/media/flags/pitcairn-islands.svg
@@ -0,0 +1,128 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/poland.svg b/public/media/flags/poland.svg
new file mode 100644
index 0000000..f4cd957
--- /dev/null
+++ b/public/media/flags/poland.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/portugal.svg b/public/media/flags/portugal.svg
new file mode 100644
index 0000000..91a14e6
--- /dev/null
+++ b/public/media/flags/portugal.svg
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/puerto-rico.svg b/public/media/flags/puerto-rico.svg
new file mode 100644
index 0000000..6622b48
--- /dev/null
+++ b/public/media/flags/puerto-rico.svg
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/qatar.svg b/public/media/flags/qatar.svg
new file mode 100644
index 0000000..718a769
--- /dev/null
+++ b/public/media/flags/qatar.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/rapa-nui.svg b/public/media/flags/rapa-nui.svg
new file mode 100644
index 0000000..0cb703e
--- /dev/null
+++ b/public/media/flags/rapa-nui.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/republic-of-macedonia.svg b/public/media/flags/republic-of-macedonia.svg
new file mode 100644
index 0000000..5966f94
--- /dev/null
+++ b/public/media/flags/republic-of-macedonia.svg
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/republic-of-the-congo.svg b/public/media/flags/republic-of-the-congo.svg
new file mode 100644
index 0000000..1d96ea7
--- /dev/null
+++ b/public/media/flags/republic-of-the-congo.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/romania.svg b/public/media/flags/romania.svg
new file mode 100644
index 0000000..f274915
--- /dev/null
+++ b/public/media/flags/romania.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/russia.svg b/public/media/flags/russia.svg
new file mode 100644
index 0000000..17299e2
--- /dev/null
+++ b/public/media/flags/russia.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/rwanda.svg b/public/media/flags/rwanda.svg
new file mode 100644
index 0000000..18810be
--- /dev/null
+++ b/public/media/flags/rwanda.svg
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/saba-island.svg b/public/media/flags/saba-island.svg
new file mode 100644
index 0000000..fbd7ffc
--- /dev/null
+++ b/public/media/flags/saba-island.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/sahrawi-arab-democratic-republic.svg b/public/media/flags/sahrawi-arab-democratic-republic.svg
new file mode 100644
index 0000000..29e3d7f
--- /dev/null
+++ b/public/media/flags/sahrawi-arab-democratic-republic.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/saint-kitts-and-nevis.svg b/public/media/flags/saint-kitts-and-nevis.svg
new file mode 100644
index 0000000..d503337
--- /dev/null
+++ b/public/media/flags/saint-kitts-and-nevis.svg
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/samoa.svg b/public/media/flags/samoa.svg
new file mode 100644
index 0000000..1327d3f
--- /dev/null
+++ b/public/media/flags/samoa.svg
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/san-marino.svg b/public/media/flags/san-marino.svg
new file mode 100644
index 0000000..3334f79
--- /dev/null
+++ b/public/media/flags/san-marino.svg
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/sao-tome-and-prince.svg b/public/media/flags/sao-tome-and-prince.svg
new file mode 100644
index 0000000..2be137a
--- /dev/null
+++ b/public/media/flags/sao-tome-and-prince.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/sardinia.svg b/public/media/flags/sardinia.svg
new file mode 100644
index 0000000..9c122f5
--- /dev/null
+++ b/public/media/flags/sardinia.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/saudi-arabia.svg b/public/media/flags/saudi-arabia.svg
new file mode 100644
index 0000000..fffb816
--- /dev/null
+++ b/public/media/flags/saudi-arabia.svg
@@ -0,0 +1,205 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/scotland.svg b/public/media/flags/scotland.svg
new file mode 100644
index 0000000..995b18b
--- /dev/null
+++ b/public/media/flags/scotland.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/senegal.svg b/public/media/flags/senegal.svg
new file mode 100644
index 0000000..43aeda2
--- /dev/null
+++ b/public/media/flags/senegal.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/serbia.svg b/public/media/flags/serbia.svg
new file mode 100644
index 0000000..f2d47b2
--- /dev/null
+++ b/public/media/flags/serbia.svg
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/seychelles.svg b/public/media/flags/seychelles.svg
new file mode 100644
index 0000000..9c48b97
--- /dev/null
+++ b/public/media/flags/seychelles.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/sicily.svg b/public/media/flags/sicily.svg
new file mode 100644
index 0000000..6b382a4
--- /dev/null
+++ b/public/media/flags/sicily.svg
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/sierra-leone.svg b/public/media/flags/sierra-leone.svg
new file mode 100644
index 0000000..3ef894d
--- /dev/null
+++ b/public/media/flags/sierra-leone.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/singapore.svg b/public/media/flags/singapore.svg
new file mode 100644
index 0000000..c1bbe0d
--- /dev/null
+++ b/public/media/flags/singapore.svg
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/sint-eustatius.svg b/public/media/flags/sint-eustatius.svg
new file mode 100644
index 0000000..317526e
--- /dev/null
+++ b/public/media/flags/sint-eustatius.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/sint-maarten.svg b/public/media/flags/sint-maarten.svg
new file mode 100644
index 0000000..bf2c035
--- /dev/null
+++ b/public/media/flags/sint-maarten.svg
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/slovakia.svg b/public/media/flags/slovakia.svg
new file mode 100644
index 0000000..8ca0933
--- /dev/null
+++ b/public/media/flags/slovakia.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/slovenia.svg b/public/media/flags/slovenia.svg
new file mode 100644
index 0000000..8b63232
--- /dev/null
+++ b/public/media/flags/slovenia.svg
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/solomon-islands.svg b/public/media/flags/solomon-islands.svg
new file mode 100644
index 0000000..7203b62
--- /dev/null
+++ b/public/media/flags/solomon-islands.svg
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/somalia.svg b/public/media/flags/somalia.svg
new file mode 100644
index 0000000..3b72d5c
--- /dev/null
+++ b/public/media/flags/somalia.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/somaliland.svg b/public/media/flags/somaliland.svg
new file mode 100644
index 0000000..deb11fe
--- /dev/null
+++ b/public/media/flags/somaliland.svg
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/south-africa.svg b/public/media/flags/south-africa.svg
new file mode 100644
index 0000000..2e657ba
--- /dev/null
+++ b/public/media/flags/south-africa.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/south-korea.svg b/public/media/flags/south-korea.svg
new file mode 100644
index 0000000..acd5c90
--- /dev/null
+++ b/public/media/flags/south-korea.svg
@@ -0,0 +1,98 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/south-sudan.svg b/public/media/flags/south-sudan.svg
new file mode 100644
index 0000000..ac0a21e
--- /dev/null
+++ b/public/media/flags/south-sudan.svg
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/spain.svg b/public/media/flags/spain.svg
new file mode 100644
index 0000000..5f67162
--- /dev/null
+++ b/public/media/flags/spain.svg
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/sri-lanka.svg b/public/media/flags/sri-lanka.svg
new file mode 100644
index 0000000..eaf58c3
--- /dev/null
+++ b/public/media/flags/sri-lanka.svg
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/st-barts.svg b/public/media/flags/st-barts.svg
new file mode 100644
index 0000000..5205637
--- /dev/null
+++ b/public/media/flags/st-barts.svg
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/st-lucia.svg b/public/media/flags/st-lucia.svg
new file mode 100644
index 0000000..3d32682
--- /dev/null
+++ b/public/media/flags/st-lucia.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/st-vincent-and-the-grenadines.svg b/public/media/flags/st-vincent-and-the-grenadines.svg
new file mode 100644
index 0000000..ffe6fee
--- /dev/null
+++ b/public/media/flags/st-vincent-and-the-grenadines.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/sudan.svg b/public/media/flags/sudan.svg
new file mode 100644
index 0000000..6df8c2d
--- /dev/null
+++ b/public/media/flags/sudan.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/suriname.svg b/public/media/flags/suriname.svg
new file mode 100644
index 0000000..16f6fa7
--- /dev/null
+++ b/public/media/flags/suriname.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/swaziland.svg b/public/media/flags/swaziland.svg
new file mode 100644
index 0000000..718aab5
--- /dev/null
+++ b/public/media/flags/swaziland.svg
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/sweden.svg b/public/media/flags/sweden.svg
new file mode 100644
index 0000000..e27a5f7
--- /dev/null
+++ b/public/media/flags/sweden.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/switzerland.svg b/public/media/flags/switzerland.svg
new file mode 100644
index 0000000..61e4e81
--- /dev/null
+++ b/public/media/flags/switzerland.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/syria.svg b/public/media/flags/syria.svg
new file mode 100644
index 0000000..3e98f58
--- /dev/null
+++ b/public/media/flags/syria.svg
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/taiwan.svg b/public/media/flags/taiwan.svg
new file mode 100644
index 0000000..d1f3671
--- /dev/null
+++ b/public/media/flags/taiwan.svg
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/tajikistan.svg b/public/media/flags/tajikistan.svg
new file mode 100644
index 0000000..4c1f795
--- /dev/null
+++ b/public/media/flags/tajikistan.svg
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/tanzania.svg b/public/media/flags/tanzania.svg
new file mode 100644
index 0000000..55f7129
--- /dev/null
+++ b/public/media/flags/tanzania.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/thailand.svg b/public/media/flags/thailand.svg
new file mode 100644
index 0000000..e5dae5c
--- /dev/null
+++ b/public/media/flags/thailand.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/tibet.svg b/public/media/flags/tibet.svg
new file mode 100644
index 0000000..cc24bc2
--- /dev/null
+++ b/public/media/flags/tibet.svg
@@ -0,0 +1,203 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/togo.svg b/public/media/flags/togo.svg
new file mode 100644
index 0000000..66100af
--- /dev/null
+++ b/public/media/flags/togo.svg
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/tokelau.svg b/public/media/flags/tokelau.svg
new file mode 100644
index 0000000..c48108d
--- /dev/null
+++ b/public/media/flags/tokelau.svg
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/tonga.svg b/public/media/flags/tonga.svg
new file mode 100644
index 0000000..7116131
--- /dev/null
+++ b/public/media/flags/tonga.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/transnistria.svg b/public/media/flags/transnistria.svg
new file mode 100644
index 0000000..e0439ab
--- /dev/null
+++ b/public/media/flags/transnistria.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/trinidad-and-tobago.svg b/public/media/flags/trinidad-and-tobago.svg
new file mode 100644
index 0000000..72e026f
--- /dev/null
+++ b/public/media/flags/trinidad-and-tobago.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/tunisia.svg b/public/media/flags/tunisia.svg
new file mode 100644
index 0000000..08e4379
--- /dev/null
+++ b/public/media/flags/tunisia.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/turkey.svg b/public/media/flags/turkey.svg
new file mode 100644
index 0000000..0a5cb9c
--- /dev/null
+++ b/public/media/flags/turkey.svg
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/turkmenistan.svg b/public/media/flags/turkmenistan.svg
new file mode 100644
index 0000000..c130cd7
--- /dev/null
+++ b/public/media/flags/turkmenistan.svg
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/turks-and-caicos.svg b/public/media/flags/turks-and-caicos.svg
new file mode 100644
index 0000000..17bfea2
--- /dev/null
+++ b/public/media/flags/turks-and-caicos.svg
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/tuvalu-1.svg b/public/media/flags/tuvalu-1.svg
new file mode 100644
index 0000000..d49cabb
--- /dev/null
+++ b/public/media/flags/tuvalu-1.svg
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/tuvalu.svg b/public/media/flags/tuvalu.svg
new file mode 100644
index 0000000..871d1de
--- /dev/null
+++ b/public/media/flags/tuvalu.svg
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/uganda.svg b/public/media/flags/uganda.svg
new file mode 100644
index 0000000..926bc9d
--- /dev/null
+++ b/public/media/flags/uganda.svg
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/uk.svg b/public/media/flags/uk.svg
new file mode 100644
index 0000000..383c9e8
--- /dev/null
+++ b/public/media/flags/uk.svg
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/ukraine.svg b/public/media/flags/ukraine.svg
new file mode 100644
index 0000000..04b8a32
--- /dev/null
+++ b/public/media/flags/ukraine.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/united-arab-emirates.svg b/public/media/flags/united-arab-emirates.svg
new file mode 100644
index 0000000..c507b8f
--- /dev/null
+++ b/public/media/flags/united-arab-emirates.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/united-kingdom.svg b/public/media/flags/united-kingdom.svg
new file mode 100644
index 0000000..bab1dbd
--- /dev/null
+++ b/public/media/flags/united-kingdom.svg
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/united-nations.svg b/public/media/flags/united-nations.svg
new file mode 100644
index 0000000..c4db01a
--- /dev/null
+++ b/public/media/flags/united-nations.svg
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/united-states.svg b/public/media/flags/united-states.svg
new file mode 100644
index 0000000..37ff08d
--- /dev/null
+++ b/public/media/flags/united-states.svg
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/uruguay.svg b/public/media/flags/uruguay.svg
new file mode 100644
index 0000000..9d5ea42
--- /dev/null
+++ b/public/media/flags/uruguay.svg
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/uzbekistan.svg b/public/media/flags/uzbekistan.svg
new file mode 100644
index 0000000..265704a
--- /dev/null
+++ b/public/media/flags/uzbekistan.svg
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/vanuatu.svg b/public/media/flags/vanuatu.svg
new file mode 100644
index 0000000..fcbd354
--- /dev/null
+++ b/public/media/flags/vanuatu.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/vatican-city.svg b/public/media/flags/vatican-city.svg
new file mode 100644
index 0000000..62464e7
--- /dev/null
+++ b/public/media/flags/vatican-city.svg
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/venezuela.svg b/public/media/flags/venezuela.svg
new file mode 100644
index 0000000..e35b132
--- /dev/null
+++ b/public/media/flags/venezuela.svg
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/vietnam.svg b/public/media/flags/vietnam.svg
new file mode 100644
index 0000000..08f02fb
--- /dev/null
+++ b/public/media/flags/vietnam.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/virgin-islands.svg b/public/media/flags/virgin-islands.svg
new file mode 100644
index 0000000..bcb036f
--- /dev/null
+++ b/public/media/flags/virgin-islands.svg
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/wales.svg b/public/media/flags/wales.svg
new file mode 100644
index 0000000..3130bca
--- /dev/null
+++ b/public/media/flags/wales.svg
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/yemen.svg b/public/media/flags/yemen.svg
new file mode 100644
index 0000000..dbe7eb0
--- /dev/null
+++ b/public/media/flags/yemen.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/zambia.svg b/public/media/flags/zambia.svg
new file mode 100644
index 0000000..50a5fbc
--- /dev/null
+++ b/public/media/flags/zambia.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/flags/zimbabwe.svg b/public/media/flags/zimbabwe.svg
new file mode 100644
index 0000000..cd3c0b3
--- /dev/null
+++ b/public/media/flags/zimbabwe.svg
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/framework-logos/Angular.png b/public/media/framework-logos/Angular.png
new file mode 100644
index 0000000..c26ae4d
Binary files /dev/null and b/public/media/framework-logos/Angular.png differ
diff --git a/public/media/framework-logos/React.png b/public/media/framework-logos/React.png
new file mode 100644
index 0000000..5544e61
Binary files /dev/null and b/public/media/framework-logos/React.png differ
diff --git a/public/media/framework-logos/asp.net-core.png b/public/media/framework-logos/asp.net-core.png
new file mode 100644
index 0000000..8e872c9
Binary files /dev/null and b/public/media/framework-logos/asp.net-core.png differ
diff --git a/public/media/framework-logos/blazor.png b/public/media/framework-logos/blazor.png
new file mode 100644
index 0000000..1411c78
Binary files /dev/null and b/public/media/framework-logos/blazor.png differ
diff --git a/public/media/framework-logos/bootstrap.png b/public/media/framework-logos/bootstrap.png
new file mode 100644
index 0000000..4266d4a
Binary files /dev/null and b/public/media/framework-logos/bootstrap.png differ
diff --git a/public/media/framework-logos/codeigniter.png b/public/media/framework-logos/codeigniter.png
new file mode 100644
index 0000000..621a4c7
Binary files /dev/null and b/public/media/framework-logos/codeigniter.png differ
diff --git a/public/media/framework-logos/django.png b/public/media/framework-logos/django.png
new file mode 100644
index 0000000..c124bbc
Binary files /dev/null and b/public/media/framework-logos/django.png differ
diff --git a/public/media/framework-logos/flask.png b/public/media/framework-logos/flask.png
new file mode 100644
index 0000000..004eb7e
Binary files /dev/null and b/public/media/framework-logos/flask.png differ
diff --git a/public/media/framework-logos/go.png b/public/media/framework-logos/go.png
new file mode 100644
index 0000000..5e102d4
Binary files /dev/null and b/public/media/framework-logos/go.png differ
diff --git a/public/media/framework-logos/html.png b/public/media/framework-logos/html.png
new file mode 100644
index 0000000..851cb6c
Binary files /dev/null and b/public/media/framework-logos/html.png differ
diff --git a/public/media/framework-logos/inactive/angular.png b/public/media/framework-logos/inactive/angular.png
new file mode 100644
index 0000000..960db96
Binary files /dev/null and b/public/media/framework-logos/inactive/angular.png differ
diff --git a/public/media/framework-logos/inactive/asp.net-core.png b/public/media/framework-logos/inactive/asp.net-core.png
new file mode 100644
index 0000000..cdd50d6
Binary files /dev/null and b/public/media/framework-logos/inactive/asp.net-core.png differ
diff --git a/public/media/framework-logos/inactive/blazor.png b/public/media/framework-logos/inactive/blazor.png
new file mode 100644
index 0000000..a0a7926
Binary files /dev/null and b/public/media/framework-logos/inactive/blazor.png differ
diff --git a/public/media/framework-logos/inactive/bootstrap.png b/public/media/framework-logos/inactive/bootstrap.png
new file mode 100644
index 0000000..6887e65
Binary files /dev/null and b/public/media/framework-logos/inactive/bootstrap.png differ
diff --git a/public/media/framework-logos/inactive/codeigniter.png b/public/media/framework-logos/inactive/codeigniter.png
new file mode 100644
index 0000000..fc369a8
Binary files /dev/null and b/public/media/framework-logos/inactive/codeigniter.png differ
diff --git a/public/media/framework-logos/inactive/django.png b/public/media/framework-logos/inactive/django.png
new file mode 100644
index 0000000..cb12390
Binary files /dev/null and b/public/media/framework-logos/inactive/django.png differ
diff --git a/public/media/framework-logos/inactive/flask.png b/public/media/framework-logos/inactive/flask.png
new file mode 100644
index 0000000..28dbe90
Binary files /dev/null and b/public/media/framework-logos/inactive/flask.png differ
diff --git a/public/media/framework-logos/inactive/go.png b/public/media/framework-logos/inactive/go.png
new file mode 100644
index 0000000..9e5bfb2
Binary files /dev/null and b/public/media/framework-logos/inactive/go.png differ
diff --git a/public/media/framework-logos/inactive/html.png b/public/media/framework-logos/inactive/html.png
new file mode 100644
index 0000000..18ae89e
Binary files /dev/null and b/public/media/framework-logos/inactive/html.png differ
diff --git a/public/media/framework-logos/inactive/laravel.png b/public/media/framework-logos/inactive/laravel.png
new file mode 100644
index 0000000..0dcc9ea
Binary files /dev/null and b/public/media/framework-logos/inactive/laravel.png differ
diff --git a/public/media/framework-logos/inactive/nodejs.png b/public/media/framework-logos/inactive/nodejs.png
new file mode 100644
index 0000000..65945bd
Binary files /dev/null and b/public/media/framework-logos/inactive/nodejs.png differ
diff --git a/public/media/framework-logos/inactive/play.png b/public/media/framework-logos/inactive/play.png
new file mode 100644
index 0000000..113f067
Binary files /dev/null and b/public/media/framework-logos/inactive/play.png differ
diff --git a/public/media/framework-logos/inactive/rails.png b/public/media/framework-logos/inactive/rails.png
new file mode 100644
index 0000000..c5699ab
Binary files /dev/null and b/public/media/framework-logos/inactive/rails.png differ
diff --git a/public/media/framework-logos/inactive/react.png b/public/media/framework-logos/inactive/react.png
new file mode 100644
index 0000000..06e2635
Binary files /dev/null and b/public/media/framework-logos/inactive/react.png differ
diff --git a/public/media/framework-logos/inactive/spring.png b/public/media/framework-logos/inactive/spring.png
new file mode 100644
index 0000000..3dae1ef
Binary files /dev/null and b/public/media/framework-logos/inactive/spring.png differ
diff --git a/public/media/framework-logos/inactive/symfony.png b/public/media/framework-logos/inactive/symfony.png
new file mode 100644
index 0000000..c7f0d3e
Binary files /dev/null and b/public/media/framework-logos/inactive/symfony.png differ
diff --git a/public/media/framework-logos/inactive/vue.png b/public/media/framework-logos/inactive/vue.png
new file mode 100644
index 0000000..f5ce331
Binary files /dev/null and b/public/media/framework-logos/inactive/vue.png differ
diff --git a/public/media/framework-logos/inactive/yii.png b/public/media/framework-logos/inactive/yii.png
new file mode 100644
index 0000000..7198365
Binary files /dev/null and b/public/media/framework-logos/inactive/yii.png differ
diff --git a/public/media/framework-logos/laravel.png b/public/media/framework-logos/laravel.png
new file mode 100644
index 0000000..ef0ebc7
Binary files /dev/null and b/public/media/framework-logos/laravel.png differ
diff --git a/public/media/framework-logos/nodejs.png b/public/media/framework-logos/nodejs.png
new file mode 100644
index 0000000..6750937
Binary files /dev/null and b/public/media/framework-logos/nodejs.png differ
diff --git a/public/media/framework-logos/play.png b/public/media/framework-logos/play.png
new file mode 100644
index 0000000..3061311
Binary files /dev/null and b/public/media/framework-logos/play.png differ
diff --git a/public/media/framework-logos/rails.png b/public/media/framework-logos/rails.png
new file mode 100644
index 0000000..49aa5bb
Binary files /dev/null and b/public/media/framework-logos/rails.png differ
diff --git a/public/media/framework-logos/spring.png b/public/media/framework-logos/spring.png
new file mode 100644
index 0000000..1725055
Binary files /dev/null and b/public/media/framework-logos/spring.png differ
diff --git a/public/media/framework-logos/symfony.png b/public/media/framework-logos/symfony.png
new file mode 100644
index 0000000..b9904b4
Binary files /dev/null and b/public/media/framework-logos/symfony.png differ
diff --git a/public/media/framework-logos/vue.png b/public/media/framework-logos/vue.png
new file mode 100644
index 0000000..67752df
Binary files /dev/null and b/public/media/framework-logos/vue.png differ
diff --git a/public/media/framework-logos/yii.png b/public/media/framework-logos/yii.png
new file mode 100644
index 0000000..e0d8500
Binary files /dev/null and b/public/media/framework-logos/yii.png differ
diff --git a/public/media/icons/duotune/abstract/abs001.svg b/public/media/icons/duotune/abstract/abs001.svg
new file mode 100644
index 0000000..d07fb26
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs001.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs002.svg b/public/media/icons/duotune/abstract/abs002.svg
new file mode 100644
index 0000000..faa68c5
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs002.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs003.svg b/public/media/icons/duotune/abstract/abs003.svg
new file mode 100644
index 0000000..7e5853c
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs003.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs004.svg b/public/media/icons/duotune/abstract/abs004.svg
new file mode 100644
index 0000000..062af93
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs004.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs005.svg b/public/media/icons/duotune/abstract/abs005.svg
new file mode 100644
index 0000000..684404c
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs005.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs006.svg b/public/media/icons/duotune/abstract/abs006.svg
new file mode 100644
index 0000000..6302c6c
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs006.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs007.svg b/public/media/icons/duotune/abstract/abs007.svg
new file mode 100644
index 0000000..a306715
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs007.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs008.svg b/public/media/icons/duotune/abstract/abs008.svg
new file mode 100644
index 0000000..698851e
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs008.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs009.svg b/public/media/icons/duotune/abstract/abs009.svg
new file mode 100644
index 0000000..1444570
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs009.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs010.svg b/public/media/icons/duotune/abstract/abs010.svg
new file mode 100644
index 0000000..a2b9db3
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs010.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs011.svg b/public/media/icons/duotune/abstract/abs011.svg
new file mode 100644
index 0000000..fa84f36
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs011.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs012.svg b/public/media/icons/duotune/abstract/abs012.svg
new file mode 100644
index 0000000..c9ad38c
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs012.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs013.svg b/public/media/icons/duotune/abstract/abs013.svg
new file mode 100644
index 0000000..346f9fa
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs013.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs014.svg b/public/media/icons/duotune/abstract/abs014.svg
new file mode 100644
index 0000000..0b1973d
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs014.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs015.svg b/public/media/icons/duotune/abstract/abs015.svg
new file mode 100644
index 0000000..66224ef
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs015.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs016.svg b/public/media/icons/duotune/abstract/abs016.svg
new file mode 100644
index 0000000..f438443
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs016.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs017.svg b/public/media/icons/duotune/abstract/abs017.svg
new file mode 100644
index 0000000..3e999af
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs017.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs018.svg b/public/media/icons/duotune/abstract/abs018.svg
new file mode 100644
index 0000000..496665a
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs018.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs019.svg b/public/media/icons/duotune/abstract/abs019.svg
new file mode 100644
index 0000000..50aad67
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs019.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs020.svg b/public/media/icons/duotune/abstract/abs020.svg
new file mode 100644
index 0000000..b51e1a8
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs020.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs021.svg b/public/media/icons/duotune/abstract/abs021.svg
new file mode 100644
index 0000000..e2185b6
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs021.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs022.svg b/public/media/icons/duotune/abstract/abs022.svg
new file mode 100644
index 0000000..2782b88
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs022.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs023.svg b/public/media/icons/duotune/abstract/abs023.svg
new file mode 100644
index 0000000..884a59e
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs023.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs024.svg b/public/media/icons/duotune/abstract/abs024.svg
new file mode 100644
index 0000000..8ccc893
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs024.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs025.svg b/public/media/icons/duotune/abstract/abs025.svg
new file mode 100644
index 0000000..e47f85a
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs025.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs026.svg b/public/media/icons/duotune/abstract/abs026.svg
new file mode 100644
index 0000000..157013d
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs026.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs027.svg b/public/media/icons/duotune/abstract/abs027.svg
new file mode 100644
index 0000000..522389f
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs027.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs028.svg b/public/media/icons/duotune/abstract/abs028.svg
new file mode 100644
index 0000000..dfc2108
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs028.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs029.svg b/public/media/icons/duotune/abstract/abs029.svg
new file mode 100644
index 0000000..758d738
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs029.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs030.svg b/public/media/icons/duotune/abstract/abs030.svg
new file mode 100644
index 0000000..82dce13
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs030.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs031.svg b/public/media/icons/duotune/abstract/abs031.svg
new file mode 100644
index 0000000..3bd2d96
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs031.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs032.svg b/public/media/icons/duotune/abstract/abs032.svg
new file mode 100644
index 0000000..0e0580c
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs032.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs033.svg b/public/media/icons/duotune/abstract/abs033.svg
new file mode 100644
index 0000000..7bd98fd
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs033.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs034.svg b/public/media/icons/duotune/abstract/abs034.svg
new file mode 100644
index 0000000..a1c5f4f
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs034.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs035.svg b/public/media/icons/duotune/abstract/abs035.svg
new file mode 100644
index 0000000..2b6c4e9
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs035.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs036.svg b/public/media/icons/duotune/abstract/abs036.svg
new file mode 100644
index 0000000..22469f7
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs036.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs037.svg b/public/media/icons/duotune/abstract/abs037.svg
new file mode 100644
index 0000000..a8be87d
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs037.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs038.svg b/public/media/icons/duotune/abstract/abs038.svg
new file mode 100644
index 0000000..52570a2
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs038.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs039.svg b/public/media/icons/duotune/abstract/abs039.svg
new file mode 100644
index 0000000..c07b30c
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs039.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs040.svg b/public/media/icons/duotune/abstract/abs040.svg
new file mode 100644
index 0000000..e950a1f
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs040.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs041.svg b/public/media/icons/duotune/abstract/abs041.svg
new file mode 100644
index 0000000..3a44aa2
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs041.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs042.svg b/public/media/icons/duotune/abstract/abs042.svg
new file mode 100644
index 0000000..def0269
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs042.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs043.svg b/public/media/icons/duotune/abstract/abs043.svg
new file mode 100644
index 0000000..44a6fa5
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs043.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs044.svg b/public/media/icons/duotune/abstract/abs044.svg
new file mode 100644
index 0000000..545f57c
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs044.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs045.svg b/public/media/icons/duotune/abstract/abs045.svg
new file mode 100644
index 0000000..0ee39cc
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs045.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs046.svg b/public/media/icons/duotune/abstract/abs046.svg
new file mode 100644
index 0000000..3dc345d
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs046.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs047.svg b/public/media/icons/duotune/abstract/abs047.svg
new file mode 100644
index 0000000..d7c0da8
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs047.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs048.svg b/public/media/icons/duotune/abstract/abs048.svg
new file mode 100644
index 0000000..c936977
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs048.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs049.svg b/public/media/icons/duotune/abstract/abs049.svg
new file mode 100644
index 0000000..95b1f93
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs049.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/abstract/abs050.svg b/public/media/icons/duotune/abstract/abs050.svg
new file mode 100644
index 0000000..316587b
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs050.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/public/media/icons/duotune/abstract/abs051.svg b/public/media/icons/duotune/abstract/abs051.svg
new file mode 100644
index 0000000..9b97741
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs051.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/public/media/icons/duotune/abstract/abs052.svg b/public/media/icons/duotune/abstract/abs052.svg
new file mode 100644
index 0000000..88a84f4
--- /dev/null
+++ b/public/media/icons/duotune/abstract/abs052.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/public/media/icons/duotune/arrows/arr001.svg b/public/media/icons/duotune/arrows/arr001.svg
new file mode 100644
index 0000000..501854a
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr002.svg b/public/media/icons/duotune/arrows/arr002.svg
new file mode 100644
index 0000000..22d45a9
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr002.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr003.svg b/public/media/icons/duotune/arrows/arr003.svg
new file mode 100644
index 0000000..7dba9cb
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr004.svg b/public/media/icons/duotune/arrows/arr004.svg
new file mode 100644
index 0000000..6a2a028
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr005.svg b/public/media/icons/duotune/arrows/arr005.svg
new file mode 100644
index 0000000..b42170e
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr005.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr006.svg b/public/media/icons/duotune/arrows/arr006.svg
new file mode 100644
index 0000000..1d4bb29
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr007.svg b/public/media/icons/duotune/arrows/arr007.svg
new file mode 100644
index 0000000..aca43fc
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr007.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr008.svg b/public/media/icons/duotune/arrows/arr008.svg
new file mode 100644
index 0000000..5ef20b1
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr008.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr009.svg b/public/media/icons/duotune/arrows/arr009.svg
new file mode 100644
index 0000000..0392332
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr010.svg b/public/media/icons/duotune/arrows/arr010.svg
new file mode 100644
index 0000000..6b9ab35
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr010.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr011.svg b/public/media/icons/duotune/arrows/arr011.svg
new file mode 100644
index 0000000..140d6a0
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr011.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr012.svg b/public/media/icons/duotune/arrows/arr012.svg
new file mode 100644
index 0000000..6d386f3
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr012.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr013.svg b/public/media/icons/duotune/arrows/arr013.svg
new file mode 100644
index 0000000..d5a5e1b
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr013.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr014.svg b/public/media/icons/duotune/arrows/arr014.svg
new file mode 100644
index 0000000..95ebb41
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr014.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr015.svg b/public/media/icons/duotune/arrows/arr015.svg
new file mode 100644
index 0000000..07332c6
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr015.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr016.svg b/public/media/icons/duotune/arrows/arr016.svg
new file mode 100644
index 0000000..5cec85c
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr016.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr017.svg b/public/media/icons/duotune/arrows/arr017.svg
new file mode 100644
index 0000000..058a723
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr017.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr018.svg b/public/media/icons/duotune/arrows/arr018.svg
new file mode 100644
index 0000000..47c2d72
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr018.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr019.svg b/public/media/icons/duotune/arrows/arr019.svg
new file mode 100644
index 0000000..3cfa6ff
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr019.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr020.svg b/public/media/icons/duotune/arrows/arr020.svg
new file mode 100644
index 0000000..ae466aa
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr020.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr021.svg b/public/media/icons/duotune/arrows/arr021.svg
new file mode 100644
index 0000000..688a552
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr021.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr022.svg b/public/media/icons/duotune/arrows/arr022.svg
new file mode 100644
index 0000000..258463b
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr022.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr023.svg b/public/media/icons/duotune/arrows/arr023.svg
new file mode 100644
index 0000000..12a622d
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr023.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr024.svg b/public/media/icons/duotune/arrows/arr024.svg
new file mode 100644
index 0000000..8daf378
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr024.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr025.svg b/public/media/icons/duotune/arrows/arr025.svg
new file mode 100644
index 0000000..bedb8dd
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr025.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr026.svg b/public/media/icons/duotune/arrows/arr026.svg
new file mode 100644
index 0000000..ae58f69
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr026.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr027.svg b/public/media/icons/duotune/arrows/arr027.svg
new file mode 100644
index 0000000..a748ff7
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr027.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr028.svg b/public/media/icons/duotune/arrows/arr028.svg
new file mode 100644
index 0000000..88eba35
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr028.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr029.svg b/public/media/icons/duotune/arrows/arr029.svg
new file mode 100644
index 0000000..687c2fa
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr029.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr030.svg b/public/media/icons/duotune/arrows/arr030.svg
new file mode 100644
index 0000000..eae1869
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr030.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr031.svg b/public/media/icons/duotune/arrows/arr031.svg
new file mode 100644
index 0000000..12208cf
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr031.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr032.svg b/public/media/icons/duotune/arrows/arr032.svg
new file mode 100644
index 0000000..1cf662d
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr032.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr033.svg b/public/media/icons/duotune/arrows/arr033.svg
new file mode 100644
index 0000000..ab2d44e
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr033.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr034.svg b/public/media/icons/duotune/arrows/arr034.svg
new file mode 100644
index 0000000..ab2d44e
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr034.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr035.svg b/public/media/icons/duotune/arrows/arr035.svg
new file mode 100644
index 0000000..920cea3
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr035.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr036.svg b/public/media/icons/duotune/arrows/arr036.svg
new file mode 100644
index 0000000..9d18d57
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr036.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr037.svg b/public/media/icons/duotune/arrows/arr037.svg
new file mode 100644
index 0000000..2b72c6b
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr037.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr038.svg b/public/media/icons/duotune/arrows/arr038.svg
new file mode 100644
index 0000000..fc74731
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr038.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr039.svg b/public/media/icons/duotune/arrows/arr039.svg
new file mode 100644
index 0000000..e632a4b
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr039.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr040.svg b/public/media/icons/duotune/arrows/arr040.svg
new file mode 100644
index 0000000..17d45b0
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr040.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr041.svg b/public/media/icons/duotune/arrows/arr041.svg
new file mode 100644
index 0000000..8dd0125
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr041.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr042.svg b/public/media/icons/duotune/arrows/arr042.svg
new file mode 100644
index 0000000..6e8abb5
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr042.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr043.svg b/public/media/icons/duotune/arrows/arr043.svg
new file mode 100644
index 0000000..e70f5ec
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr043.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr044.svg b/public/media/icons/duotune/arrows/arr044.svg
new file mode 100644
index 0000000..27cd814
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr044.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr045.svg b/public/media/icons/duotune/arrows/arr045.svg
new file mode 100644
index 0000000..b4517dd
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr045.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr046.svg b/public/media/icons/duotune/arrows/arr046.svg
new file mode 100644
index 0000000..5f69e30
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr046.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr047.svg b/public/media/icons/duotune/arrows/arr047.svg
new file mode 100644
index 0000000..943a8cf
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr047.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr048.svg b/public/media/icons/duotune/arrows/arr048.svg
new file mode 100644
index 0000000..a464e68
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr048.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr049.svg b/public/media/icons/duotune/arrows/arr049.svg
new file mode 100644
index 0000000..09116d3
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr049.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr050.svg b/public/media/icons/duotune/arrows/arr050.svg
new file mode 100644
index 0000000..703d523
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr050.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr051.svg b/public/media/icons/duotune/arrows/arr051.svg
new file mode 100644
index 0000000..af348d1
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr051.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr052.svg b/public/media/icons/duotune/arrows/arr052.svg
new file mode 100644
index 0000000..3038407
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr052.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr053.svg b/public/media/icons/duotune/arrows/arr053.svg
new file mode 100644
index 0000000..6aa401e
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr053.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr054.svg b/public/media/icons/duotune/arrows/arr054.svg
new file mode 100644
index 0000000..784d865
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr054.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr055.svg b/public/media/icons/duotune/arrows/arr055.svg
new file mode 100644
index 0000000..2c25ea9
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr055.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr056.svg b/public/media/icons/duotune/arrows/arr056.svg
new file mode 100644
index 0000000..b50bb68
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr056.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr057.svg b/public/media/icons/duotune/arrows/arr057.svg
new file mode 100644
index 0000000..da4afe4
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr057.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr058.svg b/public/media/icons/duotune/arrows/arr058.svg
new file mode 100644
index 0000000..1fe059b
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr058.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr059.svg b/public/media/icons/duotune/arrows/arr059.svg
new file mode 100644
index 0000000..f55ebdb
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr059.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr060.svg b/public/media/icons/duotune/arrows/arr060.svg
new file mode 100644
index 0000000..58ad717
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr060.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr061.svg b/public/media/icons/duotune/arrows/arr061.svg
new file mode 100644
index 0000000..a000fbf
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr061.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr062.svg b/public/media/icons/duotune/arrows/arr062.svg
new file mode 100644
index 0000000..9e000ca
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr062.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr063.svg b/public/media/icons/duotune/arrows/arr063.svg
new file mode 100644
index 0000000..dcedf4f
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr063.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr064.svg b/public/media/icons/duotune/arrows/arr064.svg
new file mode 100644
index 0000000..123f766
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr064.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr065.svg b/public/media/icons/duotune/arrows/arr065.svg
new file mode 100644
index 0000000..e27a5bb
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr065.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr066.svg b/public/media/icons/duotune/arrows/arr066.svg
new file mode 100644
index 0000000..fc638fb
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr066.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr067.svg b/public/media/icons/duotune/arrows/arr067.svg
new file mode 100644
index 0000000..9e000ca
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr067.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr068.svg b/public/media/icons/duotune/arrows/arr068.svg
new file mode 100644
index 0000000..fcd367a
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr068.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr069.svg b/public/media/icons/duotune/arrows/arr069.svg
new file mode 100644
index 0000000..759598c
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr069.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr070.svg b/public/media/icons/duotune/arrows/arr070.svg
new file mode 100644
index 0000000..6a4d3c2
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr070.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr071.svg b/public/media/icons/duotune/arrows/arr071.svg
new file mode 100644
index 0000000..6049c4c
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr071.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr072.svg b/public/media/icons/duotune/arrows/arr072.svg
new file mode 100644
index 0000000..ea50d09
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr072.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr073.svg b/public/media/icons/duotune/arrows/arr073.svg
new file mode 100644
index 0000000..7e3b3ac
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr073.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr074.svg b/public/media/icons/duotune/arrows/arr074.svg
new file mode 100644
index 0000000..9a7e28a
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr074.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr075.svg b/public/media/icons/duotune/arrows/arr075.svg
new file mode 100644
index 0000000..5192f4c
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr075.svg
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/public/media/icons/duotune/arrows/arr076.svg b/public/media/icons/duotune/arrows/arr076.svg
new file mode 100644
index 0000000..b651630
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr076.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr077.svg b/public/media/icons/duotune/arrows/arr077.svg
new file mode 100644
index 0000000..1efca21
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr077.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr078.svg b/public/media/icons/duotune/arrows/arr078.svg
new file mode 100644
index 0000000..7fb31fc
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr078.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr079.svg b/public/media/icons/duotune/arrows/arr079.svg
new file mode 100644
index 0000000..5d8c30e
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr079.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr080.svg b/public/media/icons/duotune/arrows/arr080.svg
new file mode 100644
index 0000000..ae40cf3
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr080.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr081.svg b/public/media/icons/duotune/arrows/arr081.svg
new file mode 100644
index 0000000..1b9dad8
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr081.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr082.svg b/public/media/icons/duotune/arrows/arr082.svg
new file mode 100644
index 0000000..71e69f5
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr082.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr084.svg b/public/media/icons/duotune/arrows/arr084.svg
new file mode 100644
index 0000000..11cba99
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr084.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr085.svg b/public/media/icons/duotune/arrows/arr085.svg
new file mode 100644
index 0000000..943e4d9
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr085.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr086.svg b/public/media/icons/duotune/arrows/arr086.svg
new file mode 100644
index 0000000..d5b64ed
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr086.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr087.svg b/public/media/icons/duotune/arrows/arr087.svg
new file mode 100644
index 0000000..49c6c32
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr087.svg
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/public/media/icons/duotune/arrows/arr088.svg b/public/media/icons/duotune/arrows/arr088.svg
new file mode 100644
index 0000000..62c0f95
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr088.svg
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/public/media/icons/duotune/arrows/arr089.svg b/public/media/icons/duotune/arrows/arr089.svg
new file mode 100644
index 0000000..8c2b557
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr089.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr090.svg b/public/media/icons/duotune/arrows/arr090.svg
new file mode 100644
index 0000000..cc6ce4d
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr090.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/public/media/icons/duotune/arrows/arr091.svg b/public/media/icons/duotune/arrows/arr091.svg
new file mode 100644
index 0000000..74a2c2f
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr091.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr092.svg b/public/media/icons/duotune/arrows/arr092.svg
new file mode 100644
index 0000000..023c73d
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr092.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr093.svg b/public/media/icons/duotune/arrows/arr093.svg
new file mode 100644
index 0000000..763af7a
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr093.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr094.svg b/public/media/icons/duotune/arrows/arr094.svg
new file mode 100644
index 0000000..2ad369e
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr094.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr095.svg b/public/media/icons/duotune/arrows/arr095.svg
new file mode 100644
index 0000000..cb56ec8
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr095.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/arrows/arr096.svg b/public/media/icons/duotune/arrows/arr096.svg
new file mode 100644
index 0000000..2772556
--- /dev/null
+++ b/public/media/icons/duotune/arrows/arr096.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/art/art001.svg b/public/media/icons/duotune/art/art001.svg
new file mode 100644
index 0000000..d2bd099
--- /dev/null
+++ b/public/media/icons/duotune/art/art001.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/art/art002.svg b/public/media/icons/duotune/art/art002.svg
new file mode 100644
index 0000000..11cf2fc
--- /dev/null
+++ b/public/media/icons/duotune/art/art002.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/art/art003.svg b/public/media/icons/duotune/art/art003.svg
new file mode 100644
index 0000000..7015753
--- /dev/null
+++ b/public/media/icons/duotune/art/art003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/art/art004.svg b/public/media/icons/duotune/art/art004.svg
new file mode 100644
index 0000000..b9578b5
--- /dev/null
+++ b/public/media/icons/duotune/art/art004.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/art/art005.svg b/public/media/icons/duotune/art/art005.svg
new file mode 100644
index 0000000..10a27a6
--- /dev/null
+++ b/public/media/icons/duotune/art/art005.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/art/art006.svg b/public/media/icons/duotune/art/art006.svg
new file mode 100644
index 0000000..4483dfd
--- /dev/null
+++ b/public/media/icons/duotune/art/art006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/art/art007.svg b/public/media/icons/duotune/art/art007.svg
new file mode 100644
index 0000000..4e1472c
--- /dev/null
+++ b/public/media/icons/duotune/art/art007.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/art/art008.svg b/public/media/icons/duotune/art/art008.svg
new file mode 100644
index 0000000..0022b96
--- /dev/null
+++ b/public/media/icons/duotune/art/art008.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/art/art009.svg b/public/media/icons/duotune/art/art009.svg
new file mode 100644
index 0000000..25a1cbf
--- /dev/null
+++ b/public/media/icons/duotune/art/art009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/art/art010.svg b/public/media/icons/duotune/art/art010.svg
new file mode 100644
index 0000000..d56eefb
--- /dev/null
+++ b/public/media/icons/duotune/art/art010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/coding/cod001.svg b/public/media/icons/duotune/coding/cod001.svg
new file mode 100644
index 0000000..d526903
--- /dev/null
+++ b/public/media/icons/duotune/coding/cod001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/coding/cod002.svg b/public/media/icons/duotune/coding/cod002.svg
new file mode 100644
index 0000000..6092957
--- /dev/null
+++ b/public/media/icons/duotune/coding/cod002.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/coding/cod003.svg b/public/media/icons/duotune/coding/cod003.svg
new file mode 100644
index 0000000..cf65a00
--- /dev/null
+++ b/public/media/icons/duotune/coding/cod003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/coding/cod004.svg b/public/media/icons/duotune/coding/cod004.svg
new file mode 100644
index 0000000..9336e84
--- /dev/null
+++ b/public/media/icons/duotune/coding/cod004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/coding/cod005.svg b/public/media/icons/duotune/coding/cod005.svg
new file mode 100644
index 0000000..0a313de
--- /dev/null
+++ b/public/media/icons/duotune/coding/cod005.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/coding/cod006.svg b/public/media/icons/duotune/coding/cod006.svg
new file mode 100644
index 0000000..7b0b3be
--- /dev/null
+++ b/public/media/icons/duotune/coding/cod006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/coding/cod007.svg b/public/media/icons/duotune/coding/cod007.svg
new file mode 100644
index 0000000..2612ab6
--- /dev/null
+++ b/public/media/icons/duotune/coding/cod007.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/coding/cod008.svg b/public/media/icons/duotune/coding/cod008.svg
new file mode 100644
index 0000000..a590968
--- /dev/null
+++ b/public/media/icons/duotune/coding/cod008.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/coding/cod009.svg b/public/media/icons/duotune/coding/cod009.svg
new file mode 100644
index 0000000..0236f51
--- /dev/null
+++ b/public/media/icons/duotune/coding/cod009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/coding/cod010.svg b/public/media/icons/duotune/coding/cod010.svg
new file mode 100644
index 0000000..232e2fb
--- /dev/null
+++ b/public/media/icons/duotune/coding/cod010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com001.svg b/public/media/icons/duotune/communication/com001.svg
new file mode 100644
index 0000000..0cd9ef3
--- /dev/null
+++ b/public/media/icons/duotune/communication/com001.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com002.svg b/public/media/icons/duotune/communication/com002.svg
new file mode 100644
index 0000000..6c831a7
--- /dev/null
+++ b/public/media/icons/duotune/communication/com002.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com003.svg b/public/media/icons/duotune/communication/com003.svg
new file mode 100644
index 0000000..585a829
--- /dev/null
+++ b/public/media/icons/duotune/communication/com003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com004.svg b/public/media/icons/duotune/communication/com004.svg
new file mode 100644
index 0000000..8a72f42
--- /dev/null
+++ b/public/media/icons/duotune/communication/com004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com005.svg b/public/media/icons/duotune/communication/com005.svg
new file mode 100644
index 0000000..0dedd7f
--- /dev/null
+++ b/public/media/icons/duotune/communication/com005.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com006.svg b/public/media/icons/duotune/communication/com006.svg
new file mode 100644
index 0000000..4e5996b
--- /dev/null
+++ b/public/media/icons/duotune/communication/com006.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com007.svg b/public/media/icons/duotune/communication/com007.svg
new file mode 100644
index 0000000..b791672
--- /dev/null
+++ b/public/media/icons/duotune/communication/com007.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com008.svg b/public/media/icons/duotune/communication/com008.svg
new file mode 100644
index 0000000..a9edb0f
--- /dev/null
+++ b/public/media/icons/duotune/communication/com008.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com009.svg b/public/media/icons/duotune/communication/com009.svg
new file mode 100644
index 0000000..7e9d375
--- /dev/null
+++ b/public/media/icons/duotune/communication/com009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com010.svg b/public/media/icons/duotune/communication/com010.svg
new file mode 100644
index 0000000..a3adcd1
--- /dev/null
+++ b/public/media/icons/duotune/communication/com010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com011.svg b/public/media/icons/duotune/communication/com011.svg
new file mode 100644
index 0000000..b875575
--- /dev/null
+++ b/public/media/icons/duotune/communication/com011.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com012.svg b/public/media/icons/duotune/communication/com012.svg
new file mode 100644
index 0000000..ef3f22a
--- /dev/null
+++ b/public/media/icons/duotune/communication/com012.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com013.svg b/public/media/icons/duotune/communication/com013.svg
new file mode 100644
index 0000000..0c67416
--- /dev/null
+++ b/public/media/icons/duotune/communication/com013.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/communication/com014.svg b/public/media/icons/duotune/communication/com014.svg
new file mode 100644
index 0000000..89ae5ab
--- /dev/null
+++ b/public/media/icons/duotune/communication/com014.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/ecommerce/ecm001.svg b/public/media/icons/duotune/ecommerce/ecm001.svg
new file mode 100644
index 0000000..fbab6ce
--- /dev/null
+++ b/public/media/icons/duotune/ecommerce/ecm001.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/ecommerce/ecm002.svg b/public/media/icons/duotune/ecommerce/ecm002.svg
new file mode 100644
index 0000000..2ea833c
--- /dev/null
+++ b/public/media/icons/duotune/ecommerce/ecm002.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/ecommerce/ecm003.svg b/public/media/icons/duotune/ecommerce/ecm003.svg
new file mode 100644
index 0000000..ef48892
--- /dev/null
+++ b/public/media/icons/duotune/ecommerce/ecm003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/ecommerce/ecm004.svg b/public/media/icons/duotune/ecommerce/ecm004.svg
new file mode 100644
index 0000000..724f192
--- /dev/null
+++ b/public/media/icons/duotune/ecommerce/ecm004.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/ecommerce/ecm005.svg b/public/media/icons/duotune/ecommerce/ecm005.svg
new file mode 100644
index 0000000..6fe446d
--- /dev/null
+++ b/public/media/icons/duotune/ecommerce/ecm005.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/ecommerce/ecm006.svg b/public/media/icons/duotune/ecommerce/ecm006.svg
new file mode 100644
index 0000000..ff58f32
--- /dev/null
+++ b/public/media/icons/duotune/ecommerce/ecm006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/ecommerce/ecm007.svg b/public/media/icons/duotune/ecommerce/ecm007.svg
new file mode 100644
index 0000000..d2003e7
--- /dev/null
+++ b/public/media/icons/duotune/ecommerce/ecm007.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/ecommerce/ecm008.svg b/public/media/icons/duotune/ecommerce/ecm008.svg
new file mode 100644
index 0000000..a10444e
--- /dev/null
+++ b/public/media/icons/duotune/ecommerce/ecm008.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/ecommerce/ecm009.svg b/public/media/icons/duotune/ecommerce/ecm009.svg
new file mode 100644
index 0000000..e17fefd
--- /dev/null
+++ b/public/media/icons/duotune/ecommerce/ecm009.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/ecommerce/ecm010.svg b/public/media/icons/duotune/ecommerce/ecm010.svg
new file mode 100644
index 0000000..d8dd510
--- /dev/null
+++ b/public/media/icons/duotune/ecommerce/ecm010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/ecommerce/ecm011.svg b/public/media/icons/duotune/ecommerce/ecm011.svg
new file mode 100644
index 0000000..87094c4
--- /dev/null
+++ b/public/media/icons/duotune/ecommerce/ecm011.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/electronics/elc001.svg b/public/media/icons/duotune/electronics/elc001.svg
new file mode 100644
index 0000000..3040cb1
--- /dev/null
+++ b/public/media/icons/duotune/electronics/elc001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/electronics/elc002.svg b/public/media/icons/duotune/electronics/elc002.svg
new file mode 100644
index 0000000..bdda3ee
--- /dev/null
+++ b/public/media/icons/duotune/electronics/elc002.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/electronics/elc003.svg b/public/media/icons/duotune/electronics/elc003.svg
new file mode 100644
index 0000000..9633543
--- /dev/null
+++ b/public/media/icons/duotune/electronics/elc003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/electronics/elc004.svg b/public/media/icons/duotune/electronics/elc004.svg
new file mode 100644
index 0000000..83db17b
--- /dev/null
+++ b/public/media/icons/duotune/electronics/elc004.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/electronics/elc005.svg b/public/media/icons/duotune/electronics/elc005.svg
new file mode 100644
index 0000000..1b51174
--- /dev/null
+++ b/public/media/icons/duotune/electronics/elc005.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/electronics/elc006.svg b/public/media/icons/duotune/electronics/elc006.svg
new file mode 100644
index 0000000..94b4230
--- /dev/null
+++ b/public/media/icons/duotune/electronics/elc006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/electronics/elc007.svg b/public/media/icons/duotune/electronics/elc007.svg
new file mode 100644
index 0000000..2c214d7
--- /dev/null
+++ b/public/media/icons/duotune/electronics/elc007.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/electronics/elc008.svg b/public/media/icons/duotune/electronics/elc008.svg
new file mode 100644
index 0000000..91c7d54
--- /dev/null
+++ b/public/media/icons/duotune/electronics/elc008.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/electronics/elc009.svg b/public/media/icons/duotune/electronics/elc009.svg
new file mode 100644
index 0000000..c1505d6
--- /dev/null
+++ b/public/media/icons/duotune/electronics/elc009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/electronics/elc010.svg b/public/media/icons/duotune/electronics/elc010.svg
new file mode 100644
index 0000000..204d086
--- /dev/null
+++ b/public/media/icons/duotune/electronics/elc010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil001.svg b/public/media/icons/duotune/files/fil001.svg
new file mode 100644
index 0000000..ea62c30
--- /dev/null
+++ b/public/media/icons/duotune/files/fil001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil002.svg b/public/media/icons/duotune/files/fil002.svg
new file mode 100644
index 0000000..dfd07ff
--- /dev/null
+++ b/public/media/icons/duotune/files/fil002.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil003.svg b/public/media/icons/duotune/files/fil003.svg
new file mode 100644
index 0000000..1875aa3
--- /dev/null
+++ b/public/media/icons/duotune/files/fil003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil004.svg b/public/media/icons/duotune/files/fil004.svg
new file mode 100644
index 0000000..c05308c
--- /dev/null
+++ b/public/media/icons/duotune/files/fil004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil005.svg b/public/media/icons/duotune/files/fil005.svg
new file mode 100644
index 0000000..ec78ae4
--- /dev/null
+++ b/public/media/icons/duotune/files/fil005.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil006.svg b/public/media/icons/duotune/files/fil006.svg
new file mode 100644
index 0000000..46415b0
--- /dev/null
+++ b/public/media/icons/duotune/files/fil006.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil007.svg b/public/media/icons/duotune/files/fil007.svg
new file mode 100644
index 0000000..da82208
--- /dev/null
+++ b/public/media/icons/duotune/files/fil007.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil008.svg b/public/media/icons/duotune/files/fil008.svg
new file mode 100644
index 0000000..68daff3
--- /dev/null
+++ b/public/media/icons/duotune/files/fil008.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil009.svg b/public/media/icons/duotune/files/fil009.svg
new file mode 100644
index 0000000..f63e0b6
--- /dev/null
+++ b/public/media/icons/duotune/files/fil009.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil010.svg b/public/media/icons/duotune/files/fil010.svg
new file mode 100644
index 0000000..f63e0b6
--- /dev/null
+++ b/public/media/icons/duotune/files/fil010.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil011.svg b/public/media/icons/duotune/files/fil011.svg
new file mode 100644
index 0000000..b51d362
--- /dev/null
+++ b/public/media/icons/duotune/files/fil011.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil012.svg b/public/media/icons/duotune/files/fil012.svg
new file mode 100644
index 0000000..0a42a19
--- /dev/null
+++ b/public/media/icons/duotune/files/fil012.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil013.svg b/public/media/icons/duotune/files/fil013.svg
new file mode 100644
index 0000000..255184f
--- /dev/null
+++ b/public/media/icons/duotune/files/fil013.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil014.svg b/public/media/icons/duotune/files/fil014.svg
new file mode 100644
index 0000000..b54f87f
--- /dev/null
+++ b/public/media/icons/duotune/files/fil014.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil015.svg b/public/media/icons/duotune/files/fil015.svg
new file mode 100644
index 0000000..f90c463
--- /dev/null
+++ b/public/media/icons/duotune/files/fil015.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil016.svg b/public/media/icons/duotune/files/fil016.svg
new file mode 100644
index 0000000..4fa3e81
--- /dev/null
+++ b/public/media/icons/duotune/files/fil016.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil017.svg b/public/media/icons/duotune/files/fil017.svg
new file mode 100644
index 0000000..ef2d036
--- /dev/null
+++ b/public/media/icons/duotune/files/fil017.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil018.svg b/public/media/icons/duotune/files/fil018.svg
new file mode 100644
index 0000000..097113f
--- /dev/null
+++ b/public/media/icons/duotune/files/fil018.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil019.svg b/public/media/icons/duotune/files/fil019.svg
new file mode 100644
index 0000000..748042c
--- /dev/null
+++ b/public/media/icons/duotune/files/fil019.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil020.svg b/public/media/icons/duotune/files/fil020.svg
new file mode 100644
index 0000000..2e2b3da
--- /dev/null
+++ b/public/media/icons/duotune/files/fil020.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/files/fil021.svg b/public/media/icons/duotune/files/fil021.svg
new file mode 100644
index 0000000..05cb1af
--- /dev/null
+++ b/public/media/icons/duotune/files/fil021.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil022.svg b/public/media/icons/duotune/files/fil022.svg
new file mode 100644
index 0000000..830364e
--- /dev/null
+++ b/public/media/icons/duotune/files/fil022.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil023.svg b/public/media/icons/duotune/files/fil023.svg
new file mode 100644
index 0000000..5441494
--- /dev/null
+++ b/public/media/icons/duotune/files/fil023.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil024.svg b/public/media/icons/duotune/files/fil024.svg
new file mode 100644
index 0000000..3d0f8d1
--- /dev/null
+++ b/public/media/icons/duotune/files/fil024.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/files/fil025.svg b/public/media/icons/duotune/files/fil025.svg
new file mode 100644
index 0000000..f8d33e9
--- /dev/null
+++ b/public/media/icons/duotune/files/fil025.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/finance/fin001.svg b/public/media/icons/duotune/finance/fin001.svg
new file mode 100644
index 0000000..8fb7d35
--- /dev/null
+++ b/public/media/icons/duotune/finance/fin001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/finance/fin002.svg b/public/media/icons/duotune/finance/fin002.svg
new file mode 100644
index 0000000..5752be1
--- /dev/null
+++ b/public/media/icons/duotune/finance/fin002.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/finance/fin003.svg b/public/media/icons/duotune/finance/fin003.svg
new file mode 100644
index 0000000..81e94ab
--- /dev/null
+++ b/public/media/icons/duotune/finance/fin003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/finance/fin004.svg b/public/media/icons/duotune/finance/fin004.svg
new file mode 100644
index 0000000..42c2ae1
--- /dev/null
+++ b/public/media/icons/duotune/finance/fin004.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/finance/fin005.svg b/public/media/icons/duotune/finance/fin005.svg
new file mode 100644
index 0000000..7048b7d
--- /dev/null
+++ b/public/media/icons/duotune/finance/fin005.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/finance/fin006.svg b/public/media/icons/duotune/finance/fin006.svg
new file mode 100644
index 0000000..ae23cd1
--- /dev/null
+++ b/public/media/icons/duotune/finance/fin006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/finance/fin007.svg b/public/media/icons/duotune/finance/fin007.svg
new file mode 100644
index 0000000..211b130
--- /dev/null
+++ b/public/media/icons/duotune/finance/fin007.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/finance/fin008.svg b/public/media/icons/duotune/finance/fin008.svg
new file mode 100644
index 0000000..ded8e84
--- /dev/null
+++ b/public/media/icons/duotune/finance/fin008.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/finance/fin009.svg b/public/media/icons/duotune/finance/fin009.svg
new file mode 100644
index 0000000..5742ecb
--- /dev/null
+++ b/public/media/icons/duotune/finance/fin009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/finance/fin010.svg b/public/media/icons/duotune/finance/fin010.svg
new file mode 100644
index 0000000..b0db9a6
--- /dev/null
+++ b/public/media/icons/duotune/finance/fin010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen001.svg b/public/media/icons/duotune/general/gen001.svg
new file mode 100644
index 0000000..2d574a4
--- /dev/null
+++ b/public/media/icons/duotune/general/gen001.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/general/gen002.svg b/public/media/icons/duotune/general/gen002.svg
new file mode 100644
index 0000000..416538e
--- /dev/null
+++ b/public/media/icons/duotune/general/gen002.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen003.svg b/public/media/icons/duotune/general/gen003.svg
new file mode 100644
index 0000000..ef44d14
--- /dev/null
+++ b/public/media/icons/duotune/general/gen003.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/general/gen004.svg b/public/media/icons/duotune/general/gen004.svg
new file mode 100644
index 0000000..38547ca
--- /dev/null
+++ b/public/media/icons/duotune/general/gen004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen005.svg b/public/media/icons/duotune/general/gen005.svg
new file mode 100644
index 0000000..dc1d1b6
--- /dev/null
+++ b/public/media/icons/duotune/general/gen005.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen006.svg b/public/media/icons/duotune/general/gen006.svg
new file mode 100644
index 0000000..4b3d7c5
--- /dev/null
+++ b/public/media/icons/duotune/general/gen006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen007.svg b/public/media/icons/duotune/general/gen007.svg
new file mode 100644
index 0000000..bafae05
--- /dev/null
+++ b/public/media/icons/duotune/general/gen007.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen008.svg b/public/media/icons/duotune/general/gen008.svg
new file mode 100644
index 0000000..18379fa
--- /dev/null
+++ b/public/media/icons/duotune/general/gen008.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen009.svg b/public/media/icons/duotune/general/gen009.svg
new file mode 100644
index 0000000..456905b
--- /dev/null
+++ b/public/media/icons/duotune/general/gen009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen010.svg b/public/media/icons/duotune/general/gen010.svg
new file mode 100644
index 0000000..9271ee2
--- /dev/null
+++ b/public/media/icons/duotune/general/gen010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen011.svg b/public/media/icons/duotune/general/gen011.svg
new file mode 100644
index 0000000..1901878
--- /dev/null
+++ b/public/media/icons/duotune/general/gen011.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen012.svg b/public/media/icons/duotune/general/gen012.svg
new file mode 100644
index 0000000..03eb271
--- /dev/null
+++ b/public/media/icons/duotune/general/gen012.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen013.svg b/public/media/icons/duotune/general/gen013.svg
new file mode 100644
index 0000000..76e2084
--- /dev/null
+++ b/public/media/icons/duotune/general/gen013.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen014.svg b/public/media/icons/duotune/general/gen014.svg
new file mode 100644
index 0000000..02f877c
--- /dev/null
+++ b/public/media/icons/duotune/general/gen014.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen015.svg b/public/media/icons/duotune/general/gen015.svg
new file mode 100644
index 0000000..b134c8a
--- /dev/null
+++ b/public/media/icons/duotune/general/gen015.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen016.svg b/public/media/icons/duotune/general/gen016.svg
new file mode 100644
index 0000000..5fbc848
--- /dev/null
+++ b/public/media/icons/duotune/general/gen016.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen017.svg b/public/media/icons/duotune/general/gen017.svg
new file mode 100644
index 0000000..fe4adb2
--- /dev/null
+++ b/public/media/icons/duotune/general/gen017.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen018.svg b/public/media/icons/duotune/general/gen018.svg
new file mode 100644
index 0000000..8814be4
--- /dev/null
+++ b/public/media/icons/duotune/general/gen018.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen019.svg b/public/media/icons/duotune/general/gen019.svg
new file mode 100644
index 0000000..ed0c762
--- /dev/null
+++ b/public/media/icons/duotune/general/gen019.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen020.svg b/public/media/icons/duotune/general/gen020.svg
new file mode 100644
index 0000000..679034b
--- /dev/null
+++ b/public/media/icons/duotune/general/gen020.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen021.svg b/public/media/icons/duotune/general/gen021.svg
new file mode 100644
index 0000000..f31329f
--- /dev/null
+++ b/public/media/icons/duotune/general/gen021.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen022.svg b/public/media/icons/duotune/general/gen022.svg
new file mode 100644
index 0000000..2021669
--- /dev/null
+++ b/public/media/icons/duotune/general/gen022.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen023.svg b/public/media/icons/duotune/general/gen023.svg
new file mode 100644
index 0000000..6e9ef81
--- /dev/null
+++ b/public/media/icons/duotune/general/gen023.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen024.svg b/public/media/icons/duotune/general/gen024.svg
new file mode 100644
index 0000000..d652e0f
--- /dev/null
+++ b/public/media/icons/duotune/general/gen024.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/media/icons/duotune/general/gen025.svg b/public/media/icons/duotune/general/gen025.svg
new file mode 100644
index 0000000..8827f5e
--- /dev/null
+++ b/public/media/icons/duotune/general/gen025.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen026.svg b/public/media/icons/duotune/general/gen026.svg
new file mode 100644
index 0000000..61cf899
--- /dev/null
+++ b/public/media/icons/duotune/general/gen026.svg
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/public/media/icons/duotune/general/gen027.svg b/public/media/icons/duotune/general/gen027.svg
new file mode 100644
index 0000000..352e6f0
--- /dev/null
+++ b/public/media/icons/duotune/general/gen027.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen028.svg b/public/media/icons/duotune/general/gen028.svg
new file mode 100644
index 0000000..09e9bff
--- /dev/null
+++ b/public/media/icons/duotune/general/gen028.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen029.svg b/public/media/icons/duotune/general/gen029.svg
new file mode 100644
index 0000000..966663a
--- /dev/null
+++ b/public/media/icons/duotune/general/gen029.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/general/gen030.svg b/public/media/icons/duotune/general/gen030.svg
new file mode 100644
index 0000000..22a6f01
--- /dev/null
+++ b/public/media/icons/duotune/general/gen030.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/general/gen031.svg b/public/media/icons/duotune/general/gen031.svg
new file mode 100644
index 0000000..bf92d55
--- /dev/null
+++ b/public/media/icons/duotune/general/gen031.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/general/gen032.svg b/public/media/icons/duotune/general/gen032.svg
new file mode 100644
index 0000000..6a4d3c2
--- /dev/null
+++ b/public/media/icons/duotune/general/gen032.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen033.svg b/public/media/icons/duotune/general/gen033.svg
new file mode 100644
index 0000000..5e5aa39
--- /dev/null
+++ b/public/media/icons/duotune/general/gen033.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen034.svg b/public/media/icons/duotune/general/gen034.svg
new file mode 100644
index 0000000..ce81d7c
--- /dev/null
+++ b/public/media/icons/duotune/general/gen034.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen035.svg b/public/media/icons/duotune/general/gen035.svg
new file mode 100644
index 0000000..75765ee
--- /dev/null
+++ b/public/media/icons/duotune/general/gen035.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen036.svg b/public/media/icons/duotune/general/gen036.svg
new file mode 100644
index 0000000..91487e8
--- /dev/null
+++ b/public/media/icons/duotune/general/gen036.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen037.svg b/public/media/icons/duotune/general/gen037.svg
new file mode 100644
index 0000000..d5c7eb1
--- /dev/null
+++ b/public/media/icons/duotune/general/gen037.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen038.svg b/public/media/icons/duotune/general/gen038.svg
new file mode 100644
index 0000000..96899a8
--- /dev/null
+++ b/public/media/icons/duotune/general/gen038.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen039.svg b/public/media/icons/duotune/general/gen039.svg
new file mode 100644
index 0000000..7069e81
--- /dev/null
+++ b/public/media/icons/duotune/general/gen039.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen040.svg b/public/media/icons/duotune/general/gen040.svg
new file mode 100644
index 0000000..6c7861e
--- /dev/null
+++ b/public/media/icons/duotune/general/gen040.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen041.svg b/public/media/icons/duotune/general/gen041.svg
new file mode 100644
index 0000000..78c7dc4
--- /dev/null
+++ b/public/media/icons/duotune/general/gen041.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen042.svg b/public/media/icons/duotune/general/gen042.svg
new file mode 100644
index 0000000..be66cfc
--- /dev/null
+++ b/public/media/icons/duotune/general/gen042.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen043.svg b/public/media/icons/duotune/general/gen043.svg
new file mode 100644
index 0000000..f210aa5
--- /dev/null
+++ b/public/media/icons/duotune/general/gen043.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen044.svg b/public/media/icons/duotune/general/gen044.svg
new file mode 100644
index 0000000..ca3caa0
--- /dev/null
+++ b/public/media/icons/duotune/general/gen044.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen045.svg b/public/media/icons/duotune/general/gen045.svg
new file mode 100644
index 0000000..3e68ebd
--- /dev/null
+++ b/public/media/icons/duotune/general/gen045.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen046.svg b/public/media/icons/duotune/general/gen046.svg
new file mode 100644
index 0000000..e1e8fe0
--- /dev/null
+++ b/public/media/icons/duotune/general/gen046.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen047.svg b/public/media/icons/duotune/general/gen047.svg
new file mode 100644
index 0000000..918f339
--- /dev/null
+++ b/public/media/icons/duotune/general/gen047.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen048.svg b/public/media/icons/duotune/general/gen048.svg
new file mode 100644
index 0000000..61661e0
--- /dev/null
+++ b/public/media/icons/duotune/general/gen048.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen049.svg b/public/media/icons/duotune/general/gen049.svg
new file mode 100644
index 0000000..7f913c2
--- /dev/null
+++ b/public/media/icons/duotune/general/gen049.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen050.svg b/public/media/icons/duotune/general/gen050.svg
new file mode 100644
index 0000000..a1cd906
--- /dev/null
+++ b/public/media/icons/duotune/general/gen050.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen051.svg b/public/media/icons/duotune/general/gen051.svg
new file mode 100644
index 0000000..67adf32
--- /dev/null
+++ b/public/media/icons/duotune/general/gen051.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen052.svg b/public/media/icons/duotune/general/gen052.svg
new file mode 100644
index 0000000..750833b
--- /dev/null
+++ b/public/media/icons/duotune/general/gen052.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen053.svg b/public/media/icons/duotune/general/gen053.svg
new file mode 100644
index 0000000..6bf2cdc
--- /dev/null
+++ b/public/media/icons/duotune/general/gen053.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen054.svg b/public/media/icons/duotune/general/gen054.svg
new file mode 100644
index 0000000..e313f0b
--- /dev/null
+++ b/public/media/icons/duotune/general/gen054.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen055.svg b/public/media/icons/duotune/general/gen055.svg
new file mode 100644
index 0000000..cb4d28a
--- /dev/null
+++ b/public/media/icons/duotune/general/gen055.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen056.svg b/public/media/icons/duotune/general/gen056.svg
new file mode 100644
index 0000000..f1ebaf7
--- /dev/null
+++ b/public/media/icons/duotune/general/gen056.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/general/gen057.svg b/public/media/icons/duotune/general/gen057.svg
new file mode 100644
index 0000000..7d7b432
--- /dev/null
+++ b/public/media/icons/duotune/general/gen057.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen058.svg b/public/media/icons/duotune/general/gen058.svg
new file mode 100644
index 0000000..359567f
--- /dev/null
+++ b/public/media/icons/duotune/general/gen058.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen059.svg b/public/media/icons/duotune/general/gen059.svg
new file mode 100644
index 0000000..b9f5caa
--- /dev/null
+++ b/public/media/icons/duotune/general/gen059.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen060.svg b/public/media/icons/duotune/general/gen060.svg
new file mode 100644
index 0000000..6ce466e
--- /dev/null
+++ b/public/media/icons/duotune/general/gen060.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen061.svg b/public/media/icons/duotune/general/gen061.svg
new file mode 100644
index 0000000..cbbd46e
--- /dev/null
+++ b/public/media/icons/duotune/general/gen061.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/general/gen062.svg b/public/media/icons/duotune/general/gen062.svg
new file mode 100644
index 0000000..9e646ed
--- /dev/null
+++ b/public/media/icons/duotune/general/gen062.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra001.svg b/public/media/icons/duotune/graphs/gra001.svg
new file mode 100644
index 0000000..0d4613f
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra002.svg b/public/media/icons/duotune/graphs/gra002.svg
new file mode 100644
index 0000000..81d2fb4
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra002.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra003.svg b/public/media/icons/duotune/graphs/gra003.svg
new file mode 100644
index 0000000..9e15600
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra004.svg b/public/media/icons/duotune/graphs/gra004.svg
new file mode 100644
index 0000000..e1f60cf
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra005.svg b/public/media/icons/duotune/graphs/gra005.svg
new file mode 100644
index 0000000..d5b2b5a
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra005.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra006.svg b/public/media/icons/duotune/graphs/gra006.svg
new file mode 100644
index 0000000..a3ca521
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra007.svg b/public/media/icons/duotune/graphs/gra007.svg
new file mode 100644
index 0000000..84e4a85
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra007.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra008.svg b/public/media/icons/duotune/graphs/gra008.svg
new file mode 100644
index 0000000..7a5f39b
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra008.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra009.svg b/public/media/icons/duotune/graphs/gra009.svg
new file mode 100644
index 0000000..c189ca1
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra010.svg b/public/media/icons/duotune/graphs/gra010.svg
new file mode 100644
index 0000000..4a19bb1
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra010.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra011.svg b/public/media/icons/duotune/graphs/gra011.svg
new file mode 100644
index 0000000..434ff51
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra011.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/graphs/gra012.svg b/public/media/icons/duotune/graphs/gra012.svg
new file mode 100644
index 0000000..3465674
--- /dev/null
+++ b/public/media/icons/duotune/graphs/gra012.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/layouts/lay001.svg b/public/media/icons/duotune/layouts/lay001.svg
new file mode 100644
index 0000000..e07fab9
--- /dev/null
+++ b/public/media/icons/duotune/layouts/lay001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/layouts/lay002.svg b/public/media/icons/duotune/layouts/lay002.svg
new file mode 100644
index 0000000..f7baa1a
--- /dev/null
+++ b/public/media/icons/duotune/layouts/lay002.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/layouts/lay003.svg b/public/media/icons/duotune/layouts/lay003.svg
new file mode 100644
index 0000000..ab7a1bd
--- /dev/null
+++ b/public/media/icons/duotune/layouts/lay003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/layouts/lay004.svg b/public/media/icons/duotune/layouts/lay004.svg
new file mode 100644
index 0000000..63f9aa1
--- /dev/null
+++ b/public/media/icons/duotune/layouts/lay004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/layouts/lay005.svg b/public/media/icons/duotune/layouts/lay005.svg
new file mode 100644
index 0000000..e3036d6
--- /dev/null
+++ b/public/media/icons/duotune/layouts/lay005.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/layouts/lay006.svg b/public/media/icons/duotune/layouts/lay006.svg
new file mode 100644
index 0000000..823de2e
--- /dev/null
+++ b/public/media/icons/duotune/layouts/lay006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/layouts/lay007.svg b/public/media/icons/duotune/layouts/lay007.svg
new file mode 100644
index 0000000..df21e00
--- /dev/null
+++ b/public/media/icons/duotune/layouts/lay007.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/layouts/lay008.svg b/public/media/icons/duotune/layouts/lay008.svg
new file mode 100644
index 0000000..7e3862c
--- /dev/null
+++ b/public/media/icons/duotune/layouts/lay008.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/layouts/lay009.svg b/public/media/icons/duotune/layouts/lay009.svg
new file mode 100644
index 0000000..0eb9c04
--- /dev/null
+++ b/public/media/icons/duotune/layouts/lay009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/layouts/lay010.svg b/public/media/icons/duotune/layouts/lay010.svg
new file mode 100644
index 0000000..3bc6688
--- /dev/null
+++ b/public/media/icons/duotune/layouts/lay010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/maps/map001.svg b/public/media/icons/duotune/maps/map001.svg
new file mode 100644
index 0000000..fc92fe8
--- /dev/null
+++ b/public/media/icons/duotune/maps/map001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/maps/map002.svg b/public/media/icons/duotune/maps/map002.svg
new file mode 100644
index 0000000..f78eec9
--- /dev/null
+++ b/public/media/icons/duotune/maps/map002.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/maps/map003.svg b/public/media/icons/duotune/maps/map003.svg
new file mode 100644
index 0000000..42963c8
--- /dev/null
+++ b/public/media/icons/duotune/maps/map003.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/maps/map004.svg b/public/media/icons/duotune/maps/map004.svg
new file mode 100644
index 0000000..30d04ab
--- /dev/null
+++ b/public/media/icons/duotune/maps/map004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/maps/map005.svg b/public/media/icons/duotune/maps/map005.svg
new file mode 100644
index 0000000..affead3
--- /dev/null
+++ b/public/media/icons/duotune/maps/map005.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/maps/map006.svg b/public/media/icons/duotune/maps/map006.svg
new file mode 100644
index 0000000..dff0082
--- /dev/null
+++ b/public/media/icons/duotune/maps/map006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/maps/map007.svg b/public/media/icons/duotune/maps/map007.svg
new file mode 100644
index 0000000..7abf49e
--- /dev/null
+++ b/public/media/icons/duotune/maps/map007.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/maps/map008.svg b/public/media/icons/duotune/maps/map008.svg
new file mode 100644
index 0000000..0ce688e
--- /dev/null
+++ b/public/media/icons/duotune/maps/map008.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/maps/map009.svg b/public/media/icons/duotune/maps/map009.svg
new file mode 100644
index 0000000..e1d59a6
--- /dev/null
+++ b/public/media/icons/duotune/maps/map009.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/maps/map010.svg b/public/media/icons/duotune/maps/map010.svg
new file mode 100644
index 0000000..dffe763
--- /dev/null
+++ b/public/media/icons/duotune/maps/map010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/medicine/med001.svg b/public/media/icons/duotune/medicine/med001.svg
new file mode 100644
index 0000000..73652f7
--- /dev/null
+++ b/public/media/icons/duotune/medicine/med001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/medicine/med002.svg b/public/media/icons/duotune/medicine/med002.svg
new file mode 100644
index 0000000..e85ab3c
--- /dev/null
+++ b/public/media/icons/duotune/medicine/med002.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/medicine/med003.svg b/public/media/icons/duotune/medicine/med003.svg
new file mode 100644
index 0000000..b55b4b2
--- /dev/null
+++ b/public/media/icons/duotune/medicine/med003.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/medicine/med004.svg b/public/media/icons/duotune/medicine/med004.svg
new file mode 100644
index 0000000..9a2203f
--- /dev/null
+++ b/public/media/icons/duotune/medicine/med004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/medicine/med005.svg b/public/media/icons/duotune/medicine/med005.svg
new file mode 100644
index 0000000..bfd98d6
--- /dev/null
+++ b/public/media/icons/duotune/medicine/med005.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/medicine/med006.svg b/public/media/icons/duotune/medicine/med006.svg
new file mode 100644
index 0000000..81026e1
--- /dev/null
+++ b/public/media/icons/duotune/medicine/med006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/medicine/med007.svg b/public/media/icons/duotune/medicine/med007.svg
new file mode 100644
index 0000000..1ab861c
--- /dev/null
+++ b/public/media/icons/duotune/medicine/med007.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/medicine/med008.svg b/public/media/icons/duotune/medicine/med008.svg
new file mode 100644
index 0000000..96e911d
--- /dev/null
+++ b/public/media/icons/duotune/medicine/med008.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/icons/duotune/medicine/med009.svg b/public/media/icons/duotune/medicine/med009.svg
new file mode 100644
index 0000000..09a70e1
--- /dev/null
+++ b/public/media/icons/duotune/medicine/med009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/medicine/med010.svg b/public/media/icons/duotune/medicine/med010.svg
new file mode 100644
index 0000000..519c8f4
--- /dev/null
+++ b/public/media/icons/duotune/medicine/med010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/social/soc001.svg b/public/media/icons/duotune/social/soc001.svg
new file mode 100644
index 0000000..b0fd541
--- /dev/null
+++ b/public/media/icons/duotune/social/soc001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/social/soc002.svg b/public/media/icons/duotune/social/soc002.svg
new file mode 100644
index 0000000..4089ad8
--- /dev/null
+++ b/public/media/icons/duotune/social/soc002.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/social/soc003.svg b/public/media/icons/duotune/social/soc003.svg
new file mode 100644
index 0000000..de11fa3
--- /dev/null
+++ b/public/media/icons/duotune/social/soc003.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/social/soc004.svg b/public/media/icons/duotune/social/soc004.svg
new file mode 100644
index 0000000..3873a83
--- /dev/null
+++ b/public/media/icons/duotune/social/soc004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/social/soc005.svg b/public/media/icons/duotune/social/soc005.svg
new file mode 100644
index 0000000..3ee2944
--- /dev/null
+++ b/public/media/icons/duotune/social/soc005.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/social/soc006.svg b/public/media/icons/duotune/social/soc006.svg
new file mode 100644
index 0000000..1fb0ebc
--- /dev/null
+++ b/public/media/icons/duotune/social/soc006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/social/soc007.svg b/public/media/icons/duotune/social/soc007.svg
new file mode 100644
index 0000000..9d9233a
--- /dev/null
+++ b/public/media/icons/duotune/social/soc007.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/social/soc008.svg b/public/media/icons/duotune/social/soc008.svg
new file mode 100644
index 0000000..3d06f81
--- /dev/null
+++ b/public/media/icons/duotune/social/soc008.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/social/soc009.svg b/public/media/icons/duotune/social/soc009.svg
new file mode 100644
index 0000000..ad5280a
--- /dev/null
+++ b/public/media/icons/duotune/social/soc009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/social/soc010.svg b/public/media/icons/duotune/social/soc010.svg
new file mode 100644
index 0000000..71d175e
--- /dev/null
+++ b/public/media/icons/duotune/social/soc010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/technology/teh001.svg b/public/media/icons/duotune/technology/teh001.svg
new file mode 100644
index 0000000..7d48300
--- /dev/null
+++ b/public/media/icons/duotune/technology/teh001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/technology/teh002.svg b/public/media/icons/duotune/technology/teh002.svg
new file mode 100644
index 0000000..f95cd12
--- /dev/null
+++ b/public/media/icons/duotune/technology/teh002.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/technology/teh003.svg b/public/media/icons/duotune/technology/teh003.svg
new file mode 100644
index 0000000..59deaff
--- /dev/null
+++ b/public/media/icons/duotune/technology/teh003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/technology/teh004.svg b/public/media/icons/duotune/technology/teh004.svg
new file mode 100644
index 0000000..de2f954
--- /dev/null
+++ b/public/media/icons/duotune/technology/teh004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/technology/teh005.svg b/public/media/icons/duotune/technology/teh005.svg
new file mode 100644
index 0000000..da5ef05
--- /dev/null
+++ b/public/media/icons/duotune/technology/teh005.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/technology/teh006.svg b/public/media/icons/duotune/technology/teh006.svg
new file mode 100644
index 0000000..0543bc6
--- /dev/null
+++ b/public/media/icons/duotune/technology/teh006.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/technology/teh007.svg b/public/media/icons/duotune/technology/teh007.svg
new file mode 100644
index 0000000..2bed14d
--- /dev/null
+++ b/public/media/icons/duotune/technology/teh007.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/technology/teh008.svg b/public/media/icons/duotune/technology/teh008.svg
new file mode 100644
index 0000000..ce288f2
--- /dev/null
+++ b/public/media/icons/duotune/technology/teh008.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/technology/teh009.svg b/public/media/icons/duotune/technology/teh009.svg
new file mode 100644
index 0000000..ff6ac1d
--- /dev/null
+++ b/public/media/icons/duotune/technology/teh009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/technology/teh010.svg b/public/media/icons/duotune/technology/teh010.svg
new file mode 100644
index 0000000..59a1c94
--- /dev/null
+++ b/public/media/icons/duotune/technology/teh010.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/icons/duotune/text/txt001.svg b/public/media/icons/duotune/text/txt001.svg
new file mode 100644
index 0000000..db4c393
--- /dev/null
+++ b/public/media/icons/duotune/text/txt001.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/text/txt002.svg b/public/media/icons/duotune/text/txt002.svg
new file mode 100644
index 0000000..3bce269
--- /dev/null
+++ b/public/media/icons/duotune/text/txt002.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/text/txt003.svg b/public/media/icons/duotune/text/txt003.svg
new file mode 100644
index 0000000..e5b9851
--- /dev/null
+++ b/public/media/icons/duotune/text/txt003.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/text/txt004.svg b/public/media/icons/duotune/text/txt004.svg
new file mode 100644
index 0000000..e5b9851
--- /dev/null
+++ b/public/media/icons/duotune/text/txt004.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/text/txt005.svg b/public/media/icons/duotune/text/txt005.svg
new file mode 100644
index 0000000..cd9b66a
--- /dev/null
+++ b/public/media/icons/duotune/text/txt005.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/text/txt006.svg b/public/media/icons/duotune/text/txt006.svg
new file mode 100644
index 0000000..8d8ea00
--- /dev/null
+++ b/public/media/icons/duotune/text/txt006.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/text/txt007.svg b/public/media/icons/duotune/text/txt007.svg
new file mode 100644
index 0000000..6629bba
--- /dev/null
+++ b/public/media/icons/duotune/text/txt007.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/icons/duotune/text/txt008.svg b/public/media/icons/duotune/text/txt008.svg
new file mode 100644
index 0000000..db1ff30
--- /dev/null
+++ b/public/media/icons/duotune/text/txt008.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/text/txt009.svg b/public/media/icons/duotune/text/txt009.svg
new file mode 100644
index 0000000..4eb9ccd
--- /dev/null
+++ b/public/media/icons/duotune/text/txt009.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/icons/duotune/text/txt010.svg b/public/media/icons/duotune/text/txt010.svg
new file mode 100644
index 0000000..cbee6a2
--- /dev/null
+++ b/public/media/icons/duotune/text/txt010.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/illustrations/dozzy-1/1-dark.png b/public/media/illustrations/dozzy-1/1-dark.png
new file mode 100644
index 0000000..8a913b2
Binary files /dev/null and b/public/media/illustrations/dozzy-1/1-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/1.png b/public/media/illustrations/dozzy-1/1.png
new file mode 100644
index 0000000..8a913b2
Binary files /dev/null and b/public/media/illustrations/dozzy-1/1.png differ
diff --git a/public/media/illustrations/dozzy-1/10-dark.png b/public/media/illustrations/dozzy-1/10-dark.png
new file mode 100644
index 0000000..035f888
Binary files /dev/null and b/public/media/illustrations/dozzy-1/10-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/10.png b/public/media/illustrations/dozzy-1/10.png
new file mode 100644
index 0000000..035f888
Binary files /dev/null and b/public/media/illustrations/dozzy-1/10.png differ
diff --git a/public/media/illustrations/dozzy-1/11-dark.png b/public/media/illustrations/dozzy-1/11-dark.png
new file mode 100644
index 0000000..935cc93
Binary files /dev/null and b/public/media/illustrations/dozzy-1/11-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/11.png b/public/media/illustrations/dozzy-1/11.png
new file mode 100644
index 0000000..935cc93
Binary files /dev/null and b/public/media/illustrations/dozzy-1/11.png differ
diff --git a/public/media/illustrations/dozzy-1/12-dark.png b/public/media/illustrations/dozzy-1/12-dark.png
new file mode 100644
index 0000000..6a566f2
Binary files /dev/null and b/public/media/illustrations/dozzy-1/12-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/12.png b/public/media/illustrations/dozzy-1/12.png
new file mode 100644
index 0000000..6a566f2
Binary files /dev/null and b/public/media/illustrations/dozzy-1/12.png differ
diff --git a/public/media/illustrations/dozzy-1/13-dark.png b/public/media/illustrations/dozzy-1/13-dark.png
new file mode 100644
index 0000000..aeb4821
Binary files /dev/null and b/public/media/illustrations/dozzy-1/13-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/13.png b/public/media/illustrations/dozzy-1/13.png
new file mode 100644
index 0000000..aeb4821
Binary files /dev/null and b/public/media/illustrations/dozzy-1/13.png differ
diff --git a/public/media/illustrations/dozzy-1/14-dark.png b/public/media/illustrations/dozzy-1/14-dark.png
new file mode 100644
index 0000000..b5e3eab
Binary files /dev/null and b/public/media/illustrations/dozzy-1/14-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/14.png b/public/media/illustrations/dozzy-1/14.png
new file mode 100644
index 0000000..635b369
Binary files /dev/null and b/public/media/illustrations/dozzy-1/14.png differ
diff --git a/public/media/illustrations/dozzy-1/15-dark.png b/public/media/illustrations/dozzy-1/15-dark.png
new file mode 100644
index 0000000..002b83c
Binary files /dev/null and b/public/media/illustrations/dozzy-1/15-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/15.png b/public/media/illustrations/dozzy-1/15.png
new file mode 100644
index 0000000..002b83c
Binary files /dev/null and b/public/media/illustrations/dozzy-1/15.png differ
diff --git a/public/media/illustrations/dozzy-1/16-dark.png b/public/media/illustrations/dozzy-1/16-dark.png
new file mode 100644
index 0000000..69202fd
Binary files /dev/null and b/public/media/illustrations/dozzy-1/16-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/16.png b/public/media/illustrations/dozzy-1/16.png
new file mode 100644
index 0000000..69202fd
Binary files /dev/null and b/public/media/illustrations/dozzy-1/16.png differ
diff --git a/public/media/illustrations/dozzy-1/17-dark.png b/public/media/illustrations/dozzy-1/17-dark.png
new file mode 100644
index 0000000..6f34b91
Binary files /dev/null and b/public/media/illustrations/dozzy-1/17-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/17.png b/public/media/illustrations/dozzy-1/17.png
new file mode 100644
index 0000000..6f34b91
Binary files /dev/null and b/public/media/illustrations/dozzy-1/17.png differ
diff --git a/public/media/illustrations/dozzy-1/18-dark.png b/public/media/illustrations/dozzy-1/18-dark.png
new file mode 100644
index 0000000..e19a79a
Binary files /dev/null and b/public/media/illustrations/dozzy-1/18-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/18.png b/public/media/illustrations/dozzy-1/18.png
new file mode 100644
index 0000000..4ca77a5
Binary files /dev/null and b/public/media/illustrations/dozzy-1/18.png differ
diff --git a/public/media/illustrations/dozzy-1/19-dark.png b/public/media/illustrations/dozzy-1/19-dark.png
new file mode 100644
index 0000000..7e19dd5
Binary files /dev/null and b/public/media/illustrations/dozzy-1/19-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/19.png b/public/media/illustrations/dozzy-1/19.png
new file mode 100644
index 0000000..8d2d189
Binary files /dev/null and b/public/media/illustrations/dozzy-1/19.png differ
diff --git a/public/media/illustrations/dozzy-1/2-dark.png b/public/media/illustrations/dozzy-1/2-dark.png
new file mode 100644
index 0000000..cee2ced
Binary files /dev/null and b/public/media/illustrations/dozzy-1/2-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/2.png b/public/media/illustrations/dozzy-1/2.png
new file mode 100644
index 0000000..cee2ced
Binary files /dev/null and b/public/media/illustrations/dozzy-1/2.png differ
diff --git a/public/media/illustrations/dozzy-1/20-dark.png b/public/media/illustrations/dozzy-1/20-dark.png
new file mode 100644
index 0000000..c5a8f58
Binary files /dev/null and b/public/media/illustrations/dozzy-1/20-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/20.png b/public/media/illustrations/dozzy-1/20.png
new file mode 100644
index 0000000..c5a8f58
Binary files /dev/null and b/public/media/illustrations/dozzy-1/20.png differ
diff --git a/public/media/illustrations/dozzy-1/3-dark.png b/public/media/illustrations/dozzy-1/3-dark.png
new file mode 100644
index 0000000..3d924fd
Binary files /dev/null and b/public/media/illustrations/dozzy-1/3-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/3.png b/public/media/illustrations/dozzy-1/3.png
new file mode 100644
index 0000000..3d924fd
Binary files /dev/null and b/public/media/illustrations/dozzy-1/3.png differ
diff --git a/public/media/illustrations/dozzy-1/4-dark.png b/public/media/illustrations/dozzy-1/4-dark.png
new file mode 100644
index 0000000..7ad63d6
Binary files /dev/null and b/public/media/illustrations/dozzy-1/4-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/4.png b/public/media/illustrations/dozzy-1/4.png
new file mode 100644
index 0000000..7ad63d6
Binary files /dev/null and b/public/media/illustrations/dozzy-1/4.png differ
diff --git a/public/media/illustrations/dozzy-1/5-dark.png b/public/media/illustrations/dozzy-1/5-dark.png
new file mode 100644
index 0000000..b366a8a
Binary files /dev/null and b/public/media/illustrations/dozzy-1/5-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/5.png b/public/media/illustrations/dozzy-1/5.png
new file mode 100644
index 0000000..b366a8a
Binary files /dev/null and b/public/media/illustrations/dozzy-1/5.png differ
diff --git a/public/media/illustrations/dozzy-1/6-dark.png b/public/media/illustrations/dozzy-1/6-dark.png
new file mode 100644
index 0000000..b50bd5a
Binary files /dev/null and b/public/media/illustrations/dozzy-1/6-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/6.png b/public/media/illustrations/dozzy-1/6.png
new file mode 100644
index 0000000..b50bd5a
Binary files /dev/null and b/public/media/illustrations/dozzy-1/6.png differ
diff --git a/public/media/illustrations/dozzy-1/7-dark.png b/public/media/illustrations/dozzy-1/7-dark.png
new file mode 100644
index 0000000..f0e0ba3
Binary files /dev/null and b/public/media/illustrations/dozzy-1/7-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/7.png b/public/media/illustrations/dozzy-1/7.png
new file mode 100644
index 0000000..f0e0ba3
Binary files /dev/null and b/public/media/illustrations/dozzy-1/7.png differ
diff --git a/public/media/illustrations/dozzy-1/8-dark.png b/public/media/illustrations/dozzy-1/8-dark.png
new file mode 100644
index 0000000..cffb72f
Binary files /dev/null and b/public/media/illustrations/dozzy-1/8-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/8.png b/public/media/illustrations/dozzy-1/8.png
new file mode 100644
index 0000000..cffb72f
Binary files /dev/null and b/public/media/illustrations/dozzy-1/8.png differ
diff --git a/public/media/illustrations/dozzy-1/9-dark.png b/public/media/illustrations/dozzy-1/9-dark.png
new file mode 100644
index 0000000..0f9a0eb
Binary files /dev/null and b/public/media/illustrations/dozzy-1/9-dark.png differ
diff --git a/public/media/illustrations/dozzy-1/9.png b/public/media/illustrations/dozzy-1/9.png
new file mode 100644
index 0000000..0f9a0eb
Binary files /dev/null and b/public/media/illustrations/dozzy-1/9.png differ
diff --git a/public/media/illustrations/misc/credit-card.png b/public/media/illustrations/misc/credit-card.png
new file mode 100644
index 0000000..024851c
Binary files /dev/null and b/public/media/illustrations/misc/credit-card.png differ
diff --git a/public/media/illustrations/misc/upgrade-dark.svg b/public/media/illustrations/misc/upgrade-dark.svg
new file mode 100644
index 0000000..834c3a3
--- /dev/null
+++ b/public/media/illustrations/misc/upgrade-dark.svg
@@ -0,0 +1,140 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/illustrations/misc/upgrade.svg b/public/media/illustrations/misc/upgrade.svg
new file mode 100644
index 0000000..e72aff5
--- /dev/null
+++ b/public/media/illustrations/misc/upgrade.svg
@@ -0,0 +1,146 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/illustrations/sigma-1/1-dark.png b/public/media/illustrations/sigma-1/1-dark.png
new file mode 100644
index 0000000..e7331f0
Binary files /dev/null and b/public/media/illustrations/sigma-1/1-dark.png differ
diff --git a/public/media/illustrations/sigma-1/1.png b/public/media/illustrations/sigma-1/1.png
new file mode 100644
index 0000000..2c40339
Binary files /dev/null and b/public/media/illustrations/sigma-1/1.png differ
diff --git a/public/media/illustrations/sigma-1/10-dark.png b/public/media/illustrations/sigma-1/10-dark.png
new file mode 100644
index 0000000..6acbb20
Binary files /dev/null and b/public/media/illustrations/sigma-1/10-dark.png differ
diff --git a/public/media/illustrations/sigma-1/10.png b/public/media/illustrations/sigma-1/10.png
new file mode 100644
index 0000000..37e2b15
Binary files /dev/null and b/public/media/illustrations/sigma-1/10.png differ
diff --git a/public/media/illustrations/sigma-1/11-dark.png b/public/media/illustrations/sigma-1/11-dark.png
new file mode 100644
index 0000000..eabc31f
Binary files /dev/null and b/public/media/illustrations/sigma-1/11-dark.png differ
diff --git a/public/media/illustrations/sigma-1/11.png b/public/media/illustrations/sigma-1/11.png
new file mode 100644
index 0000000..a393a3d
Binary files /dev/null and b/public/media/illustrations/sigma-1/11.png differ
diff --git a/public/media/illustrations/sigma-1/12-dark.png b/public/media/illustrations/sigma-1/12-dark.png
new file mode 100644
index 0000000..cdac7bf
Binary files /dev/null and b/public/media/illustrations/sigma-1/12-dark.png differ
diff --git a/public/media/illustrations/sigma-1/12.png b/public/media/illustrations/sigma-1/12.png
new file mode 100644
index 0000000..9edd6ad
Binary files /dev/null and b/public/media/illustrations/sigma-1/12.png differ
diff --git a/public/media/illustrations/sigma-1/13-dark.png b/public/media/illustrations/sigma-1/13-dark.png
new file mode 100644
index 0000000..187499a
Binary files /dev/null and b/public/media/illustrations/sigma-1/13-dark.png differ
diff --git a/public/media/illustrations/sigma-1/13.png b/public/media/illustrations/sigma-1/13.png
new file mode 100644
index 0000000..73484aa
Binary files /dev/null and b/public/media/illustrations/sigma-1/13.png differ
diff --git a/public/media/illustrations/sigma-1/14-dark.png b/public/media/illustrations/sigma-1/14-dark.png
new file mode 100644
index 0000000..3bfe499
Binary files /dev/null and b/public/media/illustrations/sigma-1/14-dark.png differ
diff --git a/public/media/illustrations/sigma-1/14.png b/public/media/illustrations/sigma-1/14.png
new file mode 100644
index 0000000..fddda94
Binary files /dev/null and b/public/media/illustrations/sigma-1/14.png differ
diff --git a/public/media/illustrations/sigma-1/15-dark.png b/public/media/illustrations/sigma-1/15-dark.png
new file mode 100644
index 0000000..853fff7
Binary files /dev/null and b/public/media/illustrations/sigma-1/15-dark.png differ
diff --git a/public/media/illustrations/sigma-1/15.png b/public/media/illustrations/sigma-1/15.png
new file mode 100644
index 0000000..170124b
Binary files /dev/null and b/public/media/illustrations/sigma-1/15.png differ
diff --git a/public/media/illustrations/sigma-1/16-dark.png b/public/media/illustrations/sigma-1/16-dark.png
new file mode 100644
index 0000000..9e4b70b
Binary files /dev/null and b/public/media/illustrations/sigma-1/16-dark.png differ
diff --git a/public/media/illustrations/sigma-1/16.png b/public/media/illustrations/sigma-1/16.png
new file mode 100644
index 0000000..3a8257c
Binary files /dev/null and b/public/media/illustrations/sigma-1/16.png differ
diff --git a/public/media/illustrations/sigma-1/17-dark.png b/public/media/illustrations/sigma-1/17-dark.png
new file mode 100644
index 0000000..ee770af
Binary files /dev/null and b/public/media/illustrations/sigma-1/17-dark.png differ
diff --git a/public/media/illustrations/sigma-1/17.png b/public/media/illustrations/sigma-1/17.png
new file mode 100644
index 0000000..8fcacf0
Binary files /dev/null and b/public/media/illustrations/sigma-1/17.png differ
diff --git a/public/media/illustrations/sigma-1/18-dark.png b/public/media/illustrations/sigma-1/18-dark.png
new file mode 100644
index 0000000..f9adc48
Binary files /dev/null and b/public/media/illustrations/sigma-1/18-dark.png differ
diff --git a/public/media/illustrations/sigma-1/18.png b/public/media/illustrations/sigma-1/18.png
new file mode 100644
index 0000000..459ed7b
Binary files /dev/null and b/public/media/illustrations/sigma-1/18.png differ
diff --git a/public/media/illustrations/sigma-1/19-dark.png b/public/media/illustrations/sigma-1/19-dark.png
new file mode 100644
index 0000000..54e7633
Binary files /dev/null and b/public/media/illustrations/sigma-1/19-dark.png differ
diff --git a/public/media/illustrations/sigma-1/19.png b/public/media/illustrations/sigma-1/19.png
new file mode 100644
index 0000000..9fd06f6
Binary files /dev/null and b/public/media/illustrations/sigma-1/19.png differ
diff --git a/public/media/illustrations/sigma-1/2-dark.png b/public/media/illustrations/sigma-1/2-dark.png
new file mode 100644
index 0000000..cec2fd4
Binary files /dev/null and b/public/media/illustrations/sigma-1/2-dark.png differ
diff --git a/public/media/illustrations/sigma-1/2.png b/public/media/illustrations/sigma-1/2.png
new file mode 100644
index 0000000..3e5310e
Binary files /dev/null and b/public/media/illustrations/sigma-1/2.png differ
diff --git a/public/media/illustrations/sigma-1/20-dark.png b/public/media/illustrations/sigma-1/20-dark.png
new file mode 100644
index 0000000..a18f403
Binary files /dev/null and b/public/media/illustrations/sigma-1/20-dark.png differ
diff --git a/public/media/illustrations/sigma-1/20.png b/public/media/illustrations/sigma-1/20.png
new file mode 100644
index 0000000..c1879ef
Binary files /dev/null and b/public/media/illustrations/sigma-1/20.png differ
diff --git a/public/media/illustrations/sigma-1/21-dark.png b/public/media/illustrations/sigma-1/21-dark.png
new file mode 100644
index 0000000..820be06
Binary files /dev/null and b/public/media/illustrations/sigma-1/21-dark.png differ
diff --git a/public/media/illustrations/sigma-1/21.png b/public/media/illustrations/sigma-1/21.png
new file mode 100644
index 0000000..b6e1623
Binary files /dev/null and b/public/media/illustrations/sigma-1/21.png differ
diff --git a/public/media/illustrations/sigma-1/3-dark.png b/public/media/illustrations/sigma-1/3-dark.png
new file mode 100644
index 0000000..1c10717
Binary files /dev/null and b/public/media/illustrations/sigma-1/3-dark.png differ
diff --git a/public/media/illustrations/sigma-1/3.png b/public/media/illustrations/sigma-1/3.png
new file mode 100644
index 0000000..9f79d8a
Binary files /dev/null and b/public/media/illustrations/sigma-1/3.png differ
diff --git a/public/media/illustrations/sigma-1/4-dark.png b/public/media/illustrations/sigma-1/4-dark.png
new file mode 100644
index 0000000..70e6767
Binary files /dev/null and b/public/media/illustrations/sigma-1/4-dark.png differ
diff --git a/public/media/illustrations/sigma-1/4.png b/public/media/illustrations/sigma-1/4.png
new file mode 100644
index 0000000..c0ddb8f
Binary files /dev/null and b/public/media/illustrations/sigma-1/4.png differ
diff --git a/public/media/illustrations/sigma-1/5-dark.png b/public/media/illustrations/sigma-1/5-dark.png
new file mode 100644
index 0000000..7a94c20
Binary files /dev/null and b/public/media/illustrations/sigma-1/5-dark.png differ
diff --git a/public/media/illustrations/sigma-1/5.png b/public/media/illustrations/sigma-1/5.png
new file mode 100644
index 0000000..b28d5db
Binary files /dev/null and b/public/media/illustrations/sigma-1/5.png differ
diff --git a/public/media/illustrations/sigma-1/6-dark.png b/public/media/illustrations/sigma-1/6-dark.png
new file mode 100644
index 0000000..b44bc0a
Binary files /dev/null and b/public/media/illustrations/sigma-1/6-dark.png differ
diff --git a/public/media/illustrations/sigma-1/6.png b/public/media/illustrations/sigma-1/6.png
new file mode 100644
index 0000000..77e9279
Binary files /dev/null and b/public/media/illustrations/sigma-1/6.png differ
diff --git a/public/media/illustrations/sigma-1/7-dark.png b/public/media/illustrations/sigma-1/7-dark.png
new file mode 100644
index 0000000..d1ef375
Binary files /dev/null and b/public/media/illustrations/sigma-1/7-dark.png differ
diff --git a/public/media/illustrations/sigma-1/7.png b/public/media/illustrations/sigma-1/7.png
new file mode 100644
index 0000000..e1e6da8
Binary files /dev/null and b/public/media/illustrations/sigma-1/7.png differ
diff --git a/public/media/illustrations/sigma-1/8-dark.png b/public/media/illustrations/sigma-1/8-dark.png
new file mode 100644
index 0000000..9a13ac7
Binary files /dev/null and b/public/media/illustrations/sigma-1/8-dark.png differ
diff --git a/public/media/illustrations/sigma-1/8.png b/public/media/illustrations/sigma-1/8.png
new file mode 100644
index 0000000..9a3a3f9
Binary files /dev/null and b/public/media/illustrations/sigma-1/8.png differ
diff --git a/public/media/illustrations/sigma-1/9-dark.png b/public/media/illustrations/sigma-1/9-dark.png
new file mode 100644
index 0000000..9986e19
Binary files /dev/null and b/public/media/illustrations/sigma-1/9-dark.png differ
diff --git a/public/media/illustrations/sigma-1/9.png b/public/media/illustrations/sigma-1/9.png
new file mode 100644
index 0000000..f7a9f72
Binary files /dev/null and b/public/media/illustrations/sigma-1/9.png differ
diff --git a/public/media/illustrations/sketchy-1/1-dark.png b/public/media/illustrations/sketchy-1/1-dark.png
new file mode 100644
index 0000000..5ea1b54
Binary files /dev/null and b/public/media/illustrations/sketchy-1/1-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/1.png b/public/media/illustrations/sketchy-1/1.png
new file mode 100644
index 0000000..5ea1b54
Binary files /dev/null and b/public/media/illustrations/sketchy-1/1.png differ
diff --git a/public/media/illustrations/sketchy-1/10-dark.png b/public/media/illustrations/sketchy-1/10-dark.png
new file mode 100644
index 0000000..8520ece
Binary files /dev/null and b/public/media/illustrations/sketchy-1/10-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/10.png b/public/media/illustrations/sketchy-1/10.png
new file mode 100644
index 0000000..6473bc0
Binary files /dev/null and b/public/media/illustrations/sketchy-1/10.png differ
diff --git a/public/media/illustrations/sketchy-1/11-dark.png b/public/media/illustrations/sketchy-1/11-dark.png
new file mode 100644
index 0000000..25a6f91
Binary files /dev/null and b/public/media/illustrations/sketchy-1/11-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/11.png b/public/media/illustrations/sketchy-1/11.png
new file mode 100644
index 0000000..25a6f91
Binary files /dev/null and b/public/media/illustrations/sketchy-1/11.png differ
diff --git a/public/media/illustrations/sketchy-1/12-dark.png b/public/media/illustrations/sketchy-1/12-dark.png
new file mode 100644
index 0000000..9b205d2
Binary files /dev/null and b/public/media/illustrations/sketchy-1/12-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/12.png b/public/media/illustrations/sketchy-1/12.png
new file mode 100644
index 0000000..9b205d2
Binary files /dev/null and b/public/media/illustrations/sketchy-1/12.png differ
diff --git a/public/media/illustrations/sketchy-1/13-dark.png b/public/media/illustrations/sketchy-1/13-dark.png
new file mode 100644
index 0000000..58aceb0
Binary files /dev/null and b/public/media/illustrations/sketchy-1/13-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/13.png b/public/media/illustrations/sketchy-1/13.png
new file mode 100644
index 0000000..4cbafeb
Binary files /dev/null and b/public/media/illustrations/sketchy-1/13.png differ
diff --git a/public/media/illustrations/sketchy-1/14-dark.png b/public/media/illustrations/sketchy-1/14-dark.png
new file mode 100644
index 0000000..f4d7601
Binary files /dev/null and b/public/media/illustrations/sketchy-1/14-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/14.png b/public/media/illustrations/sketchy-1/14.png
new file mode 100644
index 0000000..920bad9
Binary files /dev/null and b/public/media/illustrations/sketchy-1/14.png differ
diff --git a/public/media/illustrations/sketchy-1/15-dark.png b/public/media/illustrations/sketchy-1/15-dark.png
new file mode 100644
index 0000000..f36c423
Binary files /dev/null and b/public/media/illustrations/sketchy-1/15-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/15.png b/public/media/illustrations/sketchy-1/15.png
new file mode 100644
index 0000000..cda7ee7
Binary files /dev/null and b/public/media/illustrations/sketchy-1/15.png differ
diff --git a/public/media/illustrations/sketchy-1/16-dark.png b/public/media/illustrations/sketchy-1/16-dark.png
new file mode 100644
index 0000000..effe4ef
Binary files /dev/null and b/public/media/illustrations/sketchy-1/16-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/16.png b/public/media/illustrations/sketchy-1/16.png
new file mode 100644
index 0000000..effe4ef
Binary files /dev/null and b/public/media/illustrations/sketchy-1/16.png differ
diff --git a/public/media/illustrations/sketchy-1/17-dark.png b/public/media/illustrations/sketchy-1/17-dark.png
new file mode 100644
index 0000000..017f9cf
Binary files /dev/null and b/public/media/illustrations/sketchy-1/17-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/17.png b/public/media/illustrations/sketchy-1/17.png
new file mode 100644
index 0000000..017f9cf
Binary files /dev/null and b/public/media/illustrations/sketchy-1/17.png differ
diff --git a/public/media/illustrations/sketchy-1/18-dark.png b/public/media/illustrations/sketchy-1/18-dark.png
new file mode 100644
index 0000000..3ea09b0
Binary files /dev/null and b/public/media/illustrations/sketchy-1/18-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/18.png b/public/media/illustrations/sketchy-1/18.png
new file mode 100644
index 0000000..66d278b
Binary files /dev/null and b/public/media/illustrations/sketchy-1/18.png differ
diff --git a/public/media/illustrations/sketchy-1/19-dark.png b/public/media/illustrations/sketchy-1/19-dark.png
new file mode 100644
index 0000000..01cb1bc
Binary files /dev/null and b/public/media/illustrations/sketchy-1/19-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/19.png b/public/media/illustrations/sketchy-1/19.png
new file mode 100644
index 0000000..059d621
Binary files /dev/null and b/public/media/illustrations/sketchy-1/19.png differ
diff --git a/public/media/illustrations/sketchy-1/2-dark.png b/public/media/illustrations/sketchy-1/2-dark.png
new file mode 100644
index 0000000..8cf0e9d
Binary files /dev/null and b/public/media/illustrations/sketchy-1/2-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/2.png b/public/media/illustrations/sketchy-1/2.png
new file mode 100644
index 0000000..8cf0e9d
Binary files /dev/null and b/public/media/illustrations/sketchy-1/2.png differ
diff --git a/public/media/illustrations/sketchy-1/20-dark.png b/public/media/illustrations/sketchy-1/20-dark.png
new file mode 100644
index 0000000..bc36a05
Binary files /dev/null and b/public/media/illustrations/sketchy-1/20-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/20.png b/public/media/illustrations/sketchy-1/20.png
new file mode 100644
index 0000000..bc36a05
Binary files /dev/null and b/public/media/illustrations/sketchy-1/20.png differ
diff --git a/public/media/illustrations/sketchy-1/3-dark.png b/public/media/illustrations/sketchy-1/3-dark.png
new file mode 100644
index 0000000..2bc292e
Binary files /dev/null and b/public/media/illustrations/sketchy-1/3-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/3.png b/public/media/illustrations/sketchy-1/3.png
new file mode 100644
index 0000000..2bc292e
Binary files /dev/null and b/public/media/illustrations/sketchy-1/3.png differ
diff --git a/public/media/illustrations/sketchy-1/4-dark.png b/public/media/illustrations/sketchy-1/4-dark.png
new file mode 100644
index 0000000..23392de
Binary files /dev/null and b/public/media/illustrations/sketchy-1/4-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/4.png b/public/media/illustrations/sketchy-1/4.png
new file mode 100644
index 0000000..23392de
Binary files /dev/null and b/public/media/illustrations/sketchy-1/4.png differ
diff --git a/public/media/illustrations/sketchy-1/5-dark.png b/public/media/illustrations/sketchy-1/5-dark.png
new file mode 100644
index 0000000..9fec5d9
Binary files /dev/null and b/public/media/illustrations/sketchy-1/5-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/5.png b/public/media/illustrations/sketchy-1/5.png
new file mode 100644
index 0000000..9fec5d9
Binary files /dev/null and b/public/media/illustrations/sketchy-1/5.png differ
diff --git a/public/media/illustrations/sketchy-1/6-dark.png b/public/media/illustrations/sketchy-1/6-dark.png
new file mode 100644
index 0000000..5061c7e
Binary files /dev/null and b/public/media/illustrations/sketchy-1/6-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/6.png b/public/media/illustrations/sketchy-1/6.png
new file mode 100644
index 0000000..5061c7e
Binary files /dev/null and b/public/media/illustrations/sketchy-1/6.png differ
diff --git a/public/media/illustrations/sketchy-1/7-dark.png b/public/media/illustrations/sketchy-1/7-dark.png
new file mode 100644
index 0000000..86aa33e
Binary files /dev/null and b/public/media/illustrations/sketchy-1/7-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/7.png b/public/media/illustrations/sketchy-1/7.png
new file mode 100644
index 0000000..86aa33e
Binary files /dev/null and b/public/media/illustrations/sketchy-1/7.png differ
diff --git a/public/media/illustrations/sketchy-1/8-dark.png b/public/media/illustrations/sketchy-1/8-dark.png
new file mode 100644
index 0000000..4bd1c1e
Binary files /dev/null and b/public/media/illustrations/sketchy-1/8-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/8.png b/public/media/illustrations/sketchy-1/8.png
new file mode 100644
index 0000000..4bd1c1e
Binary files /dev/null and b/public/media/illustrations/sketchy-1/8.png differ
diff --git a/public/media/illustrations/sketchy-1/9-dark.png b/public/media/illustrations/sketchy-1/9-dark.png
new file mode 100644
index 0000000..5628b75
Binary files /dev/null and b/public/media/illustrations/sketchy-1/9-dark.png differ
diff --git a/public/media/illustrations/sketchy-1/9.png b/public/media/illustrations/sketchy-1/9.png
new file mode 100644
index 0000000..5628b75
Binary files /dev/null and b/public/media/illustrations/sketchy-1/9.png differ
diff --git a/public/media/illustrations/unitedpalms-1/1-dark.png b/public/media/illustrations/unitedpalms-1/1-dark.png
new file mode 100644
index 0000000..ddb1f87
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/1-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/1.png b/public/media/illustrations/unitedpalms-1/1.png
new file mode 100644
index 0000000..c14c1bc
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/1.png differ
diff --git a/public/media/illustrations/unitedpalms-1/10-dark.png b/public/media/illustrations/unitedpalms-1/10-dark.png
new file mode 100644
index 0000000..55eefcb
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/10-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/10.png b/public/media/illustrations/unitedpalms-1/10.png
new file mode 100644
index 0000000..85f7501
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/10.png differ
diff --git a/public/media/illustrations/unitedpalms-1/11-dark.png b/public/media/illustrations/unitedpalms-1/11-dark.png
new file mode 100644
index 0000000..d900f13
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/11-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/11.png b/public/media/illustrations/unitedpalms-1/11.png
new file mode 100644
index 0000000..63266da
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/11.png differ
diff --git a/public/media/illustrations/unitedpalms-1/12-dark.png b/public/media/illustrations/unitedpalms-1/12-dark.png
new file mode 100644
index 0000000..0ed7ad1
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/12-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/12.png b/public/media/illustrations/unitedpalms-1/12.png
new file mode 100644
index 0000000..95ece52
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/12.png differ
diff --git a/public/media/illustrations/unitedpalms-1/13-dark.png b/public/media/illustrations/unitedpalms-1/13-dark.png
new file mode 100644
index 0000000..38132a1
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/13-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/13.png b/public/media/illustrations/unitedpalms-1/13.png
new file mode 100644
index 0000000..542da8b
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/13.png differ
diff --git a/public/media/illustrations/unitedpalms-1/14-dark.png b/public/media/illustrations/unitedpalms-1/14-dark.png
new file mode 100644
index 0000000..6cacfe0
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/14-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/14.png b/public/media/illustrations/unitedpalms-1/14.png
new file mode 100644
index 0000000..312722d
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/14.png differ
diff --git a/public/media/illustrations/unitedpalms-1/15-dark.png b/public/media/illustrations/unitedpalms-1/15-dark.png
new file mode 100644
index 0000000..5a7060b
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/15-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/15.png b/public/media/illustrations/unitedpalms-1/15.png
new file mode 100644
index 0000000..526f6d2
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/15.png differ
diff --git a/public/media/illustrations/unitedpalms-1/16-dark.png b/public/media/illustrations/unitedpalms-1/16-dark.png
new file mode 100644
index 0000000..ca63949
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/16-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/16.png b/public/media/illustrations/unitedpalms-1/16.png
new file mode 100644
index 0000000..f0e3735
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/16.png differ
diff --git a/public/media/illustrations/unitedpalms-1/17-dark.png b/public/media/illustrations/unitedpalms-1/17-dark.png
new file mode 100644
index 0000000..74b8547
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/17-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/17.png b/public/media/illustrations/unitedpalms-1/17.png
new file mode 100644
index 0000000..5eb9d8b
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/17.png differ
diff --git a/public/media/illustrations/unitedpalms-1/18-dark.png b/public/media/illustrations/unitedpalms-1/18-dark.png
new file mode 100644
index 0000000..8018cf7
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/18-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/18.png b/public/media/illustrations/unitedpalms-1/18.png
new file mode 100644
index 0000000..b711721
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/18.png differ
diff --git a/public/media/illustrations/unitedpalms-1/19-dark.png b/public/media/illustrations/unitedpalms-1/19-dark.png
new file mode 100644
index 0000000..1c9020c
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/19-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/19.png b/public/media/illustrations/unitedpalms-1/19.png
new file mode 100644
index 0000000..1d912cd
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/19.png differ
diff --git a/public/media/illustrations/unitedpalms-1/2-dark.png b/public/media/illustrations/unitedpalms-1/2-dark.png
new file mode 100644
index 0000000..5a3e155
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/2-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/2.png b/public/media/illustrations/unitedpalms-1/2.png
new file mode 100644
index 0000000..cb54b6a
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/2.png differ
diff --git a/public/media/illustrations/unitedpalms-1/20-dark.png b/public/media/illustrations/unitedpalms-1/20-dark.png
new file mode 100644
index 0000000..a318fa5
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/20-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/20.png b/public/media/illustrations/unitedpalms-1/20.png
new file mode 100644
index 0000000..b44ee20
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/20.png differ
diff --git a/public/media/illustrations/unitedpalms-1/3-dark.png b/public/media/illustrations/unitedpalms-1/3-dark.png
new file mode 100644
index 0000000..4116c2e
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/3-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/3.png b/public/media/illustrations/unitedpalms-1/3.png
new file mode 100644
index 0000000..fb4822d
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/3.png differ
diff --git a/public/media/illustrations/unitedpalms-1/4-dark.png b/public/media/illustrations/unitedpalms-1/4-dark.png
new file mode 100644
index 0000000..7363463
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/4-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/4.png b/public/media/illustrations/unitedpalms-1/4.png
new file mode 100644
index 0000000..5b0fd92
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/4.png differ
diff --git a/public/media/illustrations/unitedpalms-1/5-dark.png b/public/media/illustrations/unitedpalms-1/5-dark.png
new file mode 100644
index 0000000..2b24825
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/5-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/5.png b/public/media/illustrations/unitedpalms-1/5.png
new file mode 100644
index 0000000..0f10a13
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/5.png differ
diff --git a/public/media/illustrations/unitedpalms-1/6-dark.png b/public/media/illustrations/unitedpalms-1/6-dark.png
new file mode 100644
index 0000000..45a2efe
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/6-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/6.png b/public/media/illustrations/unitedpalms-1/6.png
new file mode 100644
index 0000000..2b7872e
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/6.png differ
diff --git a/public/media/illustrations/unitedpalms-1/7-dark.png b/public/media/illustrations/unitedpalms-1/7-dark.png
new file mode 100644
index 0000000..6929853
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/7-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/7.png b/public/media/illustrations/unitedpalms-1/7.png
new file mode 100644
index 0000000..756157b
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/7.png differ
diff --git a/public/media/illustrations/unitedpalms-1/8-dark.png b/public/media/illustrations/unitedpalms-1/8-dark.png
new file mode 100644
index 0000000..5a0c18a
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/8-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/8.png b/public/media/illustrations/unitedpalms-1/8.png
new file mode 100644
index 0000000..57719a4
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/8.png differ
diff --git a/public/media/illustrations/unitedpalms-1/9-dark.png b/public/media/illustrations/unitedpalms-1/9-dark.png
new file mode 100644
index 0000000..796af50
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/9-dark.png differ
diff --git a/public/media/illustrations/unitedpalms-1/9.png b/public/media/illustrations/unitedpalms-1/9.png
new file mode 100644
index 0000000..7fc84cf
Binary files /dev/null and b/public/media/illustrations/unitedpalms-1/9.png differ
diff --git a/public/media/logos/custom-1.png b/public/media/logos/custom-1.png
new file mode 100644
index 0000000..bf7b4d2
Binary files /dev/null and b/public/media/logos/custom-1.png differ
diff --git a/public/media/logos/custom-2.svg b/public/media/logos/custom-2.svg
new file mode 100644
index 0000000..e86088a
--- /dev/null
+++ b/public/media/logos/custom-2.svg
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/logos/custom-3.svg b/public/media/logos/custom-3.svg
new file mode 100644
index 0000000..b7978d7
--- /dev/null
+++ b/public/media/logos/custom-3.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/logos/default-dark.svg b/public/media/logos/default-dark.svg
new file mode 100644
index 0000000..b290e71
--- /dev/null
+++ b/public/media/logos/default-dark.svg
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/logos/default-large.svg b/public/media/logos/default-large.svg
new file mode 100644
index 0000000..9eaf21e
--- /dev/null
+++ b/public/media/logos/default-large.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/logos/default-small.svg b/public/media/logos/default-small.svg
new file mode 100644
index 0000000..eecc771
--- /dev/null
+++ b/public/media/logos/default-small.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/logos/default.svg b/public/media/logos/default.svg
new file mode 100644
index 0000000..75f84cf
--- /dev/null
+++ b/public/media/logos/default.svg
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/logos/favicon.ico b/public/media/logos/favicon.ico
new file mode 100644
index 0000000..94838e5
Binary files /dev/null and b/public/media/logos/favicon.ico differ
diff --git a/public/media/logos/landing-dark.svg b/public/media/logos/landing-dark.svg
new file mode 100644
index 0000000..66e2390
--- /dev/null
+++ b/public/media/logos/landing-dark.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/logos/landing.svg b/public/media/logos/landing.svg
new file mode 100644
index 0000000..9c7ff28
--- /dev/null
+++ b/public/media/logos/landing.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/images/logo.png b/public/media/logos/logo.png
similarity index 100%
rename from public/images/logo.png
rename to public/media/logos/logo.png
diff --git a/public/media/logos/mail.svg b/public/media/logos/mail.svg
new file mode 100644
index 0000000..75f84cf
--- /dev/null
+++ b/public/media/logos/mail.svg
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/misc/auth-bg.png b/public/media/misc/auth-bg.png
new file mode 100644
index 0000000..8dd1a52
Binary files /dev/null and b/public/media/misc/auth-bg.png differ
diff --git a/public/media/misc/auth-screens.png b/public/media/misc/auth-screens.png
new file mode 100644
index 0000000..149e646
Binary files /dev/null and b/public/media/misc/auth-screens.png differ
diff --git a/public/media/misc/bg-2.jpg b/public/media/misc/bg-2.jpg
new file mode 100644
index 0000000..378e7ee
Binary files /dev/null and b/public/media/misc/bg-2.jpg differ
diff --git a/public/media/misc/city.png b/public/media/misc/city.png
new file mode 100644
index 0000000..8eeff26
Binary files /dev/null and b/public/media/misc/city.png differ
diff --git a/public/media/misc/image.png b/public/media/misc/image.png
new file mode 100644
index 0000000..5e01b1e
Binary files /dev/null and b/public/media/misc/image.png differ
diff --git a/public/media/misc/layout/dark-header.png b/public/media/misc/layout/dark-header.png
new file mode 100644
index 0000000..5eab3c6
Binary files /dev/null and b/public/media/misc/layout/dark-header.png differ
diff --git a/public/media/misc/layout/dark-sidebar.png b/public/media/misc/layout/dark-sidebar.png
new file mode 100644
index 0000000..82ab02c
Binary files /dev/null and b/public/media/misc/layout/dark-sidebar.png differ
diff --git a/public/media/misc/layout/dark.png b/public/media/misc/layout/dark.png
new file mode 100644
index 0000000..4e60f0a
Binary files /dev/null and b/public/media/misc/layout/dark.png differ
diff --git a/public/media/misc/layout/header-bg.jpg b/public/media/misc/layout/header-bg.jpg
new file mode 100644
index 0000000..2e29270
Binary files /dev/null and b/public/media/misc/layout/header-bg.jpg differ
diff --git a/public/media/misc/layout/light-header.png b/public/media/misc/layout/light-header.png
new file mode 100644
index 0000000..07ce873
Binary files /dev/null and b/public/media/misc/layout/light-header.png differ
diff --git a/public/media/misc/layout/light-sidebar.png b/public/media/misc/layout/light-sidebar.png
new file mode 100644
index 0000000..7abff3e
Binary files /dev/null and b/public/media/misc/layout/light-sidebar.png differ
diff --git a/public/media/misc/layout/light.png b/public/media/misc/layout/light.png
new file mode 100644
index 0000000..6c039df
Binary files /dev/null and b/public/media/misc/layout/light.png differ
diff --git a/public/media/misc/layout/toolbar-accounting.png b/public/media/misc/layout/toolbar-accounting.png
new file mode 100644
index 0000000..12bafd7
Binary files /dev/null and b/public/media/misc/layout/toolbar-accounting.png differ
diff --git a/public/media/misc/layout/toolbar-classic.png b/public/media/misc/layout/toolbar-classic.png
new file mode 100644
index 0000000..1100532
Binary files /dev/null and b/public/media/misc/layout/toolbar-classic.png differ
diff --git a/public/media/misc/layout/toolbar-extended.png b/public/media/misc/layout/toolbar-extended.png
new file mode 100644
index 0000000..9746a5b
Binary files /dev/null and b/public/media/misc/layout/toolbar-extended.png differ
diff --git a/public/media/misc/layout/toolbar-reports.png b/public/media/misc/layout/toolbar-reports.png
new file mode 100644
index 0000000..33bf561
Binary files /dev/null and b/public/media/misc/layout/toolbar-reports.png differ
diff --git a/public/media/misc/layout/toolbar-saas.png b/public/media/misc/layout/toolbar-saas.png
new file mode 100644
index 0000000..7426ea1
Binary files /dev/null and b/public/media/misc/layout/toolbar-saas.png differ
diff --git a/public/media/misc/menu-header-bg.jpg b/public/media/misc/menu-header-bg.jpg
new file mode 100644
index 0000000..447eea1
Binary files /dev/null and b/public/media/misc/menu-header-bg.jpg differ
diff --git a/public/media/misc/menu-header-dark.png b/public/media/misc/menu-header-dark.png
new file mode 100644
index 0000000..840e282
Binary files /dev/null and b/public/media/misc/menu-header-dark.png differ
diff --git a/public/media/misc/outdoor.png b/public/media/misc/outdoor.png
new file mode 100644
index 0000000..eda4264
Binary files /dev/null and b/public/media/misc/outdoor.png differ
diff --git a/public/media/misc/pattern-2.png b/public/media/misc/pattern-2.png
new file mode 100644
index 0000000..a273dd4
Binary files /dev/null and b/public/media/misc/pattern-2.png differ
diff --git a/public/media/misc/pattern-4.jpg b/public/media/misc/pattern-4.jpg
new file mode 100644
index 0000000..1bc5876
Binary files /dev/null and b/public/media/misc/pattern-4.jpg differ
diff --git a/public/media/misc/portfolio.png b/public/media/misc/portfolio.png
new file mode 100644
index 0000000..434de64
Binary files /dev/null and b/public/media/misc/portfolio.png differ
diff --git a/public/media/misc/preview-1.jpg b/public/media/misc/preview-1.jpg
new file mode 100644
index 0000000..dce31ef
Binary files /dev/null and b/public/media/misc/preview-1.jpg differ
diff --git a/public/media/misc/preview-2.jpg b/public/media/misc/preview-2.jpg
new file mode 100644
index 0000000..5047279
Binary files /dev/null and b/public/media/misc/preview-2.jpg differ
diff --git a/public/media/misc/preview-3.jpg b/public/media/misc/preview-3.jpg
new file mode 100644
index 0000000..f457a00
Binary files /dev/null and b/public/media/misc/preview-3.jpg differ
diff --git a/public/media/misc/profile-head-bg.jpg b/public/media/misc/profile-head-bg.jpg
new file mode 100644
index 0000000..5a45a7d
Binary files /dev/null and b/public/media/misc/profile-head-bg.jpg differ
diff --git a/public/media/misc/qr-code.png b/public/media/misc/qr-code.png
new file mode 100644
index 0000000..59d927a
Binary files /dev/null and b/public/media/misc/qr-code.png differ
diff --git a/public/media/misc/qr.png b/public/media/misc/qr.png
new file mode 100644
index 0000000..d954e14
Binary files /dev/null and b/public/media/misc/qr.png differ
diff --git a/public/media/misc/search-bg.png b/public/media/misc/search-bg.png
new file mode 100644
index 0000000..a273dd4
Binary files /dev/null and b/public/media/misc/search-bg.png differ
diff --git a/public/media/misc/track-order.png b/public/media/misc/track-order.png
new file mode 100644
index 0000000..19619e7
Binary files /dev/null and b/public/media/misc/track-order.png differ
diff --git a/public/media/patterns/pattern-1.jpg b/public/media/patterns/pattern-1.jpg
new file mode 100644
index 0000000..9a661aa
Binary files /dev/null and b/public/media/patterns/pattern-1.jpg differ
diff --git a/public/media/patterns/vector-1.png b/public/media/patterns/vector-1.png
new file mode 100644
index 0000000..e4f29a2
Binary files /dev/null and b/public/media/patterns/vector-1.png differ
diff --git a/public/media/plugins/jstree/32px.png b/public/media/plugins/jstree/32px.png
new file mode 100644
index 0000000..4bc79e6
Binary files /dev/null and b/public/media/plugins/jstree/32px.png differ
diff --git a/public/media/product-demos/demo1.png b/public/media/product-demos/demo1.png
new file mode 100644
index 0000000..c17352b
Binary files /dev/null and b/public/media/product-demos/demo1.png differ
diff --git a/public/media/product-demos/demo2.png b/public/media/product-demos/demo2.png
new file mode 100644
index 0000000..b1ce559
Binary files /dev/null and b/public/media/product-demos/demo2.png differ
diff --git a/public/media/product-demos/demo3.png b/public/media/product-demos/demo3.png
new file mode 100644
index 0000000..a960fb5
Binary files /dev/null and b/public/media/product-demos/demo3.png differ
diff --git a/public/media/product-demos/demo4.png b/public/media/product-demos/demo4.png
new file mode 100644
index 0000000..bef7d59
Binary files /dev/null and b/public/media/product-demos/demo4.png differ
diff --git a/public/media/product-demos/demo5.png b/public/media/product-demos/demo5.png
new file mode 100644
index 0000000..3df3172
Binary files /dev/null and b/public/media/product-demos/demo5.png differ
diff --git a/public/media/product/1.svg b/public/media/product/1.svg
new file mode 100644
index 0000000..dba5d4b
--- /dev/null
+++ b/public/media/product/1.svg
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/product/2.svg b/public/media/product/2.svg
new file mode 100644
index 0000000..68f2823
--- /dev/null
+++ b/public/media/product/2.svg
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/product/3.svg b/public/media/product/3.svg
new file mode 100644
index 0000000..09527ab
--- /dev/null
+++ b/public/media/product/3.svg
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/product/5.svg b/public/media/product/5.svg
new file mode 100644
index 0000000..7b89061
--- /dev/null
+++ b/public/media/product/5.svg
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/products/1.png b/public/media/products/1.png
new file mode 100644
index 0000000..3fe1fa0
Binary files /dev/null and b/public/media/products/1.png differ
diff --git a/public/media/products/10.png b/public/media/products/10.png
new file mode 100644
index 0000000..5144576
Binary files /dev/null and b/public/media/products/10.png differ
diff --git a/public/media/products/11.png b/public/media/products/11.png
new file mode 100644
index 0000000..5d519a6
Binary files /dev/null and b/public/media/products/11.png differ
diff --git a/public/media/products/12.png b/public/media/products/12.png
new file mode 100644
index 0000000..38c1154
Binary files /dev/null and b/public/media/products/12.png differ
diff --git a/public/media/products/13.png b/public/media/products/13.png
new file mode 100644
index 0000000..828b570
Binary files /dev/null and b/public/media/products/13.png differ
diff --git a/public/media/products/14.png b/public/media/products/14.png
new file mode 100644
index 0000000..ccb46b8
Binary files /dev/null and b/public/media/products/14.png differ
diff --git a/public/media/products/15.png b/public/media/products/15.png
new file mode 100644
index 0000000..d68c6f0
Binary files /dev/null and b/public/media/products/15.png differ
diff --git a/public/media/products/16.png b/public/media/products/16.png
new file mode 100644
index 0000000..3106b91
Binary files /dev/null and b/public/media/products/16.png differ
diff --git a/public/media/products/17.png b/public/media/products/17.png
new file mode 100644
index 0000000..ad455f8
Binary files /dev/null and b/public/media/products/17.png differ
diff --git a/public/media/products/18.png b/public/media/products/18.png
new file mode 100644
index 0000000..71d6a6c
Binary files /dev/null and b/public/media/products/18.png differ
diff --git a/public/media/products/19.png b/public/media/products/19.png
new file mode 100644
index 0000000..3cc4ab2
Binary files /dev/null and b/public/media/products/19.png differ
diff --git a/public/media/products/2.png b/public/media/products/2.png
new file mode 100644
index 0000000..f1f352b
Binary files /dev/null and b/public/media/products/2.png differ
diff --git a/public/media/products/20.png b/public/media/products/20.png
new file mode 100644
index 0000000..f1c4fa6
Binary files /dev/null and b/public/media/products/20.png differ
diff --git a/public/media/products/21.png b/public/media/products/21.png
new file mode 100644
index 0000000..ff98f55
Binary files /dev/null and b/public/media/products/21.png differ
diff --git a/public/media/products/22.png b/public/media/products/22.png
new file mode 100644
index 0000000..61f5311
Binary files /dev/null and b/public/media/products/22.png differ
diff --git a/public/media/products/3.png b/public/media/products/3.png
new file mode 100644
index 0000000..9d977e5
Binary files /dev/null and b/public/media/products/3.png differ
diff --git a/public/media/products/4.png b/public/media/products/4.png
new file mode 100644
index 0000000..5238f9c
Binary files /dev/null and b/public/media/products/4.png differ
diff --git a/public/media/products/5.png b/public/media/products/5.png
new file mode 100644
index 0000000..94203a1
Binary files /dev/null and b/public/media/products/5.png differ
diff --git a/public/media/products/6.png b/public/media/products/6.png
new file mode 100644
index 0000000..a973d21
Binary files /dev/null and b/public/media/products/6.png differ
diff --git a/public/media/products/7.png b/public/media/products/7.png
new file mode 100644
index 0000000..f89b157
Binary files /dev/null and b/public/media/products/7.png differ
diff --git a/public/media/products/8.png b/public/media/products/8.png
new file mode 100644
index 0000000..fdd567f
Binary files /dev/null and b/public/media/products/8.png differ
diff --git a/public/media/products/9.png b/public/media/products/9.png
new file mode 100644
index 0000000..5756c81
Binary files /dev/null and b/public/media/products/9.png differ
diff --git a/public/media/smiles/happy.png b/public/media/smiles/happy.png
new file mode 100644
index 0000000..69e9a55
Binary files /dev/null and b/public/media/smiles/happy.png differ
diff --git a/public/media/smiles/sad.png b/public/media/smiles/sad.png
new file mode 100644
index 0000000..b6d70fd
Binary files /dev/null and b/public/media/smiles/sad.png differ
diff --git a/public/media/smiles/shocked.png b/public/media/smiles/shocked.png
new file mode 100644
index 0000000..5b63c9c
Binary files /dev/null and b/public/media/smiles/shocked.png differ
diff --git a/public/media/stock/1600x800/img-1.jpg b/public/media/stock/1600x800/img-1.jpg
new file mode 100644
index 0000000..fb46699
Binary files /dev/null and b/public/media/stock/1600x800/img-1.jpg differ
diff --git a/public/media/stock/1600x800/img-2.jpg b/public/media/stock/1600x800/img-2.jpg
new file mode 100644
index 0000000..6ed2747
Binary files /dev/null and b/public/media/stock/1600x800/img-2.jpg differ
diff --git a/public/media/stock/1600x800/img-3.jpg b/public/media/stock/1600x800/img-3.jpg
new file mode 100644
index 0000000..673619d
Binary files /dev/null and b/public/media/stock/1600x800/img-3.jpg differ
diff --git a/public/media/stock/1600x800/img-4.jpg b/public/media/stock/1600x800/img-4.jpg
new file mode 100644
index 0000000..4aaeba8
Binary files /dev/null and b/public/media/stock/1600x800/img-4.jpg differ
diff --git a/public/media/stock/500x600/img-1.jpg b/public/media/stock/500x600/img-1.jpg
new file mode 100644
index 0000000..7633734
Binary files /dev/null and b/public/media/stock/500x600/img-1.jpg differ
diff --git a/public/media/stock/600x400/img-1.jpg b/public/media/stock/600x400/img-1.jpg
new file mode 100644
index 0000000..a4cf1c7
Binary files /dev/null and b/public/media/stock/600x400/img-1.jpg differ
diff --git a/public/media/stock/600x400/img-10.jpg b/public/media/stock/600x400/img-10.jpg
new file mode 100644
index 0000000..a43517e
Binary files /dev/null and b/public/media/stock/600x400/img-10.jpg differ
diff --git a/public/media/stock/600x400/img-11.jpg b/public/media/stock/600x400/img-11.jpg
new file mode 100644
index 0000000..9a7e2f6
Binary files /dev/null and b/public/media/stock/600x400/img-11.jpg differ
diff --git a/public/media/stock/600x400/img-12.jpg b/public/media/stock/600x400/img-12.jpg
new file mode 100644
index 0000000..7e88d26
Binary files /dev/null and b/public/media/stock/600x400/img-12.jpg differ
diff --git a/public/media/stock/600x400/img-13.jpg b/public/media/stock/600x400/img-13.jpg
new file mode 100644
index 0000000..e3301fa
Binary files /dev/null and b/public/media/stock/600x400/img-13.jpg differ
diff --git a/public/media/stock/600x400/img-14.jpg b/public/media/stock/600x400/img-14.jpg
new file mode 100644
index 0000000..4a118c1
Binary files /dev/null and b/public/media/stock/600x400/img-14.jpg differ
diff --git a/public/media/stock/600x400/img-15.jpg b/public/media/stock/600x400/img-15.jpg
new file mode 100644
index 0000000..6d2b247
Binary files /dev/null and b/public/media/stock/600x400/img-15.jpg differ
diff --git a/public/media/stock/600x400/img-16.jpg b/public/media/stock/600x400/img-16.jpg
new file mode 100644
index 0000000..caa20dc
Binary files /dev/null and b/public/media/stock/600x400/img-16.jpg differ
diff --git a/public/media/stock/600x400/img-17.jpg b/public/media/stock/600x400/img-17.jpg
new file mode 100644
index 0000000..fb7539d
Binary files /dev/null and b/public/media/stock/600x400/img-17.jpg differ
diff --git a/public/media/stock/600x400/img-18.jpg b/public/media/stock/600x400/img-18.jpg
new file mode 100644
index 0000000..11c69e0
Binary files /dev/null and b/public/media/stock/600x400/img-18.jpg differ
diff --git a/public/media/stock/600x400/img-19.jpg b/public/media/stock/600x400/img-19.jpg
new file mode 100644
index 0000000..459f1f6
Binary files /dev/null and b/public/media/stock/600x400/img-19.jpg differ
diff --git a/public/media/stock/600x400/img-2.jpg b/public/media/stock/600x400/img-2.jpg
new file mode 100644
index 0000000..fd538bf
Binary files /dev/null and b/public/media/stock/600x400/img-2.jpg differ
diff --git a/public/media/stock/600x400/img-20.jpg b/public/media/stock/600x400/img-20.jpg
new file mode 100644
index 0000000..633399a
Binary files /dev/null and b/public/media/stock/600x400/img-20.jpg differ
diff --git a/public/media/stock/600x400/img-21.jpg b/public/media/stock/600x400/img-21.jpg
new file mode 100644
index 0000000..d3c78be
Binary files /dev/null and b/public/media/stock/600x400/img-21.jpg differ
diff --git a/public/media/stock/600x400/img-22.jpg b/public/media/stock/600x400/img-22.jpg
new file mode 100644
index 0000000..6729e7f
Binary files /dev/null and b/public/media/stock/600x400/img-22.jpg differ
diff --git a/public/media/stock/600x400/img-23.jpg b/public/media/stock/600x400/img-23.jpg
new file mode 100644
index 0000000..e619f19
Binary files /dev/null and b/public/media/stock/600x400/img-23.jpg differ
diff --git a/public/media/stock/600x400/img-24.jpg b/public/media/stock/600x400/img-24.jpg
new file mode 100644
index 0000000..11091ed
Binary files /dev/null and b/public/media/stock/600x400/img-24.jpg differ
diff --git a/public/media/stock/600x400/img-25.jpg b/public/media/stock/600x400/img-25.jpg
new file mode 100644
index 0000000..bd94d35
Binary files /dev/null and b/public/media/stock/600x400/img-25.jpg differ
diff --git a/public/media/stock/600x400/img-26.jpg b/public/media/stock/600x400/img-26.jpg
new file mode 100644
index 0000000..ff2ee36
Binary files /dev/null and b/public/media/stock/600x400/img-26.jpg differ
diff --git a/public/media/stock/600x400/img-27.jpg b/public/media/stock/600x400/img-27.jpg
new file mode 100644
index 0000000..408ebf2
Binary files /dev/null and b/public/media/stock/600x400/img-27.jpg differ
diff --git a/public/media/stock/600x400/img-28.jpg b/public/media/stock/600x400/img-28.jpg
new file mode 100644
index 0000000..430cce7
Binary files /dev/null and b/public/media/stock/600x400/img-28.jpg differ
diff --git a/public/media/stock/600x400/img-29.jpg b/public/media/stock/600x400/img-29.jpg
new file mode 100644
index 0000000..4da3410
Binary files /dev/null and b/public/media/stock/600x400/img-29.jpg differ
diff --git a/public/media/stock/600x400/img-3.jpg b/public/media/stock/600x400/img-3.jpg
new file mode 100644
index 0000000..27901dd
Binary files /dev/null and b/public/media/stock/600x400/img-3.jpg differ
diff --git a/public/media/stock/600x400/img-30.jpg b/public/media/stock/600x400/img-30.jpg
new file mode 100644
index 0000000..3377599
Binary files /dev/null and b/public/media/stock/600x400/img-30.jpg differ
diff --git a/public/media/stock/600x400/img-31.jpg b/public/media/stock/600x400/img-31.jpg
new file mode 100644
index 0000000..64c1fda
Binary files /dev/null and b/public/media/stock/600x400/img-31.jpg differ
diff --git a/public/media/stock/600x400/img-32.jpg b/public/media/stock/600x400/img-32.jpg
new file mode 100644
index 0000000..160b7f9
Binary files /dev/null and b/public/media/stock/600x400/img-32.jpg differ
diff --git a/public/media/stock/600x400/img-33.jpg b/public/media/stock/600x400/img-33.jpg
new file mode 100644
index 0000000..19f9228
Binary files /dev/null and b/public/media/stock/600x400/img-33.jpg differ
diff --git a/public/media/stock/600x400/img-34.jpg b/public/media/stock/600x400/img-34.jpg
new file mode 100644
index 0000000..0db4278
Binary files /dev/null and b/public/media/stock/600x400/img-34.jpg differ
diff --git a/public/media/stock/600x400/img-35.jpg b/public/media/stock/600x400/img-35.jpg
new file mode 100644
index 0000000..1688d66
Binary files /dev/null and b/public/media/stock/600x400/img-35.jpg differ
diff --git a/public/media/stock/600x400/img-36.jpg b/public/media/stock/600x400/img-36.jpg
new file mode 100644
index 0000000..531cc75
Binary files /dev/null and b/public/media/stock/600x400/img-36.jpg differ
diff --git a/public/media/stock/600x400/img-37.jpg b/public/media/stock/600x400/img-37.jpg
new file mode 100644
index 0000000..60be533
Binary files /dev/null and b/public/media/stock/600x400/img-37.jpg differ
diff --git a/public/media/stock/600x400/img-38.jpg b/public/media/stock/600x400/img-38.jpg
new file mode 100644
index 0000000..fb80fef
Binary files /dev/null and b/public/media/stock/600x400/img-38.jpg differ
diff --git a/public/media/stock/600x400/img-39.jpg b/public/media/stock/600x400/img-39.jpg
new file mode 100644
index 0000000..a0eadc3
Binary files /dev/null and b/public/media/stock/600x400/img-39.jpg differ
diff --git a/public/media/stock/600x400/img-4.jpg b/public/media/stock/600x400/img-4.jpg
new file mode 100644
index 0000000..7dc30c4
Binary files /dev/null and b/public/media/stock/600x400/img-4.jpg differ
diff --git a/public/media/stock/600x400/img-40.jpg b/public/media/stock/600x400/img-40.jpg
new file mode 100644
index 0000000..288f6d1
Binary files /dev/null and b/public/media/stock/600x400/img-40.jpg differ
diff --git a/public/media/stock/600x400/img-41.jpg b/public/media/stock/600x400/img-41.jpg
new file mode 100644
index 0000000..a353294
Binary files /dev/null and b/public/media/stock/600x400/img-41.jpg differ
diff --git a/public/media/stock/600x400/img-42.jpg b/public/media/stock/600x400/img-42.jpg
new file mode 100644
index 0000000..707c570
Binary files /dev/null and b/public/media/stock/600x400/img-42.jpg differ
diff --git a/public/media/stock/600x400/img-43.jpg b/public/media/stock/600x400/img-43.jpg
new file mode 100644
index 0000000..6f4a793
Binary files /dev/null and b/public/media/stock/600x400/img-43.jpg differ
diff --git a/public/media/stock/600x400/img-44.jpg b/public/media/stock/600x400/img-44.jpg
new file mode 100644
index 0000000..8a38363
Binary files /dev/null and b/public/media/stock/600x400/img-44.jpg differ
diff --git a/public/media/stock/600x400/img-45.jpg b/public/media/stock/600x400/img-45.jpg
new file mode 100644
index 0000000..aa7bbbb
Binary files /dev/null and b/public/media/stock/600x400/img-45.jpg differ
diff --git a/public/media/stock/600x400/img-46.jpg b/public/media/stock/600x400/img-46.jpg
new file mode 100644
index 0000000..9cc4b9f
Binary files /dev/null and b/public/media/stock/600x400/img-46.jpg differ
diff --git a/public/media/stock/600x400/img-47.jpg b/public/media/stock/600x400/img-47.jpg
new file mode 100644
index 0000000..e7ea5e3
Binary files /dev/null and b/public/media/stock/600x400/img-47.jpg differ
diff --git a/public/media/stock/600x400/img-48.jpg b/public/media/stock/600x400/img-48.jpg
new file mode 100644
index 0000000..1ed84e6
Binary files /dev/null and b/public/media/stock/600x400/img-48.jpg differ
diff --git a/public/media/stock/600x400/img-49.jpg b/public/media/stock/600x400/img-49.jpg
new file mode 100644
index 0000000..b135e70
Binary files /dev/null and b/public/media/stock/600x400/img-49.jpg differ
diff --git a/public/media/stock/600x400/img-5.jpg b/public/media/stock/600x400/img-5.jpg
new file mode 100644
index 0000000..8e7d59d
Binary files /dev/null and b/public/media/stock/600x400/img-5.jpg differ
diff --git a/public/media/stock/600x400/img-50.jpg b/public/media/stock/600x400/img-50.jpg
new file mode 100644
index 0000000..a25e5ec
Binary files /dev/null and b/public/media/stock/600x400/img-50.jpg differ
diff --git a/public/media/stock/600x400/img-51.jpg b/public/media/stock/600x400/img-51.jpg
new file mode 100644
index 0000000..19ef111
Binary files /dev/null and b/public/media/stock/600x400/img-51.jpg differ
diff --git a/public/media/stock/600x400/img-52.jpg b/public/media/stock/600x400/img-52.jpg
new file mode 100644
index 0000000..e60d5eb
Binary files /dev/null and b/public/media/stock/600x400/img-52.jpg differ
diff --git a/public/media/stock/600x400/img-53.jpg b/public/media/stock/600x400/img-53.jpg
new file mode 100644
index 0000000..32ae826
Binary files /dev/null and b/public/media/stock/600x400/img-53.jpg differ
diff --git a/public/media/stock/600x400/img-54.jpg b/public/media/stock/600x400/img-54.jpg
new file mode 100644
index 0000000..601581e
Binary files /dev/null and b/public/media/stock/600x400/img-54.jpg differ
diff --git a/public/media/stock/600x400/img-55.jpg b/public/media/stock/600x400/img-55.jpg
new file mode 100644
index 0000000..f0026d2
Binary files /dev/null and b/public/media/stock/600x400/img-55.jpg differ
diff --git a/public/media/stock/600x400/img-56.jpg b/public/media/stock/600x400/img-56.jpg
new file mode 100644
index 0000000..ea2eb50
Binary files /dev/null and b/public/media/stock/600x400/img-56.jpg differ
diff --git a/public/media/stock/600x400/img-57.jpg b/public/media/stock/600x400/img-57.jpg
new file mode 100644
index 0000000..ba6f52d
Binary files /dev/null and b/public/media/stock/600x400/img-57.jpg differ
diff --git a/public/media/stock/600x400/img-58.jpg b/public/media/stock/600x400/img-58.jpg
new file mode 100644
index 0000000..dba6145
Binary files /dev/null and b/public/media/stock/600x400/img-58.jpg differ
diff --git a/public/media/stock/600x400/img-59.jpg b/public/media/stock/600x400/img-59.jpg
new file mode 100644
index 0000000..be87d1c
Binary files /dev/null and b/public/media/stock/600x400/img-59.jpg differ
diff --git a/public/media/stock/600x400/img-6.jpg b/public/media/stock/600x400/img-6.jpg
new file mode 100644
index 0000000..326d6e9
Binary files /dev/null and b/public/media/stock/600x400/img-6.jpg differ
diff --git a/public/media/stock/600x400/img-60.jpg b/public/media/stock/600x400/img-60.jpg
new file mode 100644
index 0000000..a5ba93f
Binary files /dev/null and b/public/media/stock/600x400/img-60.jpg differ
diff --git a/public/media/stock/600x400/img-61.jpg b/public/media/stock/600x400/img-61.jpg
new file mode 100644
index 0000000..3387456
Binary files /dev/null and b/public/media/stock/600x400/img-61.jpg differ
diff --git a/public/media/stock/600x400/img-62.jpg b/public/media/stock/600x400/img-62.jpg
new file mode 100644
index 0000000..99fd32c
Binary files /dev/null and b/public/media/stock/600x400/img-62.jpg differ
diff --git a/public/media/stock/600x400/img-63.jpg b/public/media/stock/600x400/img-63.jpg
new file mode 100644
index 0000000..efd6233
Binary files /dev/null and b/public/media/stock/600x400/img-63.jpg differ
diff --git a/public/media/stock/600x400/img-64.jpg b/public/media/stock/600x400/img-64.jpg
new file mode 100644
index 0000000..a682775
Binary files /dev/null and b/public/media/stock/600x400/img-64.jpg differ
diff --git a/public/media/stock/600x400/img-65.jpg b/public/media/stock/600x400/img-65.jpg
new file mode 100644
index 0000000..4e9fe41
Binary files /dev/null and b/public/media/stock/600x400/img-65.jpg differ
diff --git a/public/media/stock/600x400/img-66.jpg b/public/media/stock/600x400/img-66.jpg
new file mode 100644
index 0000000..77f3aa6
Binary files /dev/null and b/public/media/stock/600x400/img-66.jpg differ
diff --git a/public/media/stock/600x400/img-67.jpg b/public/media/stock/600x400/img-67.jpg
new file mode 100644
index 0000000..d143778
Binary files /dev/null and b/public/media/stock/600x400/img-67.jpg differ
diff --git a/public/media/stock/600x400/img-68.jpg b/public/media/stock/600x400/img-68.jpg
new file mode 100644
index 0000000..846502c
Binary files /dev/null and b/public/media/stock/600x400/img-68.jpg differ
diff --git a/public/media/stock/600x400/img-69.jpg b/public/media/stock/600x400/img-69.jpg
new file mode 100644
index 0000000..fb14ef0
Binary files /dev/null and b/public/media/stock/600x400/img-69.jpg differ
diff --git a/public/media/stock/600x400/img-7.jpg b/public/media/stock/600x400/img-7.jpg
new file mode 100644
index 0000000..8804a83
Binary files /dev/null and b/public/media/stock/600x400/img-7.jpg differ
diff --git a/public/media/stock/600x400/img-70.jpg b/public/media/stock/600x400/img-70.jpg
new file mode 100644
index 0000000..b14eade
Binary files /dev/null and b/public/media/stock/600x400/img-70.jpg differ
diff --git a/public/media/stock/600x400/img-71.jpg b/public/media/stock/600x400/img-71.jpg
new file mode 100644
index 0000000..daf3903
Binary files /dev/null and b/public/media/stock/600x400/img-71.jpg differ
diff --git a/public/media/stock/600x400/img-72.jpg b/public/media/stock/600x400/img-72.jpg
new file mode 100644
index 0000000..beb4859
Binary files /dev/null and b/public/media/stock/600x400/img-72.jpg differ
diff --git a/public/media/stock/600x400/img-73.jpg b/public/media/stock/600x400/img-73.jpg
new file mode 100644
index 0000000..7e79000
Binary files /dev/null and b/public/media/stock/600x400/img-73.jpg differ
diff --git a/public/media/stock/600x400/img-74.jpg b/public/media/stock/600x400/img-74.jpg
new file mode 100644
index 0000000..b22920f
Binary files /dev/null and b/public/media/stock/600x400/img-74.jpg differ
diff --git a/public/media/stock/600x400/img-75-dark.jpg b/public/media/stock/600x400/img-75-dark.jpg
new file mode 100644
index 0000000..5922ed8
Binary files /dev/null and b/public/media/stock/600x400/img-75-dark.jpg differ
diff --git a/public/media/stock/600x400/img-75.jpg b/public/media/stock/600x400/img-75.jpg
new file mode 100644
index 0000000..aecfa83
Binary files /dev/null and b/public/media/stock/600x400/img-75.jpg differ
diff --git a/public/media/stock/600x400/img-76.jpg b/public/media/stock/600x400/img-76.jpg
new file mode 100644
index 0000000..380c132
Binary files /dev/null and b/public/media/stock/600x400/img-76.jpg differ
diff --git a/public/media/stock/600x400/img-77.jpg b/public/media/stock/600x400/img-77.jpg
new file mode 100644
index 0000000..a8cf240
Binary files /dev/null and b/public/media/stock/600x400/img-77.jpg differ
diff --git a/public/media/stock/600x400/img-78.jpg b/public/media/stock/600x400/img-78.jpg
new file mode 100644
index 0000000..68cc6d9
Binary files /dev/null and b/public/media/stock/600x400/img-78.jpg differ
diff --git a/public/media/stock/600x400/img-79.jpg b/public/media/stock/600x400/img-79.jpg
new file mode 100644
index 0000000..4deae45
Binary files /dev/null and b/public/media/stock/600x400/img-79.jpg differ
diff --git a/public/media/stock/600x400/img-8.jpg b/public/media/stock/600x400/img-8.jpg
new file mode 100644
index 0000000..81b15e7
Binary files /dev/null and b/public/media/stock/600x400/img-8.jpg differ
diff --git a/public/media/stock/600x400/img-80.jpg b/public/media/stock/600x400/img-80.jpg
new file mode 100644
index 0000000..4207fbb
Binary files /dev/null and b/public/media/stock/600x400/img-80.jpg differ
diff --git a/public/media/stock/600x400/img-9.jpg b/public/media/stock/600x400/img-9.jpg
new file mode 100644
index 0000000..7b0013f
Binary files /dev/null and b/public/media/stock/600x400/img-9.jpg differ
diff --git a/public/media/stock/600x600/img-1.jpg b/public/media/stock/600x600/img-1.jpg
new file mode 100644
index 0000000..66ab33d
Binary files /dev/null and b/public/media/stock/600x600/img-1.jpg differ
diff --git a/public/media/stock/600x600/img-10.jpg b/public/media/stock/600x600/img-10.jpg
new file mode 100644
index 0000000..035100f
Binary files /dev/null and b/public/media/stock/600x600/img-10.jpg differ
diff --git a/public/media/stock/600x600/img-11.jpg b/public/media/stock/600x600/img-11.jpg
new file mode 100644
index 0000000..7a5baae
Binary files /dev/null and b/public/media/stock/600x600/img-11.jpg differ
diff --git a/public/media/stock/600x600/img-12.jpg b/public/media/stock/600x600/img-12.jpg
new file mode 100644
index 0000000..279fc64
Binary files /dev/null and b/public/media/stock/600x600/img-12.jpg differ
diff --git a/public/media/stock/600x600/img-13.jpg b/public/media/stock/600x600/img-13.jpg
new file mode 100644
index 0000000..b49a560
Binary files /dev/null and b/public/media/stock/600x600/img-13.jpg differ
diff --git a/public/media/stock/600x600/img-14.jpg b/public/media/stock/600x600/img-14.jpg
new file mode 100644
index 0000000..334e00b
Binary files /dev/null and b/public/media/stock/600x600/img-14.jpg differ
diff --git a/public/media/stock/600x600/img-15.jpg b/public/media/stock/600x600/img-15.jpg
new file mode 100644
index 0000000..683bad9
Binary files /dev/null and b/public/media/stock/600x600/img-15.jpg differ
diff --git a/public/media/stock/600x600/img-16.jpg b/public/media/stock/600x600/img-16.jpg
new file mode 100644
index 0000000..378e7ee
Binary files /dev/null and b/public/media/stock/600x600/img-16.jpg differ
diff --git a/public/media/stock/600x600/img-17.jpg b/public/media/stock/600x600/img-17.jpg
new file mode 100644
index 0000000..2e08816
Binary files /dev/null and b/public/media/stock/600x600/img-17.jpg differ
diff --git a/public/media/stock/600x600/img-18.jpg b/public/media/stock/600x600/img-18.jpg
new file mode 100644
index 0000000..5b15b88
Binary files /dev/null and b/public/media/stock/600x600/img-18.jpg differ
diff --git a/public/media/stock/600x600/img-2.jpg b/public/media/stock/600x600/img-2.jpg
new file mode 100644
index 0000000..230f2eb
Binary files /dev/null and b/public/media/stock/600x600/img-2.jpg differ
diff --git a/public/media/stock/600x600/img-20.jpg b/public/media/stock/600x600/img-20.jpg
new file mode 100644
index 0000000..78d55b6
Binary files /dev/null and b/public/media/stock/600x600/img-20.jpg differ
diff --git a/public/media/stock/600x600/img-21.jpg b/public/media/stock/600x600/img-21.jpg
new file mode 100644
index 0000000..1d49ce8
Binary files /dev/null and b/public/media/stock/600x600/img-21.jpg differ
diff --git a/public/media/stock/600x600/img-22.jpg b/public/media/stock/600x600/img-22.jpg
new file mode 100644
index 0000000..ade59cf
Binary files /dev/null and b/public/media/stock/600x600/img-22.jpg differ
diff --git a/public/media/stock/600x600/img-23.jpg b/public/media/stock/600x600/img-23.jpg
new file mode 100644
index 0000000..0f41eda
Binary files /dev/null and b/public/media/stock/600x600/img-23.jpg differ
diff --git a/public/media/stock/600x600/img-24.jpg b/public/media/stock/600x600/img-24.jpg
new file mode 100644
index 0000000..9a6ef48
Binary files /dev/null and b/public/media/stock/600x600/img-24.jpg differ
diff --git a/public/media/stock/600x600/img-25.jpg b/public/media/stock/600x600/img-25.jpg
new file mode 100644
index 0000000..4c7b6f6
Binary files /dev/null and b/public/media/stock/600x600/img-25.jpg differ
diff --git a/public/media/stock/600x600/img-26.jpg b/public/media/stock/600x600/img-26.jpg
new file mode 100644
index 0000000..eadc1fe
Binary files /dev/null and b/public/media/stock/600x600/img-26.jpg differ
diff --git a/public/media/stock/600x600/img-27.jpg b/public/media/stock/600x600/img-27.jpg
new file mode 100644
index 0000000..5772e4f
Binary files /dev/null and b/public/media/stock/600x600/img-27.jpg differ
diff --git a/public/media/stock/600x600/img-28.jpg b/public/media/stock/600x600/img-28.jpg
new file mode 100644
index 0000000..4532b3c
Binary files /dev/null and b/public/media/stock/600x600/img-28.jpg differ
diff --git a/public/media/stock/600x600/img-29.jpg b/public/media/stock/600x600/img-29.jpg
new file mode 100644
index 0000000..ea90a93
Binary files /dev/null and b/public/media/stock/600x600/img-29.jpg differ
diff --git a/public/media/stock/600x600/img-3.jpg b/public/media/stock/600x600/img-3.jpg
new file mode 100644
index 0000000..dc03a7a
Binary files /dev/null and b/public/media/stock/600x600/img-3.jpg differ
diff --git a/public/media/stock/600x600/img-30.jpg b/public/media/stock/600x600/img-30.jpg
new file mode 100644
index 0000000..8039993
Binary files /dev/null and b/public/media/stock/600x600/img-30.jpg differ
diff --git a/public/media/stock/600x600/img-31.jpg b/public/media/stock/600x600/img-31.jpg
new file mode 100644
index 0000000..903eb2c
Binary files /dev/null and b/public/media/stock/600x600/img-31.jpg differ
diff --git a/public/media/stock/600x600/img-32.jpg b/public/media/stock/600x600/img-32.jpg
new file mode 100644
index 0000000..b5ea630
Binary files /dev/null and b/public/media/stock/600x600/img-32.jpg differ
diff --git a/public/media/stock/600x600/img-33.jpg b/public/media/stock/600x600/img-33.jpg
new file mode 100644
index 0000000..e20ac2b
Binary files /dev/null and b/public/media/stock/600x600/img-33.jpg differ
diff --git a/public/media/stock/600x600/img-34.jpg b/public/media/stock/600x600/img-34.jpg
new file mode 100644
index 0000000..c7d5eab
Binary files /dev/null and b/public/media/stock/600x600/img-34.jpg differ
diff --git a/public/media/stock/600x600/img-35.jpg b/public/media/stock/600x600/img-35.jpg
new file mode 100644
index 0000000..e8af252
Binary files /dev/null and b/public/media/stock/600x600/img-35.jpg differ
diff --git a/public/media/stock/600x600/img-36.jpg b/public/media/stock/600x600/img-36.jpg
new file mode 100644
index 0000000..c372715
Binary files /dev/null and b/public/media/stock/600x600/img-36.jpg differ
diff --git a/public/media/stock/600x600/img-37.jpg b/public/media/stock/600x600/img-37.jpg
new file mode 100644
index 0000000..be8268c
Binary files /dev/null and b/public/media/stock/600x600/img-37.jpg differ
diff --git a/public/media/stock/600x600/img-38.jpg b/public/media/stock/600x600/img-38.jpg
new file mode 100644
index 0000000..dab6586
Binary files /dev/null and b/public/media/stock/600x600/img-38.jpg differ
diff --git a/public/media/stock/600x600/img-39.jpg b/public/media/stock/600x600/img-39.jpg
new file mode 100644
index 0000000..058f5d6
Binary files /dev/null and b/public/media/stock/600x600/img-39.jpg differ
diff --git a/public/media/stock/600x600/img-4.jpg b/public/media/stock/600x600/img-4.jpg
new file mode 100644
index 0000000..afb4b42
Binary files /dev/null and b/public/media/stock/600x600/img-4.jpg differ
diff --git a/public/media/stock/600x600/img-40.jpg b/public/media/stock/600x600/img-40.jpg
new file mode 100644
index 0000000..78eccfd
Binary files /dev/null and b/public/media/stock/600x600/img-40.jpg differ
diff --git a/public/media/stock/600x600/img-41.jpg b/public/media/stock/600x600/img-41.jpg
new file mode 100644
index 0000000..952c4a4
Binary files /dev/null and b/public/media/stock/600x600/img-41.jpg differ
diff --git a/public/media/stock/600x600/img-42.jpg b/public/media/stock/600x600/img-42.jpg
new file mode 100644
index 0000000..41b1056
Binary files /dev/null and b/public/media/stock/600x600/img-42.jpg differ
diff --git a/public/media/stock/600x600/img-43.jpg b/public/media/stock/600x600/img-43.jpg
new file mode 100644
index 0000000..9238c6d
Binary files /dev/null and b/public/media/stock/600x600/img-43.jpg differ
diff --git a/public/media/stock/600x600/img-44.jpg b/public/media/stock/600x600/img-44.jpg
new file mode 100644
index 0000000..95f76d7
Binary files /dev/null and b/public/media/stock/600x600/img-44.jpg differ
diff --git a/public/media/stock/600x600/img-45.jpg b/public/media/stock/600x600/img-45.jpg
new file mode 100644
index 0000000..3403900
Binary files /dev/null and b/public/media/stock/600x600/img-45.jpg differ
diff --git a/public/media/stock/600x600/img-46.jpg b/public/media/stock/600x600/img-46.jpg
new file mode 100644
index 0000000..919e8c3
Binary files /dev/null and b/public/media/stock/600x600/img-46.jpg differ
diff --git a/public/media/stock/600x600/img-47.jpg b/public/media/stock/600x600/img-47.jpg
new file mode 100644
index 0000000..3edc317
Binary files /dev/null and b/public/media/stock/600x600/img-47.jpg differ
diff --git a/public/media/stock/600x600/img-48.jpg b/public/media/stock/600x600/img-48.jpg
new file mode 100644
index 0000000..58fd75c
Binary files /dev/null and b/public/media/stock/600x600/img-48.jpg differ
diff --git a/public/media/stock/600x600/img-49.jpg b/public/media/stock/600x600/img-49.jpg
new file mode 100644
index 0000000..3b719b3
Binary files /dev/null and b/public/media/stock/600x600/img-49.jpg differ
diff --git a/public/media/stock/600x600/img-5.jpg b/public/media/stock/600x600/img-5.jpg
new file mode 100644
index 0000000..7e414ba
Binary files /dev/null and b/public/media/stock/600x600/img-5.jpg differ
diff --git a/public/media/stock/600x600/img-50.jpg b/public/media/stock/600x600/img-50.jpg
new file mode 100644
index 0000000..bd9aefe
Binary files /dev/null and b/public/media/stock/600x600/img-50.jpg differ
diff --git a/public/media/stock/600x600/img-51.jpg b/public/media/stock/600x600/img-51.jpg
new file mode 100644
index 0000000..8d0b051
Binary files /dev/null and b/public/media/stock/600x600/img-51.jpg differ
diff --git a/public/media/stock/600x600/img-52.jpg b/public/media/stock/600x600/img-52.jpg
new file mode 100644
index 0000000..b5ebb7b
Binary files /dev/null and b/public/media/stock/600x600/img-52.jpg differ
diff --git a/public/media/stock/600x600/img-53.jpg b/public/media/stock/600x600/img-53.jpg
new file mode 100644
index 0000000..922d507
Binary files /dev/null and b/public/media/stock/600x600/img-53.jpg differ
diff --git a/public/media/stock/600x600/img-54.jpg b/public/media/stock/600x600/img-54.jpg
new file mode 100644
index 0000000..6411de6
Binary files /dev/null and b/public/media/stock/600x600/img-54.jpg differ
diff --git a/public/media/stock/600x600/img-55.jpg b/public/media/stock/600x600/img-55.jpg
new file mode 100644
index 0000000..0aefac1
Binary files /dev/null and b/public/media/stock/600x600/img-55.jpg differ
diff --git a/public/media/stock/600x600/img-56.jpg b/public/media/stock/600x600/img-56.jpg
new file mode 100644
index 0000000..cb62338
Binary files /dev/null and b/public/media/stock/600x600/img-56.jpg differ
diff --git a/public/media/stock/600x600/img-57.jpg b/public/media/stock/600x600/img-57.jpg
new file mode 100644
index 0000000..af3699f
Binary files /dev/null and b/public/media/stock/600x600/img-57.jpg differ
diff --git a/public/media/stock/600x600/img-58.jpg b/public/media/stock/600x600/img-58.jpg
new file mode 100644
index 0000000..75329e8
Binary files /dev/null and b/public/media/stock/600x600/img-58.jpg differ
diff --git a/public/media/stock/600x600/img-59.jpg b/public/media/stock/600x600/img-59.jpg
new file mode 100644
index 0000000..5091b32
Binary files /dev/null and b/public/media/stock/600x600/img-59.jpg differ
diff --git a/public/media/stock/600x600/img-6.jpg b/public/media/stock/600x600/img-6.jpg
new file mode 100644
index 0000000..609f70e
Binary files /dev/null and b/public/media/stock/600x600/img-6.jpg differ
diff --git a/public/media/stock/600x600/img-60.jpg b/public/media/stock/600x600/img-60.jpg
new file mode 100644
index 0000000..31fb308
Binary files /dev/null and b/public/media/stock/600x600/img-60.jpg differ
diff --git a/public/media/stock/600x600/img-61.jpg b/public/media/stock/600x600/img-61.jpg
new file mode 100644
index 0000000..7f1e042
Binary files /dev/null and b/public/media/stock/600x600/img-61.jpg differ
diff --git a/public/media/stock/600x600/img-62.jpg b/public/media/stock/600x600/img-62.jpg
new file mode 100644
index 0000000..9f36973
Binary files /dev/null and b/public/media/stock/600x600/img-62.jpg differ
diff --git a/public/media/stock/600x600/img-63.jpg b/public/media/stock/600x600/img-63.jpg
new file mode 100644
index 0000000..3892ca9
Binary files /dev/null and b/public/media/stock/600x600/img-63.jpg differ
diff --git a/public/media/stock/600x600/img-64.jpg b/public/media/stock/600x600/img-64.jpg
new file mode 100644
index 0000000..7f90d13
Binary files /dev/null and b/public/media/stock/600x600/img-64.jpg differ
diff --git a/public/media/stock/600x600/img-65.jpg b/public/media/stock/600x600/img-65.jpg
new file mode 100644
index 0000000..9b88e74
Binary files /dev/null and b/public/media/stock/600x600/img-65.jpg differ
diff --git a/public/media/stock/600x600/img-66.jpg b/public/media/stock/600x600/img-66.jpg
new file mode 100644
index 0000000..3509fa2
Binary files /dev/null and b/public/media/stock/600x600/img-66.jpg differ
diff --git a/public/media/stock/600x600/img-67.jpg b/public/media/stock/600x600/img-67.jpg
new file mode 100644
index 0000000..cc8d670
Binary files /dev/null and b/public/media/stock/600x600/img-67.jpg differ
diff --git a/public/media/stock/600x600/img-68.jpg b/public/media/stock/600x600/img-68.jpg
new file mode 100644
index 0000000..af7402c
Binary files /dev/null and b/public/media/stock/600x600/img-68.jpg differ
diff --git a/public/media/stock/600x600/img-69.jpg b/public/media/stock/600x600/img-69.jpg
new file mode 100644
index 0000000..129555e
Binary files /dev/null and b/public/media/stock/600x600/img-69.jpg differ
diff --git a/public/media/stock/600x600/img-7.jpg b/public/media/stock/600x600/img-7.jpg
new file mode 100644
index 0000000..8ce34d2
Binary files /dev/null and b/public/media/stock/600x600/img-7.jpg differ
diff --git a/public/media/stock/600x600/img-70.jpg b/public/media/stock/600x600/img-70.jpg
new file mode 100644
index 0000000..8606efe
Binary files /dev/null and b/public/media/stock/600x600/img-70.jpg differ
diff --git a/public/media/stock/600x600/img-71.jpg b/public/media/stock/600x600/img-71.jpg
new file mode 100644
index 0000000..082e4be
Binary files /dev/null and b/public/media/stock/600x600/img-71.jpg differ
diff --git a/public/media/stock/600x600/img-72.jpg b/public/media/stock/600x600/img-72.jpg
new file mode 100644
index 0000000..ca9e3d9
Binary files /dev/null and b/public/media/stock/600x600/img-72.jpg differ
diff --git a/public/media/stock/600x600/img-73.jpg b/public/media/stock/600x600/img-73.jpg
new file mode 100644
index 0000000..4064a26
Binary files /dev/null and b/public/media/stock/600x600/img-73.jpg differ
diff --git a/public/media/stock/600x600/img-74.jpg b/public/media/stock/600x600/img-74.jpg
new file mode 100644
index 0000000..d03cb5c
Binary files /dev/null and b/public/media/stock/600x600/img-74.jpg differ
diff --git a/public/media/stock/600x600/img-75.jpg b/public/media/stock/600x600/img-75.jpg
new file mode 100644
index 0000000..907ef5b
Binary files /dev/null and b/public/media/stock/600x600/img-75.jpg differ
diff --git a/public/media/stock/600x600/img-76.jpg b/public/media/stock/600x600/img-76.jpg
new file mode 100644
index 0000000..77ae352
Binary files /dev/null and b/public/media/stock/600x600/img-76.jpg differ
diff --git a/public/media/stock/600x600/img-77.jpg b/public/media/stock/600x600/img-77.jpg
new file mode 100644
index 0000000..056ecdb
Binary files /dev/null and b/public/media/stock/600x600/img-77.jpg differ
diff --git a/public/media/stock/600x600/img-78.jpg b/public/media/stock/600x600/img-78.jpg
new file mode 100644
index 0000000..e4fd334
Binary files /dev/null and b/public/media/stock/600x600/img-78.jpg differ
diff --git a/public/media/stock/600x600/img-79.jpg b/public/media/stock/600x600/img-79.jpg
new file mode 100644
index 0000000..6c50f05
Binary files /dev/null and b/public/media/stock/600x600/img-79.jpg differ
diff --git a/public/media/stock/600x600/img-8.jpg b/public/media/stock/600x600/img-8.jpg
new file mode 100644
index 0000000..75a3554
Binary files /dev/null and b/public/media/stock/600x600/img-8.jpg differ
diff --git a/public/media/stock/600x600/img-80.jpg b/public/media/stock/600x600/img-80.jpg
new file mode 100644
index 0000000..d818f02
Binary files /dev/null and b/public/media/stock/600x600/img-80.jpg differ
diff --git a/public/media/stock/600x600/img-81.jpg b/public/media/stock/600x600/img-81.jpg
new file mode 100644
index 0000000..8560f8a
Binary files /dev/null and b/public/media/stock/600x600/img-81.jpg differ
diff --git a/public/media/stock/600x600/img-82.jpg b/public/media/stock/600x600/img-82.jpg
new file mode 100644
index 0000000..af2ba8b
Binary files /dev/null and b/public/media/stock/600x600/img-82.jpg differ
diff --git a/public/media/stock/600x600/img-83.jpg b/public/media/stock/600x600/img-83.jpg
new file mode 100644
index 0000000..6bdadfa
Binary files /dev/null and b/public/media/stock/600x600/img-83.jpg differ
diff --git a/public/media/stock/600x600/img-84.jpg b/public/media/stock/600x600/img-84.jpg
new file mode 100644
index 0000000..6d32e64
Binary files /dev/null and b/public/media/stock/600x600/img-84.jpg differ
diff --git a/public/media/stock/600x600/img-85.jpg b/public/media/stock/600x600/img-85.jpg
new file mode 100644
index 0000000..16ef25d
Binary files /dev/null and b/public/media/stock/600x600/img-85.jpg differ
diff --git a/public/media/stock/600x600/img-86.jpg b/public/media/stock/600x600/img-86.jpg
new file mode 100644
index 0000000..48d7795
Binary files /dev/null and b/public/media/stock/600x600/img-86.jpg differ
diff --git a/public/media/stock/600x600/img-9.jpg b/public/media/stock/600x600/img-9.jpg
new file mode 100644
index 0000000..6cf2d66
Binary files /dev/null and b/public/media/stock/600x600/img-9.jpg differ
diff --git a/public/media/stock/900x600/1.jpg b/public/media/stock/900x600/1.jpg
new file mode 100644
index 0000000..ac004c7
Binary files /dev/null and b/public/media/stock/900x600/1.jpg differ
diff --git a/public/media/stock/900x600/10.jpg b/public/media/stock/900x600/10.jpg
new file mode 100644
index 0000000..a628c57
Binary files /dev/null and b/public/media/stock/900x600/10.jpg differ
diff --git a/public/media/stock/900x600/11.jpg b/public/media/stock/900x600/11.jpg
new file mode 100644
index 0000000..668cb8e
Binary files /dev/null and b/public/media/stock/900x600/11.jpg differ
diff --git a/public/media/stock/900x600/12.jpg b/public/media/stock/900x600/12.jpg
new file mode 100644
index 0000000..2c8f304
Binary files /dev/null and b/public/media/stock/900x600/12.jpg differ
diff --git a/public/media/stock/900x600/13.jpg b/public/media/stock/900x600/13.jpg
new file mode 100644
index 0000000..bd6b3ea
Binary files /dev/null and b/public/media/stock/900x600/13.jpg differ
diff --git a/public/media/stock/900x600/14.jpg b/public/media/stock/900x600/14.jpg
new file mode 100644
index 0000000..b535839
Binary files /dev/null and b/public/media/stock/900x600/14.jpg differ
diff --git a/public/media/stock/900x600/15.jpg b/public/media/stock/900x600/15.jpg
new file mode 100644
index 0000000..eaf8461
Binary files /dev/null and b/public/media/stock/900x600/15.jpg differ
diff --git a/public/media/stock/900x600/16.jpg b/public/media/stock/900x600/16.jpg
new file mode 100644
index 0000000..45600c4
Binary files /dev/null and b/public/media/stock/900x600/16.jpg differ
diff --git a/public/media/stock/900x600/17.jpg b/public/media/stock/900x600/17.jpg
new file mode 100644
index 0000000..a3d668f
Binary files /dev/null and b/public/media/stock/900x600/17.jpg differ
diff --git a/public/media/stock/900x600/18.jpg b/public/media/stock/900x600/18.jpg
new file mode 100644
index 0000000..e17a426
Binary files /dev/null and b/public/media/stock/900x600/18.jpg differ
diff --git a/public/media/stock/900x600/19.jpg b/public/media/stock/900x600/19.jpg
new file mode 100644
index 0000000..6bf03f3
Binary files /dev/null and b/public/media/stock/900x600/19.jpg differ
diff --git a/public/media/stock/900x600/2.jpg b/public/media/stock/900x600/2.jpg
new file mode 100644
index 0000000..4dbe027
Binary files /dev/null and b/public/media/stock/900x600/2.jpg differ
diff --git a/public/media/stock/900x600/20.jpg b/public/media/stock/900x600/20.jpg
new file mode 100644
index 0000000..6ce8769
Binary files /dev/null and b/public/media/stock/900x600/20.jpg differ
diff --git a/public/media/stock/900x600/21.jpg b/public/media/stock/900x600/21.jpg
new file mode 100644
index 0000000..8da7cfb
Binary files /dev/null and b/public/media/stock/900x600/21.jpg differ
diff --git a/public/media/stock/900x600/22.jpg b/public/media/stock/900x600/22.jpg
new file mode 100644
index 0000000..25bef26
Binary files /dev/null and b/public/media/stock/900x600/22.jpg differ
diff --git a/public/media/stock/900x600/23.jpg b/public/media/stock/900x600/23.jpg
new file mode 100644
index 0000000..997dc9b
Binary files /dev/null and b/public/media/stock/900x600/23.jpg differ
diff --git a/public/media/stock/900x600/24.jpg b/public/media/stock/900x600/24.jpg
new file mode 100644
index 0000000..29ee330
Binary files /dev/null and b/public/media/stock/900x600/24.jpg differ
diff --git a/public/media/stock/900x600/25.jpg b/public/media/stock/900x600/25.jpg
new file mode 100644
index 0000000..35246d1
Binary files /dev/null and b/public/media/stock/900x600/25.jpg differ
diff --git a/public/media/stock/900x600/26.jpg b/public/media/stock/900x600/26.jpg
new file mode 100644
index 0000000..eb0014a
Binary files /dev/null and b/public/media/stock/900x600/26.jpg differ
diff --git a/public/media/stock/900x600/27.jpg b/public/media/stock/900x600/27.jpg
new file mode 100644
index 0000000..5409ff9
Binary files /dev/null and b/public/media/stock/900x600/27.jpg differ
diff --git a/public/media/stock/900x600/28.jpg b/public/media/stock/900x600/28.jpg
new file mode 100644
index 0000000..2d5e11e
Binary files /dev/null and b/public/media/stock/900x600/28.jpg differ
diff --git a/public/media/stock/900x600/29.jpg b/public/media/stock/900x600/29.jpg
new file mode 100644
index 0000000..9f2f51e
Binary files /dev/null and b/public/media/stock/900x600/29.jpg differ
diff --git a/public/media/stock/900x600/3.jpg b/public/media/stock/900x600/3.jpg
new file mode 100644
index 0000000..fd4c4b4
Binary files /dev/null and b/public/media/stock/900x600/3.jpg differ
diff --git a/public/media/stock/900x600/30.jpg b/public/media/stock/900x600/30.jpg
new file mode 100644
index 0000000..ef3337a
Binary files /dev/null and b/public/media/stock/900x600/30.jpg differ
diff --git a/public/media/stock/900x600/31.jpg b/public/media/stock/900x600/31.jpg
new file mode 100644
index 0000000..31fe07e
Binary files /dev/null and b/public/media/stock/900x600/31.jpg differ
diff --git a/public/media/stock/900x600/32.jpg b/public/media/stock/900x600/32.jpg
new file mode 100644
index 0000000..c4c3e5d
Binary files /dev/null and b/public/media/stock/900x600/32.jpg differ
diff --git a/public/media/stock/900x600/33.jpg b/public/media/stock/900x600/33.jpg
new file mode 100644
index 0000000..037d4ab
Binary files /dev/null and b/public/media/stock/900x600/33.jpg differ
diff --git a/public/media/stock/900x600/34.jpg b/public/media/stock/900x600/34.jpg
new file mode 100644
index 0000000..0d5e7d2
Binary files /dev/null and b/public/media/stock/900x600/34.jpg differ
diff --git a/public/media/stock/900x600/35.jpg b/public/media/stock/900x600/35.jpg
new file mode 100644
index 0000000..29eaf9d
Binary files /dev/null and b/public/media/stock/900x600/35.jpg differ
diff --git a/public/media/stock/900x600/36.jpg b/public/media/stock/900x600/36.jpg
new file mode 100644
index 0000000..0daa006
Binary files /dev/null and b/public/media/stock/900x600/36.jpg differ
diff --git a/public/media/stock/900x600/37.jpg b/public/media/stock/900x600/37.jpg
new file mode 100644
index 0000000..ed936f9
Binary files /dev/null and b/public/media/stock/900x600/37.jpg differ
diff --git a/public/media/stock/900x600/38.jpg b/public/media/stock/900x600/38.jpg
new file mode 100644
index 0000000..083b9bc
Binary files /dev/null and b/public/media/stock/900x600/38.jpg differ
diff --git a/public/media/stock/900x600/39.jpg b/public/media/stock/900x600/39.jpg
new file mode 100644
index 0000000..cf39d80
Binary files /dev/null and b/public/media/stock/900x600/39.jpg differ
diff --git a/public/media/stock/900x600/4.jpg b/public/media/stock/900x600/4.jpg
new file mode 100644
index 0000000..3a95fb2
Binary files /dev/null and b/public/media/stock/900x600/4.jpg differ
diff --git a/public/media/stock/900x600/40.jpg b/public/media/stock/900x600/40.jpg
new file mode 100644
index 0000000..fb5293d
Binary files /dev/null and b/public/media/stock/900x600/40.jpg differ
diff --git a/public/media/stock/900x600/41.jpg b/public/media/stock/900x600/41.jpg
new file mode 100644
index 0000000..d4fa1fa
Binary files /dev/null and b/public/media/stock/900x600/41.jpg differ
diff --git a/public/media/stock/900x600/42.jpg b/public/media/stock/900x600/42.jpg
new file mode 100644
index 0000000..c8fdb06
Binary files /dev/null and b/public/media/stock/900x600/42.jpg differ
diff --git a/public/media/stock/900x600/42.png b/public/media/stock/900x600/42.png
new file mode 100644
index 0000000..43ef5de
Binary files /dev/null and b/public/media/stock/900x600/42.png differ
diff --git a/public/media/stock/900x600/43.jpg b/public/media/stock/900x600/43.jpg
new file mode 100644
index 0000000..3ee4abb
Binary files /dev/null and b/public/media/stock/900x600/43.jpg differ
diff --git a/public/media/stock/900x600/44.jpg b/public/media/stock/900x600/44.jpg
new file mode 100644
index 0000000..fa80881
Binary files /dev/null and b/public/media/stock/900x600/44.jpg differ
diff --git a/public/media/stock/900x600/45.jpg b/public/media/stock/900x600/45.jpg
new file mode 100644
index 0000000..d93cba2
Binary files /dev/null and b/public/media/stock/900x600/45.jpg differ
diff --git a/public/media/stock/900x600/46.jpg b/public/media/stock/900x600/46.jpg
new file mode 100644
index 0000000..9430fe9
Binary files /dev/null and b/public/media/stock/900x600/46.jpg differ
diff --git a/public/media/stock/900x600/47.jpg b/public/media/stock/900x600/47.jpg
new file mode 100644
index 0000000..e55709b
Binary files /dev/null and b/public/media/stock/900x600/47.jpg differ
diff --git a/public/media/stock/900x600/48.jpg b/public/media/stock/900x600/48.jpg
new file mode 100644
index 0000000..059e3e2
Binary files /dev/null and b/public/media/stock/900x600/48.jpg differ
diff --git a/public/media/stock/900x600/49.jpg b/public/media/stock/900x600/49.jpg
new file mode 100644
index 0000000..4e0f76d
Binary files /dev/null and b/public/media/stock/900x600/49.jpg differ
diff --git a/public/media/stock/900x600/5.jpg b/public/media/stock/900x600/5.jpg
new file mode 100644
index 0000000..22b653c
Binary files /dev/null and b/public/media/stock/900x600/5.jpg differ
diff --git a/public/media/stock/900x600/50.jpg b/public/media/stock/900x600/50.jpg
new file mode 100644
index 0000000..1ac93b2
Binary files /dev/null and b/public/media/stock/900x600/50.jpg differ
diff --git a/public/media/stock/900x600/51.jpg b/public/media/stock/900x600/51.jpg
new file mode 100644
index 0000000..1ff4a44
Binary files /dev/null and b/public/media/stock/900x600/51.jpg differ
diff --git a/public/media/stock/900x600/52.jpg b/public/media/stock/900x600/52.jpg
new file mode 100644
index 0000000..e2d6b97
Binary files /dev/null and b/public/media/stock/900x600/52.jpg differ
diff --git a/public/media/stock/900x600/53.jpg b/public/media/stock/900x600/53.jpg
new file mode 100644
index 0000000..c5072dc
Binary files /dev/null and b/public/media/stock/900x600/53.jpg differ
diff --git a/public/media/stock/900x600/54.jpg b/public/media/stock/900x600/54.jpg
new file mode 100644
index 0000000..8182faf
Binary files /dev/null and b/public/media/stock/900x600/54.jpg differ
diff --git a/public/media/stock/900x600/55.jpg b/public/media/stock/900x600/55.jpg
new file mode 100644
index 0000000..293ae7b
Binary files /dev/null and b/public/media/stock/900x600/55.jpg differ
diff --git a/public/media/stock/900x600/56.jpg b/public/media/stock/900x600/56.jpg
new file mode 100644
index 0000000..fa60fea
Binary files /dev/null and b/public/media/stock/900x600/56.jpg differ
diff --git a/public/media/stock/900x600/57.jpg b/public/media/stock/900x600/57.jpg
new file mode 100644
index 0000000..de27500
Binary files /dev/null and b/public/media/stock/900x600/57.jpg differ
diff --git a/public/media/stock/900x600/58.jpg b/public/media/stock/900x600/58.jpg
new file mode 100644
index 0000000..7e23950
Binary files /dev/null and b/public/media/stock/900x600/58.jpg differ
diff --git a/public/media/stock/900x600/59.jpg b/public/media/stock/900x600/59.jpg
new file mode 100644
index 0000000..ea44cd1
Binary files /dev/null and b/public/media/stock/900x600/59.jpg differ
diff --git a/public/media/stock/900x600/6.jpg b/public/media/stock/900x600/6.jpg
new file mode 100644
index 0000000..867c661
Binary files /dev/null and b/public/media/stock/900x600/6.jpg differ
diff --git a/public/media/stock/900x600/60.jpg b/public/media/stock/900x600/60.jpg
new file mode 100644
index 0000000..ab29dcc
Binary files /dev/null and b/public/media/stock/900x600/60.jpg differ
diff --git a/public/media/stock/900x600/61.jpg b/public/media/stock/900x600/61.jpg
new file mode 100644
index 0000000..900127a
Binary files /dev/null and b/public/media/stock/900x600/61.jpg differ
diff --git a/public/media/stock/900x600/62.jpg b/public/media/stock/900x600/62.jpg
new file mode 100644
index 0000000..b4e268e
Binary files /dev/null and b/public/media/stock/900x600/62.jpg differ
diff --git a/public/media/stock/900x600/63.jpg b/public/media/stock/900x600/63.jpg
new file mode 100644
index 0000000..b7d2208
Binary files /dev/null and b/public/media/stock/900x600/63.jpg differ
diff --git a/public/media/stock/900x600/64.jpg b/public/media/stock/900x600/64.jpg
new file mode 100644
index 0000000..24415f3
Binary files /dev/null and b/public/media/stock/900x600/64.jpg differ
diff --git a/public/media/stock/900x600/65.jpg b/public/media/stock/900x600/65.jpg
new file mode 100644
index 0000000..ca8cd5a
Binary files /dev/null and b/public/media/stock/900x600/65.jpg differ
diff --git a/public/media/stock/900x600/66.jpg b/public/media/stock/900x600/66.jpg
new file mode 100644
index 0000000..86561db
Binary files /dev/null and b/public/media/stock/900x600/66.jpg differ
diff --git a/public/media/stock/900x600/67.jpg b/public/media/stock/900x600/67.jpg
new file mode 100644
index 0000000..3d692e7
Binary files /dev/null and b/public/media/stock/900x600/67.jpg differ
diff --git a/public/media/stock/900x600/68.jpg b/public/media/stock/900x600/68.jpg
new file mode 100644
index 0000000..597ceb6
Binary files /dev/null and b/public/media/stock/900x600/68.jpg differ
diff --git a/public/media/stock/900x600/69.jpg b/public/media/stock/900x600/69.jpg
new file mode 100644
index 0000000..61f7e76
Binary files /dev/null and b/public/media/stock/900x600/69.jpg differ
diff --git a/public/media/stock/900x600/7.jpg b/public/media/stock/900x600/7.jpg
new file mode 100644
index 0000000..4438cf8
Binary files /dev/null and b/public/media/stock/900x600/7.jpg differ
diff --git a/public/media/stock/900x600/70.jpg b/public/media/stock/900x600/70.jpg
new file mode 100644
index 0000000..ff19f45
Binary files /dev/null and b/public/media/stock/900x600/70.jpg differ
diff --git a/public/media/stock/900x600/71.jpg b/public/media/stock/900x600/71.jpg
new file mode 100644
index 0000000..a525b18
Binary files /dev/null and b/public/media/stock/900x600/71.jpg differ
diff --git a/public/media/stock/900x600/72.jpg b/public/media/stock/900x600/72.jpg
new file mode 100644
index 0000000..65a672e
Binary files /dev/null and b/public/media/stock/900x600/72.jpg differ
diff --git a/public/media/stock/900x600/73.jpg b/public/media/stock/900x600/73.jpg
new file mode 100644
index 0000000..d4dba21
Binary files /dev/null and b/public/media/stock/900x600/73.jpg differ
diff --git a/public/media/stock/900x600/74.jpg b/public/media/stock/900x600/74.jpg
new file mode 100644
index 0000000..742a882
Binary files /dev/null and b/public/media/stock/900x600/74.jpg differ
diff --git a/public/media/stock/900x600/75.jpg b/public/media/stock/900x600/75.jpg
new file mode 100644
index 0000000..b548a00
Binary files /dev/null and b/public/media/stock/900x600/75.jpg differ
diff --git a/public/media/stock/900x600/76.jpg b/public/media/stock/900x600/76.jpg
new file mode 100644
index 0000000..e5e45c8
Binary files /dev/null and b/public/media/stock/900x600/76.jpg differ
diff --git a/public/media/stock/900x600/77.jpg b/public/media/stock/900x600/77.jpg
new file mode 100644
index 0000000..ca3400b
Binary files /dev/null and b/public/media/stock/900x600/77.jpg differ
diff --git a/public/media/stock/900x600/78.jpg b/public/media/stock/900x600/78.jpg
new file mode 100644
index 0000000..c4ecba0
Binary files /dev/null and b/public/media/stock/900x600/78.jpg differ
diff --git a/public/media/stock/900x600/79.jpg b/public/media/stock/900x600/79.jpg
new file mode 100644
index 0000000..2a326e0
Binary files /dev/null and b/public/media/stock/900x600/79.jpg differ
diff --git a/public/media/stock/900x600/8.jpg b/public/media/stock/900x600/8.jpg
new file mode 100644
index 0000000..ee431e8
Binary files /dev/null and b/public/media/stock/900x600/8.jpg differ
diff --git a/public/media/stock/900x600/80.jpg b/public/media/stock/900x600/80.jpg
new file mode 100644
index 0000000..e01346d
Binary files /dev/null and b/public/media/stock/900x600/80.jpg differ
diff --git a/public/media/stock/900x600/81.jpg b/public/media/stock/900x600/81.jpg
new file mode 100644
index 0000000..740d298
Binary files /dev/null and b/public/media/stock/900x600/81.jpg differ
diff --git a/public/media/stock/900x600/82.jpg b/public/media/stock/900x600/82.jpg
new file mode 100644
index 0000000..a1b6971
Binary files /dev/null and b/public/media/stock/900x600/82.jpg differ
diff --git a/public/media/stock/900x600/83.jpg b/public/media/stock/900x600/83.jpg
new file mode 100644
index 0000000..36adc0b
Binary files /dev/null and b/public/media/stock/900x600/83.jpg differ
diff --git a/public/media/stock/900x600/84.jpg b/public/media/stock/900x600/84.jpg
new file mode 100644
index 0000000..1c14bc0
Binary files /dev/null and b/public/media/stock/900x600/84.jpg differ
diff --git a/public/media/stock/900x600/85.jpg b/public/media/stock/900x600/85.jpg
new file mode 100644
index 0000000..5069d06
Binary files /dev/null and b/public/media/stock/900x600/85.jpg differ
diff --git a/public/media/stock/900x600/9.jpg b/public/media/stock/900x600/9.jpg
new file mode 100644
index 0000000..6f53b11
Binary files /dev/null and b/public/media/stock/900x600/9.jpg differ
diff --git a/public/media/stock/ecommerce/1.gif b/public/media/stock/ecommerce/1.gif
new file mode 100644
index 0000000..4d53d79
Binary files /dev/null and b/public/media/stock/ecommerce/1.gif differ
diff --git a/public/media/stock/ecommerce/10.gif b/public/media/stock/ecommerce/10.gif
new file mode 100644
index 0000000..df7ab0e
Binary files /dev/null and b/public/media/stock/ecommerce/10.gif differ
diff --git a/public/media/stock/ecommerce/100.gif b/public/media/stock/ecommerce/100.gif
new file mode 100644
index 0000000..be8a013
Binary files /dev/null and b/public/media/stock/ecommerce/100.gif differ
diff --git a/public/media/stock/ecommerce/101.gif b/public/media/stock/ecommerce/101.gif
new file mode 100644
index 0000000..0f9e195
Binary files /dev/null and b/public/media/stock/ecommerce/101.gif differ
diff --git a/public/media/stock/ecommerce/102.gif b/public/media/stock/ecommerce/102.gif
new file mode 100644
index 0000000..bc83d18
Binary files /dev/null and b/public/media/stock/ecommerce/102.gif differ
diff --git a/public/media/stock/ecommerce/103.gif b/public/media/stock/ecommerce/103.gif
new file mode 100644
index 0000000..6ab5ec1
Binary files /dev/null and b/public/media/stock/ecommerce/103.gif differ
diff --git a/public/media/stock/ecommerce/104.gif b/public/media/stock/ecommerce/104.gif
new file mode 100644
index 0000000..1a2f2d1
Binary files /dev/null and b/public/media/stock/ecommerce/104.gif differ
diff --git a/public/media/stock/ecommerce/105.gif b/public/media/stock/ecommerce/105.gif
new file mode 100644
index 0000000..bc4723c
Binary files /dev/null and b/public/media/stock/ecommerce/105.gif differ
diff --git a/public/media/stock/ecommerce/106.gif b/public/media/stock/ecommerce/106.gif
new file mode 100644
index 0000000..216ef5f
Binary files /dev/null and b/public/media/stock/ecommerce/106.gif differ
diff --git a/public/media/stock/ecommerce/107.gif b/public/media/stock/ecommerce/107.gif
new file mode 100644
index 0000000..105d1d6
Binary files /dev/null and b/public/media/stock/ecommerce/107.gif differ
diff --git a/public/media/stock/ecommerce/108.gif b/public/media/stock/ecommerce/108.gif
new file mode 100644
index 0000000..027e6be
Binary files /dev/null and b/public/media/stock/ecommerce/108.gif differ
diff --git a/public/media/stock/ecommerce/109.gif b/public/media/stock/ecommerce/109.gif
new file mode 100644
index 0000000..eb14608
Binary files /dev/null and b/public/media/stock/ecommerce/109.gif differ
diff --git a/public/media/stock/ecommerce/11.gif b/public/media/stock/ecommerce/11.gif
new file mode 100644
index 0000000..2474ef2
Binary files /dev/null and b/public/media/stock/ecommerce/11.gif differ
diff --git a/public/media/stock/ecommerce/110.gif b/public/media/stock/ecommerce/110.gif
new file mode 100644
index 0000000..d4b2590
Binary files /dev/null and b/public/media/stock/ecommerce/110.gif differ
diff --git a/public/media/stock/ecommerce/111.gif b/public/media/stock/ecommerce/111.gif
new file mode 100644
index 0000000..a8b98cf
Binary files /dev/null and b/public/media/stock/ecommerce/111.gif differ
diff --git a/public/media/stock/ecommerce/112.gif b/public/media/stock/ecommerce/112.gif
new file mode 100644
index 0000000..2bfe844
Binary files /dev/null and b/public/media/stock/ecommerce/112.gif differ
diff --git a/public/media/stock/ecommerce/113.gif b/public/media/stock/ecommerce/113.gif
new file mode 100644
index 0000000..595bd5d
Binary files /dev/null and b/public/media/stock/ecommerce/113.gif differ
diff --git a/public/media/stock/ecommerce/114.gif b/public/media/stock/ecommerce/114.gif
new file mode 100644
index 0000000..a1f2c8e
Binary files /dev/null and b/public/media/stock/ecommerce/114.gif differ
diff --git a/public/media/stock/ecommerce/115.gif b/public/media/stock/ecommerce/115.gif
new file mode 100644
index 0000000..ee3851e
Binary files /dev/null and b/public/media/stock/ecommerce/115.gif differ
diff --git a/public/media/stock/ecommerce/116.gif b/public/media/stock/ecommerce/116.gif
new file mode 100644
index 0000000..8e502ec
Binary files /dev/null and b/public/media/stock/ecommerce/116.gif differ
diff --git a/public/media/stock/ecommerce/117.gif b/public/media/stock/ecommerce/117.gif
new file mode 100644
index 0000000..747a0c3
Binary files /dev/null and b/public/media/stock/ecommerce/117.gif differ
diff --git a/public/media/stock/ecommerce/118.gif b/public/media/stock/ecommerce/118.gif
new file mode 100644
index 0000000..5480d1b
Binary files /dev/null and b/public/media/stock/ecommerce/118.gif differ
diff --git a/public/media/stock/ecommerce/119.gif b/public/media/stock/ecommerce/119.gif
new file mode 100644
index 0000000..43013d5
Binary files /dev/null and b/public/media/stock/ecommerce/119.gif differ
diff --git a/public/media/stock/ecommerce/12.gif b/public/media/stock/ecommerce/12.gif
new file mode 100644
index 0000000..8e94726
Binary files /dev/null and b/public/media/stock/ecommerce/12.gif differ
diff --git a/public/media/stock/ecommerce/120.gif b/public/media/stock/ecommerce/120.gif
new file mode 100644
index 0000000..d423689
Binary files /dev/null and b/public/media/stock/ecommerce/120.gif differ
diff --git a/public/media/stock/ecommerce/121.gif b/public/media/stock/ecommerce/121.gif
new file mode 100644
index 0000000..c9e7262
Binary files /dev/null and b/public/media/stock/ecommerce/121.gif differ
diff --git a/public/media/stock/ecommerce/122.gif b/public/media/stock/ecommerce/122.gif
new file mode 100644
index 0000000..fb05fc1
Binary files /dev/null and b/public/media/stock/ecommerce/122.gif differ
diff --git a/public/media/stock/ecommerce/123.gif b/public/media/stock/ecommerce/123.gif
new file mode 100644
index 0000000..7413f2c
Binary files /dev/null and b/public/media/stock/ecommerce/123.gif differ
diff --git a/public/media/stock/ecommerce/124.gif b/public/media/stock/ecommerce/124.gif
new file mode 100644
index 0000000..bb44f06
Binary files /dev/null and b/public/media/stock/ecommerce/124.gif differ
diff --git a/public/media/stock/ecommerce/125.gif b/public/media/stock/ecommerce/125.gif
new file mode 100644
index 0000000..c6c16c0
Binary files /dev/null and b/public/media/stock/ecommerce/125.gif differ
diff --git a/public/media/stock/ecommerce/126.gif b/public/media/stock/ecommerce/126.gif
new file mode 100644
index 0000000..10f8a7b
Binary files /dev/null and b/public/media/stock/ecommerce/126.gif differ
diff --git a/public/media/stock/ecommerce/127.gif b/public/media/stock/ecommerce/127.gif
new file mode 100644
index 0000000..0bad8fd
Binary files /dev/null and b/public/media/stock/ecommerce/127.gif differ
diff --git a/public/media/stock/ecommerce/128.gif b/public/media/stock/ecommerce/128.gif
new file mode 100644
index 0000000..cfd9626
Binary files /dev/null and b/public/media/stock/ecommerce/128.gif differ
diff --git a/public/media/stock/ecommerce/129.gif b/public/media/stock/ecommerce/129.gif
new file mode 100644
index 0000000..fd95d45
Binary files /dev/null and b/public/media/stock/ecommerce/129.gif differ
diff --git a/public/media/stock/ecommerce/13.gif b/public/media/stock/ecommerce/13.gif
new file mode 100644
index 0000000..9e5883a
Binary files /dev/null and b/public/media/stock/ecommerce/13.gif differ
diff --git a/public/media/stock/ecommerce/130.gif b/public/media/stock/ecommerce/130.gif
new file mode 100644
index 0000000..63ebc71
Binary files /dev/null and b/public/media/stock/ecommerce/130.gif differ
diff --git a/public/media/stock/ecommerce/131.gif b/public/media/stock/ecommerce/131.gif
new file mode 100644
index 0000000..6ad2583
Binary files /dev/null and b/public/media/stock/ecommerce/131.gif differ
diff --git a/public/media/stock/ecommerce/132.gif b/public/media/stock/ecommerce/132.gif
new file mode 100644
index 0000000..74f8249
Binary files /dev/null and b/public/media/stock/ecommerce/132.gif differ
diff --git a/public/media/stock/ecommerce/133.gif b/public/media/stock/ecommerce/133.gif
new file mode 100644
index 0000000..db8e1f6
Binary files /dev/null and b/public/media/stock/ecommerce/133.gif differ
diff --git a/public/media/stock/ecommerce/134.gif b/public/media/stock/ecommerce/134.gif
new file mode 100644
index 0000000..677a3bc
Binary files /dev/null and b/public/media/stock/ecommerce/134.gif differ
diff --git a/public/media/stock/ecommerce/135.gif b/public/media/stock/ecommerce/135.gif
new file mode 100644
index 0000000..a9c2a0d
Binary files /dev/null and b/public/media/stock/ecommerce/135.gif differ
diff --git a/public/media/stock/ecommerce/136.gif b/public/media/stock/ecommerce/136.gif
new file mode 100644
index 0000000..5722bd7
Binary files /dev/null and b/public/media/stock/ecommerce/136.gif differ
diff --git a/public/media/stock/ecommerce/137.gif b/public/media/stock/ecommerce/137.gif
new file mode 100644
index 0000000..ca882d0
Binary files /dev/null and b/public/media/stock/ecommerce/137.gif differ
diff --git a/public/media/stock/ecommerce/138.gif b/public/media/stock/ecommerce/138.gif
new file mode 100644
index 0000000..bdcb69f
Binary files /dev/null and b/public/media/stock/ecommerce/138.gif differ
diff --git a/public/media/stock/ecommerce/139.gif b/public/media/stock/ecommerce/139.gif
new file mode 100644
index 0000000..c21f809
Binary files /dev/null and b/public/media/stock/ecommerce/139.gif differ
diff --git a/public/media/stock/ecommerce/14.gif b/public/media/stock/ecommerce/14.gif
new file mode 100644
index 0000000..d57c86e
Binary files /dev/null and b/public/media/stock/ecommerce/14.gif differ
diff --git a/public/media/stock/ecommerce/140.gif b/public/media/stock/ecommerce/140.gif
new file mode 100644
index 0000000..e9b4e98
Binary files /dev/null and b/public/media/stock/ecommerce/140.gif differ
diff --git a/public/media/stock/ecommerce/141.gif b/public/media/stock/ecommerce/141.gif
new file mode 100644
index 0000000..7580239
Binary files /dev/null and b/public/media/stock/ecommerce/141.gif differ
diff --git a/public/media/stock/ecommerce/142.gif b/public/media/stock/ecommerce/142.gif
new file mode 100644
index 0000000..f956dd2
Binary files /dev/null and b/public/media/stock/ecommerce/142.gif differ
diff --git a/public/media/stock/ecommerce/143.gif b/public/media/stock/ecommerce/143.gif
new file mode 100644
index 0000000..abc28ac
Binary files /dev/null and b/public/media/stock/ecommerce/143.gif differ
diff --git a/public/media/stock/ecommerce/145.gif b/public/media/stock/ecommerce/145.gif
new file mode 100644
index 0000000..f897667
Binary files /dev/null and b/public/media/stock/ecommerce/145.gif differ
diff --git a/public/media/stock/ecommerce/146.gif b/public/media/stock/ecommerce/146.gif
new file mode 100644
index 0000000..443972a
Binary files /dev/null and b/public/media/stock/ecommerce/146.gif differ
diff --git a/public/media/stock/ecommerce/147.gif b/public/media/stock/ecommerce/147.gif
new file mode 100644
index 0000000..6ef845f
Binary files /dev/null and b/public/media/stock/ecommerce/147.gif differ
diff --git a/public/media/stock/ecommerce/148.gif b/public/media/stock/ecommerce/148.gif
new file mode 100644
index 0000000..3f19bc4
Binary files /dev/null and b/public/media/stock/ecommerce/148.gif differ
diff --git a/public/media/stock/ecommerce/149.gif b/public/media/stock/ecommerce/149.gif
new file mode 100644
index 0000000..d8c82b6
Binary files /dev/null and b/public/media/stock/ecommerce/149.gif differ
diff --git a/public/media/stock/ecommerce/15.gif b/public/media/stock/ecommerce/15.gif
new file mode 100644
index 0000000..203b565
Binary files /dev/null and b/public/media/stock/ecommerce/15.gif differ
diff --git a/public/media/stock/ecommerce/150.gif b/public/media/stock/ecommerce/150.gif
new file mode 100644
index 0000000..1e1ae4a
Binary files /dev/null and b/public/media/stock/ecommerce/150.gif differ
diff --git a/public/media/stock/ecommerce/151.gif b/public/media/stock/ecommerce/151.gif
new file mode 100644
index 0000000..64da84e
Binary files /dev/null and b/public/media/stock/ecommerce/151.gif differ
diff --git a/public/media/stock/ecommerce/152.gif b/public/media/stock/ecommerce/152.gif
new file mode 100644
index 0000000..5a14527
Binary files /dev/null and b/public/media/stock/ecommerce/152.gif differ
diff --git a/public/media/stock/ecommerce/153.gif b/public/media/stock/ecommerce/153.gif
new file mode 100644
index 0000000..022fef5
Binary files /dev/null and b/public/media/stock/ecommerce/153.gif differ
diff --git a/public/media/stock/ecommerce/154.gif b/public/media/stock/ecommerce/154.gif
new file mode 100644
index 0000000..78bdff1
Binary files /dev/null and b/public/media/stock/ecommerce/154.gif differ
diff --git a/public/media/stock/ecommerce/155.gif b/public/media/stock/ecommerce/155.gif
new file mode 100644
index 0000000..5cdca36
Binary files /dev/null and b/public/media/stock/ecommerce/155.gif differ
diff --git a/public/media/stock/ecommerce/156.gif b/public/media/stock/ecommerce/156.gif
new file mode 100644
index 0000000..70dbe3a
Binary files /dev/null and b/public/media/stock/ecommerce/156.gif differ
diff --git a/public/media/stock/ecommerce/157.gif b/public/media/stock/ecommerce/157.gif
new file mode 100644
index 0000000..80066ac
Binary files /dev/null and b/public/media/stock/ecommerce/157.gif differ
diff --git a/public/media/stock/ecommerce/158.gif b/public/media/stock/ecommerce/158.gif
new file mode 100644
index 0000000..0e8f80e
Binary files /dev/null and b/public/media/stock/ecommerce/158.gif differ
diff --git a/public/media/stock/ecommerce/159.gif b/public/media/stock/ecommerce/159.gif
new file mode 100644
index 0000000..9136a73
Binary files /dev/null and b/public/media/stock/ecommerce/159.gif differ
diff --git a/public/media/stock/ecommerce/16.gif b/public/media/stock/ecommerce/16.gif
new file mode 100644
index 0000000..77b5b52
Binary files /dev/null and b/public/media/stock/ecommerce/16.gif differ
diff --git a/public/media/stock/ecommerce/160.gif b/public/media/stock/ecommerce/160.gif
new file mode 100644
index 0000000..22a9ad8
Binary files /dev/null and b/public/media/stock/ecommerce/160.gif differ
diff --git a/public/media/stock/ecommerce/161.gif b/public/media/stock/ecommerce/161.gif
new file mode 100644
index 0000000..2ab4fba
Binary files /dev/null and b/public/media/stock/ecommerce/161.gif differ
diff --git a/public/media/stock/ecommerce/162.gif b/public/media/stock/ecommerce/162.gif
new file mode 100644
index 0000000..732d2f9
Binary files /dev/null and b/public/media/stock/ecommerce/162.gif differ
diff --git a/public/media/stock/ecommerce/163.gif b/public/media/stock/ecommerce/163.gif
new file mode 100644
index 0000000..b1094be
Binary files /dev/null and b/public/media/stock/ecommerce/163.gif differ
diff --git a/public/media/stock/ecommerce/164.gif b/public/media/stock/ecommerce/164.gif
new file mode 100644
index 0000000..a0a5f51
Binary files /dev/null and b/public/media/stock/ecommerce/164.gif differ
diff --git a/public/media/stock/ecommerce/168.gif b/public/media/stock/ecommerce/168.gif
new file mode 100644
index 0000000..b127956
Binary files /dev/null and b/public/media/stock/ecommerce/168.gif differ
diff --git a/public/media/stock/ecommerce/169.gif b/public/media/stock/ecommerce/169.gif
new file mode 100644
index 0000000..b258458
Binary files /dev/null and b/public/media/stock/ecommerce/169.gif differ
diff --git a/public/media/stock/ecommerce/17.gif b/public/media/stock/ecommerce/17.gif
new file mode 100644
index 0000000..4dcfa59
Binary files /dev/null and b/public/media/stock/ecommerce/17.gif differ
diff --git a/public/media/stock/ecommerce/170.gif b/public/media/stock/ecommerce/170.gif
new file mode 100644
index 0000000..83e12d0
Binary files /dev/null and b/public/media/stock/ecommerce/170.gif differ
diff --git a/public/media/stock/ecommerce/171.gif b/public/media/stock/ecommerce/171.gif
new file mode 100644
index 0000000..c64c39f
Binary files /dev/null and b/public/media/stock/ecommerce/171.gif differ
diff --git a/public/media/stock/ecommerce/172.gif b/public/media/stock/ecommerce/172.gif
new file mode 100644
index 0000000..43dd459
Binary files /dev/null and b/public/media/stock/ecommerce/172.gif differ
diff --git a/public/media/stock/ecommerce/173.gif b/public/media/stock/ecommerce/173.gif
new file mode 100644
index 0000000..16cfd09
Binary files /dev/null and b/public/media/stock/ecommerce/173.gif differ
diff --git a/public/media/stock/ecommerce/174.gif b/public/media/stock/ecommerce/174.gif
new file mode 100644
index 0000000..08faaf5
Binary files /dev/null and b/public/media/stock/ecommerce/174.gif differ
diff --git a/public/media/stock/ecommerce/175.gif b/public/media/stock/ecommerce/175.gif
new file mode 100644
index 0000000..76bd7e7
Binary files /dev/null and b/public/media/stock/ecommerce/175.gif differ
diff --git a/public/media/stock/ecommerce/176.gif b/public/media/stock/ecommerce/176.gif
new file mode 100644
index 0000000..30d50eb
Binary files /dev/null and b/public/media/stock/ecommerce/176.gif differ
diff --git a/public/media/stock/ecommerce/177.gif b/public/media/stock/ecommerce/177.gif
new file mode 100644
index 0000000..2aca807
Binary files /dev/null and b/public/media/stock/ecommerce/177.gif differ
diff --git a/public/media/stock/ecommerce/178.gif b/public/media/stock/ecommerce/178.gif
new file mode 100644
index 0000000..ac5a7af
Binary files /dev/null and b/public/media/stock/ecommerce/178.gif differ
diff --git a/public/media/stock/ecommerce/179.gif b/public/media/stock/ecommerce/179.gif
new file mode 100644
index 0000000..a825ab2
Binary files /dev/null and b/public/media/stock/ecommerce/179.gif differ
diff --git a/public/media/stock/ecommerce/18.gif b/public/media/stock/ecommerce/18.gif
new file mode 100644
index 0000000..551b637
Binary files /dev/null and b/public/media/stock/ecommerce/18.gif differ
diff --git a/public/media/stock/ecommerce/180.gif b/public/media/stock/ecommerce/180.gif
new file mode 100644
index 0000000..9a75ccd
Binary files /dev/null and b/public/media/stock/ecommerce/180.gif differ
diff --git a/public/media/stock/ecommerce/181.gif b/public/media/stock/ecommerce/181.gif
new file mode 100644
index 0000000..63207a6
Binary files /dev/null and b/public/media/stock/ecommerce/181.gif differ
diff --git a/public/media/stock/ecommerce/182.gif b/public/media/stock/ecommerce/182.gif
new file mode 100644
index 0000000..12f41d2
Binary files /dev/null and b/public/media/stock/ecommerce/182.gif differ
diff --git a/public/media/stock/ecommerce/183.gif b/public/media/stock/ecommerce/183.gif
new file mode 100644
index 0000000..3ae13f0
Binary files /dev/null and b/public/media/stock/ecommerce/183.gif differ
diff --git a/public/media/stock/ecommerce/184.gif b/public/media/stock/ecommerce/184.gif
new file mode 100644
index 0000000..d6bbb45
Binary files /dev/null and b/public/media/stock/ecommerce/184.gif differ
diff --git a/public/media/stock/ecommerce/185.gif b/public/media/stock/ecommerce/185.gif
new file mode 100644
index 0000000..c9b75be
Binary files /dev/null and b/public/media/stock/ecommerce/185.gif differ
diff --git a/public/media/stock/ecommerce/186.gif b/public/media/stock/ecommerce/186.gif
new file mode 100644
index 0000000..ac32cef
Binary files /dev/null and b/public/media/stock/ecommerce/186.gif differ
diff --git a/public/media/stock/ecommerce/189.gif b/public/media/stock/ecommerce/189.gif
new file mode 100644
index 0000000..e23e46a
Binary files /dev/null and b/public/media/stock/ecommerce/189.gif differ
diff --git a/public/media/stock/ecommerce/19.gif b/public/media/stock/ecommerce/19.gif
new file mode 100644
index 0000000..b6a048a
Binary files /dev/null and b/public/media/stock/ecommerce/19.gif differ
diff --git a/public/media/stock/ecommerce/190.gif b/public/media/stock/ecommerce/190.gif
new file mode 100644
index 0000000..a4baff3
Binary files /dev/null and b/public/media/stock/ecommerce/190.gif differ
diff --git a/public/media/stock/ecommerce/191.gif b/public/media/stock/ecommerce/191.gif
new file mode 100644
index 0000000..ab67517
Binary files /dev/null and b/public/media/stock/ecommerce/191.gif differ
diff --git a/public/media/stock/ecommerce/192.gif b/public/media/stock/ecommerce/192.gif
new file mode 100644
index 0000000..88d4da4
Binary files /dev/null and b/public/media/stock/ecommerce/192.gif differ
diff --git a/public/media/stock/ecommerce/193.gif b/public/media/stock/ecommerce/193.gif
new file mode 100644
index 0000000..896fe2b
Binary files /dev/null and b/public/media/stock/ecommerce/193.gif differ
diff --git a/public/media/stock/ecommerce/194.gif b/public/media/stock/ecommerce/194.gif
new file mode 100644
index 0000000..b7c46c0
Binary files /dev/null and b/public/media/stock/ecommerce/194.gif differ
diff --git a/public/media/stock/ecommerce/195.gif b/public/media/stock/ecommerce/195.gif
new file mode 100644
index 0000000..8f52ccc
Binary files /dev/null and b/public/media/stock/ecommerce/195.gif differ
diff --git a/public/media/stock/ecommerce/196.gif b/public/media/stock/ecommerce/196.gif
new file mode 100644
index 0000000..ee5435b
Binary files /dev/null and b/public/media/stock/ecommerce/196.gif differ
diff --git a/public/media/stock/ecommerce/197.gif b/public/media/stock/ecommerce/197.gif
new file mode 100644
index 0000000..f0d31b1
Binary files /dev/null and b/public/media/stock/ecommerce/197.gif differ
diff --git a/public/media/stock/ecommerce/198.gif b/public/media/stock/ecommerce/198.gif
new file mode 100644
index 0000000..d32fafe
Binary files /dev/null and b/public/media/stock/ecommerce/198.gif differ
diff --git a/public/media/stock/ecommerce/199.gif b/public/media/stock/ecommerce/199.gif
new file mode 100644
index 0000000..9b59b5b
Binary files /dev/null and b/public/media/stock/ecommerce/199.gif differ
diff --git a/public/media/stock/ecommerce/2.gif b/public/media/stock/ecommerce/2.gif
new file mode 100644
index 0000000..58d475b
Binary files /dev/null and b/public/media/stock/ecommerce/2.gif differ
diff --git a/public/media/stock/ecommerce/20.gif b/public/media/stock/ecommerce/20.gif
new file mode 100644
index 0000000..2e7da95
Binary files /dev/null and b/public/media/stock/ecommerce/20.gif differ
diff --git a/public/media/stock/ecommerce/200.gif b/public/media/stock/ecommerce/200.gif
new file mode 100644
index 0000000..1df3763
Binary files /dev/null and b/public/media/stock/ecommerce/200.gif differ
diff --git a/public/media/stock/ecommerce/201.gif b/public/media/stock/ecommerce/201.gif
new file mode 100644
index 0000000..c72d245
Binary files /dev/null and b/public/media/stock/ecommerce/201.gif differ
diff --git a/public/media/stock/ecommerce/202.gif b/public/media/stock/ecommerce/202.gif
new file mode 100644
index 0000000..118a6ec
Binary files /dev/null and b/public/media/stock/ecommerce/202.gif differ
diff --git a/public/media/stock/ecommerce/203.gif b/public/media/stock/ecommerce/203.gif
new file mode 100644
index 0000000..1a58d66
Binary files /dev/null and b/public/media/stock/ecommerce/203.gif differ
diff --git a/public/media/stock/ecommerce/204.gif b/public/media/stock/ecommerce/204.gif
new file mode 100644
index 0000000..8ec59fe
Binary files /dev/null and b/public/media/stock/ecommerce/204.gif differ
diff --git a/public/media/stock/ecommerce/205.gif b/public/media/stock/ecommerce/205.gif
new file mode 100644
index 0000000..d5567f4
Binary files /dev/null and b/public/media/stock/ecommerce/205.gif differ
diff --git a/public/media/stock/ecommerce/206.gif b/public/media/stock/ecommerce/206.gif
new file mode 100644
index 0000000..e1f00a8
Binary files /dev/null and b/public/media/stock/ecommerce/206.gif differ
diff --git a/public/media/stock/ecommerce/207.gif b/public/media/stock/ecommerce/207.gif
new file mode 100644
index 0000000..b117324
Binary files /dev/null and b/public/media/stock/ecommerce/207.gif differ
diff --git a/public/media/stock/ecommerce/208.gif b/public/media/stock/ecommerce/208.gif
new file mode 100644
index 0000000..cf8da19
Binary files /dev/null and b/public/media/stock/ecommerce/208.gif differ
diff --git a/public/media/stock/ecommerce/209.gif b/public/media/stock/ecommerce/209.gif
new file mode 100644
index 0000000..665999e
Binary files /dev/null and b/public/media/stock/ecommerce/209.gif differ
diff --git a/public/media/stock/ecommerce/21.gif b/public/media/stock/ecommerce/21.gif
new file mode 100644
index 0000000..7ee0483
Binary files /dev/null and b/public/media/stock/ecommerce/21.gif differ
diff --git a/public/media/stock/ecommerce/210.gif b/public/media/stock/ecommerce/210.gif
new file mode 100644
index 0000000..6595892
Binary files /dev/null and b/public/media/stock/ecommerce/210.gif differ
diff --git a/public/media/stock/ecommerce/211.gif b/public/media/stock/ecommerce/211.gif
new file mode 100644
index 0000000..b3d3b7a
Binary files /dev/null and b/public/media/stock/ecommerce/211.gif differ
diff --git a/public/media/stock/ecommerce/212.gif b/public/media/stock/ecommerce/212.gif
new file mode 100644
index 0000000..fa723f0
Binary files /dev/null and b/public/media/stock/ecommerce/212.gif differ
diff --git a/public/media/stock/ecommerce/213.gif b/public/media/stock/ecommerce/213.gif
new file mode 100644
index 0000000..9634309
Binary files /dev/null and b/public/media/stock/ecommerce/213.gif differ
diff --git a/public/media/stock/ecommerce/214.gif b/public/media/stock/ecommerce/214.gif
new file mode 100644
index 0000000..f55f7a7
Binary files /dev/null and b/public/media/stock/ecommerce/214.gif differ
diff --git a/public/media/stock/ecommerce/215.gif b/public/media/stock/ecommerce/215.gif
new file mode 100644
index 0000000..0886f51
Binary files /dev/null and b/public/media/stock/ecommerce/215.gif differ
diff --git a/public/media/stock/ecommerce/216.gif b/public/media/stock/ecommerce/216.gif
new file mode 100644
index 0000000..bda3ada
Binary files /dev/null and b/public/media/stock/ecommerce/216.gif differ
diff --git a/public/media/stock/ecommerce/217.gif b/public/media/stock/ecommerce/217.gif
new file mode 100644
index 0000000..bb767f0
Binary files /dev/null and b/public/media/stock/ecommerce/217.gif differ
diff --git a/public/media/stock/ecommerce/218.gif b/public/media/stock/ecommerce/218.gif
new file mode 100644
index 0000000..f60af32
Binary files /dev/null and b/public/media/stock/ecommerce/218.gif differ
diff --git a/public/media/stock/ecommerce/219.gif b/public/media/stock/ecommerce/219.gif
new file mode 100644
index 0000000..3f687a7
Binary files /dev/null and b/public/media/stock/ecommerce/219.gif differ
diff --git a/public/media/stock/ecommerce/22.gif b/public/media/stock/ecommerce/22.gif
new file mode 100644
index 0000000..9dfb013
Binary files /dev/null and b/public/media/stock/ecommerce/22.gif differ
diff --git a/public/media/stock/ecommerce/23.gif b/public/media/stock/ecommerce/23.gif
new file mode 100644
index 0000000..ae5e346
Binary files /dev/null and b/public/media/stock/ecommerce/23.gif differ
diff --git a/public/media/stock/ecommerce/24.gif b/public/media/stock/ecommerce/24.gif
new file mode 100644
index 0000000..150117a
Binary files /dev/null and b/public/media/stock/ecommerce/24.gif differ
diff --git a/public/media/stock/ecommerce/25.gif b/public/media/stock/ecommerce/25.gif
new file mode 100644
index 0000000..910bfa7
Binary files /dev/null and b/public/media/stock/ecommerce/25.gif differ
diff --git a/public/media/stock/ecommerce/26.gif b/public/media/stock/ecommerce/26.gif
new file mode 100644
index 0000000..53d1e77
Binary files /dev/null and b/public/media/stock/ecommerce/26.gif differ
diff --git a/public/media/stock/ecommerce/27.gif b/public/media/stock/ecommerce/27.gif
new file mode 100644
index 0000000..9226c09
Binary files /dev/null and b/public/media/stock/ecommerce/27.gif differ
diff --git a/public/media/stock/ecommerce/28.gif b/public/media/stock/ecommerce/28.gif
new file mode 100644
index 0000000..756e659
Binary files /dev/null and b/public/media/stock/ecommerce/28.gif differ
diff --git a/public/media/stock/ecommerce/29.gif b/public/media/stock/ecommerce/29.gif
new file mode 100644
index 0000000..194f9ac
Binary files /dev/null and b/public/media/stock/ecommerce/29.gif differ
diff --git a/public/media/stock/ecommerce/3.gif b/public/media/stock/ecommerce/3.gif
new file mode 100644
index 0000000..bebac0d
Binary files /dev/null and b/public/media/stock/ecommerce/3.gif differ
diff --git a/public/media/stock/ecommerce/30.gif b/public/media/stock/ecommerce/30.gif
new file mode 100644
index 0000000..ce5e00e
Binary files /dev/null and b/public/media/stock/ecommerce/30.gif differ
diff --git a/public/media/stock/ecommerce/31.gif b/public/media/stock/ecommerce/31.gif
new file mode 100644
index 0000000..8000b5c
Binary files /dev/null and b/public/media/stock/ecommerce/31.gif differ
diff --git a/public/media/stock/ecommerce/32.gif b/public/media/stock/ecommerce/32.gif
new file mode 100644
index 0000000..9c9db50
Binary files /dev/null and b/public/media/stock/ecommerce/32.gif differ
diff --git a/public/media/stock/ecommerce/33.gif b/public/media/stock/ecommerce/33.gif
new file mode 100644
index 0000000..1262d9f
Binary files /dev/null and b/public/media/stock/ecommerce/33.gif differ
diff --git a/public/media/stock/ecommerce/34.gif b/public/media/stock/ecommerce/34.gif
new file mode 100644
index 0000000..d5de4a1
Binary files /dev/null and b/public/media/stock/ecommerce/34.gif differ
diff --git a/public/media/stock/ecommerce/35.gif b/public/media/stock/ecommerce/35.gif
new file mode 100644
index 0000000..5f68d12
Binary files /dev/null and b/public/media/stock/ecommerce/35.gif differ
diff --git a/public/media/stock/ecommerce/36.gif b/public/media/stock/ecommerce/36.gif
new file mode 100644
index 0000000..9e5cd17
Binary files /dev/null and b/public/media/stock/ecommerce/36.gif differ
diff --git a/public/media/stock/ecommerce/37.gif b/public/media/stock/ecommerce/37.gif
new file mode 100644
index 0000000..f2d8c04
Binary files /dev/null and b/public/media/stock/ecommerce/37.gif differ
diff --git a/public/media/stock/ecommerce/38.gif b/public/media/stock/ecommerce/38.gif
new file mode 100644
index 0000000..e3a9c22
Binary files /dev/null and b/public/media/stock/ecommerce/38.gif differ
diff --git a/public/media/stock/ecommerce/39.gif b/public/media/stock/ecommerce/39.gif
new file mode 100644
index 0000000..5ab836a
Binary files /dev/null and b/public/media/stock/ecommerce/39.gif differ
diff --git a/public/media/stock/ecommerce/4.gif b/public/media/stock/ecommerce/4.gif
new file mode 100644
index 0000000..8c00328
Binary files /dev/null and b/public/media/stock/ecommerce/4.gif differ
diff --git a/public/media/stock/ecommerce/40.gif b/public/media/stock/ecommerce/40.gif
new file mode 100644
index 0000000..5198a0c
Binary files /dev/null and b/public/media/stock/ecommerce/40.gif differ
diff --git a/public/media/stock/ecommerce/41.gif b/public/media/stock/ecommerce/41.gif
new file mode 100644
index 0000000..873b22f
Binary files /dev/null and b/public/media/stock/ecommerce/41.gif differ
diff --git a/public/media/stock/ecommerce/42.gif b/public/media/stock/ecommerce/42.gif
new file mode 100644
index 0000000..1a5aac1
Binary files /dev/null and b/public/media/stock/ecommerce/42.gif differ
diff --git a/public/media/stock/ecommerce/43.gif b/public/media/stock/ecommerce/43.gif
new file mode 100644
index 0000000..832b27b
Binary files /dev/null and b/public/media/stock/ecommerce/43.gif differ
diff --git a/public/media/stock/ecommerce/44.gif b/public/media/stock/ecommerce/44.gif
new file mode 100644
index 0000000..08faaf5
Binary files /dev/null and b/public/media/stock/ecommerce/44.gif differ
diff --git a/public/media/stock/ecommerce/45.gif b/public/media/stock/ecommerce/45.gif
new file mode 100644
index 0000000..98fda87
Binary files /dev/null and b/public/media/stock/ecommerce/45.gif differ
diff --git a/public/media/stock/ecommerce/46.gif b/public/media/stock/ecommerce/46.gif
new file mode 100644
index 0000000..148344b
Binary files /dev/null and b/public/media/stock/ecommerce/46.gif differ
diff --git a/public/media/stock/ecommerce/47.gif b/public/media/stock/ecommerce/47.gif
new file mode 100644
index 0000000..b4b23fe
Binary files /dev/null and b/public/media/stock/ecommerce/47.gif differ
diff --git a/public/media/stock/ecommerce/48.gif b/public/media/stock/ecommerce/48.gif
new file mode 100644
index 0000000..566839e
Binary files /dev/null and b/public/media/stock/ecommerce/48.gif differ
diff --git a/public/media/stock/ecommerce/49.gif b/public/media/stock/ecommerce/49.gif
new file mode 100644
index 0000000..9b06720
Binary files /dev/null and b/public/media/stock/ecommerce/49.gif differ
diff --git a/public/media/stock/ecommerce/5.gif b/public/media/stock/ecommerce/5.gif
new file mode 100644
index 0000000..a4d425c
Binary files /dev/null and b/public/media/stock/ecommerce/5.gif differ
diff --git a/public/media/stock/ecommerce/50.gif b/public/media/stock/ecommerce/50.gif
new file mode 100644
index 0000000..40da9ed
Binary files /dev/null and b/public/media/stock/ecommerce/50.gif differ
diff --git a/public/media/stock/ecommerce/51.gif b/public/media/stock/ecommerce/51.gif
new file mode 100644
index 0000000..82ab36b
Binary files /dev/null and b/public/media/stock/ecommerce/51.gif differ
diff --git a/public/media/stock/ecommerce/52.gif b/public/media/stock/ecommerce/52.gif
new file mode 100644
index 0000000..a98bb52
Binary files /dev/null and b/public/media/stock/ecommerce/52.gif differ
diff --git a/public/media/stock/ecommerce/53.gif b/public/media/stock/ecommerce/53.gif
new file mode 100644
index 0000000..48ac853
Binary files /dev/null and b/public/media/stock/ecommerce/53.gif differ
diff --git a/public/media/stock/ecommerce/54.gif b/public/media/stock/ecommerce/54.gif
new file mode 100644
index 0000000..118cc1c
Binary files /dev/null and b/public/media/stock/ecommerce/54.gif differ
diff --git a/public/media/stock/ecommerce/55.gif b/public/media/stock/ecommerce/55.gif
new file mode 100644
index 0000000..de99379
Binary files /dev/null and b/public/media/stock/ecommerce/55.gif differ
diff --git a/public/media/stock/ecommerce/56.gif b/public/media/stock/ecommerce/56.gif
new file mode 100644
index 0000000..ed1dbd3
Binary files /dev/null and b/public/media/stock/ecommerce/56.gif differ
diff --git a/public/media/stock/ecommerce/57.gif b/public/media/stock/ecommerce/57.gif
new file mode 100644
index 0000000..7c2d497
Binary files /dev/null and b/public/media/stock/ecommerce/57.gif differ
diff --git a/public/media/stock/ecommerce/58.gif b/public/media/stock/ecommerce/58.gif
new file mode 100644
index 0000000..9b9c8c7
Binary files /dev/null and b/public/media/stock/ecommerce/58.gif differ
diff --git a/public/media/stock/ecommerce/59.gif b/public/media/stock/ecommerce/59.gif
new file mode 100644
index 0000000..ce9490d
Binary files /dev/null and b/public/media/stock/ecommerce/59.gif differ
diff --git a/public/media/stock/ecommerce/6.gif b/public/media/stock/ecommerce/6.gif
new file mode 100644
index 0000000..7f693cf
Binary files /dev/null and b/public/media/stock/ecommerce/6.gif differ
diff --git a/public/media/stock/ecommerce/60.gif b/public/media/stock/ecommerce/60.gif
new file mode 100644
index 0000000..f43735e
Binary files /dev/null and b/public/media/stock/ecommerce/60.gif differ
diff --git a/public/media/stock/ecommerce/61.gif b/public/media/stock/ecommerce/61.gif
new file mode 100644
index 0000000..9dac3b5
Binary files /dev/null and b/public/media/stock/ecommerce/61.gif differ
diff --git a/public/media/stock/ecommerce/62.gif b/public/media/stock/ecommerce/62.gif
new file mode 100644
index 0000000..e354a05
Binary files /dev/null and b/public/media/stock/ecommerce/62.gif differ
diff --git a/public/media/stock/ecommerce/63.gif b/public/media/stock/ecommerce/63.gif
new file mode 100644
index 0000000..bb23e1a
Binary files /dev/null and b/public/media/stock/ecommerce/63.gif differ
diff --git a/public/media/stock/ecommerce/64.gif b/public/media/stock/ecommerce/64.gif
new file mode 100644
index 0000000..14a9fbf
Binary files /dev/null and b/public/media/stock/ecommerce/64.gif differ
diff --git a/public/media/stock/ecommerce/65.gif b/public/media/stock/ecommerce/65.gif
new file mode 100644
index 0000000..c0e5754
Binary files /dev/null and b/public/media/stock/ecommerce/65.gif differ
diff --git a/public/media/stock/ecommerce/66.gif b/public/media/stock/ecommerce/66.gif
new file mode 100644
index 0000000..e5b029d
Binary files /dev/null and b/public/media/stock/ecommerce/66.gif differ
diff --git a/public/media/stock/ecommerce/67.gif b/public/media/stock/ecommerce/67.gif
new file mode 100644
index 0000000..5e3f373
Binary files /dev/null and b/public/media/stock/ecommerce/67.gif differ
diff --git a/public/media/stock/ecommerce/68.gif b/public/media/stock/ecommerce/68.gif
new file mode 100644
index 0000000..edd2a19
Binary files /dev/null and b/public/media/stock/ecommerce/68.gif differ
diff --git a/public/media/stock/ecommerce/69.gif b/public/media/stock/ecommerce/69.gif
new file mode 100644
index 0000000..36ba3c1
Binary files /dev/null and b/public/media/stock/ecommerce/69.gif differ
diff --git a/public/media/stock/ecommerce/7.gif b/public/media/stock/ecommerce/7.gif
new file mode 100644
index 0000000..5ea66ba
Binary files /dev/null and b/public/media/stock/ecommerce/7.gif differ
diff --git a/public/media/stock/ecommerce/70.gif b/public/media/stock/ecommerce/70.gif
new file mode 100644
index 0000000..243a818
Binary files /dev/null and b/public/media/stock/ecommerce/70.gif differ
diff --git a/public/media/stock/ecommerce/71.gif b/public/media/stock/ecommerce/71.gif
new file mode 100644
index 0000000..91a1b3e
Binary files /dev/null and b/public/media/stock/ecommerce/71.gif differ
diff --git a/public/media/stock/ecommerce/72.gif b/public/media/stock/ecommerce/72.gif
new file mode 100644
index 0000000..c1d3915
Binary files /dev/null and b/public/media/stock/ecommerce/72.gif differ
diff --git a/public/media/stock/ecommerce/74.gif b/public/media/stock/ecommerce/74.gif
new file mode 100644
index 0000000..0834fad
Binary files /dev/null and b/public/media/stock/ecommerce/74.gif differ
diff --git a/public/media/stock/ecommerce/75.gif b/public/media/stock/ecommerce/75.gif
new file mode 100644
index 0000000..66f9cdd
Binary files /dev/null and b/public/media/stock/ecommerce/75.gif differ
diff --git a/public/media/stock/ecommerce/76.gif b/public/media/stock/ecommerce/76.gif
new file mode 100644
index 0000000..6f4607f
Binary files /dev/null and b/public/media/stock/ecommerce/76.gif differ
diff --git a/public/media/stock/ecommerce/77.gif b/public/media/stock/ecommerce/77.gif
new file mode 100644
index 0000000..6c72d86
Binary files /dev/null and b/public/media/stock/ecommerce/77.gif differ
diff --git a/public/media/stock/ecommerce/78.gif b/public/media/stock/ecommerce/78.gif
new file mode 100644
index 0000000..0d0ae0f
Binary files /dev/null and b/public/media/stock/ecommerce/78.gif differ
diff --git a/public/media/stock/ecommerce/79.gif b/public/media/stock/ecommerce/79.gif
new file mode 100644
index 0000000..7418f4d
Binary files /dev/null and b/public/media/stock/ecommerce/79.gif differ
diff --git a/public/media/stock/ecommerce/8.gif b/public/media/stock/ecommerce/8.gif
new file mode 100644
index 0000000..d0a6ebe
Binary files /dev/null and b/public/media/stock/ecommerce/8.gif differ
diff --git a/public/media/stock/ecommerce/80.gif b/public/media/stock/ecommerce/80.gif
new file mode 100644
index 0000000..8b5f80f
Binary files /dev/null and b/public/media/stock/ecommerce/80.gif differ
diff --git a/public/media/stock/ecommerce/81.gif b/public/media/stock/ecommerce/81.gif
new file mode 100644
index 0000000..c2e5b03
Binary files /dev/null and b/public/media/stock/ecommerce/81.gif differ
diff --git a/public/media/stock/ecommerce/82.gif b/public/media/stock/ecommerce/82.gif
new file mode 100644
index 0000000..b784400
Binary files /dev/null and b/public/media/stock/ecommerce/82.gif differ
diff --git a/public/media/stock/ecommerce/83.gif b/public/media/stock/ecommerce/83.gif
new file mode 100644
index 0000000..f57057e
Binary files /dev/null and b/public/media/stock/ecommerce/83.gif differ
diff --git a/public/media/stock/ecommerce/84.gif b/public/media/stock/ecommerce/84.gif
new file mode 100644
index 0000000..1cbc2e9
Binary files /dev/null and b/public/media/stock/ecommerce/84.gif differ
diff --git a/public/media/stock/ecommerce/85.gif b/public/media/stock/ecommerce/85.gif
new file mode 100644
index 0000000..b8d5208
Binary files /dev/null and b/public/media/stock/ecommerce/85.gif differ
diff --git a/public/media/stock/ecommerce/86.gif b/public/media/stock/ecommerce/86.gif
new file mode 100644
index 0000000..c1d7c4f
Binary files /dev/null and b/public/media/stock/ecommerce/86.gif differ
diff --git a/public/media/stock/ecommerce/87.gif b/public/media/stock/ecommerce/87.gif
new file mode 100644
index 0000000..f09727c
Binary files /dev/null and b/public/media/stock/ecommerce/87.gif differ
diff --git a/public/media/stock/ecommerce/88.gif b/public/media/stock/ecommerce/88.gif
new file mode 100644
index 0000000..feaeab4
Binary files /dev/null and b/public/media/stock/ecommerce/88.gif differ
diff --git a/public/media/stock/ecommerce/89.gif b/public/media/stock/ecommerce/89.gif
new file mode 100644
index 0000000..f47331b
Binary files /dev/null and b/public/media/stock/ecommerce/89.gif differ
diff --git a/public/media/stock/ecommerce/9.gif b/public/media/stock/ecommerce/9.gif
new file mode 100644
index 0000000..9c78a76
Binary files /dev/null and b/public/media/stock/ecommerce/9.gif differ
diff --git a/public/media/stock/ecommerce/90.gif b/public/media/stock/ecommerce/90.gif
new file mode 100644
index 0000000..3863b24
Binary files /dev/null and b/public/media/stock/ecommerce/90.gif differ
diff --git a/public/media/stock/ecommerce/91.gif b/public/media/stock/ecommerce/91.gif
new file mode 100644
index 0000000..62e57d6
Binary files /dev/null and b/public/media/stock/ecommerce/91.gif differ
diff --git a/public/media/stock/ecommerce/92.gif b/public/media/stock/ecommerce/92.gif
new file mode 100644
index 0000000..d35362f
Binary files /dev/null and b/public/media/stock/ecommerce/92.gif differ
diff --git a/public/media/stock/ecommerce/93.gif b/public/media/stock/ecommerce/93.gif
new file mode 100644
index 0000000..a21324e
Binary files /dev/null and b/public/media/stock/ecommerce/93.gif differ
diff --git a/public/media/stock/ecommerce/94.gif b/public/media/stock/ecommerce/94.gif
new file mode 100644
index 0000000..59cea90
Binary files /dev/null and b/public/media/stock/ecommerce/94.gif differ
diff --git a/public/media/stock/ecommerce/95.gif b/public/media/stock/ecommerce/95.gif
new file mode 100644
index 0000000..1c3e9e2
Binary files /dev/null and b/public/media/stock/ecommerce/95.gif differ
diff --git a/public/media/stock/ecommerce/96.gif b/public/media/stock/ecommerce/96.gif
new file mode 100644
index 0000000..1186a96
Binary files /dev/null and b/public/media/stock/ecommerce/96.gif differ
diff --git a/public/media/stock/ecommerce/97.gif b/public/media/stock/ecommerce/97.gif
new file mode 100644
index 0000000..c1a38b2
Binary files /dev/null and b/public/media/stock/ecommerce/97.gif differ
diff --git a/public/media/stock/ecommerce/98.gif b/public/media/stock/ecommerce/98.gif
new file mode 100644
index 0000000..d470afb
Binary files /dev/null and b/public/media/stock/ecommerce/98.gif differ
diff --git a/public/media/stock/ecommerce/99.gif b/public/media/stock/ecommerce/99.gif
new file mode 100644
index 0000000..4bd1383
Binary files /dev/null and b/public/media/stock/ecommerce/99.gif differ
diff --git a/public/media/stock/food/img-1.jpg b/public/media/stock/food/img-1.jpg
new file mode 100644
index 0000000..e189e37
Binary files /dev/null and b/public/media/stock/food/img-1.jpg differ
diff --git a/public/media/stock/food/img-10.jpg b/public/media/stock/food/img-10.jpg
new file mode 100644
index 0000000..19db822
Binary files /dev/null and b/public/media/stock/food/img-10.jpg differ
diff --git a/public/media/stock/food/img-11.jpg b/public/media/stock/food/img-11.jpg
new file mode 100644
index 0000000..209f197
Binary files /dev/null and b/public/media/stock/food/img-11.jpg differ
diff --git a/public/media/stock/food/img-2.jpg b/public/media/stock/food/img-2.jpg
new file mode 100644
index 0000000..dd83876
Binary files /dev/null and b/public/media/stock/food/img-2.jpg differ
diff --git a/public/media/stock/food/img-3.jpg b/public/media/stock/food/img-3.jpg
new file mode 100644
index 0000000..1513ad6
Binary files /dev/null and b/public/media/stock/food/img-3.jpg differ
diff --git a/public/media/stock/food/img-4.jpg b/public/media/stock/food/img-4.jpg
new file mode 100644
index 0000000..348fe5f
Binary files /dev/null and b/public/media/stock/food/img-4.jpg differ
diff --git a/public/media/stock/food/img-5.jpg b/public/media/stock/food/img-5.jpg
new file mode 100644
index 0000000..d528fb8
Binary files /dev/null and b/public/media/stock/food/img-5.jpg differ
diff --git a/public/media/stock/food/img-6.jpg b/public/media/stock/food/img-6.jpg
new file mode 100644
index 0000000..2fcdab5
Binary files /dev/null and b/public/media/stock/food/img-6.jpg differ
diff --git a/public/media/stock/food/img-7.jpg b/public/media/stock/food/img-7.jpg
new file mode 100644
index 0000000..891b412
Binary files /dev/null and b/public/media/stock/food/img-7.jpg differ
diff --git a/public/media/stock/food/img-8.jpg b/public/media/stock/food/img-8.jpg
new file mode 100644
index 0000000..562be8b
Binary files /dev/null and b/public/media/stock/food/img-8.jpg differ
diff --git a/public/media/stock/food/img-9.jpg b/public/media/stock/food/img-9.jpg
new file mode 100644
index 0000000..7e902be
Binary files /dev/null and b/public/media/stock/food/img-9.jpg differ
diff --git a/public/media/svg/avatars/001-boy.svg b/public/media/svg/avatars/001-boy.svg
new file mode 100644
index 0000000..a307016
--- /dev/null
+++ b/public/media/svg/avatars/001-boy.svg
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/002-girl.svg b/public/media/svg/avatars/002-girl.svg
new file mode 100644
index 0000000..7a84185
--- /dev/null
+++ b/public/media/svg/avatars/002-girl.svg
@@ -0,0 +1,139 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/003-girl-1.svg b/public/media/svg/avatars/003-girl-1.svg
new file mode 100644
index 0000000..2c490a0
--- /dev/null
+++ b/public/media/svg/avatars/003-girl-1.svg
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/004-boy-1.svg b/public/media/svg/avatars/004-boy-1.svg
new file mode 100644
index 0000000..7cfe5b1
--- /dev/null
+++ b/public/media/svg/avatars/004-boy-1.svg
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/005-girl-2.svg b/public/media/svg/avatars/005-girl-2.svg
new file mode 100644
index 0000000..676da6f
--- /dev/null
+++ b/public/media/svg/avatars/005-girl-2.svg
@@ -0,0 +1,153 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/006-girl-3.svg b/public/media/svg/avatars/006-girl-3.svg
new file mode 100644
index 0000000..f831b43
--- /dev/null
+++ b/public/media/svg/avatars/006-girl-3.svg
@@ -0,0 +1,120 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/007-boy-2.svg b/public/media/svg/avatars/007-boy-2.svg
new file mode 100644
index 0000000..9a9f843
--- /dev/null
+++ b/public/media/svg/avatars/007-boy-2.svg
@@ -0,0 +1,128 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/008-boy-3.svg b/public/media/svg/avatars/008-boy-3.svg
new file mode 100644
index 0000000..c6d01ea
--- /dev/null
+++ b/public/media/svg/avatars/008-boy-3.svg
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/009-boy-4.svg b/public/media/svg/avatars/009-boy-4.svg
new file mode 100644
index 0000000..eded7b6
--- /dev/null
+++ b/public/media/svg/avatars/009-boy-4.svg
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/010-girl-4.svg b/public/media/svg/avatars/010-girl-4.svg
new file mode 100644
index 0000000..4637350
--- /dev/null
+++ b/public/media/svg/avatars/010-girl-4.svg
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/011-boy-5.svg b/public/media/svg/avatars/011-boy-5.svg
new file mode 100644
index 0000000..d454bb7
--- /dev/null
+++ b/public/media/svg/avatars/011-boy-5.svg
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/012-girl-5.svg b/public/media/svg/avatars/012-girl-5.svg
new file mode 100644
index 0000000..8e73230
--- /dev/null
+++ b/public/media/svg/avatars/012-girl-5.svg
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/013-girl-6.svg b/public/media/svg/avatars/013-girl-6.svg
new file mode 100644
index 0000000..f88e25f
--- /dev/null
+++ b/public/media/svg/avatars/013-girl-6.svg
@@ -0,0 +1,112 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/014-girl-7.svg b/public/media/svg/avatars/014-girl-7.svg
new file mode 100644
index 0000000..6b6e375
--- /dev/null
+++ b/public/media/svg/avatars/014-girl-7.svg
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/015-boy-6.svg b/public/media/svg/avatars/015-boy-6.svg
new file mode 100644
index 0000000..65db5d4
--- /dev/null
+++ b/public/media/svg/avatars/015-boy-6.svg
@@ -0,0 +1,98 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/016-boy-7.svg b/public/media/svg/avatars/016-boy-7.svg
new file mode 100644
index 0000000..0d31350
--- /dev/null
+++ b/public/media/svg/avatars/016-boy-7.svg
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/017-girl-8.svg b/public/media/svg/avatars/017-girl-8.svg
new file mode 100644
index 0000000..d34c322
--- /dev/null
+++ b/public/media/svg/avatars/017-girl-8.svg
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/018-girl-9.svg b/public/media/svg/avatars/018-girl-9.svg
new file mode 100644
index 0000000..0225df3
--- /dev/null
+++ b/public/media/svg/avatars/018-girl-9.svg
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/019-girl-10.svg b/public/media/svg/avatars/019-girl-10.svg
new file mode 100644
index 0000000..a5bd193
--- /dev/null
+++ b/public/media/svg/avatars/019-girl-10.svg
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/020-girl-11.svg b/public/media/svg/avatars/020-girl-11.svg
new file mode 100644
index 0000000..f8fa9d7
--- /dev/null
+++ b/public/media/svg/avatars/020-girl-11.svg
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/021-boy-8.svg b/public/media/svg/avatars/021-boy-8.svg
new file mode 100644
index 0000000..dbe8eb1
--- /dev/null
+++ b/public/media/svg/avatars/021-boy-8.svg
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/022-girl-12.svg b/public/media/svg/avatars/022-girl-12.svg
new file mode 100644
index 0000000..4edb24f
--- /dev/null
+++ b/public/media/svg/avatars/022-girl-12.svg
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/023-girl-13.svg b/public/media/svg/avatars/023-girl-13.svg
new file mode 100644
index 0000000..fa1f178
--- /dev/null
+++ b/public/media/svg/avatars/023-girl-13.svg
@@ -0,0 +1,90 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/024-boy-9.svg b/public/media/svg/avatars/024-boy-9.svg
new file mode 100644
index 0000000..cf4752f
--- /dev/null
+++ b/public/media/svg/avatars/024-boy-9.svg
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/025-girl-14.svg b/public/media/svg/avatars/025-girl-14.svg
new file mode 100644
index 0000000..8741b91
--- /dev/null
+++ b/public/media/svg/avatars/025-girl-14.svg
@@ -0,0 +1,138 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/026-boy-10.svg b/public/media/svg/avatars/026-boy-10.svg
new file mode 100644
index 0000000..73468e2
--- /dev/null
+++ b/public/media/svg/avatars/026-boy-10.svg
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/027-girl-15.svg b/public/media/svg/avatars/027-girl-15.svg
new file mode 100644
index 0000000..73969a1
--- /dev/null
+++ b/public/media/svg/avatars/027-girl-15.svg
@@ -0,0 +1,152 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/028-girl-16.svg b/public/media/svg/avatars/028-girl-16.svg
new file mode 100644
index 0000000..ec8bc44
--- /dev/null
+++ b/public/media/svg/avatars/028-girl-16.svg
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/029-boy-11.svg b/public/media/svg/avatars/029-boy-11.svg
new file mode 100644
index 0000000..a8a2ee1
--- /dev/null
+++ b/public/media/svg/avatars/029-boy-11.svg
@@ -0,0 +1,121 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/030-girl-17.svg b/public/media/svg/avatars/030-girl-17.svg
new file mode 100644
index 0000000..bdafd0c
--- /dev/null
+++ b/public/media/svg/avatars/030-girl-17.svg
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/031-boy-12.svg b/public/media/svg/avatars/031-boy-12.svg
new file mode 100644
index 0000000..1db00f5
--- /dev/null
+++ b/public/media/svg/avatars/031-boy-12.svg
@@ -0,0 +1,105 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/032-boy-13.svg b/public/media/svg/avatars/032-boy-13.svg
new file mode 100644
index 0000000..354a874
--- /dev/null
+++ b/public/media/svg/avatars/032-boy-13.svg
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/033-girl-18.svg b/public/media/svg/avatars/033-girl-18.svg
new file mode 100644
index 0000000..a3eeb03
--- /dev/null
+++ b/public/media/svg/avatars/033-girl-18.svg
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/034-boy-14.svg b/public/media/svg/avatars/034-boy-14.svg
new file mode 100644
index 0000000..07e954a
--- /dev/null
+++ b/public/media/svg/avatars/034-boy-14.svg
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/035-boy-15.svg b/public/media/svg/avatars/035-boy-15.svg
new file mode 100644
index 0000000..62a014c
--- /dev/null
+++ b/public/media/svg/avatars/035-boy-15.svg
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/036-girl-19.svg b/public/media/svg/avatars/036-girl-19.svg
new file mode 100644
index 0000000..6f30737
--- /dev/null
+++ b/public/media/svg/avatars/036-girl-19.svg
@@ -0,0 +1,119 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/037-girl-20.svg b/public/media/svg/avatars/037-girl-20.svg
new file mode 100644
index 0000000..044a9bd
--- /dev/null
+++ b/public/media/svg/avatars/037-girl-20.svg
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/038-boy-16.svg b/public/media/svg/avatars/038-boy-16.svg
new file mode 100644
index 0000000..80caa23
--- /dev/null
+++ b/public/media/svg/avatars/038-boy-16.svg
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/039-girl-21.svg b/public/media/svg/avatars/039-girl-21.svg
new file mode 100644
index 0000000..3f13a95
--- /dev/null
+++ b/public/media/svg/avatars/039-girl-21.svg
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/040-boy-17.svg b/public/media/svg/avatars/040-boy-17.svg
new file mode 100644
index 0000000..b0ff0a1
--- /dev/null
+++ b/public/media/svg/avatars/040-boy-17.svg
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/041-girl-22.svg b/public/media/svg/avatars/041-girl-22.svg
new file mode 100644
index 0000000..beb5eea
--- /dev/null
+++ b/public/media/svg/avatars/041-girl-22.svg
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/042-girl-23.svg b/public/media/svg/avatars/042-girl-23.svg
new file mode 100644
index 0000000..76e6c54
--- /dev/null
+++ b/public/media/svg/avatars/042-girl-23.svg
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/043-boy-18.svg b/public/media/svg/avatars/043-boy-18.svg
new file mode 100644
index 0000000..6fd271a
--- /dev/null
+++ b/public/media/svg/avatars/043-boy-18.svg
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/044-boy-19.svg b/public/media/svg/avatars/044-boy-19.svg
new file mode 100644
index 0000000..e1e52b7
--- /dev/null
+++ b/public/media/svg/avatars/044-boy-19.svg
@@ -0,0 +1,116 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/045-boy-20.svg b/public/media/svg/avatars/045-boy-20.svg
new file mode 100644
index 0000000..3cbb351
--- /dev/null
+++ b/public/media/svg/avatars/045-boy-20.svg
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/046-girl-24.svg b/public/media/svg/avatars/046-girl-24.svg
new file mode 100644
index 0000000..c78a3dd
--- /dev/null
+++ b/public/media/svg/avatars/046-girl-24.svg
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/047-girl-25.svg b/public/media/svg/avatars/047-girl-25.svg
new file mode 100644
index 0000000..1b8aa7b
--- /dev/null
+++ b/public/media/svg/avatars/047-girl-25.svg
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/048-boy-21.svg b/public/media/svg/avatars/048-boy-21.svg
new file mode 100644
index 0000000..a00b782
--- /dev/null
+++ b/public/media/svg/avatars/048-boy-21.svg
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/049-boy-22.svg b/public/media/svg/avatars/049-boy-22.svg
new file mode 100644
index 0000000..bf81ff3
--- /dev/null
+++ b/public/media/svg/avatars/049-boy-22.svg
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/050-girl-26.svg b/public/media/svg/avatars/050-girl-26.svg
new file mode 100644
index 0000000..0e93e4c
--- /dev/null
+++ b/public/media/svg/avatars/050-girl-26.svg
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/avatars/blank-dark.svg b/public/media/svg/avatars/blank-dark.svg
new file mode 100644
index 0000000..fac00d6
--- /dev/null
+++ b/public/media/svg/avatars/blank-dark.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/avatars/blank.svg b/public/media/svg/avatars/blank.svg
new file mode 100644
index 0000000..4fc43cd
--- /dev/null
+++ b/public/media/svg/avatars/blank.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/adidas-9.svg b/public/media/svg/brand-logos/adidas-9.svg
new file mode 100644
index 0000000..1e78702
--- /dev/null
+++ b/public/media/svg/brand-logos/adidas-9.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/adidas.svg b/public/media/svg/brand-logos/adidas.svg
new file mode 100644
index 0000000..ec7436f
--- /dev/null
+++ b/public/media/svg/brand-logos/adidas.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/airbnb-2.svg b/public/media/svg/brand-logos/airbnb-2.svg
new file mode 100644
index 0000000..405b8b6
--- /dev/null
+++ b/public/media/svg/brand-logos/airbnb-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/alcatel-mobile-3.svg b/public/media/svg/brand-logos/alcatel-mobile-3.svg
new file mode 100644
index 0000000..2c89993
--- /dev/null
+++ b/public/media/svg/brand-logos/alcatel-mobile-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/amazon-dark.svg b/public/media/svg/brand-logos/amazon-dark.svg
new file mode 100644
index 0000000..372c580
--- /dev/null
+++ b/public/media/svg/brand-logos/amazon-dark.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/amazon.svg b/public/media/svg/brand-logos/amazon.svg
new file mode 100644
index 0000000..77a47d3
--- /dev/null
+++ b/public/media/svg/brand-logos/amazon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/android-wordmark.svg b/public/media/svg/brand-logos/android-wordmark.svg
new file mode 100644
index 0000000..15bd182
--- /dev/null
+++ b/public/media/svg/brand-logos/android-wordmark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/angular-3.svg b/public/media/svg/brand-logos/angular-3.svg
new file mode 100644
index 0000000..4118356
--- /dev/null
+++ b/public/media/svg/brand-logos/angular-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/angular-icon-1.svg b/public/media/svg/brand-logos/angular-icon-1.svg
new file mode 100644
index 0000000..468c4ba
--- /dev/null
+++ b/public/media/svg/brand-logos/angular-icon-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/angular-icon.svg b/public/media/svg/brand-logos/angular-icon.svg
new file mode 100644
index 0000000..09c59e9
--- /dev/null
+++ b/public/media/svg/brand-logos/angular-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/angular.svg b/public/media/svg/brand-logos/angular.svg
new file mode 100644
index 0000000..c405743
--- /dev/null
+++ b/public/media/svg/brand-logos/angular.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/aon.svg b/public/media/svg/brand-logos/aon.svg
new file mode 100644
index 0000000..54ccd73
--- /dev/null
+++ b/public/media/svg/brand-logos/aon.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/apigee.svg b/public/media/svg/brand-logos/apigee.svg
new file mode 100644
index 0000000..2bfa706
--- /dev/null
+++ b/public/media/svg/brand-logos/apigee.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/apple-black-dark.svg b/public/media/svg/brand-logos/apple-black-dark.svg
new file mode 100644
index 0000000..cae2a7a
--- /dev/null
+++ b/public/media/svg/brand-logos/apple-black-dark.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/apple-black.svg b/public/media/svg/brand-logos/apple-black.svg
new file mode 100644
index 0000000..0359029
--- /dev/null
+++ b/public/media/svg/brand-logos/apple-black.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/apple-itunes.svg b/public/media/svg/brand-logos/apple-itunes.svg
new file mode 100644
index 0000000..63869b6
--- /dev/null
+++ b/public/media/svg/brand-logos/apple-itunes.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/aries-2.svg b/public/media/svg/brand-logos/aries-2.svg
new file mode 100644
index 0000000..db05a06
--- /dev/null
+++ b/public/media/svg/brand-logos/aries-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/asml-1.svg b/public/media/svg/brand-logos/asml-1.svg
new file mode 100644
index 0000000..ec64f55
--- /dev/null
+++ b/public/media/svg/brand-logos/asml-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/aspnetzero.svg b/public/media/svg/brand-logos/aspnetzero.svg
new file mode 100644
index 0000000..2d7f72d
--- /dev/null
+++ b/public/media/svg/brand-logos/aspnetzero.svg
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/atica.svg b/public/media/svg/brand-logos/atica.svg
new file mode 100644
index 0000000..eb76cc1
--- /dev/null
+++ b/public/media/svg/brand-logos/atica.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/audi-11.svg b/public/media/svg/brand-logos/audi-11.svg
new file mode 100644
index 0000000..8333167
--- /dev/null
+++ b/public/media/svg/brand-logos/audi-11.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/aven.svg b/public/media/svg/brand-logos/aven.svg
new file mode 100644
index 0000000..9eefb44
--- /dev/null
+++ b/public/media/svg/brand-logos/aven.svg
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/avis-1.svg b/public/media/svg/brand-logos/avis-1.svg
new file mode 100644
index 0000000..6c07df6
--- /dev/null
+++ b/public/media/svg/brand-logos/avis-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/avocode-inc.svg b/public/media/svg/brand-logos/avocode-inc.svg
new file mode 100644
index 0000000..9dc636d
--- /dev/null
+++ b/public/media/svg/brand-logos/avocode-inc.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/balloon.svg b/public/media/svg/brand-logos/balloon.svg
new file mode 100644
index 0000000..27c7797
--- /dev/null
+++ b/public/media/svg/brand-logos/balloon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/banco-santander-logo.svg b/public/media/svg/brand-logos/banco-santander-logo.svg
new file mode 100644
index 0000000..07ca3cd
--- /dev/null
+++ b/public/media/svg/brand-logos/banco-santander-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/beats-electronics.svg b/public/media/svg/brand-logos/beats-electronics.svg
new file mode 100644
index 0000000..130ab44
--- /dev/null
+++ b/public/media/svg/brand-logos/beats-electronics.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/bebo.svg b/public/media/svg/brand-logos/bebo.svg
new file mode 100644
index 0000000..5ad52a5
--- /dev/null
+++ b/public/media/svg/brand-logos/bebo.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/behance.svg b/public/media/svg/brand-logos/behance.svg
new file mode 100644
index 0000000..1897b36
--- /dev/null
+++ b/public/media/svg/brand-logos/behance.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/biman-airlines-classic-logo.svg b/public/media/svg/brand-logos/biman-airlines-classic-logo.svg
new file mode 100644
index 0000000..36de462
--- /dev/null
+++ b/public/media/svg/brand-logos/biman-airlines-classic-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/bookingcom-1.svg b/public/media/svg/brand-logos/bookingcom-1.svg
new file mode 100644
index 0000000..745f1e9
--- /dev/null
+++ b/public/media/svg/brand-logos/bookingcom-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/bootstrap-4.svg b/public/media/svg/brand-logos/bootstrap-4.svg
new file mode 100644
index 0000000..025da4e
--- /dev/null
+++ b/public/media/svg/brand-logos/bootstrap-4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/bootstrap-5.svg b/public/media/svg/brand-logos/bootstrap-5.svg
new file mode 100644
index 0000000..17da1cb
--- /dev/null
+++ b/public/media/svg/brand-logos/bootstrap-5.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/bootstrap5.svg b/public/media/svg/brand-logos/bootstrap5.svg
new file mode 100644
index 0000000..a859243
--- /dev/null
+++ b/public/media/svg/brand-logos/bootstrap5.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/bose.svg b/public/media/svg/brand-logos/bose.svg
new file mode 100644
index 0000000..58565d1
--- /dev/null
+++ b/public/media/svg/brand-logos/bose.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/bp-2.svg b/public/media/svg/brand-logos/bp-2.svg
new file mode 100644
index 0000000..ce02550
--- /dev/null
+++ b/public/media/svg/brand-logos/bp-2.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/bp-3.svg b/public/media/svg/brand-logos/bp-3.svg
new file mode 100644
index 0000000..8dd6179
--- /dev/null
+++ b/public/media/svg/brand-logos/bp-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/brantano.svg b/public/media/svg/brand-logos/brantano.svg
new file mode 100644
index 0000000..e3b881a
--- /dev/null
+++ b/public/media/svg/brand-logos/brantano.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/bride.svg b/public/media/svg/brand-logos/bride.svg
new file mode 100644
index 0000000..dfcf7b7
--- /dev/null
+++ b/public/media/svg/brand-logos/bride.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/british-council-1.svg b/public/media/svg/brand-logos/british-council-1.svg
new file mode 100644
index 0000000..d16c847
--- /dev/null
+++ b/public/media/svg/brand-logos/british-council-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/brondi.svg b/public/media/svg/brand-logos/brondi.svg
new file mode 100644
index 0000000..9017268
--- /dev/null
+++ b/public/media/svg/brand-logos/brondi.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/campingaz-1.svg b/public/media/svg/brand-logos/campingaz-1.svg
new file mode 100644
index 0000000..76de041
--- /dev/null
+++ b/public/media/svg/brand-logos/campingaz-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/canon-logo.svg b/public/media/svg/brand-logos/canon-logo.svg
new file mode 100644
index 0000000..18216f0
--- /dev/null
+++ b/public/media/svg/brand-logos/canon-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/carrols.svg b/public/media/svg/brand-logos/carrols.svg
new file mode 100644
index 0000000..9f96f03
--- /dev/null
+++ b/public/media/svg/brand-logos/carrols.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/casio.svg b/public/media/svg/brand-logos/casio.svg
new file mode 100644
index 0000000..d0b1ccb
--- /dev/null
+++ b/public/media/svg/brand-logos/casio.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/caterpillar-2.svg b/public/media/svg/brand-logos/caterpillar-2.svg
new file mode 100644
index 0000000..21ec743
--- /dev/null
+++ b/public/media/svg/brand-logos/caterpillar-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/citrix-6002.svg b/public/media/svg/brand-logos/citrix-6002.svg
new file mode 100644
index 0000000..b4ea371
--- /dev/null
+++ b/public/media/svg/brand-logos/citrix-6002.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/code-lab.svg b/public/media/svg/brand-logos/code-lab.svg
new file mode 100644
index 0000000..b8084a1
--- /dev/null
+++ b/public/media/svg/brand-logos/code-lab.svg
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/codeigniter.svg b/public/media/svg/brand-logos/codeigniter.svg
new file mode 100644
index 0000000..efd8c65
--- /dev/null
+++ b/public/media/svg/brand-logos/codeigniter.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/comcast.svg b/public/media/svg/brand-logos/comcast.svg
new file mode 100644
index 0000000..7433691
--- /dev/null
+++ b/public/media/svg/brand-logos/comcast.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/conair.svg b/public/media/svg/brand-logos/conair.svg
new file mode 100644
index 0000000..acffca5
--- /dev/null
+++ b/public/media/svg/brand-logos/conair.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/costa-2.svg b/public/media/svg/brand-logos/costa-2.svg
new file mode 100644
index 0000000..3315b12
--- /dev/null
+++ b/public/media/svg/brand-logos/costa-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/costco-wholesale-logo.svg b/public/media/svg/brand-logos/costco-wholesale-logo.svg
new file mode 100644
index 0000000..48b7aba
--- /dev/null
+++ b/public/media/svg/brand-logos/costco-wholesale-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/css-5.svg b/public/media/svg/brand-logos/css-5.svg
new file mode 100644
index 0000000..57260fa
--- /dev/null
+++ b/public/media/svg/brand-logos/css-5.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/decathlon-logo.svg b/public/media/svg/brand-logos/decathlon-logo.svg
new file mode 100644
index 0000000..f6ee854
--- /dev/null
+++ b/public/media/svg/brand-logos/decathlon-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/deloitte-1.svg b/public/media/svg/brand-logos/deloitte-1.svg
new file mode 100644
index 0000000..0dfa5ef
--- /dev/null
+++ b/public/media/svg/brand-logos/deloitte-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/depend.svg b/public/media/svg/brand-logos/depend.svg
new file mode 100644
index 0000000..ea86355
--- /dev/null
+++ b/public/media/svg/brand-logos/depend.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/diesel-5.svg b/public/media/svg/brand-logos/diesel-5.svg
new file mode 100644
index 0000000..c9e9a0c
--- /dev/null
+++ b/public/media/svg/brand-logos/diesel-5.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/disqus.svg b/public/media/svg/brand-logos/disqus.svg
new file mode 100644
index 0000000..3491f3d
--- /dev/null
+++ b/public/media/svg/brand-logos/disqus.svg
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/django-community.svg b/public/media/svg/brand-logos/django-community.svg
new file mode 100644
index 0000000..fae998c
--- /dev/null
+++ b/public/media/svg/brand-logos/django-community.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/dribbble-icon-1.svg b/public/media/svg/brand-logos/dribbble-icon-1.svg
new file mode 100644
index 0000000..696084e
--- /dev/null
+++ b/public/media/svg/brand-logos/dribbble-icon-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/dribbble-pink.svg b/public/media/svg/brand-logos/dribbble-pink.svg
new file mode 100644
index 0000000..556718d
--- /dev/null
+++ b/public/media/svg/brand-logos/dribbble-pink.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/duolingo.svg b/public/media/svg/brand-logos/duolingo.svg
new file mode 100644
index 0000000..6e6e32c
--- /dev/null
+++ b/public/media/svg/brand-logos/duolingo.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/svg/brand-logos/dynamac.svg b/public/media/svg/brand-logos/dynamac.svg
new file mode 100644
index 0000000..2ce7664
--- /dev/null
+++ b/public/media/svg/brand-logos/dynamac.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/ebay.svg b/public/media/svg/brand-logos/ebay.svg
new file mode 100644
index 0000000..11c4c6f
--- /dev/null
+++ b/public/media/svg/brand-logos/ebay.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/ember.svg b/public/media/svg/brand-logos/ember.svg
new file mode 100644
index 0000000..db49597
--- /dev/null
+++ b/public/media/svg/brand-logos/ember.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/envato.svg b/public/media/svg/brand-logos/envato.svg
new file mode 100644
index 0000000..2804478
--- /dev/null
+++ b/public/media/svg/brand-logos/envato.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/espacio-urbano.svg b/public/media/svg/brand-logos/espacio-urbano.svg
new file mode 100644
index 0000000..4429cab
--- /dev/null
+++ b/public/media/svg/brand-logos/espacio-urbano.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/etoys-com.svg b/public/media/svg/brand-logos/etoys-com.svg
new file mode 100644
index 0000000..6d00316
--- /dev/null
+++ b/public/media/svg/brand-logos/etoys-com.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/facebook-1.svg b/public/media/svg/brand-logos/facebook-1.svg
new file mode 100644
index 0000000..2c4e205
--- /dev/null
+++ b/public/media/svg/brand-logos/facebook-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/facebook-2.svg b/public/media/svg/brand-logos/facebook-2.svg
new file mode 100644
index 0000000..077bde6
--- /dev/null
+++ b/public/media/svg/brand-logos/facebook-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/facebook-3.svg b/public/media/svg/brand-logos/facebook-3.svg
new file mode 100644
index 0000000..f5ea0a8
--- /dev/null
+++ b/public/media/svg/brand-logos/facebook-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/facebook-4.svg b/public/media/svg/brand-logos/facebook-4.svg
new file mode 100644
index 0000000..ccff813
--- /dev/null
+++ b/public/media/svg/brand-logos/facebook-4.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/svg/brand-logos/farmers-insurance-3.svg b/public/media/svg/brand-logos/farmers-insurance-3.svg
new file mode 100644
index 0000000..44f64e4
--- /dev/null
+++ b/public/media/svg/brand-logos/farmers-insurance-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/figma-1.svg b/public/media/svg/brand-logos/figma-1.svg
new file mode 100644
index 0000000..d6042ef
--- /dev/null
+++ b/public/media/svg/brand-logos/figma-1.svg
@@ -0,0 +1 @@
+Figma.logo Created using Figma
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/foursquare.svg b/public/media/svg/brand-logos/foursquare.svg
new file mode 100644
index 0000000..ed4939f
--- /dev/null
+++ b/public/media/svg/brand-logos/foursquare.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/fox-hub.svg b/public/media/svg/brand-logos/fox-hub.svg
new file mode 100644
index 0000000..4868a8f
--- /dev/null
+++ b/public/media/svg/brand-logos/fox-hub.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/friday-s.svg b/public/media/svg/brand-logos/friday-s.svg
new file mode 100644
index 0000000..d203c67
--- /dev/null
+++ b/public/media/svg/brand-logos/friday-s.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/fujifilm.svg b/public/media/svg/brand-logos/fujifilm.svg
new file mode 100644
index 0000000..ccb2453
--- /dev/null
+++ b/public/media/svg/brand-logos/fujifilm.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/funding-circle.svg b/public/media/svg/brand-logos/funding-circle.svg
new file mode 100644
index 0000000..0f6bacc
--- /dev/null
+++ b/public/media/svg/brand-logos/funding-circle.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/garmin-1.svg b/public/media/svg/brand-logos/garmin-1.svg
new file mode 100644
index 0000000..e34cd97
--- /dev/null
+++ b/public/media/svg/brand-logos/garmin-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/general-electric.svg b/public/media/svg/brand-logos/general-electric.svg
new file mode 100644
index 0000000..41d966b
--- /dev/null
+++ b/public/media/svg/brand-logos/general-electric.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/github-1.svg b/public/media/svg/brand-logos/github-1.svg
new file mode 100644
index 0000000..d820113
--- /dev/null
+++ b/public/media/svg/brand-logos/github-1.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/github-2.svg b/public/media/svg/brand-logos/github-2.svg
new file mode 100644
index 0000000..d396db9
--- /dev/null
+++ b/public/media/svg/brand-logos/github-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/github-icon.svg b/public/media/svg/brand-logos/github-icon.svg
new file mode 100644
index 0000000..0f6b938
--- /dev/null
+++ b/public/media/svg/brand-logos/github-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/github.svg b/public/media/svg/brand-logos/github.svg
new file mode 100644
index 0000000..1d8b300
--- /dev/null
+++ b/public/media/svg/brand-logos/github.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/svg/brand-logos/gitlab.svg b/public/media/svg/brand-logos/gitlab.svg
new file mode 100644
index 0000000..ab63afd
--- /dev/null
+++ b/public/media/svg/brand-logos/gitlab.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/google-icon.svg b/public/media/svg/brand-logos/google-icon.svg
new file mode 100644
index 0000000..1307b69
--- /dev/null
+++ b/public/media/svg/brand-logos/google-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/google-photos.svg b/public/media/svg/brand-logos/google-photos.svg
new file mode 100644
index 0000000..d63175d
--- /dev/null
+++ b/public/media/svg/brand-logos/google-photos.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/google-play-store.svg b/public/media/svg/brand-logos/google-play-store.svg
new file mode 100644
index 0000000..1cbc450
--- /dev/null
+++ b/public/media/svg/brand-logos/google-play-store.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/google-podcasts.svg b/public/media/svg/brand-logos/google-podcasts.svg
new file mode 100644
index 0000000..8d672b0
--- /dev/null
+++ b/public/media/svg/brand-logos/google-podcasts.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/google-tag-manager.svg b/public/media/svg/brand-logos/google-tag-manager.svg
new file mode 100644
index 0000000..ec7228e
--- /dev/null
+++ b/public/media/svg/brand-logos/google-tag-manager.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/gradiente-2.svg b/public/media/svg/brand-logos/gradiente-2.svg
new file mode 100644
index 0000000..729a048
--- /dev/null
+++ b/public/media/svg/brand-logos/gradiente-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/gulp-1.svg b/public/media/svg/brand-logos/gulp-1.svg
new file mode 100644
index 0000000..eedd9c4
--- /dev/null
+++ b/public/media/svg/brand-logos/gulp-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/gulp.svg b/public/media/svg/brand-logos/gulp.svg
new file mode 100644
index 0000000..41b16c4
--- /dev/null
+++ b/public/media/svg/brand-logos/gulp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/hbo.svg b/public/media/svg/brand-logos/hbo.svg
new file mode 100644
index 0000000..b124cc2
--- /dev/null
+++ b/public/media/svg/brand-logos/hbo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/heavylift.svg b/public/media/svg/brand-logos/heavylift.svg
new file mode 100644
index 0000000..8538c5c
--- /dev/null
+++ b/public/media/svg/brand-logos/heavylift.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/hilton-buenos-aires.svg b/public/media/svg/brand-logos/hilton-buenos-aires.svg
new file mode 100644
index 0000000..011dd01
--- /dev/null
+++ b/public/media/svg/brand-logos/hilton-buenos-aires.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/himel.svg b/public/media/svg/brand-logos/himel.svg
new file mode 100644
index 0000000..a87a519
--- /dev/null
+++ b/public/media/svg/brand-logos/himel.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/honda-7.svg b/public/media/svg/brand-logos/honda-7.svg
new file mode 100644
index 0000000..5e90e51
--- /dev/null
+++ b/public/media/svg/brand-logos/honda-7.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/hp-2.svg b/public/media/svg/brand-logos/hp-2.svg
new file mode 100644
index 0000000..76edb0b
--- /dev/null
+++ b/public/media/svg/brand-logos/hp-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/hp-3.svg b/public/media/svg/brand-logos/hp-3.svg
new file mode 100644
index 0000000..14e9868
--- /dev/null
+++ b/public/media/svg/brand-logos/hp-3.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/svg/brand-logos/hp-hewlett-packard.svg b/public/media/svg/brand-logos/hp-hewlett-packard.svg
new file mode 100644
index 0000000..c5e4a38
--- /dev/null
+++ b/public/media/svg/brand-logos/hp-hewlett-packard.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/html5.svg b/public/media/svg/brand-logos/html5.svg
new file mode 100644
index 0000000..50b8732
--- /dev/null
+++ b/public/media/svg/brand-logos/html5.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/huggies-2.svg b/public/media/svg/brand-logos/huggies-2.svg
new file mode 100644
index 0000000..9d77114
--- /dev/null
+++ b/public/media/svg/brand-logos/huggies-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/ikon-1.svg b/public/media/svg/brand-logos/ikon-1.svg
new file mode 100644
index 0000000..30c7091
--- /dev/null
+++ b/public/media/svg/brand-logos/ikon-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/infography.svg b/public/media/svg/brand-logos/infography.svg
new file mode 100644
index 0000000..8a5023a
--- /dev/null
+++ b/public/media/svg/brand-logos/infography.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/instagram-2-1.svg b/public/media/svg/brand-logos/instagram-2-1.svg
new file mode 100644
index 0000000..04aeff8
--- /dev/null
+++ b/public/media/svg/brand-logos/instagram-2-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/instagram-2016.svg b/public/media/svg/brand-logos/instagram-2016.svg
new file mode 100644
index 0000000..8a1fbcc
--- /dev/null
+++ b/public/media/svg/brand-logos/instagram-2016.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/intermarche-2.svg b/public/media/svg/brand-logos/intermarche-2.svg
new file mode 100644
index 0000000..fdce438
--- /dev/null
+++ b/public/media/svg/brand-logos/intermarche-2.svg
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/invision.svg b/public/media/svg/brand-logos/invision.svg
new file mode 100644
index 0000000..bba53d2
--- /dev/null
+++ b/public/media/svg/brand-logos/invision.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/javascript-2.svg b/public/media/svg/brand-logos/javascript-2.svg
new file mode 100644
index 0000000..d37637d
--- /dev/null
+++ b/public/media/svg/brand-logos/javascript-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/javascript-4.svg b/public/media/svg/brand-logos/javascript-4.svg
new file mode 100644
index 0000000..dccb0ea
--- /dev/null
+++ b/public/media/svg/brand-logos/javascript-4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/javascript.svg b/public/media/svg/brand-logos/javascript.svg
new file mode 100644
index 0000000..6ef8fcb
--- /dev/null
+++ b/public/media/svg/brand-logos/javascript.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/jelcz.svg b/public/media/svg/brand-logos/jelcz.svg
new file mode 100644
index 0000000..ab78941
--- /dev/null
+++ b/public/media/svg/brand-logos/jelcz.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/jfits.svg b/public/media/svg/brand-logos/jfits.svg
new file mode 100644
index 0000000..878de7e
--- /dev/null
+++ b/public/media/svg/brand-logos/jfits.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/jquery-2.svg b/public/media/svg/brand-logos/jquery-2.svg
new file mode 100644
index 0000000..b637591
--- /dev/null
+++ b/public/media/svg/brand-logos/jquery-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/jquery.svg b/public/media/svg/brand-logos/jquery.svg
new file mode 100644
index 0000000..8a175c7
--- /dev/null
+++ b/public/media/svg/brand-logos/jquery.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/kanba.svg b/public/media/svg/brand-logos/kanba.svg
new file mode 100644
index 0000000..a1b1b96
--- /dev/null
+++ b/public/media/svg/brand-logos/kanba.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/keysight-logo.svg b/public/media/svg/brand-logos/keysight-logo.svg
new file mode 100644
index 0000000..75ec218
--- /dev/null
+++ b/public/media/svg/brand-logos/keysight-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/kickstarter.svg b/public/media/svg/brand-logos/kickstarter.svg
new file mode 100644
index 0000000..6531bdb
--- /dev/null
+++ b/public/media/svg/brand-logos/kickstarter.svg
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/komatsu-3.svg b/public/media/svg/brand-logos/komatsu-3.svg
new file mode 100644
index 0000000..e85ae96
--- /dev/null
+++ b/public/media/svg/brand-logos/komatsu-3.svg
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/koni-special.svg b/public/media/svg/brand-logos/koni-special.svg
new file mode 100644
index 0000000..bab1461
--- /dev/null
+++ b/public/media/svg/brand-logos/koni-special.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/kpmg.svg b/public/media/svg/brand-logos/kpmg.svg
new file mode 100644
index 0000000..0c5c7ef
--- /dev/null
+++ b/public/media/svg/brand-logos/kpmg.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/laravel-2.svg b/public/media/svg/brand-logos/laravel-2.svg
new file mode 100644
index 0000000..8489937
--- /dev/null
+++ b/public/media/svg/brand-logos/laravel-2.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/last-fm-1.svg b/public/media/svg/brand-logos/last-fm-1.svg
new file mode 100644
index 0000000..1175fd4
--- /dev/null
+++ b/public/media/svg/brand-logos/last-fm-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/leaf.svg b/public/media/svg/brand-logos/leaf.svg
new file mode 100644
index 0000000..b0c2b95
--- /dev/null
+++ b/public/media/svg/brand-logos/leaf.svg
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/leclerc-1.svg b/public/media/svg/brand-logos/leclerc-1.svg
new file mode 100644
index 0000000..4804068
--- /dev/null
+++ b/public/media/svg/brand-logos/leclerc-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/legrand.svg b/public/media/svg/brand-logos/legrand.svg
new file mode 100644
index 0000000..be8e984
--- /dev/null
+++ b/public/media/svg/brand-logos/legrand.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/leica-2.svg b/public/media/svg/brand-logos/leica-2.svg
new file mode 100644
index 0000000..284719d
--- /dev/null
+++ b/public/media/svg/brand-logos/leica-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/levis.svg b/public/media/svg/brand-logos/levis.svg
new file mode 100644
index 0000000..2106c9b
--- /dev/null
+++ b/public/media/svg/brand-logos/levis.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/lg-electronics.svg b/public/media/svg/brand-logos/lg-electronics.svg
new file mode 100644
index 0000000..4011702
--- /dev/null
+++ b/public/media/svg/brand-logos/lg-electronics.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/lidl-supermarkets.svg b/public/media/svg/brand-logos/lidl-supermarkets.svg
new file mode 100644
index 0000000..a9ba6f6
--- /dev/null
+++ b/public/media/svg/brand-logos/lidl-supermarkets.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/linkedin-1.svg b/public/media/svg/brand-logos/linkedin-1.svg
new file mode 100644
index 0000000..e94ecff
--- /dev/null
+++ b/public/media/svg/brand-logos/linkedin-1.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/linkedin-2.svg b/public/media/svg/brand-logos/linkedin-2.svg
new file mode 100644
index 0000000..d8c2d30
--- /dev/null
+++ b/public/media/svg/brand-logos/linkedin-2.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/linkedin.svg b/public/media/svg/brand-logos/linkedin.svg
new file mode 100644
index 0000000..c5cb248
--- /dev/null
+++ b/public/media/svg/brand-logos/linkedin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/lloyds-of-london-logo.svg b/public/media/svg/brand-logos/lloyds-of-london-logo.svg
new file mode 100644
index 0000000..0694c08
--- /dev/null
+++ b/public/media/svg/brand-logos/lloyds-of-london-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/mastercard-icon.svg b/public/media/svg/brand-logos/mastercard-icon.svg
new file mode 100644
index 0000000..924a6d7
--- /dev/null
+++ b/public/media/svg/brand-logos/mastercard-icon.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/maxis-communications-logo.svg b/public/media/svg/brand-logos/maxis-communications-logo.svg
new file mode 100644
index 0000000..2dd5bd9
--- /dev/null
+++ b/public/media/svg/brand-logos/maxis-communications-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/metro-1.svg b/public/media/svg/brand-logos/metro-1.svg
new file mode 100644
index 0000000..70b7520
--- /dev/null
+++ b/public/media/svg/brand-logos/metro-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/metro-4.svg b/public/media/svg/brand-logos/metro-4.svg
new file mode 100644
index 0000000..fa9cf60
--- /dev/null
+++ b/public/media/svg/brand-logos/metro-4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/metro-by-t-mobile.svg b/public/media/svg/brand-logos/metro-by-t-mobile.svg
new file mode 100644
index 0000000..7a616a5
--- /dev/null
+++ b/public/media/svg/brand-logos/metro-by-t-mobile.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/microsoft-5.svg b/public/media/svg/brand-logos/microsoft-5.svg
new file mode 100644
index 0000000..89f6237
--- /dev/null
+++ b/public/media/svg/brand-logos/microsoft-5.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/miller-6.svg b/public/media/svg/brand-logos/miller-6.svg
new file mode 100644
index 0000000..3264c09
--- /dev/null
+++ b/public/media/svg/brand-logos/miller-6.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/minol.svg b/public/media/svg/brand-logos/minol.svg
new file mode 100644
index 0000000..6e7c3c5
--- /dev/null
+++ b/public/media/svg/brand-logos/minol.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/mnd.svg b/public/media/svg/brand-logos/mnd.svg
new file mode 100644
index 0000000..ddce94f
--- /dev/null
+++ b/public/media/svg/brand-logos/mnd.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/msn.svg b/public/media/svg/brand-logos/msn.svg
new file mode 100644
index 0000000..8e831c1
--- /dev/null
+++ b/public/media/svg/brand-logos/msn.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/mysql-2.svg b/public/media/svg/brand-logos/mysql-2.svg
new file mode 100644
index 0000000..9f4c2b6
--- /dev/null
+++ b/public/media/svg/brand-logos/mysql-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/nasa.svg b/public/media/svg/brand-logos/nasa.svg
new file mode 100644
index 0000000..3cde3d5
--- /dev/null
+++ b/public/media/svg/brand-logos/nasa.svg
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/nestle-4.svg b/public/media/svg/brand-logos/nestle-4.svg
new file mode 100644
index 0000000..8ad83f1
--- /dev/null
+++ b/public/media/svg/brand-logos/nestle-4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/new-beko-logo.svg b/public/media/svg/brand-logos/new-beko-logo.svg
new file mode 100644
index 0000000..96b7ae6
--- /dev/null
+++ b/public/media/svg/brand-logos/new-beko-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/nike-4.svg b/public/media/svg/brand-logos/nike-4.svg
new file mode 100644
index 0000000..e48b055
--- /dev/null
+++ b/public/media/svg/brand-logos/nike-4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/node-sass.svg b/public/media/svg/brand-logos/node-sass.svg
new file mode 100644
index 0000000..53e709b
--- /dev/null
+++ b/public/media/svg/brand-logos/node-sass.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/noht.svg b/public/media/svg/brand-logos/noht.svg
new file mode 100644
index 0000000..48f2dae
--- /dev/null
+++ b/public/media/svg/brand-logos/noht.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/npm.svg b/public/media/svg/brand-logos/npm.svg
new file mode 100644
index 0000000..867a7b9
--- /dev/null
+++ b/public/media/svg/brand-logos/npm.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/ocaml.svg b/public/media/svg/brand-logos/ocaml.svg
new file mode 100644
index 0000000..5f96801
--- /dev/null
+++ b/public/media/svg/brand-logos/ocaml.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/oger-tours.svg b/public/media/svg/brand-logos/oger-tours.svg
new file mode 100644
index 0000000..034265c
--- /dev/null
+++ b/public/media/svg/brand-logos/oger-tours.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/origin-4.svg b/public/media/svg/brand-logos/origin-4.svg
new file mode 100644
index 0000000..1743457
--- /dev/null
+++ b/public/media/svg/brand-logos/origin-4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/paypie.svg b/public/media/svg/brand-logos/paypie.svg
new file mode 100644
index 0000000..cae640f
--- /dev/null
+++ b/public/media/svg/brand-logos/paypie.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/pinterest-p.svg b/public/media/svg/brand-logos/pinterest-p.svg
new file mode 100644
index 0000000..7b28e2e
--- /dev/null
+++ b/public/media/svg/brand-logos/pinterest-p.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/pinterest.svg b/public/media/svg/brand-logos/pinterest.svg
new file mode 100644
index 0000000..9fbd772
--- /dev/null
+++ b/public/media/svg/brand-logos/pinterest.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/plurk.svg b/public/media/svg/brand-logos/plurk.svg
new file mode 100644
index 0000000..55dcf33
--- /dev/null
+++ b/public/media/svg/brand-logos/plurk.svg
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/puma-logo.svg b/public/media/svg/brand-logos/puma-logo.svg
new file mode 100644
index 0000000..5d37fd8
--- /dev/null
+++ b/public/media/svg/brand-logos/puma-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/python-5.svg b/public/media/svg/brand-logos/python-5.svg
new file mode 100644
index 0000000..a16973b
--- /dev/null
+++ b/public/media/svg/brand-logos/python-5.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/quilosa.svg b/public/media/svg/brand-logos/quilosa.svg
new file mode 100644
index 0000000..dec2f91
--- /dev/null
+++ b/public/media/svg/brand-logos/quilosa.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/react-native-firebase-1.svg b/public/media/svg/brand-logos/react-native-firebase-1.svg
new file mode 100644
index 0000000..88d87f3
--- /dev/null
+++ b/public/media/svg/brand-logos/react-native-firebase-1.svg
@@ -0,0 +1 @@
+Slice 1
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/react-router.svg b/public/media/svg/brand-logos/react-router.svg
new file mode 100644
index 0000000..13d18ef
--- /dev/null
+++ b/public/media/svg/brand-logos/react-router.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/react.svg b/public/media/svg/brand-logos/react.svg
new file mode 100644
index 0000000..f95e632
--- /dev/null
+++ b/public/media/svg/brand-logos/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/redbull.svg b/public/media/svg/brand-logos/redbull.svg
new file mode 100644
index 0000000..e5ee16d
--- /dev/null
+++ b/public/media/svg/brand-logos/redbull.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/reddit.svg b/public/media/svg/brand-logos/reddit.svg
new file mode 100644
index 0000000..1079a68
--- /dev/null
+++ b/public/media/svg/brand-logos/reddit.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/rgb.svg b/public/media/svg/brand-logos/rgb.svg
new file mode 100644
index 0000000..7f11fbc
--- /dev/null
+++ b/public/media/svg/brand-logos/rgb.svg
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/sass-1.svg b/public/media/svg/brand-logos/sass-1.svg
new file mode 100644
index 0000000..87f96db
--- /dev/null
+++ b/public/media/svg/brand-logos/sass-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/seat-pg.svg b/public/media/svg/brand-logos/seat-pg.svg
new file mode 100644
index 0000000..db76b6e
--- /dev/null
+++ b/public/media/svg/brand-logos/seat-pg.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/sentry-3.svg b/public/media/svg/brand-logos/sentry-3.svg
new file mode 100644
index 0000000..24348ad
--- /dev/null
+++ b/public/media/svg/brand-logos/sentry-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/shell.svg b/public/media/svg/brand-logos/shell.svg
new file mode 100644
index 0000000..0d3a1e0
--- /dev/null
+++ b/public/media/svg/brand-logos/shell.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/siplast.svg b/public/media/svg/brand-logos/siplast.svg
new file mode 100644
index 0000000..bef2b1f
--- /dev/null
+++ b/public/media/svg/brand-logos/siplast.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/slack-icon.svg b/public/media/svg/brand-logos/slack-icon.svg
new file mode 100644
index 0000000..7b55f9f
--- /dev/null
+++ b/public/media/svg/brand-logos/slack-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/slack-new-logo.svg b/public/media/svg/brand-logos/slack-new-logo.svg
new file mode 100644
index 0000000..69a4eb6
--- /dev/null
+++ b/public/media/svg/brand-logos/slack-new-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/slack.svg b/public/media/svg/brand-logos/slack.svg
new file mode 100644
index 0000000..fb5e19e
--- /dev/null
+++ b/public/media/svg/brand-logos/slack.svg
@@ -0,0 +1 @@
+background Layer 1
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/smartphone.svg b/public/media/svg/brand-logos/smartphone.svg
new file mode 100644
index 0000000..0bc0c61
--- /dev/null
+++ b/public/media/svg/brand-logos/smartphone.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/snowbird.svg b/public/media/svg/brand-logos/snowbird.svg
new file mode 100644
index 0000000..e373aa0
--- /dev/null
+++ b/public/media/svg/brand-logos/snowbird.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/soriana-logo-1.svg b/public/media/svg/brand-logos/soriana-logo-1.svg
new file mode 100644
index 0000000..2a59e52
--- /dev/null
+++ b/public/media/svg/brand-logos/soriana-logo-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/sparkpost.svg b/public/media/svg/brand-logos/sparkpost.svg
new file mode 100644
index 0000000..5d02749
--- /dev/null
+++ b/public/media/svg/brand-logos/sparkpost.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/spotify-2.svg b/public/media/svg/brand-logos/spotify-2.svg
new file mode 100644
index 0000000..cfc993b
--- /dev/null
+++ b/public/media/svg/brand-logos/spotify-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/spotify-logo.svg b/public/media/svg/brand-logos/spotify-logo.svg
new file mode 100644
index 0000000..0294d06
--- /dev/null
+++ b/public/media/svg/brand-logos/spotify-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/spotify.svg b/public/media/svg/brand-logos/spotify.svg
new file mode 100644
index 0000000..c607a8b
--- /dev/null
+++ b/public/media/svg/brand-logos/spotify.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/spring-3.svg b/public/media/svg/brand-logos/spring-3.svg
new file mode 100644
index 0000000..2564009
--- /dev/null
+++ b/public/media/svg/brand-logos/spring-3.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/sprint-nextel.svg b/public/media/svg/brand-logos/sprint-nextel.svg
new file mode 100644
index 0000000..b82459e
--- /dev/null
+++ b/public/media/svg/brand-logos/sprint-nextel.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/stabilo.svg b/public/media/svg/brand-logos/stabilo.svg
new file mode 100644
index 0000000..36a5fb4
--- /dev/null
+++ b/public/media/svg/brand-logos/stabilo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/strava-wordmark-1.svg b/public/media/svg/brand-logos/strava-wordmark-1.svg
new file mode 100644
index 0000000..a281c3e
--- /dev/null
+++ b/public/media/svg/brand-logos/strava-wordmark-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/stream-1.svg b/public/media/svg/brand-logos/stream-1.svg
new file mode 100644
index 0000000..314d738
--- /dev/null
+++ b/public/media/svg/brand-logos/stream-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/super-cuts.svg b/public/media/svg/brand-logos/super-cuts.svg
new file mode 100644
index 0000000..13bbb3b
--- /dev/null
+++ b/public/media/svg/brand-logos/super-cuts.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/suzuki-motor-corporation-logo.svg b/public/media/svg/brand-logos/suzuki-motor-corporation-logo.svg
new file mode 100644
index 0000000..5b9d089
--- /dev/null
+++ b/public/media/svg/brand-logos/suzuki-motor-corporation-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/suzuki.svg b/public/media/svg/brand-logos/suzuki.svg
new file mode 100644
index 0000000..3e1c620
--- /dev/null
+++ b/public/media/svg/brand-logos/suzuki.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/swarm.svg b/public/media/svg/brand-logos/swarm.svg
new file mode 100644
index 0000000..2240b86
--- /dev/null
+++ b/public/media/svg/brand-logos/swarm.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/syngenta.svg b/public/media/svg/brand-logos/syngenta.svg
new file mode 100644
index 0000000..9a396b5
--- /dev/null
+++ b/public/media/svg/brand-logos/syngenta.svg
@@ -0,0 +1 @@
+
diff --git a/public/media/svg/brand-logos/telegram-2.svg b/public/media/svg/brand-logos/telegram-2.svg
new file mode 100644
index 0000000..e9b1f6c
--- /dev/null
+++ b/public/media/svg/brand-logos/telegram-2.svg
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/telegram.svg b/public/media/svg/brand-logos/telegram.svg
new file mode 100644
index 0000000..4ea28d8
--- /dev/null
+++ b/public/media/svg/brand-logos/telegram.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/svg/brand-logos/tempstar.svg b/public/media/svg/brand-logos/tempstar.svg
new file mode 100644
index 0000000..2dd75ac
--- /dev/null
+++ b/public/media/svg/brand-logos/tempstar.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/the-blockchain-group-tbg.svg b/public/media/svg/brand-logos/the-blockchain-group-tbg.svg
new file mode 100644
index 0000000..d6a3c86
--- /dev/null
+++ b/public/media/svg/brand-logos/the-blockchain-group-tbg.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/thomas-1.svg b/public/media/svg/brand-logos/thomas-1.svg
new file mode 100644
index 0000000..23c3d7a
--- /dev/null
+++ b/public/media/svg/brand-logos/thomas-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/thuisbezorgd.svg b/public/media/svg/brand-logos/thuisbezorgd.svg
new file mode 100644
index 0000000..0a7ad46
--- /dev/null
+++ b/public/media/svg/brand-logos/thuisbezorgd.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/thule-2.svg b/public/media/svg/brand-logos/thule-2.svg
new file mode 100644
index 0000000..88dbde6
--- /dev/null
+++ b/public/media/svg/brand-logos/thule-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/ticketmaster-5.svg b/public/media/svg/brand-logos/ticketmaster-5.svg
new file mode 100644
index 0000000..34e32ec
--- /dev/null
+++ b/public/media/svg/brand-logos/ticketmaster-5.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/tofas-logo.svg b/public/media/svg/brand-logos/tofas-logo.svg
new file mode 100644
index 0000000..d2e430d
--- /dev/null
+++ b/public/media/svg/brand-logos/tofas-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/tower.svg b/public/media/svg/brand-logos/tower.svg
new file mode 100644
index 0000000..8e1584b
--- /dev/null
+++ b/public/media/svg/brand-logos/tower.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/svg/brand-logos/treva.svg b/public/media/svg/brand-logos/treva.svg
new file mode 100644
index 0000000..696e2d3
--- /dev/null
+++ b/public/media/svg/brand-logos/treva.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/trimble-2.svg b/public/media/svg/brand-logos/trimble-2.svg
new file mode 100644
index 0000000..d34ce2a
--- /dev/null
+++ b/public/media/svg/brand-logos/trimble-2.svg
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/trivago.svg b/public/media/svg/brand-logos/trivago.svg
new file mode 100644
index 0000000..f2277f1
--- /dev/null
+++ b/public/media/svg/brand-logos/trivago.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/truman.svg b/public/media/svg/brand-logos/truman.svg
new file mode 100644
index 0000000..0fbefa3
--- /dev/null
+++ b/public/media/svg/brand-logos/truman.svg
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/tvit.svg b/public/media/svg/brand-logos/tvit.svg
new file mode 100644
index 0000000..2c1b4b2
--- /dev/null
+++ b/public/media/svg/brand-logos/tvit.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/twitch.svg b/public/media/svg/brand-logos/twitch.svg
new file mode 100644
index 0000000..0e1882b
--- /dev/null
+++ b/public/media/svg/brand-logos/twitch.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/twitter-2.svg b/public/media/svg/brand-logos/twitter-2.svg
new file mode 100644
index 0000000..45d188c
--- /dev/null
+++ b/public/media/svg/brand-logos/twitter-2.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/svg/brand-logos/twitter.svg b/public/media/svg/brand-logos/twitter.svg
new file mode 100644
index 0000000..3da834b
--- /dev/null
+++ b/public/media/svg/brand-logos/twitter.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/typescript-1.svg b/public/media/svg/brand-logos/typescript-1.svg
new file mode 100644
index 0000000..030efa2
--- /dev/null
+++ b/public/media/svg/brand-logos/typescript-1.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/unilever-2.svg b/public/media/svg/brand-logos/unilever-2.svg
new file mode 100644
index 0000000..bcbc7f9
--- /dev/null
+++ b/public/media/svg/brand-logos/unilever-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/university-of-cambridge.svg b/public/media/svg/brand-logos/university-of-cambridge.svg
new file mode 100644
index 0000000..dc853bd
--- /dev/null
+++ b/public/media/svg/brand-logos/university-of-cambridge.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/urw-software.svg b/public/media/svg/brand-logos/urw-software.svg
new file mode 100644
index 0000000..8008430
--- /dev/null
+++ b/public/media/svg/brand-logos/urw-software.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/verizon-2015.svg b/public/media/svg/brand-logos/verizon-2015.svg
new file mode 100644
index 0000000..3ae76f7
--- /dev/null
+++ b/public/media/svg/brand-logos/verizon-2015.svg
@@ -0,0 +1 @@
+Layer 1 copy
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/vimeo-icon.svg b/public/media/svg/brand-logos/vimeo-icon.svg
new file mode 100644
index 0000000..93dc538
--- /dev/null
+++ b/public/media/svg/brand-logos/vimeo-icon.svg
@@ -0,0 +1 @@
+Layer 1
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/vimeo.svg b/public/media/svg/brand-logos/vimeo.svg
new file mode 100644
index 0000000..cbd268c
--- /dev/null
+++ b/public/media/svg/brand-logos/vimeo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/visa-icon.svg b/public/media/svg/brand-logos/visa-icon.svg
new file mode 100644
index 0000000..495cd2a
--- /dev/null
+++ b/public/media/svg/brand-logos/visa-icon.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/visa.svg b/public/media/svg/brand-logos/visa.svg
new file mode 100644
index 0000000..75c2c81
--- /dev/null
+++ b/public/media/svg/brand-logos/visa.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/vodafone.svg b/public/media/svg/brand-logos/vodafone.svg
new file mode 100644
index 0000000..42e0d61
--- /dev/null
+++ b/public/media/svg/brand-logos/vodafone.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/svg/brand-logos/volicity-9.svg b/public/media/svg/brand-logos/volicity-9.svg
new file mode 100644
index 0000000..d57091f
--- /dev/null
+++ b/public/media/svg/brand-logos/volicity-9.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/brand-logos/vue-9.svg b/public/media/svg/brand-logos/vue-9.svg
new file mode 100644
index 0000000..8d00e8c
--- /dev/null
+++ b/public/media/svg/brand-logos/vue-9.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/vype.svg b/public/media/svg/brand-logos/vype.svg
new file mode 100644
index 0000000..46c2978
--- /dev/null
+++ b/public/media/svg/brand-logos/vype.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/webasto-logo.svg b/public/media/svg/brand-logos/webasto-logo.svg
new file mode 100644
index 0000000..1f41e5d
--- /dev/null
+++ b/public/media/svg/brand-logos/webasto-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/webpack-icon.svg b/public/media/svg/brand-logos/webpack-icon.svg
new file mode 100644
index 0000000..c03e0c7
--- /dev/null
+++ b/public/media/svg/brand-logos/webpack-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/webpack.svg b/public/media/svg/brand-logos/webpack.svg
new file mode 100644
index 0000000..4f34cfc
--- /dev/null
+++ b/public/media/svg/brand-logos/webpack.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/west-marine.svg b/public/media/svg/brand-logos/west-marine.svg
new file mode 100644
index 0000000..22d3b33
--- /dev/null
+++ b/public/media/svg/brand-logos/west-marine.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/worth.svg b/public/media/svg/brand-logos/worth.svg
new file mode 100644
index 0000000..e29a6ce
--- /dev/null
+++ b/public/media/svg/brand-logos/worth.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/xing-icon.svg b/public/media/svg/brand-logos/xing-icon.svg
new file mode 100644
index 0000000..32bd4b6
--- /dev/null
+++ b/public/media/svg/brand-logos/xing-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/youtube-3.svg b/public/media/svg/brand-logos/youtube-3.svg
new file mode 100644
index 0000000..53c736f
--- /dev/null
+++ b/public/media/svg/brand-logos/youtube-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/youtube-play.svg b/public/media/svg/brand-logos/youtube-play.svg
new file mode 100644
index 0000000..094729f
--- /dev/null
+++ b/public/media/svg/brand-logos/youtube-play.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/svg/brand-logos/youtube.svg b/public/media/svg/brand-logos/youtube.svg
new file mode 100644
index 0000000..9252be0
--- /dev/null
+++ b/public/media/svg/brand-logos/youtube.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/ziprecruiter-blacktext.svg b/public/media/svg/brand-logos/ziprecruiter-blacktext.svg
new file mode 100644
index 0000000..6bcea1c
--- /dev/null
+++ b/public/media/svg/brand-logos/ziprecruiter-blacktext.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/brand-logos/zurich-logo.svg b/public/media/svg/brand-logos/zurich-logo.svg
new file mode 100644
index 0000000..7de841c
--- /dev/null
+++ b/public/media/svg/brand-logos/zurich-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/card-logos/american-express-dark.svg b/public/media/svg/card-logos/american-express-dark.svg
new file mode 100644
index 0000000..3595187
--- /dev/null
+++ b/public/media/svg/card-logos/american-express-dark.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/card-logos/american-express.svg b/public/media/svg/card-logos/american-express.svg
new file mode 100644
index 0000000..63c22c0
--- /dev/null
+++ b/public/media/svg/card-logos/american-express.svg
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/card-logos/bitcoin 1.svg b/public/media/svg/card-logos/bitcoin 1.svg
new file mode 100644
index 0000000..37d7b7b
--- /dev/null
+++ b/public/media/svg/card-logos/bitcoin 1.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/public/media/svg/card-logos/dark/american-express.svg b/public/media/svg/card-logos/dark/american-express.svg
new file mode 100644
index 0000000..3595187
--- /dev/null
+++ b/public/media/svg/card-logos/dark/american-express.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/card-logos/dark/mastercard.svg b/public/media/svg/card-logos/dark/mastercard.svg
new file mode 100644
index 0000000..5cd3d22
--- /dev/null
+++ b/public/media/svg/card-logos/dark/mastercard.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/svg/card-logos/dark/visa.svg b/public/media/svg/card-logos/dark/visa.svg
new file mode 100644
index 0000000..267a3f0
--- /dev/null
+++ b/public/media/svg/card-logos/dark/visa.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/card-logos/mastercard-dark.svg b/public/media/svg/card-logos/mastercard-dark.svg
new file mode 100644
index 0000000..5cd3d22
--- /dev/null
+++ b/public/media/svg/card-logos/mastercard-dark.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/svg/card-logos/mastercard.svg b/public/media/svg/card-logos/mastercard.svg
new file mode 100644
index 0000000..924a6d7
--- /dev/null
+++ b/public/media/svg/card-logos/mastercard.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/card-logos/visa-dark.svg b/public/media/svg/card-logos/visa-dark.svg
new file mode 100644
index 0000000..267a3f0
--- /dev/null
+++ b/public/media/svg/card-logos/visa-dark.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/card-logos/visa.svg b/public/media/svg/card-logos/visa.svg
new file mode 100644
index 0000000..495cd2a
--- /dev/null
+++ b/public/media/svg/card-logos/visa.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/coins/binance.svg b/public/media/svg/coins/binance.svg
new file mode 100644
index 0000000..39ef9e3
--- /dev/null
+++ b/public/media/svg/coins/binance.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/coins/bitcoin.svg b/public/media/svg/coins/bitcoin.svg
new file mode 100644
index 0000000..a48a337
--- /dev/null
+++ b/public/media/svg/coins/bitcoin.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/public/media/svg/coins/chainlink.svg b/public/media/svg/coins/chainlink.svg
new file mode 100644
index 0000000..c2ed614
--- /dev/null
+++ b/public/media/svg/coins/chainlink.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/coins/coin.svg b/public/media/svg/coins/coin.svg
new file mode 100644
index 0000000..0354b17
--- /dev/null
+++ b/public/media/svg/coins/coin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/coins/ethereum.svg b/public/media/svg/coins/ethereum.svg
new file mode 100644
index 0000000..adc9ac2
--- /dev/null
+++ b/public/media/svg/coins/ethereum.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/coins/filecoin.svg b/public/media/svg/coins/filecoin.svg
new file mode 100644
index 0000000..7e93910
--- /dev/null
+++ b/public/media/svg/coins/filecoin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/files/ai-dark.svg b/public/media/svg/files/ai-dark.svg
new file mode 100644
index 0000000..c0c8f20
--- /dev/null
+++ b/public/media/svg/files/ai-dark.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/ai.svg b/public/media/svg/files/ai.svg
new file mode 100644
index 0000000..a8d2dbf
--- /dev/null
+++ b/public/media/svg/files/ai.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/blank-image-dark.svg b/public/media/svg/files/blank-image-dark.svg
new file mode 100644
index 0000000..7b8f7c0
--- /dev/null
+++ b/public/media/svg/files/blank-image-dark.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/blank-image.svg b/public/media/svg/files/blank-image.svg
new file mode 100644
index 0000000..1c19b8e
--- /dev/null
+++ b/public/media/svg/files/blank-image.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/css-dark.svg b/public/media/svg/files/css-dark.svg
new file mode 100644
index 0000000..552105d
--- /dev/null
+++ b/public/media/svg/files/css-dark.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/css.svg b/public/media/svg/files/css.svg
new file mode 100644
index 0000000..b9af7b9
--- /dev/null
+++ b/public/media/svg/files/css.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/dark/ai.svg b/public/media/svg/files/dark/ai.svg
new file mode 100644
index 0000000..c0c8f20
--- /dev/null
+++ b/public/media/svg/files/dark/ai.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/dark/css.svg b/public/media/svg/files/dark/css.svg
new file mode 100644
index 0000000..552105d
--- /dev/null
+++ b/public/media/svg/files/dark/css.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/dark/doc.svg b/public/media/svg/files/dark/doc.svg
new file mode 100644
index 0000000..c2df086
--- /dev/null
+++ b/public/media/svg/files/dark/doc.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/dark/folder-document.svg b/public/media/svg/files/dark/folder-document.svg
new file mode 100644
index 0000000..3b404e5
--- /dev/null
+++ b/public/media/svg/files/dark/folder-document.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/dark/pdf.svg b/public/media/svg/files/dark/pdf.svg
new file mode 100644
index 0000000..f49c95f
--- /dev/null
+++ b/public/media/svg/files/dark/pdf.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/dark/sql.svg b/public/media/svg/files/dark/sql.svg
new file mode 100644
index 0000000..012d547
--- /dev/null
+++ b/public/media/svg/files/dark/sql.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/dark/tif.svg b/public/media/svg/files/dark/tif.svg
new file mode 100644
index 0000000..22985c5
--- /dev/null
+++ b/public/media/svg/files/dark/tif.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/dark/upload.svg b/public/media/svg/files/dark/upload.svg
new file mode 100644
index 0000000..6d2a7d8
--- /dev/null
+++ b/public/media/svg/files/dark/upload.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/files/dark/xml.svg b/public/media/svg/files/dark/xml.svg
new file mode 100644
index 0000000..5edca13
--- /dev/null
+++ b/public/media/svg/files/dark/xml.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/doc-dark.svg b/public/media/svg/files/doc-dark.svg
new file mode 100644
index 0000000..c2df086
--- /dev/null
+++ b/public/media/svg/files/doc-dark.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/doc.svg b/public/media/svg/files/doc.svg
new file mode 100644
index 0000000..82100f2
--- /dev/null
+++ b/public/media/svg/files/doc.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/folder-document-dark.svg b/public/media/svg/files/folder-document-dark.svg
new file mode 100644
index 0000000..3b404e5
--- /dev/null
+++ b/public/media/svg/files/folder-document-dark.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/folder-document.svg b/public/media/svg/files/folder-document.svg
new file mode 100644
index 0000000..c8d488b
--- /dev/null
+++ b/public/media/svg/files/folder-document.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/svg/files/pdf-dark.svg b/public/media/svg/files/pdf-dark.svg
new file mode 100644
index 0000000..f49c95f
--- /dev/null
+++ b/public/media/svg/files/pdf-dark.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/pdf.svg b/public/media/svg/files/pdf.svg
new file mode 100644
index 0000000..4003c09
--- /dev/null
+++ b/public/media/svg/files/pdf.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/sql-dark.svg b/public/media/svg/files/sql-dark.svg
new file mode 100644
index 0000000..012d547
--- /dev/null
+++ b/public/media/svg/files/sql-dark.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/sql.svg b/public/media/svg/files/sql.svg
new file mode 100644
index 0000000..4b78b60
--- /dev/null
+++ b/public/media/svg/files/sql.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/tif-dark.svg b/public/media/svg/files/tif-dark.svg
new file mode 100644
index 0000000..22985c5
--- /dev/null
+++ b/public/media/svg/files/tif-dark.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/tif.svg b/public/media/svg/files/tif.svg
new file mode 100644
index 0000000..cdb1eb5
--- /dev/null
+++ b/public/media/svg/files/tif.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/upload-dark.svg b/public/media/svg/files/upload-dark.svg
new file mode 100644
index 0000000..6d2a7d8
--- /dev/null
+++ b/public/media/svg/files/upload-dark.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/files/upload.svg b/public/media/svg/files/upload.svg
new file mode 100644
index 0000000..330331d
--- /dev/null
+++ b/public/media/svg/files/upload.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/files/xml-dark.svg b/public/media/svg/files/xml-dark.svg
new file mode 100644
index 0000000..5edca13
--- /dev/null
+++ b/public/media/svg/files/xml-dark.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/files/xml.svg b/public/media/svg/files/xml.svg
new file mode 100644
index 0000000..dba88da
--- /dev/null
+++ b/public/media/svg/files/xml.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/food-icons/cheeseburger.svg b/public/media/svg/food-icons/cheeseburger.svg
new file mode 100644
index 0000000..7c9b1c6
--- /dev/null
+++ b/public/media/svg/food-icons/cheeseburger.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/food-icons/cheesecake.svg b/public/media/svg/food-icons/cheesecake.svg
new file mode 100644
index 0000000..57dff48
--- /dev/null
+++ b/public/media/svg/food-icons/cheesecake.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/food-icons/coffee.svg b/public/media/svg/food-icons/coffee.svg
new file mode 100644
index 0000000..9faea05
--- /dev/null
+++ b/public/media/svg/food-icons/coffee.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/food-icons/salad.svg b/public/media/svg/food-icons/salad.svg
new file mode 100644
index 0000000..2714862
--- /dev/null
+++ b/public/media/svg/food-icons/salad.svg
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/food-icons/spaghetti.svg b/public/media/svg/food-icons/spaghetti.svg
new file mode 100644
index 0000000..13d2c5e
--- /dev/null
+++ b/public/media/svg/food-icons/spaghetti.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/general/rhone.svg b/public/media/svg/general/rhone.svg
new file mode 100644
index 0000000..b72f90e
--- /dev/null
+++ b/public/media/svg/general/rhone.svg
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/humans/custom-1.svg b/public/media/svg/humans/custom-1.svg
new file mode 100644
index 0000000..ff63cc1
--- /dev/null
+++ b/public/media/svg/humans/custom-1.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/easy/1-dark.svg b/public/media/svg/illustrations/easy/1-dark.svg
new file mode 100644
index 0000000..cb08bea
--- /dev/null
+++ b/public/media/svg/illustrations/easy/1-dark.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/easy/1.svg b/public/media/svg/illustrations/easy/1.svg
new file mode 100644
index 0000000..e9c2c19
--- /dev/null
+++ b/public/media/svg/illustrations/easy/1.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/easy/2-dark.svg b/public/media/svg/illustrations/easy/2-dark.svg
new file mode 100644
index 0000000..8d4fceb
--- /dev/null
+++ b/public/media/svg/illustrations/easy/2-dark.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/easy/2.svg b/public/media/svg/illustrations/easy/2.svg
new file mode 100644
index 0000000..e44398c
--- /dev/null
+++ b/public/media/svg/illustrations/easy/2.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/easy/3-dark.svg b/public/media/svg/illustrations/easy/3-dark.svg
new file mode 100644
index 0000000..535f33a
--- /dev/null
+++ b/public/media/svg/illustrations/easy/3-dark.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/easy/3.svg b/public/media/svg/illustrations/easy/3.svg
new file mode 100644
index 0000000..413b79d
--- /dev/null
+++ b/public/media/svg/illustrations/easy/3.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/easy/4.svg b/public/media/svg/illustrations/easy/4.svg
new file mode 100644
index 0000000..bf60722
--- /dev/null
+++ b/public/media/svg/illustrations/easy/4.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/easy/5.svg b/public/media/svg/illustrations/easy/5.svg
new file mode 100644
index 0000000..8ed35f3
--- /dev/null
+++ b/public/media/svg/illustrations/easy/5.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/easy/6.svg b/public/media/svg/illustrations/easy/6.svg
new file mode 100644
index 0000000..2f87b2f
--- /dev/null
+++ b/public/media/svg/illustrations/easy/6.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/easy/7.svg b/public/media/svg/illustrations/easy/7.svg
new file mode 100644
index 0000000..3603f77
--- /dev/null
+++ b/public/media/svg/illustrations/easy/7.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/easy/8.svg b/public/media/svg/illustrations/easy/8.svg
new file mode 100644
index 0000000..21e02dc
--- /dev/null
+++ b/public/media/svg/illustrations/easy/8.svg
@@ -0,0 +1,161 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/landing.svg b/public/media/svg/illustrations/landing.svg
new file mode 100644
index 0000000..1baba8d
--- /dev/null
+++ b/public/media/svg/illustrations/landing.svg
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/sigma/illustration-realestate.svg b/public/media/svg/illustrations/sigma/illustration-realestate.svg
new file mode 100644
index 0000000..1451727
--- /dev/null
+++ b/public/media/svg/illustrations/sigma/illustration-realestate.svg
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/sigma/question.svg b/public/media/svg/illustrations/sigma/question.svg
new file mode 100644
index 0000000..ee653aa
--- /dev/null
+++ b/public/media/svg/illustrations/sigma/question.svg
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/sigma/volume-1-dark.svg b/public/media/svg/illustrations/sigma/volume-1-dark.svg
new file mode 100644
index 0000000..834c3a3
--- /dev/null
+++ b/public/media/svg/illustrations/sigma/volume-1-dark.svg
@@ -0,0 +1,140 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/illustrations/sigma/volume-1.svg b/public/media/svg/illustrations/sigma/volume-1.svg
new file mode 100644
index 0000000..e72aff5
--- /dev/null
+++ b/public/media/svg/illustrations/sigma/volume-1.svg
@@ -0,0 +1,146 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/misc/eolic-energy.svg b/public/media/svg/misc/eolic-energy.svg
new file mode 100644
index 0000000..ab2d5d8
--- /dev/null
+++ b/public/media/svg/misc/eolic-energy.svg
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/misc/hot-air-balloon.svg b/public/media/svg/misc/hot-air-balloon.svg
new file mode 100644
index 0000000..27c7797
--- /dev/null
+++ b/public/media/svg/misc/hot-air-balloon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/misc/infography.svg b/public/media/svg/misc/infography.svg
new file mode 100644
index 0000000..8a5023a
--- /dev/null
+++ b/public/media/svg/misc/infography.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/misc/octagon.svg b/public/media/svg/misc/octagon.svg
new file mode 100644
index 0000000..4160f70
--- /dev/null
+++ b/public/media/svg/misc/octagon.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/svg/misc/puzzle.svg b/public/media/svg/misc/puzzle.svg
new file mode 100644
index 0000000..3bcce2e
--- /dev/null
+++ b/public/media/svg/misc/puzzle.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/media/svg/misc/recycling.svg b/public/media/svg/misc/recycling.svg
new file mode 100644
index 0000000..26cb29f
--- /dev/null
+++ b/public/media/svg/misc/recycling.svg
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/misc/retweet.svg b/public/media/svg/misc/retweet.svg
new file mode 100644
index 0000000..27d9005
--- /dev/null
+++ b/public/media/svg/misc/retweet.svg
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/misc/smartphone-2-dark.svg b/public/media/svg/misc/smartphone-2-dark.svg
new file mode 100644
index 0000000..5b9db59
--- /dev/null
+++ b/public/media/svg/misc/smartphone-2-dark.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/misc/smartphone-2.svg b/public/media/svg/misc/smartphone-2.svg
new file mode 100644
index 0000000..30d2344
--- /dev/null
+++ b/public/media/svg/misc/smartphone-2.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/misc/smartphone-dark.svg b/public/media/svg/misc/smartphone-dark.svg
new file mode 100644
index 0000000..69cf257
--- /dev/null
+++ b/public/media/svg/misc/smartphone-dark.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/misc/smartphone.svg b/public/media/svg/misc/smartphone.svg
new file mode 100644
index 0000000..0bc0c61
--- /dev/null
+++ b/public/media/svg/misc/smartphone.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/misc/taieri.svg b/public/media/svg/misc/taieri.svg
new file mode 100644
index 0000000..cfbcc58
--- /dev/null
+++ b/public/media/svg/misc/taieri.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/misc/video-play.svg b/public/media/svg/misc/video-play.svg
new file mode 100644
index 0000000..575f742
--- /dev/null
+++ b/public/media/svg/misc/video-play.svg
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/payment-methods/americanexpress.svg b/public/media/svg/payment-methods/americanexpress.svg
new file mode 100644
index 0000000..00bff07
--- /dev/null
+++ b/public/media/svg/payment-methods/americanexpress.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/payment-methods/mastercard.svg b/public/media/svg/payment-methods/mastercard.svg
new file mode 100644
index 0000000..808a472
--- /dev/null
+++ b/public/media/svg/payment-methods/mastercard.svg
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/payment-methods/paypal.svg b/public/media/svg/payment-methods/paypal.svg
new file mode 100644
index 0000000..647cc19
--- /dev/null
+++ b/public/media/svg/payment-methods/paypal.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/public/media/svg/payment-methods/visa.svg b/public/media/svg/payment-methods/visa.svg
new file mode 100644
index 0000000..23819b5
--- /dev/null
+++ b/public/media/svg/payment-methods/visa.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/svg/products-categories/gaming.svg b/public/media/svg/products-categories/gaming.svg
new file mode 100644
index 0000000..cf84d17
--- /dev/null
+++ b/public/media/svg/products-categories/gaming.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/products-categories/gloves.svg b/public/media/svg/products-categories/gloves.svg
new file mode 100644
index 0000000..d24976b
--- /dev/null
+++ b/public/media/svg/products-categories/gloves.svg
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/products-categories/shoes.svg b/public/media/svg/products-categories/shoes.svg
new file mode 100644
index 0000000..337a776
--- /dev/null
+++ b/public/media/svg/products-categories/shoes.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/products-categories/t-shirt.svg b/public/media/svg/products-categories/t-shirt.svg
new file mode 100644
index 0000000..bbb4ac7
--- /dev/null
+++ b/public/media/svg/products-categories/t-shirt.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/products-categories/watch.svg b/public/media/svg/products-categories/watch.svg
new file mode 100644
index 0000000..dca4585
--- /dev/null
+++ b/public/media/svg/products-categories/watch.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-1-dark.svg b/public/media/svg/shapes/abstract-1-dark.svg
new file mode 100644
index 0000000..375c6cc
--- /dev/null
+++ b/public/media/svg/shapes/abstract-1-dark.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-1.svg b/public/media/svg/shapes/abstract-1.svg
new file mode 100644
index 0000000..f1708dd
--- /dev/null
+++ b/public/media/svg/shapes/abstract-1.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-10.svg b/public/media/svg/shapes/abstract-10.svg
new file mode 100644
index 0000000..509eb31
--- /dev/null
+++ b/public/media/svg/shapes/abstract-10.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-2-dark.svg b/public/media/svg/shapes/abstract-2-dark.svg
new file mode 100644
index 0000000..b3ca328
--- /dev/null
+++ b/public/media/svg/shapes/abstract-2-dark.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-2.svg b/public/media/svg/shapes/abstract-2.svg
new file mode 100644
index 0000000..b964e84
--- /dev/null
+++ b/public/media/svg/shapes/abstract-2.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-3-dark.svg b/public/media/svg/shapes/abstract-3-dark.svg
new file mode 100644
index 0000000..1e900d4
--- /dev/null
+++ b/public/media/svg/shapes/abstract-3-dark.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-3.svg b/public/media/svg/shapes/abstract-3.svg
new file mode 100644
index 0000000..c4fc1bb
--- /dev/null
+++ b/public/media/svg/shapes/abstract-3.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-4-dark.svg b/public/media/svg/shapes/abstract-4-dark.svg
new file mode 100644
index 0000000..febc987
--- /dev/null
+++ b/public/media/svg/shapes/abstract-4-dark.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-4.svg b/public/media/svg/shapes/abstract-4.svg
new file mode 100644
index 0000000..86cc05e
--- /dev/null
+++ b/public/media/svg/shapes/abstract-4.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-5-dark.svg b/public/media/svg/shapes/abstract-5-dark.svg
new file mode 100644
index 0000000..25be000
--- /dev/null
+++ b/public/media/svg/shapes/abstract-5-dark.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-5.svg b/public/media/svg/shapes/abstract-5.svg
new file mode 100644
index 0000000..0e18151
--- /dev/null
+++ b/public/media/svg/shapes/abstract-5.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-6.svg b/public/media/svg/shapes/abstract-6.svg
new file mode 100644
index 0000000..82b3fde
--- /dev/null
+++ b/public/media/svg/shapes/abstract-6.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/svg/shapes/abstract-7.svg b/public/media/svg/shapes/abstract-7.svg
new file mode 100644
index 0000000..1985134
--- /dev/null
+++ b/public/media/svg/shapes/abstract-7.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-8.svg b/public/media/svg/shapes/abstract-8.svg
new file mode 100644
index 0000000..3faea00
--- /dev/null
+++ b/public/media/svg/shapes/abstract-8.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/abstract-9.svg b/public/media/svg/shapes/abstract-9.svg
new file mode 100644
index 0000000..ae0cd46
--- /dev/null
+++ b/public/media/svg/shapes/abstract-9.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/bitcoin.svg b/public/media/svg/shapes/bitcoin.svg
new file mode 100644
index 0000000..12a58fc
--- /dev/null
+++ b/public/media/svg/shapes/bitcoin.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/dogecoin.svg b/public/media/svg/shapes/dogecoin.svg
new file mode 100644
index 0000000..addfc2f
--- /dev/null
+++ b/public/media/svg/shapes/dogecoin.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/ethereum.svg b/public/media/svg/shapes/ethereum.svg
new file mode 100644
index 0000000..866ffbc
--- /dev/null
+++ b/public/media/svg/shapes/ethereum.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/components/_App/TopNavbar/TopNavbar.module.css b/public/media/svg/shapes/man-head.svg
similarity index 100%
rename from components/_App/TopNavbar/TopNavbar.module.css
rename to public/media/svg/shapes/man-head.svg
diff --git a/public/media/svg/shapes/top-green.png b/public/media/svg/shapes/top-green.png
new file mode 100644
index 0000000..7875a62
Binary files /dev/null and b/public/media/svg/shapes/top-green.png differ
diff --git a/public/media/svg/shapes/wave-bg-dark.svg b/public/media/svg/shapes/wave-bg-dark.svg
new file mode 100644
index 0000000..04b47da
--- /dev/null
+++ b/public/media/svg/shapes/wave-bg-dark.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/wave-bg-purple.svg b/public/media/svg/shapes/wave-bg-purple.svg
new file mode 100644
index 0000000..dbced46
--- /dev/null
+++ b/public/media/svg/shapes/wave-bg-purple.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/wave-bg-red.svg b/public/media/svg/shapes/wave-bg-red.svg
new file mode 100644
index 0000000..a291cbe
--- /dev/null
+++ b/public/media/svg/shapes/wave-bg-red.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/shapes/widget-bg-1.png b/public/media/svg/shapes/widget-bg-1.png
new file mode 100644
index 0000000..47feb47
Binary files /dev/null and b/public/media/svg/shapes/widget-bg-1.png differ
diff --git a/public/media/svg/shapes/widget-bg-2.png b/public/media/svg/shapes/widget-bg-2.png
new file mode 100644
index 0000000..99ab569
Binary files /dev/null and b/public/media/svg/shapes/widget-bg-2.png differ
diff --git a/public/media/svg/social-logos/dribbble.svg b/public/media/svg/social-logos/dribbble.svg
new file mode 100644
index 0000000..a4c9705
--- /dev/null
+++ b/public/media/svg/social-logos/dribbble.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/svg/social-logos/facebook.svg b/public/media/svg/social-logos/facebook.svg
new file mode 100644
index 0000000..ccff813
--- /dev/null
+++ b/public/media/svg/social-logos/facebook.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/media/svg/social-logos/github.svg b/public/media/svg/social-logos/github.svg
new file mode 100644
index 0000000..1d8b300
--- /dev/null
+++ b/public/media/svg/social-logos/github.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/media/svg/social-logos/google.svg b/public/media/svg/social-logos/google.svg
new file mode 100644
index 0000000..1307b69
--- /dev/null
+++ b/public/media/svg/social-logos/google.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/media/svg/social-logos/instagram.svg b/public/media/svg/social-logos/instagram.svg
new file mode 100644
index 0000000..3c89de9
--- /dev/null
+++ b/public/media/svg/social-logos/instagram.svg
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/social-logos/twitter.svg b/public/media/svg/social-logos/twitter.svg
new file mode 100644
index 0000000..3da834b
--- /dev/null
+++ b/public/media/svg/social-logos/twitter.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/media/svg/social-logos/youtube.svg b/public/media/svg/social-logos/youtube.svg
new file mode 100644
index 0000000..fcf58de
--- /dev/null
+++ b/public/media/svg/social-logos/youtube.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/splash-screen.css b/public/splash-screen.css
new file mode 100644
index 0000000..21a5103
--- /dev/null
+++ b/public/splash-screen.css
@@ -0,0 +1,43 @@
+body {
+ margin: 0;
+ padding: 0;
+}
+
+.splash-screen {
+ position: absolute;
+ z-index: 1000;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ font-family: Helvetica, 'sans-serif';
+ background-color: #f2f3f8;
+ color: #5E6278;
+ line-height: 1;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.splash-screen span {
+ color: #5E6278;
+ transition: none !important;
+ text-size-adjust: 100%;
+ -webkit-font-smoothing: antialiased;
+}
+
+.splash-screen img {
+ margin-left: calc(100vw - 100%);
+ margin-bottom: 30px;
+ height: 30px !important;
+}
+
+[data-theme="dark"] .splash-screen {
+ background-color: #151521;
+ color: #92929F;
+}
+
+[data-theme="dark"] .splash-screen span {
+ color: #92929F;
+}
diff --git a/rtl.config.js b/rtl.config.js
new file mode 100644
index 0000000..ae28e57
--- /dev/null
+++ b/rtl.config.js
@@ -0,0 +1,71 @@
+const path = require('path')
+const del = require('del')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const RtlCssPlugin = require('rtlcss-webpack-plugin')
+
+// global variables
+const rootPath = path.resolve(__dirname)
+const distPath = rootPath + '/src/_metronic/assets'
+const entries = {
+ 'css/style': './src/_metronic/assets/sass/style.scss',
+}
+
+// remove older folders and files
+;(async () => {
+ await del(distPath + '/css', {force: true})
+})()
+
+module.exports = {
+ mode: 'development',
+ stats: 'verbose',
+ performance: {
+ hints: 'error',
+ maxAssetSize: 10000000,
+ maxEntrypointSize: 4000000,
+ },
+ entry: entries,
+ output: {
+ // main output path in assets folder
+ path: distPath,
+ // output path based on the entries' filename
+ filename: '[name].js',
+ },
+ resolve: {
+ extensions: ['.scss'],
+ },
+ plugins: [
+ new MiniCssExtractPlugin({
+ filename: '[name].rtl.css',
+ }),
+ new RtlCssPlugin({
+ filename: '[name].rtl.css',
+ }),
+ {
+ apply: (compiler) => {
+ // hook name
+ compiler.hooks.afterEmit.tap('AfterEmitPlugin', () => {
+ ;(async () => {
+ await del(distPath + '/css/*.js', {force: true})
+ })()
+ })
+ },
+ },
+ ],
+ module: {
+ rules: [
+ {
+ test: /\.scss$/,
+ use: [
+ MiniCssExtractPlugin.loader,
+ 'css-loader',
+ {
+ loader: 'sass-loader',
+ options: {
+ sourceMap: true,
+ },
+ },
+ ],
+ },
+ ],
+ },
+}
diff --git a/src/_metronic/assets/sass/_init.scss b/src/_metronic/assets/sass/_init.scss
new file mode 100644
index 0000000..7ac4710
--- /dev/null
+++ b/src/_metronic/assets/sass/_init.scss
@@ -0,0 +1,28 @@
+//
+// Main init file of global bootstrap and theme functions, mixins, variables and config
+//
+
+
+// Custom functions & mixins
+@import "./core/base/functions";
+@import "./core/base/mixins";
+@import "./core/components/mixins";
+@import "./core/vendors/plugins/mixins";
+
+// Custom variables
+@import "components/variables.custom";
+@import "./core/components/variables";
+
+// Bootstrap initializaton
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+// 3rd-Party plugins variables
+@import "./core/vendors/plugins/variables";
+
+// Custom layout variables
+@import "./core/layout/base/variables";
+@import "layout/variables.custom";
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/components/_landing.scss b/src/_metronic/assets/sass/components/_landing.scss
new file mode 100644
index 0000000..34f3024
--- /dev/null
+++ b/src/_metronic/assets/sass/components/_landing.scss
@@ -0,0 +1,136 @@
+//
+// Landing elements
+//
+
+// Variables
+$landing-dark-color: #13263C;
+$landing-header-height: 100px;
+$landing-header-height-tablet-and-mobile: 70px;
+$landing-header-sticky-height: 70px;
+$landing-header-sticky-height-tablet-and-mobile: 70px;
+
+// Utility classes
+.landing-dark-bg {
+ background-color: $landing-dark-color;
+}
+
+.landing-dark-color {
+ color: $landing-dark-color;
+}
+
+.landing-dark-border {
+ border:1px dashed #2C3F5B;
+}
+
+.landing-dark-separator {
+ border-top:1px dashed #2C3F5B;
+}
+
+.landing-curve {
+ position: relative;
+
+ svg {
+ position: relative;
+ top: 0;
+ display: block;
+ }
+}
+
+// Landing header
+.landing-header {
+ display: flex;
+ align-items: center;
+ height: $landing-header-height;
+
+ // Logos
+ .logo-default {
+ display: block;
+ }
+
+ .logo-sticky {
+ display: none;
+ }
+
+ // Menu
+ .menu {
+ // Menu link
+ .menu-link {
+ &.active {
+ color: $white;
+ }
+ }
+
+ // Header menu sticky mode
+ [data-kt-sticky-landing-header="on"] & {
+ // Menu link
+ .menu-link {
+ &.active {
+ color: $primary;
+ background-color: rgba(#EFF2F5, 0.4);
+ }
+ }
+ }
+ }
+
+ // Sticky header modes
+ [data-kt-sticky-landing-header="on"] & {
+ padding: 0;
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 100;
+ background-color: $white;
+ box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
+ height: $landing-header-sticky-height;
+
+ // Logos
+ .logo-sticky {
+ display: block;
+ }
+
+ .logo-default {
+ display: none;
+ }
+ }
+}
+
+// Fix body padding top when Landing sticky header is on
+body[data-kt-sticky-landing-header="on"] {
+ padding-top: $landing-header-height;
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Landing header
+ .landing-header {
+ height: $landing-header-height-tablet-and-mobile;
+
+ // Menu wrapper
+ .landing-menu-wrapper {
+ position: relative;
+ overflow: auto;
+ }
+
+ // Sticky header modes
+ [data-kt-sticky-landing-header="on"] & {
+ height: $landing-header-sticky-height-tablet-and-mobile;
+ }
+
+ // Menu
+ .menu {
+ // Menu link
+ .menu-link {
+ &.active {
+ color: $primary;
+ background-color: rgba(#EFF2F5, 0.4);
+ }
+ }
+ }
+ }
+
+ // Fix body padding top when Landing sticky header is on
+ body[data-kt-sticky-landing-header="on"] {
+ padding-top: $landing-header-height-tablet-and-mobile;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/components/_variables.custom.scss b/src/_metronic/assets/sass/components/_variables.custom.scss
new file mode 100644
index 0000000..ae87b9f
--- /dev/null
+++ b/src/_metronic/assets/sass/components/_variables.custom.scss
@@ -0,0 +1,44 @@
+//
+// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.
+// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss
+// are not accessible in this file but you can override any global variable as shown below:
+//
+
+// Bootstrap color system
+$white: #ffffff;
+
+// Theme colors
+// Primary
+$primary: #009ef7;
+$primary-active: #0095e8;
+$primary-light: #f1faff;
+$primary-light-dark: #212e48;
+$primary-inverse: $white;
+
+// Success
+$success: #50cd89;
+$success-active: #47be7d;
+$success-light: #e8fff3;
+$success-light-dark: #1c3238;
+$success-inverse: $white;
+
+// Info
+$info: #7239ea;
+$info-active: #5014d0;
+$info-light: #f8f5ff;
+$info-light-dark: #2f264f;
+$info-inverse: $white;
+
+// Danger
+$danger: #f1416c;
+$danger-active: #d9214e;
+$danger-light: #fff5f8;
+$danger-light-dark: #3a2434;
+$danger-inverse: $white;
+
+// Warning
+$warning: #ffc700;
+$warning-active: #f1bc00;
+$warning-light: #fff8dd;
+$warning-light-dark: #392f28;
+$warning-inverse: $white;
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/components/components.scss b/src/_metronic/assets/sass/components/components.scss
new file mode 100644
index 0000000..aaed781
--- /dev/null
+++ b/src/_metronic/assets/sass/components/components.scss
@@ -0,0 +1,7 @@
+//
+// Components
+//
+
+// Import Dependencies
+@import "stepper/multistep";
+@import "landing";
diff --git a/src/_metronic/assets/sass/components/stepper/_multistep.scss b/src/_metronic/assets/sass/components/stepper/_multistep.scss
new file mode 100644
index 0000000..0861c78
--- /dev/null
+++ b/src/_metronic/assets/sass/components/stepper/_multistep.scss
@@ -0,0 +1,42 @@
+//
+// Multistep stepper
+//
+
+// Custom
+.stepper.stepper-pills.stepper-multistep {
+ --kt-stepper-pills-size: 46px;
+ --kt-stepper-icon-border-radius: 9px;
+ --kt-stepper-icon-check-size: 1.25rem;
+
+ --kt-stepper-icon-bg-color: rgba(255, 255, 255, 0.03);
+ --kt-stepper-icon-bg-color-current: var(--kt-success);
+ --kt-stepper-icon-bg-color-completed: rgba(255, 255, 255, 0.03);
+
+ --kt-stepper-icon-border: 1px dashed rgba(255, 255, 255, 0.3);
+ --kt-stepper-icon-border-current: 0;
+ --kt-stepper-icon-border-completed: 1px dashed rgba(255, 255, 255, 0.3);
+
+ --kt-stepper-icon-number-color: var(--kt-white);
+ --kt-stepper-icon-number-color-current: var(--kt-white);
+ --kt-stepper-icon-number-color-completed: var(--kt-white);
+
+ --kt-stepper-icon-check-color-completed: var(--kt-success);
+
+ --kt-stepper-label-title-opacity: 0.7;
+ --kt-stepper-label-title-opacity-current: 1;
+ --kt-stepper-label-title-opacity-completed: 1;
+
+ --kt-stepper-label-title-color: var(--kt-white);
+ --kt-stepper-label-title-color-current: var(--kt-white);
+ --kt-stepper-label-title-color-completed: var(--kt-white);
+
+ --kt-stepper-label-desc-opacity: 0.7;
+ --kt-stepper-label-desc-opacity-current: 0.7;
+ --kt-stepper-label-desc-opacity-completed: 0.7;
+
+ --kt-stepper-label-desc-color: var(--kt-white);
+ --kt-stepper-label-desc-color-current: var(--kt-white);
+ --kt-stepper-label-desc-color-completed: var(--kt-white);
+
+ --kt-stepper-line-border: 1px dashed rgba(255, 255, 255, 0.3);
+}
diff --git a/src/_metronic/assets/sass/core/base/_functions.scss b/src/_metronic/assets/sass/core/base/_functions.scss
new file mode 100644
index 0000000..0551f4b
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/_functions.scss
@@ -0,0 +1,10 @@
+//
+// Functions
+//
+
+// Import Dependencies
+@import "functions/get";
+@import "functions/set";
+@import "functions/math";
+@import "functions/valueif";
+@import "functions/theme-colors";
diff --git a/src/_metronic/assets/sass/core/base/_mixins.scss b/src/_metronic/assets/sass/core/base/_mixins.scss
new file mode 100644
index 0000000..93acae0
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/_mixins.scss
@@ -0,0 +1,11 @@
+//
+// Mixins
+//
+
+// Import Dependencies
+@import "mixins/property";
+@import "mixins/browsers";
+@import "mixins/fixes";
+@import "mixins/reset";
+@import "mixins/placeholder";
+@import "mixins/breakpoints";
diff --git a/src/_metronic/assets/sass/core/base/functions/_get.scss b/src/_metronic/assets/sass/core/base/functions/_get.scss
new file mode 100644
index 0000000..775e4a1
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/functions/_get.scss
@@ -0,0 +1,82 @@
+//
+// Get
+//
+
+@function get($map, $keys...) {
+ @if length($keys) == 1 {
+ $keys: nth($keys, 1);
+ }
+
+ @if type-of($map) != 'map' or $map == null {
+ //@return false;
+ }
+
+ $warn: "#{nth($keys, 1)}";
+ $length: length($keys);
+ $get: map-get($map, nth($keys, 1));
+
+ @if $length > 1 {
+ @for $i from 2 through $length {
+ @if $get != null and type-of($get) == 'map' {
+ $warn: $warn + "->#{nth($keys, $i)}";
+ $get: map-get($get, nth($keys, $i));
+
+ @if $get == null {
+ @return null;
+ }
+ }
+ @else {
+ @return get-warning($warn, $get, nth($keys, $i));
+ }
+ }
+ }
+
+ @return $get;
+}
+
+@function has($map, $keys...) {
+ @if length($keys) == 1 {
+ $keys: nth($keys, 1);
+ }
+
+ @if type-of($map) != 'map' or $map == null {
+ //@return false;
+ }
+
+ $warn: "#{nth($keys, 1)}";
+ $length: length($keys);
+ $get: map-get($map, nth($keys, 1));
+
+ @if $length > 1 {
+ @for $i from 2 through $length {
+ @if $get != null and type-of($get) == 'map' {
+ $warn: $warn + "->#{nth($keys, $i)}";
+ $get: map-get($get, nth($keys, $i));
+
+ @if $get == null {
+ @return false;
+ }
+ }
+ @else {
+ @return false;
+ }
+ }
+ }
+
+ @if $get != null {
+ @return true;
+ }
+ @else {
+ @return false;
+ }
+}
+
+@function get-warning($warn, $get, $key) {
+ @if $get == null {
+ @warn "Map has no value for key search `#{$warn}`";
+ }
+ @else if type-of($get) != 'map' {
+ @warn "Non-map value found for key search `#{$warn}`, cannot search for key `#{$key}`";
+ }
+ @return null;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/base/functions/_math.scss b/src/_metronic/assets/sass/core/base/functions/_math.scss
new file mode 100644
index 0000000..e5766ff
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/functions/_math.scss
@@ -0,0 +1,15 @@
+//
+// Math
+//
+
+@function sqrt($r) {
+ $x0: 1;
+ $x1: $x0;
+
+ @for $i from 1 through 10 {
+ $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
+ $x0: $x1;
+ }
+
+ @return $x1;
+}
diff --git a/src/_metronic/assets/sass/core/base/functions/_set.scss b/src/_metronic/assets/sass/core/base/functions/_set.scss
new file mode 100644
index 0000000..91690a8
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/functions/_set.scss
@@ -0,0 +1,43 @@
+/// Deep set function to set a value in nested maps
+
+@function set($map, $keys, $value) {
+ $maps: ($map,);
+ $result: null;
+
+ // If the last key is a map already
+ // Warn the user we will be overriding it with $value
+ @if type-of(nth($keys, -1)) == "map" {
+ @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
+ }
+
+ // If $keys is a single key
+ // Just merge and return
+ @if length($keys) == 1 {
+ @return map-merge($map, ($keys: $value));
+ }
+
+ // Loop from the first to the second to last key from $keys
+ // Store the associated map to this key in the $maps list
+ // If the key doesn't exist, throw an error
+ @for $i from 1 through length($keys) - 1 {
+ $current-key: nth($keys, $i);
+ $current-map: nth($maps, -1);
+ $current-get: map-get($current-map, $current-key);
+ @if $current-get == null {
+ @error "Key `#{$key}` doesn't exist at current level in map.";
+ }
+ $maps: append($maps, $current-get);
+ }
+
+ // Loop from the last map to the first one
+ // Merge it with the previous one
+ @for $i from length($maps) through 1 {
+ $current-map: nth($maps, $i);
+ $current-key: nth($keys, $i);
+ $current-val: if($i == length($maps), $value, $result);
+ $result: map-merge($current-map, ($current-key: $current-val));
+ }
+
+ // Return result
+ @return $result;
+}
diff --git a/src/_metronic/assets/sass/core/base/functions/_theme-colors.scss b/src/_metronic/assets/sass/core/base/functions/_theme-colors.scss
new file mode 100644
index 0000000..6c9fd7f
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/functions/_theme-colors.scss
@@ -0,0 +1,15 @@
+//
+// Bootstrap extended functions
+//
+
+@function theme-inverse-color($key: "primary") {
+ @return get($theme-inverse-colors, $key);
+}
+
+@function theme-active-color($key: "primary") {
+ @return get($theme-active-colors, $key);
+}
+
+@function theme-light-color($key: "primary") {
+ @return get($theme-light-colors, $key);
+}
diff --git a/src/_metronic/assets/sass/core/base/functions/_valueif.scss b/src/_metronic/assets/sass/core/base/functions/_valueif.scss
new file mode 100644
index 0000000..ac3de28
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/functions/_valueif.scss
@@ -0,0 +1,13 @@
+//
+// valueif
+//
+
+@function valueif($check, $trueValue, $falseValue: null) {
+ @if $check {
+ @return $trueValue;
+ } @else if $falseValue != null {
+ @return $falseValue;
+ } @else {
+ @return null;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/base/mixins/_breakpoints.scss b/src/_metronic/assets/sass/core/base/mixins/_breakpoints.scss
new file mode 100644
index 0000000..d335b9a
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/mixins/_breakpoints.scss
@@ -0,0 +1,25 @@
+// Media of at most the maximum and minimum breakpoint widths. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint.
+
+@mixin media-breakpoint-direction($direction, $name, $breakpoints: $grid-breakpoints) {
+ @if $direction == up {
+ $min: breakpoint-min($name, $breakpoints);
+
+ @if $min {
+ @media (min-width: $min) {
+ @content;
+ }
+ } @else {
+ @content;
+ }
+
+ } @else if $direction == down {
+ $max: breakpoint-max($name, $breakpoints);
+
+ @if $max {
+ @media (max-width: $max) {
+ @content;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/base/mixins/_browsers.scss b/src/_metronic/assets/sass/core/base/mixins/_browsers.scss
new file mode 100644
index 0000000..123ac81
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/mixins/_browsers.scss
@@ -0,0 +1,10 @@
+//
+// Browsers
+//
+
+@mixin for-edge {
+ // Microsoft Edge
+ @supports (-ms-ime-align:auto) {
+ @content;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/base/mixins/_fixes.scss b/src/_metronic/assets/sass/core/base/mixins/_fixes.scss
new file mode 100644
index 0000000..5f07525
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/mixins/_fixes.scss
@@ -0,0 +1,15 @@
+//
+// Fixes
+//
+
+
+@mixin fix-fixed-position-lags() {
+ // webkit hack for smooth font view on fixed positioned elements
+ -webkit-backface-visibility:hidden;
+ backface-visibility:hidden;
+}
+
+@mixin fix-animation-lags() {
+ transform: translateZ(0);
+ -webkit-transform-style: preserve-3d;
+}
diff --git a/src/_metronic/assets/sass/core/base/mixins/_placeholder.scss b/src/_metronic/assets/sass/core/base/mixins/_placeholder.scss
new file mode 100644
index 0000000..2119683
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/mixins/_placeholder.scss
@@ -0,0 +1,16 @@
+//
+// Input placeholder color
+//
+
+@mixin placeholder($color) {
+ // Chrome, Firefox, Opera, Safari 10.1+
+ &::placeholder {
+ color: $color;
+ }
+
+ // Firefox
+ &::-moz-placeholder {
+ color: $color;
+ opacity: 1;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/base/mixins/_property.scss b/src/_metronic/assets/sass/core/base/mixins/_property.scss
new file mode 100644
index 0000000..d93c3ec
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/mixins/_property.scss
@@ -0,0 +1,9 @@
+//
+// CSS Property
+//
+
+@mixin property($attr, $value, $important: '') {
+ @if $value != null and $value != false {
+ #{$attr}: #{$value} #{$important};
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/base/mixins/_reset.scss b/src/_metronic/assets/sass/core/base/mixins/_reset.scss
new file mode 100644
index 0000000..b796a6e
--- /dev/null
+++ b/src/_metronic/assets/sass/core/base/mixins/_reset.scss
@@ -0,0 +1,23 @@
+//
+// Reset
+//
+
+@mixin button-reset() {
+ appearance: none;
+ box-shadow: none;
+ border-radius: 0;
+ border: none;
+ cursor: pointer;
+ background-color: transparent;
+ outline: none !important;
+ margin: 0;
+ padding: 0;
+}
+
+@mixin input-reset() {
+ border: 0;
+ background-color: transparent;
+ outline: none !important;
+ box-shadow: none;
+ border-radius: 0;
+}
diff --git a/src/_metronic/assets/sass/core/components/_accordion.scss b/src/_metronic/assets/sass/core/components/_accordion.scss
new file mode 100644
index 0000000..c65a239
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_accordion.scss
@@ -0,0 +1,74 @@
+//
+// Accordion
+//
+
+// Base
+.accordion {
+ --#{$prefix}accordion-color: var(--kt-accordion-color);
+ --#{$prefix}accordion-bg: var(--kt-accordion-bg);
+ --#{$prefix}accordion-border-color: var(--kt-accordion-border-color);
+ --#{$prefix}accordion-btn-color: var(--kt-accordion-color);
+ --#{$prefix}accordion-btn-bg: var(--kt-accordion-button-bg);
+ --#{$prefix}accordion-btn-icon: var(--kt-accordion-button-icon);
+ --#{$prefix}accordion-btn-active-icon: var(--kt-accordion-button-active-icon);
+ --#{$prefix}accordion-btn-focus-border-color: var(--kt-accordion-button-focus-border-color);
+ --#{$prefix}accordion-btn-focus-box-shadow: var(--kt-accordion-button-focus-box-shadow);
+ --#{$prefix}accordion-active-color: var(--kt-accordion-button-active-color);
+ --#{$prefix}accordion-active-bg: var(--kt-accordion-button-active-bg);
+
+ // According heading
+ .accordion-header {
+ cursor: pointer;
+ }
+
+ // Icon toggle mode
+ &.accordion-icon-toggle {
+ // Accordion icon expaned mode
+ .accordion-icon {
+ display: flex;
+ flex-shrink: 0;
+ transition: $transition-base;
+ transform: rotate(90deg);
+ align-items: center;
+ justify-content: center;
+
+ i,
+ .svg-icon {
+ color: var(--kt-primary);
+ }
+ }
+
+ // Accordion icon collapsed mode
+ .collapsed {
+ .accordion-icon {
+ transition: $transition-base;
+ transform: rotate(0);
+
+ i,
+ .svg-icon {
+ color: var(--kt-text-muted);
+ }
+ }
+ }
+ }
+
+ // Reset accordion item border
+ &.accordion-borderless {
+ // According item
+ .accordion-item {
+ border: 0;
+ }
+ }
+
+ // Reset accordion item border, border radiues and background color
+ &.accordion-flush {
+ // According item
+ .accordion-item {
+ background-color: transparent;
+ border: 0;
+ border-radius: 0;
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_alert.scss b/src/_metronic/assets/sass/core/components/_alert.scss
new file mode 100644
index 0000000..8916c2b
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_alert.scss
@@ -0,0 +1,15 @@
+//
+// Alert
+//
+
+@each $name, $value in $theme-colors {
+ .alert-#{$name} {
+ color: var(--kt-#{$name});
+ border-color: var(--kt-#{$name});
+ background-color: var(--kt-#{$name}-light);
+
+ .alert-link {
+ color: var(--kt-#{$name});
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_anchor.scss b/src/_metronic/assets/sass/core/components/_anchor.scss
new file mode 100644
index 0000000..453d360
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_anchor.scss
@@ -0,0 +1,37 @@
+//
+// Anchor
+//
+
+.anchor {
+ display: flex;
+ align-items: center;
+
+ a {
+ position: relative;
+ display: none;
+ align-items: center;
+ justify-content:flex-start;
+ height: 1em;
+ width: 1.25em;
+ margin-left: -1.25em;
+ font-weight: 500;
+ font-size: 0.8em;
+ color: var(--kt-text-muted);
+ transition: $transition-base;
+
+ &:before {
+ content: '#';
+ }
+ }
+
+ &:hover {
+ a {
+ display: flex;
+
+ &:hover {
+ color: var(--kt-primary);
+ transition: $transition-base;
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_animation.scss b/src/_metronic/assets/sass/core/components/_animation.scss
new file mode 100644
index 0000000..c008782
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_animation.scss
@@ -0,0 +1,81 @@
+//
+// Animation
+//
+
+// Base
+.animation {
+ animation-duration: 1s;
+ animation-fill-mode: both;
+}
+
+// Slide In Down
+@keyframes animationSlideInDown {
+ from {
+ transform: translate3d(0, -100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.animation-slide-in-down {
+ animation-name: animationSlideInDown;
+}
+
+// Slide In Up
+@keyframes animationSlideInUp {
+ from {
+ transform: translate3d(0, 100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.animation-slide-in-up {
+ animation-name: animationSlideInUp;
+}
+
+// Fade In
+@keyframes animationFadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.animation-fade-in {
+ animation-name: animationFadeIn;
+}
+
+// Fade Out
+@keyframes animationFadeOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+.animation-fade-out {
+ animation-name: animationFadeOut;
+}
+
+// Blink
+.animation-blink {
+ animation: animationBlink 1s steps(5, start) infinite;
+}
+
+@keyframes animationBlink {
+ to {
+ visibility: hidden;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_badge.scss b/src/_metronic/assets/sass/core/components/_badge.scss
new file mode 100644
index 0000000..03ccd66
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_badge.scss
@@ -0,0 +1,77 @@
+//
+// Badge
+//
+
+.badge {
+ --#{$prefix}badge-color: var(--kt-badge-color);
+
+ display: inline-flex;
+ align-items: center;
+
+ // Fixed size
+ &.badge-circle,
+ &.badge-square {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: $badge-size;
+ min-width: $badge-size;
+ padding: 0 0.1rem;
+ line-height: 0;
+ }
+
+ // Circle
+ &.badge-circle {
+ border-radius: 50%;
+ padding: 0;
+ min-width: unset;
+ width: $badge-size;
+ }
+
+ // Sizes
+ &.badge-sm {
+ min-width: $badge-size-sm;
+ font-size: $badge-font-size-sm;
+
+ &.badge-square {
+ height: $badge-size-sm;
+ }
+
+ &.badge-circle {
+ width: $badge-size-sm;
+ height: $badge-size-sm;
+ }
+ }
+
+ &.badge-lg {
+ min-width: $badge-size-lg;
+ font-size: $badge-font-size-lg;
+
+ &.badge-square {
+ height: $badge-size-lg;
+ }
+
+ &.badge-circle {
+ width: $badge-size-lg;
+ height: $badge-size-lg;
+ }
+ }
+}
+
+@each $name, $value in $theme-colors {
+ .badge-#{$name} {
+ color: var(--kt-#{$name}-inverse);
+ background-color: var(--kt-#{$name});
+
+ &.badge-outline {
+ border: 1px solid var(--kt-#{$name});
+ color: var(--kt-#{$name});
+ background-color: transparent;
+ }
+ }
+
+ .badge-light-#{$name} {
+ color: var(--kt-#{$name});
+ background-color: var(--kt-#{$name}-light);
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_blockui.scss b/src/_metronic/assets/sass/core/components/_blockui.scss
new file mode 100644
index 0000000..879ce91
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_blockui.scss
@@ -0,0 +1,43 @@
+//
+// BlockUI
+//
+
+
+.blockui {
+ position: relative;
+
+ .blockui-overlay {
+ transition: all 0.3s ease;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--kt-blockui-overlay-bg);
+
+ .spinner-border {
+ height: 1.35rem;
+ width: 1.35rem;
+ }
+ }
+
+ .blockui-message {
+ display: flex;
+ align-items: center;
+ @include border-radius($border-radius);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ background-color: var(--kt-tooltip-bg);
+ color: var(--kt-gray-700);
+ font-weight: $font-weight-bold;
+ margin: 0 !important;
+ width: auto;
+ padding: 0.85rem 1.75rem !important;
+
+ .spinner-border {
+ margin-right: 0.65rem;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_breadcrumb.scss b/src/_metronic/assets/sass/core/components/_breadcrumb.scss
new file mode 100644
index 0000000..e2f16f3
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_breadcrumb.scss
@@ -0,0 +1,70 @@
+//
+// Breadcrumb
+//
+
+// Breadcrumb
+.breadcrumb {
+ --#{$prefix}breadcrumb-bg: var(--kt-breadcrumb-bg);
+ --#{$prefix}breadcrumb-divider-color: var(--kt-breadcrumb-divider-color);
+ --#{$prefix}breadcrumb-item-active-color: var(--kt-breadcrumb-item-active-color);
+
+ display: flex;
+ align-items: center;
+ background-color: transparent;
+ padding: 0;
+ margin: 0;
+
+ // Item breadcrumb
+ .breadcrumb-item {
+ display: flex;
+ align-items: center;
+ padding-left: 0;
+ padding-right: $breadcrumb-item-padding-x;
+
+ &:last-child {
+ padding-right: 0;
+ }
+
+ &:after {
+ content: "/";
+ //padding-left: $breadcrumb-item-padding-x;
+ }
+
+ &:before {
+ display: none;
+ }
+
+ &:last-child {
+ &:after {
+ display: none;
+ }
+ }
+ }
+}
+
+// Breadcrumb line style
+.breadcrumb-line {
+ .breadcrumb-item {
+ &:after {
+ content: "-";
+ }
+ }
+}
+
+// Breadcrumb dot style
+.breadcrumb-dot {
+ .breadcrumb-item {
+ &:after {
+ content: "\2022";
+ }
+ }
+}
+
+// Breadcrumb separatorless style
+.breadcrumb-separatorless {
+ .breadcrumb-item {
+ &:after {
+ display:none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_bullet.scss b/src/_metronic/assets/sass/core/components/_bullet.scss
new file mode 100644
index 0000000..57d4300
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_bullet.scss
@@ -0,0 +1,33 @@
+//
+// Bullet
+//
+
+// Base
+.bullet {
+ display: inline-block;
+ background-color: var(--kt-bullet-bg-color);
+ @include border-radius($bullet-bar-border-radius);
+ width: $bullet-bar-width;
+ height: $bullet-bar-height;
+ flex-shrink: 0;
+}
+
+// Dot bullet
+.bullet-dot {
+ width: $bullet-dot-size;
+ height: $bullet-dot-size;
+ border-radius: 100% !important;
+}
+
+// Vertical bullet
+.bullet-vertical {
+ width: $bullet-bar-height;
+ height: $bullet-bar-width;
+}
+
+// Vertical line
+.bullet-line {
+ width: $bullet-line-width;
+ height: $bullet-line-height;
+ border-radius: 0;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_button-group.scss b/src/_metronic/assets/sass/core/components/_button-group.scss
new file mode 100644
index 0000000..f5dae70
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_button-group.scss
@@ -0,0 +1,7 @@
+
+
+// The clickable button for toggling the menu
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
+ @include box-shadow(var(--kt-btn-active-box-shadow));
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_buttons.scss b/src/_metronic/assets/sass/core/components/_buttons.scss
new file mode 100644
index 0000000..9ca3257
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_buttons.scss
@@ -0,0 +1,7 @@
+//
+// Buttons
+//
+
+// Import Dependencies
+@import "buttons/base";
+@import "buttons/theme";
diff --git a/src/_metronic/assets/sass/core/components/_card.scss b/src/_metronic/assets/sass/core/components/_card.scss
new file mode 100644
index 0000000..1662e7e
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_card.scss
@@ -0,0 +1,291 @@
+//
+// Card
+//
+
+// Base
+.card {
+ @if ($card-border-enabled) {
+ border: $card-border-width $card-border-style var(--kt-card-border-color);
+ } @else {
+ border: 0;
+ }
+
+ box-shadow: var(--kt-card-box-shadow);
+ background-color: var(--kt-card-bg);
+
+ // Header
+ .card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ flex-wrap: wrap;
+ min-height: $card-header-height;
+ padding: 0 $card-px;
+ color: var(--kt-card-cap-color);
+ background-color: var(--kt-card-cap-bg);
+ border-bottom: $card-border-width $card-border-style var(--kt-card-border-color);
+
+ // Title
+ .card-title {
+ display: flex;
+ align-items: center;
+ margin: $card-header-py;
+ margin-left: 0;
+
+ &.flex-column {
+ align-items: flex-start;
+ justify-content: center;
+ }
+
+ .card-icon {
+ margin-right: 0.75rem;
+ line-height: 0;
+
+ i {
+ font-size: 1.25rem;
+ color: var(--kt-gray-600);
+ line-height: 0;
+
+ &:after,
+ &:before {
+ line-height: 0;
+ }
+ }
+
+ .svg-icon {
+ color: var(--kt-gray-600);
+ @include svg-icon-size(24px);
+ }
+ }
+
+ &,
+ .card-label {
+ font-weight: 500;
+ font-size: 1.275rem;
+ color: var(--kt-text-dark);
+ }
+
+ .card-label {
+ margin: 0 0.75rem 0 0;
+ flex-wrap: wrap;
+ }
+
+ // Description
+ small {
+ color: var(--kt-text-muted);
+ font-size: 1rem;
+ }
+
+ // Headings
+ h1, h2, h3, h4, h5, h6 {
+ margin-bottom: 0;
+ }
+ }
+
+ // Toolbar
+ .card-toolbar {
+ display: flex;
+ align-items: center;
+ margin: $card-header-py 0;
+ flex-wrap: wrap;
+ }
+ }
+
+ // Body
+ .card-body {
+ padding: $card-py $card-px;
+ color: var(--kt-card-color);
+ }
+
+ // Footer
+ .card-footer {
+ padding: $card-py $card-px;
+ color: var(--kt-card-cap-color);
+ background-color: var(--kt-card-cap-bg);
+ border-top: $card-border-width $card-border-style var(--kt-card-border-color);
+ }
+
+ // Scroll
+ .card-scroll {
+ position: relative;
+ overflow: auto;
+ }
+
+ // Reset padding x
+ &.card-px-0 {
+ .card-header,
+ .card-body,
+ .card-footer {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+
+ &.card-py-0 {
+ .card-header,
+ .card-body,
+ .card-footer {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ }
+
+ &.card-p-0 {
+ .card-header,
+ .card-body,
+ .card-footer {
+ padding: 0;
+ }
+ }
+
+ // Dashed style
+ &.card-dashed {
+ box-shadow: none;
+ border: $card-border-width dashed var(--kt-card-border-dashed-color);
+
+ > .card-header {
+ border-bottom: 1px dashed var(--kt-card-border-dashed-color);
+ }
+
+ > .card-footer {
+ border-top: 1px dashed var(--kt-card-border-dashed-color);
+ }
+ }
+
+ // Bordered style
+ &.card-bordered {
+ box-shadow: none;
+ border: $card-border-width $card-border-style var(--kt-card-border-color);
+ }
+
+ // Flush header and footer borders
+ &.card-flush {
+ > .card-header {
+ border-bottom: 0 !important;
+ }
+
+ > .card-footer {
+ border-top: 0 !important;
+ }
+ }
+
+ // Enable shadow
+ &.card-shadow {
+ box-shadow: var(--kt-card-box-shadow);
+ border: 0;
+ }
+
+ // Reset styles
+ &.card-reset {
+ border: 0 !important;
+ box-shadow: none !important;
+ background-color: transparent !important;
+
+ > .card-header {
+ border-bottom: 0 !important;
+ }
+
+ > .card-footer {
+ border-top: 0 !important;
+ }
+ }
+}
+
+// Responsive stretch heights
+.card {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ // Stretch
+ &.card#{$infix}-stretch {
+ height: calc(100% - var(--bs-gutter-y));
+ }
+
+ // Stretch 75
+ &.card#{$infix}-stretch-75 {
+ height: calc(75% - var(--bs-gutter-y));
+ }
+
+ // Stretch 50
+ &.card#{$infix}-stretch-50 {
+ height: calc(50% - var(--bs-gutter-y));
+ }
+
+ // Stretch 33
+ &.card#{$infix}-stretch-33 {
+ height: calc(33.333% - var(--bs-gutter-y));
+ }
+
+ // Stretch 25
+ &.card#{$infix}-stretch-25 {
+ height: calc(25% - var(--bs-gutter-y));
+ }
+
+ // Header stretch
+ .card-header#{$infix}-stretch {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ align-items: stretch;
+
+ .card-toolbar {
+ margin: 0;
+ align-items: stretch;
+ }
+ }
+ }
+ }
+}
+
+// Utilities
+.card-p {
+ padding: $card-py $card-px !important;
+}
+
+.card-px {
+ padding-left: $card-px !important;
+ padding-right: $card-px !important;
+}
+
+.card-shadow {
+ box-shadow: var(--kt-card-box-shadow);
+}
+
+.card-py {
+ padding-top: $card-py !important;
+ padding-bottom: $card-py !important;
+}
+
+.card-rounded {
+ border-radius: $card-border-radius;
+}
+
+.card-rounded-start {
+ border-top-left-radius: $card-border-radius;
+ border-bottom-left-radius: $card-border-radius;
+}
+
+.card-rounded-end {
+ border-top-right-radius: $card-border-radius;
+ border-bottom-right-radius: $card-border-radius;
+}
+
+.card-rounded-top {
+ border-top-left-radius: $card-border-radius;
+ border-top-right-radius: $card-border-radius;
+}
+
+.card-rounded-bottom {
+ border-bottom-left-radius: $card-border-radius;
+ border-bottom-right-radius: $card-border-radius;
+}
+
+// Mobile mode
+@include media-breakpoint-down(md) {
+ .card {
+ > .card-header:not(.flex-nowrap) {
+ padding-top: $card-header-py;
+ padding-bottom: $card-header-py;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_carousel.scss b/src/_metronic/assets/sass/core/components/_carousel.scss
new file mode 100644
index 0000000..a4b5beb
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_carousel.scss
@@ -0,0 +1,130 @@
+//
+// Carousel
+//
+
+
+.carousel-custom {
+ // Indicators
+ .carousel-indicators {
+ align-items: center;
+ position: static;
+ z-index: auto;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ li {
+ transform: none;
+ opacity: 1;
+
+ &.active {
+ transform: none;
+ opacity: 1;
+ }
+ }
+
+ // Dots style
+ &.carousel-indicators-dots {
+ li {
+ border-radius: 0;
+ background-color: transparent;
+ height: $carousel-custom-dots-indicator-active-size;
+ width: $carousel-custom-dots-indicator-active-size;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+
+ &:after {
+ display: inline-block;
+ content: " ";
+ @include border-radius(50%);
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ background-color: var(--kt-carousel-custom-indicator-default-bg-color);
+ height: $carousel-custom-dots-indicator-default-size;
+ width: $carousel-custom-dots-indicator-default-size;
+ }
+
+ &.active {
+ background-color: transparent;
+
+ &:after {
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ height: $carousel-custom-dots-indicator-active-size;
+ width: $carousel-custom-dots-indicator-active-size;
+ background-color: var(--kt-carousel-custom-indicator-active-bg-color);
+ }
+ }
+ }
+ }
+
+ // Bullet style
+ &.carousel-indicators-bullet {
+ li {
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ background-color: transparent;
+ border-radius: $carousel-custom-bullet-indicator-default-size;
+ height: $carousel-custom-bullet-indicator-default-size;
+ width: $carousel-custom-bullet-indicator-default-size;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+
+ &:after {
+ display: inline-block;
+ content: " ";
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ background-color: var(--kt-carousel-custom-bullet-indicator-default-bg-color);
+ border-radius: $carousel-custom-bullet-indicator-default-size;
+ height: $carousel-custom-bullet-indicator-default-size;
+ width: $carousel-custom-bullet-indicator-default-size;
+ }
+
+ &.active {
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ background-color: transparent;
+ height: $carousel-custom-bullet-indicator-default-size;
+ width: $carousel-custom-bullet-indicator-active-width;
+
+ &:after {
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ height: $carousel-custom-bullet-indicator-default-size;
+ width: $carousel-custom-bullet-indicator-active-width;
+ background-color: var(--kt-carousel-custom-bullet-indicator-active-bg-color);
+ }
+ }
+ }
+ }
+ }
+
+ // Theme colors
+ @each $name, $value in $theme-colors {
+ .carousel-indicators-active-#{$name} {
+ li.active:after {
+ background-color: $value !important;
+ }
+ }
+ }
+
+ // Stretch mode
+ &.carousel-stretch {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .carousel-inner {
+ flex-grow: 1;
+ }
+
+ .carousel-item {
+ height: 100%;
+ }
+
+ .carousel-wrapper {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_close.scss b/src/_metronic/assets/sass/core/components/_close.scss
new file mode 100644
index 0000000..6c3e529
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_close.scss
@@ -0,0 +1,14 @@
+//
+// Close
+//
+
+.btn-close {
+ color: var(--kt-btn-close-color);
+ background-image: var(--kt-btn-close-bg);
+ background-position: center;
+
+
+ &:hover {
+ color: var(--kt-btn-close-color);
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_code.scss b/src/_metronic/assets/sass/core/components/_code.scss
new file mode 100644
index 0000000..b01d5a2
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_code.scss
@@ -0,0 +1,15 @@
+//
+// Code
+//
+
+code:not([class*="language-"]) {
+ font-weight: $code-font-weight;
+ color: var(--kt-code-color);
+ line-height: inherit;
+ font-size: inherit;
+ background-color: var(--kt-code-bg);
+ padding: $code-padding;
+ margin: $code-margin;
+ box-shadow: var(--kt-code-box-shadow);
+ @include border-radius($code-border-radius);
+}
diff --git a/src/_metronic/assets/sass/core/components/_cookiealert.scss b/src/_metronic/assets/sass/core/components/_cookiealert.scss
new file mode 100644
index 0000000..539756e
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_cookiealert.scss
@@ -0,0 +1,8 @@
+//
+// Cookie Alert
+//
+
+.cookiealert{
+ background: inherit;
+ color: inherit;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_drawer.scss b/src/_metronic/assets/sass/core/components/_drawer.scss
new file mode 100644
index 0000000..bfb97b8
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_drawer.scss
@@ -0,0 +1,62 @@
+//
+// Drawer
+//
+
+// Drawer
+.drawer {
+ display: flex !important;
+ overflow: auto;
+ z-index: $drawer-z-index;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ background-color: var(--kt-drawer-bg-color);
+ transition: transform $drawer-transition-speed ease-in-out !important;
+
+ &.drawer-start {
+ left: 0;
+ transform: translateX(-100%);
+ }
+
+ &.drawer-end {
+ right: 0;
+ transform: translateX(100%);
+ }
+
+ &.drawer-on {
+ transform: none;
+ box-shadow: var(--kt-drawer-box-shadow);
+ transition: transform $drawer-transition-speed ease-in-out !important;
+ }
+}
+
+// Drawer Overlay
+.drawer-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ overflow: hidden;
+ z-index: $drawer-z-index - 1;
+ background-color: var(--kt-drawer-overlay-bg-color);
+ animation: animation-drawer-fade-in $drawer-overlay-animation-speed ease-in-out 1;
+}
+
+// Initial state
+[data-kt-drawer="true"] {
+ display: none;
+}
+
+// Animation
+@keyframes animation-drawer-fade-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+// Tablet & Mobile Modes
+@include media-breakpoint-down(lg) {
+ body[data-kt-drawer="on"] {
+ overflow: hidden;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_dropdown.scss b/src/_metronic/assets/sass/core/components/_dropdown.scss
new file mode 100644
index 0000000..0b307d8
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_dropdown.scss
@@ -0,0 +1,16 @@
+
+// The dropdown menu
+.dropdown-menu {
+ --#{$prefix}dropdown-color: var(--kt-dropdown-color);
+ --#{$prefix}dropdown-bg: var(--kt-dropdown-bg);
+ --#{$prefix}dropdown-border-color: var(--kt-dropdown-border-color);
+ --#{$prefix}dropdown-divider-bg: var(--kt-dropdown-divider-bg);
+ --#{$prefix}dropdown-box-shadow: var(--kt-dropdown-box-shadow);
+ --#{$prefix}dropdown-link-color: var(--kt-dropdown-link-color);
+ --#{$prefix}dropdown-link-hover-color: var(--kt-dropdown-link-hover-color);
+ --#{$prefix}dropdown-link-hover-bg: var(--kt-dropdown-link-hover-bg);
+ --#{$prefix}dropdown-link-active-color: var(--kt-dropdown-link-active-color);
+ --#{$prefix}dropdown-link-active-bg: var(--kt-dropdown-link-active-bg);
+ --#{$prefix}dropdown-link-disabled-color: var(--kt-dropdown-link-disabled-color);
+ --#{$prefix}dropdown-header-color: var(--kt-dropdown-header-color);
+}
diff --git a/src/_metronic/assets/sass/core/components/_engage.scss b/src/_metronic/assets/sass/core/components/_engage.scss
new file mode 100644
index 0000000..a0290dc
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_engage.scss
@@ -0,0 +1,20 @@
+//
+// Engage panel(used for demo product demo)
+//
+
+.engage-btn {
+ display: flex;
+ align-items: center;
+ height: 35px !important;
+
+ @include button-custom-variant(
+ $color: var(--kt-engage-btn-color),
+ $icon-color: var(--kt-engage-btn-color),
+ $border-color: var(--kt-engage-btn-bg),
+ $bg-color: var(--kt-engage-btn-bg),
+ $color-active: var(--kt-engage-btn-color-active),
+ $icon-color-active: var(--kt-engage-btn-color-active),
+ $border-color-active: var(--kt-engage-btn-bg),
+ $bg-color-active: var(--kt-engage-btn-bg)
+ );
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_explore.scss b/src/_metronic/assets/sass/core/components/_explore.scss
new file mode 100644
index 0000000..049ff4c
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_explore.scss
@@ -0,0 +1,104 @@
+//
+// Explore(used for demo product demo)
+//
+
+$explore-primary: #00B2FF;
+$explore-primary-light: #F1FAFF;
+$explore-primary-active: #0098DA;
+$explore-primary-inverse: $white;
+
+$explore-success: #50CD89;
+$explore-success-light: #E8FFF3;
+$explore-success-active: #47BE7D;
+$explore-success-inverse: $white;
+
+$explore-warning: #FFC700;
+$explore-warning-inverse: $white;
+
+$explore-danger: #F1416C;
+$explore-warning-inverse: $white;
+
+.explore-btn-toggle {
+ color: var(--kt-gray-600);
+ background-color: $white;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: $explore-primary-inverse;
+ background-color: $explore-primary;
+ }
+}
+
+.explore-btn-dismiss {
+ border: 0;
+
+ &:hover {
+ i,
+ .svg-icon {
+ color: $explore-primary;
+ }
+ }
+}
+
+.explore-btn-primary {
+ border: 0;
+ color: $explore-primary-inverse;
+ background-color: $explore-primary;
+
+ &:hover {
+ color: $explore-primary-inverse;
+ background-color: $explore-primary-active;
+ }
+}
+
+.explore-btn-secondary {
+ border: 0;
+ color: var(--kt-gray-600);
+ background-color: var(--kt-gray-100);
+
+ &:hover {
+ color: var(--kt-gray-800);
+ background-color: var(--kt-gray-200);
+ }
+}
+
+.explore-btn-outline {
+ border: 1px dashed var(--kt-gray-300) !important;
+
+ &:hover,
+ &.active {
+ border: 1px dashed $explore-success !important;
+ background-color: $explore-success-light;
+ }
+}
+
+.explore-link {
+ color: $explore-primary;
+
+ &:hover {
+ color: $explore-primary-active;
+ }
+}
+
+.explore-link-hover:hover {
+ color: $explore-primary !important;
+}
+
+.explore-icon-success {
+ color: $explore-success;
+}
+
+.explore-icon-danger {
+ color: $explore-danger;
+}
+
+.explore-label-free {
+ color: $explore-warning-inverse;
+ background-color: $explore-warning;
+}
+
+.explore-label-pro {
+ color: $explore-success-inverse;
+ background-color: $explore-success;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_feedback.scss b/src/_metronic/assets/sass/core/components/_feedback.scss
new file mode 100644
index 0000000..5b2844f
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_feedback.scss
@@ -0,0 +1,34 @@
+//
+// Loading
+//
+
+.feedback {
+ display: none;
+}
+
+.feedback-popup {
+ display: flex;
+ justify-content: center;
+ margin: 0 auto;
+ position: fixed;
+ z-index: $feedback-popup-z-index;
+ box-shadow: var(--kt-feedback-popup-box-shadow);
+ background-color: var(--kt-feedback-popup-background-color);
+ border-radius: $feedback-popup-border-radius;
+ padding: $feedback-popup-padding;
+}
+
+// Placement
+.feedback-top-center {
+ display: flex;
+ transition: top $feedback-popup-transition-speed ease;
+ left: 50%;
+ transform: translateX(-50%);
+ @include border-top-start-radius(0);
+ @include border-top-end-radius(0);
+
+ &.feedback-shown {
+ top: 0px;
+ transition: top $feedback-popup-transition-speed ease;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_fixed.scss b/src/_metronic/assets/sass/core/components/_fixed.scss
new file mode 100644
index 0000000..c4935c4
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_fixed.scss
@@ -0,0 +1,18 @@
+//
+// Fixed
+//
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .fixed-top#{$infix} {
+ position: fixed;
+ z-index: $fixed-z-index;
+ top: 0;
+ left: 0;
+ right: 0;
+ }
+ }
+}
+
diff --git a/src/_metronic/assets/sass/core/components/_forms.scss b/src/_metronic/assets/sass/core/components/_forms.scss
new file mode 100644
index 0000000..7e5f3ae
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_forms.scss
@@ -0,0 +1,19 @@
+//
+// Forms
+//
+
+// Import Dependencies
+@import "forms/labels";
+@import "forms/form-text";
+@import "forms/form-control";
+@import "forms/form-select";
+@import "forms/form-check";
+@import "forms/floating-labels";
+@import "forms/input-group";
+
+@import "forms/form-control-solid";
+@import "forms/form-select-solid";
+@import "forms/form-check-solid";
+@import "forms/input-group-solid";
+@import "forms/floating-labels";
+@import "forms/required";
diff --git a/src/_metronic/assets/sass/core/components/_helpers.scss b/src/_metronic/assets/sass/core/components/_helpers.scss
new file mode 100644
index 0000000..803a272
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_helpers.scss
@@ -0,0 +1,12 @@
+//
+// Helpers
+//
+
+// Import Dependencies
+@import "helpers/background";
+@import "helpers/borders";
+@import "helpers/flex";
+@import "helpers/shadow";
+@import "helpers/text";
+@import "helpers/opacity";
+@import "helpers/transform";
diff --git a/src/_metronic/assets/sass/core/components/_hover.scss b/src/_metronic/assets/sass/core/components/_hover.scss
new file mode 100644
index 0000000..66650db
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_hover.scss
@@ -0,0 +1,48 @@
+//
+// Hover effects
+//
+
+.hover-elevate-up {
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: translateY(-5%);
+ transition: transform 0.3s ease;
+ }
+}
+
+.hover-elevate-down {
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: translateY(5%);
+ transition: transform 0.3s ease;
+ }
+}
+
+.hover-scale {
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: scale(1.1);
+ transition: transform 0.3s ease;
+ }
+}
+
+.hover-rotate-end {
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: rotate(4deg);
+ transition: transform 0.3s ease;
+ }
+}
+
+.hover-rotate-start {
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: rotate(-4deg);
+ transition: transform 0.3s ease;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_image-input.scss b/src/_metronic/assets/sass/core/components/_image-input.scss
new file mode 100644
index 0000000..c08f0ae
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_image-input.scss
@@ -0,0 +1,111 @@
+//
+// Avatar
+//
+
+
+// Base
+.image-input {
+ position: relative;
+ display: inline-block;
+ @include border-radius($border-radius);
+ background-repeat: no-repeat;
+ background-size: cover;
+
+ // Empty state
+ &:not(.image-input-empty) {
+ background-image: none !important;
+ }
+
+ // Wrapper
+ .image-input-wrapper {
+ width: 120px;
+ height: 120px;
+ @include border-radius($border-radius);
+ background-repeat: no-repeat;
+ background-size: cover;
+ }
+
+ // Actions
+ [data-kt-image-input-action] {
+ cursor: pointer;
+ position: absolute;
+ transform: translate(-50%,-50%);
+ }
+
+ // Change Button
+ [data-kt-image-input-action="change"] {
+ left: 100%;
+ top: 0;
+
+ input {
+ width: 0 !important;
+ height: 0 !important;
+ overflow: hidden;
+ opacity: 0;
+ }
+ }
+
+ // Cancel & Remove Buttons
+ [data-kt-image-input-action="cancel"],
+ [data-kt-image-input-action="remove"] {
+ position: absolute;
+ left: 100%;
+ top: 100%;
+ }
+
+ [data-kt-image-input-action="cancel"] {
+ display: none;
+ }
+
+ // Input Changed State
+ &.image-input-changed {
+ [data-kt-image-input-action="cancel"] {
+ display: flex;
+ }
+
+ [data-kt-image-input-action="remove"] {
+ display: none;
+ }
+ }
+
+ // Input Empty State
+ &.image-input-empty {
+ [data-kt-image-input-action="remove"],
+ [data-kt-image-input-action="cancel"] {
+ display: none;
+ }
+ }
+
+ // Circle style
+ &.image-input-circle {
+ border-radius: 50%;
+
+ // Wrapper
+ .image-input-wrapper {
+ border-radius: 50%;
+ }
+
+ // Change Control
+ [data-kt-image-input-action="change"] {
+ left: 100%;
+ top: 0;
+ transform: translate(-100%, 0%);
+ }
+
+ // Cancel & Remove Buttons
+ [data-kt-image-input-action="cancel"],
+ [data-kt-image-input-action="remove"] {
+ left: 100%;
+ top: 100%;
+ transform: translate(-100%,-100%);
+ }
+ }
+
+ // Bordered style
+ &.image-input-outline {
+ .image-input-wrapper {
+ border: 3px solid var(--kt-body-bg);
+ box-shadow: var(--kt-box-shadow);
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_images.scss b/src/_metronic/assets/sass/core/components/_images.scss
new file mode 100644
index 0000000..b0317f8
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_images.scss
@@ -0,0 +1,12 @@
+
+
+// Image thumbnails
+.img-thumbnail {
+ background-color: var(--kt-thumbnail-bg);
+ border: $thumbnail-border-width solid var(--kt-thumbnail-border-color);
+ @include box-shadow(var(--kt-thumbnail-box-shadow));
+}
+
+.figure-caption {
+ color: var(--kt-figure-caption-color);
+}
diff --git a/src/_metronic/assets/sass/core/components/_indicator.scss b/src/_metronic/assets/sass/core/components/_indicator.scss
new file mode 100644
index 0000000..d74a923
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_indicator.scss
@@ -0,0 +1,17 @@
+//
+// Indicator
+//
+
+.indicator-progress {
+ display: none;
+
+ [data-kt-indicator="on"] > & {
+ display: inline-block;
+ }
+}
+
+.indicator-label {
+ [data-kt-indicator="on"] > & {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_list-group.scss b/src/_metronic/assets/sass/core/components/_list-group.scss
new file mode 100644
index 0000000..5562fbd
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_list-group.scss
@@ -0,0 +1,19 @@
+//
+// List group
+//
+
+.list-group {
+ --#{$prefix}list-group-color: var(--kt-list-group-color);
+ --#{$prefix}list-group-bg: var(--kt-list-group-bg);
+ --#{$prefix}list-group-border-color: var(--kt-list-group-border-color);
+ --#{$prefix}list-group-action-color: var(--kt-list-group-action-color);
+ --#{$prefix}list-group-action-hover-color: var(--kt-list-group-action-hover-color);
+ --#{$prefix}list-group-action-hover-bg: var(--kt-list-group-hover-bg);
+ --#{$prefix}list-group-action-active-color: var(--kt-list-group-action-active-color);
+ --#{$prefix}list-group-action-active-bg: var(--kt-list-group-action-active-bg);
+ --#{$prefix}list-group-disabled-color: var(--kt-list-group-disabled-color);
+ --#{$prefix}list-group-disabled-bg: var(--kt-list-group-disabled-bg);
+ --#{$prefix}list-group-active-color: var(--kt-list-group-active-color);
+ --#{$prefix}list-group-active-bg: var(--kt-list-group-active-bg);
+ --#{$prefix}list-group-active-border-color: var(--kt-list-group-active-border-color);
+}
diff --git a/src/_metronic/assets/sass/core/components/_menu.scss b/src/_metronic/assets/sass/core/components/_menu.scss
new file mode 100644
index 0000000..8564e7c
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_menu.scss
@@ -0,0 +1,7 @@
+//
+// Menu
+//
+
+// Import Dependencies
+@import "menu/base";
+@import "menu/theme";
diff --git a/src/_metronic/assets/sass/core/components/_mixins.scss b/src/_metronic/assets/sass/core/components/_mixins.scss
new file mode 100644
index 0000000..522cbf0
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_mixins.scss
@@ -0,0 +1,16 @@
+//
+// Mixins
+//
+
+// Import Dependencies
+@import "mixins/theme-mode";
+@import "mixins/menu";
+@import "mixins/tooltip";
+@import "mixins/popover";
+@import "mixins/buttons";
+@import "mixins/ki";
+@import "mixins/symbol";
+@import "mixins/svg-icon";
+@import "mixins/svg-bg-icon";
+@import "mixins/scroll";
+@import "mixins/shape";
diff --git a/src/_metronic/assets/sass/core/components/_modal.scss b/src/_metronic/assets/sass/core/components/_modal.scss
new file mode 100644
index 0000000..547fcb5
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_modal.scss
@@ -0,0 +1,65 @@
+//
+// Modal
+//
+
+.modal {
+ --#{$prefix}modal-color: var(--kt-modal-content-color);
+ --#{$prefix}modal-bg: var(--kt-modal-content-bg);
+ --#{$prefix}modal-border-color: var(--kt-modal-content-border-color);
+ --#{$prefix}modal-box-shadow: var(--kt-modal-content-box-shadow-xs);
+ --#{$prefix}modal-header-border-color: var(--kt-modal-header-border-color);
+ --#{$prefix}modal-footer-bg: var(--kt-modal-footer-bg);
+ --#{$prefix}modal-footer-border-color: var(--kt-modal-footer-border-color);
+}
+
+ // Mobile dialog
+.modal-dialog {
+ outline: none !important;
+}
+
+// Modal header
+.modal-header {
+ align-items: center;
+ justify-content: space-between;
+ @include border-top-radius($modal-content-border-radius);
+ border-bottom: $modal-header-border-width solid var(--kt-modal-header-border-color);
+
+ // Headings
+ h1,h2,h3,h4,h5,h6 {
+ margin-bottom: 0;
+ }
+}
+
+// Modal content
+.modal-content {
+ color: var(--kt-modal-color);
+ background-color: var(--kt-modal-bg);
+ border: $modal-content-border-width solid var(--kt-modal-border-color);
+ @include box-shadow(var(--kt-modal-box-shadow));
+}
+
+// Modal footer
+.modal-footer {
+ background-color: var(--kt-modal-footer-bg);
+ border-top: $modal-footer-border-width solid var(--#{$prefix}modal-footer-border-color);
+}
+
+// Modal background
+.modal-backdrop {
+ --#{$prefix}backdrop-bg: var(--kt-modal-backdrop-bg);
+ --#{$prefix}backdrop-opacity: var(--kt-modal-backdrop-opacity);
+}
+
+// Scale up the modal
+@include media-breakpoint-up(sm) {
+ .modal-content {
+ @include box-shadow(var(--kt-modal-box-shadow-sm-up));
+ }
+}
+
+// Utilities
+.modal-rounded {
+ @if $enable-rounded {
+ border-radius: $modal-content-border-radius !important;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_nav-line-tabs.scss b/src/_metronic/assets/sass/core/components/_nav-line-tabs.scss
new file mode 100644
index 0000000..e821c67
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_nav-line-tabs.scss
@@ -0,0 +1,68 @@
+//
+// Nav
+//
+
+// Line tabs
+.nav-line-tabs {
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: var(--kt-border-color);
+
+ .nav-item {
+ margin-bottom: -1px;
+
+ // Base link
+ .nav-link {
+ color: var(--kt-gray-500);
+ border: 0;
+ border-bottom: 1px solid transparent;
+ transition: $transition-link;
+ padding: 0.5rem 0;
+ margin: 0 1rem;
+ }
+
+ // First Item
+ &:first-child {
+ .nav-link {
+ margin-left: 0;
+ }
+ }
+
+ // Last Item
+ &:last-child {
+ .nav-link {
+ margin-right: 0;
+ }
+ }
+ }
+
+ // Active & Hover States
+ .nav-item .nav-link.active,
+ .nav-item.show .nav-link,
+ .nav-item .nav-link:hover:not(.disabled) {
+ background-color: transparent;
+ border: 0;
+ border-bottom: 1px solid var(--kt-primary);
+ transition: $transition-link;
+ }
+
+ // 2x Line
+ &.nav-line-tabs-2x {
+ border-bottom-width: 2px;
+
+ .nav-item {
+ margin-bottom: -2px;
+
+ .nav-link {
+ border-bottom-width: 2px;
+ }
+ }
+
+ // Active & Hover States
+ .nav-item .nav-link.active,
+ .nav-item.show .nav-link,
+ .nav-item .nav-link:hover:not(.disabled) {
+ border-bottom-width: 2px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_nav-pills-custom.scss b/src/_metronic/assets/sass/core/components/_nav-pills-custom.scss
new file mode 100644
index 0000000..f9821f5
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_nav-pills-custom.scss
@@ -0,0 +1,91 @@
+//
+// Custom Nav Pills
+//
+
+.nav.nav-pills.nav-pills-custom {
+ // States
+ .show > .nav-link,
+ .nav-link{
+ border: 1px dashed var(--kt-border-dashed-color);
+ @include border-radius($border-radius-lg);
+
+ &.nav-link-border-solid {
+ border: 3px solid var(--kt-border-dashed-color);
+
+ &.active {
+ border: 3px solid var(--kt-primary);
+ }
+ }
+
+ .nav-icon {
+ img {
+ width: 30px;
+ transition: $transition-link;
+
+ &.default {
+ display: inline-block;
+ }
+
+ &.active {
+ display: none;
+ }
+ }
+ }
+
+ &.active {
+ background-color: transparent;
+ border: 1px solid var(--kt-border-dashed-color);
+ transition-duration: 1ms;
+ position: relative;
+
+ .nav-text {
+ color: var(--kt-gray-800) !important;
+ transition: $transition-link;
+ }
+
+ .bullet-custom {
+ display: block;
+ }
+ }
+
+ .bullet-custom {
+ display: none;
+ }
+ }
+
+ &.nav-pills-active-custom {
+ .nav-item {
+ .nav-link {
+ &:not(:active) {
+ span:nth-child(1) {
+ color: #B5B5C3;
+ }
+
+ span:nth-child(2) {
+ color: #3F4254;
+ }
+ }
+
+ &:hover {
+ span:nth-child(1) {
+ color: $white !important;
+ }
+
+ span:nth-child(2) {
+ color: $white !important;
+ }
+ }
+
+ &.active {
+ span:nth-child(1) {
+ color: $white !important;
+ }
+
+ span:nth-child(2) {
+ color: $white !important;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_nav.scss b/src/_metronic/assets/sass/core/components/_nav.scss
new file mode 100644
index 0000000..5a0fe51
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_nav.scss
@@ -0,0 +1,93 @@
+//
+// Nav
+//
+
+// Basic
+.nav {
+ --#{$prefix}nav-link-color: var(--kt-nav-link-color);
+ --#{$prefix}nav-link-hover-color: var(--kt-nav-link-hover-color);
+ --#{$prefix}nav-link-disabled-color: var(--kt-nav-link-disabled-color);
+}
+
+// Tabs
+.nav-tabs {
+ --#{$prefix}nav-tabs-border-color: var(--kt-nav-tabs-border-color);
+ --#{$prefix}nav-tabs-link-hover-border-color: var(--kt-nav-tabs-link-hover-border-color);
+ --#{$prefix}nav-tabs-link-active-color: var(--kt-nav-tabs-link-active-color);
+ --#{$prefix}nav-tabs-link-active-bg: var(--kt-nav-tabs-link-active-bg);
+ --#{$prefix}nav-tabs-link-active-border-color: var(--kt-nav-tabs-link-active-border-color);
+}
+
+// Pills
+.nav-pills {
+ --#{$prefix}nav-pills-link-active-color: var(--kt-nav-pills-link-active-color);
+ --#{$prefix}nav-pills-link-active-bg: var(--kt-nav-pills-link-active-bg);
+}
+
+// Nav pills
+.nav-pills {
+ .nav-item {
+ margin-right: 0.5rem;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+}
+
+// Stretch items
+.nav-stretch {
+ align-items: stretch;
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+
+ .nav-item {
+ display: flex;
+ align-items: stretch;
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ }
+
+ .nav-link {
+ display: flex;
+ align-items: center;
+ }
+}
+
+// Nav group
+.nav-group {
+ padding: 0.35rem;
+ @include border-radius($border-radius);
+ background-color: var(--kt-gray-100);
+
+ // Outline nav group
+ &.nav-group-outline {
+ background-color: transparent;
+ border: 1px solid var(--kt-border-color);
+ }
+
+ // Fluid option
+ &.nav-group-fluid {
+ display: flex;
+
+ > label,
+ > .btn {
+ position: relative;
+ flex-shrink: 0;
+ flex-grow: 1;
+ flex-basis: 0;
+ }
+
+ > label {
+ margin-right: 0.1rem;
+
+ > .btn {
+ width: 100%;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_offcanvas.scss b/src/_metronic/assets/sass/core/components/_offcanvas.scss
new file mode 100644
index 0000000..1da1c90
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_offcanvas.scss
@@ -0,0 +1,6 @@
+%offcanvas-css-vars {
+ --#{$prefix}offcanvas-color: var(--kt-offcanvas-color);
+ --#{$prefix}offcanvas-bg: var(--kt-offcanvas-bg-color);
+ --#{$prefix}offcanvas-border-color: var(--kt-offcanvas-border-color);
+ --#{$prefix}offcanvas-box-shadow: var(--kt-offcanvas-box-shadow);
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_overlay.scss b/src/_metronic/assets/sass/core/components/_overlay.scss
new file mode 100644
index 0000000..75ffa69
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_overlay.scss
@@ -0,0 +1,35 @@
+//
+// Demo
+//
+
+
+.overlay {
+ position: relative;
+
+ .overlay-layer {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--kt-overlay-bg);
+ transition: all 0.3s ease;
+ opacity: 0;
+ }
+
+ &.overlay-show,
+ &.overlay-block,
+ &:hover {
+ .overlay-layer {
+ transition: all 0.3s ease;
+ opacity: 1;
+ }
+ }
+
+ &.overlay-block {
+ cursor: wait;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_page-loader.scss b/src/_metronic/assets/sass/core/components/_page-loader.scss
new file mode 100644
index 0000000..5497dd8
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_page-loader.scss
@@ -0,0 +1,28 @@
+//
+// Page loader(used by the previous layout system)
+//
+
+// CSS3 Transitions only after page load(.page-loading class added to body tag and remove with JS on page load)
+[data-kt-app-page-loading="on"] *,
+.page-loading * {
+ transition: none !important;
+}
+
+// Base
+.page-loader {
+ background: var(--kt-body-bg);
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ display: none;
+
+ [data-kt-app-page-loading="on"] &,
+ .page-loading & {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_pagination.scss b/src/_metronic/assets/sass/core/components/_pagination.scss
new file mode 100644
index 0000000..7aa3538
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_pagination.scss
@@ -0,0 +1,193 @@
+//
+// Pagination
+//
+
+.pagination {
+ --#{$prefix}pagination-color: var(--kt-pagination-color);
+ --#{$prefix}pagination-bg: var(--kt-pagination-bg);
+ --#{$prefix}pagination-border-color: var(--kt-pagination-border-color);
+ --#{$prefix}pagination-hover-color: var(--kt-pagination-hover-color);
+ --#{$prefix}pagination-hover-bg: var(--kt-pagination-hover-bg);
+ --#{$prefix}pagination-hover-border-color: var(--kt-pagination-hover-border-color);
+ --#{$prefix}pagination-focus-color: var(--kt-pagination-focus-color);
+ --#{$prefix}pagination-focus-bg: var(--kt-pagination-focus-bg);
+ --#{$prefix}pagination-focus-box-shadow: var(--kt-pagination-focus-box-shadow);
+ --#{$prefix}pagination-active-color: var(--kt-pagination-active-color);
+ --#{$prefix}pagination-active-bg: var(--kt-pagination-active-bg);
+ --#{$prefix}pagination-active-border-color: var(--kt-pagination-active-border-color);
+ --#{$prefix}pagination-disabled-color: var(--kt-pagination-disabled-color);
+ --#{$prefix}pagination-disabled-bg: var(--kt-pagination-disabled-bg);
+ --#{$prefix}pagination-disabled-border-color: var(--kt-pagination-disabled-border-color);
+
+ display:flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin: 0;
+
+ // Pagination circle
+ &.pagination-circle {
+ .page-link {
+ border-radius: 50%;
+ }
+ }
+
+ // Pagination outline
+ &.pagination-outline {
+ .page-link {
+ border: 1px solid var(--kt-border-color);
+ }
+
+ .page-item {
+ &:hover:not(.disabled),
+ &.active {
+ .page-link {
+ border-color: var(--kt-primary-light);
+ }
+ }
+ }
+ }
+}
+
+.page-item {
+ margin-right: $pagination-item-space;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .page-link {
+ display:flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: $btn-border-radius;
+ height: $pagination-item-height;
+ min-width: $pagination-item-height;
+ font-weight: $pagination-font-weight;
+ font-size: $pagination-font-size;
+
+ i {
+ font-size: $pagination-icon-font-size;
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .previous,
+ .next {
+ display: block;
+ height: $pagination-icon-height;
+ width: $pagination-icon-height;
+
+ /*rtl:raw:transform: rotateZ(-180deg);*/
+ }
+ /*rtl:end:ignore*/
+
+ .previous {
+ @include svg-bg-icon(arrow-start, $pagination-color);
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .next {
+ @include svg-bg-icon(arrow-end, $pagination-color);
+ }
+ }
+
+ &:focus {
+ .page-link {
+ color: var(--kt-pagination-focus-color);
+
+ .svg-icon,
+ i {
+ color: var(--kt-pagination-focus-color);
+ }
+
+ .previous {
+ @include svg-bg-icon(arrow-start, var(--kt-pagination-focus-color));
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .next {
+ @include svg-bg-icon(arrow-end, var(--kt-pagination-focus-color));
+ }
+ }
+ }
+
+ &:hover:not(.active):not(.offset):not(.disabled) {
+ .page-link {
+ color: var(--kt-pagination-hover-color);
+
+ &.page-text {
+ background-color: transparent;
+ }
+
+ .svg-icon,
+ i {
+ color: var(--kt-pagination-hover-color);
+ }
+
+ .previous {
+ @include svg-bg-icon(arrow-start, var(--kt-pagination-hover-color));
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .next {
+ @include svg-bg-icon(arrow-end, var(--kt-pagination-hover-color));
+ }
+ }
+ }
+
+ &.active {
+ .page-link {
+ color: var(--kt-pagination-active-color);
+
+ &.page-text {
+ background-color: transparent;
+ }
+
+ .svg-icon,
+ i {
+ color: var(--kt-pagination-active-color);;
+ }
+
+ .previous {
+ @include svg-bg-icon(arrow-start, var(--kt-pagination-active-color));
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .next {
+ @include svg-bg-icon(arrow-end, var(--kt-pagination-active-color));
+ }
+ }
+ }
+
+ &.disabled {
+ .page-link {
+ color: var(--kt-pagination-disabled-color);
+
+ .svg-icon,
+ i {
+ color: var(--kt-pagination-disabled-color);
+ }
+
+ .previous {
+ @include svg-bg-icon(arrow-start, var(--kt-pagination-disabled-color));
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .next {
+ @include svg-bg-icon(arrow-end, var(--kt-pagination-disabled-color));
+ }
+ }
+ }
+ /*rtl:end:ignore*/
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .page-item {
+ margin-right: $pagination-item-space-tablet-and-mobile;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+}
+
diff --git a/src/_metronic/assets/sass/core/components/_popover.scss b/src/_metronic/assets/sass/core/components/_popover.scss
new file mode 100644
index 0000000..c7de66e
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_popover.scss
@@ -0,0 +1,53 @@
+//
+// Popover
+//
+
+
+// Base
+.popover {
+ --#{$prefix}popover-bg: var(--kt-popover-bg);
+ --#{$prefix}popover-border-color: var(--kt-popover-border-color);
+ --#{$prefix}popover-box-shadow: var(--kt-popover-box-shadow);
+ --#{$prefix}popover-header-color: var(--kt-popover-header-color);
+ --#{$prefix}popover-header-bg: var(--kt-popover-header-bg);
+ --#{$prefix}popover-body-color: var(--kt-popover-body-color);
+ --#{$prefix}popover-arrow-border: var(--kt-popover-bg);
+
+ .popover-header {
+ font-size: $popover-header-font-size;
+ font-weight: $popover-header-font-weight;
+ border-bottom: 1px solid var(--kt-popover-header-border-color);
+ }
+
+ .popover-dismiss {
+ position: absolute;
+ top: $popover-dissmis-btn-top;
+ right: $popover-dissmis-btn-end;
+ height: $popover-dissmis-btn-height;
+ width: $popover-dissmis-btn-height;
+ @include svg-bg-icon(close, var(--kt-gray-500)); // todo: revise
+ mask-size: 50%;
+ -webkit-mask-size: 50%;
+
+ &:hover {
+ background-color: var(--kt-primary);
+ }
+
+ & + .popover-header {
+ padding-right: $popover-body-padding-x + $popover-dissmis-btn-height;
+ }
+ }
+}
+
+// Inverse
+.popover-inverse {
+ @include popover-theme(
+ $bg-color: var(--kt-gray-900),
+ $border-color: var(--kt-gray-800),
+ $header-bg-color: var(--kt-gray-900),
+ $header-color: var(--kt-gray-200),
+ $body-color: var(--kt-gray-400),
+ $arrow-outer-color: var(--kt-gray-100),
+ $arrow-color: var(--kt-gray-900)
+ );
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_print.scss b/src/_metronic/assets/sass/core/components/_print.scss
new file mode 100644
index 0000000..ab7854b
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_print.scss
@@ -0,0 +1,34 @@
+//
+// Print Mode
+//
+
+// Add .print-content-only class to body element in order to allow printing only the content area
+@media print {
+ .print-content-only {
+ padding: 0 !important;
+ background: none !important;
+
+ .wrapper,
+ .page,
+ .page-title
+ .content,
+ .container,
+ .container-xxl,
+ .container-fluid {
+ background: none !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+
+ .aside,
+ .sidebar,
+ .scrolltop,
+ .header,
+ .footer,
+ .toolbar,
+ .drawer,
+ .btn {
+ display: none !important;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_progress.scss b/src/_metronic/assets/sass/core/components/_progress.scss
new file mode 100644
index 0000000..e085f1f
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_progress.scss
@@ -0,0 +1,35 @@
+//
+// Progress
+//
+
+// Base
+.progress {
+ --#{$prefix}progress-bg: var(--kt-progress-bg);
+ --#{$prefix}progress-box-shadow: var(--kt-progress-box-shadow);
+ --#{$prefix}progress-bar-color: var(--kt-progress-bar-color);
+ --#{$prefix}progress-bar-bg: var(--kt-progress-bar-bg);
+}
+
+// Vertical Position
+.progress-vertical {
+ display: flex;
+ align-items: stretch;
+ justify-content: space-between;
+
+ .progress {
+ height: 100%;
+ @include border-radius($border-radius);
+ display: flex;
+ align-items: flex-end;
+ margin-right: 1rem;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .progress-bar {
+ width: 8px;
+ @include border-radius($border-radius);
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_pulse.scss b/src/_metronic/assets/sass/core/components/_pulse.scss
new file mode 100644
index 0000000..24b612c
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_pulse.scss
@@ -0,0 +1,39 @@
+//
+// Pulse
+//
+
+
+// Base
+.pulse {
+ position: relative;
+
+ // Theme Colors
+ @each $name, $color in $theme-colors {
+ &.pulse-#{$name} {
+ .pulse-ring {
+ border-color: $color;
+ }
+ }
+ }
+}
+
+.pulse-ring {
+ display: block;
+ border-radius: 40px;
+ height: 40px;
+ width: 40px;
+ position: absolute;
+ animation: animation-pulse 3.5s ease-out;
+ animation-iteration-count: infinite;
+ opacity: 0;
+ border-width: 3px;
+ border-style: solid;
+ border-color: var(--kt-gray-500);
+}
+
+@keyframes animation-pulse {
+ 0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
+ 60% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
+ 65% {opacity: 1;}
+ 100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
+}
diff --git a/src/_metronic/assets/sass/core/components/_rating.scss b/src/_metronic/assets/sass/core/components/_rating.scss
new file mode 100644
index 0000000..b24eb76
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_rating.scss
@@ -0,0 +1,62 @@
+//
+// Rating
+//
+
+.rating {
+ display: flex;
+ align-items: center;
+}
+
+.rating-input {
+ position: absolute !important;
+ left: -9999px !important;
+
+ &[disabled] {
+ display: none;
+ }
+}
+
+.rating-label {
+ padding: 0;
+ margin: 0;
+
+ & > i,
+ & > .svg-icon {
+ line-height: 1;
+ color: var(--kt-rating-color-default);
+ }
+}
+
+label.rating-label {
+ cursor: pointer;
+}
+
+div.rating-label.checked,
+label.rating-label {
+ & > i,
+ & > .svg-icon {
+ color: var(--kt-rating-color-active);
+ }
+}
+
+.rating-input:checked ~ .rating-label {
+ & > i,
+ & > .svg-icon {
+ color: var(--kt-rating-color-default);
+ }
+}
+
+.rating:hover label.rating-label {
+ & > i,
+ & > .svg-icon {
+ color: var(--kt-rating-color-active);
+ }
+}
+
+label.rating-label:hover ~ .rating-label {
+ & > i,
+ & > .svg-icon {
+ color: var(--kt-rating-color-default);
+ }
+ color: var(--kt-rating-color-default);
+}
diff --git a/src/_metronic/assets/sass/core/components/_reboot.scss b/src/_metronic/assets/sass/core/components/_reboot.scss
new file mode 100644
index 0000000..9f94268
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_reboot.scss
@@ -0,0 +1,8 @@
+//
+// Reboot
+//
+
+h1, h2, h3, h4, h5, h6 {
+ color: var(--kt-headings-color);
+ outline: 0;
+}
diff --git a/src/_metronic/assets/sass/core/components/_ribbon.scss b/src/_metronic/assets/sass/core/components/_ribbon.scss
new file mode 100644
index 0000000..c9bf53a
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_ribbon.scss
@@ -0,0 +1,195 @@
+//
+// Ribbon
+//
+
+// Base
+.ribbon {
+ position: relative;
+
+ // Ribbon target
+ .ribbon-label {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 5px 10px;
+ position: absolute;
+ z-index: 1;
+ background-color: var(--kt-ribbon-label-bg);
+ box-shadow: var(--kt-ribbon-label-box-shadow);
+ color: var(--kt-primary-inverse);
+ top: 50%;
+ right: 0;
+ transform: translateX(5px) translateY(-50%);
+
+ > .ribbon-inner {
+ z-index: -1;
+ position: absolute;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+
+ &:after {
+ border-color: var(--kt-ribbon-label-border-color);
+ }
+ }
+
+ // Vertical aligment
+ &-vertical {
+ .ribbon-label {
+ padding: 5px 10px;
+ min-width: 36px;
+ min-height: 46px;
+ text-align: center;
+ }
+ }
+
+ &.ribbon-top {
+ .ribbon-label {
+ top: 0;
+ transform: translateX(-15px) translateY(-4px);
+ border-bottom-right-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+ }
+ }
+
+ &.ribbon-bottom {
+ .ribbon-label {
+ border-top-right-radius: $border-radius;
+ border-top-left-radius: $border-radius;
+ }
+ }
+
+ &.ribbon-start {
+ .ribbon-label {
+ top: 50%;
+ left: 0;
+ right: auto;
+ transform: translateX(-5px) translateY(-50%);
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+ }
+ }
+
+ &.ribbon-end {
+ .ribbon-label {
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+ }
+ }
+}
+
+// Clip style
+.ribbon.ribbon-clip {
+ &.ribbon-start {
+ .ribbon-label {
+ left: -5px;
+
+ .ribbon-inner {
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ border-style: solid;
+ border-color: transparent !important;
+ bottom: -10px;
+ }
+
+ &:before {
+ border-width: 0 10px 10px 0;
+ border-right-color: var(--kt-ribbon-clip-bg) !important;
+ left: 0;
+ }
+ }
+ }
+ }
+
+ &.ribbon-end {
+ .ribbon-label {
+ right: -5px;
+
+ .ribbon-inner {
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ border-style: solid;
+ border-color: transparent !important;
+ bottom: -10px;
+ }
+
+ &:before {
+ border-width: 0 0 10px 10px;
+ border-left-color: var(--kt-ribbon-clip-bg) !important;
+ right: 0;
+ }
+ }
+ }
+ }
+}
+
+// Triangle style
+.ribbon.ribbon-triangle {
+ position: absolute;
+ z-index: 1;
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+
+ // Top start position
+ &.ribbon-top-start {
+ top: 0;
+ left: 0;
+ width: 4rem;
+ height: 4rem;
+ border-bottom: solid 2rem transparent !important;
+ border-left: solid 2rem transparent;
+ border-right: solid 2rem transparent !important;
+ border-top: solid 2rem transparent;
+ }
+
+ // Top end position
+ &.ribbon-top-end {
+ top: 0;
+ right: 0;
+ width: 4rem;
+ height: 4rem;
+ border-bottom: solid 2rem transparent !important;
+ border-left: solid 2rem transparent !important;
+ border-right: solid 2rem transparent;
+ border-top: solid 2rem transparent;
+ }
+
+ // Botton start position
+ &.ribbon-bottom-start {
+ bottom: 0;
+ left: 0;
+ width: 4rem;
+ height: 4rem;
+ border-bottom: solid 2rem transparent;
+ border-left: solid 2rem transparent;
+ border-right: solid 2rem transparent !important;
+ border-top: solid 2rem transparent !important;
+ }
+
+ // Botton end position
+ &.ribbon-bottom-end {
+ bottom: 0;
+ right: 0;
+ width: 4rem;
+ height: 4rem;
+ border-bottom: solid 2rem transparent;
+ border-right: solid 2rem transparent;
+ border-left: solid 2rem transparent !important;
+ border-top: solid 2rem transparent !important;
+ }
+}
+
diff --git a/src/_metronic/assets/sass/core/components/_root-bs.scss b/src/_metronic/assets/sass/core/components/_root-bs.scss
new file mode 100644
index 0000000..eb43e43
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_root-bs.scss
@@ -0,0 +1,27 @@
+//
+// CSS Variables
+//
+
+[data-theme="dark"] {
+ @each $color, $value in $grays-dark {
+ --#{$prefix}gray-#{$color}: #{$value};
+ }
+
+ @each $color, $value in $theme-colors-dark {
+ --#{$prefix}#{$color}: #{$value};
+ }
+
+ --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+ --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+ --#{$prefix}body-color: #{$body-color-dark};
+ --#{$prefix}body-bg: #{$body-bg-dark};
+
+ --#{$prefix}border-color: #{$border-color-dark};
+
+ --#{$prefix}heading-color: #{$headings-color-dark};
+ --#{$prefix}link-color: #{$link-color-dark};
+ --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+
+ --#{$prefix}code-color: #{$code-color-dark};
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_root.scss b/src/_metronic/assets/sass/core/components/_root.scss
new file mode 100644
index 0000000..a7d3b2a
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_root.scss
@@ -0,0 +1,868 @@
+//
+// CSS Variables
+//
+
+:root,
+[data-theme="light"] {
+ // Breakpoints
+ @each $breakpoint, $value in $grid-breakpoints {
+ --kt-#{$breakpoint}:#{$value};
+ }
+
+ // Bootstrap color system
+ --kt-white: #{$white};
+ --kt-white-bg-rgb: #{to-rgb($white)};
+ --kt-black: #{$black};
+ --kt-black-bg-rgb: #{to-rgb($black)};
+
+ // Bootstrap muted color
+ --kt-text-muted: #{$text-muted};
+
+ // Grey colors
+ @each $name, $value in $grays {
+ --kt-gray-#{$name}: #{$value};
+ }
+
+ // Grey rgba colors
+ @each $name, $value in $grays {
+ --kt-gray-#{$name}-rgb: #{to-rgb($value)};
+ }
+
+ // Contextual colors
+ @each $name, $value in $theme-colors {
+ --kt-#{$name}: #{$value};
+ }
+
+ // Contextual active state colors
+ @each $name, $value in $theme-active-colors {
+ --kt-#{$name}-active: #{$value};
+ }
+
+ // Contextual light state colors
+ @each $name, $value in $theme-light-colors {
+ --kt-#{$name}-light: #{$value};
+ }
+
+ // Contextual inverse state colors
+ @each $name, $value in $theme-inverse-colors {
+ --kt-#{$name}-inverse: #{$value};
+ }
+
+ // Contextual rbg colors
+ @each $name, $value in $theme-colors {
+ --kt-#{$name}-rgb: #{to-rgb($value)};
+ }
+
+ // Text colors
+ @each $name, $value in $theme-text-colors {
+ --kt-text-#{$name}: #{$value};
+ }
+
+ // Body
+ --kt-body-bg: #{$body-bg};
+ --kt-body-bg-rgb: #{to-rgb($body-bg)};
+ --kt-body-color: #{$body-color};
+
+ // Links
+ --kt-link-color: #{$link-color};
+ --kt-link-hover-color: #{$link-hover-color};
+
+ // Components
+ --kt-border-color: #{$border-color};
+ --kt-border-dashed-color: #{$border-dashed-color};
+
+ --kt-component-active-color: #{$component-active-color};
+ --kt-component-active-bg: #{$component-active-bg};
+ --kt-component-hover-color: #{$component-hover-color};
+ --kt-component-hover-bg: #{$component-hover-bg};
+ --kt-component-checked-color: #{$component-checked-color};
+ --kt-component-checked-bg: #{$component-checked-bg};
+
+ // Box shadow
+ --kt-box-shadow-xs: #{$box-shadow-xs};
+ --kt-box-shadow-sm: #{$box-shadow-sm};
+ --kt-box-shadow: #{$box-shadow};
+ --kt-box-shadow-lg: #{$box-shadow-lg};
+
+ // Typography
+ --kt-headings-color: #{$headings-color};
+
+ // Tables
+ --kt-table-color: #{$table-color};
+ --kt-table-bg: #{$table-bg};
+ --kt-table-striped-color: #{$table-striped-color};
+ --kt-table-striped-bg: #{$table-striped-bg};
+ --kt-table-accent-bg: #{$table-accent-bg};
+ --kt-table-active-color: #{$table-active-color};
+ --kt-table-active-bg: #{$table-active-bg};
+ --kt-table-hover-colorr: #{$table-hover-color};
+ --kt-table-hover-bg: #{$table-hover-bg};
+ --kt-table-border-color: #{$table-border-color};
+ --kt-table-caption-color: #{$table-caption-color};
+
+ --kt-table-loading-message-box-shadow: #{$table-loading-message-box-shadow};
+ --kt-table-loading-message-bg: #{$table-loading-message-bg};
+ --kt-table-loading-message-color: #{$table-loading-message-color};
+
+ // Buttons + Forms
+ --kt-input-btn-focus-color: #{$input-btn-focus-color};
+ --kt-input-btn-focus-box-shadow: #{$input-btn-focus-box-shadow};
+ --kt-input-btn-focus-color-opacity: #{$input-btn-focus-color-opacity};
+
+ --kt-input-color: #{$input-color};
+ --kt-input-placeholder-color: #{$input-placeholder-color};
+ --kt-input-plaintext-color: #{$input-plaintext-color};
+
+ // Buttons
+ --kt-btn-box-shadow: #{$btn-box-shadow};
+ --kt-btn-focus-box-shadow: #{$btn-focus-box-shadow};
+ --kt-btn-active-box-shadow: #{$btn-active-box-shadow};
+ --kt-btn-disabled-opacity: #{$btn-disabled-opacity};
+
+ --kt-btn-link-color: #{$btn-link-color};
+ --kt-btn-link-hover-color: #{$btn-link-hover-color};
+ --kt-btn-link-disabled-color: #{$btn-link-disabled-color};
+
+ // Forms
+ --kt-form-label-color: #{$form-label-color};
+ --kt-form-text-color: #{$form-text-color};
+
+ --kt-input-bg: #{$input-bg};
+ --kt-input-disabled-bg: #{$input-disabled-bg};
+ --kt-input-disabled-color: #{$input-disabled-color};
+ --kt-input-disabled-border-color: #{$input-disabled-border-color};
+
+ --kt-input-color: #{$input-color};
+ --kt-input-border-color: #{$input-border-color};
+
+ --kt-input-focus-bg: #{$input-focus-bg};
+ --kt-input-focus-border-color: #{$input-focus-border-color};
+ --kt-input-focus-color: #{$input-focus-color};
+
+ // Keenthemes solid input style
+ --kt-input-solid-bg: #{$input-solid-bg};
+ --kt-input-solid-bg-focus: #{$input-solid-bg-focus};
+ --kt-input-solid-placeholder-color: #{$input-solid-placeholder-color};
+ --kt-input-solid-color: #{$input-solid-color};
+
+ // Form checks
+ --kt-form-check-label-color: #{$form-check-label-color};
+ --kt-form-check-label-color-checked: #{$form-check-label-color-checked};
+ --kt-form-check-input-active-filter: #{$form-check-input-active-filter};
+
+ --kt-form-check-input-bg: #{$form-check-input-bg};
+ --kt-form-check-input-bg-solid: #{$form-check-input-bg-solid};
+ --kt-form-check-input-border: #{$form-check-input-border};
+ --kt-form-check-input-focus-border: #{$form-check-input-focus-border};
+ --kt-form-check-input-focus-box-shadow: #{$form-check-input-focus-box-shadow};
+
+ --kt-form-check-input-checked-color: #{$form-check-input-checked-color};
+ --kt-form-check-input-checked-bg-color: #{$form-check-input-checked-bg-color};
+ --kt-form-check-input-checked-bg-color-solid: #{$form-check-input-checked-bg-color-solid};
+ --kt-form-check-input-checked-border-color: #{$form-check-input-checked-border-color};
+ --kt-form-check-input-checked-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
+ --kt-form-check-radio-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
+
+ --kt-form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color};
+ --kt-form-check-input-indeterminate-bg-color: #{$form-check-input-indeterminate-bg-color};
+ --kt-form-check-input-indeterminate-border-color: #{$form-check-input-indeterminate-border-color};
+ --kt-form-check-input-indeterminate-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
+
+ --kt-form-check-input-disabled-opacity: #{$form-check-input-disabled-opacity};
+ --kt-form-check-label-disabled-opacity: #{$form-check-label-disabled-opacity};
+ --kt-form-check-btn-check-disabled-opacity: #{$form-check-btn-check-disabled-opacity};
+
+ --kt-form-switch-color: #{$form-switch-color};
+ --kt-form-switch-color-solid: #{$form-switch-color-solid};
+ --kt-form-switch-bg-image: #{escape-svg($form-switch-bg-image)};
+ --kt-form-switch-bg-image-solid: #{escape-svg($form-switch-bg-image-solid)};
+ --kt-form-switch-focus-color: #{$form-switch-focus-color};
+ --kt-form-switch-focus-bg-image: #{escape-svg($form-switch-focus-bg-image)};
+ --kt-form-switch-checked-color: #{$form-switch-checked-color};
+ --kt-form-switch-checked-bg-image: #{escape-svg($form-switch-checked-bg-image)};
+
+ // Input groups
+ --kt-input-group-addon-color: #{$input-group-addon-color};
+ --kt-input-group-addon-bg: #{$input-group-addon-bg};
+ --kt-input-group-addon-border-color: #{$input-group-addon-border-color};
+
+ // Form select
+ --kt-form-select-color: #{$form-select-color};
+ --kt-form-select-bg: #{$form-select-bg};
+ --kt-form-select-disabled-color: #{$form-select-disabled-color};
+ --kt-form-select-disabled-bg: #{$form-select-disabled-bg};
+ --kt-form-select-disabled-border-color: #{$form-select-disabled-border-color};
+ --kt-form-select-indicator-color: #{$form-select-indicator-color};
+ --kt-form-select-indicator: #{escape-svg($form-select-indicator)};
+ --kt-form-select-border-color: #{$form-select-border-color};
+ --kt-form-select-box-shadow: #{$form-select-box-shadow};
+ --kt-form-select-focus-border-color: #{$form-select-focus-border-color};
+ --kt-form-select-focus-box-shadow: #{$form-select-focus-box-shadow};
+
+ // Form file button
+ --kt-form-file-button-color: #{$form-file-button-color};
+ --kt-form-file-button-bg: #{$form-file-button-bg};
+ --kt-form-file-button-hover-bg: #{$form-file-button-hover-bg};
+
+ // Navs
+ --kt-nav-tabs-border-color: #{$nav-tabs-border-color};
+ --kt-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+ --kt-nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+ --kt-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+ --kt-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+
+ --kt-nav-pills-link-active-color: #{$nav-pills-link-active-color};
+ --kt-nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
+
+ // Dropdowns
+ --kt-dropdown-color: #{$dropdown-color};
+ --kt-dropdown-bg: #{$dropdown-bg};
+ --kt-dropdown-divider-bg: #{$dropdown-divider-bg};
+ --kt-dropdown-box-shadow: #{$dropdown-box-shadow};
+ --kt-dropdown-link-color: #{$dropdown-link-color};
+ --kt-dropdown-link-hover-color: #{$dropdown-link-hover-color};
+ --kt-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+ --kt-dropdown-link-active-color: #{$dropdown-link-active-color};
+ --kt-dropdown-link-active-bg: #{$dropdown-link-active-bg};
+ --kt-dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+ --kt-dropdown-header-color: #{$dropdown-header-color};
+
+ // Pagination
+ --kt-pagination-item-bg: #{$pagination-item-bg};
+ --kt-pagination-color: #{$pagination-color};
+ --kt-pagination-bg: #{$pagination-bg};
+ --kt-pagination-border-color: #{$pagination-border-color};
+ --kt-pagination-focus-color: #{$pagination-focus-color};
+ --kt-pagination-focus-bg: #{$pagination-focus-bg};
+ --kt-pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
+ --kt-pagination-focus-outline: #{$pagination-focus-outline};
+ --kt-pagination-hover-color: #{$pagination-hover-color};
+ --kt-pagination-hover-bg: #{$pagination-hover-bg};
+ --kt-pagination-hover-border-color: #{$pagination-hover-border-color};
+ --kt-pagination-active-color: #{$pagination-active-color};
+ --kt-pagination-active-bg: #{$pagination-active-bg};
+ --kt-pagination-active-border-color: #{$pagination-active-border-color};
+ --kt-pagination-disabled-color: #{$pagination-disabled-color};
+ --kt-pagination-disabled-bg: #{$pagination-disabled-bg};
+
+ // Card
+ --kt-card-color: #{$card-color-dark};
+ --kt-card-bg: #{$card-bg};
+ --kt-card-box-shadow: #{$card-box-shadow};
+ --kt-card-border-color: #{$card-border-color};
+ --kt-card-border-dashed-color: #{$card-border-dashed-color};
+ --kt-card-cap-bg: #{$card-cap-bg};
+
+ // Accordion
+ --kt-accordion-color: #{$accordion-color};
+ --kt-accordion-bg: #{$accordion-bg};
+ --kt-accordion-border-color: #{$accordion-border-color};
+ --kt-accordion-button-bg: #{$accordion-button-bg};
+ --kt-accordion-button-color: #{$accordion-button-color};
+ --kt-accordion-button-active-bg: #{$accordion-button-active-bg};
+ --kt-accordion-button-active-color: #{$accordion-button-active-color};
+ --kt-accordion-button-focus-border-color: #{$accordion-button-focus-border-color};
+ --kt-accordion-button-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+
+ --kt-accordion-icon-color: #{$accordion-icon-color};
+ --kt-accordion-icon-active-color: #{$accordion-icon-active-color};
+ --kt-accordion-button-icon: #{escape-svg($accordion-button-icon)};
+ --kt-accordion-button-active-icon: #{escape-svg($accordion-button-active-icon)};
+
+ // Tooltips
+ --kt-tooltip-color: #{$tooltip-color};
+ --kt-tooltip-bg: #{$tooltip-bg};
+ --kt-tooltip-opacity: #{$tooltip-opacity};
+ --kt-tooltip-box-shadow: #{$tooltip-box-shadow};
+
+ // Popovers
+ --kt-popover-bg: #{$popover-bg};
+ --kt-popover-border-color: #{$popover-border-color};
+ --kt-popover-box-shadow: #{$popover-box-shadow};
+ --kt-popover-header-bg: #{$popover-header-bg};
+ --kt-popover-header-color: #{$popover-header-color};
+ --kt-popover-header-border-color: #{$popover-header-border-color};
+ --kt-popover-body-color: #{$popover-body-color};
+
+ // Dropdowns
+ --kt-dropdown-box-shadow: #{$dropdown-box-shadow};
+ --kt-dropdown-bg: #{$dropdown-bg};
+
+ // Toasts
+ --kt-toast-color: #{$toast-color};
+ --kt-toast-background-color: #{$toast-background-color};
+ --kt-toast-box-shadow: #{$toast-box-shadow};
+ --kt-toast-header-color: #{$toast-header-color};
+ --kt-toast-header-background-color: #{$toast-header-background-color};
+ --kt-toast-header-border-color: #{$toast-header-border-color};
+
+ // Badges
+ --kt-badge-color: #{$badge-color};
+
+ // Modals
+ --kt-modal-bg: #{$modal-content-bg};
+ --kt-modal-color: #{$modal-content-color};
+ --kt-modal-border-color: #{$modal-content-border-color};
+ --kt-modal-box-shadow: #{$modal-content-box-shadow};
+ --kt-modal-content-color: #{$modal-content-color};
+ --kt-modal-content-bg: #{$modal-content-bg};
+ --kt-modal-content-border-color: #{$modal-content-border-color};
+ --kt-modal-content-box-shadow: #{$modal-content-box-shadow};
+ --kt-modal-content-box-shadow-xs: #{$modal-content-box-shadow-xs};
+ --kt-modal-content-box-shadow-sm-up: #{$modal-content-box-shadow-sm-up};
+ --kt-modal-header-border-color: #{$modal-header-border-color};
+ --kt-modal-footer-border-color: #{$modal-footer-border-color};
+ --kt-modal-backdrop-bg: #{$modal-backdrop-bg};
+ --kt-modal-backdrop-opacity: #{$modal-backdrop-opacity};
+
+ // Progress bars
+ --kt-progress-bg: #{$progress-bg};
+ --kt-progress-box-shadow: #{$progress-box-shadow};
+
+ // List group
+ --kt-list-group-color: #{$list-group-color};
+ --kt-list-group-bg: #{$list-group-bg};
+ --kt-list-group-border-color: #{$list-group-border-color};
+ --kt-list-group-hover-bg: #{$list-group-hover-bg};
+ --kt-list-group-active-color: #{$list-group-active-color};
+ --kt-list-group-active-bg: #{$list-group-active-bg};
+ --kt-list-group-active-border-colorg: #{$list-group-active-border-color};
+ --kt-list-group-disabled-color: #{$list-group-disabled-color};
+ --kt-list-group-disabled-bg: #{$list-group-disabled-bg};
+ --kt-list-group-action-colorg: #{$list-group-action-color};
+ --kt-list-group-action-hover-color: #{$list-group-action-hover-color};
+ --kt-list-group-action-active-color: #{$list-group-action-active-color};
+ --kt-list-group-action-active-bg: #{$list-group-action-active-bg};
+
+ // Image thumbnails
+ --kt-thumbnail-bg: #{$thumbnail-bg};
+ --kt-thumbnail-border-color: #{$thumbnail-border-color};
+ --kt-thumbnail-box-shadow: #{$thumbnail-box-shadow};
+
+ // Figures
+ --kt-figure-caption-color: #{$figure-caption-color};
+
+ // Breadcrumbs
+ --kt-breadcrumb-bg: #{$breadcrumb-bg};
+ --kt-breadcrumb-divider-color: #{$breadcrumb-divider-color};
+ --kt-breadcrumb-active-color: #{$breadcrumb-active-color};
+
+ // Carousel
+ --kt-carousel-custom-indicator-default-bg-color: #{$carousel-custom-indicator-default-bg-color};
+ --kt-carousel-custom-indicator-active-bg-color: #{$carousel-custom-indicator-active-bg-color};
+ --kt-carousel-custom-bullet-indicator-default-bg-color: #{$carousel-custom-bullet-indicator-default-bg-color};
+ --kt-carousel-custom-bullet-indicator-active-bg-color: #{$carousel-custom-bullet-indicator-active-bg-color};
+
+ // Code
+ --kt-code-bg: #{$code-bg};
+ --kt-code-box-shadow: #{$code-box-shadow};
+ --kt-code-color: #{$code-color};
+
+ // Close
+ --kt-btn-close-color: #{$btn-close-color};
+ --kt-btn-close-bg: #{escape-svg($btn-close-bg)};
+
+ // Offcanvas
+ --kt-offcanvas-border-color: #{$offcanvas-border-color};
+ --kt-offcanvas-bg-color: #{$offcanvas-bg-color};
+ --kt-offcanvas-color: #{$offcanvas-color};
+ --kt-offcanvas-box-shadow: #{$offcanvas-box-shadow};
+ --kt-offcanvas-backdrop-bg: #{$offcanvas-backdrop-bg};
+ --kt-offcanvas-backdrop-opacity: #{$offcanvas-backdrop-opacity};
+
+ // Symbol
+ --kt-symbol-label-color: #{$symbol-label-color};
+ --kt-symbol-label-bg: #{$symbol-label-bg};
+ --kt-symbol-border-color: #{$symbol-border-color};
+
+ // Bullet
+ --kt-bullet-bg-color: #{$bullet-bg-color};
+
+ // Scrolltop
+ --kt-scrolltop-opacity: #{$scrolltop-opacity};
+ --kt-scrolltop-opacity-on: #{$scrolltop-opacity-on};
+ --kt-scrolltop-opacity-hover: #{$scrolltop-opacity-hover};
+ --kt-scrolltop-box-shadow: #{$scrolltop-box-shadow};
+ --kt-scrolltop-bg-color: #{$scrolltop-bg-color};
+ --kt-scrolltop-bg-color-hover: #{$scrolltop-bg-color-hover};
+ --kt-scrolltop-icon-color: #{$scrolltop-icon-color};
+ --kt-scrolltop-icon-color-hover: #{$scrolltop-icon-color-hover};
+
+ // Keenthemes drawer component
+ --kt-drawer-box-shadow: #{$drawer-box-shadow};
+ --kt-drawer-bg-color: #{$drawer-bg-color};
+ --kt-drawer-overlay-bg-color: #{$drawer-overlay-bg-color};
+
+ // Keenthemes menu component
+ --kt-menu-dropdown-box-shadow: #{$menu-dropdown-box-shadow};
+ --kt-menu-dropdown-bg-color: #{$menu-dropdown-bg-color};
+ --kt-menu-heading-color: #{$menu-heading-color};
+ --kt-menu-link-color-hover: #{$menu-link-color-hover};
+ --kt-menu-link-color-show: #{$menu-link-color-show};
+ --kt-menu-link-color-here: #{$menu-link-color-here};
+ --kt-menu-link-color-active: #{$menu-link-color-active};
+ --kt-menu-link-bg-color-hover: #{$menu-link-bg-color-hover};
+ --kt-menu-link-bg-color-show: #{$menu-link-bg-color-show};
+ --kt-menu-link-bg-color-here: #{$menu-link-bg-color-here};
+ --kt-menu-link-bg-color-active: #{$menu-link-bg-color-active};
+
+ // Keenthemes feedback component
+ --kt-feedback-popup-box-shadow: #{$feedback-popup-box-shadow};
+ --kt-feedback-popup-background-color: #{$feedback-popup-background-color};
+
+ // Keenthemes scrollbar component
+ --kt-scrollbar-color: #{$scrollbar-color};
+ --kt-scrollbar-hover-color: #{$scrollbar-hover-color};
+ --kt-scrollbar-width: #{$scrollbar-width};
+ --kt-scrollbar-height: #{$scrollbar-height};
+ --kt-scrollbar-space: #{$scrollbar-space};
+
+ // Keenthemes overlay component
+ --kt-overlay-bg: #{$overlay-bg};
+
+ // Keenthemes blockui component
+ --kt-blockui-overlay-bg: #{$blockui-overlay-bg};
+
+ // Keenthemes rating component
+ --kt-rating-color-default: #{$rating-color-default};
+ --kt-rating-color-active: #{$rating-color-active};
+
+ // Keenthemes ribbon component
+ --kt-ribbon-label-box-shadow: #{$ribbon-label-box-shadow};
+ --kt-ribbon-label-bg: #{$ribbon-label-bg};
+ --kt-ribbon-label-border-color: #{$ribbon-label-border-color};
+ --kt-ribbon-clip-bg: #{$ribbon-clip-bg};
+
+ // Engage panel
+ --kt-engage-btn-bg: #{$engage-btn-bg};
+ --kt-engage-btn-color: #{$engage-btn-color};
+ --kt-engage-btn-color-active: #{$engage-btn-color-active};
+}
+
+[data-theme="dark"] {
+ // Bootstrap muted color
+ --kt-text-muted: #{$text-muted-dark};
+
+ // Grey colors
+ @each $name, $value in $grays-dark {
+ --kt-gray-#{$name}: #{$value};
+ }
+
+ // Grey rgba colors
+ @each $name, $value in $grays-dark {
+ --kt-gray-#{$name}-rgb: #{to-rgb($value)};
+ }
+
+ // Contextual colors
+ @each $name, $value in $theme-colors-dark {
+ --kt-#{$name}: #{$value};
+ }
+
+ // Contextual active state colors
+ @each $name, $value in $theme-active-colors-dark {
+ --kt-#{$name}-active: #{$value};
+ }
+
+ // Contextual light state colors
+ @each $name, $value in $theme-light-colors-dark {
+ --kt-#{$name}-light: #{$value};
+ }
+
+ // Contextual inverse state colors
+ @each $name, $value in $theme-inverse-colors-dark {
+ --kt-#{$name}-inverse: #{$value};
+ }
+
+ // Contextual rbg colors
+ @each $name, $value in $theme-colors-dark {
+ --kt-#{$name}-rgb: #{to-rgb($value)};
+ }
+
+ // Text colors
+ @each $name, $value in $theme-text-colors-dark {
+ --kt-text-#{$name}: #{$value};
+ }
+
+ // Body
+ --kt-body-bg: #{$body-bg-dark};
+ --kt-body-bg-rgb: #{to-rgb($body-bg-dark)};
+ --kt-body-color: #{$body-color-dark};
+
+ // Links
+ --kt-link-color: #{$link-color-dark};
+ --kt-link-hover-color: #{$link-hover-color-dark};
+
+ // Components
+ --kt-border-color: #{$border-color-dark};
+ --kt-border-dashed-color: #{$border-dashed-color-dark};
+
+ --kt-component-active-color: #{$component-active-color-dark};
+ --kt-component-active-bg: #{$component-active-bg-dark};
+ --kt-component-hover-color: #{$component-hover-color-dark};
+ --kt-component-hover-bg: #{$component-hover-bg-dark};
+ --kt-component-checked-color: #{$component-checked-color-dark};
+ --kt-component-checked-bg: #{$component-checked-bg-dark};
+
+ // Box shadow
+ --kt-box-shadow-xs: #{$box-shadow-xs-dark};
+ --kt-box-shadow-sm: #{$box-shadow-sm-dark};
+ --kt-box-shadow: #{$box-shadow-dark};
+ --kt-box-shadow-lg: #{$box-shadow-lg-dark};
+
+ // Typography
+ --kt-headings-color: #{$headings-color-dark};
+
+ // Tables
+ --kt-table-color: #{$table-color-dark};
+ --kt-table-bg: #{$table-bg-dark};
+ --kt-table-striped-color: #{$table-striped-color-dark};
+ --kt-table-striped-bg: #{$table-striped-bg-dark};
+ --kt-table-accent-bg: #{$table-accent-bg-dark};
+ --kt-table-active-color: #{$table-active-color-dark};
+ --kt-table-active-bg: #{$table-active-bg-dark};
+ --kt-table-hover-colorr: #{$table-hover-color-dark};
+ --kt-table-hover-bg: #{$table-hover-bg-dark};
+ --kt-table-border-color: #{$table-border-color-dark};
+ --kt-table-caption-color: #{$table-caption-color-dark};
+
+ --kt-table-loading-message-box-shadow: #{$table-loading-message-box-shadow-dark};
+ --kt-table-loading-message-bg: #{$table-loading-message-bg-dark};
+ --kt-table-loading-message-color: #{$table-loading-message-color-dark};
+
+ // Buttons + Forms
+ --kt-input-btn-focus-color: #{$input-btn-focus-color-dark};
+ --kt-input-btn-focus-box-shadow: #{$input-btn-focus-box-shadow-dark};
+ --kt-input-btn-focus-color-opacity: #{$input-btn-focus-color-opacity-dark};
+
+ --kt-input-color: #{$input-color-dark};
+ --kt-input-placeholder-color: #{$input-placeholder-color-dark};
+ --kt-input-plaintext-color: #{$input-plaintext-color-dark};
+
+ // Buttons
+ --kt-btn-box-shadow: #{$btn-box-shadow-dark};
+ --kt-btn-focus-box-shadow: #{$btn-focus-box-shadow-dark};
+ --kt-btn-active-box-shadow: #{$btn-active-box-shadow-dark};
+ --kt-btn-disabled-opacity: #{$btn-disabled-opacity-dark};
+
+ --kt-btn-link-color: #{$btn-link-color-dark};
+ --kt-btn-link-hover-color: #{$btn-link-hover-color-dark};
+ --kt-btn-link-disabled-color: #{$btn-link-disabled-color-dark};
+
+ // Forms
+ --kt-form-label-color: #{$form-label-color-dark};
+ --kt-form-text-color: #{$form-text-color-dark};
+
+ --kt-input-bg: #{$input-bg-dark};
+ --kt-input-disabled-bg: #{$input-disabled-bg-dark};
+ --kt-input-disabled-color: #{$input-disabled-color-dark};
+ --kt-input-disabled-border-color: #{$input-disabled-border-color-dark};
+
+ --kt-input-color: #{$input-color-dark};
+ --kt-input-border-color: #{$input-border-color-dark};
+
+ --kt-input-focus-bg: #{$input-focus-bg-dark};
+ --kt-input-focus-border-color: #{$input-focus-border-color-dark};
+ --kt-input-focus-color: #{$input-focus-color-dark};
+
+ // Keenthemes solid input style
+ --kt-input-solid-bg: #{$input-solid-bg-dark};
+ --kt-input-solid-bg-focus: #{$input-solid-bg-focus-dark};
+ --kt-input-solid-placeholder-color: #{$input-solid-placeholder-color-dark};
+ --kt-input-solid-color: #{$input-solid-color-dark};
+
+ // Form checks
+ --kt-form-check-label-color: #{$form-check-label-color-dark};
+ --kt-form-check-label-color-checked: #{$form-check-label-color-checked-dark};
+ --kt-form-check-input-active-filter: #{$form-check-input-active-filter-dark};
+
+ --kt-form-check-input-bg: #{$form-check-input-bg-dark};
+ --kt-form-check-input-bg-solid: #{$form-check-input-bg-solid-dark};
+ --kt-form-check-input-border: #{$form-check-input-border-dark};
+ --kt-form-check-input-focus-border: #{$form-check-input-focus-border-dark};
+ --kt-form-check-input-focus-box-shadow: #{$form-check-input-focus-box-shadow-dark};
+
+ --kt-form-check-input-checked-color: #{$form-check-input-checked-color-dark};
+ --kt-form-check-input-checked-bg-color: #{$form-check-input-checked-bg-color-dark};
+ --kt-form-check-input-checked-border-color: #{$form-check-input-checked-border-color-dark};
+ --kt-form-check-input-checked-bg-image: #{escape-svg($form-check-input-checked-bg-image-dark)};
+ --kt-form-check-radio-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image-dark)};
+
+ --kt-form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color-dark};
+ --kt-form-check-input-indeterminate-bg-color: #{$form-check-input-indeterminate-bg-color-dark};
+ --kt-form-check-input-indeterminate-border-color: #{$form-check-input-indeterminate-border-color-dark};
+ --kt-form-check-input-indeterminate-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image-dark)};
+
+ --kt-form-check-input-disabled-opacity: #{$form-check-input-disabled-opacity-dark};
+ --kt-form-check-label-disabled-opacity: #{$form-check-label-disabled-opacity-dark};
+ --kt-form-check-btn-check-disabled-opacity: #{$form-check-btn-check-disabled-opacity-dark};
+
+ --kt-form-switch-color: #{$form-switch-color-dark};
+ --kt-form-switch-color-solid: #{$form-switch-color-solid-dark};
+ --kt-form-switch-bg-image: #{escape-svg($form-switch-bg-image-dark)};
+ --kt-form-switch-bg-image-solid: #{escape-svg($form-switch-bg-image-solid-dark)};
+ --kt-form-switch-focus-color: #{$form-switch-focus-color-dark};
+ --kt-form-switch-focus-bg-image: #{escape-svg($form-switch-focus-bg-image-dark)};
+ --kt-form-switch-checked-color: #{$form-switch-checked-color-dark};
+ --kt-form-switch-checked-bg-image: #{escape-svg($form-switch-checked-bg-image-dark)};
+
+ // Input groups
+ --kt-input-group-addon-color: #{$input-group-addon-color-dark};
+ --kt-input-group-addon-bg: #{$input-group-addon-bg-dark};
+ --kt-input-group-addon-border-color: #{$input-group-addon-border-color-dark};
+
+ // Form select
+ --kt-form-select-color: #{$form-select-color-dark};
+ --kt-form-select-bg: #{$form-select-bg-dark};
+ --kt-form-select-disabled-color: #{$form-select-disabled-color-dark};
+ --kt-form-select-disabled-bg: #{$form-select-disabled-bg-dark};
+ --kt-form-select-disabled-border-color: #{$form-select-disabled-border-color-dark};
+ --kt-form-select-indicator-color: #{$form-select-indicator-color-dark};
+ --kt-form-select-indicator: #{escape-svg($form-select-indicator-dark)};
+ --kt-form-select-border-color: #{$form-select-border-color-dark};
+ --kt-form-select-box-shadow: #{$form-select-box-shadow-dark};
+ --kt-form-select-focus-border-color: #{$form-select-focus-border-color-dark};
+ --kt-form-select-focus-box-shadow: #{$form-select-focus-box-shadow-dark};
+
+ // Form file button
+ --kt-form-file-button-color: #{$form-file-button-color-dark};
+ --kt-form-file-button-bg: #{$form-file-button-bg-dark};
+ --kt-form-file-button-hover-bg: #{$form-file-button-hover-bg-dark};
+
+ // Navs
+ --kt-nav-tabs-border-color: #{$nav-tabs-border-color-dark};
+ --kt-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color-dark};
+ --kt-nav-tabs-link-active-color: #{$nav-tabs-link-active-color-dark};
+ --kt-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg-dark};
+ --kt-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color-dark};
+
+ --kt-nav-pills-link-active-color: #{$nav-pills-link-active-color-dark};
+ --kt-nav-pills-link-active-bg: #{$nav-pills-link-active-bg-dark};
+
+ // Dropdowns
+ --kt-dropdown-color: #{$dropdown-color-dark};
+ --kt-dropdown-bg: #{$dropdown-bg-dark};
+ --kt-dropdown-divider-bg: #{$dropdown-divider-bg-dark};
+ --kt-dropdown-box-shadow: #{$dropdown-box-shadow-dark};
+ --kt-dropdown-link-color: #{$dropdown-link-color-dark};
+ --kt-dropdown-link-hover-color: #{$dropdown-link-hover-color-dark};
+ --kt-dropdown-link-hover-bg: #{$dropdown-link-hover-bg-dark};
+ --kt-dropdown-link-active-color: #{$dropdown-link-active-color-dark};
+ --kt-dropdown-link-active-bg: #{$dropdown-link-active-bg-dark};
+ --kt-dropdown-link-disabled-color: #{$dropdown-link-disabled-color-dark};
+ --kt-dropdown-header-color: #{$dropdown-header-color-dark};
+
+ // Pagination
+ --kt-pagination-item-bg: #{$pagination-item-bg-dark};
+ --kt-pagination-color: #{$pagination-color-dark};
+ --kt-pagination-bg: #{$pagination-bg-dark};
+ --kt-pagination-border-color: #{$pagination-border-color-dark};
+ --kt-pagination-focus-color: #{$pagination-focus-color-dark};
+ --kt-pagination-focus-bg: #{$pagination-focus-bg-dark};
+ --kt-pagination-focus-box-shadow: #{$pagination-focus-box-shadow-dark};
+ --kt-pagination-focus-outline: #{$pagination-focus-outline-dark};
+ --kt-pagination-hover-color: #{$pagination-hover-color-dark};
+ --kt-pagination-hover-bg: #{$pagination-hover-bg-dark};
+ --kt-pagination-hover-border-color: #{$pagination-hover-border-color-dark};
+ --kt-pagination-active-color: #{$pagination-active-color-dark};
+ --kt-pagination-active-bg: #{$pagination-active-bg-dark};
+ --kt-pagination-active-border-color: #{$pagination-active-border-color-dark};
+ --kt-pagination-disabled-color: #{$pagination-disabled-color-dark};
+ --kt-pagination-disabled-bg: #{$pagination-disabled-bg-dark};
+
+ // Card
+ --kt-card-bg: #{$card-bg-dark};
+ --kt-card-color: #{$card-color-dark};
+ --kt-card-box-shadow: #{$card-box-shadow-dark};
+ --kt-card-border-color: #{$card-border-color-dark};
+ --kt-card-border-dashed-color: #{$card-border-dashed-color-dark};
+ --kt-card-cap-bg: #{$card-cap-bg-dark};
+
+ // Accordion
+ --kt-accordion-color: #{$accordion-color-dark};
+ --kt-accordion-bg: #{$accordion-bg-dark};
+ --kt-accordion-border-color: #{$accordion-border-color-dark};
+ --kt-accordion-button-color: #{$accordion-button-color-dark};
+ --kt-accordion-button-bg: #{$accordion-button-bg-dark};
+ --kt-accordion-button-active-bg: #{$accordion-button-active-bg-dark};
+ --kt-accordion-button-active-color: #{$accordion-button-active-color-dark};
+ --kt-accordion-button-focus-border-color: #{$accordion-button-focus-border-color-dark};
+ --kt-accordion-button-focus-box-shadow: #{$accordion-button-focus-box-shadow-dark};
+
+ --kt-accordion-icon-color: #{$accordion-icon-color-dark};
+ --kt-accordion-icon-active-color: #{$accordion-icon-active-color-dark};
+ --kt-accordion-button-icon: #{escape-svg($accordion-button-icon-dark)};
+ --kt-accordion-button-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+
+ // Tooltips
+ --kt-tooltip-color: #{$tooltip-color-dark};
+ --kt-tooltip-bg: #{$tooltip-bg-dark};
+ --kt-tooltip-opacity: #{$tooltip-opacity-dark};
+ --kt-tooltip-box-shadow: #{$tooltip-box-shadow-dark};
+
+ // Popovers
+ --kt-popover-bg: #{$popover-bg-dark};
+ --kt-popover-border-color: #{$popover-border-color-dark};
+ --kt-popover-box-shadow: #{$popover-box-shadow-dark};
+ --kt-popover-header-bg: #{$popover-header-bg-dark};
+ --kt-popover-header-color: #{$popover-header-color-dark};
+ --kt-popover-header-border-color: #{$popover-header-border-color-dark};
+ --kt-popover-body-color: #{$popover-body-color-dark};
+
+ // Dropdowns
+ --kt-dropdown-box-shadow: #{$dropdown-box-shadow-dark};
+ --kt-dropdown-bg: #{$dropdown-bg-dark};
+
+ // Toasts
+ --kt-toast-color: #{$toast-color-dark};
+ --kt-toast-background-color: #{$toast-background-color-dark};
+ --kt-toast-box-shadow: #{$toast-box-shadow-dark};
+ --kt-toast-header-color: #{$toast-header-color-dark};
+ --kt-toast-header-background-color: #{$toast-header-background-color-dark};
+ --kt-toast-header-border-color: #{$toast-header-border-color-dark};
+
+ // Badges
+ --kt-badge-color: #{$badge-color-dark};
+
+ // Modals
+ --kt-modal-bg: #{$modal-content-bg-dark};
+ --kt-modal-color: #{$modal-content-color-dark};
+ --kt-modal-border-color: #{$modal-content-border-color-dark};
+ --kt-modal-box-shadow: #{$modal-content-box-shadow-dark};
+ --kt-modal-content-color: #{$modal-content-color-dark};
+ --kt-modal-content-bg: #{$modal-content-bg-dark};
+ --kt-modal-content-border-color: #{$modal-content-border-color-dark};
+ --kt-modal-content-box-shadow: #{$modal-content-box-shadow-dark};
+ --kt-modal-content-box-shadow-xs: #{$modal-content-box-shadow-xs-dark};
+ --kt-modal-content-box-shadow-sm-up: #{$modal-content-box-shadow-sm-up-dark};
+ --kt-modal-header-border-color: #{$modal-header-border-color-dark};
+ --kt-modal-footer-border-color: #{$modal-footer-border-color-dark};
+ --kt-modal-backdrop-bg: #{$modal-backdrop-bg-dark};
+ --kt-modal-backdrop-opacity: #{$modal-backdrop-opacity-dark};
+
+ // Progress bars
+ --kt-progress-bg: #{$progress-bg-dark};
+ --kt-progress-box-shadow: #{$progress-box-shadow-dark};
+
+ // List group
+ --kt-list-group-color: #{$list-group-color-dark};
+ --kt-list-group-bg: #{$list-group-bg-dark};
+ --kt-list-group-border-color: #{$list-group-border-color-dark};
+ --kt-list-group-hover-bg: #{$list-group-hover-bg-dark};
+ --kt-list-group-active-color: #{$list-group-active-color-dark};
+ --kt-list-group-active-bg: #{$list-group-active-bg-dark};
+ --kt-list-group-active-border-colorg: #{$list-group-active-border-color-dark};
+ --kt-list-group-disabled-color: #{$list-group-disabled-color-dark};
+ --kt-list-group-disabled-bg: #{$list-group-disabled-bg-dark};
+ --kt-list-group-action-colorg: #{$list-group-action-color-dark};
+ --kt-list-group-action-hover-color: #{$list-group-action-hover-color-dark};
+ --kt-list-group-action-active-color: #{$list-group-action-active-color-dark};
+ --kt-list-group-action-active-bg: #{$list-group-action-active-bg-dark};
+
+ // Image thumbnails
+ --kt-thumbnail-bg: #{$thumbnail-bg-dark};
+ --kt-thumbnail-border-color: #{$thumbnail-border-color-dark};
+ --kt-thumbnail-box-shadow: #{$thumbnail-box-shadow-dark};
+
+ // Figures
+ --kt-figure-caption-color: #{$figure-caption-color-dark};
+
+ // Breadcrumbs
+ --kt-breadcrumb-bg: #{$breadcrumb-bg-dark};
+ --kt-breadcrumb-divider-color: #{$breadcrumb-divider-color-dark};
+ --kt-breadcrumb-active-color: #{$breadcrumb-active-color-dark};
+
+ // Carousel
+ --kt-carousel-custom-indicator-default-bg-color: #{$carousel-custom-indicator-default-bg-color-dark};
+ --kt-carousel-custom-indicator-active-bg-color: #{$carousel-custom-indicator-active-bg-color-dark};
+ --kt-arousel-custom-bullet-indicator-default-bg-color: #{$carousel-custom-bullet-indicator-default-bg-color-dark};
+ --kt-carousel-custom-bullet-indicator-active-bg-color: #{$carousel-custom-bullet-indicator-active-bg-color-dark};
+
+ // Close
+ --kt-btn-close-color: #{$btn-close-color-dark};
+ --kt-btn-close-bg: #{escape-svg($btn-close-bg-dark)};
+
+ // Offcanvas
+ --kt-code-bg: #{$code-bg-dark};
+ --kt-code-box-shadow: #{$code-box-shadow-dark};
+ --kt-code-color: #{$code-color-dark};
+
+ // Offcanvas
+ --kt-offcanvas-border-color: #{$offcanvas-border-color-dark};
+ --kt-offcanvas-bg-color: #{$offcanvas-bg-color-dark};
+ --kt-offcanvas-color: #{$offcanvas-color-dark};
+ --kt-offcanvas-box-shadow: #{$offcanvas-box-shadow-dark};
+ --kt-offcanvas-backdrop-bg: #{$offcanvas-backdrop-bg-dark};
+ --kt-offcanvas-backdrop-opacity: #{$offcanvas-backdrop-opacity-dark};
+
+ // Code
+ --kt-code-bg: #{$code-bg-dark};
+ --kt-code-box-shadow: #{$code-box-shadow-dark};
+ --kt-code-color: #{$code-color-dark};
+
+ // Symbol
+ --kt-symbol-label-color: #{$symbol-label-color-dark};
+ --kt-symbol-label-bg: #{$symbol-label-bg-dark};
+ --kt-symbol-border-color: #{$symbol-border-color-dark};
+
+ // Bullet
+ --kt-bullet-bg-color: #{$bullet-bg-color-dark};
+
+ // Scrolltop
+ --kt-scrolltop-opacity: #{$scrolltop-opacity-dark};
+ --kt-scrolltop-opacity-on: #{$scrolltop-opacity-on-dark};
+ --kt-scrolltop-opacity-hover: #{$scrolltop-opacity-hover-dark};
+ --kt-scrolltop-box-shadow: #{$scrolltop-box-shadow-dark};
+ --kt-scrolltop-bg-color: #{$scrolltop-bg-color-dark};
+ --kt-scrolltop-bg-color-hover: #{$scrolltop-bg-color-hover-dark};
+ --kt-scrolltop-icon-color: #{$scrolltop-icon-color-dark};
+ --kt-scrolltop-icon-color-hover: #{$scrolltop-icon-color-hover-dark};
+
+ // Keenthemes drawer component
+ --kt-drawer-box-shadow: #{$drawer-box-shadow-dark};
+ --kt-drawer-bg-color: #{$drawer-bg-color-dark};
+ --kt-drawer-overlay-bg-color: #{$drawer-overlay-bg-color-dark};
+
+ // Keenthemes menu component
+ --kt-menu-dropdown-box-shadow: #{$menu-dropdown-box-shadow-dark};
+ --kt-menu-dropdown-bg-color: #{$menu-dropdown-bg-color-dark};
+ --kt-menu-heading-color: #{$menu-heading-color-dark};
+
+ --kt-menu-link-color-hover: #{$menu-link-color-hover-dark};
+ --kt-menu-link-color-show: #{$menu-link-color-show-dark};
+ --kt-menu-link-color-here: #{$menu-link-color-here-dark};
+ --kt-menu-link-color-active: #{$menu-link-color-active-dark};
+ --kt-menu-link-bg-color-hover: #{$menu-link-bg-color-hover-dark};
+ --kt-menu-link-bg-color-show: #{$menu-link-bg-color-show-dark};
+ --kt-menu-link-bg-color-here: #{$menu-link-bg-color-here-dark};
+ --kt-menu-link-bg-color-active: #{$menu-link-bg-color-active-dark};
+
+
+ // Keenthemes feedback component
+ --kt-feedback-popup-box-shadow: #{$feedback-popup-box-shadow-dark};
+ --kt-feedback-popup-background-color: #{$feedback-popup-background-color-dark};
+
+ // Keenthemes scrollbar component
+ --kt-scrollbar-color: #{$scrollbar-color-dark};
+ --kt-scrollbar-hover-color: #{$scrollbar-hover-color-dark};
+
+ // Keenthemes overlay component
+ --kt-overlay-bg: #{$overlay-bg-dark};
+
+ // Keenthemes blockui component
+ --kt-blockui-overlay-bg: #{$blockui-overlay-bg-dark};
+
+ // Keenthemes rating component
+ --kt-rating-color-default: #{$rating-color-default-dark};
+ --kt-rating-color-active: #{$rating-color-active-dark};
+
+ // Keenthemes ribbon component
+ --kt-ribbon-label-box-shadow: #{$ribbon-label-box-shadow-dark};
+ --kt-ribbon-label-bg: #{$ribbon-label-bg-dark};
+ --kt-ribbon-label-border-color: #{$ribbon-label-border-color-dark};
+ --kt-ribbon-clip-bg: #{$ribbon-clip-bg-dark};
+
+ // Engage panel
+ --kt-engage-btn-bg: #{$engage-btn-bg-dark};
+ --kt-engage-btn-color: #{$engage-btn-color-dark};
+ --kt-engage-btn-color-active: #{$engage-btn-color-active-dark};
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_rotate.scss b/src/_metronic/assets/sass/core/components/_rotate.scss
new file mode 100644
index 0000000..80ece20
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_rotate.scss
@@ -0,0 +1,47 @@
+//
+// Rotate
+//
+
+
+$rotate-transition: transform 0.3s ease;
+
+.rotate {
+ display: inline-flex;
+ align-items: center;
+}
+
+@each $value in (90, 180, 270) {
+ .rotate-#{$value} {
+ transition: $rotate-transition;
+ backface-visibility: hidden;
+ will-change: transform;
+
+ .collapsible:not(.collapsed)> & ,
+ .show > &,
+ .active > & {
+ transform: rotateZ(#{$value}deg);
+ transition: $rotate-transition;
+
+ [direction="rtl"] & {
+ transform: rotateZ(-#{$value}deg);
+ }
+ }
+ }
+
+ .rotate-n#{$value} {
+ transition: $rotate-transition;
+ backface-visibility: hidden;
+ will-change: transform;
+
+ .collapsible:not(.collapsed)> &,
+ .show > &,
+ .active > & {
+ transform: rotateZ(-#{$value}deg);
+ transition: $rotate-transition;
+
+ [direction="rtl"] & {
+ transform: rotateZ(#{$value}deg);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_scroll.scss b/src/_metronic/assets/sass/core/components/_scroll.scss
new file mode 100644
index 0000000..e61ca0b
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_scroll.scss
@@ -0,0 +1,309 @@
+//
+// Scroll
+//
+
+
+// Customize native scrollbars only for desktop mode
+@include media-breakpoint-up(lg) {
+ main,
+ span,
+ ol,
+ ul,
+ pre,
+ div {
+ // Firefox
+ scrollbar-width: thin;
+
+ // Webkit
+ &::-webkit-scrollbar {
+ width: var(--kt-scrollbar-width);
+ height: var(--kt-scrollbar-height);
+ }
+
+ ::-webkit-scrollbar-track {
+ @include border-radius($scrollbar-border-radius);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ @include border-radius($scrollbar-border-radius);
+ }
+
+ // Default color
+ @include scrollbar-color(var(--kt-scrollbar-color), var(--kt-scrollbar-hover-color));
+ }
+}
+
+// Overflow scroll
+.scroll {
+ overflow: scroll;
+ position: relative;
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow: auto;
+ }
+}
+
+.scroll-x {
+ overflow-x: scroll;
+ position: relative;
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-x: auto;
+ }
+}
+
+.scroll-y {
+ overflow-y: scroll;
+ position: relative;
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-y: auto;
+ }
+}
+
+// Hover overflow scroll
+.hover-scroll {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow: hidden;
+
+ border-right: var(--kt-scrollbar-width) solid transparent;
+ border-bottom: var(--kt-scrollbar-height) transparent;
+ margin-right: calc( -1 * var(--kt-scrollbar-width));
+ margin-bottom: calc( -1 * var(--kt-scrollbar-height));
+
+ &:hover {
+ overflow: scroll;
+ border-right: 0;
+ border-bottom: 0;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow: scroll;
+ position: relative;
+ border-right: 0;
+ border-bottom: 0;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow: auto;
+ }
+}
+
+// Hover overflow scroll y
+.hover-scroll-y {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow-y: hidden;
+ border-right: var(--kt-scrollbar-width) solid transparent;
+ margin-right: calc( -1 * var(--kt-scrollbar-width));
+
+ &:hover {
+ overflow-y: scroll;
+ border-right: 0;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow-y: scroll;
+ position: relative;
+ border-right: 0;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-y: auto;
+ }
+}
+
+// Hover overflow scroll x
+.hover-scroll-x {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow-x: hidden;
+ border-bottom: var(--kt-scrollbar-height) solid transparent;
+
+ &:hover {
+ overflow-x: scroll;
+ border-bottom: 0;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow-x: scroll;
+ position: relative;
+ border-bottom: 0;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-x: auto;
+ }
+}
+
+// Hover overflow overlay
+.hover-scroll-overlay {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow: hidden;
+
+ // Webkit
+ &::-webkit-scrollbar {
+ width: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-width) );
+ height: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-width) );
+ }
+
+ &::-webkit-scrollbar-track {
+ border-radius: 0;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 0;
+ background-clip: content-box;
+ border-right: var(--kt-scrollbar-space) solid transparent;
+ border-bottom: var(--kt-scrollbar-space) solid transparent;
+ }
+
+ &:hover {
+ overflow: overlay;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow: scroll;
+ position: relative;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow: auto;
+ }
+}
+
+// Hover overflow overlay y
+.hover-scroll-overlay-y {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow-y: hidden;
+
+ // Webkit
+ &::-webkit-scrollbar {
+ width: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-space));
+ }
+
+ &::-webkit-scrollbar-track {
+ border-radius: 0;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 0;
+ background-clip: content-box;
+ border-right: var(--kt-scrollbar-space) solid transparent;
+ }
+
+ &:hover {
+ overflow-y: overlay;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow-y: scroll;
+ position: relative;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-y: auto;
+ }
+}
+
+// Hover overflow overlay x
+.hover-scroll-overlay-x {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow-x: hidden;
+
+ // Webkit
+ &::-webkit-scrollbar {
+ height: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-space) );
+ }
+
+ &::-webkit-scrollbar-track {
+ border-radius: 0;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 0;
+ background-clip: content-box;
+ border-bottom: var(--kt-scrollbar-space) solid transparent;
+ }
+
+ &:hover {
+ overflow-x: overlay;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow-x: scroll;
+ position: relative;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-x: auto;
+ }
+}
+
+// Utility classes
+.scroll-ps {
+ padding-left: var(--kt-scrollbar-width) !important;
+}
+
+.scroll-ms {
+ margin-left: var(--kt-scrollbar-width) !important;
+}
+
+.scroll-mb {
+ margin-bottom: var(--kt-scrollbar-height) !important;
+}
+
+.scroll-pe {
+ padding-right: var(--kt-scrollbar-width) !important;
+}
+
+.scroll-me {
+ margin-right: var(--kt-scrollbar-width) !important;
+}
+
+.scroll-px {
+ padding-left: var(--kt-scrollbar-width) !important;
+ padding-right: var(--kt-scrollbar-width) !important;
+}
+
+.scroll-mx {
+ margin-left: var(--kt-scrollbar-width) !important;
+ margin-right: var(--kt-scrollbar-width) !important;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_scrolltop.scss b/src/_metronic/assets/sass/core/components/_scrolltop.scss
new file mode 100644
index 0000000..b4571bf
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_scrolltop.scss
@@ -0,0 +1,69 @@
+//
+// Scrolltop
+//
+
+.scrolltop {
+ position: fixed;
+ display: none;
+ cursor: pointer;
+ z-index: $scrolltop-z-index;
+ justify-content: center;
+ align-items: center;
+ width: $scrolltop-size;
+ height: $scrolltop-size;
+ bottom: $scrolltop-bottom;
+ right: $scrolltop-end;
+ background-color: var(--kt-scrolltop-bg-color);
+ box-shadow: var(--kt-scrolltop-box-shadow);
+ opacity: $scrolltop-opacity;
+ transition: $transition-link;
+ @include border-radius($border-radius);
+
+ .svg-icon {
+ @include svg-icon-size(24px);
+ color: var(--kt-scrolltop-icon-color);
+ }
+
+ > i {
+ font-size: 1.3rem;
+ color: var(--kt-scrolltop-icon-color);
+ }
+
+ &:hover {
+ background-color: var(--kt-scrolltop-bg-color-hover);
+
+ .svg-icon,
+ i {
+ color: var(--kt-scrolltop-icon-color-hover);
+ }
+ }
+
+ [data-kt-scrolltop="on"] & {
+ opacity: var(--kt-scrolltop-opacity-on);
+ animation: animation-scrolltop .4s ease-out 1;
+ display: flex;
+
+ &:hover {
+ transition: $transition-link;
+ opacity: var(--kt-scrolltop-opacity-hover);
+ }
+ }
+
+
+}
+
+// Tablet & Mobile Modess
+@include media-breakpoint-down(lg) {
+ .scrolltop {
+ bottom: $scrolltop-bottom-mobile;
+ right: $scrolltop-end-mobile;
+ width: $scrolltop-size-mobile;
+ height: $scrolltop-size-mobile;
+ }
+}
+
+// Animations
+@keyframes animation-scrolltop {
+ from { margin-bottom: -15px; }
+ to { margin-bottom: 0; }
+}
diff --git a/src/_metronic/assets/sass/core/components/_separator.scss b/src/_metronic/assets/sass/core/components/_separator.scss
new file mode 100644
index 0000000..4417e1d
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_separator.scss
@@ -0,0 +1,66 @@
+//
+// Separator
+//
+
+.separator {
+ display: block;
+ height: 0;
+ border-bottom: 1px solid var(--kt-border-color);
+
+ &.separator-dotted {
+ border-bottom-style: dotted;
+ border-bottom-color: var(--kt-border-dashed-color);
+ }
+
+ &.separator-dashed {
+ border-bottom-style: dashed;
+ border-bottom-color: var(--kt-border-dashed-color);
+ }
+
+ &.separator-content {
+ display: flex;
+ align-items: center;
+ border-bottom: 0;
+ text-align: center;
+
+ &::before,
+ &::after {
+ content: " ";
+ width: 50%;
+ border-bottom: 1px solid var(--kt-border-color);
+ }
+
+ &::before{
+ margin-right: 1.25rem;
+ }
+
+ &::after{
+ margin-left: 1.25rem;
+ }
+
+ &.separator-dotted {
+ &::before,
+ &::after {
+ border-bottom-style: dotted;
+ border-bottom-color: var(--kt-border-dashed-color);
+ }
+ }
+
+ &.separator-dashed {
+ &::before,
+ &::after {
+ border-bottom-style: dashed;
+ border-bottom-color: var(--kt-border-dashed-color);
+ }
+ }
+
+ @each $color, $value in $theme-colors {
+ &.border-#{$color}{
+ &::before,
+ &::after {
+ border-color: $value !important;
+ }
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_shape.scss b/src/_metronic/assets/sass/core/components/_shape.scss
new file mode 100644
index 0000000..e540908
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_shape.scss
@@ -0,0 +1,13 @@
+//
+// Shape
+//
+
+.xehagon {
+ //$edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20
+ @include shape(6);
+}
+
+.octagon {
+ //$edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20
+ @include shape(8);
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_stepper.scss b/src/_metronic/assets/sass/core/components/_stepper.scss
new file mode 100644
index 0000000..eff128c
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_stepper.scss
@@ -0,0 +1,8 @@
+//
+// Stepper
+//
+
+// Import Dependencies
+@import "stepper/base";
+@import "stepper/pills";
+@import "stepper/links";
diff --git a/src/_metronic/assets/sass/core/components/_svg-icon.scss b/src/_metronic/assets/sass/core/components/_svg-icon.scss
new file mode 100644
index 0000000..7147ab8
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_svg-icon.scss
@@ -0,0 +1,30 @@
+//
+// SVG Icon
+//
+
+.svg-icon {
+ line-height: 1;
+ color: var(--kt-text-muted);
+ @include svg-icon-size(get($font-sizes, 5));
+
+ // Theme colors
+ @each $name, $color in $theme-text-colors {
+ &.svg-icon-#{$name} {
+ color: var(--kt-text-#{$name});
+ }
+ }
+
+ // Responsive icon sizes
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ // Sizes
+ @each $name, $value in $font-sizes {
+ &.svg-icon#{$infix}-#{$name} {
+ @include svg-icon-size($value, true);
+ }
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_symbol.scss b/src/_metronic/assets/sass/core/components/_symbol.scss
new file mode 100644
index 0000000..5b49557
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_symbol.scss
@@ -0,0 +1,133 @@
+//
+// symbol
+//
+
+// Base
+.symbol {
+ display: inline-block;;
+ flex-shrink: 0;
+ position: relative;
+ @include border-radius($border-radius);
+
+ // Label
+ .symbol-label {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 500;
+ color: var(--kt-symbol-label-color);
+ background-color: var(--kt-symbol-label-bg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: cover;
+ @include border-radius($border-radius);
+
+ &:after {
+ @include border-radius($border-radius);
+ }
+ }
+
+ // Badge
+ .symbol-badge {
+ position: absolute;
+ border-radius: 100%;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%) !important;
+ }
+
+ // Image
+ > img {
+ width: 100%;
+ flex-shrink: 0;
+ display: inline-block;
+ @include border-radius($border-radius);
+ }
+
+ // Square
+ &.symbol-square {
+ &,
+ > img,
+ .symbol-label {
+ border-radius: 0 !important;
+ }
+ }
+
+ // Circle
+ &.symbol-circle {
+ &,
+ > img,
+ .symbol-label {
+ border-radius: 50%;
+
+ &:after {
+ border-radius: 50%;
+ }
+ }
+ }
+
+ // Sizes
+ @include symbol-size(get($symbol-sizes, default));
+
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @each $name, $value in $symbol-sizes {
+ @if ($name != 'default') {
+ &.symbol#{$infix}-#{$name} {
+ @include symbol-size($value);
+ }
+ }
+ }
+ }
+ }
+}
+
+// Group
+.symbol-group {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin-left: 10px;
+
+ .symbol {
+ position: relative;
+ z-index: 0;
+ margin-left: -10px;
+ transition: all 0.3s ease;
+
+ &:hover {
+ transition: all 0.3s ease;
+ z-index: 1;
+ }
+ }
+
+ .symbol-badge {
+ border: 2px solid var(--kt-body-bg);
+ }
+
+ .symbol-label {
+ position: relative;
+
+ &:after {
+ display: block;
+ content: " ";
+ border-radius: inherit;
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ border: 2px solid var(--kt-symbol-border-color);
+ -webkit-background-clip: padding-box; /* for Safari */
+ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+ }
+ }
+
+ &.symbol-hover {
+ .symbol {
+ cursor: pointer;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_tables.scss b/src/_metronic/assets/sass/core/components/_tables.scss
new file mode 100644
index 0000000..1ff0772
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_tables.scss
@@ -0,0 +1,243 @@
+//
+// Table
+//
+
+// Table
+.table {
+ --#{$prefix}table-color: var(--kt-table-color);
+ --#{$prefix}table-bg: var(--kt-table-bg);
+ --#{$prefix}table-border-color: var(--kt-table-border-color);
+ --#{$prefix}table-accent-bg: var(--kt-table-accent-bg);
+ --#{$prefix}table-striped-color: var(--kt-table-striped-color);
+ --#{$prefix}table-striped-bg: var(--kt-table-striped-bg);
+ --#{$prefix}table-active-color: var(--kt-table-active-color);
+ --#{$prefix}table-active-bg: var(--kt-table-active-bg);
+ --#{$prefix}table-hover-color: var(--kt-table-hover-color);
+ --#{$prefix}table-hover-bg: var(--kt-table-hover-bg);
+
+ // Fix for BS 5.1.2 update
+ & > :not(:first-child) {
+ border-color: transparent;
+ border-width: 0;
+ border-style: none;
+ }
+
+ >:not(:last-child)>:last-child>* {
+ border-bottom-color: inherit;
+ }
+
+ tr, th, td {
+ border-color: inherit;
+ border-width: inherit;
+ border-style: inherit;
+ text-transform: inherit;
+ font-weight: inherit;
+ font-size: inherit;
+ color: inherit;
+ height: inherit;
+ min-height: inherit;
+
+ &:first-child {
+ padding-left: 0;
+ }
+
+ &:last-child {
+ padding-right: 0;
+ }
+ }
+
+ tfoot,
+ tbody {
+ tr:last-child {
+ border-bottom: 0 !important;
+
+ th, td {
+ border-bottom: 0 !important;
+ }
+ }
+ }
+
+ tfoot {
+ th, td {
+ border-top: inherit;
+ }
+ }
+
+ // Rounded
+ &.table-rounded {
+ border-radius: $border-radius;
+ border-spacing: 0;
+ border-collapse: separate;
+ }
+
+ // Flush
+ &.table-flush {
+ tr, th, td {
+ padding: inherit;
+ }
+ }
+
+ // Row bordered
+ &.table-row-bordered {
+ tr {
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: var(--kt-border-color);
+ }
+
+ tfoot {
+ th, td {
+ border-top-width: 1px !important;
+ }
+ }
+ }
+
+ // Row dashed
+ &.table-row-dashed {
+ tr {
+ border-bottom-width: 1px;
+ border-bottom-style: dashed;
+ border-bottom-color: var(--kt-border-color);
+ }
+
+ tfoot {
+ th, td {
+ border-top-width: 1px !important;
+ }
+ }
+ }
+
+ // Row border colors
+ @each $name, $value in $grays {
+ &.table-row-gray-#{$name} {
+ tr {
+ border-bottom-color: var(--kt-gray-#{$name});
+ }
+ }
+ }
+}
+
+// Layout fixed
+.table-layout-fixed {
+ table-layout: fixed;
+}
+
+// Sorting
+.table-sort {
+ &:after {
+ opacity: 0;
+ }
+}
+
+.table-sort,
+.table-sort-asc,
+.table-sort-desc {
+ vertical-align: middle;
+
+ &:after {
+ position: relative;
+ display: inline-block;
+ width: 0.75rem;
+ height: 0.75rem;
+ content: " ";
+ bottom: auto;
+ right: auto;
+ left: auto;
+ margin-left: 0.5rem;
+ }
+}
+
+.table-sort-asc {
+ &:after {
+ opacity: 1;
+ @include svg-bg-icon(arrow-top, var(--kt-text-muted));
+ }
+}
+
+.table-sort-desc {
+ &:after {
+ opacity: 1;
+ @include svg-bg-icon(arrow-bottom, var(--kt-text-muted));
+ }
+}
+
+// Loading
+.table-loading-message {
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ @include border-radius($border-radius);
+ box-shadow: var(--kt-table-loading-message-box-shadow);
+ background-color: var(--kt-table-loading-message-bg);
+ color: var(--kt-table-loading-message-color);
+ font-weight: $font-weight-bold;
+ margin: 0 !important;
+ width: auto;
+ padding: 0.85rem 2rem !important;
+ transform: translateX(-50%) translateY(-50%);
+}
+
+.table-loading {
+ position: relative;
+
+ .table-loading-message {
+ display: block;
+ }
+}
+
+// Cell gutters
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @each $name, $value in $gutters {
+ .table.g#{$infix}-#{$name} {
+ th, td {
+ padding: $value;
+
+ // Datatables responsive mode fix
+ &.dtr-control {
+ padding-left: $value !important;
+ }
+ }
+ }
+
+ .table.gy#{$infix}-#{$name} {
+ th, td {
+ padding-top: $value;
+ padding-bottom: $value;
+ }
+ }
+
+ .table.gx#{$infix}-#{$name} {
+ th, td {
+ padding-left: $value;
+ padding-right: $value;
+
+ // Datatables responsive mode fix
+ &.dtr-control {
+ padding-left: $value !important;
+ }
+ }
+ }
+
+ .table.gs#{$infix}-#{$name} {
+ th, td {
+ &:first-child {
+ padding-left: $value;
+ }
+
+ &:last-child {
+ padding-right: $value;
+ }
+
+ // Datatables responsive mode fix
+ &.dtr-control:first-child {
+ padding-left: $value !important;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_theme-mode.scss b/src/_metronic/assets/sass/core/components/_theme-mode.scss
new file mode 100644
index 0000000..40e99ee
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_theme-mode.scss
@@ -0,0 +1,38 @@
+//
+// Theme Modes
+//
+
+// Used for theme mode switching via JS
+[data-kt-theme-mode-switching="true"] * {
+ transition: none !important;
+}
+
+// Light mode
+@include theme-light() {
+ .theme-dark-show {
+ display: none !important;
+ }
+
+ .theme-light-bg-transparent {
+ background-color: transparent !important;
+ }
+
+ .theme-light-bg-body {
+ background-color: var(--kt-body-bg) !important;
+ }
+}
+
+// Dark mode
+@include theme-dark() {
+ .theme-light-show {
+ display: none !important;
+ }
+
+ .theme-dark-bg-transparent {
+ background-color: transparent !important;
+ }
+
+ .theme-dark-bg-body {
+ background-color: var(--kt-body-bg) !important;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_timeline-label.scss b/src/_metronic/assets/sass/core/components/_timeline-label.scss
new file mode 100644
index 0000000..edbcab7
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_timeline-label.scss
@@ -0,0 +1,68 @@
+//
+// Timeline Label
+//
+
+
+.timeline-label {
+ position: relative;
+
+ $label-width: 50px;
+
+ &:before {
+ content: '';
+ position: absolute;
+ left: $label-width + 1px;
+ width: 3px;
+ top: 0;
+ bottom: 0;
+ background-color: var(--kt-gray-200);
+ }
+
+ //
+ .timeline-item {
+ display: flex;
+ align-items: flex-start;
+ position: relative;
+ margin-bottom: 1.7rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .timeline-label {
+ width: $label-width;
+ flex-shrink: 0;
+ position: relative;
+ color: var(--kt-gray-800);
+ }
+
+ .timeline-badge {
+ flex-shrink: 0;
+ background-color: var(--kt-body-bg);
+ width: 1rem;
+ height: 1rem;
+ border-radius: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1;
+ position: relative;
+ margin-top: 1px;
+ margin-left: -0.5rem;
+ padding: 3px !important;
+ border: 6px solid var(--kt-body-bg) !important;
+
+ span {
+ display: block;
+ border-radius: 100%;
+ width: 6px;
+ height: 6px;
+ background-color: var(--kt-gray-200);
+ }
+ }
+
+ .timeline-content {
+ flex-grow: 1;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_timeline.scss b/src/_metronic/assets/sass/core/components/_timeline.scss
new file mode 100644
index 0000000..4813245
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_timeline.scss
@@ -0,0 +1,70 @@
+//
+// Timeline
+//
+
+// Base
+.timeline {
+ // Item
+ .timeline-item {
+ position: relative;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ align-items: flex-start;
+
+ &:last-child {
+ .timeline-line {
+ bottom: 100%;
+ }
+ }
+ }
+
+ // Line
+ .timeline-line {
+ display: block;
+ content: " ";
+ justify-content: center;
+ position: absolute;
+ z-index: 0;
+ left: 0;
+ top:0;
+ bottom: 0;
+ transform: translate(50%);
+ border-left-width: 1px;
+ border-left-style: dashed;
+ border-left-color: var(--kt-gray-300);
+ }
+
+ // Icon
+ .timeline-icon {
+ z-index: 1;
+ flex-shrink: 0;
+ margin-right: 1rem;
+ }
+
+ // Content
+ .timeline-content {
+ width: 100%;
+ overflow: auto;
+ margin-bottom: 1.5rem;
+ }
+
+ // Vertical center
+ &.timeline-center {
+ .timeline-item {
+ align-items: center;
+
+ &:first-child {
+ .timeline-line {
+ top: 50%;
+ }
+ }
+
+ &:last-child {
+ .timeline-line {
+ bottom: 50%;
+ }
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_toasts.scss b/src/_metronic/assets/sass/core/components/_toasts.scss
new file mode 100644
index 0000000..4612c77
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_toasts.scss
@@ -0,0 +1,15 @@
+.toast {
+ --#{$prefix}toast-color: var(--kt-toast-color);
+ --#{$prefix}toast-bg: var(--kt-toast-background-color);
+ --#{$prefix}toast-border-color: var(--kt-toast-border-color);
+ --#{$prefix}toast-box-shadow: var(--kt-toast-box-shadow);
+ --#{$prefix}toast-header-color: var(--kt-toast-header-color);
+ --#{$prefix}toast-header-bg: var(--kt-toast-header-background-color);
+ --#{$prefix}toast-header-border-color: var(--kt-toast-header-border-color);
+
+ .toast-header {
+ .btn-close {
+ margin-right: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_toggle.scss b/src/_metronic/assets/sass/core/components/_toggle.scss
new file mode 100644
index 0000000..9f97ee2
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_toggle.scss
@@ -0,0 +1,19 @@
+//
+// Toggle
+//
+
+.toggle {
+ &.collapsible:not(.collapsed), // Integration with Bootstrap Collapse
+ &.active {
+ .toggle-off {
+ display: none;
+ }
+ }
+
+ &.collapsible.collapsed, // Integration with Bootstrap Collapse
+ &:not(.collapsible):not(.active) {
+ .toggle-on {
+ display: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/_tooltip.scss b/src/_metronic/assets/sass/core/components/_tooltip.scss
new file mode 100644
index 0000000..94725b4
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_tooltip.scss
@@ -0,0 +1,31 @@
+//
+// Tooltip
+//
+
+
+// Base
+.tooltip {
+ --#{$prefix}tooltip-color: var(--kt-tooltip-color);
+ --#{$prefix}tooltip-bg: var(--kt-tooltip-bg);
+ --#{$prefix}tooltip-opacity: var(--kt-tooltip-opacity);
+
+ .tooltip-inner {
+ box-shadow: var(--kt-tooltip-box-shadow);
+ }
+
+ &.tooltop-auto-width {
+ .tooltip-inner {
+ white-space: nowrap;
+ max-width: none;
+ }
+ }
+
+ // Inverse
+ &.tooltip-inverse {
+ @include tooltip-theme(
+ $bg-color: var(--kt-dark),
+ $color: var(--kt-dark-inverse),
+ $arrow-color: var(--kt-dark),
+ );
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/_type.scss b/src/_metronic/assets/sass/core/components/_type.scss
new file mode 100644
index 0000000..01819b7
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_type.scss
@@ -0,0 +1,5 @@
+
+
+.blockquote-footer {
+ color: var(--kt-blockquote-footer-color);
+}
diff --git a/src/_metronic/assets/sass/core/components/_utilities.scss b/src/_metronic/assets/sass/core/components/_utilities.scss
new file mode 100644
index 0000000..0874a6c
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_utilities.scss
@@ -0,0 +1,125 @@
+//
+// Custom utilities
+//
+
+$utilities: map-merge(
+ $utilities,
+ (
+ "position": (
+ property: position,
+ responsive: true,
+ values: static relative absolute fixed sticky
+ ),
+ "opacity": (
+ property: opacity,
+ class: opacity,
+ values: $opacity-values
+ ),
+ "opacity-hover": (
+ property: opacity,
+ state: hover,
+ class: opacity,
+ values: $opacity-values
+ ),
+ "font-size": (
+ rfs: true,
+ responsive: true,
+ property: font-size,
+ class: fs,
+ values: $font-sizes
+ ),
+ "width": (
+ responsive: true,
+ property: width,
+ class: w,
+ values: $custom-sizes
+ ),
+ "max-width": (
+ responsive: true,
+ property: max-width,
+ class: mw,
+ values: $custom-sizes
+ ),
+ "min-width": (
+ responsive: true,
+ property: min-width,
+ class: min-w,
+ values: $custom-sizes
+ ),
+ "height": (
+ responsive: true,
+ property: height,
+ class: h,
+ values: $custom-sizes
+ ),
+ "max-height": (
+ responsive: true,
+ property: max-height,
+ class: mh,
+ values: $custom-sizes
+ ),
+ "min-height": (
+ responsive: true,
+ property: min-height,
+ class: min-h,
+ values: $custom-sizes
+ ),
+ "z-index": (
+ property: z-index,
+ class: z-index,
+ values: $zindex-values
+ ),
+ "border-top-width": (
+ property: border-top-width,
+ class: border-top,
+ values: $border-widths
+ ),
+ "border-bottom-width": (
+ property: border-bottom-width,
+ class: border-bottom,
+ values: $border-widths
+ ),
+ "border-right-width": (
+ property: border-right-width,
+ class: border-right,
+ values: $border-widths
+ ),
+ "border-left-width": (
+ property: border-left-width,
+ class: border-left,
+ values: $border-widths
+ ),
+ "line-height": (
+ property: line-height,
+ class: lh,
+ values: (
+ 0: 0,
+ 1: 1,
+ sm: $line-height-sm,
+ base: $line-height-base,
+ lg: $line-height-lg,
+ xl: $line-height-xl,
+ xxl: $line-height-xxl
+ )
+ ),
+ "letter-spacing": (
+ property: letter-spacing,
+ class: ls,
+ values: $letter-spacing-values
+ ),
+ "rounded": (
+ property: border-radius,
+ class: rounded,
+ values: (
+ null: $border-radius,
+ 0: 0,
+ 1: $border-radius-sm,
+ 2: $border-radius,
+ 3: $border-radius-lg,
+ 4: $border-radius-xl,
+ circle: 50%,
+ pill: $border-radius-pill
+ )
+ )
+ )
+);
diff --git a/src/_metronic/assets/sass/core/components/_variables.scss b/src/_metronic/assets/sass/core/components/_variables.scss
new file mode 100644
index 0000000..e20e542
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/_variables.scss
@@ -0,0 +1,1587 @@
+//
+// Bootstrap & Custom Variables
+// Safely override any variable in _variables.custom.scss
+//
+
+
+// Bootstrap color system
+$white: #ffffff !default;
+$black:#000000 !default;
+
+// Bootstrap grey colors
+$gray-100: #f5f8fa !default;
+$gray-200: #eff2f5 !default;
+$gray-300: #E4E6EF !default;
+$gray-400: #B5B5C3 !default;
+$gray-500: #A1A5B7 !default;
+$gray-600: #7E8299 !default;
+$gray-700: #5E6278 !default;
+$gray-800: #3F4254 !default;
+$gray-900: #181C32 !default;
+
+$gray-100-dark: #1b1b29 !default;
+$gray-200-dark: #2B2B40 !default;
+$gray-300-dark: #323248 !default;
+$gray-400-dark: #474761 !default;
+$gray-500-dark: #565674 !default;
+$gray-600-dark: #6D6D80 !default;
+$gray-700-dark: #92929F !default;
+$gray-800-dark: #CDCDDE !default;
+$gray-900-dark: #FFFFFF !default;
+
+// Bootstrap muted color
+$text-muted: $gray-500 !default;
+$text-muted-dark: $gray-500-dark !default;
+
+// Bootstrap gray colors map
+$grays: (
+ "100": $gray-100,
+ "200": $gray-200,
+ "300": $gray-300,
+ "400": $gray-400,
+ "500": $gray-500,
+ "600": $gray-600,
+ "700": $gray-700,
+ "800": $gray-800,
+ "900": $gray-900
+) !default;
+
+$grays-dark: (
+ "100": $gray-100-dark,
+ "200": $gray-200-dark,
+ "300": $gray-300-dark,
+ "400": $gray-400-dark,
+ "500": $gray-500-dark,
+ "600": $gray-600-dark,
+ "700": $gray-700-dark,
+ "800": $gray-800-dark,
+ "900": $gray-900-dark
+) !default;
+
+// Bootstrap contextual colors
+// Primary colors
+$primary: #3699FF !default;
+$primary-active: #187DE4 !default;
+$primary-light: #F1FAFF !default;
+$primary-light-dark: #212E48 !default;
+$primary-inverse: $white !default;
+
+// Secondary colors
+$secondary: $gray-300 !default;
+$secondary-dark: $gray-300-dark !default;
+$secondary-active: $gray-400 !default;
+$secondary-active-dark: $gray-400-dark !default;
+$secondary-light: $gray-100 !default;
+$secondary-light-dark: $gray-100-dark !default;
+$secondary-inverse: $gray-800 !default;
+$secondary-inverse-dark: $gray-800-dark !default;
+
+// Light colors
+$light: $gray-100 !default;
+$light-dark: $gray-200-dark !default;
+$light-active: $gray-200 !default;
+$light-active-dark: $gray-300-dark !default;
+$light-light: gba($gray-100, 0.75) !default;
+$light-inverse: $gray-600 !default;
+$light-inverse-dark: $gray-600-dark !default;
+
+// Success colors
+$success: #1BC5BD !default;
+$success-active: #0BB7AF !default;
+$success-light: #C9F7F5 !default;
+$success-light-dark: #1C3833 !default;
+$success-inverse: $white !default;
+
+// Info colors
+$info: #8950FC !default;
+$info-active: #7337EE !default;
+$info-light: #EEE5FF !default;
+$info-light-dark: #2F264F !default;
+$info-inverse: $white !default;
+
+// Warning colors
+$warning: #FFA800 !default;
+$warning-active: #EE9D01 !default;
+$warning-light: #FFF4DE !default;
+$warning-light-dark: #392F28 !default;
+$warning-inverse: $white !default;
+
+// Danger colors
+$danger: #F64E60 !default;
+$danger-active: #EE2D41 !default;
+$danger-light: #FFE2E5 !default;
+$danger-light-dark: #3A2434 !default;
+$danger-inverse: $white !default;
+
+// Dark colors
+$dark: $gray-900 !default;
+$dark-dark: $gray-900-dark !default;
+$dark-active: darken($gray-900, 3%) !default;
+$dark-active-dark: lighten($gray-900-dark, 3%) !default;
+$dark-light: $gray-200 !default;
+$dark-light-dark: $gray-200-dark !default;
+$dark-inverse: $white !default;
+$dark-inverse-dark: $gray-100-dark !default;
+
+// Contextual colors
+$theme-colors: (
+ "white": $white, // custom color type
+ "light": $light,
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "dark": $dark
+) !default;
+
+$theme-colors-dark: (
+ "dark": $dark-dark,
+ "light": $light-dark,
+ "secondary": $secondary-dark,
+) !default;
+
+// Contextual active state colors
+$theme-active-colors: (
+ "primary": $primary-active,
+ "secondary": $secondary-active,
+ "light": $light-active,
+ "success": $success-active,
+ "info": $info-active,
+ "warning": $warning-active,
+ "danger": $danger-active,
+ "dark": $dark-active
+) !default;
+
+$theme-active-colors-dark: (
+ "dark": $dark-active-dark,
+ "light": $light-active-dark,
+ "secondary": $secondary-active-dark,
+) !default;
+
+// Contextual inverse state colors
+$theme-inverse-colors: (
+ "primary": $primary-inverse,
+ "secondary": $secondary-inverse,
+ "light": $light-inverse,
+ "success": $success-inverse,
+ "info": $info-inverse,
+ "warning": $warning-inverse,
+ "danger": $danger-inverse,
+ "dark": $dark-inverse
+) !default;
+
+$theme-inverse-colors-dark: (
+ "dark": $dark-inverse-dark,
+ "light": $light-inverse-dark,
+ "secondary": $secondary-inverse-dark,
+) !default;
+
+// Contextual light state colors
+$theme-light-colors: (
+ "primary": $primary-light,
+ "secondary": $secondary-light,
+ "success": $success-light,
+ "info": $info-light,
+ "warning": $warning-light,
+ "danger": $danger-light,
+ "dark": $dark-light
+) !default;
+
+$theme-light-colors-dark: (
+ "primary": $primary-light-dark,
+ "success": $success-light-dark,
+ "info": $info-light-dark,
+ "warning": $warning-light-dark,
+ "danger": $danger-light-dark,
+ "dark": $dark-light-dark,
+ "secondary": $secondary-light-dark
+) !default;
+
+// Text colors
+$theme-text-colors: (
+ "white": $white,
+ "primary": $primary,
+ "secondary": $secondary,
+ "light": $light,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "dark": $dark,
+ "muted": $text-muted,
+ "gray-100": $gray-100,
+ "gray-200": $gray-200,
+ "gray-300": $gray-300,
+ "gray-400": $gray-400,
+ "gray-500": $gray-500,
+ "gray-600": $gray-600,
+ "gray-700": $gray-700,
+ "gray-800": $gray-800,
+ "gray-900": $gray-900
+) !default;
+
+$theme-text-colors-dark: (
+ "dark": $dark-dark,
+ "muted": $text-muted-dark,
+ "secondary": $secondary-dark,
+ "gray-100": $gray-100-dark,
+ "gray-200": $gray-200-dark,
+ "gray-300": $gray-300-dark,
+ "gray-400": $gray-400-dark,
+ "gray-500": $gray-500-dark,
+ "gray-600": $gray-600-dark,
+ "gray-700": $gray-700-dark,
+ "gray-800": $gray-800-dark,
+ "gray-900": $gray-900-dark
+) !default;
+
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+$enable-rounded: true !default;
+$enable-shadows: true !default;
+$enable-negative-margins: true !default;
+$enable-smooth-scroll: false !default;
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+$spacer: 1rem !default;
+
+$spacers: (
+ 0: 0,
+ 1: ($spacer * .25), // 3.5px
+ 2: ($spacer * .5), // 7px;
+ 3: ($spacer * .75), // 10.5px
+ 4: ($spacer * 1), // 14px
+ 5: ($spacer * 1.25), // 17.5px
+ 6: ($spacer * 1.5), // 21px
+ 7: ($spacer * 1.75), // 24.5px
+ 8: ($spacer * 2), // 28px
+ 9: ($spacer * 2.25), // 31.5px
+ 10: ($spacer * 2.5), // 35px
+ 11: ($spacer * 2.75), // 38.5px
+ 12: ($spacer * 3), // 42px
+ 13: ($spacer * 3.25), // 45.5px
+ 14: ($spacer * 3.5), // 49px
+ 15: ($spacer * 3.75), // 52.5px
+ 16: ($spacer * 4), // 55px
+ 17: ($spacer * 4.25), // 58.5px
+ 18: ($spacer * 4.5), // 62px
+ 19: ($spacer * 4.75), // 65.5px
+ 20: ($spacer * 5), // 69px
+);
+
+
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+$position-values: (
+ 0: 0,
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%
+) !default;
+
+
+// Body
+//
+// Settings for the `` element.
+$body-bg: $white !default;
+$body-bg-rgb: to-rgb($body-bg) !default;
+$body-bg-dark: #1e1e2d !default;
+$body-bg-rgb-dark: to-rgb($body-bg-dark) !default;
+$body-color: $gray-900 !default;
+$body-color-dark: $gray-900-dark !default;
+$body-text-align: null !default;
+
+
+// Links
+//
+// Style anchor elements.
+$link-color: $primary !default;
+$link-color-dark: $primary !default;
+$link-decoration: none !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: $primary-active !default;
+$link-hover-color-dark: $primary-active !default;
+$link-hover-decoration: none !default;
+
+
+// Paragraphs
+//
+// Style p element.
+$paragraph-margin-bottom: 1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ xxl: 1400px
+) !default;
+// scss-docs-end grid-breakpoints
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ xxl: 1320px
+) !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+$border-width: 1px !default;
+$border-color: $gray-200 !default;
+$border-color-dark: $gray-200-dark !default;
+$border-dashed-color: $gray-300 !default;
+$border-dashed-color-dark: $gray-300-dark !default;
+
+$border-widths: (
+ 0: 0,
+ 1: 1px,
+ 2: 2px,
+ 3: 3px,
+ 4: 4px,
+ 5: 5px
+) !default;
+
+// Border Radiues
+$border-radius: .475rem !default;
+$border-radius-sm: .425rem !default;
+$border-radius-lg: .625rem !default;
+$border-radius-xl: 1rem !default;
+$border-radius-2xl: 2rem !default;
+$border-radius-pill: 50rem !default;
+
+// Keenthemes hover states
+$component-hover-color: $primary !default;
+$component-hover-color-dark: $primary !default;
+$component-hover-bg: #F4F6FA !default;
+$component-hover-bg-dark: $gray-200-dark !default;
+
+// Keenthemes active states
+$component-active-color: $primary-inverse !default;
+$component-active-color-dark: $primary-inverse !default;
+$component-active-bg: $primary !default;
+$component-active-bg-dark: $primary !default;
+
+// Keenthemes checked states
+$component-checked-color: $primary-inverse !default;
+$component-checked-color-dark: $primary-inverse !default;
+$component-checked-bg: $primary !default;
+$component-checked-bg-dark: $primary !default;
+
+// Keenthemes custom transition settings
+$transition-link: color .2s ease !default;
+$transition-input: color .2s ease !default;
+
+// Box shadow
+$box-shadow-xs: 0 .1rem 0.75rem 0.25rem rgba($black, 0.05) !default;
+$box-shadow-xs-dark: 0 .1rem 0.75rem 0.25rem rgba($black, 0.05) !default;
+$box-shadow-sm: 0 .1rem 1rem 0.25rem rgba($black, .05) !default;
+$box-shadow-sm-dark: 0 .1rem 1rem 0.25rem rgba($black, .05) !default;
+$box-shadow: 0 .5rem 1.5rem 0.5rem rgba($black, .075) !default;
+$box-shadow-dark: 0 .5rem 1.5rem 0.5rem rgba($black, .075) !default;
+$box-shadow-lg: 0 1rem 2rem 1rem rgba($black, .1) !default;
+$box-shadow-lg-dark: 0 1rem 2rem 1rem rgba($black, .1) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
+$box-shadow-inset-dark: inset 0 1px 2px rgba($black, .075) !default;
+
+// Keenthemes custom gutter sizes
+$gutters: (
+ 0: 0rem,
+ 1: ($spacer * .25), // 3.5px
+ 2: ($spacer * .5), // 7px;
+ 3: ($spacer * .75), // 10.5px
+ 4: ($spacer * 1), // 14px
+ 5: ($spacer * 1.25), // 17.5px
+ 6: ($spacer * 1.5), // 21px
+ 7: ($spacer * 1.75), // 24.5px
+ 8: ($spacer * 2), // 28px
+ 9: ($spacer * 2.25), // 31.5px
+ 10: ($spacer * 2.5), // 35px
+) !default;
+
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+// Font family
+$font-family-sans-serif: Inter, Helvetica, "sans-serif" !default;
+
+$font-size-base: 1rem !default; // Assumes the browser default, typically `13px`
+$font-size-lg: $font-size-base * 1.075 !default; // 14.04px
+$font-size-sm: $font-size-base * .925 !default; // 12.025px
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-semibold: 500 !default;
+$font-weight-bold: 600 !default;
+$font-weight-bolder: 700 !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+// Line heights
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 1.75 !default;
+
+// Keenthemes custom line heights
+$line-height-xl: 2 !default;
+$line-height-xxl: 2.25 !default;
+
+// Heading sizes
+$h1-font-size: $font-size-base * 1.75 !default; // 22.75px
+$h2-font-size: $font-size-base * 1.5 !default; // 19.50px
+$h3-font-size: $font-size-base * 1.35 !default; // 17.55px
+$h4-font-size: $font-size-base * 1.25 !default; // 16.25px
+$h5-font-size: $font-size-base * 1.15 !default; // 14.95px
+$h6-font-size: $font-size-base * 1.075 !default; // 13.97px
+
+// Font Sizes
+$font-sizes: (
+ 1: $h1-font-size, // 22.75px
+ 2: $h2-font-size, // 19.50px
+ 3: $h3-font-size, // 17.55px
+ 4: $h4-font-size, // 16.25px
+ 5: $h5-font-size, // 14.95px
+ 6: $h6-font-size, // 13.95px
+
+ 7: $font-size-base * 0.95, // 12.35px
+ 8: $font-size-base * 0.85, // 11.05px
+ 9: $font-size-base * 0.75, // 9.75px
+ 10: $font-size-base * 0.5, // 6.50px
+
+ base: $font-size-base, // 13px
+ fluid: 100%, // 100%
+
+ 2x: $font-size-base * 2, // 26px
+ 2qx: $font-size-base * 2.25, // 29.25px
+ 2hx: $font-size-base * 2.5, // 32.5px
+ 2tx: $font-size-base * 2.75, // 35.75px
+
+ 3x: $font-size-base * 3, // 39px
+ 3qx: $font-size-base * 3.25, // 42.25px
+ 3hx: $font-size-base * 3.5, // 45.5px
+ 3tx: $font-size-base * 3.75, // 48.75px
+
+ 4x: $font-size-base * 4, // 52px
+ 4qx: $font-size-base * 4.25, // 55.25px
+ 4hx: $font-size-base * 4.5, // 58.5px
+ 4tx: $font-size-base * 4.75, // 61.75px
+
+ 5x: $font-size-base * 5, // 65px
+ 5qx: $font-size-base * 5.25, // 68.25px
+ 5hx: $font-size-base * 5.5, // 71.5px
+ 5tx: $font-size-base * 5.75 // 74.75px
+) !default;
+
+$headings-font-weight: 600 !default;
+$headings-color: $gray-900 !default;
+$headings-color-dark: $gray-900-dark !default;
+$headings-line-height: 1.2 !default;
+
+$display-font-sizes: (
+ 1: 5rem,
+ 2: 4.5rem,
+ 3: 4rem,
+ 4: 3.5rem,
+ 5: 3rem,
+ 6: 2.5rem
+) !default;
+
+$display-font-weight: $font-weight-bolder !default;
+$display-line-height: $headings-line-height !default;
+
+$blockquote-footer-color: $gray-600 !default;
+$blockquote-footer-color: $gray-600-dark !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding-y: .75rem !default;
+$table-cell-padding-x: .75rem !default;
+$table-cell-padding-y-sm: .5rem !default;
+$table-cell-padding-x-sm: .5rem !default;
+
+$table-color: $body-color !default;
+$table-color-dark: $body-color-dark !default;
+$table-bg: transparent !default;
+$table-bg-dark: transparent !default;
+$table-accent-bg: transparent !default;
+$table-accent-bg-dark: transparent !default;
+$table-striped-color: $table-color !default;
+$table-striped-color-dark: $table-color-dark !default;
+$table-striped-bg: rgba($gray-100, 0.75) !default;
+$table-striped-bg-dark: rgba($gray-100-dark, 0.75) !default;
+
+$table-active-color: $table-color !default;
+$table-active-color-dark: $table-color-dark !default;
+$table-active-bg: $gray-100 !default;
+$table-active-bg-dark: $gray-100-dark !default;
+
+$table-hover-color: $table-color !default;
+$table-hover-color-dark: $table-color-dark !default;
+$table-hover-bg: $gray-100 !default;
+$table-hover-bg-dark: $gray-100-dark !default;
+
+$table-border-factor: .1 !default;
+$table-border-width: $border-width !default;
+$table-border-color: $border-color !default;
+$table-border-color-dark: $border-color-dark !default;
+
+$table-caption-color: $text-muted !default;
+$table-caption-color-dark: $text-muted-dark !default;
+
+$table-loading-message-box-shadow: 0px 0px 50px 0px rgba(82,63,105, 0.15) !default;
+$table-loading-message-box-shadow-dark: 0px 0px 30px rgba(0, 0, 0, 0.3) !default;
+$table-loading-message-bg: $body-bg !default;
+$table-loading-message-bg-dark: $gray-200-dark !default;
+$table-loading-message-color: $gray-700 !default;
+$table-loading-message-color-dark: $gray-700-dark !default;
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+$input-btn-padding-y: .775rem !default;
+$input-btn-padding-x: 1rem !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base * 1.1 !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: .25rem !default;
+$input-btn-focus-color-opacity: .25 !default;
+$input-btn-focus-color-opacity-dark: .25 !default;
+$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
+$input-btn-focus-color-dark: rgba($component-active-bg-dark, $input-btn-focus-color-opacity-dark) !default;
+$input-btn-focus-box-shadow: null !default;
+$input-btn-focus-box-shadow-dark: null !default;
+
+$input-btn-padding-y-sm: .55rem !default;
+$input-btn-padding-x-sm: .75rem !default;
+$input-btn-font-size-sm: $font-size-sm !default;
+
+$input-btn-padding-y-lg: .825rem !default;
+$input-btn-padding-x-lg: 1.5rem !default;
+$input-btn-font-size-lg: $font-size-base * 1.15 !default;
+
+$input-btn-border-width: $border-width !default;
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: 1.5rem !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: 1.25rem !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: 1.75rem !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-semibold !default;
+$btn-box-shadow: null !default;
+$btn-box-shadow-dark: null !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: null !default;
+$btn-focus-box-shadow-dark: null !default;
+$btn-disabled-opacity: .65 !default;
+$btn-disabled-opacity-dark: .65 !default;
+$btn-active-box-shadow: null !default;
+$btn-active-box-shadow-dark: null !default;
+
+$btn-link-color: $link-color !default;
+$btn-link-color-dark: $link-color !default;
+$btn-link-hover-color: $link-hover-color !default;
+$btn-link-hover-color-dark: $link-hover-color !default;
+$btn-link-disabled-color: $gray-600 !default;
+$btn-link-disabled-color-dark: $gray-600-dark !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+
+
+// Forms
+$form-text-margin-top: .5rem !default;
+$form-text-font-size: $font-size-sm !default;
+$form-text-color: $text-muted !default;
+$form-text-color-dark: $text-muted-dark !default;
+
+$form-label-margin-bottom: .5rem !default;
+$form-label-font-size: 1.05rem !default;
+$form-label-font-weight: 500 !default;
+$form-label-color: $gray-800 !default;
+$form-label-color-dark: $gray-800-dark !default;
+
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-font-family: $input-btn-font-family !default;
+$input-font-size: $input-btn-font-size !default;
+$input-font-weight: $font-weight-semibold !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-bg: $body-bg !default;
+$input-bg-dark: $body-bg-dark !default;
+
+$input-border-width: $input-btn-border-width !default;
+$input-color: $gray-700 !default;
+$input-color-dark: $gray-700-dark !default;
+$input-border-color: $gray-300 !default;
+$input-border-color-dark: $gray-300-dark !default;
+//$input-box-shadow: none !default;
+//$input-box-shadow-dark: none !default;
+
+$input-border-radius: $btn-border-radius !default;
+$input-border-radius-sm: $btn-border-radius-sm !default;
+$input-border-radius-lg: $btn-border-radius-lg !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-bg-dark: $input-bg-dark !default;
+$input-focus-border-color: $gray-400 !default;
+$input-focus-border-color-dark: $gray-400-dark !default;
+$input-btn-focus-width: .25rem !default;
+$input-focus-color: $input-color !default;
+$input-focus-color-dark: $input-color-dark !default;
+$input-focus-width: $input-btn-focus-width !default;
+//$input-focus-box-shadow: none !default;
+//$input-focus-box-shadow-dark: none !default;
+
+$input-disabled-color: null !default;
+$input-disabled-color-dark: null !default;
+$input-disabled-bg: $gray-200 !default;
+$input-disabled-bg-dark: $gray-200-dark !default;
+$input-disabled-border-color: $input-border-color !default;
+$input-disabled-border-color-dark: $input-border-color-dark !default;
+
+$input-placeholder-color: $gray-500 !default;
+$input-placeholder-color-dark: $gray-500-dark !default;
+$input-plaintext-color: $gray-700 !default;
+$input-plaintext-color-dark: $gray-700-dark !default;
+
+// Keenthemes solid input style
+$input-solid-bg: $gray-100 !default;
+$input-solid-bg-dark: $gray-100-dark !default;
+$input-solid-bg-focus: darken($gray-100, 2%) !default;
+$input-solid-bg-focus-dark: lighten($gray-100-dark, 2%) !default;
+$input-solid-placeholder-color: $input-placeholder-color !default;
+$input-solid-placeholder-color-dark: $input-placeholder-color-dark !default;
+$input-solid-color: $gray-700 !default;
+$input-solid-color-dark: $gray-700-dark !default;
+
+// Form checks
+$form-check-input-width: 1.75rem !default;
+$form-check-input-width-sm: 1.55rem !default;
+$form-check-input-width-lg: 2.25rem !default;
+$form-check-input-bg-size: 60% 60% !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-padding-start: $form-check-input-width + .5rem !default;
+$form-check-padding-left: $form-check-input-width + .5rem !default;
+$form-check-margin-bottom: .125rem !default;
+$form-check-label-color: $gray-500 !default;
+$form-check-label-color-dark: $gray-500-dark !default;
+$form-check-label-color-checked: $gray-700 !default;
+$form-check-label-color-checked-dark: $gray-700-dark !default;
+$form-check-label-cursor: null !default;
+$form-check-transition: null !default;
+$form-check-inline-margin-right: 1rem !default;
+
+$form-check-input-active-filter: brightness(90%) !default;
+$form-check-input-active-filter-dark: brightness(90%) !default;
+
+$form-check-input-bg: transparent !default;
+$form-check-input-bg-dark: transparent !default;
+$form-check-input-bg-solid: $gray-200 !default;
+$form-check-input-bg-solid-dark: $gray-200-dark !default;
+$form-check-input-bg-solid: $gray-200 !default;
+$form-check-input-bg-solid-dark: $gray-200-dark !default;
+$form-check-input-border: 1px solid $input-border-color !default;
+$form-check-input-border-dark: 1px solid $input-border-color-dark !default;
+$form-check-input-border-radius: .45em !default;
+$form-check-radio-border-radius: 50% !default;
+$form-check-input-focus-border: $input-focus-border-color !default;
+$form-check-input-focus-border-dark: $input-focus-border-color-dark !default;
+$form-check-input-focus-box-shadow: none !default;
+$form-check-input-focus-box-shadow-dark: none !default;
+
+$form-check-input-checked-color: $component-checked-color !default;
+$form-check-input-checked-color-dark: $component-checked-color-dark !default;
+$form-check-input-checked-bg-color: $component-checked-bg !default;
+$form-check-input-checked-bg-color-solid: $component-checked-bg !default;
+$form-check-input-checked-bg-color-dark: $component-checked-bg-dark !default;
+$form-check-input-checked-bg-color-solid-dark: $component-checked-bg-dark !default;
+$form-check-input-checked-border-color: $component-checked-bg !default;
+$form-check-input-checked-border-color-dark: $component-checked-bg-dark !default;
+$form-check-input-checked-bg-image: url("data:image/svg+xml, ") !default;
+$form-check-input-checked-bg-image-dark: url("data:image/svg+xml, ") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml, ") !default;
+$form-check-radio-checked-bg-image-dark: url("data:image/svg+xml, ") !default;
+
+$form-check-input-indeterminate-color: $component-checked-color !default;
+$form-check-input-indeterminate-color-dark: $component-checked-color-dark !default;
+$form-check-input-indeterminate-bg-color: $component-checked-bg !default;
+$form-check-input-indeterminate-bg-color-dark: $component-checked-bg-dark !default;
+$form-check-input-indeterminate-border-color: $component-checked-bg !default;
+$form-check-input-indeterminate-border-color-dark: $component-checked-bg-dark !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml, ") !default;
+$form-check-input-indeterminate-bg-image-dark: url("data:image/svg+xml, ") !default;
+
+$form-check-input-disabled-opacity: .5 !default;
+$form-check-input-disabled-opacity-dark: .5 !default;
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
+$form-check-label-disabled-opacity-dark: $form-check-input-disabled-opacity-dark !default;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+$form-check-btn-check-disabled-opacity-dark: $btn-disabled-opacity-dark !default;
+
+$form-switch-color: rgba(0, 0, 0, .25) !default;
+$form-switch-color-dark: rgba(255, 255, 255, .25) !default;
+$form-switch-color-solid: $white !default;
+$form-switch-color-solid-dark: $gray-500 !default;
+$form-switch-width: 3.25rem !default;
+$form-switch-height: 2.25rem !default;
+$form-switch-width-sm: 2.5rem !default;
+$form-switch-height-sm: 1.5rem !default;
+$form-switch-width-lg: 3.75rem !default;
+$form-switch-height-lg: 2.75rem !default;
+
+$form-switch-padding-start: $form-switch-width + .5rem !default;
+$form-switch-padding-left: $form-switch-width + .5rem !default;
+$form-switch-bg-image: url("data:image/svg+xml, ") !default;
+$form-switch-bg-image-dark: url("data:image/svg+xml, ") !default;
+$form-switch-bg-image-solid: url("data:image/svg+xml, ") !default;
+$form-switch-bg-image-solid-dark: url("data:image/svg+xml, ") !default;
+$form-switch-border-radius: $form-switch-width !default;
+
+$form-switch-focus-color: $input-focus-border-color !default;
+$form-switch-focus-color-dark: $input-focus-border-color-dark !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml, ") !default;
+$form-switch-focus-bg-image-dark: url("data:image/svg+xml, ") !default;
+
+$form-switch-checked-color: $component-checked-color !default;
+$form-switch-checked-color-dark: $component-checked-color-dark !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml, ") !default;
+$form-switch-checked-bg-image-dark: url("data:image/svg+xml, ") !default;
+$form-switch-checked-bg-position: right center !default;
+
+
+// Input groups
+$input-group-addon-bg: $gray-100 !default;
+$input-group-addon-bg-dark: $gray-100-dark !default;
+$input-group-addon-color: $gray-700 !default;
+$input-group-addon-color-dark: $gray-700-dark !default;
+$input-group-addon-border-color: $input-border-color !default;
+$input-group-addon-border-color-dark: $input-border-color-dark !default;
+
+
+// Form select
+$form-select-color: $input-color !default;
+$form-select-color-dark: $input-color-dark !default;
+$form-select-bg: $input-bg !default;
+$form-select-bg-dark: $input-bg-dark !default;
+$form-select-disabled-color: null !default;
+$form-select-disabled-color-dark: null !default;
+$form-select-disabled-bg: $gray-200 !default;
+$form-select-disabled-bg-dark: $gray-200-dark !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-disabled-border-color-dark: $input-disabled-border-color-dark !default;
+$form-select-indicator-color: $gray-600 !default;
+$form-select-indicator-color-dark: $gray-600-dark !default;
+$form-select-indicator: url("data:image/svg+xml, ") !default;
+$form-select-indicator-dark: url("data:image/svg+xml, ") !default;
+$form-select-border-color: $input-border-color !default;
+$form-select-border-color-dark: $input-border-color-dark !default;
+$form-select-box-shadow: $box-shadow-inset !default;
+$form-select-box-shadow-dark: $box-shadow-inset-dark !default;
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-border-color-dark: $input-focus-border-color-dark !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+$form-select-focus-box-shadow-dark: 0 0 0 $form-select-focus-width $input-btn-focus-color-dark !default;
+
+
+// Form range
+$form-range-track-border-radius: $border-radius !default;
+$form-range-track-bg: var(--kt-gray-300) !default;
+$form-range-thumb-disabled-bg: var(--kt-gray-500) !default;
+
+
+// Form file button
+$form-file-button-color: $input-color !default;
+$form-file-button-color-dark: $input-color-dark !default;
+$form-file-button-bg: $input-group-addon-bg !default;
+$form-file-button-bg-dark: $input-group-addon-bg-dark !default;
+$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
+$form-file-button-hover-bg-dark: shade-color($form-file-button-bg-dark, 5%) !default;
+
+
+// Form floating
+$input-height-border: $input-border-width * 2 !default;
+$form-floating-height: calc(3.75rem + #{$input-height-border}) !default;
+$form-floating-input-padding-t: 1.85rem !default;
+
+
+// Navs
+$nav-link-transition: color .15s ease-in-out !default;
+
+$nav-tabs-border-color: $border-color !default;
+$nav-tabs-border-color-dark: $border-color-dark !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-hover-border-color-dark: $gray-200-dark $gray-200-dark $nav-tabs-border-color-dark !default;
+$nav-tabs-link-active-color: $gray-700 !default;
+$nav-tabs-link-active-color-dark: $gray-700-dark !default;
+$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-bg-dark: $body-bg-dark !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+$nav-tabs-link-active-border-color-dark: $gray-300-dark $gray-300-dark $nav-tabs-link-active-bg-dark !default;
+
+$nav-pills-link-active-color: $component-active-color !default;
+$nav-pills-link-active-color-dark: $component-active-color-dark !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
+$nav-pills-link-active-bg-dark: $component-active-bg-dark !default;
+
+
+// Dropdowns
+// Dropdown menu container and contents.
+$dropdown-color: $body-color !default;
+$dropdown-color-dark: $body-color-dark !default;
+$dropdown-bg: $body-bg !default;
+$dropdown-bg-dark: $body-bg-dark !default;
+$dropdown-divider-bg: $gray-100 !default;
+$dropdown-divider-bg-dark: $gray-100-dark !default;
+$dropdown-box-shadow: 0px 0px 50px 0px rgba(82,63,105, 0.15) !default;
+$dropdown-box-shadow-dark: 0px 0px 30px rgba(0, 0, 0, 0.3) !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: 0 !default;
+$dropdown-link-color: $gray-900 !default;
+$dropdown-link-color-dark: $gray-900-dark !default;
+$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
+$dropdown-link-hover-color-dark: shade-color($dropdown-link-color-dark, 10%) !default;
+$dropdown-link-hover-bg: $gray-200 !default;
+$dropdown-link-hover-bg-dark: $gray-200-dark !default;
+$dropdown-link-active-color: $component-active-color !default;
+$dropdown-link-active-color-dark: $component-active-color-dark !default;
+$dropdown-link-active-bg: $component-active-bg !default;
+$dropdown-link-active-bg-dark: $component-active-bg-dark !default;
+$dropdown-link-disabled-color: $gray-500 !default;
+$dropdown-link-disabled-color-dark: $gray-500-dark !default;
+$dropdown-header-color: $gray-600 !default;
+$dropdown-header-color-dark: $gray-600-dark !default;
+
+
+// Pagination
+$pagination-item-height: 2.5rem !default;
+$pagination-item-bg: $body-bg !default;
+$pagination-item-bg-dark: $body-bg-dark !default;
+$pagination-item-space: 0.5rem !default;
+$pagination-item-space-tablet-and-mobile: 0.25rem !default;
+$pagination-font-weight: $font-weight-semibold !default;
+$pagination-font-size: $font-size-lg !default;
+$pagination-icon-font-size: 0.85rem !default;
+$pagination-icon-height: $pagination-item-height * 0.35 !default;
+
+$pagination-padding-y: .375rem !default;
+$pagination-padding-x: .75rem !default;
+$pagination-padding-y-sm: .25rem !default;
+$pagination-padding-x-sm: .5rem !default;
+$pagination-padding-y-lg: .75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-color: $gray-700 !default;
+$pagination-color-dark: $gray-700-dark !default;
+$pagination-bg: transparent !default;
+$pagination-bg-dark: transparent !default;
+$pagination-border-width: 0 !default;
+$pagination-border-radius: $btn-border-radius !default;
+$pagination-margin-left: 0 !default;
+$pagination-border-color: transparent !default;
+$pagination-border-color-dark: transparent !default;
+
+$pagination-focus-color: $component-hover-color !default;
+$pagination-focus-color-dark: $component-hover-color-dark !default;
+$pagination-focus-bg: $component-hover-bg !default;
+$pagination-focus-bg-dark: $component-hover-bg-dark !default;
+$pagination-focus-box-shadow: none !default;
+$pagination-focus-box-shadow-dark: none !default;
+$pagination-focus-outline: 0 !default;
+$pagination-focus-outline-dark: 0 !default;
+
+$pagination-hover-color: $component-hover-color !default;
+$pagination-hover-color-dark: $component-hover-color-dark !default;
+$pagination-hover-bg: $component-hover-bg !default;
+$pagination-hover-bg-dark: $component-hover-bg-dark !default;
+$pagination-hover-border-color: transparent !default;
+$pagination-hover-border-color-dark: transparent !default;
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-color-dark: $component-active-color-dark !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-bg-dark: $component-active-bg-dark !default;
+$pagination-active-border-color: transparent !default;
+$pagination-active-border-color-dark: transparent !default;
+
+$pagination-disabled-color: $gray-400 !default;
+$pagination-disabled-color-dark: $gray-400-dark !default;
+$pagination-disabled-bg: transparent !default;
+$pagination-disabled-bg-dark: transparent !default;
+$pagination-disabled-border-color: transparent !default;
+$pagination-disabled-border-color-dark: transparent !default;
+
+
+// Card
+$card-bg: $body-bg !default;
+$card-bg-dark: $body-bg-dark !default;
+$card-box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.02) !default;
+$card-box-shadow-dark: none !default;
+$card-border-color: $border-color !default;
+$card-border-color-dark: $border-color-dark !default;
+$card-border-style: solid !default;
+$card-border-dashed-color: $border-dashed-color !default;
+$card-border-dashed-color-dark: $border-dashed-color-dark !default;
+$card-color: null !default;
+$card-color-dark: null !default;
+$card-cap-bg: transparent !default;
+$card-cap-bg-dark: transparent !default;
+$card-py: 2rem !default;
+$card-px: 2.25rem !default;
+$card-border-radius: $border-radius-lg !default;
+$card-header-py: 0.5rem !default;
+$card-header-height: 70px !default;
+$card-border-enabled: false !default;
+
+
+// Accordion
+$accordion-color: $body-color !default;
+$accordion-color-dark: $body-color-dark !default;
+$accordion-bg: $body-bg !default;
+$accordion-bg-dark: $body-bg-dark !default;
+$accordion-padding-y: 1.5rem !default;
+$accordion-padding-x: 1.5rem !default;
+$accordion-border-color: $border-color !default;
+$accordion-border-color-dark: $border-color-dark !default;
+$accordion-border-radius: $border-radius !default;
+$accordion-button-color: $accordion-color !default;
+$accordion-button-color-dark: $accordion-color-dark !default;
+$accordion-button-bg: $accordion-bg !default;
+$accordion-button-bg-dark: $accordion-bg-dark !default;
+$accordion-button-active-bg: $gray-100 !default;
+$accordion-button-active-bg-dark: $gray-100-dark !default;
+$accordion-button-active-color: $primary !default;
+$accordion-button-active-color-dark: $primary !default;
+
+$accordion-button-focus-border-color: $border-color !default;
+$accordion-button-focus-border-color-dark: $border-color-dark !default;
+$accordion-button-focus-box-shadow: none !default;
+$accordion-button-focus-box-shadow-dark: none !default;
+
+$accordion-icon-width: 1.15rem !default;
+$accordion-icon-color: $accordion-button-color !default;
+$accordion-icon-color-dark: $accordion-button-color-dark !default;
+$accordion-icon-active-color: $accordion-button-active-color !default;
+$accordion-icon-active-color-dark: $accordion-button-active-color-dark !default;
+$accordion-button-icon: url("data:image/svg+xml, ") !default;
+$accordion-button-icon-dark: url("data:image/svg+xml, ") !default;
+$accordion-button-active-icon: url("data:image/svg+xml, ") !default;
+$accordion-button-active-icon-dark: url("data:image/svg+xml, ") !default;
+
+
+// Tooltips
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: $gray-800 !default;
+$tooltip-color-dark: $gray-800-dark !default;
+$tooltip-bg: $body-bg !default;
+$tooltip-bg-dark: $gray-200-dark !default;
+$tooltip-border-radius: $btn-border-radius !default;
+$tooltip-opacity: 1 !default;
+$tooltip-opacity-dark: 1 !default;
+$tooltip-box-shadow: $dropdown-box-shadow !default;
+$tooltip-box-shadow-dark: $dropdown-box-shadow-dark !default;
+$tooltip-padding-y: .75rem !default;
+$tooltip-padding-x: 1rem !default;
+$tooltip-margin: 0 !default;
+
+
+// Popovers
+$popover-bg: $body-bg !default;
+$popover-bg-dark: $gray-200-dark !default;
+$popover-font-size: $font-size-base !default;
+$popover-border-color: $popover-bg !default;
+$popover-border-color-dark: $popover-bg-dark !default;
+$popover-border-radius: $border-radius !default;
+$popover-box-shadow: $dropdown-box-shadow !default;
+$popover-box-shadow-dark: $dropdown-box-shadow-dark !default;
+$popover-header-bg: $popover-bg !default;
+$popover-header-bg-dark: $popover-bg-dark !default;
+$popover-header-color: $gray-800 !default;
+$popover-header-color-dark: $gray-800-dark !default;
+$popover-header-font-weight: 500 !default;
+$popover-header-font-size: 1rem !default;
+$popover-header-padding-y: 1rem !default;
+$popover-header-padding-x: 1.25rem !default;
+$popover-header-border-color: $gray-200 !default;
+$popover-header-border-color-dark: $gray-300-dark !default;
+$popover-body-color: $gray-800 !default;
+$popover-body-color-dark: $gray-800-dark !default;
+$popover-body-padding-y: 1.25rem !default;
+$popover-body-padding-x: 1.25rem !default;
+
+$popover-dissmis-btn-height: 1.5rem !default;
+$popover-dissmis-btn-top: 0.85rem !default;
+$popover-dissmis-btn-end: 0.85rem !default;
+
+
+// Toasts
+$toast-color: null !default;
+$toast-color-dark: null !default;
+$toast-background-color: rgba($white, .85) !default;
+$toast-background-color-dark: rgba($black, .85) !default;
+$toast-box-shadow: $box-shadow !default;
+$toast-box-shadow-dark: $box-shadow-dark !default;
+$toast-header-color: $gray-600 !default;
+$toast-header-color-dark: $gray-600-dark !default;
+$toast-header-background-color: rgba($white, .85) !default;
+$toast-header-background-color-dark: rgba($black, .85) !default;
+$toast-header-border-color: rgba($black, .05) !default;
+$toast-header-border-color-dark: rgba($white, .05) !default;
+
+
+// Badges
+$badge-font-size: 0.85rem !default;
+$badge-font-size-sm: 0.8rem !default;
+$badge-font-size-lg: 1rem !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-color: $body-bg !default;
+$badge-color-dark: $body-bg-dark !default;
+$badge-padding-y: .325rem !default;
+$badge-padding-x: .5rem !default;
+$badge-border-radius: $border-radius-sm !default;
+$badge-size: 1.75rem !default;
+$badge-size-sm: 1.5rem !default;
+$badge-size-lg: 2rem !default;
+
+
+// Modals
+// Padding applied to the modal body
+$modal-inner-padding: 1.75rem !default;
+
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between: .5rem !default;
+
+$modal-dialog-margin: .5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-content-color: null !default;
+$modal-content-color-dark: null !default;
+$modal-content-bg: $body-bg !default;
+$modal-content-bg-dark: $body-bg-dark !default;
+$modal-content-border-color: null !default;
+$modal-content-border-color-dark: null !default;
+$modal-content-border-width: 0 !default;
+$modal-content-border-radius: $border-radius !default;
+$modal-content-inner-border-radius: $border-radius !default;
+$modal-content-box-shadow: 0 .25rem .5rem rgba($black, .05) !default;
+$modal-content-box-shadow-dark: 0 .25rem .5rem rgba($white, .05) !default;
+$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .1) !default;
+$modal-content-box-shadow-xs-dark: 0 .25rem .5rem rgba($white, .1) !default;
+$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .1) !default;
+$modal-content-box-shadow-sm-up-dark: 0 .5rem 1rem rgba($white, .1) !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-bg-dark: $black !default;
+$modal-backdrop-opacity: 0.3 !default;
+$modal-backdrop-opacity-dark: 0.4 !default;
+
+$modal-header-border-color: $border-color !default;
+$modal-header-border-color-dark: $border-color-dark !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-footer-border-color-dark: $modal-header-border-color-dark !default;
+$modal-header-border-width: 1px !default;
+
+
+// Progress bars
+$progress-height: 1rem !default;
+$progress-font-size: $font-size-base * .75 !default;
+$progress-bg: $gray-100 !default;
+$progress-bg-dark: $gray-100-dark !default;
+$progress-border-radius: 6px !default;
+$progress-box-shadow: none !default;
+$progress-box-shadow-dark: none !default;
+
+
+// List group
+$list-group-color: $gray-900 !default;
+$list-group-color-dark: $gray-900-dark !default;
+$list-group-bg: $white !default;
+$list-group-bg-dark: $black !default;
+$list-group-border-color: rgba($black, .125) !default;
+$list-group-border-color-dark: rgba($white, .125) !default;
+
+$list-group-hover-bg: $gray-100 !default;
+$list-group-hover-bg-dark: $gray-100 !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-color-dark: $component-active-color-dark !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-bg-dark: $component-active-bg-dark !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+$list-group-active-border-color-dark: $list-group-active-bg-dark !default;
+
+$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-color-dark: $gray-600-dark !default;
+$list-group-disabled-bg: $list-group-bg !default;
+$list-group-disabled-bg-dark: $list-group-bg-dark !default;
+
+$list-group-action-color: $gray-700 !default;
+$list-group-action-color-dark: $gray-700-dark !default;
+$list-group-action-hover-color: $list-group-action-color !default;
+$list-group-action-hover-color-dark: $list-group-action-color-dark !default;
+
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-color-dark: $body-color-dark !default;
+$list-group-action-active-bg: $gray-200 !default;
+$list-group-action-active-bg-dark: $gray-200-dark !default;
+
+
+// Image thumbnails
+$thumbnail-bg: $body-bg !default;
+$thumbnail-bg-dark: $body-bg-dark !default;
+$thumbnail-border-color: $border-color !default;
+$thumbnail-border-color-dark: $border-color-dark !default;
+$thumbnail-box-shadow: $box-shadow-sm !default;
+$thumbnail-box-shadow-dark: $box-shadow-sm-dark !default;
+
+
+// Figures
+$figure-caption-color: $gray-600 !default;
+$figure-caption-color-dark: $gray-600-dark !default;
+
+
+// Breadcrumbs
+$breadcrumb-bg: null !default;
+$breadcrumb-bg-dark: null !default;
+$breadcrumb-divider-color: $gray-600 !default;
+$breadcrumb-divider-color-dark: $gray-600-dark !default;
+$breadcrumb-active-color: $primary !default;
+$breadcrumb-active-color-dark: $primary !default;
+$breadcrumb-item-padding-x: .5rem !default;
+
+
+// Carousel
+$carousel-custom-indicator-transition-speed: 0.3s !default;
+$carousel-custom-indicator-default-bg-color: $gray-200 !default;
+$carousel-custom-indicator-default-bg-color-dark: $gray-200-dark !default;
+$carousel-custom-indicator-active-bg-color: $gray-400 !default;
+$carousel-custom-indicator-active-bg-color-dark: $gray-400-dark !default;
+
+$carousel-custom-dots-indicator-default-size: 9px !default;
+$carousel-custom-dots-indicator-active-size: 13px !default;
+
+$carousel-custom-bullet-indicator-default-size: 6px !default;
+$carousel-custom-bullet-indicator-active-width: 16px !default;
+$carousel-custom-bullet-indicator-default-bg-color: $gray-400 !default;
+$carousel-custom-bullet-indicator-default-bg-color-dark: $gray-400-dark !default;
+$carousel-custom-bullet-indicator-active-bg-color: $gray-600 !default;
+$carousel-custom-bullet-indicator-active-bg-color-dark: $gray-600-dark !default;
+
+
+// Spinners
+$spinner-border-width: .185rem !default;
+$spinner-animation-speed: .65s !default;
+$spinner-border-width-sm: .145em !default;
+
+
+// Close
+$btn-close-width: 0.75rem !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-color: $black !default;
+$btn-close-color-dark: $white !default;
+$btn-close-bg: url("data:image/svg+xml, ") !default;
+$btn-close-bg-dark: url("data:image/svg+xml, ") !default;
+$btn-close-focus-shadow: none !default;
+
+
+// Offcanvas
+$offcanvas-border-color: $modal-content-border-color !default;
+$offcanvas-border-color-dark: $modal-content-border-color-dark !default;
+$offcanvas-bg-color: $modal-content-bg !default;
+$offcanvas-bg-color-dark: $modal-content-bg-dark !default;
+$offcanvas-color: $modal-content-color !default;
+$offcanvas-color-dark: $modal-content-color-dark !default;
+$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-box-shadow-dark: $modal-content-box-shadow-xs-dark !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-bg-dark: $modal-backdrop-bg-dark !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
+$offcanvas-backdrop-opacity-dark: $modal-backdrop-opacity-dark !default;
+
+
+// Code
+$code-bg: #F1F3F8 !default;
+$code-bg-dark: $gray-200-dark !default;
+$code-box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08) !default;
+$code-box-shadow-dark: 0px 3px 9px rgba(0, 0, 0, 0.08) !default;
+$code-padding: 0.1rem 0.4rem !default;
+$code-margin: 0 0.5rem !default;
+$code-font-weight: 400 !default;
+$code-border-radius: 0.3rem !default;
+$code-color: #b93993 !default;
+$code-color-dark: #b93993 !default;
+$code-space: 0.25rem !default;
+
+// Opacity
+$opacity-values: (
+ 0: 0,
+ 5: .05,
+ 10: .1,
+ 15: .15,
+ 20: .20,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1,
+ ) !default;
+
+// Zindex
+$zindex-values: (
+ n1: -1,
+ n2: -2,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3
+) !default;
+
+// Letter spacing
+$letter-spacing-values: (
+ 1: 0.1rem,
+ 2: 0.115rem,
+ 3: 0.125rem,
+ 4: 0.25rem,
+ 5: 0.5rem,
+ n1: -0.1rem,
+ n2: -0.115rem,
+ n3: -0.125rem,
+ n4: -0.25rem,
+ n5: -0.5rem,
+) !default;
+
+// Keenthemes hight and width sizes
+$custom-sizes: (
+ unset: unset,
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%,
+ auto: auto,
+ 1px: 1px,
+ 2px: 2px,
+ 3px: 3px,
+ 4px: 4px,
+ 5px: 5px,
+ 6px: 6px,
+ 7px: 7px,
+ 8px: 8px,
+ 9px: 9px,
+ 10px: 10px,
+ 15px: 15px,
+ 20px: 20px,
+ 25px: 25px,
+ 30px: 30px,
+ 35px: 35px,
+ 40px: 40px,
+ 45px: 45px,
+ 50px: 50px,
+ 55px: 55px,
+ 60px: 60px,
+ 65px: 65px,
+ 70px: 70px,
+ 75px: 75px,
+ 80px: 80px,
+ 85px: 85px,
+ 90px: 90px,
+ 95px: 95px,
+ 100px: 100px,
+ 125px: 125px,
+ 150px: 150px,
+ 175px: 175px,
+ 200px: 200px,
+ 225px: 225px,
+ 250px: 250px,
+ 275px: 275px,
+ 300px: 300px,
+ 325px: 325px,
+ 350px: 350px,
+ 375px: 375px,
+ 400px: 400px,
+ 425px: 425px,
+ 450px: 450px,
+ 475px: 475px,
+ 500px: 500px,
+ 550px: 550px,
+ 600px: 600px,
+ 650px: 650px,
+ 700px: 700px,
+ 750px: 750px,
+ 800px: 800px,
+ 850px: 850px,
+ 900px: 900px,
+ 950px: 950px,
+ 1000px: 1000px
+) !default;
+
+
+// Keenthemes symbol component
+$symbol-sizes: (
+ 20px: 20px,
+ 25px: 25px,
+ 30px: 30px,
+ 35px: 35px,
+ 40px: 40px,
+ 45px: 45px,
+ default: 50px,
+ 50px: 50px,
+ 55px: 55px,
+ 60px: 60px,
+ 65px: 65px,
+ 70px: 70px,
+ 75px: 75px,
+ 90px: 90px,
+ 100px:100px,
+ 125px:125px,
+ 150px:150px,
+ 160px:160px,
+ 175px:175px,
+ 200px:200px
+) !default;
+
+$symbol-border-color: rgba($body-bg, 0.5);
+$symbol-border-color-dark: rgba($body-bg, 0.5);
+$symbol-label-color: $gray-800;
+$symbol-label-color-dark: $gray-800-dark;
+$symbol-label-bg: $gray-100;
+$symbol-label-bg-dark: $gray-100-dark;
+
+
+// Keenthemes bullet component
+$bullet-bg-color: $gray-400 !default;
+$bullet-bg-color-dark: $gray-400-dark !default;
+$bullet-dot-size: 4px !default;
+$bullet-bar-height: 4px !default;
+$bullet-bar-width: 8px !default;
+$bullet-bar-border-radius: 6px !default;
+$bullet-line-height: 1px !default;
+$bullet-line-width: 5px !default;
+
+
+// Keenthemes scrolltop component
+$scrolltop-z-index: 105 !default;
+$scrolltop-opacity: 0 !default;
+$scrolltop-opacity-dark: 0 !default;
+$scrolltop-opacity-on: 0.3 !default;
+$scrolltop-opacity-on-dark: 0.3 !default;
+$scrolltop-opacity-hover: 1 !default;
+$scrolltop-opacity-hover-dark: 1 !default;
+$scrolltop-bottom: 40px !default;
+$scrolltop-bottom-mobile: 30px !default;
+$scrolltop-end: 20px !default;
+$scrolltop-end-mobile: 15px !default;
+$scrolltop-size: 36px !default;
+$scrolltop-size-mobile: 30px !default;
+$scrolltop-box-shadow: $box-shadow !default;
+$scrolltop-box-shadow-dark: $box-shadow-dark !default;
+$scrolltop-bg-color: $primary !default;
+$scrolltop-bg-color-dark: $primary !default;
+$scrolltop-bg-color-hover: $primary !default;
+$scrolltop-bg-color-hover-dark: $primary !default;
+$scrolltop-icon-color: $primary-inverse !default;
+$scrolltop-icon-color-dark: $primary-inverse !default;
+$scrolltop-icon-color-hover: $primary-inverse !default;
+$scrolltop-icon-color-hover-dark: $primary-inverse !default;
+
+
+// Keenthemes sticky toolbar component
+$sticky-toolbar-z-index: 95 !default;
+
+
+// Keenthemes drawer component
+$drawer-z-index: 110 !default;
+$drawer-box-shadow: 0px 1px 9px -3px rgba(0,0,0, 0.05) !default;
+$drawer-box-shadow-dark: 0px 0px 30px rgba(0, 0, 0, 0.1) !default;
+$drawer-bg-color: $body-bg !default;
+$drawer-bg-color-dark: $body-bg-dark !default;
+$drawer-transition-speed: 0.3s !default;
+$drawer-overlay-bg-color: rgba($black, 0.2) !default;
+$drawer-overlay-bg-color-dark: rgba($black, 0.4) !default;
+$drawer-overlay-animation-speed: 0.3s !default;
+
+// Keenthemes menu component
+$menu-dropdown-box-shadow: $dropdown-box-shadow !default;
+$menu-dropdown-box-shadow-dark: $dropdown-box-shadow-dark !default;
+$menu-dropdown-z-index: 107 !default;
+$menu-dropdown-bg-color: $dropdown-bg !default;
+$menu-dropdown-bg-color-dark: $dropdown-bg-dark !default;
+$menu-dropdown-border-radius: $dropdown-border-radius !default;
+$menu-dropdown-animation: true !default;
+$menu-dropdown-animation-speed: 0.3s !default;
+$menu-dropdown-animation-move-offset: 0.75rem !default;
+$menu-accordion-indention: 1rem !default;
+$menu-accordion-arrow-transition: transform 0.3s ease !default;
+$menu-item-padding-y: 0.15rem !default;
+$menu-item-padding-x: 0 !default;
+$menu-link-padding-y: 0.65rem !default;
+$menu-link-padding-x: 1rem !default;
+$menu-link-border-radius: $border-radius !default;
+$menu-link-color-hover: $component-hover-color !default;
+$menu-link-color-hover-dark: $component-hover-color-dark !default;
+$menu-link-color-show: $component-hover-color !default;
+$menu-link-color-show-dark: $component-hover-color-dark !default;
+$menu-link-color-here: $component-hover-color !default;
+$menu-link-color-here-dark: $component-hover-color-dark !default;
+$menu-link-color-active: $component-hover-color !default;
+$menu-link-color-active-dark: $component-hover-color-dark !default;
+$menu-link-bg-color-hover: $component-hover-bg !default;
+$menu-link-bg-color-hover-dark: $component-hover-bg-dark !default;
+$menu-link-bg-color-show: $component-hover-bg !default;
+$menu-link-bg-color-show-dark: $component-hover-bg-dark !default;
+$menu-link-bg-color-here: $component-hover-bg !default;
+$menu-link-bg-color-here-dark: $component-hover-bg-dark !default;
+$menu-link-bg-color-active: $component-hover-bg !default;
+$menu-link-bg-color-active-dark: $component-hover-bg-dark !default;
+$menu-icon-size: 2rem !default;
+$menu-icon-space: 0.5rem !default;
+$menu-bullet-size: 1.25rem !default;
+$menu-bullet-space: 0.5rem !default;
+$menu-badge-space: 0.5rem !default;
+$menu-arrow-size: 9px !default;
+$menu-arrow-space: 5px !default;
+$menu-heading-color: $text-muted !default;
+$menu-heading-color-dark: $text-muted-dark !default;
+
+// Keenthemes feedback component
+$feedback-popup-z-index: 1000 !default;
+$feedback-popup-box-shadow: $dropdown-box-shadow !default;
+$feedback-popup-box-shadow-dark: $dropdown-box-shadow-dark !default;
+$feedback-popup-background-color: $body-bg !default;
+$feedback-popup-background-color-dark: $body-bg-dark !default;
+$feedback-popup-border-radius: $border-radius !default;
+$feedback-popup-transition-speed: 0.6s !default;
+$feedback-popup-padding: 1rem 1.25rem !default;
+
+// Keenthemes scrollbar component
+$scrollbar-space: 0.5rem !default;
+$scrollbar-border-radius: 0.5rem !default;
+$scrollbar-width: 0.4rem !default;
+$scrollbar-height: 0.4rem !default;
+$scrollbar-color: $gray-200 !default;
+$scrollbar-color-dark: $gray-200-dark !default;
+$scrollbar-hover-color: darken($gray-200, 2%) !default;
+$scrollbar-hover-color-dark: darken($gray-200-dark, 2%) !default;
+
+// Keenthemes overlay component
+$overlay-bg: rgba($black, 0.05) !default;
+$overlay-bg-dark: rgba($white, 0.05) !default;
+
+// Keenthemes blockui component
+$blockui-overlay-bg: rgba($black, 0.05) !default;
+$blockui-overlay-bg-dark: rgba($white, 0.05) !default;
+
+// Keenthemes rating component
+$rating-color-default: $gray-400 !default;
+$rating-color-default-dark: $gray-400-dark !default;
+$rating-color-active: #FFAD0F !default;
+$rating-color-active-dark: #FFAD0F !default;
+
+// Keenthemes ribbon component
+$ribbon-label-box-shadow: 0px -1px 5px 0px rgba($dark, 0.1) !default;
+$ribbon-label-box-shadow-dark: 0px -1px 5px 0px rgba($white, 0.1) !default;
+$ribbon-label-bg: $primary !default;
+$ribbon-label-bg-dark: $primary !default;
+$ribbon-label-border-color: darken($primary, 20%) !default;
+$ribbon-label-border-color-dark: darken($primary, 20%) !default;
+$ribbon-clip-bg: $dark !default;
+$ribbon-clip-bg-dark: $light !default;
+
+// Keenthemes fixed component
+$fixed-z-index: 101 !default;
+
+// Engage panel
+$engage-btn-bg: $body-bg;
+$engage-btn-bg-dark: $gray-200-dark;
+$engage-btn-color: $gray-600;
+$engage-btn-color-dark: $gray-600-dark;
+$engage-btn-color-active: $gray-800;
+$engage-btn-color-active-dark: $gray-800-dark;
+
+// Social Network Colors Used With Boostrap Buttons(see: https://brandcolors.net)
+$social-colors: (
+ facebook: (
+ base: #3b5998,
+ inverse: #ffffff,
+ light: rgba(#3b5998, 0.1),
+ active: darken(#3b5998, 7.5%)
+ ),
+ google: (
+ base: #dd4b39,
+ inverse: #ffffff,
+ light: rgba(#dd4b39, 0.1),
+ active: darken(#dd4b39, 7.5%)
+ ),
+ twitter: (
+ base: #1da1f2,
+ inverse: #ffffff,
+ light: rgba(#1da1f2, 0.1),
+ active: darken(#1da1f2, 7.5%)
+ ),
+ instagram: (
+ base: #e1306c,
+ inverse: #ffffff,
+ light: rgba(#e1306c, 0.1),
+ active: darken(#e1306c, 7.5%)
+ ),
+ youtube: (
+ base: #ff0000,
+ inverse: #ffffff,
+ light: rgba(#ff0000, 0.1),
+ active: darken(#ff0000, 7.5%)
+ ),
+ linkedin: (
+ base: #0077b5,
+ inverse: #ffffff,
+ light: rgba(#0077b5, 0.1),
+ active: darken(#0077b5, 7.5%)
+ )
+) !default;
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/buttons/_base.scss b/src/_metronic/assets/sass/core/components/buttons/_base.scss
new file mode 100644
index 0000000..30479d7
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/buttons/_base.scss
@@ -0,0 +1,132 @@
+//
+// Buttons Base
+//
+
+// Button
+.btn {
+ --#{$prefix}btn-color: var(--kt-body-color);
+ --#{$prefix}btn-bg: transparent;
+ --#{$prefix}btn-border-color: transparent;
+
+ // Reset outline
+ outline: none !important;
+
+ // Reset focus shadow
+ &:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):not(.shadow-xs) {
+ box-shadow: none !important;
+ }
+
+ // Remove border
+ &:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
+ border: 0;
+ padding: calc(#{$btn-padding-y} + #{$btn-border-width}) calc(#{$btn-padding-x} + #{$btn-border-width});
+
+ &.btn-lg {
+ padding: calc(#{$btn-padding-y-lg} + #{$btn-border-width}) calc(#{$btn-padding-x-lg} + #{$btn-border-width});
+ }
+
+ &.btn-sm {
+ padding: calc(#{$btn-padding-y-sm} + #{$btn-border-width}) calc(#{$btn-padding-x-sm} + #{$btn-border-width});
+ }
+ }
+
+ // Link
+ &.btn-link {
+ border: 0;
+ border-radius: 0;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ text-decoration: none;
+ font-weight: $btn-font-weight;
+ }
+
+ // Outline
+ &.btn-outline:not(.btn-outline-dashed) {
+ border: 1px solid var(--kt-input-border-color);
+ }
+
+ // Outline dashed
+ &.btn-outline-dashed {
+ border: 1px dashed var(--kt-input-border-color);
+ }
+
+ // Flush
+ &.btn-flush {
+ @include button-reset();
+ }
+
+ // Flex
+ &.btn-flex {
+ display: inline-flex;
+ align-items: center;
+ }
+
+ // Align start
+ &.btn-trim-start {
+ justify-content: flex-start !important;
+ padding-left: 0 !important;
+ }
+
+ // Align start
+ &.btn-trim-end {
+ justify-content: flex-end !important;
+ padding-right: 0 !important;
+ }
+}
+
+// Icons
+.btn {
+ // Font icon
+ i {
+ display: inline-flex;
+ font-size: $font-size-base;
+ padding-right: 0.35rem;
+ vertical-align: middle;
+ line-height: 0;
+ }
+
+ // Svg icon
+ .svg-icon {
+ flex-shrink: 0;
+ line-height: 0;
+ margin-right: 0.5rem;
+ }
+
+ // Icon only button
+ &.btn-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ height: $input-height;
+ width: $input-height;
+
+ // Remove border
+ &:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush) {
+ border: 0;
+ }
+
+ // Sizes
+ &.btn-sm {
+ height: $input-height-sm;
+ width: $input-height-sm;
+
+ }
+
+ &.btn-lg {
+ height: $input-height-lg;
+ width: $input-height-lg;
+ }
+
+ &.btn-circle {
+ border-radius: 50%;
+ }
+
+ i,
+ .svg-icon {
+ padding: 0;
+ margin: 0;
+ line-height: 1;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/buttons/_theme.scss b/src/_metronic/assets/sass/core/components/buttons/_theme.scss
new file mode 100644
index 0000000..3f1d75a
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/buttons/_theme.scss
@@ -0,0 +1,244 @@
+//
+// Buttons Theme
+//
+
+// Outline dashed basic style
+.btn.btn-outline.btn-outline-dashed {
+ border-width: 1px;
+ border-style: dashed;
+
+ $color: null;
+ $icon-color: null;
+ $border-color: null;
+ $bg-color: null;;
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: var(--kt-primary);
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+}
+
+// Theme colors
+@each $name, $value in $theme-colors {
+ // Base
+ .btn.btn-#{$name} {
+ $color: var(--kt-#{$name}-inverse);
+ $icon-color: var(--kt-#{$name}-inverse);
+ $border-color: var(--kt-#{$name});
+ $bg-color: var(--kt-#{$name});
+
+ $color-active: var(--kt-#{$name}-inverse);
+ $icon-color-active: var(--kt-#{$name}-inverse);
+ $border-color-active: var(--kt-#{$name}-active);
+ $bg-color-active: var(--kt-#{$name}-active);
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Light
+ @if ( theme-light-color($name) ) {
+ .btn.btn-light-#{$name} {
+ $color: var(--kt-#{$name});
+ $icon-color: var(--kt-#{$name});
+ $border-color: var(--kt-#{$name}-light);
+ $bg-color: var(--kt-#{$name}-light);
+
+ $color-active: var(--kt-#{$name}-inverse);
+ $icon-color-active: var(--kt-#{$name}-inverse);
+ $border-color-active: var(--kt-#{$name});
+ $bg-color-active: var(--kt-#{$name});
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+ }
+
+ // Background
+ .btn.btn-bg-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $border-color: var(--kt-#{$name});
+ $bg-color: var(--kt-#{$name});
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Active
+ .btn.btn-active-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $border-color: null;
+ $bg-color: null;
+
+ $color-active: var(--kt-#{$name}-inverse);
+ $icon-color-active: var(--kt-#{$name}-inverse);
+ $border-color-active: var(--kt-#{$name});
+ $bg-color-active: var(--kt-#{$name});
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Light
+ @if ( theme-light-color($name) ) {
+ .btn.btn-active-light-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $border-color: null;
+ $bg-color: null;
+
+ $color-active: var(--kt-#{$name});
+ $icon-color-active: var(--kt-#{$name});
+ $border-color-active: var(--kt-#{$name}-light);
+ $bg-color-active: var(--kt-#{$name}-light);
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+ }
+
+ // Outline
+ .btn.btn-outline.btn-outline-#{$name} {
+ $color: var(--kt-#{$name});
+ $icon-color: var(--kt-#{$name});
+ $border-color: var(--kt-#{$name});
+ $bg-color: transparent;
+
+ $color-active: var(--kt-#{$name}-active);
+ $icon-color-active: var(--kt-#{$name}-active);
+ $border-color-active: var(--kt-#{$name});
+ $bg-color-active: var(--kt-#{$name}-light);
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+}
+
+// Theme text colors
+@each $name, $value in $theme-text-colors {
+ // Text and icon colors
+ .btn.btn-color-#{$name} {
+ $color: var(--kt-text-#{$name});
+ $icon-color: var(--kt-text-#{$name});
+ $bg-color: null;
+ $border-color: null;
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Text and icon colors active state
+ .btn.btn-active-color-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $border-color: null;
+ $bg-color: null;
+
+ $color-active: var(--kt-text-#{$name});
+ $icon-color-active: var(--kt-text-#{$name});
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Icon colors
+ .btn.btn-icon-#{$name} {
+ $color: null;
+ $icon-color: var(--kt-text-#{$name});
+ $bg-color: null;
+ $border-color: null;
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Icon colors active state
+ .btn.btn-active-icon-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $bg-color: null;
+ $border-color: null;
+
+ $color-active: null;
+ $icon-color-active: var(--kt-text-#{$name});
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Text colors
+ .btn.btn-text-#{$name} {
+ $color: var(--kt-text-#{$name});
+ $icon-color: null;
+ $bg-color: null;
+ $border-color: null;
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Text colors active state
+ .btn.btn-active-text-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $bg-color: null;
+ $border-color: null;
+
+ $color-active: var(--kt-text-#{$name});
+ $icon-color-active: null;
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+}
+
+// Social colors
+@each $name, $value in $social-colors {
+ // Base
+ .btn.btn-#{$name} {
+ $color: get($value, inverse);
+ $icon-color: get($value, inverse);
+ $border-color: get($value, base);
+ $bg-color: get($value, base);
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: get($value, active);
+ $bg-color-active: get($value, active);
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Light
+ .btn.btn-light-#{$name} {
+ $color: get($value, base);
+ $icon-color: get($value, base);
+ $bg-color: get($value, light);
+ $border-color: get($value, light);
+
+ $color-active: get($value, inverse);
+ $icon-color-active: get($value, inverse);
+ $bg-color-active: get($value, base);
+ $border-color-active: get($value, base);
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/components.scss b/src/_metronic/assets/sass/core/components/components.scss
new file mode 100644
index 0000000..64e382f
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/components.scss
@@ -0,0 +1,107 @@
+//
+// Components
+//
+
+// Bootstrap components
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/accordion";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/offcanvas";
+@import "~bootstrap/scss/placeholders";
+
+// Bootstrap helpers
+@import "~bootstrap/scss/helpers";
+
+// Bootstrap utilities
+@import "utilities";
+@import "~bootstrap/scss/utilities/api";
+
+// Custom components
+@import "root";
+@import "root-bs";
+@import "reboot";
+@import "type";
+@import "theme-mode";
+@import "animation";
+@import "alert";
+@import "list-group";
+@import "images";
+@import "button-group";
+@import "dropdown";
+@import "toasts";
+@import "close";
+@import "offcanvas";
+@import "nav";
+@import "nav-line-tabs";
+@import "nav-pills-custom";
+@import "pagination";
+@import "separator";
+@import "carousel";
+@import "menu";
+@import "anchor";
+@import "card";
+@import "breadcrumb";
+@import "buttons";
+@import "code";
+@import "forms";
+@import "modal";
+@import "progress";
+@import "tables";
+@import "popover";
+@import "tooltip";
+@import "accordion";
+@import "feedback";
+@import "image-input";
+@import "symbol";
+@import "pulse";
+@import "page-loader";
+@import "scrolltop";
+@import "svg-icon";
+@import "fixed";
+@import "timeline";
+@import "timeline-label";
+@import "overlay";
+@import "bullet";
+@import "drawer";
+@import "badge";
+@import "indicator";
+@import "hover";
+@import "rotate";
+@import "scroll";
+@import "rating";
+@import "stepper";
+@import "toggle";
+@import "shape";
+@import "ribbon";
+@import "blockui";
+@import "explore";
+@import "engage";
+@import "cookiealert";
+@import "print";
+@import "helpers";
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/forms/_floating-labels.scss b/src/_metronic/assets/sass/core/components/forms/_floating-labels.scss
new file mode 100644
index 0000000..3c9d596
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_floating-labels.scss
@@ -0,0 +1,12 @@
+//
+// Floating label
+//
+
+.form-floating {
+ .form-control.form-control-solid {
+ &::placeholder {
+ color: transparent;
+ }
+ }
+}
+
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/forms/_form-check-solid.scss b/src/_metronic/assets/sass/core/components/forms/_form-check-solid.scss
new file mode 100644
index 0000000..c5d7088
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_form-check-solid.scss
@@ -0,0 +1,239 @@
+//
+// Form Check
+//
+
+// Check input
+.form-check:not(.form-switch) {
+ .form-check-input {
+ &[type="checkbox"] {
+ background-size: $form-check-input-bg-size;
+ }
+ }
+}
+
+// Custom checkbox and radio
+.form-check-custom {
+ display: flex;
+ align-items: center;
+ padding-left: 0;
+ margin: 0;
+
+ // Input
+ .form-check-input {
+ margin: 0;
+ float: none;
+ flex-shrink: 0;
+ }
+
+ // Label
+ .form-check-label {
+ margin-left: 0.55rem;
+ }
+
+ // Sizing
+ &.form-check-sm {
+ .form-check-input {
+ height: $form-check-input-width-sm;
+ width: $form-check-input-width-sm;
+ }
+ }
+
+ &.form-check-lg {
+ .form-check-input {
+ height: $form-check-input-width-lg;
+ width: $form-check-input-width-lg;
+ }
+ }
+
+ // Solid
+ &.form-check-solid {
+ .form-check-input {
+ border: 0;
+ background-color: var(--kt-form-check-input-bg-solid);
+
+ &:active,
+ &:focus {
+ filter: none;
+ background-color: var(--kt-form-check-input-bg-solid);
+ }
+
+ &:checked {
+ background-color: var(--kt-form-check-input-checked-bg-color-solid);
+ }
+ }
+ }
+
+ // States
+ // Success state
+ &.form-check-success {
+ .form-check-input {
+ &:checked {
+ background-color: var(--kt-success);
+ }
+ }
+ }
+
+ // Danger state
+ &.form-check-danger {
+ .form-check-input {
+ &:checked {
+ background-color: var(--kt-danger);
+ }
+ }
+ }
+
+ // Warning state
+ &.form-check-warning {
+ .form-check-input {
+ &:checked {
+ background-color: var(--kt-warning);
+ }
+ }
+ }
+}
+
+// Custom switch
+.form-switch.form-check-solid {
+ .form-check-input {
+ height: $form-switch-height;
+ background-image: var(--kt-form-switch-bg-image-solid);
+ border-radius: $form-switch-border-radius;
+
+ &:checked {
+ filter: none;
+ background-image: var(--kt-form-switch-checked-bg-image);
+ }
+ }
+
+ &.form-switch-sm {
+ .form-check-input {
+ height: $form-switch-height-sm;
+ width: $form-switch-width-sm;
+ }
+ }
+
+ &.form-switch-lg {
+ .form-check-input {
+ height: $form-switch-height-lg;
+ width: $form-switch-width-lg;
+ }
+ }
+}
+
+// Clip
+.form-check-clip {
+ position: relative;
+ overflow: hidden;
+
+ .form-check-label {
+ padding-top: 0.5rem;
+ font-size: $form-label-font-size;
+ color: var(--kt-form-label-color);
+ font-weight: $form-label-font-weight;
+ }
+
+ .form-check-wrapper {
+ @include border-radius($border-radius-lg);
+ border: 2px solid transparent;
+ transition: $transition-base;
+ cursor: pointer;
+ overflow: hidden;
+ }
+
+ .form-check-indicator {
+ transition: $transition-base;
+ position: absolute;
+ top: 0;
+ right: 0;
+ opacity: 0;
+ width: $form-check-input-width;
+ height: $form-check-input-width;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ background-size: 50%;
+ background-image: var(--kt-form-check-input-checked-bg-image);
+ background-color: var(--kt-component-checked-bg);
+ @include border-bottom-start-radius($border-radius-lg);
+ @include border-top-end-radius($border-radius-lg);
+
+ &.form-check-indicator-sm {
+ width: $form-check-input-width-sm;
+ height: $form-check-input-width-sm;
+ }
+
+ &.form-check-indicator-lg {
+ width: $form-check-input-width-lg;
+ height: $form-check-input-width-lg;
+ }
+ }
+
+ .form-check-content {
+ width: 100%;
+ }
+
+ .btn-check:checked + div {
+ border: 2px solid var(--kt-component-checked-bg);
+ transition: $transition-base;
+
+ .form-check-indicator {
+ transition: $transition-base;
+ opacity: 1;
+ }
+ }
+
+ .btn-check:disabled + div {
+ transition: $transition-base;
+ opacity: var(--kt-form-check-btn-check-disabled-opacity);
+ }
+}
+
+// Image
+.form-check-image {
+ position: relative;
+ overflow: hidden;
+
+ img {
+ max-width: 100%;
+ }
+
+ .form-check-wrapper {
+ @include border-radius($border-radius-lg);
+ border: 2px solid transparent;
+ transition: $transition-base;
+ cursor: pointer;
+ overflow: hidden;
+ margin-bottom: 0.75rem;
+ }
+
+ .form-check-rounded {
+ @include border-radius($border-radius-lg);
+ }
+
+ .form-check-label {
+ font-weight: $font-weight-bold;
+ margin-left: 0.5rem;
+ }
+
+ &.active {
+ .form-check-wrapper {
+ border-color: var(--kt-primary);
+ }
+ }
+
+ &.form-check-success.active {
+ .form-check-wrapper {
+ border-color: var(--kt-success);
+ }
+ }
+
+ &.form-check-danger.active {
+ .form-check-wrapper {
+ border-color: var(--kt-danger);
+ }
+ }
+
+ &.disabled {
+ opacity: var(--kt-form-check-btn-check-disabled-opacity);
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/forms/_form-check.scss b/src/_metronic/assets/sass/core/components/forms/_form-check.scss
new file mode 100644
index 0000000..191fbd7
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_form-check.scss
@@ -0,0 +1,106 @@
+//
+// Check/radio
+//
+
+.form-check-input {
+ background-color: var(--kt-form-check-input-bg);
+ border: var(--kt-form-check-input-border);
+
+ &:active {
+ filter: var(--kt-form-check-input-active-filter);
+ }
+
+ &:focus {
+ border-color: var(--kt-form-check-input-focus-border);
+ box-shadow: var(--kt-form-check-input-focus-box-shadow);
+ }
+
+ &:checked {
+ background-color: var(--kt-form-check-input-checked-bg-color);
+ border-color: var(--kt-form-check-input-checked-border-color);
+
+ &[type="checkbox"] {
+ @if $enable-gradients {
+ background-image: var(--kt-form-check-input-checked-bg-image), var(--#{$prefix}gradient);
+ } @else {
+ background-image: var(--kt-form-check-input-checked-bg-image);
+ }
+ }
+
+ &[type="radio"] {
+ @if $enable-gradients {
+ background-image: var(--kt-form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
+ } @else {
+ background-image: var(--kt-form-check-radio-checked-bg-image);
+ }
+ }
+ }
+
+ &[type="checkbox"]:indeterminate {
+ background-color: var(--kt-form-check-input-indeterminate-bg-color);
+ border-color: var(--kt-form-check-input-indeterminate-border-color);
+
+ @if $enable-gradients {
+ background-image: var(--kt-form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
+ } @else {
+ background-image:var(--kt-form-check-input-indeterminate-bg-image);
+ }
+ }
+
+ &:disabled {
+ opacity: var(--kt-form-check-input-disabled-opacity);
+ }
+
+ // Use disabled attribute in addition of :disabled pseudo-class
+ // See: https://github.com/twbs/bootstrap/issues/28247
+ &[disabled],
+ &:disabled {
+ ~ .form-check-label {
+ opacity: var(--kt-form-check-label-disabled-opacity);
+ }
+ }
+}
+
+.form-check-label {
+ color: var(--kt-form-check-label-color);
+}
+
+.form-check-input {
+ &:checked {
+ & + span,
+ & + label {
+ color: var(--kt-form-check-label-color-checked);
+ }
+ }
+}
+
+//
+// Switch
+//
+
+.form-switch {
+ .form-check-input {
+ background-image: var(--kt-form-switch-bg-image);
+
+ &:focus {
+ background-image: var(--kt-form-switch-focus-bg-image);
+ }
+
+ &:checked {
+ @if $enable-gradients {
+ background-image: var(--kt-form-switch-checked-bg-image), var(--#{$prefix}gradient);
+ } @else {
+ background-image: var(--kt-form-switch-checked-bg-image);
+ }
+ }
+ }
+}
+
+.btn-check {
+ &[disabled],
+ &:disabled {
+ + .btn {
+ opacity: var(--kt-form-check-btn-check-disabled-opacity);
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/forms/_form-control-solid.scss b/src/_metronic/assets/sass/core/components/forms/_form-control-solid.scss
new file mode 100644
index 0000000..84b021a
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_form-control-solid.scss
@@ -0,0 +1,78 @@
+//
+// Form Control
+//
+
+
+// Form control
+.form-control {
+ // Dropdown shown state
+ .dropdown.show > & {
+ color: var(--kt-input-focus-color);
+ background-color: var(--kt-input-focus-bg);
+ border-color: var(--kt-input-focus-border-color);
+ }
+
+ // Readonly state
+ &[readonly] {
+ background-color: var(--kt-input-readonly-bg);
+ }
+
+ // Solid style
+ &.form-control-solid {
+ background-color: var(--kt-input-solid-bg);
+ border-color: var(--kt-input-solid-bg);
+ color: var(--kt-input-solid-color);
+ @include placeholder(var(--kt-input-solid-placeholder-color));
+ transition: $transition-input;
+
+ .dropdown.show > &,
+ &:active,
+ &.active,
+ &:focus,
+ &.focus {
+ background-color: var(--kt-input-solid-bg-focus);
+ border-color: var(--kt-input-solid-bg-focus);
+ color: var(--kt-input-solid-color);
+ transition: $transition-input;
+ }
+ }
+
+ // Transparent style
+ &.form-control-transparent {
+ background-color: transparent;
+ border-color: transparent;
+
+ .dropdown.show > &,
+ &:active,
+ &.active,
+ &:focus,
+ &.focus {
+ background-color: transparent;
+ border-color: transparent;
+ }
+ }
+
+ // Flush
+ &.form-control-flush {
+ @include input-reset();
+ }
+}
+
+// Placeholder colors
+.placeholder-gray-500 {
+ @include placeholder(var(--kt-gray-500));
+}
+
+.placeholder-white {
+ @include placeholder($white);
+}
+
+// Textarea reset resize
+.resize-none {
+ resize: none;
+}
+
+// Form control solid bg
+.form-control-solid-bg {
+ background-color: var(--kt-input-solid-bg);
+}
diff --git a/src/_metronic/assets/sass/core/components/forms/_form-control.scss b/src/_metronic/assets/sass/core/components/forms/_form-control.scss
new file mode 100644
index 0000000..9ae50d4
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_form-control.scss
@@ -0,0 +1,46 @@
+//
+// Form controls
+//
+
+.form-control {
+ color: var(--kt-input-color);
+ background-color: var(--kt-input-bg);
+ border: $input-border-width solid var(--kt-input-border-color);
+ box-shadow: none !important;
+ //@include box-shadow(var(--kt-input-box-shadow));
+
+ &:focus {
+ color: var(--kt-input-focus-color);
+ background-color: var(--kt-input-focus-bg);
+ border-color: var(--kt-input-focus-border-color);
+ //box-shadow: var(--kt-input-focus-box-shadow);
+ }
+
+ // Placeholder
+ &::placeholder {
+ color: var(--kt-input-placeholder-color);
+ }
+
+ // Disabled and read-only inputs
+ &:disabled,
+ &[readonly] {
+ color: var(--kt-input-disabled-color);
+ background-color: var(--kt-input-disabled-bg);
+ border-color: var(--kt-input-disabled-border-color);
+ }
+
+ // File input buttons theming
+ &::file-selector-button {
+ color: var(--kt-form-file-button-color);
+ @include gradient-bg(var(--kt-form-file-button-bg));
+ }
+
+ &:hover:not(:disabled):not([readonly])::file-selector-button {
+ background-color: var(--kt-form-file-button-hover-bg);
+ }
+}
+
+// Readonly controls as plain text
+.form-control-plaintext {
+ color: var(--kt-input-plaintext-color);
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/forms/_form-select-solid.scss b/src/_metronic/assets/sass/core/components/forms/_form-select-solid.scss
new file mode 100644
index 0000000..f53bb93
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_form-select-solid.scss
@@ -0,0 +1,45 @@
+//
+// Form Select
+//
+
+.form-select {
+ box-shadow: none !important;
+
+ // Solid style
+ &.form-select-solid {
+ @include placeholder(var(--kt-input-solid-placeholder-color));
+ background-color: var(--kt-input-solid-bg);
+ border-color: var(--kt-input-solid-bg);
+ color: var(--kt-input-solid-color);
+ transition: $transition-input;
+
+ .dropdown.show > &,
+ &:active,
+ &.active,
+ &:focus,
+ &.focus {
+ background-color: var(--kt-input-solid-bg-focus);
+ border-color: var(--kt-input-solid-bg-focus) !important;
+ color: var(--kt-input-solid-color);
+ transition: $transition-input;
+ }
+ }
+
+ // Transparent style
+ &.form-select-transparent {
+ @include placeholder(var(--kt-input-placeholder-color));
+ background-color: transparent;
+ border-color: transparent;
+ color: $input-color;
+
+ .dropdown.show > &,
+ &:active,
+ &.active,
+ &:focus,
+ &.focus {
+ background-color: transparent;
+ border-color: transparent !important;
+ color: $input-color;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/forms/_form-select.scss b/src/_metronic/assets/sass/core/components/forms/_form-select.scss
new file mode 100644
index 0000000..07a2e10
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_form-select.scss
@@ -0,0 +1,35 @@
+// Select
+//
+// Replaces the browser default select with a custom one, mostly pulled from
+// https://primer.github.io/.
+
+.form-select {
+ color: var(--kt-form-select-color);
+ background-color: var(--kt-form-select-bg);
+ background-image: var(--kt-form-select-indicator);
+ border: $form-select-border-width solid var(--kt-form-select-border-color);
+ @include box-shadow(var(--kt-form-select-box-shadow));
+ appearance: none;
+
+ &:focus {
+ border-color: var(--kt-form-select-focus-border-color);
+ @if $enable-shadows {
+ @include box-shadow(var(--kt-form-select-box-shadow), var(--kt-form-select-focus-box-shadow));
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: var(--kt-form-select-focus-box-shadow);
+ }
+ }
+
+
+ &:disabled {
+ color: var(--kt-form-select-disabled-color);
+ background-color: var(--kt-form-select-disabled-bg);
+ border-color: var(--kt-form-select-disabled-border-color);
+ }
+
+ // Remove outline from select box in FF
+ &:-moz-focusring {
+ text-shadow: 0 0 0 var(--kt-form-select-color);
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/forms/_form-text.scss b/src/_metronic/assets/sass/core/components/forms/_form-text.scss
new file mode 100644
index 0000000..94cd819
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_form-text.scss
@@ -0,0 +1,7 @@
+//
+// Form text
+//
+
+.form-text {
+ color: var(--kt-form-text-color);
+}
diff --git a/src/_metronic/assets/sass/core/components/forms/_input-group-solid.scss b/src/_metronic/assets/sass/core/components/forms/_input-group-solid.scss
new file mode 100644
index 0000000..46d6e32
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_input-group-solid.scss
@@ -0,0 +1,36 @@
+//
+// Input Group
+//
+
+// Form control
+.input-group {
+ &.input-group-solid {
+ @include border-radius($input-border-radius);
+
+ &.input-group-sm {
+ @include border-radius($input-border-radius-sm);
+ }
+
+ &.input-group-lg {
+ @include border-radius($input-border-radius-lg);
+ }
+
+ .input-group-text {
+ background-color: var(--kt-input-solid-bg);
+ border-color: var(--kt-input-solid-bg);
+
+ & + .form-control {
+ border-left-color: var(--kt-input-border-color);
+ }
+ }
+
+ .form-control {
+ background-color: var(--kt-input-solid-bg);
+ border-color: var(--kt-input-solid-bg);
+
+ & + .input-group-text {
+ border-left-color: var(--kt-input-border-color);
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/forms/_input-group.scss b/src/_metronic/assets/sass/core/components/forms/_input-group.scss
new file mode 100644
index 0000000..ee05d35
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_input-group.scss
@@ -0,0 +1,9 @@
+//
+// Input group
+//
+
+.input-group-text {
+ color: var(--kt-input-group-addon-color);
+ background-color: var(--kt-input-group-addon-bg);
+ border: $input-border-width solid var(--kt-input-group-addon-border-color);
+}
diff --git a/src/_metronic/assets/sass/core/components/forms/_labels.scss b/src/_metronic/assets/sass/core/components/forms/_labels.scss
new file mode 100644
index 0000000..c6091c6
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_labels.scss
@@ -0,0 +1,13 @@
+//
+// Labels
+//
+
+.form-label {
+ color: var(--kt-form-label-color);
+}
+
+// For use with horizontal and inline forms, when you need the label (or legend)
+// text to align with the form controls.
+.col-form-label {
+ color: var(--kt-form-label-color);
+}
diff --git a/src/_metronic/assets/sass/core/components/forms/_required.scss b/src/_metronic/assets/sass/core/components/forms/_required.scss
new file mode 100644
index 0000000..effaf53
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/forms/_required.scss
@@ -0,0 +1,14 @@
+//
+// Required Label
+//
+
+.required {
+ &:after {
+ content: "*";
+ position: relative;
+ font-size: inherit;
+ color: var(--kt-danger);
+ padding-left: 0.25rem;
+ font-weight: $font-weight-bold;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/helpers/_background.scss b/src/_metronic/assets/sass/core/components/helpers/_background.scss
new file mode 100644
index 0000000..c526de6
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/helpers/_background.scss
@@ -0,0 +1,208 @@
+//
+// Custom background helpers
+//
+
+// Background white color
+.bg-white {
+ --kt-bg-rgb-color: var(--kt-white-bg-rgb);
+ background-color: $black !important;
+}
+
+// Background black color
+.bg-black {
+ --kt-bg-rgb-color: var(--kt-black-bg-rgb);
+ background-color: $black !important;
+}
+
+// Background body color
+.bg-body {
+ --kt-bg-rgb-color: var(--kt-body-bg-rgb);
+ background-color: var(--kt-body-bg) !important;
+}
+
+.bg-hover-body {
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--kt-body-bg) !important;
+ }
+}
+
+.bg-active-body {
+ &.active {
+ background-color: var(--kt-body-bg) !important;
+ }
+}
+
+.bg-state-body {
+ cursor: pointer;
+
+ &.active,
+ &:hover {
+ background-color: var(--kt-body-bg) !important;
+ }
+}
+
+// Background theme light colors
+@each $name, $value in $theme-colors {
+ @if (theme-light-color($name)) {
+ .bg-light-#{$name} {
+ background-color: var(--kt-#{$name}-light) !important;
+ }
+ }
+
+ .bg-#{$name} {
+ --kt-bg-rgb-color: var(--kt-#{$name}-rgb);
+ background-color: var(--kt-#{$name}) !important;
+ }
+
+ @if (theme-light-color($name)) {
+ .bg-hover-light-#{$name} {
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--kt-#{$name}-light) !important;
+ }
+ }
+
+ .bg-state-light-#{$name} {
+ cursor: pointer;
+
+ &.active,
+ &:hover {
+ background-color: var(--kt-#{$name}-light) !important;
+ }
+ }
+ }
+
+ .bg-hover-#{$name} {
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--kt-#{$name}) !important;
+ }
+ }
+
+ .bg-active-#{$name} {
+ &.active {
+ background-color: var(--kt-#{$name}) !important;
+ }
+ }
+
+ .bg-state-#{$name} {
+ cursor: pointer;
+
+ &.active,
+ &:hover {
+ background-color: var(--kt-#{$name}) !important;
+ }
+ }
+}
+
+// Background gray colors
+@each $name, $value in $grays {
+ .bg-gray-#{$name} {
+ background-color: var(--kt-gray-#{$name});
+ }
+
+ .bg-gray-#{$name}i {
+ background-color: var(--kt-gray-#{$name}) !important;
+ }
+}
+
+// Opacity
+@each $name, $value in $opacity-values {
+ .bg-opacity-#{$name} {
+ background-color: rgba(var(--kt-bg-rgb-color), #{$value}) !important;
+ }
+
+ .bg-hover-opacity-#{$name}:hover {
+ background-color: rgba(var(--kt-bg-rgb-color), #{$value}) !important;
+ }
+
+ .bg-active-opacity-#{$name}.active {
+ background-color: rgba(var(--kt-bg-rgb-color), #{$value}) !important;
+ }
+
+ .bg-state-opacity-#{$name} {
+ .active,
+ &:hover {
+ background-color: rgba(var(--kt-bg-rgb-color), #{$value}) !important;
+ }
+ }
+}
+
+// Background image helpers
+// Background repeat
+.bgi-no-repeat {
+ background-repeat: no-repeat;
+}
+
+// Background positions
+.bgi-position-y-top {
+ background-position-y: top;
+}
+
+.bgi-position-y-bottom {
+ background-position-y: bottom;
+}
+
+.bgi-position-y-center {
+ background-position-y: center;
+}
+
+.bgi-position-x-start {
+ background-position-x: left;
+}
+
+.bgi-position-x-end {
+ background-position-x: right;
+}
+
+.bgi-position-x-center {
+ background-position-x: center;
+}
+
+.bgi-position-top {
+ background-position: 0 top;
+}
+
+.bgi-position-bottom {
+ background-position: 0 bottom;
+}
+
+.bgi-position-center {
+ background-position: center;
+}
+
+// Responsive helpers
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ // Background sizes
+ .bgi-size#{$infix}-auto {
+ background-size: auto;
+ }
+
+ .bgi-size#{$infix}-cover {
+ background-size: cover;
+ }
+
+ .bgi-size#{$infix}-contain {
+ background-size: contain;
+ }
+
+ // Background attachment
+ .bgi-attachment#{$infix}-fixed {
+ background-attachment: fixed;
+ }
+
+ .bgi-attachment#{$infix}-scroll {
+ background-attachment: scroll;
+ }
+ }
+}
+
+
+
diff --git a/src/_metronic/assets/sass/core/components/helpers/_borders.scss b/src/_metronic/assets/sass/core/components/helpers/_borders.scss
new file mode 100644
index 0000000..892c1fe
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/helpers/_borders.scss
@@ -0,0 +1,114 @@
+//
+// Border
+//
+
+.border-active:not(.active):not(:active):not(:hover):not(:focus) {
+ border-color: transparent !important;
+}
+
+.border-hover:not(:hover):not(:focus):not(.active):not(:active) {
+ cursor: pointer;
+ border-color: transparent !important;
+}
+
+// Gray border colors
+@each $name, $value in $grays {
+ // Initial
+ .border-gray-#{$name} {
+ border-color: var(--kt-gray-#{$name}) !important;
+ }
+}
+
+// Hover border colors
+@each $name, $value in $theme-colors {
+ .border-hover-#{$name}:hover {
+ border-color: var(--kt-#{$name}) !important;
+ }
+
+ .border-active-#{$name}.active {
+ border-color: var(--kt-#{$name}) !important;
+ }
+}
+
+// Hover transparent
+.border-hover-transparent:hover {
+ border-color: transparent !important;
+}
+
+// Dashed style
+.border-dashed {
+ border-style: dashed !important;
+ border-color: var(--kt-border-dashed-color);
+}
+
+.border-top-dashed {
+ border-top-style: dashed !important;
+}
+
+.border-bottom-dashed {
+ border-bottom-style: dashed !important;
+}
+
+.border-start-dashed {
+ border-left-style: dashed !important;
+}
+
+.border-end-dashed {
+ border-right-style: dashed !important;
+}
+
+// Dotted style
+.border-dotted {
+ border-style: dotted !important;
+}
+
+.border-top-dotted {
+ border-top-style: dotted !important;
+}
+
+.border-bottom-dotted {
+ border-bottom-style: dotted !important;
+}
+
+.border-start-dotted {
+ border-left-style: dotted !important;
+}
+
+.border-end-dotted {
+ border-right-style: dotted !important;
+}
+
+// Border transparent
+.border-transparent {
+ border-color: transparent !important;
+}
+
+// Border body
+.border-body {
+ border-color: var(--kt-body-bg) !important;
+}
+
+// Border radiuses
+.rounded-top-0 {
+ border-top-left-radius: 0 !important;
+ border-top-right-radius: 0 !important;
+}
+
+.rounded-bottom-0 {
+ border-bottom-left-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+}
+
+.rounded-start-0 {
+ border-top-left-radius: 0 !important;
+ border-bottom-left-radius: 0 !important;
+}
+
+.rounded-end-0 {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+}
+
+.rounded-circle {
+ border-radius: 50% !important;
+}
diff --git a/src/_metronic/assets/sass/core/components/helpers/_flex.scss b/src/_metronic/assets/sass/core/components/helpers/_flex.scss
new file mode 100644
index 0000000..d3f2b31
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/helpers/_flex.scss
@@ -0,0 +1,57 @@
+//
+// Flex Utilities
+//
+
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .flex#{$infix}-root {
+ flex: 1;
+ }
+
+ .flex#{$infix}-column-auto {
+ flex: none;
+ }
+
+ .flex#{$infix}-column-fluid {
+ flex: 1 0 auto;
+ }
+
+ .flex#{$infix}-row-auto {
+ flex: 0 0 auto;
+ }
+
+ .flex#{$infix}-row-fluid {
+ flex: 1 auto;
+ min-width: 0;
+ }
+
+ .flex#{$infix}-center {
+ justify-content: center;
+ align-items: center;
+ }
+
+ .flex#{$infix}-start {
+ justify-content: start;
+ align-items: start;
+ }
+
+ .flex#{$infix}-end {
+ justify-content: end;
+ align-items: end;
+ }
+
+ .flex#{$infix}-stack {
+ justify-content: space-between;
+ align-items: center;
+ }
+ }
+}
+
+.flex-equal {
+ flex-grow: 1;
+ flex-basis: 0;
+ flex-shrink: 0;
+}
diff --git a/src/_metronic/assets/sass/core/components/helpers/_opacity.scss b/src/_metronic/assets/sass/core/components/helpers/_opacity.scss
new file mode 100644
index 0000000..80e26c8
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/helpers/_opacity.scss
@@ -0,0 +1,18 @@
+//
+// Opacity
+//
+
+@each $name, $value in $opacity-values {
+ // Active state
+ .opacity-active-#{$name}.active {
+ opacity: #{$value} !important;
+ }
+
+ // Active and hover states
+ .opacity-state-#{$name} {
+ &:hover,
+ &.active {
+ opacity: #{$value} !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/helpers/_shadow.scss b/src/_metronic/assets/sass/core/components/helpers/_shadow.scss
new file mode 100644
index 0000000..ff50ae1
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/helpers/_shadow.scss
@@ -0,0 +1,19 @@
+//
+// Shadow
+//
+
+.shadow-xs {
+ box-shadow: var(--kt-box-shadow-xs);
+}
+
+.shadow-sm {
+ box-shadow: var(--kt-box-shadow-sm);
+}
+
+.shadow {
+ box-shadow: var(--kt-box-shadow);
+}
+
+.shadow-lg {
+ box-shadow: var(--kt-box-shadow-lg);
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/helpers/_text.scss b/src/_metronic/assets/sass/core/components/helpers/_text.scss
new file mode 100644
index 0000000..f147cae
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/helpers/_text.scss
@@ -0,0 +1,114 @@
+//
+// Text
+//
+
+// Text colors
+@each $name, $color in $theme-text-colors {
+ // Base color
+ .text-#{$name} {
+ color: var(--kt-text-#{$name}) !important;
+ }
+
+ // Inverse color
+ @if (theme-inverse-color($name)) {
+ .text-inverse-#{$name} {
+ color: var(--kt-#{$name}-inverse) !important;
+ }
+ }
+
+ @if (theme-light-color($name)) {
+ // Light colors
+ .text-light-#{$name} {
+ color: var(--kt-#{$name}-light) !important;
+ }
+ }
+
+ // Hover
+ .text-hover-#{$name} {
+ transition: $transition-link;
+
+ i {
+ transition: $transition-link;
+ }
+
+ &:hover {
+ transition: $transition-link;
+ color: var(--kt-text-#{$name}) !important;
+
+ i {
+ transition: $transition-link;
+ color: var(--kt-text-#{$name}) !important;
+ }
+
+ .svg-icon {
+ color: var(--kt-text-#{$name}) !important;
+ }
+ }
+ }
+
+ // Active
+ .text-active-#{$name} {
+ transition: $transition-link;
+
+ i {
+ transition: $transition-link;
+ }
+
+ &.active {
+ transition: $transition-link;
+ color: var(--kt-text-#{$name}) !important;
+
+ i {
+ transition: $transition-link;
+ color: var(--kt-text-#{$name}) !important;
+ }
+
+ .svg-icon {
+ color: var(--kt-text-#{$name}) !important;
+ }
+ }
+ }
+}
+
+// Text transparent
+.text-transparent {
+ color: transparent;
+}
+
+// Cursor pointer
+.cursor-pointer {
+ cursor: pointer;
+}
+
+// Cursor default
+.cursor-default {
+ cursor: default;
+}
+// Cursor move
+.cursor-move {
+ cursor: move;
+}
+
+// Icons
+i {
+ &.bi,
+ &[class^="fonticon-"],
+ &[class*=" fonticon-"],
+ &[class^="fa-"],
+ &[class*=" fa-"],
+ &[class^="la-"],
+ &[class*=" la-"] {
+ line-height: 1;
+ font-size: 1rem;
+ color: var(--kt-text-muted);
+ }
+}
+
+// Link transition
+a {
+ transition: $transition-link;
+
+ &:hover {
+ transition:$transition-link;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/helpers/_transform.scss b/src/_metronic/assets/sass/core/components/helpers/_transform.scss
new file mode 100644
index 0000000..0c8616f
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/helpers/_transform.scss
@@ -0,0 +1,8 @@
+//
+// Transform
+//
+
+.transform-90 {
+ transform: rotate(90deg);
+ transform-origin: right top;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/menu/_base.scss b/src/_metronic/assets/sass/core/components/menu/_base.scss
new file mode 100644
index 0000000..dc50228
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/menu/_base.scss
@@ -0,0 +1,306 @@
+//
+// Menu Base
+//
+
+// Menu group
+.menu-group {
+ display: flex;
+}
+
+// Menu & wrapper
+.menu,
+.menu-wrapper {
+ display: flex;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+
+// Sub inner
+.menu-inner {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+
+// Sub menu
+.menu-sub {
+ display: none;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ flex-direction: column;
+}
+
+// Menu item
+.menu-item {
+ display: block;
+ padding: $menu-item-padding-y $menu-item-padding-x;
+
+ // Menu Link
+ .menu-link {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ padding: 0;
+ flex: 0 0 100%;
+ padding: $menu-link-padding-y $menu-link-padding-x;
+ transition: none;
+ outline: none !important;
+
+ .menu-icon {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: $menu-icon-size;
+ margin-right: $menu-icon-space;
+
+ .svg-icon {
+ line-height: 1;
+ }
+ }
+
+ .menu-bullet {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: $menu-bullet-size;
+ margin-right: $menu-bullet-space;
+ }
+
+ .menu-title {
+ display: flex;
+ align-items: center;
+ flex-grow: 1;
+ }
+
+ .menu-badge {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ margin-left: $menu-badge-space;
+ }
+
+ .menu-arrow {
+ display: flex;
+ align-items: stretch;
+ position: relative;
+ overflow: hidden;
+ flex-shrink: 0;
+ margin-left: $menu-arrow-space;
+ width: $menu-arrow-size;
+ height: $menu-arrow-size;
+
+ &:after {
+ display: block;
+ width: 100%;
+ content: " ";
+ will-change: transform;
+ background-size: 100% 100%;
+ @include svg-bg-icon(arrow-start, var(--kt-text-muted));
+ /*rtl:begin:remove*/
+ @include svg-bg-icon(arrow-end, var(--kt-text-muted));
+ /*rtl:end:remove*/
+ }
+ }
+ }
+
+ // Menu Content
+ .menu-content {
+ padding: $menu-link-padding-y $menu-link-padding-x;
+ }
+}
+
+// Accordion arrows
+.menu-item {
+ &.show {
+ .menu-link {
+ .menu-arrow:after {
+ backface-visibility: hidden;
+ transition: $menu-accordion-arrow-transition;
+ }
+ }
+ }
+}
+
+// Center alignment
+.menu-center {
+ justify-content: center;
+}
+
+// Heading
+.menu-heading {
+ color: var(--kt-menu-heading-color);
+}
+
+// Responsive
+@each $direction in (up, down) {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @if $infix and $direction == down {
+ $infix: $infix + "-" + $direction;
+ }
+
+ @include media-breakpoint-direction($direction, $breakpoint) {
+ // Accordion arrow
+ .menu-item.menu#{$infix}-accordion {
+ .menu-arrow:after {
+ @include menu-link-arrow-rotate(90deg, -90deg);
+ }
+
+ &.showing:not(.menu-dropdown),
+ &.show:not(.hiding):not(.menu-dropdown) {
+ > .menu-link {
+ .menu-arrow:after {
+ @include menu-link-arrow-rotate(-90deg, 90deg);
+ }
+ }
+ }
+ }
+
+ // Sub dropdown
+ .menu-sub#{$infix}-dropdown {
+ display: none;
+ border-radius: $menu-dropdown-border-radius;
+ background-color: var(--kt-menu-dropdown-bg-color);
+ box-shadow: var(--kt-menu-dropdown-box-shadow);
+ z-index: $menu-dropdown-z-index;
+
+ // Dropdown show
+ .show.menu-dropdown > &,
+ &.menu.show,
+ &.show[data-popper-placement] {
+ display: flex;
+ will-change: transform;
+
+ // Animation
+ @if ($menu-dropdown-animation == true) {
+ // Move up
+ animation: menu-sub-dropdown-animation-fade-in #{$menu-dropdown-animation-speed} ease 1, menu-sub-dropdown-animation-move-up #{$menu-dropdown-animation-speed} ease 1;
+ }
+ }
+ }
+
+ // Sub accordion
+ .menu-sub#{$infix}-accordion {
+ display: none;
+
+ .show:not(.menu-dropdown) > &,
+ &.show {
+ display: flex;
+ }
+ }
+
+ // Sub indention
+ .menu-sub#{$infix}-indention {
+ @include menu-sub-indention($menu-accordion-indention);
+
+ // Active link
+ .menu-item .menu-item .menu-link.active {
+ margin-right: $menu-link-padding-x;
+ }
+ }
+
+ // Inline
+ .menu#{$infix}-inline {
+ display: flex;
+ }
+
+ // Reset link left & right paddings of level 1 menu links
+ .menu#{$infix}-fit {
+ > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+ }
+ }
+
+ .menu#{$infix}-column {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .menu#{$infix}-row {
+ flex-direction: row;
+
+ > .menu-item {
+ display: flex;
+ align-items: center;
+
+ > .menu-link {
+ .menu-arrow:after {
+ @include menu-link-arrow-rotate(90deg, -90deg);
+ }
+ }
+ }
+ }
+
+ // Border radiuses
+ .menu#{$infix}-rounded {
+ .menu-link {
+ @include border-radius($menu-link-border-radius);
+ }
+ }
+
+ // Border radiuses
+ .menu#{$infix}-pill {
+ .menu-link {
+ border-radius: 50px;
+ }
+ }
+
+ // Reset border radiuses
+ .menu#{$infix}-rounded-0 {
+ .menu-link {
+ border-radius: 0 !important;
+ }
+ }
+ }
+ }
+}
+
+// Link indention
+.menu-link-indention {
+ .menu-item {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ @include menu-link-indention($menu-accordion-indention, $menu-link-padding-x);
+}
+
+// Menu animations
+@keyframes menu-sub-dropdown-animation-fade-in {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes menu-sub-dropdown-animation-move-up {
+ from {
+ margin-top: #{$menu-dropdown-animation-move-offset};
+ }
+
+ to {
+ margin-top: 0;
+ }
+}
+
+@keyframes menu-sub-dropdown-animation-move-down {
+ from {
+ margin-bottom: #{$menu-dropdown-animation-move-offset};
+ }
+
+ to {
+ margin-bottom: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/menu/_theme.scss b/src/_metronic/assets/sass/core/components/menu/_theme.scss
new file mode 100644
index 0000000..f8e4730
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/menu/_theme.scss
@@ -0,0 +1,510 @@
+//
+// Menu Theme
+//
+
+// Theme text colors
+@each $name, $color in $theme-text-colors {
+ .menu-#{$name} {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-default-state( var(--kt-#{$name}), var(--kt-#{$name}), var(--kt-#{$name}), var(--kt-#{$name}), null );
+ }
+ }
+
+ .menu-title-#{$name} {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-default-state( var(--kt-text-#{$name}), null, null, null, null );
+ }
+ }
+
+ .menu-icon-#{$name} {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-default-state( null, var(--kt-text-#{$name}), null, null, null );
+ }
+ }
+
+ .menu-bullet-#{$name} {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-default-state( null, null, var(--kt-text-#{$name}), null, null );
+ }
+ }
+
+ .menu-arrow-#{$name} {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-default-state( null, null, null, var(--kt-text-#{$name}), null );
+ }
+ }
+}
+
+// Default background states
+.menu-hover-bg {
+ .menu-item {
+ @include menu-link-hover-state(
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-bg-color-hover)
+ );
+ }
+}
+
+.menu-here-bg {
+ .menu-item {
+ @include menu-link-here-state(
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-bg-color-here)
+ );
+ }
+}
+
+.menu-root-here-bg {
+ > .menu-item {
+ @include menu-link-here-state(
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-bg-color-here)
+ );
+ }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .menu-root-here-bg-desktop {
+ > .menu-item {
+ @include menu-link-here-state(
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-bg-color-here)
+ );
+ }
+ }
+}
+
+.menu-show-bg {
+ .menu-item {
+ @include menu-link-show-state(
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-bg-color-show)
+ );
+ }
+}
+
+.menu-active-bg {
+ .menu-item {
+ @include menu-link-active-state(
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-bg-color-active)
+ );
+ }
+}
+
+.menu-state-bg {
+ .menu-item {
+ @include menu-link-hover-state(
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-bg-color-hover)
+ );
+
+ @include menu-link-here-state(
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-bg-color-here)
+ );
+
+ @include menu-link-show-state(
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-bg-color-show)
+ );
+
+ @include menu-link-active-state(
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-bg-color-active)
+ );
+ }
+}
+
+.menu-state-color {
+ .menu-item {
+ @include menu-link-hover-state(
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ null
+ );
+
+ @include menu-link-here-state(
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ null
+ );
+
+ @include menu-link-show-state(
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ null
+ );
+
+ @include menu-link-active-state(
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ null
+ );
+ }
+}
+
+// Primary background states
+.menu-hover-bg-primary {
+ .menu-item {
+ @include menu-link-hover-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+ }
+}
+
+.menu-show-bg-primary {
+ .menu-item {
+ @include menu-link-show-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+ }
+}
+
+.menu-here-bg-primary {
+ .menu-item {
+ @include menu-link-here-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+ }
+}
+
+.menu-active-bg-primary {
+ .menu-item {
+ @include menu-link-active-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+ }
+}
+
+.menu-state-bg-primary {
+ .menu-item {
+ @include menu-link-hover-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+
+ @include menu-link-show-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+
+ @include menu-link-here-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+
+ @include menu-link-active-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+
+ @include menu-link-show-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+ }
+}
+
+// Light primary background states
+.menu-show-bg-light-primary {
+ .menu-item {
+ @include menu-link-show-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ }
+}
+
+.menu-here-bg-light-primary {
+ .menu-item {
+ @include menu-link-here-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ }
+}
+
+.menu-hover-bg-light-primary {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ }
+}
+
+.menu-active-bg-light-primary {
+ .menu-item {
+ @include menu-link-active-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ }
+}
+
+.menu-state-bg-light-primary {
+ .menu-item {
+ @include menu-link-show-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ @include menu-link-here-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ @include menu-link-hover-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ @include menu-link-active-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ }
+}
+
+// Primary color states
+.menu-hover-primary {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ }
+}
+
+.menu-show-primary {
+ .menu-item {
+ @include menu-link-show-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ }
+}
+
+.menu-here-primary {
+ .menu-item {
+ @include menu-link-here-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ }
+}
+
+.menu-active-primary {
+ .menu-item {
+ @include menu-link-active-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ }
+}
+
+.menu-state-primary {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ @include menu-link-show-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ @include menu-link-here-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ @include menu-link-active-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ }
+}
+
+.menu-state-dark {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-dark), var(--kt-dark), var(--kt-dark), var(--kt-dark), null );
+ @include menu-link-show-state( var(--kt-dark), var(--kt-dark), var(--kt-dark), var(--kt-dark), null );
+ @include menu-link-here-state( var(--kt-dark), var(--kt-dark), var(--kt-dark), var(--kt-dark), null );
+ @include menu-link-active-state( var(--kt-dark), var(--kt-dark), var(--kt-dark), var(--kt-dark), null );
+ }
+}
+
+// Primary title color states
+.menu-hover-title-primary {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-primary), null, null, null, null );
+ }
+}
+
+.menu-here-title-primary {
+ .menu-item {
+ @include menu-link-here-state( var(--kt-primary), null, null, null, null );
+ }
+}
+
+.menu-show-title-primary {
+ .menu-item {
+ @include menu-link-show-state( var(--kt-primary), null, null, null, null );
+ }
+}
+
+.menu-active-title-primary {
+ .menu-item {
+ @include menu-link-active-state( var(--kt-primary), null, null, null, null );
+ }
+}
+
+.menu-state-title-primary {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-primary), null, null, null, null );
+ @include menu-link-here-state( var(--kt-primary), null, null, null, null );
+ @include menu-link-show-state( var(--kt-primary), null, null, null, null );
+ @include menu-link-active-state( var(--kt-primary), null, null, null, null );
+ }
+}
+
+// Primary icon color states
+.menu-hover-icon-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, var(--kt-primary), null, null, null );
+ }
+}
+
+.menu-here-icon-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-here-state( null, var(--kt-primary), null, null, null );
+ }
+}
+
+.menu-show-icon-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-show-state( null, var(--kt-primary), null, null, null );
+ }
+}
+
+.menu-active-icon-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-active-state( null, var(--kt-primary), null, null, null );
+ }
+}
+
+.menu-state-icon-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, var(--kt-primary), null, null, null );
+ @include menu-link-here-state( null, var(--kt-primary), null, null, null );
+ @include menu-link-show-state( null, var(--kt-primary), null, null, null );
+ @include menu-link-active-state( null, var(--kt-primary), null, null, null );
+ }
+}
+
+// Primary bullet color states
+.menu-hover-bullet-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, null, var(--kt-primary), null, null );
+ }
+}
+
+.menu-show-bullet-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-show-state( null, null, var(--kt-primary), null, null );
+ }
+}
+
+.menu-here-bullet-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-here-state( null, null, var(--kt-primary), null, null );
+ }
+}
+
+.menu-active-bullet-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-active-state( null, null, var(--kt-primary), null, null );
+ }
+}
+
+.menu-state-bullet-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, null, var(--kt-primary), null, null );
+ @include menu-link-here-state( null, null, var(--kt-primary), null, null );
+ @include menu-link-show-state( null, null, var(--kt-primary), null, null );
+ @include menu-link-active-state( null, null, var(--kt-primary), null, null );
+ }
+}
+
+// Primary arrow color states
+.menu-hover-arrow-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, null, null, var(--kt-primary), null );
+ }
+}
+
+.menu-here-arrow-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-here-state( null, null, null, var(--kt-primary), null );
+ }
+}
+
+.menu-show-arrow-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-show-state( null, null, null, var(--kt-primary), null );
+ }
+}
+
+.menu-active-arrow-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-active-state( null, null, null, var(--kt-primary), null );
+ }
+}
+
+.menu-state-arrow-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, null, null, var(--kt-primary), null );
+ @include menu-link-here-state( null, null, null, var(--kt-primary), null );
+ @include menu-link-show-state( null, null, null, var(--kt-primary), null );
+ @include menu-link-active-state( null, null, null, var(--kt-primary), null );
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/mixins/_buttons.scss b/src/_metronic/assets/sass/core/components/mixins/_buttons.scss
new file mode 100644
index 0000000..fd8ee49
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/mixins/_buttons.scss
@@ -0,0 +1,84 @@
+//
+// Button Mixins
+//
+
+// Custom variant
+@mixin button-custom-variant(
+ $color,
+ $icon-color,
+ $border-color,
+ $bg-color,
+ $color-active,
+ $icon-color-active,
+ $border-color-active,
+ $bg-color-active
+) {
+
+ @if ( $color != null ) {
+ color: $color;
+ }
+
+ @if ( $icon-color != null ) {
+ i,
+ .svg-icon {
+ color: $icon-color;
+ }
+
+ &.dropdown-toggle:after {
+ color: $icon-color;
+ }
+ }
+
+ @if ( $border-color != null ) {
+ border-color: $border-color;
+ }
+
+ @if ( $bg-color != null ) {
+ background-color: $bg-color;
+ }
+
+ .btn-check:checked + &,
+ .btn-check:active + &,
+ &:focus:not(.btn-active),
+ &:hover:not(.btn-active),
+ &:active:not(.btn-active),
+ &.active,
+ &.show,
+ .show > & {
+ @if ( $color-active != null ) {
+ color: $color-active;
+ }
+
+ @if ( $icon-color-active != null ) {
+ i,
+ .svg-icon {
+ color: $icon-color-active;
+ }
+
+ &.dropdown-toggle:after {
+ color: $icon-color-active;
+ }
+ }
+
+ @if ( $border-color-active != null ) {
+ border-color: $border-color-active;
+ }
+
+ @if ( $bg-color-active != null ) {
+ background-color: $bg-color-active !important;
+ }
+ }
+}
+
+@mixin button-active-state() {
+ .btn-check:checked + &,
+ .btn-check:active + &,
+ &:focus:not(.btn-active),
+ &:hover:not(.btn-active),
+ &:active:not(.btn-active),
+ &.active,
+ &.show,
+ .show > & {
+ @content;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/mixins/_ki.scss b/src/_metronic/assets/sass/core/components/mixins/_ki.scss
new file mode 100644
index 0000000..c83273a
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/mixins/_ki.scss
@@ -0,0 +1,18 @@
+//
+// Keenthemes Icons
+//
+
+@mixin ki($icon) {
+ font-family: Ki;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ line-height: 1;
+ text-decoration: inherit;
+ text-rendering: optimizeLegibility;
+ text-transform: none;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+ content: "#{$icon}";
+}
diff --git a/src/_metronic/assets/sass/core/components/mixins/_menu.scss b/src/_metronic/assets/sass/core/components/mixins/_menu.scss
new file mode 100644
index 0000000..f407618
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/mixins/_menu.scss
@@ -0,0 +1,301 @@
+//
+// Label
+//
+
+// Set arrow direction
+@mixin menu-link-arrow-rotate($angle, $angleRtl) {
+ /*rtl:ignore*/
+ transform: rotateZ($angleRtl);
+ /*rtl:remove*/
+ transform: rotateZ($angle);
+ transition: $menu-accordion-arrow-transition;
+}
+
+// Set menu link padding x
+@mixin menu-link-padding-x($value) {
+ // Menu item
+ .menu-item {
+ .menu-link,
+ .menu-content {
+ padding-left: $value;
+ padding-right: $value;
+ }
+ }
+}
+
+// Set menu link padding y
+@mixin menu-link-padding-y($value) {
+ // Menu item
+ .menu-item {
+ .menu-link,
+ .menu-content {
+ padding-top: $value;
+ padding-bottom: $value;
+ }
+ }
+}
+
+// Set link indention
+@mixin menu-link-indention($value, $offset) {
+ .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{1 * $value} + #{$offset});
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{2 * $value} + #{$offset});
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{3 * $value} + #{$offset});
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{4 * $value} + #{$offset});
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ &.menu-fit {
+ .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: #{$value};
+ padding-right: 0;
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{2 * $value});
+ padding-right: 0;
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{3 * $value});
+ padding-right: 0;
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{4 * $value});
+ padding-right: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+// Set sub indention
+@mixin menu-sub-indention($value) {
+ .menu-sub:not([data-popper-placement]) {
+ margin-left: $value;
+ }
+}
+
+// Set menu link theme
+@mixin menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null) {
+ @if ( $bg-color != null ) {
+ background-color: $bg-color;
+ }
+
+ @if ( $title-color != null ) {
+ color: $title-color;
+
+ .menu-title {
+ color: $title-color;
+ }
+ }
+
+ @if ( $icon-color != null ) {
+ .menu-icon {
+ &,
+ .svg-icon,
+ i {
+ color: $icon-color;
+ }
+ }
+ }
+
+ @if ( $bullet-color != null ) {
+ .menu-bullet {
+ .bullet {
+ background-color: $bullet-color;
+ }
+ }
+ }
+
+ @if ( $arrow-color != null ) {
+ // Arrow
+ .menu-arrow:after {
+ @include svg-bg-icon(arrow-start, $arrow-color);
+ /*rtl:begin:remove*/
+ @include svg-bg-icon(arrow-end, $arrow-color);
+ /*rtl:end:remove*/
+ }
+ }
+}
+
+// Set menu link default state
+@mixin menu-link-default-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
+ $sel: '';
+
+ @if ($all-links == false) {
+ $sel: '& > ';
+ }
+
+ #{$sel}.menu-link {
+ @include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
+ }
+}
+
+// Set menu link hover state
+@mixin menu-link-hover-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
+ $sel: '&:not(.here) ';
+
+ @if ($all-links == false) {
+ $sel: '&:not(.here) > ';
+ }
+
+ &.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
+ #{$sel}.menu-link:hover:not(.disabled):not(.active):not(.here) {
+ transition: $transition-link;
+
+ @include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
+ }
+}
+
+// Set menu link active state
+@mixin menu-link-active-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
+ $sel: '';
+
+ @if ($all-links == false) {
+ $sel: '& > ';
+ }
+
+ #{$sel}.menu-link.active {
+ transition: $transition-link;
+
+ @include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
+ }
+}
+
+// Set menu link show state
+@mixin menu-link-show-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
+ //&.here > .menu-link,
+ &.show > .menu-link {
+ transition: $transition-link;
+
+ @include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
+ }
+}
+
+// Set menu link here state
+@mixin menu-link-here-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
+ &.here > .menu-link {
+ transition: $transition-link;
+
+ @include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
+ }
+}
+
+// Set menu link default
+@mixin menu-link-default($all-links: true) {
+ $sel: '';
+
+ @if ($all-links == false) {
+ $sel: '& > ';
+ }
+
+ #{$sel}.menu-link {
+ @content;
+ }
+}
+
+// Set menu link hover
+@mixin menu-link-hover($all-links: true) {
+ $sel: '&:not(.here) ';
+
+ @if ($all-links == false) {
+ $sel: '&:not(.here) > ';
+ }
+
+ &.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
+ #{$sel}.menu-link:hover:not(.disabled):not(.active):not(.here) {
+ transition: $transition-link;
+
+ @content;
+ }
+}
+
+// Set menu link active
+@mixin menu-link-active($all-links: true) {
+ $sel: '';
+
+ @if ($all-links == false) {
+ $sel: '& > ';
+ }
+
+ #{$sel}.menu-link.active {
+ transition: $transition-link;
+
+ @content;
+ }
+}
+
+// Set menu link show
+@mixin menu-link-show($all-links: true) {
+ //&.here > .menu-link,
+ &.show > .menu-link {
+ transition: $transition-link;
+
+ @content;
+ }
+}
+
+// Set menu link here
+@mixin menu-link-here($all-links: true) {
+ &.here > .menu-link {
+ transition: $transition-link;
+
+ @content;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/mixins/_popover.scss b/src/_metronic/assets/sass/core/components/mixins/_popover.scss
new file mode 100644
index 0000000..d9f9b0d
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/mixins/_popover.scss
@@ -0,0 +1,74 @@
+//
+// Popover Mixin
+//
+
+@mixin popover-theme($bg-color, $border-color, $header-bg-color, $header-color, $body-color, $arrow-outer-color, $arrow-color) {
+ background-color: $bg-color;
+ border: 0;
+
+ // Header
+ .popover-header {
+ background-color: $header-bg-color;
+ color: $header-color;
+ border-bottom-color: $border-color;
+ }
+
+ // Body
+ .popover-body {
+ color: $body-color;
+ }
+
+ // Arrows
+ &.bs-popover-top {
+ > .popover-arrow {
+ &::before {
+ border-top-color: $arrow-outer-color;
+ }
+
+ &::after {
+ border-top-color: $arrow-color;
+ }
+ }
+ }
+
+ &.bs-popover-end {
+ > .popover-arrow {
+ &::before {
+ border-right-color: $arrow-outer-color;
+ }
+
+ &::after {
+ border-right-color: $arrow-color;
+ }
+ }
+ }
+
+ &.bs-popover-bottom {
+ > .popover-arrow {
+ &::before {
+ border-bottom-color: $arrow-outer-color;
+ }
+
+ &::after {
+ border-bottom-color: $arrow-color;
+ }
+ }
+
+ // This will remove the popover-header's border just below the arrow
+ .popover-header::before {
+ border-bottom-color: $header-bg-color;
+ }
+ }
+
+ &.bs-popover-start {
+ > .popover-arrow {
+ &::before {
+ border-left-color: $arrow-outer-color;
+ }
+
+ &::after {
+ border-left-color: $arrow-color;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/mixins/_scroll.scss b/src/_metronic/assets/sass/core/components/mixins/_scroll.scss
new file mode 100644
index 0000000..e1bd6f7
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/mixins/_scroll.scss
@@ -0,0 +1,34 @@
+//
+// Scroll mixins
+//
+
+@mixin scrollbar-color($color, $hover-color: null) {
+ // Firefox
+ scrollbar-color: $color transparent;
+
+ // Webkit
+ &::-webkit-scrollbar-thumb {
+ background-color: $color;
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: transparent;
+ }
+
+ @if ($hover-color != null) {
+ // Hover state
+ &:hover {
+ // Firefox
+ scrollbar-color: $hover-color transparent;
+
+ // Webkit
+ &::-webkit-scrollbar-thumb {
+ background-color: $hover-color;
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: transparent;
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/mixins/_shape.scss b/src/_metronic/assets/sass/core/components/mixins/_shape.scss
new file mode 100644
index 0000000..3395df0
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/mixins/_shape.scss
@@ -0,0 +1,29 @@
+
+@use 'sass:math';
+
+@mixin shape($edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20) {
+ $central-angle: divide(360deg, $edges-number);
+ $angle: ($edges-number - 2) * divide(180deg, $edges-number);
+ $max-var-angle: 2 * (90deg - divide($angle, 2));
+ $precision: 6;
+ $unit-var-angle: divide($max-var-angle, $precision);
+ $r-diff: $main-radius + $rounding-radius;
+
+ $points: ();
+
+ @for $i from 0 to $edges-number {
+ $vertex-angle: $i * $central-angle + if($rotated, -90deg, 0deg);
+ $vertex-x: 50% + $r-diff * math.cos($vertex-angle);
+ $vertex-y: 50% + $r-diff * math.sin($vertex-angle);
+
+ @for $j from 0 through $precision {
+ $curr-angle: $vertex-angle + ($j - 0.5 * $precision) * $unit-var-angle;
+ $x: $vertex-x + $rounding-radius * math.cos($curr-angle);
+ $y: $vertex-y + $rounding-radius * math.sin($curr-angle);
+
+ $points: $points, $x $y;
+ }
+ }
+
+ clip-path: polygon($points);
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/mixins/_svg-bg-icon.scss b/src/_metronic/assets/sass/core/components/mixins/_svg-bg-icon.scss
new file mode 100644
index 0000000..48ee125
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/mixins/_svg-bg-icon.scss
@@ -0,0 +1,68 @@
+//
+// SVG Bg Icons
+//
+
+@mixin svg-bg-icon($type, $color: none, $update: false) {
+ $bg-image: '';
+
+ // Icon type;
+ @if ($type == close) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == check) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == arrow-top) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == arrow-bottom) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == arrow-start) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == arrow-end) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == sort) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == sort-asc) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == sort-desc) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == expand) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == collapse) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ // Icon style
+ @if $update == false {
+ mask-repeat: no-repeat;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ }
+
+ @if $color != none {
+ background-color: $color;
+ }
+
+ -webkit-mask-image: escape-svg($bg-image);
+ mask-image: escape-svg($bg-image);
+}
+
diff --git a/src/_metronic/assets/sass/core/components/mixins/_svg-icon.scss b/src/_metronic/assets/sass/core/components/mixins/_svg-icon.scss
new file mode 100644
index 0000000..35da08c
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/mixins/_svg-icon.scss
@@ -0,0 +1,11 @@
+//
+// SVG Icon
+//
+
+
+@mixin svg-icon-size($size, $important: false) {
+ svg {
+ height: $size valueif($important, !important, null);
+ width: $size valueif($important, !important, null);
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/mixins/_symbol.scss b/src/_metronic/assets/sass/core/components/mixins/_symbol.scss
new file mode 100644
index 0000000..904f394
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/mixins/_symbol.scss
@@ -0,0 +1,42 @@
+//
+// Symbol
+//
+
+@mixin symbol-size($size) {
+ > img {
+ width: $size;
+ height: $size;
+ }
+
+ .symbol-label {
+ width: $size;
+ height: $size;
+ }
+
+ &.symbol-fixed {
+ .symbol-label {
+ width: $size;
+ height: $size;
+ }
+
+ > img {
+ width: $size;
+ height: $size;
+ max-width: none;
+ }
+ }
+
+ // Ratios
+ &.symbol-2by3 {
+ .symbol-label {
+ height: $size;
+ width: $size * divide(3, 2);
+ }
+
+ > img {
+ height: $size;
+ width: $size * divide(3, 2);
+ max-width: none;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/mixins/_theme-mode.scss b/src/_metronic/assets/sass/core/components/mixins/_theme-mode.scss
new file mode 100644
index 0000000..02eee57
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/mixins/_theme-mode.scss
@@ -0,0 +1,15 @@
+//
+// Theme Mode
+//
+
+@mixin theme-light() {
+ html:not([data-theme="dark"]) {
+ @content;
+ }
+}
+
+@mixin theme-dark() {
+ [data-theme="dark"] {
+ @content;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/mixins/_tooltip.scss b/src/_metronic/assets/sass/core/components/mixins/_tooltip.scss
new file mode 100644
index 0000000..63269a2
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/mixins/_tooltip.scss
@@ -0,0 +1,43 @@
+//
+// Tooltip Mixin
+//
+
+@mixin tooltip-theme($bg-color, $color, $arrow-color) {
+ .tooltip-inner {
+ color: $color;
+ background-color: $bg-color;
+ }
+
+ // Arrows
+ &.bs-tooltip-top {
+ .tooltip-arrow {
+ &::before {
+ border-top-color: $arrow-color;
+ }
+ }
+ }
+
+ &.bs-tooltip-end {
+ .tooltip-arrow {
+ &::before {
+ border-right-color: $arrow-color;
+ }
+ }
+ }
+
+ &.bs-tooltip-bottom {
+ .tooltip-arrow {
+ &::before {
+ border-bottom-color: $arrow-color;
+ }
+ }
+ }
+
+ &.bs-tooltip-start {
+ .tooltip-arrow {
+ &::before {
+ border-left-color: $arrow-color;
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/components/stepper/_base.scss b/src/_metronic/assets/sass/core/components/stepper/_base.scss
new file mode 100644
index 0000000..9e23710
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/stepper/_base.scss
@@ -0,0 +1,102 @@
+//
+// Stepper
+//
+
+// Base
+.stepper {
+ // Content
+ [data-kt-stepper-element="info"],
+ [data-kt-stepper-element="content"] {
+ display: none;
+
+ &.current {
+ display: flex;
+ }
+ }
+
+ // Enable cursor pointer on clickable steppers
+ .stepper-item[data-kt-stepper-action="step"] {
+ cursor: pointer;
+ }
+
+ // States
+ & {
+ [data-kt-stepper-action="final"] {
+ display: none;
+ }
+
+ [data-kt-stepper-action="previous"] {
+ display: none;
+ }
+
+ [data-kt-stepper-action="next"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="submit"] {
+ display: none;
+ }
+ }
+
+ &.first {
+ [data-kt-stepper-action="previous"] {
+ display: none;
+ }
+
+ [data-kt-stepper-action="next"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="submit"] {
+ display: none;
+ }
+ }
+
+ &.between {
+ [data-kt-stepper-action="previous"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="next"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="submit"] {
+ display: none;
+ }
+ }
+
+ &.last {
+ [data-kt-stepper-action="final"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="final"].btn-flex {
+ display: flex;
+ }
+
+ [data-kt-stepper-action="previous"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="previous"].btn-flex {
+ display: flex;
+ }
+
+ [data-kt-stepper-action="next"] {
+ display: none;
+ }
+
+ [data-kt-stepper-action="next"].btn-flex {
+ display: flex;
+ }
+
+ [data-kt-stepper-action="submit"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="submit"].btn-flex {
+ display: flex;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/stepper/_links.scss b/src/_metronic/assets/sass/core/components/stepper/_links.scss
new file mode 100644
index 0000000..048ec51
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/stepper/_links.scss
@@ -0,0 +1,57 @@
+//
+// Stepper Links
+//
+
+// Base
+.stepper.stepper-links {
+ .stepper-nav {
+ display: flex;
+ margin: 0 auto;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+
+ .stepper-item {
+ position: relative;
+ flex-shrink: 0;
+ margin: 1rem 1.5rem;
+
+ &:after {
+ content: " ";
+ position: absolute;
+ top: 2.3rem;
+ left: 0;
+ height: 2px;
+ width: 100%;
+ background-color: transparent;
+ transition: $transition-link;
+ }
+
+ .stepper-title {
+ color: var(--kt-dark);
+ font-weight: 600;
+ font-size: 1.25rem;
+ }
+
+ // Current
+ &.current {
+ transition: $transition-link;
+
+ .stepper-title {
+ color: var(--kt-primary);
+ }
+
+ &:after {
+ background-color: var(--kt-primary);
+ }
+ }
+
+ &.current.mark-completed:last-child,
+ &.completed {
+ .stepper-title {
+ color: var(--kt-gray-400);
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/components/stepper/_pills.scss b/src/_metronic/assets/sass/core/components/stepper/_pills.scss
new file mode 100644
index 0000000..9f1c222
--- /dev/null
+++ b/src/_metronic/assets/sass/core/components/stepper/_pills.scss
@@ -0,0 +1,201 @@
+//
+// Stepper Pills
+//
+
+// Base
+.stepper.stepper-pills {
+ --kt-stepper-pills-size: 40px;
+ --kt-stepper-icon-border-radius: 9px;
+ --kt-stepper-icon-check-size: 1rem;
+
+ --kt-stepper-icon-bg-color: var(--kt-primary-light);
+ --kt-stepper-icon-bg-color-current: var(--kt-primary);
+ --kt-stepper-icon-bg-color-completed: var(--kt-primary-light);
+
+ --kt-stepper-icon-border: 0;
+ --kt-stepper-icon-border-current: 0;
+ --kt-stepper-icon-border-completed: 0;
+
+ --kt-stepper-icon-number-color: var(--kt-primary);
+ --kt-stepper-icon-number-color-current: var(--kt-white);
+
+ --kt-stepper-icon-check-color-completed: var(--kt-primary);
+
+ --kt-stepper-label-title-opacity: 1;
+ --kt-stepper-label-title-opacity-current: 1;
+ --kt-stepper-label-title-opacity-completed: 1;
+
+ --kt-stepper-label-title-color: var(--kt-gray-800);
+ --kt-stepper-label-title-color-current: var(--kt-gray-600);
+ --kt-stepper-label-title-color-completed: var(--kt-text-muted);
+
+ --kt-stepper-label-desc-opacity: 1;
+ --kt-stepper-label-desc-opacity-current: 1;
+ --kt-stepper-label-desc-opacity-completed: 1;
+
+ --kt-stepper-label-desc-color: var(--kt-text-muted);
+ --kt-stepper-label-desc-color-current: var(--kt-text-400);
+ --kt-stepper-label-desc-color-completed: var(--kt-gray-400);
+
+ --kt-stepper-line-border: 1px dashed var(--kt-gray-300);
+
+ // Nav
+ .stepper-nav {
+ display: flex;
+ }
+
+ // Item
+ .stepper-item {
+ display: flex;
+ align-items: center;
+ transition: $transition-link;
+
+ // Icon
+ .stepper-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ transition: $transition-link;
+ width: var(--kt-stepper-pills-size);
+ height: var(--kt-stepper-pills-size);
+ border-radius: var(--kt-stepper-icon-border-radius);
+ background-color: var(--kt-stepper-icon-bg-color);
+ border: var(--kt-stepper-icon-border);
+ margin-right: 1.5rem;
+
+ .stepper-check {
+ display: none;
+ font-size: var(--kt-stepper-icon-check-size);
+ }
+
+ .stepper-number {
+ font-weight: $font-weight-bold;
+ color: var(--kt-stepper-icon-number-color);
+ font-size: 1.25rem;
+ }
+ }
+
+ // Label
+ .stepper-label {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .stepper-title {
+ color: var(--kt-stepper-label-title-color);
+ opacity: var(--kt-stepper-label-title-opacity);
+ font-weight: 600;
+ font-size: 1.25rem;
+ margin-bottom: .3rem;
+ }
+
+ .stepper-desc {
+ opacity: var(--kt-stepper-label-desc-opacity);
+ color: var(--kt-stepper-label-desc-color);
+ }
+ }
+
+ // Current
+ &.current {
+ transition: $transition-link;
+
+ .stepper-icon {
+ transition: $transition-link;
+ background-color: var(--kt-stepper-icon-bg-color-current);
+ border: var(--kt-stepper-icon-border-current);
+
+ .stepper-check {
+ display: none;
+ }
+
+ .stepper-number {
+ color: var(--kt-stepper-icon-number-color-current);
+ font-size: 1.35rem;
+ }
+ }
+
+ .stepper-label {
+ .stepper-title {
+ opacity: var(--kt-stepper-label-title-opacity-current);
+ color: var(--kt-stepper-label-title-color-current);
+ }
+
+ .stepper-desc {
+ opacity: var(--kt-stepper-label-desc-opacity-current);
+ color: var(--kt-stepper-label-desc-color-current);
+ }
+ }
+ }
+
+ // Completed
+ &.current.mark-completed:last-child,
+ &.completed {
+ .stepper-icon {
+ transition: $transition-link;
+ background-color: var(--kt-stepper-icon-bg-color-completed);
+ border: var(--kt-stepper-icon-border-completed);
+
+ .stepper-check {
+ color: var(--kt-stepper-icon-check-color-completed);
+ display: inline-block;
+ }
+
+ .stepper-number {
+ display: none;
+ }
+ }
+
+ .stepper-label {
+ .stepper-title {
+ opacity: var(--kt-stepper-label-title-opacity-completed);
+ color: var(--kt-stepper-label-title-color-completed);
+ }
+
+ .stepper-desc {
+ opacity: var(--kt-stepper-label-desc-opacity-completed);
+ color: var(--kt-stepper-label-desc-color-completed);
+ }
+ }
+ }
+ }
+
+ // Column
+ &.stepper-column {
+ // Nav
+ .stepper-nav {
+ flex-direction: column;
+ align-items: start;
+ }
+
+ // Item
+ .stepper-item {
+ flex-direction: column;
+ justify-content: start;
+ align-items: stretch;
+ padding: 0;
+ margin: 0;
+ }
+
+ // Wrapper
+ .stepper-wrapper {
+ display: flex;
+ align-items: center;
+ }
+
+ // Icon
+ .stepper-icon {
+ z-index: 1;
+ }
+
+ // Line
+ .stepper-line {
+ display: block;
+ flex-grow: 1;
+ margin-left: calc(var(--kt-stepper-pills-size) / 2);
+ border-left: var(--kt-stepper-line-border);
+ margin-top: 2px;
+ margin-bottom: 2px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/_base.scss b/src/_metronic/assets/sass/core/layout/_base.scss
new file mode 100644
index 0000000..a2d8e61
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/_base.scss
@@ -0,0 +1,50 @@
+//
+// Root
+//
+
+html {
+ font-family: sans-serif;
+ text-size-adjust: 100%;
+}
+
+html,
+body {
+ height: 100%;
+ margin: 0px;
+ padding: 0px;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size: $root-font-size !important;
+ font-weight: $font-weight-base;
+ font-family: $font-family-sans-serif;
+
+ // Tablet mode
+ @include media-breakpoint-down(lg) {
+ font-size: $root-font-size-lg !important;
+ }
+
+ // Mobile mode
+ @include media-breakpoint-down(md) {
+ font-size: $root-font-size-md !important;
+ }
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+
+ a:hover,
+ a:active,
+ a:focus {
+ text-decoration: none !important;
+ }
+}
+
+canvas {
+ user-select: none;
+}
+
+// Angular integration
+router-outlet {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_container.scss b/src/_metronic/assets/sass/core/layout/base/_container.scss
new file mode 100644
index 0000000..8e19b06
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_container.scss
@@ -0,0 +1,30 @@
+//
+// Container
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-container {
+ padding-left: $app-container-padding-x !important;
+ padding-right: $app-container-padding-x !important;
+ }
+
+ .app-container-fit-desktop {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-container {
+ max-width: none;
+ padding-left: $app-container-padding-x-mobile !important;
+ padding-right: $app-container-padding-x-mobile !important;
+ }
+
+ .app-container-fit-mobile {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/layout/base/_content.scss b/src/_metronic/assets/sass/core/layout/base/_content.scss
new file mode 100644
index 0000000..6f9992e
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_content.scss
@@ -0,0 +1,24 @@
+//
+// Content
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-content {
+ padding-top: $app-content-padding-y;
+ padding-bottom: $app-content-padding-y;
+ padding-left: $app-content-padding-x;
+ padding-right: $app-content-padding-x;
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-content {
+ max-width: none;
+ padding-top: $app-content-padding-y-mobile;
+ padding-bottom: $app-content-padding-y-mobile;
+ padding-left: $app-content-padding-x-mobile;
+ padding-right: $app-content-padding-x-mobile;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_footer.scss b/src/_metronic/assets/sass/core/layout/base/_footer.scss
new file mode 100644
index 0000000..015a185
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_footer.scss
@@ -0,0 +1,103 @@
+//
+// Footer
+//
+
+// General mode
+.app-footer {
+ transition: $app-footer-transition;
+ display: flex;
+ align-items: stretch;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-footer {
+ @include property( z-index, $app-footer-z-index);
+
+ background-color: var(--kt-app-footer-bg-color);
+ box-shadow: var(--kt-app-footer-box-shadow);
+ border-top: var(--kt-app-footer-border-top);
+ }
+
+ // Vars
+ :root {
+ --kt-app-footer-height: #{$app-footer-height};
+ }
+
+ // States
+ .app-footer {
+ height: var(--kt-app-footer-height);
+
+ [data-kt-app-footer-fixed="true"] & {
+ @include property( z-index, $app-footer-fixed-z-index);
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+ }
+
+ // Integration
+ .app-footer {
+ // Sidebar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-footer="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-footer="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ // Aside
+ [data-kt-app-aside-fixed="true"][data-kt-app-aside-push-footer="true"] & {
+ right: calc(
+ var(--kt-app-aside-width) +
+ var(--kt-app-aside-gap-start, 0px) +
+ var(--kt-app-aside-gap-end, 0px)
+ );
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-footer {
+ @include property( z-index, $app-footer-z-index-mobile);
+
+ background-color: var(--kt-app-footer-bg-color-mobile);
+ box-shadow: var(--kt-app-footer-box-shadow-mobile);
+ border-top: var(--kt-app-footer-border-top-mobile);
+ }
+
+ // Vars
+ body {
+ --kt-app-footer-height: #{$app-footer-height-mobile};
+ }
+
+ // States
+ .app-footer {
+ height: var(--kt-app-footer-height);
+
+ [data-kt-app-footer-fixed-mobile="true"] & {
+ @include property( z-index, $app-footer-fixed-z-index-mobile);
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_hero.scss b/src/_metronic/assets/sass/core/layout/base/_hero.scss
new file mode 100644
index 0000000..7f843f2
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_hero.scss
@@ -0,0 +1,13 @@
+//
+// Hero
+//
+
+// General mode
+.app-hero {
+ display: flex;
+ align-items: stretch;
+ background-color: var(--kt-app-hero-bg-color);
+ box-shadow: var(--kt-app-hero-box-shadow);
+ border-top: var(--kt-app-hero-border-top);
+ border-bottom: var(--kt-app-hero-border-bottom);
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_layout-builder.scss b/src/_metronic/assets/sass/core/layout/base/_layout-builder.scss
new file mode 100644
index 0000000..513db2a
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_layout-builder.scss
@@ -0,0 +1,19 @@
+//
+// Layout builder
+//
+
+// General mode
+.app-layout-builder-toggle {
+ position: fixed;
+ z-index: $app-layout-builder-toggle-z-index;
+ bottom: $app-layout-builder-toggle-bottom;
+ right: $app-layout-builder-toggle-end;
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-layout-builder-toggle {
+ bottom: $app-layout-builder-toggle-bottom-mobile;
+ right: $app-layout-builder-toggle-end-mobile;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_layout.scss b/src/_metronic/assets/sass/core/layout/base/_layout.scss
new file mode 100644
index 0000000..e5e3c96
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_layout.scss
@@ -0,0 +1,28 @@
+//
+// App Layout
+//
+
+@import "mixins/layout-minimize";
+@import "mixins/layout-transition";
+@import "root";
+@import "reboot";
+@import "page";
+@import "page-loader";
+@import "container";
+@import "print";
+@import "navbar";
+@import "header/header";
+@import "header/header-primary";
+@import "header/header-secondary";
+@import "toolbar";
+@import "hero";
+@import "sidebar/sidebar";
+@import "sidebar/sidebar-primary";
+@import "sidebar/sidebar-secondary";
+@import "sidebar/sidebar-panel";
+@import "aside/aside";
+@import "wrapper";
+@import "main";
+@import "content";
+@import "footer";
+@import "layout-builder";
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_main.scss b/src/_metronic/assets/sass/core/layout/base/_main.scss
new file mode 100644
index 0000000..1d25756
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_main.scss
@@ -0,0 +1,75 @@
+//
+// Main
+//
+
+// General mode
+.app-main {
+ display: flex;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-main {
+ transition: $app-main-transition;
+
+ @include property( padding-left, $app-main-padding-x );
+ @include property( padding-right, $app-main-padding-x );
+ @include property( padding-top, $app-main-padding-y );
+ @include property( padding-bottom, $app-main-padding-y );
+
+ @include property( margin-left, $app-main-margin-x );
+ @include property( margin-right, $app-main-margin-x );
+ @include property( margin-top, $app-main-margin-y );
+ @include property( margin-bottom, $app-main-margin-y );
+ }
+
+ // Integration
+ .app-main {
+ // Sidebar
+ [data-kt-app-sidebar-sticky="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-sidebar-panel-sticky="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ // Aside
+ [data-kt-app-aside-sticky="true"] & {
+ margin-right: calc(
+ var(--kt-app-aside-width) +
+ var(--kt-app-aside-gap-start, 0px) +
+ var(--kt-app-aside-gap-end, 0px)
+ );
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-main {
+ @include property( padding-left, $app-main-padding-x-mobile );
+ @include property( padding-right, $app-main-padding-x-mobile );
+ @include property( padding-top, $app-main-padding-y-mobile );
+ @include property( padding-bottom, $app-main-padding-y-mobile );
+
+ @include property( margin-left, $app-main-margin-x-mobile );
+ @include property( margin-right, $app-main-margin-x-mobile );
+ @include property( margin-top, $app-main-margin-y-mobile );
+ @include property( margin-bottom, $app-main-margin-y-mobile );
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_navbar.scss b/src/_metronic/assets/sass/core/layout/base/_navbar.scss
new file mode 100644
index 0000000..a6d329c
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_navbar.scss
@@ -0,0 +1,19 @@
+//
+// App Navbar
+//
+
+.app-navbar {
+ display: flex;
+ align-items: stretch;
+
+ .app-navbar-item {
+ display: flex;
+ align-items: center;
+ }
+
+ &.app-navbar-stretch {
+ .app-navbar-item {
+ align-items: stretch;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_page-loader.scss b/src/_metronic/assets/sass/core/layout/base/_page-loader.scss
new file mode 100644
index 0000000..8ed8bfd
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_page-loader.scss
@@ -0,0 +1,31 @@
+//
+// Page loader
+//
+
+// CSS3 Transitions only after page load(data-kt-app-page-loading="on" attribute added to body tag and removed with JS on page loaded)
+[data-kt-app-page-loading="on"] {
+ overflow: hidden;
+}
+
+[data-kt-app-page-loading="on"] * {
+ transition: none !important;
+}
+
+// Base
+.app-page-loader {
+ background: var(--kt-body-bg);
+ color: var(--kt-body-color);
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 10000;
+ display: none;
+
+ [data-kt-app-page-loading="on"] & {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/layout/base/_page.scss b/src/_metronic/assets/sass/core/layout/base/_page.scss
new file mode 100644
index 0000000..78ec216
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_page.scss
@@ -0,0 +1,7 @@
+//
+// Page
+//
+
+.app-page {
+ display: flex;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_print.scss b/src/_metronic/assets/sass/core/layout/base/_print.scss
new file mode 100644
index 0000000..c4c76cb
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_print.scss
@@ -0,0 +1,34 @@
+//
+// Print
+//
+
+// Add .app-print-content-only class to body element in order to allow printing only the content area
+@media print {
+ .app-print-content-only {
+ padding: 0 !important;
+ background: none !important;
+
+ .app-wrapper,
+ .app-page,
+ .app-page-title,
+ .app-content,
+ .app-container {
+ background: none !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+
+ .app-aside,
+ .app-aside-panel,
+ .app-sidebar,
+ .app-sidebar-panel,
+ .app-header,
+ .app-footer,
+ .app-toolbar,
+ .drawer,
+ .scrolltop,
+ .btn {
+ display: none !important;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/layout/base/_reboot.scss b/src/_metronic/assets/sass/core/layout/base/_reboot.scss
new file mode 100644
index 0000000..eaa8c5f
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_reboot.scss
@@ -0,0 +1,65 @@
+//
+// Reboot
+//
+
+html {
+ font-family: sans-serif;
+ text-size-adjust: 100%;
+}
+
+html,
+body {
+ height: 100%;
+ margin: 0px;
+ padding: 0px;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size: $app-general-root-font-size-desktop !important;
+ font-weight: $font-weight-base;
+ font-family: $font-family-sans-serif;
+
+ // Tablet mode
+ @include media-breakpoint-down(lg) {
+ font-size: $app-general-root-font-size-tablet !important;
+ }
+
+ // Mobile mode
+ @include media-breakpoint-down(md) {
+ font-size: $app-general-root-font-size-mobile !important;
+ }
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+
+ a:hover,
+ a:active,
+ a:focus {
+ text-decoration: none !important;
+ }
+}
+
+canvas {
+ user-select: none;
+}
+
+// Angular integration
+router-outlet {
+ display: none;
+}
+
+// Layouts
+body,
+.app-default {
+ background-color: var(--kt-app-bg-color);
+}
+
+.app-blank {
+ background-color: var(--kt-app-blank-bg-color);
+}
+
+// Reset CSS3 Transitions for child elements
+[data-kt-app-reset-transition="true"] * {
+ transition: none !important;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_root.scss b/src/_metronic/assets/sass/core/layout/base/_root.scss
new file mode 100644
index 0000000..f1c7ccd
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_root.scss
@@ -0,0 +1,496 @@
+//
+// Root
+//
+
+:root,
+[data-theme="light"] {
+ // Layouts
+ @include property(--kt-app-bg-color, $app-bg-color);
+ @include property(--kt-app-blank-bg-color, $app-blank-bg-color);
+
+ // Header base
+ @include property(--kt-app-header-base-bg-color, $app-header-base-bg-color);
+ @include property(--kt-app-header-base-bg-color-mobile, $app-header-base-bg-color-mobile);
+ @include property(--kt-app-header-base-box-shadow, $app-header-base-box-shadow);
+ @include property(--kt-app-header-base-box-shadow-mobile, $app-header-base-box-shadow-mobile);
+ @include property(--kt-app-header-base-border-bottom, $app-header-base-border-bottom);
+ @include property(--kt-app-header-base-border-bottom-mobile, $app-header-base-border-bottom-mobile);
+
+ // Header minimize
+ @include property(--kt-app-header-minimize-bg-color, $app-header-minimize-bg-color);
+ @include property(--kt-app-header-minimize-bg-color-mobile, $app-header-minimize-bg-color-mobile);
+ @include property(--kt-app-header-minimize-box-shadow, $app-header-minimize-box-shadow);
+ @include property(--kt-app-header-minimize-box-shadow-mobile, $app-header-minimize-box-shadow-mobile);
+ @include property(--kt-app-header-minimize-border-bottom, $app-header-minimize-border-bottom);
+ @include property(--kt-app-header-minimize-border-bottom-mobile, $app-header-minimize-border-bottom-mobile);
+
+ // Header sticky
+ @include property(--kt-app-header-sticky-bg-color, $app-header-sticky-bg-color);
+ @include property(--kt-app-header-sticky-bg-color-mobile, $app-header-sticky-bg-color-mobile);
+ @include property(--kt-app-header-sticky-box-shadow, $app-header-sticky-box-shadow);
+ @include property(--kt-app-header-sticky-box-shadow-mobile, $app-header-sticky-box-shadow-mobile);
+ @include property(--kt-app-header-sticky-border-bottom, $app-header-sticky-border-bottom);
+ @include property(--kt-app-header-sticky-border-bottom-mobile, $app-header-sticky-border-bottom-mobile);
+
+ // Header primary
+ @include property(--kt-app-header-primary-base-bg-color, $app-header-primary-base-bg-color);
+ @include property(--kt-app-header-primary-base-bg-color-mobile, $app-header-primary-base-bg-color-mobile);
+ @include property(--kt-app-header-primary-base-box-shadow, $app-header-primary-base-box-shadow);
+ @include property(--kt-app-header-primary-base-box-shadow-mobile, $app-header-primary-base-box-shadow-mobile);
+ @include property(--kt-app-header-primary-base-border-bottom, $app-header-primary-base-border-bottom);
+ @include property(--kt-app-header-primary-base-border-bottom-mobile, $app-header-primary-base-border-bottom-mobile);
+
+ @include property(--kt-app-header-primary-minimize-bg-color, $app-header-primary-minimize-bg-color);
+ @include property(--kt-app-header-primary-minimize-box-shadow, $app-header-primary-minimize-box-shadow);
+ @include property(--kt-app-header-primary-minimize-border-top, $app-header-primary-minimize-border-top);
+ @include property(--kt-app-header-primary-minimize-border-bottom, $app-header-primary-minimize-border-bottom);
+
+ @include property(--kt-app-header-primary-sticky-bg-color, $app-header-primary-sticky-bg-color);
+ @include property(--kt-app-header-primary-sticky-box-shadow, $app-header-primary-sticky-box-shadow);
+ @include property(--kt-app-header-primary-sticky-border-top, $app-header-primary-sticky-border-top);
+ @include property(--kt-app-header-primary-sticky-border-bottom, $app-header-primary-sticky-border-bottom);
+
+ // Header secondary
+ @include property(--kt-app-header-secondary-base-bg-color, $app-header-secondary-base-bg-color);
+ @include property(--kt-app-header-secondary-base-bg-color-mobile, $app-header-secondary-base-bg-color-mobile);
+ @include property(--kt-app-header-secondary-base-box-shadow, $app-header-secondary-base-box-shadow);
+ @include property(--kt-app-header-secondary-base-box-shadow-mobile, $app-header-secondary-base-box-shadow-mobile);
+ @include property(--kt-app-header-secondary-base-border-top, $app-header-secondary-base-border-top);
+ @include property(--kt-app-header-secondary-base-border-bottom, $app-header-secondary-base-border-bottom);
+ @include property(--kt-app-header-secondary-base-border-start-mobile, $app-header-secondary-base-border-bottom);
+ @include property(--kt-app-header-secondary-base-border-end-mobile, $app-header-secondary-base-border-end-mobile);
+
+ // Header secondary minimize
+ @include property(--kt-app-header-secondary-minimize-bg-color, $app-header-secondary-minimize-bg-color);
+ @include property(--kt-app-header-secondary-minimize-box-shadow, $app-header-secondary-minimize-box-shadow);
+ @include property(--kt-app-header-secondary-minimize-border-top, $app-header-secondary-minimize-border-top);
+ @include property(--kt-app-header-secondary-minimize-border-bottom, $app-header-secondary-minimize-border-bottom);
+
+ // Header secondary sticky
+ @include property(--kt-app-header-secondary-sticky-bg-color, $app-header-secondary-sticky-bg-color);
+ @include property(--kt-app-header-secondary-sticky-box-shadow, $app-header-secondary-sticky-box-shadow);
+ @include property(--kt-app-header-secondary-sticky-border-top, $app-header-secondary-sticky-border-top);
+ @include property(--kt-app-header-secondary-sticky-border-bottom, $app-header-secondary-sticky-border-bottom);
+
+ // Toolbar base
+ @include property(--kt-app-toolbar-base-bg-color, $app-toolbar-base-bg-color);
+ @include property(--kt-app-toolbar-base-bg-color-mobile, $app-toolbar-base-bg-color-mobile);
+ @include property(--kt-app-toolbar-base-box-shadow, $app-toolbar-base-box-shadow);
+ @include property(--kt-app-toolbar-base-box-shadow-mobile, $app-toolbar-base-box-shadow-mobile);
+ @include property(--kt-app-toolbar-base-border-top, $app-toolbar-base-border-top);
+ @include property(--kt-app-toolbar-base-border-top-mobile, $app-toolbar-base-border-top-mobile);
+ @include property(--kt-app-toolbar-base-border-bottom, $app-toolbar-base-border-bottom);
+ @include property(--kt-app-toolbar-base-border-bottom-mobile, $app-toolbar-base-border-bottom);
+
+ // Toolbar minimize
+ @include property(--kt-app-toolbar-minimize-bg-color, $app-toolbar-minimize-bg-color);
+ @include property(--kt-app-toolbar-minimize-bg-color-mobile, $app-toolbar-minimize-bg-color-mobile);
+ @include property(--kt-app-toolbar-minimize-box-shadow, $app-toolbar-minimize-box-shadow);
+ @include property(--kt-app-toolbar-minimize-box-shadow-mobile, $app-toolbar-minimize-box-shadow-mobile);
+ @include property(--kt-app-toolbar-minimize-border-top, $app-toolbar-minimize-border-top);
+ @include property(--kt-app-toolbar-minimize-border-top-mobile, $app-toolbar-minimize-border-top-mobile);
+ @include property(--kt-app-toolbar-minimize-border-bottom, $app-toolbar-minimize-border-bottom);
+ @include property(--kt-app-toolbar-minimize-border-bottom-mobile, $app-toolbar-minimize-border-bottom-mobile);
+
+ // Toolbar sticky
+ @include property(--kt-app-toolbar-sticky-bg-color, $app-toolbar-sticky-bg-color);
+ @include property(--kt-app-toolbar-sticky-bg-color-mobile, $app-toolbar-sticky-bg-color-mobile);
+ @include property(--kt-app-toolbar-sticky-box-shadow, $app-toolbar-sticky-box-shadow);
+ @include property(--kt-app-toolbar-sticky-box-shadow-mobile, $app-toolbar-sticky-box-shadow-mobile);
+ @include property(--kt-app-toolbar-sticky-border-top, $app-toolbar-sticky-border-top);
+ @include property(--kt-app-toolbar-sticky-border-top-mobile, $app-toolbar-sticky-border-top-mobile);
+ @include property(--kt-app-toolbar-sticky-border-bottom, $app-toolbar-sticky-border-bottom);
+ @include property(--kt-app-toolbar-sticky-border-bottom-mobile, $app-toolbar-sticky-border-bottom-mobile);
+
+ // Sidebar base
+ @include property(--kt-app-sidebar-base-bg-color, $app-sidebar-base-bg-color);
+ @include property(--kt-app-sidebar-base-bg-color-mobile, $app-sidebar-base-bg-color-mobile);
+ @include property(--kt-app-sidebar-base-box-shadow, $app-sidebar-base-box-shadow);
+ @include property(--kt-app-sidebar-base-box-shadow-mobile, $app-sidebar-base-box-shadow-mobile);
+ @include property(--kt-app-sidebar-base-border-start, $app-sidebar-base-border-start);
+ @include property(--kt-app-sidebar-base-border-start-mobile, $app-sidebar-base-border-start-mobile);
+ @include property(--kt-app-sidebar-base-border-end, $app-sidebar-base-border-end);
+ @include property(--kt-app-sidebar-base-border-end-mobile, $app-sidebar-base-border-end-mobile);
+
+ // Hero
+ @include property(--kt-app-hero-bg-color, $app-hero-bg-color);
+ @include property(--kt-app-hero-box-shadow, $app-hero-box-shadow);
+ @include property(--kt-app-hero-border-top, $app-hero-border-top);
+ @include property(--kt-app-hero-border-bottom, $app-hero-border-bottom);
+
+ // Sidebar sticky
+ @include property(--kt-app-sidebar-sticky-bg-color, $app-sidebar-sticky-bg-color);
+ @include property(--kt-app-sidebar-sticky-box-shadow, $app-sidebar-sticky-box-shadow);
+ @include property(--kt-app-sidebar-sticky-border-start, $app-sidebar-sticky-border-start);
+ @include property(--kt-app-sidebar-sticky-border-end, $app-sidebar-sticky-border-end);
+
+ // Sidebar minimize
+ @include property(--kt-app-sidebar-minimize-bg-color, $app-sidebar-minimize-bg-color);
+ @include property(--kt-app-sidebar-minimize-bg-color-mobile, $app-sidebar-minimize-bg-color-mobile);
+ @include property(--kt-app-sidebar-minimize-box-shadow, $app-sidebar-minimize-box-shadow);
+ @include property(--kt-app-sidebar-minimize-box-shadow-mobile, $app-sidebar-minimize-box-shadow-mobile);
+ @include property(--kt-app-sidebar-minimize-hover-box-shadow, $app-sidebar-minimize-hover-box-shadow);
+ @include property(--kt-app-sidebar-minimize-hover-box-shadow-mobile, $app-sidebar-minimize-hover-box-shadow-mobile);
+ @include property(--kt-app-sidebar-minimize-border-start, $app-sidebar-minimize-border-start);
+ @include property(--kt-app-sidebar-minimize-border-start-mobile, $app-sidebar-minimize-border-start-mobile);
+ @include property(--kt-app-sidebar-minimize-border-end, $app-sidebar-minimize-border-end);
+ @include property(--kt-app-sidebar-minimize-border-end-mobile, $app-sidebar-minimize-border-end-mobile);
+
+ // Sidebar primary
+ @include property(--kt-app-sidebar-primary-base-bg-color, $app-sidebar-primary-base-bg-color);
+ @include property(--kt-app-sidebar-primary-base-bg-color-mobile, $app-sidebar-primary-base-bg-color-mobile);
+ @include property(--kt-app-sidebar-primary-base-box-shadow, $app-sidebar-primary-base-box-shadow);
+ @include property(--kt-app-sidebar-primary-base-box-shadow-mobile, $app-sidebar-primary-base-box-shadow-mobile);
+ @include property(--kt-app-sidebar-primary-base-border-start, $app-sidebar-primary-base-border-start);
+ @include property(--kt-app-sidebar-primary-base-border-start-mobile, $app-sidebar-primary-base-border-start-mobile);
+ @include property(--kt-app-sidebar-primary-base-border-end, $app-sidebar-primary-base-border-end);
+ @include property(--kt-app-sidebar-primary-base-border-end-mobile, $app-sidebar-primary-base-border-end-mobile);
+
+ // Sidebar primary minimize
+ @include property(--kt-app-sidebar-primary-minimize-bg-color, $app-sidebar-primary-base-border-end-mobile);
+ @include property(--kt-app-sidebar-primary-minimize-bg-color-mobile, $app-sidebar-primary-minimize-bg-color-mobile);
+ @include property(--kt-app-sidebar-primary-minimize-box-shadow, $app-sidebar-primary-minimize-box-shadow);
+ @include property(--kt-app-sidebar-primary-minimize-box-shadow-mobile, $app-sidebar-primary-minimize-box-shadow-mobile);
+ @include property(--kt-app-sidebar-primary-minimize-hover-box-shadow, $app-sidebar-primary-minimize-hover-box-shadow);
+ @include property(--kt-app-sidebar-primary-minimize-hover-box-shadow-mobile, $app-sidebar-primary-minimize-hover-box-shadow-mobile);
+ @include property(--kt-app-sidebar-primary-minimize-border-start, $app-sidebar-primary-minimize-border-start);
+ @include property(--kt-app-sidebar-primary-minimize-border-start-mobile, $app-sidebar-primary-minimize-border-start-mobile);
+ @include property(--kt-app-sidebar-primary-minimize-border-end, $app-sidebar-primary-minimize-border-end);
+ @include property(--kt-app-sidebar-primary-minimize-border-end-mobile, $app-sidebar-primary-minimize-border-end-mobile);
+
+ // Sidebar secondary base
+ @include property(--kt-app-sidebar-secondary-base-bg-color, $app-sidebar-secondary-base-bg-color);
+ @include property(--kt-app-sidebar-secondary-base-bg-color-mobile, $app-sidebar-secondary-base-bg-color-mobile);
+ @include property(--kt-app-sidebar-secondary-base-box-shadow, $app-sidebar-secondary-base-box-shadow);
+ @include property(--kt-app-sidebar-secondary-base-box-shadow-mobile, $app-sidebar-secondary-base-box-shadow-mobile);
+ @include property(--kt-app-sidebar-secondary-base-border-start, $app-sidebar-secondary-base-border-start);
+ @include property(--kt-app-sidebar-secondary-base-border-start-mobile, $app-sidebar-secondary-base-border-start-mobile);
+ @include property(--kt-app-sidebar-secondary-base-border-end, $app-sidebar-secondary-base-border-end);
+ @include property(--kt-app-sidebar-secondary-base-border-end-mobile, $app-sidebar-secondary-base-border-end-mobile);
+
+ // Sidebar secondary minimize
+ @include property(--kt-app-sidebar-secondary-minimize-bg-color, $app-sidebar-secondary-minimize-bg-color);
+ @include property(--kt-app-sidebar-secondary-minimize-bg-color-mobile, $app-sidebar-secondary-minimize-bg-color-mobile);
+ @include property(--kt-app-sidebar-secondary-minimize-box-shadow, $app-sidebar-secondary-minimize-box-shadow);
+ @include property(--kt-app-sidebar-secondary-minimize-box-shadow-mobile, $app-sidebar-secondary-minimize-box-shadow-mobile);
+ @include property(--kt-app-sidebar-secondary-minimize-hover-box-shadow, $app-sidebar-secondary-minimize-hover-box-shadow);
+ @include property(--kt-app-sidebar-secondary-minimize-hover-box-shadow-mobile, $app-sidebar-secondary-minimize-hover-box-shadow-mobile);
+ @include property(--kt-app-sidebar-secondary-minimize-border-start, $app-sidebar-secondary-minimize-border-start);
+ @include property(--kt-app-sidebar-secondary-minimize-border-start-mobile, $app-sidebar-secondary-minimize-border-start-mobile);
+ @include property(--kt-app-sidebar-secondary-minimize-border-end, $app-sidebar-secondary-minimize-border-end);
+ @include property(--kt-app-sidebar-secondary-minimize-border-end-mobile, $app-sidebar-secondary-minimize-border-end-mobile);
+
+ // Sidebar panel base
+ @include property(--kt-app-sidebar-panel-base-bg-color, $app-sidebar-panel-base-bg-color);
+ @include property(--kt-app-sidebar-panel-base-bg-color-mobile, $app-sidebar-panel-base-bg-color-mobile);
+ @include property(--kt-app-sidebar-panel-base-box-shadow, $app-sidebar-panel-base-box-shadow);
+ @include property(--kt-app-sidebar-panel-base-box-shadow-mobile, $app-sidebar-panel-base-box-shadow-mobile);
+ @include property(--kt-app-sidebar-panel-base-border-start, $app-sidebar-panel-base-border-start);
+ @include property(--kt-app-sidebar-panel-base-border-start-mobile, $app-sidebar-panel-base-border-start-mobile);
+ @include property(--kt-app-sidebar-panel-base-border-end, $app-sidebar-panel-base-border-end);
+ @include property(--kt-app-sidebar-panel-base-border-end-mobile, $app-sidebar-panel-base-border-end-mobile);
+
+ // Sidebar panel sticky
+ @include property(--kt-app-sidebar-panel-sticky-bg-color, $app-sidebar-panel-sticky-bg-color);
+ @include property(--kt-app-sidebar-panel-sticky-box-shadow, $app-sidebar-panel-sticky-box-shadow);
+ @include property(--kt-app-sidebar-panel-sticky-border-start, $app-sidebar-panel-sticky-border-start);
+ @include property(--kt-app-sidebar-panel-sticky-border-end, $app-sidebar-panel-sticky-border-end);
+
+ // Sidebar panel minimize
+ @include property(--kt-app-sidebar-panel-minimize-bg-color, $app-sidebar-panel-minimize-bg-color);
+ @include property(--kt-app-sidebar-panel-minimize-bg-color-mobile, $app-sidebar-panel-minimize-bg-color-mobile);
+ @include property(--kt-app-sidebar-panel-minimize-box-shadow, $app-sidebar-panel-minimize-box-shadow);
+ @include property(--kt-app-sidebar-panel-minimize-box-shadow-mobile, $app-sidebar-panel-minimize-box-shadow-mobile);
+ @include property(--kt-app-sidebar-panel-minimize-hover-box-shadow, $app-sidebar-panel-minimize-hover-box-shadow);
+ @include property(--kt-app-sidebar-panel-minimize-hover-box-shadow-mobile, $app-sidebar-panel-minimize-hover-box-shadow-mobile);
+ @include property(--kt-app-sidebar-panel-minimize-border-start, $app-sidebar-panel-minimize-border-start);
+ @include property(--kt-app-sidebar-panel-minimize-border-start-mobile, $app-sidebar-panel-minimize-border-start-mobile);
+ @include property(--kt-app-sidebar-panel-minimize-border-end, $app-sidebar-panel-minimize-border-end);
+ @include property(--kt-app-sidebar-panel-minimize-border-end-mobile, $app-sidebar-panel-minimize-border-end-mobile);
+
+ // Aside base
+ @include property(--kt-app-aside-base-bg-color, $app-aside-base-bg-color);
+ @include property(--kt-app-aside-base-bg-color-mobile, $app-aside-base-bg-color-mobile);
+ @include property(--kt-app-aside-base-box-shadow, $app-aside-base-box-shadow);
+ @include property(--kt-app-aside-base-box-shadow-mobile, $app-aside-base-box-shadow-mobile);
+ @include property(--kt-app-aside-base-border-start, $app-aside-base-border-start);
+ @include property(--kt-app-aside-base-border-start-mobile, $app-aside-base-border-start-mobile);
+ @include property(--kt-app-aside-base-border-end, $app-aside-base-border-end);
+ @include property(--kt-app-aside-base-border-end-mobile, $app-aside-base-border-end-mobile);
+
+ // Aside sticky
+ @include property(--kt-app-aside-sticky-bg-color, $app-aside-sticky-bg-color);
+ @include property(--kt-app-aside-sticky-box-shadow, $app-aside-sticky-box-shadow);
+ @include property(--kt-app-aside-sticky-border-start, $app-aside-sticky-border-start);
+ @include property(--kt-app-aside-sticky-border-end, $app-aside-sticky-border-end);
+
+ // Aside minimize
+ @include property(--kt-app-aside-minimize-bg-color, $app-aside-minimize-bg-color);
+ @include property(--kt-app-aside-minimize-bg-color-mobile, $app-aside-minimize-bg-color-mobile);
+ @include property(--kt-app-aside-minimize-box-shadow, $app-aside-minimize-box-shadow);
+ @include property(--kt-app-aside-minimize-box-shadow-mobile, $app-aside-minimize-box-shadow-mobile);
+ @include property(--kt-app-aside-minimize-hover-box-shadow, $app-aside-minimize-hover-box-shadow);
+ @include property(--kt-app-aside-minimize-hover-box-shadow-mobile, $app-aside-minimize-hover-box-shadow-mobile);
+ @include property(--kt-app-aside-minimize-border-start, $app-aside-minimize-border-start);
+ @include property(--kt-app-aside-minimize-border-start-mobile, $app-aside-minimize-border-start-mobile);
+ @include property(--kt-app-aside-minimize-border-end, $app-aside-minimize-border-end);
+ @include property(--kt-app-aside-minimize-border-end-mobile, $app-aside-minimize-border-end-mobile);
+
+ // Page
+ @include property(--kt-app-page-bg-color, $app-page-bg-color);
+
+ // Wrapper
+ @include property(--kt-app-wrapper-bg-color, $app-wrapper-bg-color);
+
+ // Footer
+ @include property(--kt-app-footer-bg-color, $app-footer-bg-color);
+ @include property(--kt-app-footer-bg-color-mobile, $app-footer-bg-color-mobile);
+ @include property(--kt-app-footer-box-shadow, $app-footer-box-shadow);
+ @include property(--kt-app-footer-box-shadow-mobile, $app-footer-box-shadow-mobile);
+ @include property(--kt-app-footer-border-top, $app-footer-border-top);
+ @include property(--kt-app-footer-border-top-mobile, $app-footer-border-top-mobile);
+}
+
+[data-theme="dark"] {
+ // Layouts
+ @include property(--kt-app-bg-color, $app-bg-color-dark);
+ @include property(--kt-app-blank-bg-color, $app-blank-bg-color-dark);
+
+ // Header base
+ @include property(--kt-app-header-base-bg-color, $app-header-base-bg-color-dark);
+ @include property(--kt-app-header-base-bg-color-mobile, $app-header-base-bg-color-mobile-dark);
+ @include property(--kt-app-header-base-box-shadow, $app-header-base-box-shadow-dark);
+ @include property(--kt-app-header-base-box-shadow-mobile, $app-header-base-box-shadow-mobile-dark);
+ @include property(--kt-app-header-base-border-bottom, $app-header-base-border-bottom-dark);
+ @include property(--kt-app-header-base-border-bottom-mobile, $app-header-base-border-bottom-mobile-dark);
+
+ // Header minimize
+ @include property(--kt-app-header-minimize-bg-color, $app-header-minimize-bg-color-dark);
+ @include property(--kt-app-header-minimize-bg-color-mobile, $app-header-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-header-minimize-box-shadow, $app-header-minimize-box-shadow-dark);
+ @include property(--kt-app-header-minimize-box-shadow-mobile, $app-header-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-header-minimize-border-bottom, $app-header-minimize-border-bottom-dark);
+ @include property(--kt-app-header-minimize-border-bottom-mobile, $app-header-minimize-border-bottom-mobile-dark);
+
+ // Header sticky
+ @include property(--kt-app-header-sticky-bg-color, $app-header-sticky-bg-color-dark);
+ @include property(--kt-app-header-sticky-bg-color-mobile, $app-header-sticky-bg-color-mobile-dark);
+ @include property(--kt-app-header-sticky-box-shadow, $app-header-sticky-box-shadow-dark);
+ @include property(--kt-app-header-sticky-box-shadow-mobile, $app-header-sticky-box-shadow-mobile-dark);
+ @include property(--kt-app-header-sticky-border-bottom, $app-header-sticky-border-bottom-dark);
+ @include property(--kt-app-header-sticky-border-bottom-mobile, $app-header-sticky-border-bottom-mobile-dark);
+
+ // Header primary
+ @include property(--kt-app-header-primary-base-bg-color, $app-header-primary-base-bg-color-dark);
+ @include property(--kt-app-header-primary-base-bg-color-mobile, $app-header-primary-base-bg-color-mobile-dark);
+ @include property(--kt-app-header-primary-base-box-shadow, $app-header-primary-base-box-shadow-dark);
+ @include property(--kt-app-header-primary-base-box-shadow-mobile, $app-header-primary-base-box-shadow-mobile-dark);
+ @include property(--kt-app-header-primary-base-border-bottom, $app-header-primary-base-border-bottom-dark);
+ @include property(--kt-app-header-primary-base-border-bottom-mobile, $app-header-primary-base-border-bottom-mobile-dark);
+
+ @include property(--kt-app-header-primary-minimize-bg-color, $app-header-primary-minimize-bg-color-dark);
+ @include property(--kt-app-header-primary-minimize-box-shadow, $app-header-primary-minimize-box-shadow-dark);
+ @include property(--kt-app-header-primary-minimize-border-top, $app-header-primary-minimize-border-top-dark);
+ @include property(--kt-app-header-primary-minimize-border-bottom, $app-header-primary-minimize-border-bottom-dark);
+
+ @include property(--kt-app-header-primary-sticky-bg-color, $app-header-primary-sticky-bg-color-dark);
+ @include property(--kt-app-header-primary-sticky-box-shadow, $app-header-primary-sticky-box-shadow-dark);
+ @include property(--kt-app-header-primary-sticky-border-top, $app-header-primary-sticky-border-top-dark);
+ @include property(--kt-app-header-primary-sticky-border-bottom, $app-header-primary-sticky-border-bottom-dark);
+
+ // Header secondary
+ @include property(--kt-app-header-secondary-base-bg-color, $app-header-secondary-base-bg-color-dark);
+ @include property(--kt-app-header-secondary-base-bg-color-mobile, $app-header-secondary-base-bg-color-mobile-dark);
+ @include property(--kt-app-header-secondary-base-box-shadow, $app-header-secondary-base-box-shadow-dark);
+ @include property(--kt-app-header-secondary-base-box-shadow-mobile, $app-header-secondary-base-box-shadow-mobile-dark);
+ @include property(--kt-app-header-secondary-base-border-top, $app-header-secondary-base-border-top-dark);
+ @include property(--kt-app-header-secondary-base-border-bottom, $app-header-secondary-base-border-bottom-dark);
+ @include property(--kt-app-header-secondary-base-border-start-mobile, $app-header-secondary-base-border-bottom-dark);
+ @include property(--kt-app-header-secondary-base-border-end-mobile, $app-header-secondary-base-border-end-mobile-dark);
+
+ @include property(--kt-app-header-secondary-minimize-bg-color, $app-header-secondary-minimize-bg-color-dark);
+ @include property(--kt-app-header-secondary-minimize-box-shadow, $app-header-secondary-minimize-box-shadow-dark);
+ @include property(--kt-app-header-secondary-minimize-border-top, $app-header-secondary-minimize-border-top-dark);
+ @include property(--kt-app-header-secondary-minimize-border-bottom, $app-header-secondary-minimize-border-bottom-dark);
+
+ @include property(--kt-app-header-secondary-sticky-bg-color, $app-header-secondary-sticky-bg-color-dark);
+ @include property(--kt-app-header-secondary-sticky-box-shadow, $app-header-secondary-sticky-box-shadow-dark);
+ @include property(--kt-app-header-secondary-sticky-border-top, $app-header-secondary-sticky-border-top-dark);
+ @include property(--kt-app-header-secondary-sticky-border-bottom, $app-header-secondary-sticky-border-bottom-dark);
+
+ // Toolbar base
+ @include property(--kt-app-toolbar-base-bg-color, $app-toolbar-base-bg-color-dark);
+ @include property(--kt-app-toolbar-base-bg-color-mobile, $app-toolbar-base-bg-color-mobile-dark);
+ @include property(--kt-app-toolbar-base-box-shadow, $app-toolbar-base-box-shadow-dark);
+ @include property(--kt-app-toolbar-base-box-shadow-mobile, $app-toolbar-base-box-shadow-mobile-dark);
+ @include property(--kt-app-toolbar-base-border-top, $app-toolbar-base-border-top-dark);
+ @include property(--kt-app-toolbar-base-border-top-mobile, $app-toolbar-base-border-top-mobile-dark);
+ @include property(--kt-app-toolbar-base-border-bottom, $app-toolbar-base-border-bottom-dark);
+ @include property(--kt-app-toolbar-base-border-bottom-mobile, $app-toolbar-base-border-bottom-dark);
+
+ // Toolbar minimize
+ @include property(--kt-app-toolbar-minimize-bg-color, $app-toolbar-minimize-bg-color-dark);
+ @include property(--kt-app-toolbar-minimize-bg-color-mobile, $app-toolbar-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-toolbar-minimize-box-shadow, $app-toolbar-minimize-box-shadow-dark);
+ @include property(--kt-app-toolbar-minimize-box-shadow-mobile, $app-toolbar-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-toolbar-minimize-border-top, $app-toolbar-minimize-border-top-dark);
+ @include property(--kt-app-toolbar-minimize-border-top-mobile, $app-toolbar-minimize-border-top-mobile-dark);
+ @include property(--kt-app-toolbar-minimize-border-bottom, $app-toolbar-minimize-border-bottom-dark);
+ @include property(--kt-app-toolbar-minimize-border-bottom-mobile, $app-toolbar-minimize-border-bottom-mobile-dark);
+
+ // Toolbar sticky
+ @include property(--kt-app-toolbar-sticky-bg-color, $app-toolbar-sticky-bg-color-dark);
+ @include property(--kt-app-toolbar-sticky-bg-color-mobile, $app-toolbar-sticky-bg-color-mobile-dark);
+ @include property(--kt-app-toolbar-sticky-box-shadow, $app-toolbar-sticky-box-shadow-dark);
+ @include property(--kt-app-toolbar-sticky-box-shadow-mobile, $app-toolbar-sticky-box-shadow-mobile-dark);
+ @include property(--kt-app-toolbar-sticky-border-top, $app-toolbar-sticky-border-top-dark);
+ @include property(--kt-app-toolbar-sticky-border-top-mobile, $app-toolbar-sticky-border-top-mobile-dark);
+ @include property(--kt-app-toolbar-sticky-border-bottom, $app-toolbar-sticky-border-bottom-dark);
+ @include property(--kt-app-toolbar-sticky-border-bottom-mobile, $app-toolbar-sticky-border-bottom-mobile-dark);
+
+ // Hero
+ @include property(--kt-app-hero-bg-color, $app-hero-bg-color-dark);
+ @include property(--kt-app-hero-box-shadow, $app-hero-box-shadow-dark);
+ @include property(--kt-app-hero-border-top, $app-hero-border-top-dark);
+ @include property(--kt-app-hero-border-bottom, $app-hero-border-bottom-dark);
+
+ // Sidebar base
+ @include property(--kt-app-sidebar-base-bg-color, $app-sidebar-base-bg-color-dark);
+ @include property(--kt-app-sidebar-base-bg-color-mobile, $app-sidebar-base-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-base-box-shadow, $app-sidebar-base-box-shadow-dark);
+ @include property(--kt-app-sidebar-base-box-shadow-mobile, $app-sidebar-base-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-base-border-start, $app-sidebar-base-border-start-dark);
+ @include property(--kt-app-sidebar-base-border-start-mobile, $app-sidebar-base-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-base-border-end, $app-sidebar-base-border-end-dark);
+ @include property(--kt-app-sidebar-base-border-end-mobile, $app-sidebar-base-border-end-mobile-dark);
+
+ // Sidebar sticky
+ @include property(--kt-app-sidebar-sticky-bg-color, $app-sidebar-sticky-bg-color-dark);
+ @include property(--kt-app-sidebar-sticky-box-shadow, $app-sidebar-sticky-box-shadow-dark);
+ @include property(--kt-app-sidebar-sticky-border-start, $app-sidebar-sticky-border-start-dark);
+ @include property(--kt-app-sidebar-sticky-border-end, $app-sidebar-sticky-border-end-dark);
+
+ // Sidebar minimize
+ @include property(--kt-app-sidebar-minimize-bg-color, $app-sidebar-minimize-bg-color-dark);
+ @include property(--kt-app-sidebar-minimize-bg-color-mobile, $app-sidebar-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-minimize-box-shadow, $app-sidebar-minimize-box-shadow-dark);
+ @include property(--kt-app-sidebar-minimize-box-shadow-mobile, $app-sidebar-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-minimize-hover-box-shadow, $app-sidebar-minimize-hover-box-shadow-dark);
+ @include property(--kt-app-sidebar-minimize-hover-box-shadow-mobile, $app-sidebar-minimize-hover-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-minimize-border-start, $app-sidebar-minimize-border-start-dark);
+ @include property(--kt-app-sidebar-minimize-border-start-mobile, $app-sidebar-minimize-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-minimize-border-end, $app-sidebar-minimize-border-end-dark);
+ @include property(--kt-app-sidebar-minimize-border-end-mobile, $app-sidebar-minimize-border-end-mobile-dark);
+
+ // Sidebar primary
+ @include property(--kt-app-sidebar-primary-base-bg-color, $app-sidebar-primary-base-bg-color-dark);
+ @include property(--kt-app-sidebar-primary-base-bg-color-mobile, $app-sidebar-primary-base-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-primary-base-box-shadow, $app-sidebar-primary-base-box-shadow-dark);
+ @include property(--kt-app-sidebar-primary-base-box-shadow-mobile, $app-sidebar-primary-base-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-primary-base-border-start, $app-sidebar-primary-base-border-start-dark);
+ @include property(--kt-app-sidebar-primary-base-border-start-mobile, $app-sidebar-primary-base-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-primary-base-border-end, $app-sidebar-primary-base-border-end-dark);
+ @include property(--kt-app-sidebar-primary-base-border-end-mobile, $app-sidebar-primary-base-border-end-mobile-dark);
+
+ @include property(--kt-app-sidebar-primary-minimize-bg-color, $app-sidebar-primary-base-border-end-mobile-dark);
+ @include property(--kt-app-sidebar-primary-minimize-bg-color-mobile, $app-sidebar-primary-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-primary-minimize-box-shadow, $app-sidebar-primary-minimize-box-shadow-dark);
+ @include property(--kt-app-sidebar-primary-minimize-box-shadow-mobile, $app-sidebar-primary-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-primary-minimize-hover-box-shadow, $app-sidebar-primary-minimize-hover-box-shadow-dark);
+ @include property(--kt-app-sidebar-primary-minimize-hover-box-shadow-mobile, $app-sidebar-primary-minimize-hover-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-primary-minimize-border-start, $app-sidebar-primary-minimize-border-start-dark);
+ @include property(--kt-app-sidebar-primary-minimize-border-start-mobile, $app-sidebar-primary-minimize-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-primary-minimize-border-end, $app-sidebar-primary-minimize-border-end-dark);
+ @include property(--kt-app-sidebar-primary-minimize-border-end-mobile, $app-sidebar-primary-minimize-border-end-mobile-dark);
+
+ // Sidebar secondary
+ @include property(--kt-app-sidebar-secondary-base-bg-color, $app-sidebar-secondary-base-bg-color-dark);
+ @include property(--kt-app-sidebar-secondary-base-bg-color-mobile, $app-sidebar-secondary-base-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-base-box-shadow, $app-sidebar-secondary-base-box-shadow-dark);
+ @include property(--kt-app-sidebar-secondary-base-box-shadow-mobile, $app-sidebar-secondary-base-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-base-border-start, $app-sidebar-secondary-base-border-start-dark);
+ @include property(--kt-app-sidebar-secondary-base-border-start-mobile, $app-sidebar-secondary-base-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-base-border-end, $app-sidebar-secondary-base-border-end-dark);
+ @include property(--kt-app-sidebar-secondary-base-border-end-mobile, $app-sidebar-secondary-base-border-end-mobile-dark);
+
+ @include property(--kt-app-sidebar-secondary-minimize-bg-color, $app-sidebar-secondary-minimize-bg-color-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-bg-color-mobile, $app-sidebar-secondary-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-box-shadow, $app-sidebar-secondary-minimize-box-shadow-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-box-shadow-mobile, $app-sidebar-secondary-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-hover-box-shadow, $app-sidebar-secondary-minimize-hover-box-shadow-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-hover-box-shadow-mobile, $app-sidebar-secondary-minimize-hover-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-border-start, $app-sidebar-secondary-minimize-border-start-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-border-start-mobile, $app-sidebar-secondary-minimize-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-border-end, $app-sidebar-secondary-minimize-border-end-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-border-end-mobile, $app-sidebar-secondary-minimize-border-end-mobile-dark);
+
+ // Sidebar panel base
+ @include property(--kt-app-sidebar-panel-base-bg-color, $app-sidebar-panel-base-bg-color-dark);
+ @include property(--kt-app-sidebar-panel-base-bg-color-mobile, $app-sidebar-panel-base-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-panel-base-box-shadow, $app-sidebar-panel-base-box-shadow-dark);
+ @include property(--kt-app-sidebar-panel-base-box-shadow-mobile, $app-sidebar-panel-base-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-panel-base-border-start, $app-sidebar-panel-base-border-start-dark);
+ @include property(--kt-app-sidebar-panel-base-border-start-mobile, $app-sidebar-panel-base-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-panel-base-border-end, $app-sidebar-panel-base-border-end-dark);
+ @include property(--kt-app-sidebar-panel-base-border-end-mobile, $app-sidebar-panel-base-border-end-mobile-dark);
+
+ // Sidebar panel sticky
+ @include property(--kt-app-sidebar-panel-sticky-bg-color, $app-sidebar-panel-sticky-bg-color-dark);
+ @include property(--kt-app-sidebar-panel-sticky-box-shadow, $app-sidebar-panel-sticky-box-shadow-dark);
+ @include property(--kt-app-sidebar-panel-sticky-border-start, $app-sidebar-panel-sticky-border-start-dark);
+ @include property(--kt-app-sidebar-panel-sticky-border-end, $app-sidebar-panel-sticky-border-end-dark);
+
+ // Sidebar panel minimize
+ @include property(--kt-app-sidebar-panel-minimize-bg-color, $app-sidebar-panel-minimize-bg-color-dark);
+ @include property(--kt-app-sidebar-panel-minimize-bg-color-mobile, $app-sidebar-panel-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-panel-minimize-box-shadow, $app-sidebar-panel-minimize-box-shadow-dark);
+ @include property(--kt-app-sidebar-panel-minimize-box-shadow-mobile, $app-sidebar-panel-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-panel-minimize-hover-box-shadow, $app-sidebar-panel-minimize-hover-box-shadow-dark);
+ @include property(--kt-app-sidebar-panel-minimize-hover-box-shadow-mobile, $app-sidebar-panel-minimize-hover-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-panel-minimize-border-start, $app-sidebar-panel-minimize-border-start-dark);
+ @include property(--kt-app-sidebar-panel-minimize-border-start-mobile, $app-sidebar-panel-minimize-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-panel-minimize-border-end, $app-sidebar-panel-minimize-border-end-dark);
+ @include property(--kt-app-sidebar-panel-minimize-border-end-mobile, $app-sidebar-panel-minimize-border-end-mobile-dark);
+
+ // Aside base
+ @include property(--kt-app-aside-base-bg-color, $app-aside-base-bg-color-dark);
+ @include property(--kt-app-aside-base-bg-color-mobile, $app-aside-base-bg-color-mobile-dark);
+ @include property(--kt-app-aside-base-box-shadow, $app-aside-base-box-shadow-dark);
+ @include property(--kt-app-aside-base-box-shadow-mobile, $app-aside-base-box-shadow-mobile-dark);
+ @include property(--kt-app-aside-base-border-start, $app-aside-base-border-start-dark);
+ @include property(--kt-app-aside-base-border-start-mobile, $app-aside-base-border-start-mobile-dark);
+ @include property(--kt-app-aside-base-border-end, $app-aside-base-border-end-dark);
+ @include property(--kt-app-aside-base-border-end-mobile, $app-aside-base-border-end-mobile-dark);
+
+ // Aside sticky
+ @include property(--kt-app-aside-sticky-bg-color, $app-aside-sticky-bg-color-dark);
+ @include property(--kt-app-aside-sticky-box-shadow, $app-aside-sticky-box-shadow-dark);
+ @include property(--kt-app-aside-sticky-border-start, $app-aside-sticky-border-start-dark);
+ @include property(--kt-app-aside-sticky-border-end, $app-aside-sticky-border-end-dark);
+
+ // Aside minimize
+ @include property(--kt-app-aside-minimize-bg-color, $app-aside-minimize-bg-color-dark);
+ @include property(--kt-app-aside-minimize-bg-color-mobile, $app-aside-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-aside-minimize-box-shadow, $app-aside-minimize-box-shadow-dark);
+ @include property(--kt-app-aside-minimize-box-shadow-mobile, $app-aside-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-aside-minimize-hover-box-shadow, $app-aside-minimize-hover-box-shadow-dark);
+ @include property(--kt-app-aside-minimize-hover-box-shadow-mobile, $app-aside-minimize-hover-box-shadow-mobile-dark);
+ @include property(--kt-app-aside-minimize-border-start, $app-aside-minimize-border-start-dark);
+ @include property(--kt-app-aside-minimize-border-start-mobile, $app-aside-minimize-border-start-mobile-dark);
+ @include property(--kt-app-aside-minimize-border-end, $app-aside-minimize-border-end-dark);
+ @include property(--kt-app-aside-minimize-border-end-mobile, $app-aside-minimize-border-end-mobile-dark);
+
+ // Page
+ @include property(--kt-app-page-bg-color, $app-page-bg-color-dark);
+
+ // Wrapper
+ @include property(--kt-app-wrapper-bg-color, $app-wrapper-bg-color-dark);
+
+ // Footer
+ @include property(--kt-app-footer-bg-color, $app-footer-bg-color-dark);
+ @include property(--kt-app-footer-bg-color-mobile, $app-footer-bg-color-mobile-dark);
+ @include property(--kt-app-footer-box-shadow, $app-footer-box-shadow-dark);
+ @include property(--kt-app-footer-box-shadow-mobile, $app-footer-box-shadow-mobile-dark);
+ @include property(--kt-app-footer-border-top, $app-footer-border-top-dark);
+ @include property(--kt-app-footer-border-top-mobile, $app-footer-border-top-mobile-dark);
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_toolbar.scss b/src/_metronic/assets/sass/core/layout/base/_toolbar.scss
new file mode 100644
index 0000000..e80f74c
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_toolbar.scss
@@ -0,0 +1,183 @@
+//
+// Toolbar
+//
+
+// General mode
+.app-toolbar {
+ display: flex;
+ align-items: stretch;
+
+ &.app-toolbar-minimize {
+ transition: $app-toolbar-base-transition;
+ }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-toolbar {
+ background-color: var(--kt-app-toolbar-base-bg-color);
+ box-shadow: var(--kt-app-toolbar-base-box-shadow);
+ border-top: var(--kt-app-toolbar-base-border-top);
+ border-bottom: var(--kt-app-toolbar-base-border-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-toolbar-height: #{$app-toolbar-base-height};
+ --kt-app-toolbar-height-actual: #{$app-toolbar-base-height};
+ }
+
+ [data-kt-app-toolbar-sticky="on"] {
+ --kt-app-toolbar-height: #{$app-toolbar-sticky-height};
+ }
+
+ [data-kt-app-toolbar-minimize="on"] {
+ --kt-app-toolbar-height: #{$app-toolbar-minimize-height};
+ }
+
+ // States
+ .app-toolbar {
+ height: var(--kt-app-toolbar-height);
+
+ [data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"] & {
+ @include property( z-index, $app-toolbar-base-z-index);
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ [data-kt-app-toolbar-sticky="on"] & {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ @include property( z-index, $app-toolbar-sticky-z-index);
+ @include property( backdrop-filter, $app-toolbar-sticky-backdrop-filter);
+
+ box-shadow: var(--kt-app-toolbar-sticky-box-shadow);
+ background-color: var(--kt-app-toolbar-sticky-bg-color);
+ border-top: var(--kt-app-toolbar-sticky-border-top);
+ border-bottom: var(--kt-app-toolbar-sticky-border-bottom);
+ }
+
+ [data-kt-app-toolbar-minimize="on"] & {
+ transition: $app-toolbar-base-transition;
+ @include property( z-index, $app-toolbar-minimize-z-index);
+ @include property( backdrop-filter, $app-toolbar-minimize-backdrop-filter);
+
+ box-shadow: var(--kt-app-toolbar-minimize-box-shadow);
+ background-color: var(--kt-app-toolbar-minimize-bg-color);
+ border-top: var(--kt-app-toolbar-minimize-border-top);
+ border-bottom: var(--kt-app-toolbar-minimize-border-bottom);
+ }
+ }
+
+ // Integration
+ .app-toolbar {
+ // Header
+ [data-kt-app-toolbar-fixed="true"][data-kt-app-header-fixed="true"] & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Sidebar
+ [data-kt-app-toolbar-sticky="on"][data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-toolbar="true"] &,
+ [data-kt-app-toolbar-fixed="true"][data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-toolbar="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar panel
+ [data-kt-app-toolbar-sticky="on"][data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-toolbar="true"] &,
+ [data-kt-app-toolbar-fixed="true"][data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-toolbar="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ // Aside
+ [data-kt-app-toolbar-sticky="on"][data-kt-app-aside-fixed="true"][data-kt-app-aside-push-toolbar="true"] &,
+ [data-kt-app-toolbar-fixed="true"][data-kt-app-aside-fixed="true"][data-kt-app-aside-push-toolbar="true"] & {
+ right: calc(
+ var(--kt-app-aside-width) +
+ var(--kt-app-aside-gap-start, 0px) +
+ var(--kt-app-aside-gap-end, 0px)
+ );
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-toolbar {
+ @include property( z-index, $app-toolbar-base-z-index-mobile);
+
+ box-shadow: var(--kt-app-toolbar-base-box-shadow-mobile);
+ background-color: var(--kt-app-toolbar-base-bg-color-mobile);
+ border-top: var(--kt-app-toolbar-base-border-top-mobile);
+ border-bottom: var(--kt-app-toolbar-base-border-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-toolbar-height: #{$app-toolbar-base-height-mobile};
+ }
+
+ [data-kt-app-toolbar-sticky="on"] {
+ --kt-app-toolbar-height: #{$app-toolbar-sticky-height-mobile};
+ }
+
+ [data-kt-app-toolbar-minimize="on"] {
+ --kt-app-toolbar-height: #{$app-toolbar-minimize-height-mobile};
+ }
+
+ // States
+ .app-toolbar {
+ height: var(--kt-app-toolbar-height);
+
+ [data-kt-app-header-fixed-mobile="true"][data-kt-app-toolbar-fixed-mobile="true"] & {
+ @include property( z-index, $app-toolbar-base-z-index-mobile);
+ position: fixed;
+ top: calc(var(--kt-app-header-height, 0px) + var(--kt-app-header-mobile-height, 0px));
+ left: 0;
+ right: 0;
+ }
+
+ [data-kt-app-toolbar-sticky="on"] & {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: var(--kt-app-header-height, 0px);
+
+ box-shadow: var(--kt-app-toolbar-sticky-box-shadow-mobile);
+ background-color: var(--kt-app-toolbar-sticky-bg-color-mobile);
+ border-top: var(--kt-app-toolbar-sticky-border-top-mobile);
+ border-bottom: var(--kt-app-toolbar-sticky-border-bottom-mobile);
+
+ @include property( z-index, $app-toolbar-sticky-z-index-mobile);
+ @include property( backdrop-filter, $app-toolbar-sticky-backdrop-filter-mobile);
+ }
+
+ [data-kt-app-toolbar-minimize="on"] & {
+ transition: $app-toolbar-base-transition;
+
+ box-shadow: var(--kt-app-toolbar-minimize-box-shadow-mobile);
+ background-color: var(--kt-app-toolbar-minimize-bg-color-mobile);
+ border-top: var(--kt-app-toolbar-minimize-border-top-mobile);
+ border-bottom: var(--kt-app-toolbar-minimize-border-bottom-mobile);
+
+ @include property( z-index, $app-toolbar-minimize-z-index-mobile);
+ @include property( backdrop-filter, $app-toolbar-minimize-backdrop-filter-mobile);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_variables.scss b/src/_metronic/assets/sass/core/layout/base/_variables.scss
new file mode 100644
index 0000000..2a95a9f
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_variables.scss
@@ -0,0 +1,696 @@
+//
+// Variables
+//
+
+// Reboot
+$app-bg-color: #f5f8fa !default;
+$app-bg-color-dark: #151521 !default;
+$app-blank-bg-color: $white;
+$app-blank-bg-color-dark: $app-bg-color-dark;
+
+// General
+$app-general-transition-duration: .3s !default;
+$app-general-transition-timing: ease !default;
+$app-general-root-font-size-desktop: 13px !default;
+$app-general-root-font-size-tablet: 12px !default;
+$app-general-root-font-size-mobile: 12px !default;
+
+// Container
+$app-container-padding-x: 30px !default;
+$app-container-padding-x-mobile: 20px !default;
+
+// Page
+$app-page-bg-color: null !default;
+$app-page-bg-color-dark: null !default;
+
+// Main
+$app-main-transition: margin $app-general-transition-duration $app-general-transition-timing;
+$app-main-padding-y: null !default;
+$app-main-padding-y-mobile: null !default;
+$app-main-padding-x: null !default;
+$app-main-padding-x-mobile: 0 !default;
+$app-main-margin-y: null !default;
+$app-main-margin-y-mobile: null !default;
+$app-main-margin-x: null !default;
+$app-main-margin-x-mobile: null !default;
+
+// Wrapper
+$app-wrapper-transition: margin-left $app-general-transition-duration $app-general-transition-timing, margin-right $app-general-transition-duration $app-general-transition-timing;
+$app-wrapper-bg-color: null !default;
+$app-wrapper-bg-color-dark: null !default;
+
+// Content
+$app-content-padding-y: 30px !default;
+$app-content-padding-y-mobile: 20px !default;
+$app-content-padding-x: 0 !default;
+$app-content-padding-x-mobile: 0 !default;
+
+// Header base
+$app-header-base-transition: none !default;
+$app-header-base-height: 70px !default;
+$app-header-base-height-mobile: 70px !default;
+$app-header-base-z-index: null !default;
+$app-header-base-z-index-mobile: null !default;
+$app-header-base-bg-color: null !default;
+$app-header-base-bg-color-dark: null !default;
+$app-header-base-bg-color-mobile: null !default;
+$app-header-base-bg-color-mobile-dark: null !default;
+$app-header-base-box-shadow: null !default;
+$app-header-base-box-shadow-dark: null !default;
+$app-header-base-box-shadow-mobile: null !default;
+$app-header-base-box-shadow-mobile-dark: null !default;
+$app-header-base-border-bottom: null !default;
+$app-header-base-border-bottom-dark: null !default;
+$app-header-base-border-bottom-mobile: null !default;
+$app-header-base-border-bottom-mobile-dark: null !default;
+
+// Header fixed
+$app-header-fixed-z-index: 100 !default;
+$app-header-fixed-z-index-mobile: 100 !default;
+
+// Header minimize
+$app-header-minimize-height: 70px !default;
+$app-header-minimize-height-mobile: 70px !default;
+$app-header-minimize-z-index: 100 !default;
+$app-header-minimize-z-index-mobile: 100 !default;
+$app-header-minimize-backdrop-filter: null !default;
+$app-header-minimize-backdrop-filter-mobile: null !default;
+$app-header-minimize-bg-color: null !default;
+$app-header-minimize-bg-color-dark: null !default;
+$app-header-minimize-bg-color-mobile: null !default;
+$app-header-minimize-bg-color-mobile-dark: null !default;
+$app-header-minimize-box-shadow: null !default;
+$app-header-minimize-box-shadow-dark: null !default;
+$app-header-minimize-box-shadow-mobile: null !default;
+$app-header-minimize-box-shadow-mobile-dark: null !default;
+$app-header-minimize-border-bottom: null !default;
+$app-header-minimize-border-bottom-dark: null !default;
+$app-header-minimize-border-bottom-mobile: null !default;
+$app-header-minimize-border-bottom-mobile-dark: null !default;
+
+// Header sticky
+$app-header-sticky-height: 70px !default;
+$app-header-sticky-height-mobile: 70px !default;
+$app-header-sticky-z-index: 100 !default;
+$app-header-sticky-z-index-mobile: 100 !default;
+$app-header-sticky-backdrop-filter: null !default;
+$app-header-sticky-backdrop-filter-mobile: null !default;
+$app-header-sticky-bg-color: null !default;
+$app-header-sticky-bg-color-dark: null !default;
+$app-header-sticky-bg-color-mobile: null !default;
+$app-header-sticky-bg-color-mobile-dark: null !default;
+$app-header-sticky-box-shadow: null !default;
+$app-header-sticky-box-shadow-dark: null !default;
+$app-header-sticky-box-shadow-mobile: null !default;
+$app-header-sticky-box-shadow-mobile-dark: null !default;
+$app-header-sticky-border-bottom: null !default;
+$app-header-sticky-border-bottom-dark: null !default;
+$app-header-sticky-border-bottom-mobile: null !default;
+$app-header-sticky-border-bottom-mobile-dark: null !default;
+
+// Header primary
+$app-header-primary-base-transition: none !default;
+$app-header-primary-base-height: 70px !default;
+$app-header-primary-base-z-index: null !default;
+$app-header-primary-base-z-index-mobile: null !default;
+$app-header-primary-base-bg-color: null !default;
+$app-header-primary-base-bg-color-dark: null !default;
+$app-header-primary-base-bg-color-mobile: null !default;
+$app-header-primary-base-bg-color-mobile-dark: null !default;
+$app-header-primary-base-box-shadow: null !default;
+$app-header-primary-base-box-shadow-dark: null !default;
+$app-header-primary-base-box-shadow-mobile: null !default;
+$app-header-primary-base-box-shadow-mobile-dark: null !default;
+$app-header-primary-base-border-bottom: null !default;
+$app-header-primary-base-border-bottom-dark: null !default;
+$app-header-primary-base-border-bottom-mobile: null !default;
+$app-header-primary-base-border-bottom-mobile-dark: null !default;
+
+$app-header-primary-fixed-z-index: 100 !default;
+
+$app-header-primary-minimize-height: 70px !default;
+$app-header-primary-minimize-z-index: 100 !default;
+$app-header-primary-minimize-bg-color: null !default;
+$app-header-primary-minimize-bg-color-dark: null !default;
+$app-header-primary-minimize-box-shadow: null !default;
+$app-header-primary-minimize-box-shadow-dark: null !default;
+$app-header-primary-minimize-border-top: null !default;
+$app-header-primary-minimize-border-top-dark: null !default;
+$app-header-primary-minimize-border-bottom: null !default;
+$app-header-primary-minimize-border-bottom-dark: null !default;
+
+$app-header-primary-sticky-height: 70px !default;
+$app-header-primary-sticky-z-index: 100 !default;
+$app-header-primary-sticky-bg-color: null !default;
+$app-header-primary-sticky-bg-color-dark: null !default;
+$app-header-primary-sticky-box-shadow: null !default;
+$app-header-primary-sticky-box-shadow-dark: null !default;
+$app-header-primary-sticky-border-top: null !default;
+$app-header-primary-sticky-border-top-dark: null !default;
+$app-header-primary-sticky-border-bottom: null !default;
+$app-header-primary-sticky-border-bottom-dark: null !default;
+
+// Header secondary
+$app-header-secondary-base-transition: none !default;
+$app-header-secondary-base-height: 70px !default;
+$app-header-secondary-base-z-index: null !default;
+$app-header-secondary-base-bg-color: null !default;
+$app-header-secondary-base-bg-color-dark: null !default;
+$app-header-secondary-base-bg-color-mobile: null !default;
+$app-header-secondary-base-bg-color-mobile-dark: null !default;
+$app-header-secondary-base-box-shadow: null !default;
+$app-header-secondary-base-box-shadow-dark: null !default;
+$app-header-secondary-base-box-shadow-mobile: null !default;
+$app-header-secondary-base-box-shadow-mobile-dark: null !default;
+$app-header-secondary-base-border-top: null !default;
+$app-header-secondary-base-border-top-dark: null !default;
+$app-header-secondary-base-border-bottom: null !default;
+$app-header-secondary-base-border-bottom-dark: null !default;
+$app-header-secondary-base-border-start-mobile: null !default;
+$app-header-secondary-base-border-start-mobile-dark: null !default;
+$app-header-secondary-base-border-end-mobile: null !default;
+$app-header-secondary-base-border-end-mobile-dark: null !default;
+
+$app-header-secondary-fixed-z-index: 100 !default;
+
+$app-header-secondary-minimize-height: 70px !default;
+$app-header-secondary-minimize-z-index: 100 !default;
+$app-header-secondary-minimize-bg-color: null !default;
+$app-header-secondary-minimize-bg-color-dark: null !default;
+$app-header-secondary-minimize-box-shadow: null !default;
+$app-header-secondary-minimize-box-shadow-dark: null !default;
+$app-header-secondary-minimize-border-top: null !default;
+$app-header-secondary-minimize-border-top-dark: null !default;
+$app-header-secondary-minimize-border-bottom: null !default;
+$app-header-secondary-minimize-border-bottom-dark: null !default;
+
+$app-header-secondary-sticky-height: 70px !default;
+$app-header-secondary-sticky-z-index: 100 !default;
+$app-header-secondary-sticky-bg-color: null !default;
+$app-header-secondary-sticky-bg-color-dark: null !default;
+$app-header-secondary-sticky-box-shadow: null !default;
+$app-header-secondary-sticky-box-shadow-dark: null !default;
+$app-header-secondary-sticky-border-top: null !default;
+$app-header-secondary-sticky-border-top-dark: null !default;
+$app-header-secondary-sticky-border-bottom: null !default;
+$app-header-secondary-sticky-border-bottom-dark: null !default;
+
+// Toolbar base
+$app-toolbar-base-transition: none !default;
+$app-toolbar-base-height: null !default;
+$app-toolbar-base-height-mobile: null !default;
+$app-toolbar-base-z-index: 99 !default;
+$app-toolbar-base-z-index-mobile: 99 !default;
+$app-toolbar-base-bg-color: null !default;
+$app-toolbar-base-bg-color-dark: null !default;
+$app-toolbar-base-bg-color-mobile: null !default;
+$app-toolbar-base-bg-color-mobile-dark: null !default;
+$app-toolbar-base-box-shadow: null !default;
+$app-toolbar-base-box-shadow-dark: null !default;
+$app-toolbar-base-box-shadow-mobile: null !default;
+$app-toolbar-base-box-shadow-mobile-dark: null !default;
+$app-toolbar-base-border-top: null !default;
+$app-toolbar-base-border-top-dark: null !default;
+$app-toolbar-base-border-top-mobile: null !default;
+$app-toolbar-base-border-top-mobile-dark: null !default;
+$app-toolbar-base-border-bottom: null !default;
+$app-toolbar-base-border-bottom-dark: null !default;
+$app-toolbar-base-border-bottom-mobile: null !default;
+$app-toolbar-base-border-bottom-mobile-dark: null !default;
+
+// Toolbar minimize
+$app-toolbar-minimize-height: 70px !default;
+$app-toolbar-minimize-height-mobile: 70px !default;
+$app-toolbar-minimize-z-index: 99 !default;
+$app-toolbar-minimize-z-index-mobile: 99 !default;
+$app-toolbar-minimize-backdrop-filter: null !default;
+$app-toolbar-minimize-backdrop-filter-mobile: null !default;
+$app-toolbar-minimize-bg-color: null !default;
+$app-toolbar-minimize-bg-color-dark: null !default;
+$app-toolbar-minimize-bg-color-mobile: null !default;
+$app-toolbar-minimize-bg-color-mobile-dark: null !default;
+$app-toolbar-minimize-box-shadow: null !default;
+$app-toolbar-minimize-box-shadow-dark: null !default;
+$app-toolbar-minimize-box-shadow-mobile: null !default;
+$app-toolbar-minimize-box-shadow-mobile-dark: null !default;
+$app-toolbar-minimize-border-top: null !default;
+$app-toolbar-minimize-border-top-dark: null !default;
+$app-toolbar-minimize-border-top-mobile: null !default;
+$app-toolbar-minimize-border-top-mobile-dark: null !default;
+$app-toolbar-minimize-border-bottom: null !default;
+$app-toolbar-minimize-border-bottom-dark: null !default;
+$app-toolbar-minimize-border-bottom-mobile: null !default;
+$app-toolbar-minimize-border-bottom-mobile-dark: null !default;
+
+// Toolbar sticky
+$app-toolbar-sticky-height: 70px !default;
+$app-toolbar-sticky-height-mobile: 70px !default;
+$app-toolbar-sticky-z-index: 99 !default;
+$app-toolbar-sticky-z-index-mobile: 99 !default;
+$app-toolbar-sticky-backdrop-filter: null !default;
+$app-toolbar-sticky-backdrop-filter-mobile: null !default;
+$app-toolbar-sticky-bg-color: null !default;
+$app-toolbar-sticky-bg-color-dark: null !default;
+$app-toolbar-sticky-bg-color-mobile: null !default;
+$app-toolbar-sticky-bg-color-mobile-dark: null !default;
+$app-toolbar-sticky-box-shadow: null !default;
+$app-toolbar-sticky-box-shadow-dark: null !default;
+$app-toolbar-sticky-box-shadow-mobile: null !default;
+$app-toolbar-sticky-box-shadow-mobile-dark: null !default;
+$app-toolbar-sticky-border-top: null !default;
+$app-toolbar-sticky-border-top-dark: null !default;
+$app-toolbar-sticky-border-top-mobile: null !default;
+$app-toolbar-sticky-border-top-mobile-dark: null !default;
+$app-toolbar-sticky-border-bottom: null !default;
+$app-toolbar-sticky-border-bottom-dark: null !default;
+$app-toolbar-sticky-border-bottom-mobile: null !default;
+$app-toolbar-sticky-border-bottom-mobile-dark: null !default;
+
+// Hero
+$app-hero-bg-color: null !default;
+$app-hero-bg-color-dark: null !default;
+$app-hero-box-shadow: null !default;
+$app-hero-box-shadow-dark: null !default;
+$app-hero-border-top: null !default;
+$app-hero-border-top-dark: null !default;
+$app-hero-border-bottom: null !default;
+$app-hero-border-bottom-dark: null !default;
+
+// Sidebar base
+$app-sidebar-base-transition: width $app-general-transition-duration $app-general-transition-timing !default;
+$app-sidebar-base-width: 300px !default;
+$app-sidebar-base-width-mobile: 275px !default;
+$app-sidebar-base-z-index: null !default;
+$app-sidebar-base-z-index-mobile: 106 !default;
+$app-sidebar-base-bg-color: null !default;
+$app-sidebar-base-bg-color-dark: null !default;
+$app-sidebar-base-bg-color-mobile: null !default;
+$app-sidebar-base-bg-color-mobile-dark: null !default;
+$app-sidebar-base-box-shadow: null !default;
+$app-sidebar-base-box-shadow-dark: null !default;
+$app-sidebar-base-box-shadow-mobile: null !default;
+$app-sidebar-base-box-shadow-mobile-dark: null !default;
+$app-sidebar-base-border-start: null !default;
+$app-sidebar-base-border-start-dark: null !default;
+$app-sidebar-base-border-start-mobile: null !default;
+$app-sidebar-base-border-start-mobile-dark: null !default;
+$app-sidebar-base-border-end: null !default;
+$app-sidebar-base-border-end-dark: null !default;
+$app-sidebar-base-border-end-mobile: null !default;
+$app-sidebar-base-border-end-mobile-dark: null !default;
+$app-sidebar-base-gap-start: 0px !default;
+$app-sidebar-base-gap-start-mobile: 0px !default;
+$app-sidebar-base-gap-end: 0px !default;
+$app-sidebar-base-gap-end-mobile: 0px !default;
+$app-sidebar-base-gap-top: 0px !default;
+$app-sidebar-base-gap-top-mobile: 0px !default;
+$app-sidebar-base-gap-bottom: 0px !default;
+$app-sidebar-base-gap-bottom-mobile: 0px !default;
+
+// Sidebar fixed
+$app-sidebar-fixed-z-index: 105 !default;
+$app-sidebar-fixed-left: 0 !default;
+$app-sidebar-fixed-top: 0 !default;
+$app-sidebar-fixed-bottom: 0 !default;
+
+// Sidebar sticky
+$app-sidebar-sticky-top: auto !default;
+$app-sidebar-sticky-bottom: auto !default;
+$app-sidebar-sticky-left: auto !default;
+$app-sidebar-sticky-width: 300px !default;
+$app-sidebar-sticky-z-index: 105 !default;
+$app-sidebar-sticky-bg-color: null !default;
+$app-sidebar-sticky-bg-color-dark: null !default;
+$app-sidebar-sticky-box-shadow: null !default;
+$app-sidebar-sticky-box-shadow-dark: null !default;
+$app-sidebar-sticky-border-start: null !default;
+$app-sidebar-sticky-border-start-dark: null !default;
+$app-sidebar-sticky-border-end: null !default;
+$app-sidebar-sticky-border-end-dark: null !default;
+$app-sidebar-sticky-gap-start: 0px !default;
+$app-sidebar-sticky-gap-end: 0px !default;
+$app-sidebar-sticky-gap-top: 0px !default;
+$app-sidebar-sticky-gap-bottom: 0px !default;
+
+// Sidebar minimize
+$app-sidebar-minimize-width: 75px !default;
+$app-sidebar-minimize-width-mobile: 75px !default;
+$app-sidebar-minimize-bg-color: null !default;
+$app-sidebar-minimize-bg-color-dark: null !default;
+$app-sidebar-minimize-bg-color-mobile: null !default;
+$app-sidebar-minimize-bg-color-mobile-dark: null !default;
+$app-sidebar-minimize-box-shadow: null !default;
+$app-sidebar-minimize-box-shadow-dark: null !default;
+$app-sidebar-minimize-box-shadow-mobile: null !default;
+$app-sidebar-minimize-box-shadow-mobile-dark: null !default;
+$app-sidebar-minimize-hover-box-shadow: null !default;
+$app-sidebar-minimize-hover-box-shadow-dark: null !default;
+$app-sidebar-minimize-hover-box-shadow-mobile: null !default;
+$app-sidebar-minimize-hover-box-shadow-mobile-dark: null !default;
+$app-sidebar-minimize-border-start: null !default;
+$app-sidebar-minimize-border-start-dark: null !default;
+$app-sidebar-minimize-border-start-mobile: null !default;
+$app-sidebar-minimize-border-start-mobile-dark: null !default;
+$app-sidebar-minimize-border-end: null !default;
+$app-sidebar-minimize-border-end-dark: null !default;
+$app-sidebar-minimize-border-end-mobile: null !default;
+$app-sidebar-minimize-border-end-mobile-dark: null !default;
+$app-sidebar-minimize-gap-start: 0px !default;
+$app-sidebar-minimize-gap-start-mobile: 0px !default;
+$app-sidebar-minimize-gap-end: 0px !default;
+$app-sidebar-minimize-gap-end-mobile: 0px !default;
+$app-sidebar-minimize-gap-top: 0px !default;
+$app-sidebar-minimize-gap-top-mobile: 0px !default;
+$app-sidebar-minimize-gap-bottom: 0px !default;
+$app-sidebar-minimize-gap-bottom-mobile: 0px !default;
+
+// Sidebar primary
+$app-sidebar-primary-base-transition: none !default;
+$app-sidebar-primary-base-width: 100px !default;
+$app-sidebar-primary-base-width-mobile: 100px !default;
+$app-sidebar-primary-base-z-index: 1 !default;
+$app-sidebar-primary-base-z-index-mobile: 1 !default;
+$app-sidebar-primary-base-bg-color: null !default;
+$app-sidebar-primary-base-bg-color-dark: null !default;
+$app-sidebar-primary-base-bg-color-mobile: null !default;
+$app-sidebar-primary-base-bg-color-mobile-dark: null !default;
+$app-sidebar-primary-base-box-shadow: null !default;
+$app-sidebar-primary-base-box-shadow-dark: null !default;
+$app-sidebar-primary-base-box-shadow-mobile: null !default;
+$app-sidebar-primary-base-box-shadow-mobile-dark: null !default;
+$app-sidebar-primary-base-border-start: null !default;
+$app-sidebar-primary-base-border-start-dark: null !default;
+$app-sidebar-primary-base-border-start-mobile: null !default;
+$app-sidebar-primary-base-border-start-mobile-dark: null !default;
+$app-sidebar-primary-base-border-end: null !default;
+$app-sidebar-primary-base-border-end-dark: null !default;
+$app-sidebar-primary-base-border-end-mobile: null !default;
+$app-sidebar-primary-base-border-end-mobile-dark: null !default;
+$app-sidebar-primary-base-gap-start: 0px !default;
+$app-sidebar-primary-base-gap-start-mobile: 0px !default;
+$app-sidebar-primary-base-gap-end: 0px !default;
+$app-sidebar-primary-base-gap-end-mobile: 0px !default;
+$app-sidebar-primary-base-gap-top: 0px !default;
+$app-sidebar-primary-base-gap-top-mobile: 0px !default;
+$app-sidebar-primary-base-gap-bottom: 0px !default;
+$app-sidebar-primary-base-gap-bottom-mobile: 0px !default;
+
+$app-sidebar-primary-minimize-width: 75px !default;
+$app-sidebar-primary-minimize-width-mobile: 75px !default;
+$app-sidebar-primary-minimize-z-index: null !default;
+$app-sidebar-primary-minimize-bg-color: null !default;
+$app-sidebar-primary-minimize-bg-color-dark: null !default;
+$app-sidebar-primary-minimize-bg-color-mobile: null !default;
+$app-sidebar-primary-minimize-bg-color-mobile-dark: null !default;
+$app-sidebar-primary-minimize-box-shadow: null !default;
+$app-sidebar-primary-minimize-box-shadow-dark: null !default;
+$app-sidebar-primary-minimize-box-shadow-mobile: null !default;
+$app-sidebar-primary-minimize-box-shadow-mobile-dark: null !default;
+$app-sidebar-primary-minimize-hover-box-shadow: null !default;
+$app-sidebar-primary-minimize-hover-box-shadow-dark: null !default;
+$app-sidebar-primary-minimize-hover-box-shadow-mobile: null !default;
+$app-sidebar-primary-minimize-hover-box-shadow-mobile-dark: null !default;
+$app-sidebar-primary-minimize-border-start: null !default;
+$app-sidebar-primary-minimize-border-start-dark: null !default;
+$app-sidebar-primary-minimize-border-start-mobile: null !default;
+$app-sidebar-primary-minimize-border-start-mobile-dark: null !default;
+$app-sidebar-primary-minimize-border-end: null !default;
+$app-sidebar-primary-minimize-border-end-dark: null !default;
+$app-sidebar-primary-minimize-border-end-mobile: null !default;
+$app-sidebar-primary-minimize-border-end-mobile-dark: null !default;
+$app-sidebar-primary-minimize-gap-start: 0px !default;
+$app-sidebar-primary-minimize-gap-start-mobile: 0px !default;
+$app-sidebar-primary-minimize-gap-end: 0px !default;
+$app-sidebar-primary-minimize-gap-end-mobile: 0px !default;
+$app-sidebar-primary-minimize-gap-top: 0px !default;
+$app-sidebar-primary-minimize-gap-top-mobile: 0px !default;
+$app-sidebar-primary-minimize-gap-bottom: 0px !default;
+$app-sidebar-primary-minimize-gap-bottom-mobile: 0px !default;
+
+// Sidebar secondary
+$app-sidebar-secondary-base-transition: none !default;
+$app-sidebar-secondary-base-z-index: null !default;
+$app-sidebar-secondary-base-z-index-mobile: null !default;
+$app-sidebar-secondary-base-bg-color: null !default;
+$app-sidebar-secondary-base-bg-color-dark: null !default;
+$app-sidebar-secondary-base-bg-color-mobile: null !default;
+$app-sidebar-secondary-base-bg-color-mobile-dark: null !default;
+$app-sidebar-secondary-base-box-shadow: null !default;
+$app-sidebar-secondary-base-box-shadow-dark: null !default;
+$app-sidebar-secondary-base-box-shadow-mobile: null !default;
+$app-sidebar-secondary-base-box-shadow-mobile-dark: null !default;
+$app-sidebar-secondary-base-border-start: null !default;
+$app-sidebar-secondary-base-border-start-dark: null !default;
+$app-sidebar-secondary-base-border-start-mobile: null !default;
+$app-sidebar-secondary-base-border-start-mobile-dark: null !default;
+$app-sidebar-secondary-base-border-end: null !default;
+$app-sidebar-secondary-base-border-end-dark: null !default;
+$app-sidebar-secondary-base-border-end-mobile: null !default;
+$app-sidebar-secondary-base-border-end-mobile-dark: null !default;
+$app-sidebar-secondary-base-gap-start: 0px !default;
+$app-sidebar-secondary-base-gap-start-mobile: 0px !default;
+$app-sidebar-secondary-base-gap-end: 0px !default;
+$app-sidebar-secondary-base-gap-end-mobile: 0px !default;
+$app-sidebar-secondary-base-gap-top: 0px !default;
+$app-sidebar-secondary-base-gap-top-mobile: 0px !default;
+$app-sidebar-secondary-base-gap-bottom: 0px !default;
+$app-sidebar-secondary-base-gap-bottom-mobile: 0px !default;
+
+$app-sidebar-secondary-minimize-width: 75px !default;
+$app-sidebar-secondary-minimize-width-mobile: 75px !default;
+$app-sidebar-secondary-minimize-z-index: null !default;
+$app-sidebar-secondary-minimize-bg-color: null !default;
+$app-sidebar-secondary-minimize-bg-color-dark: null !default;
+$app-sidebar-secondary-minimize-bg-color-mobile: null !default;
+$app-sidebar-secondary-minimize-bg-color-mobile-dark: null !default;
+$app-sidebar-secondary-minimize-box-shadow: null !default;
+$app-sidebar-secondary-minimize-box-shadow-dark: null !default;
+$app-sidebar-secondary-minimize-box-shadow-mobile: null !default;
+$app-sidebar-secondary-minimize-box-shadow-mobile-dark: null !default;
+$app-sidebar-secondary-minimize-hover-box-shadow: null !default;
+$app-sidebar-secondary-minimize-hover-box-shadow-dark: null !default;
+$app-sidebar-secondary-minimize-hover-box-shadow-mobile: null !default;
+$app-sidebar-secondary-minimize-hover-box-shadow-mobile-dark: null !default;
+$app-sidebar-secondary-minimize-border-start: null !default;
+$app-sidebar-secondary-minimize-border-start-dark: null !default;
+$app-sidebar-secondary-minimize-border-start-mobile: null !default;
+$app-sidebar-secondary-minimize-border-start-mobile-dark: null !default;
+$app-sidebar-secondary-minimize-border-end: null !default;
+$app-sidebar-secondary-minimize-border-end-dark: null !default;
+$app-sidebar-secondary-minimize-border-end-mobile: null !default;
+$app-sidebar-secondary-minimize-border-end-mobile-dark: null !default;
+$app-sidebar-secondary-minimize-gap-start: 0px !default;
+$app-sidebar-secondary-minimize-gap-start-mobile: 0px !default;
+$app-sidebar-secondary-minimize-gap-end: 0px !default;
+$app-sidebar-secondary-minimize-gap-end-mobile: 0px !default;
+$app-sidebar-secondary-minimize-gap-top: 0px !default;
+$app-sidebar-secondary-minimize-gap-top-mobile: 0px !default;
+$app-sidebar-secondary-minimize-gap-bottom: 0px !default;
+$app-sidebar-secondary-minimize-gap-bottom-mobile: 0px !default;
+
+// Sidebar panel base
+$app-sidebar-panel-base-transition: none !default;
+$app-sidebar-panel-base-width: 300px !default;
+$app-sidebar-panel-base-width-mobile: 300px !default;
+$app-sidebar-panel-base-z-index: null !default;
+$app-sidebar-panel-base-z-index-mobile: null !default;
+$app-sidebar-panel-base-bg-color: null !default;
+$app-sidebar-panel-base-bg-color-dark: null !default;
+$app-sidebar-panel-base-bg-color-mobile: null !default;
+$app-sidebar-panel-base-bg-color-mobile-dark: null !default;
+$app-sidebar-panel-base-box-shadow: null !default;
+$app-sidebar-panel-base-box-shadow-dark: null !default;
+$app-sidebar-panel-base-box-shadow-mobile: null !default;
+$app-sidebar-panel-base-box-shadow-mobile-dark: null !default;
+$app-sidebar-panel-base-border-start: null !default;
+$app-sidebar-panel-base-border-start-dark: null !default;
+$app-sidebar-panel-base-border-start-mobile: null !default;
+$app-sidebar-panel-base-border-start-mobile-dark: null !default;
+$app-sidebar-panel-base-border-end: null !default;
+$app-sidebar-panel-base-border-end-dark: null !default;
+$app-sidebar-panel-base-border-end-mobile: null !default;
+$app-sidebar-panel-base-border-end-mobile-dark: null !default;
+$app-sidebar-panel-base-gap-start: 0px !default;
+$app-sidebar-panel-base-gap-start-mobile: 0px !default;
+$app-sidebar-panel-base-gap-end: 0px !default;
+$app-sidebar-panel-base-gap-end-mobile: 0px !default;
+$app-sidebar-panel-base-gap-top: 0px !default;
+$app-sidebar-panel-base-gap-top-mobile: 0px !default;
+$app-sidebar-panel-base-gap-bottom: 0px !default;
+$app-sidebar-panel-base-gap-bottom-mobile: 0px !default;
+
+// Sidebar panel fixed
+$app-sidebar-panel-fixed-z-index: 104 !default;
+$app-sidebar-panel-fixed-z-index-mobile: 105 !default;
+
+// Sidebar panel sticky
+$app-sidebar-panel-sticky-top: auto !default;
+$app-sidebar-panel-sticky-bottom: auto !default;
+$app-sidebar-panel-sticky-width: 300px !default;
+$app-sidebar-panel-sticky-z-index: 104 !default;
+$app-sidebar-panel-sticky-bg-color: null !default;
+$app-sidebar-panel-sticky-bg-color-dark: null !default;
+$app-sidebar-panel-sticky-box-shadow: null !default;
+$app-sidebar-panel-sticky-box-shadow-dark: null !default;
+$app-sidebar-panel-sticky-border-start: null !default;
+$app-sidebar-panel-sticky-border-start-dark: null !default;
+$app-sidebar-panel-sticky-border-end: null !default;
+$app-sidebar-panel-sticky-border-end-dark: null !default;
+$app-sidebar-panel-sticky-gap-start: 0px !default;
+$app-sidebar-panel-sticky-gap-start-mobile: 0px !default;
+$app-sidebar-panel-sticky-gap-end: 0px !default;
+$app-sidebar-panel-sticky-gap-end-mobile: 0px !default;
+$app-sidebar-panel-sticky-gap-top: 0px !default;
+$app-sidebar-panel-sticky-gap-top-mobile: 0px !default;
+$app-sidebar-panel-sticky-gap-bottom: 0px !default;
+$app-sidebar-panel-sticky-gap-bottom-mobile: 0px !default;
+
+// Sidebar panel minimize
+$app-sidebar-panel-minimize-width: 75px !default;
+$app-sidebar-panel-minimize-width-mobile: 75px !default;
+$app-sidebar-panel-minimize-bg-color: null !default;
+$app-sidebar-panel-minimize-bg-color-dark: null !default;
+$app-sidebar-panel-minimize-bg-color-mobile: null !default;
+$app-sidebar-panel-minimize-bg-color-mobile-dark: null !default;
+$app-sidebar-panel-minimize-box-shadow: null !default;
+$app-sidebar-panel-minimize-box-shadow-dark: null !default;
+$app-sidebar-panel-minimize-box-shadow-mobile: null !default;
+$app-sidebar-panel-minimize-box-shadow-mobile-dark: null !default;
+$app-sidebar-panel-minimize-hover-box-shadow: null !default;
+$app-sidebar-panel-minimize-hover-box-shadow-dark: null !default;
+$app-sidebar-panel-minimize-hover-box-shadow-mobile: null !default;
+$app-sidebar-panel-minimize-hover-box-shadow-mobile-dark: null !default;
+$app-sidebar-panel-minimize-border-start: null !default;
+$app-sidebar-panel-minimize-border-start-dark: null !default;
+$app-sidebar-panel-minimize-border-start-mobile: null !default;
+$app-sidebar-panel-minimize-border-start-mobile-dark: null !default;
+$app-sidebar-panel-minimize-border-end: null !default;
+$app-sidebar-panel-minimize-border-end-dark: null !default;
+$app-sidebar-panel-minimize-border-end-mobile: null !default;
+$app-sidebar-panel-minimize-border-end-mobile-dark: null !default;
+$app-sidebar-panel-minimize-gap-start: 0px !default;
+$app-sidebar-panel-minimize-gap-start-mobile: 0px !default;
+$app-sidebar-panel-minimize-gap-end: 0px !default;
+$app-sidebar-panel-minimize-gap-end-mobile: 0px !default;
+$app-sidebar-panel-minimize-gap-top: 0px !default;
+$app-sidebar-panel-minimize-gap-top-mobile: 0px !default;
+$app-sidebar-panel-minimize-gap-bottom: 0px !default;
+$app-sidebar-panel-minimize-gap-bottom-mobile: 0px !default;
+
+// Aside base
+$app-aside-base-transition: none;
+$app-aside-base-width: 300px !default;
+$app-aside-base-width-mobile: 275px !default;
+$app-aside-base-z-index: null !default;
+$app-aside-base-z-index-mobile: 106 !default;
+$app-aside-base-bg-color: null !default;
+$app-aside-base-bg-color-dark: null !default;
+$app-aside-base-bg-color-mobile: null !default;
+$app-aside-base-bg-color-mobile-dark: null !default;
+$app-aside-base-box-shadow: null !default;
+$app-aside-base-box-shadow-dark: null !default;
+$app-aside-base-box-shadow-mobile: null !default;
+$app-aside-base-box-shadow-mobile-dark: null !default;
+$app-aside-base-border-start: null !default;
+$app-aside-base-border-start-dark: null !default;
+$app-aside-base-border-start-mobile: null !default;
+$app-aside-base-border-start-mobile-dark: null !default;
+$app-aside-base-border-end: null !default;
+$app-aside-base-border-end-dark: null !default;
+$app-aside-base-border-end-mobile: null !default;
+$app-aside-base-border-end-mobile-dark: null !default;
+$app-aside-base-gap-start: 0px !default;
+$app-aside-base-gap-start-mobile: 0px !default;
+$app-aside-base-gap-end: 0px !default;
+$app-aside-base-gap-end-mobile: 0px !default;
+$app-aside-base-gap-top: 0px !default;
+$app-aside-base-gap-top-mobile: 0px !default;
+$app-aside-base-gap-bottom: 0px !default;
+$app-aside-base-gap-bottom-mobile: 0px !default;
+
+// Aside fixed
+$app-aside-fixed-z-index: 105 !default;
+$app-aside-fixed-right: 0 !default;
+$app-aside-fixed-top: 0 !default;
+$app-aside-fixed-bottom: 0 !default;
+
+// Aside sticky
+$app-aside-sticky-top: auto !default;
+$app-aside-sticky-bottom: auto !default;
+$app-aside-sticky-left: auto !default;
+$app-aside-sticky-width: 300px !default;
+$app-aside-sticky-z-index: 105 !default;
+$app-aside-sticky-bg-color: null !default;
+$app-aside-sticky-bg-color-dark: null !default;
+$app-aside-sticky-box-shadow: null !default;
+$app-aside-sticky-box-shadow-dark: null !default;
+$app-aside-sticky-border-start: null !default;
+$app-aside-sticky-border-start-dark: null !default;
+$app-aside-sticky-border-end: null !default;
+$app-aside-sticky-border-end-dark: null !default;
+$app-aside-sticky-gap-start: 0px !default;
+$app-aside-sticky-gap-end: 0px !default;
+$app-aside-sticky-gap-top: 0px !default;
+$app-aside-sticky-gap-bottom: 0px !default;
+
+// Aside minimize
+$app-aside-minimize-width: 75px !default;
+$app-aside-minimize-width-mobile: 75px !default;
+$app-aside-minimize-bg-color: null !default;
+$app-aside-minimize-bg-color-dark: null !default;
+$app-aside-minimize-bg-color-mobile: null !default;
+$app-aside-minimize-bg-color-mobile-dark: null !default;
+$app-aside-minimize-box-shadow: null !default;
+$app-aside-minimize-box-shadow-dark: null !default;
+$app-aside-minimize-box-shadow-mobile: null !default;
+$app-aside-minimize-box-shadow-mobile-dark: null !default;
+$app-aside-minimize-hover-box-shadow: null !default;
+$app-aside-minimize-hover-box-shadow-dark: null !default;
+$app-aside-minimize-hover-box-shadow-mobile: null !default;
+$app-aside-minimize-hover-box-shadow-mobile-dark: null !default;
+$app-aside-minimize-border-start: null !default;
+$app-aside-minimize-border-start-dark: null !default;
+$app-aside-minimize-border-start-mobile: null !default;
+$app-aside-minimize-border-start-mobile-dark: null !default;
+$app-aside-minimize-border-end: null !default;
+$app-aside-minimize-border-end-dark: null !default;
+$app-aside-minimize-border-end-mobile: null !default;
+$app-aside-minimize-border-end-mobile-dark: null !default;
+$app-aside-minimize-gap-start: 0px !default;
+$app-aside-minimize-gap-start-mobile: 0px !default;
+$app-aside-minimize-gap-end: 0px !default;
+$app-aside-minimize-gap-end-mobile: 0px !default;
+$app-aside-minimize-gap-top: 0px !default;
+$app-aside-minimize-gap-top-mobile: 0px !default;
+$app-aside-minimize-gap-bottom: 0px !default;
+$app-aside-minimize-gap-bottom-mobile: 0px !default;
+
+// Footer
+$app-footer-transition: left $app-general-transition-duration $app-general-transition-timing, right $app-general-transition-duration $app-general-transition-timing;
+$app-footer-height: 70px !default;
+$app-footer-height-mobile: 70px !default;
+$app-footer-z-index: null !default;
+$app-footer-z-index-mobile: null !default;
+$app-footer-bg-color: null !default;
+$app-footer-bg-color-dark: null !default;
+$app-footer-bg-color-mobile: null !default;
+$app-footer-bg-color-mobile-dark: null !default;
+$app-footer-box-shadow: null !default;
+$app-footer-box-shadow-dark: null !default;
+$app-footer-box-shadow-mobile: null !default;
+$app-footer-box-shadow-mobile-dark: null !default;
+$app-footer-border-top: null !default;
+$app-footer-border-top-dark: null !default;
+$app-footer-border-top-mobile: null !default;
+$app-footer-border-top-mobile-dark: null !default;
+
+// Footer fixed
+$app-footer-fixed-z-index: 100 !default;
+$app-footer-fixed-z-index-mobile: 100 !default;
+
+// Layout Builder
+$app-layout-builder-toggle-z-index: 105 !default;
+$app-layout-builder-toggle-bottom: 40px !default;
+$app-layout-builder-toggle-bottom-mobile: 15px !default;
+$app-layout-builder-toggle-end: 40px !default;
+$app-layout-builder-toggle-end-mobile: 15px !default;
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/_wrapper.scss b/src/_metronic/assets/sass/core/layout/base/_wrapper.scss
new file mode 100644
index 0000000..a8734b1
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/_wrapper.scss
@@ -0,0 +1,100 @@
+//
+// Wrapper
+//
+
+// General mode
+.app-wrapper {
+ display: flex;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Integration
+ .app-wrapper {
+ transition: $app-wrapper-transition;
+
+ // Header
+ [data-kt-app-header-sticky="on"] & {
+ margin-top: var(--kt-app-header-height-actual);
+ }
+
+ [data-kt-app-header-fixed="true"] & {
+ margin-top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-toolbar-sticky="on"] & {
+ margin-top: var(--kt-app-toolbar-height);
+ }
+
+ [data-kt-app-header-fixed="true"][data-kt-app-toolbar-sticky="on"] & {
+ margin-top: calc(var(--kt-app-header-height-actual) + var(--kt-app-toolbar-height-actual));
+ }
+
+ [data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"] & {
+ margin-top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height));
+ }
+
+ // Sidebar
+ [data-kt-app-sidebar-fixed="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-sidebar-panel-fixed="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ // Aside
+ [data-kt-app-aside-fixed="true"] & {
+ margin-right: calc(
+ var(--kt-app-aside-width) +
+ var(--kt-app-aside-gap-start, 0px) +
+ var(--kt-app-aside-gap-end, 0px)
+ );
+ }
+
+ // Footer
+ [data-kt-app-footer-fixed="true"] & {
+ margin-bottom: var(--kt-app-footer-height);
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Integration
+ .app-wrapper {
+ transition: $app-wrapper-transition;
+
+ // Header
+ [data-kt-app-header-sticky="on"] & {
+ margin-top: var(--kt-app-header-height-actual);
+ }
+
+ [data-kt-app-header-fixed-mobile="true"] & {
+ margin-top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-header-fixed-mobile="true"][data-kt-app-toolbar-sticky="on"] & {
+ margin-top: calc(var(--kt-app-header-height-actual) + var(--kt-app-toolbar-height-actual));
+ }
+
+ // Footer
+ [data-kt-app-footer-fixed-mobile="true"] & {
+ margin-bottom: var(--kt-app-footer-height);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/aside/_aside.scss b/src/_metronic/assets/sass/core/layout/base/aside/_aside.scss
new file mode 100644
index 0000000..71f38c3
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/aside/_aside.scss
@@ -0,0 +1,294 @@
+//
+// Aside
+//
+
+// General mode
+.app-aside {
+ transition: $app-aside-base-transition;
+}
+
+// Utilities
+.app-aside-minimize-d-flex,
+.app-aside-sticky-d-flex,
+.app-aside-collapse-d-flex,
+.app-aside-minimize-mobile-d-flex,
+.app-aside-collapse-mobile-d-flex {
+ display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-aside {
+ display: flex;
+ flex-shrink: 0;
+ width: var(--kt-app-aside-width);
+ background-color: var(--kt-app-aside-base-bg-color);
+ box-shadow: var(--kt-app-aside-base-box-shadow);
+ border-left: var(--kt-app-aside-base-border-left);
+ border-right: var(--kt-app-aside-base-border-right);
+
+ @include property( margin-left, $app-aside-base-gap-start);
+ @include property( margin-right, $app-aside-base-gap-end);
+ @include property( margin-top, $app-aside-base-gap-top);
+ @include property( margin-bottom, $app-aside-base-gap-bottom);
+ @include property( z-index, $app-aside-base-z-index);
+ }
+
+ // Vars
+ :root {
+ --kt-app-aside-width: #{$app-aside-base-width};
+ --kt-app-aside-width-actual: #{$app-aside-base-width};
+
+ --kt-app-aside-gap-start: #{$app-aside-base-gap-start};
+ --kt-app-aside-gap-end: #{$app-aside-base-gap-end};
+ --kt-app-aside-gap-top: #{$app-aside-base-gap-top};
+ --kt-app-aside-gap-bottom: #{$app-aside-base-gap-bottom};
+ }
+
+ [data-kt-app-aside-stacked="true"] {
+ --kt-app-aside-width: calc(var(--kt-app-aside-primary-width) + var(--kt-app-aside-secondary-width));
+ }
+
+ [data-kt-app-aside-minimize="on"] {
+ --kt-app-aside-width: #{$app-aside-minimize-width};
+
+ --kt-app-aside-gap-start: #{$app-aside-minimize-gap-start};
+ --kt-app-aside-gap-end: #{$app-aside-minimize-gap-end};
+ --kt-app-aside-gap-top: #{$app-aside-minimize-gap-top};
+ --kt-app-aside-gap-bottom: #{$app-aside-minimize-gap-bottom};
+ }
+
+ [data-kt-app-aside-sticky="on"] {
+ --kt-app-aside-width: #{$app-aside-sticky-width};
+
+ --kt-app-aside-gap-start: #{$app-aside-sticky-gap-start};
+ --kt-app-aside-gap-end: #{$app-aside-sticky-gap-end};
+ --kt-app-aside-gap-top: #{$app-aside-sticky-gap-top};
+ --kt-app-aside-gap-bottom: #{$app-aside-sticky-gap-bottom};
+ }
+
+ [data-kt-app-aside-collapse="on"] {
+ --kt-app-aside-width: 0px;
+ }
+
+ // States
+ .app-aside {
+ [data-kt-app-aside-static="true"] & {
+ position: relative;
+ }
+
+ [data-kt-app-aside-offcanvas="true"] & {
+ display: none;
+ }
+
+ [data-kt-app-aside-fixed="true"] & {
+ position: fixed;
+ @include property( z-index, $app-aside-fixed-z-index);
+ @include property( top, $app-aside-fixed-top);
+ @include property( bottom, $app-aside-fixed-bottom);
+ @include property( right, $app-aside-fixed-right);
+ }
+
+ [data-kt-app-aside-stacked="true"] & {
+ align-items: stretch;
+ }
+
+ [data-kt-app-aside-sticky="on"] & {
+ position: fixed;
+ transition: $app-aside-base-transition;
+
+ box-shadow: var(--kt-app-aside-sticky-box-shadow);
+ border-left: var(--kt-aside-sticky-border-start);
+ border-right: var(--kt-app-aside-sticky-border-end);
+
+ @include property( top, $app-aside-sticky-top);
+ @include property( bottom, $app-aside-sticky-bottom);
+ @include property( left, $app-aside-sticky-left);
+ @include property( z-index, $app-aside-sticky-z-index);
+ @include property( margin-left, $app-aside-sticky-gap-start);
+ @include property( margin-right, $app-aside-sticky-gap-end);
+ @include property( margin-top, $app-aside-sticky-gap-top);
+ @include property( margin-bottom, $app-aside-sticky-gap-bottom);
+ }
+
+ [data-kt-app-aside-minimize="on"] & {
+ transition: $app-aside-base-transition;
+
+ background-color: var(--kt-app-aside-minimize-bg-color);
+ box-shadow: var(--kt-app-aside-minimize-box-shadow);
+ border-start: var(--kt-app-aside-minimize-border-start);
+ border-end: var(--kt-app-aside-minimize-border-end);
+
+ @include property( margin-left, $app-aside-minimize-gap-start);
+ @include property( margin-right, $app-aside-minimize-gap-end);
+ @include property( margin-top, $app-aside-minimize-gap-top);
+ @include property( margin-bottom, $app-aside-minimize-gap-bottom);
+ }
+
+ [data-kt-app-aside-hoverable="true"] & {
+ .app-aside-wrapper {
+ width: var(--kt-app-aside-width-actual);
+ }
+ }
+
+ [data-kt-app-aside-hoverable="true"][data-kt-app-aside-minimize="on"] &:hover:not(.animating) {
+ transition: $app-aside-base-transition;
+ width: var(--kt-app-aside-width-actual);
+ box-shadow: var(--kt-app-aside-minimize-hover-box-shadow);
+ }
+
+ [data-kt-app-aside-collapse="on"] & {
+ transition: $app-aside-base-transition;
+ width: var(--kt-app-aside-width-actual);
+ margin-right: calc( -1 * var(--kt-app-aside-width-actual));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-aside-minimize="on"] {
+ .app-aside-minimize-d-none {
+ display: none !important;
+ }
+
+ .app-aside-minimize-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-aside-sticky="on"] {
+ .app-aside-sticky-d-none {
+ display: none !important;
+ }
+
+ .app-aside-sticky-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-aside-collapse="on"] {
+ .app-aside-collapse-d-none {
+ display: none !important;
+ }
+
+ .app-aside-collapse-d-flex {
+ display: flex !important;
+ }
+ }
+
+ // Integration
+ .app-aside {
+ // Header
+ [data-kt-app-aside-fixed="true"][data-kt-app-header-fixed="true"]:not([data-kt-app-aside-push-header="true"]) & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-aside-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"]:not([data-kt-app-aside-push-toolbar="true"]) & {
+ top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height, 0px));
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-aside {
+ display: none;
+ width: var(--kt-app-aside-width);
+ @include property( z-index, $app-aside-base-z-index-mobile);
+
+ background-color: var(--kt-app-aside-base-bg-color-mobile);
+ box-shadow: var(--kt-app-aside-base-box-shadow-mobile);
+ border-left: var(--kt-app-aside-base-border-start-mobile);
+ order-right: var(--kt-app-aside-base-border-end-mobile);
+
+ @include property( margin-left, $app-aside-base-gap-start-mobile);
+ @include property( margin-right, $app-aside-base-gap-end-mobile);
+ @include property( margin-top, $app-aside-base-gap-top-mobile);
+ @include property( margin-bottom, $app-aside-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-aside-width: #{$app-aside-base-width-mobile};
+ --kt-app-aside-width-actual: #{$app-aside-base-width-mobile};
+
+ --kt-app-aside-gap-start: #{$app-aside-base-gap-start-mobile};
+ --kt-app-aside-gap-end: #{$app-aside-base-gap-end-mobile};
+ --kt-app-aside-gap-top: #{$app-aside-base-gap-top-mobile};
+ --kt-app-aside-gap-bottom: #{$app-aside-base-gap-bottom-mobile};
+ }
+
+ [data-kt-app-aside-minimize-mobile="on"] {
+ --kt-app-aside-width: #{$app-aside-minimize-width-mobile};
+
+ --kt-app-aside-gap-start: #{$app-aside-minimize-gap-start-mobile};
+ --kt-app-aside-gap-end: #{$app-aside-minimize-gap-end-mobile};
+ --kt-app-aside-gap-top: #{$app-aside-minimize-gap-top-mobile};
+ --kt-app-aside-gap-bottom: #{$app-aside-minimize-gap-bottom-mobile};
+ }
+
+ [data-kt-app-aside-collapse-mobile="on"] {
+ --kt-app-aside-width: 0px;
+ }
+
+ // States
+ .app-aside {
+ [data-kt-app-aside-stacked="true"] & {
+ align-items: stretch;
+ }
+
+ [data-kt-app-aside-minimize-mobile="on"] & {
+ transition: $app-aside-base-transition;
+ background-color: var(--kt-app-aside-minimize-bg-color-mobile);
+ box-shadow: var(--kt-app-aside-minimize-box-shadow-mobile);
+ border-left: var(--kt-app-aside-minimize-border-start-mobile);
+ border-right: var(--kt-app-aside-minimize-border-end-mobile);
+
+ @include property( margin-left, $app-aside-minimize-gap-start-mobile);
+ @include property( margin-right, $app-aside-minimize-gap-end-mobile);
+ @include property( margin-top, $app-aside-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-aside-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-aside-hoverable-mobile="true"] & {
+ .app-aside-wrapper {
+ width: var(--kt-app-aside-width-actual);
+ }
+ }
+
+ [data-kt-app-aside-hoverable-mobile="true"][data-kt-app-aside-minimize-mobile="on"] &:hover:not(.animating) {
+ transition: $app-aside-base-transition;
+ width: var(--kt-app-aside-width-actual);
+ box-shadow: var(--kt-app-aside-minimize-hover-box-shadow-mobile);
+ }
+
+ [data-kt-app-aside-collapse-mobile="on"] & {
+ transition: $app-aside-base-transition;
+ width: var(--kt-app-aside-width-actual);
+ margin-right: calc( -1 * var(--kt-app-aside-width-actual));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-aside-minimize-mobile="on"] {
+ .app-aside-minimize-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-aside-minimize-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-aside-collapse-mobile="on"] {
+ .app-aside-collapse-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-aside-collapse-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/header/_header-primary.scss b/src/_metronic/assets/sass/core/layout/base/header/_header-primary.scss
new file mode 100644
index 0000000..4456c2a
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/header/_header-primary.scss
@@ -0,0 +1,120 @@
+//
+// Header primary
+//
+
+// General mode
+.app-header-primary {
+ transition: $app-header-primary-base-transition;
+ display: flex;
+ align-items: stretch;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-header-primary {
+ @include property( z-index, $app-header-primary-base-z-index);
+
+ background-color: var(--kt-app-header-primary-base-bg-color);
+ box-shadow: var(--kt-app-header-primary-base-box-shadow);
+ border-bottom: var(--kt-app-header-primary-base-border-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-header-primary-height: #{$app-header-primary-base-height};
+ }
+
+ [data-kt-app-header-sticky="on"] {
+ --kt-app-header-primary-height: #{$app-header-primary-sticky-height};
+ }
+
+ [data-kt-app-header-minimize="on"] {
+ --kt-app-header-primary-height: #{$app-header-primary-minimize-height};
+ }
+
+ [data-kt-app-header-sticky="on"][data-kt-app-header-primary-sticky-hide="true"] {
+ --kt-app-header-primary-height: 0;
+ }
+
+ // States
+ .app-header-primary {
+ height: var(--kt-app-header-primary-height);
+
+ [data-kt-app-header-primary-fixed="true"] & {
+ @include property( z-index, $app-header-primary-fixed-z-index);
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ [data-kt-app-header-primary-static="true"] & {
+ position: relative;
+ }
+
+ [data-kt-app-header-primary-sticky="on"] & {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ @include property( height, $app-header-primary-sticky-height);
+ @include property( z-index, $app-header-primary-sticky-z-index);
+
+ background-color: var(--kt-app-header-primary-sticky-bg-color);
+ box-shadow: var(--kt-app-header-primary-sticky-box-shadow);
+ border-bottom: var(--kt-app-header-primary-sticky-border-bottom);
+ }
+
+ [data-kt-app-header-primary-minimize="on"] & {
+ transition: $app-header-primary-base-transition;
+ @include property( height, $app-header-primary-minimize-height);
+ @include property( z-index, $app-header-primary-minimize-z-index);
+
+ background-color: var(--kt-app-header-primary-minimize-bg-color);
+ box-shadow: var(--kt-app-header-primary-minimize-box-shadow);
+ border-bottom: var(--kt-app-header-primary-minimize-border-bottom);
+ }
+
+ [data-kt-app-header-sticky="on"][data-kt-app-header-primary-sticky-hide="true"] & {
+ display: none !important;
+ }
+ }
+
+ // Integration
+ .app-header-primary {
+ // Sidebar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-header-primary {
+ flex-grow: 1;
+ @include property( z-index, $app-header-primary-base-z-index-mobile);
+
+ background-color: var(--kt-app-header-primary-base-bg-color-mobile);
+ box-shadow: var(--kt-app-header-primary-base-box-shadow-mobile);
+ border-bottom: var(--kt-app-header-primary-base-border-bottom-mobile);
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/header/_header-secondary.scss b/src/_metronic/assets/sass/core/layout/base/header/_header-secondary.scss
new file mode 100644
index 0000000..8549f76
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/header/_header-secondary.scss
@@ -0,0 +1,120 @@
+//
+// Header secondary
+//
+
+// General mode
+.app-header-secondary {
+ transition: $app-header-secondary-base-transition;
+ display: flex;
+ align-items: stretch;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-header-secondary {
+ @include property( z-index, $app-header-secondary-base-z-index);
+
+ background-color: var(--kt-app-header-secondary-base-bg-color);
+ box-shadow: var(--kt-app-header-secondary-base-box-shadow);
+ border-bottom: var(--kt-app-header-secondary-base-border-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-header-secondary-height: #{$app-header-secondary-base-height};
+ }
+
+ [data-kt-app-header-sticky="on"] {
+ --kt-app-header-secondary-height: #{$app-header-secondary-sticky-height};
+ }
+
+ [data-kt-app-header-minimize="on"] {
+ --kt-app-header-secondary-height: #{$app-header-secondary-minimize-height};
+ }
+
+ [data-kt-app-header-sticky="on"][data-kt-app-header-secondary-sticky-hide="true"] {
+ --kt-app-header-secondary-height: 0;
+ }
+
+ // States
+ .app-header-secondary {
+ height: var(--kt-app-header-secondary-height);
+
+ [data-kt-app-header-secondary-fixed="true"] & {
+ @include property( z-index, $app-header-secondary-fixed-z-index);
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ [data-kt-app-header-secondary-static="true"] & {
+ position: static;
+ }
+
+ [data-kt-app-header-secondary-sticky="on"] & {
+ transition: $app-header-secondary-base-transition;
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ @include property( height, $app-header-secondary-sticky-height);
+ @include property( z-index, $app-header-secondary-sticky-z-index);
+
+ background-color: var(--kt-app-header-secondary-sticky-bg-color);
+ box-shadow: var(--kt-app-header-secondary-sticky-box-shadow);
+ border-bottom: var(--kt-app-header-secondary-sticky-border-bottom);
+ }
+
+ [data-kt-app-header-secondary-minimize="on"] & {
+ transition: $app-header-secondary-base-transition;
+ @include property( height, $app-header-secondary-minimize-height);
+ @include property( z-index, $app-header-secondary-minimize-z-index);
+
+ background-color: var(--kt-app-header-secondary-minimize-bg-color);
+ box-shadow: var(--kt-app-header-secondary-minimize-box-shadow);
+ border-bottom: var(--kt-app-header-secondary-minimize-border-bottom);
+ }
+
+ [data-kt-app-header-sticky="on"][data-kt-app-header-secondary-sticky-hide="true"] & {
+ display: none !important;
+ }
+ }
+
+ // Integration
+ .app-header-secondary {
+ // Sidebar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-header-secondary {
+ flex-grow: 1;
+ background-color: var(--kt-app-header-secondary-base-bg-color-mobile);
+ box-shadow: var(--kt-app-header-secondary-base-box-shadow-mobile);
+ border-left: var(--kt-app-header-secondary-base-border-start-mobile);
+ border-right: var(--kt-app-header-secondary-base-border-end-mobile);
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/header/_header.scss b/src/_metronic/assets/sass/core/layout/base/header/_header.scss
new file mode 100644
index 0000000..5283b2c
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/header/_header.scss
@@ -0,0 +1,228 @@
+//
+// sidebar
+//
+
+// General mode
+.app-header {
+ transition: $app-header-base-transition;
+ display: flex;
+ align-items: stretch;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-header {
+ @include property( z-index, $app-header-base-z-index);
+
+ background-color: var(--kt-app-header-base-bg-color);
+ box-shadow: var(--kt-app-header-base-box-shadow);
+ border-bottom: var(--kt-app-header-base-border-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-header-height: #{$app-header-base-height};
+ --kt-app-header-height-actual: #{$app-header-base-height};
+ }
+
+ [data-kt-app-header-sticky="on"] {
+ --kt-app-header-height: #{$app-header-sticky-height};
+ --kt-app-header-height-actual: #{$app-header-base-height};
+ }
+
+ [data-kt-app-header-sticky="on"][data-kt-app-header-stacked="true"] {
+ --kt-app-header-height: calc(var(--kt-app-header-primary-height, 0px) + var(--kt-app-header-secondary-height, 0px));
+ --kt-app-header-height-actual: calc(#{$app-header-primary-base-height} + #{$app-header-secondary-base-height});
+ }
+
+ [data-kt-app-header-minimize="on"] {
+ --kt-app-header-height: #{$app-header-minimize-height};
+ }
+
+ // States
+ .app-header {
+ height: var(--kt-app-header-height);
+
+ [data-kt-app-header-fixed="true"] & {
+ @include property( z-index, $app-header-fixed-z-index);
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ [data-kt-app-header-static="true"] & {
+ position: relative;
+ }
+
+ [data-kt-app-header-stacked="true"] & {
+ flex-direction: column;
+ height: calc(var(--kt-app-header-primary-height) + var(--kt-app-header-secondary-height, 0px));
+ }
+
+ [data-kt-app-header-sticky="on"] & {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ @include property( z-index, $app-header-sticky-z-index);
+ @include property( backdrop-filter, $app-header-sticky-backdrop-filter);
+
+ background-color: var(--kt-app-header-sticky-bg-color);
+ box-shadow: var(--kt-app-header-sticky-box-shadow);
+ border-bottom: var(--kt-app-header-sticky-border-bottom);
+ }
+
+ [data-kt-app-header-minimize="on"] & {
+ transition: $app-header-base-transition;
+ @include property( z-index, $app-header-minimize-z-index);
+ @include property( backdrop-filter, $app-header-minimize-backdrop-filter);
+
+ background-color: var(--kt-app-header-minimize-bg-color);
+ box-shadow: var(--kt-app-header-minimize-box-shadow);
+ border-bottom: var(--kt-app-header-minimize-border-bottom);
+ }
+
+ .app-header-mobile-drawer {
+ display: flex;
+ }
+ }
+
+ // Integration
+ .app-header {
+ // Sidebar
+ [data-kt-app-header-fixed="true"][data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] &,
+ [data-kt-app-header-fixed="true"][data-kt-app-sidebar-sticky="on"][data-kt-app-sidebar-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ body:not([data-kt-app-header-fixed="true"])[data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] &,
+ body:not([data-kt-app-header-fixed="true"])[data-kt-app-sidebar-sticky="on"][data-kt-app-sidebar-push-header="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-header-fixed="true"][data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-header="true"] &,
+ [data-kt-app-header-fixed="true"][data-kt-app-sidebar-panel-sticky="on"][data-kt-app-sidebar-panel-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ body:not([data-kt-app-header-fixed="true"])[data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-header="true"] &,
+ body:not([data-kt-app-header-fixed="true"])[data-kt-app-sidebar-panel-sticky="on"][data-kt-app-sidebar-panel-push-header="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ // Toolbar
+ [data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"] & {
+ box-shadow: none;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-header {
+ @include property( z-index, $app-header-base-z-index-mobile);
+
+ background-color: var(--kt-app-header-base-bg-color-mobile);
+ box-shadow: var(--kt-app-header-base-box-shadow-mobile);
+ border-bottom: var(--kt-app-header-base-border-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-header-height: #{$app-header-base-height-mobile};
+ }
+
+ [data-kt-app-header-sticky="on"] {
+ --kt-app-header-height: #{$app-header-sticky-height-mobile};
+ --kt-app-header-height-actual: #{$app-header-sticky-height-mobile};
+ }
+
+ [data-kt-app-header-minimize="on"] {
+ --kt-app-header-height: #{$app-header-minimize-height-mobile};
+ --kt-app-header-height-actual: #{$app-header-minimize-height-mobile};
+ }
+
+ // States
+ .app-header {
+ height: var(--kt-app-header-height);
+ align-items: stretch;
+
+ .app-header-mobile-drawer {
+ display: none;
+ }
+
+ [data-kt-app-header-stacked="true"] & {
+ flex-direction: column;
+ }
+
+ [data-kt-app-header-fixed-mobile="true"] & {
+ @include property( z-index, $app-header-fixed-z-index-mobile);
+ transition: $app-header-base-transition;
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ [data-kt-app-header-sticky="on"] & {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ @include property( z-index, $app-header-sticky-z-index-mobile);
+ @include property( backdrop-filter, $app-header-sticky-backdrop-filter-mobile);
+
+ background-color: var(--kt-app-header-sticky-bg-color-mobile);
+ box-shadow: var(--kt-app-header-sticky-box-shadow-mobile);
+ border-bottom: var(--kt-app-header-sticky-border-bottom-mobile);
+ }
+
+ [data-kt-app-header-minimize="on"] & {
+ @include property( z-index, $app-header-minimize-z-index-mobile);
+ @include property( backdrop-filter, $app-header-minimize-backdrop-filter-mobile);
+
+ transition: $app-header-base-transition;
+ background-color: var(--kt-app-header-minimize-bg-color-mobile);
+ box-shadow: var(--kt-app-header-minimize-box-shadow-mobile);
+ border-bottom: var(--kt-app-header-minimize-border-bottom-mobile);
+ }
+ }
+
+ // Integration
+ .app-header {
+ // Toolbar
+ [data-kt-app-header-fixed-mobile="true"][data-kt-app-toolbar-fixed-mobile="true"] & {
+ box-shadow: none;
+ }
+
+ [data-kt-app-header-fixed-mobile="true"][data-kt-app-toolbar-sticky="on"] & {
+ box-shadow: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/mixins/_layout-minimize.scss b/src/_metronic/assets/sass/core/layout/base/mixins/_layout-minimize.scss
new file mode 100644
index 0000000..31b88d0
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/mixins/_layout-minimize.scss
@@ -0,0 +1,41 @@
+//
+// Hoverable
+//
+
+@mixin app-layout-minimize($class) {
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ [data-kt-#{$class}-minimize="on"]:not([data-kt-#{$class}-hoverable="true"]) {
+ .#{$class} {
+ @content;
+ }
+ }
+
+ [data-kt-#{$class}-minimize="on"][data-kt-#{$class}-hoverable="true"] {
+ .#{$class} {
+ &:not(:hover) {
+ @content;
+ }
+ }
+ }
+ }
+}
+
+@mixin app-layout-minimize-mobile($class) {
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ [data-kt-#{$class}-minimize-mobile="on"]:not[data-kt-#{$class}-hoverable-mobile="true"] {
+ .#{$class} {
+ @content;
+ }
+ }
+
+ [data-kt-#{$class}-minimize-mobile="on"][data-kt-#{$class}-hoverable-mobile="true"] {
+ .#{$class} {
+ &:not(:hover) {
+ @content;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/mixins/_layout-transition.scss b/src/_metronic/assets/sass/core/layout/base/mixins/_layout-transition.scss
new file mode 100644
index 0000000..4e0a84d
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/mixins/_layout-transition.scss
@@ -0,0 +1,7 @@
+//
+// Layout Transition Mixin
+//
+
+@mixin app-layout-transition($properties: all) {
+ transition: $properties $app-general-transition-duration $app-general-transition-timing !important;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar-panel.scss b/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar-panel.scss
new file mode 100644
index 0000000..9f2735b
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar-panel.scss
@@ -0,0 +1,283 @@
+//
+// sidebar
+//
+
+// General mode
+.app-sidebar-panel {
+ transition: $app-sidebar-panel-base-transition;
+}
+
+// Utilities
+.app-sidebar-panel-minimize-d-flex,
+.app-sidebar-panel-sticky-d-flex,
+.app-sidebar-panel-collapse-d-flex,
+.app-sidebar-panel-minimize-mobile-d-flex,
+.app-sidebar-panel-collapse-mobile-d-flex {
+ display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-sidebar-panel {
+ display: flex;
+ flex-shrink: 0;
+ width: var(--kt-app-sidebar-panel-width);
+ background-color: var(--kt-app-sidebar-panel-base-bg-color);
+ box-shadow: var(--kt-app-sidebar-panel-base-box-shadow);
+ border-left: var(--kt-app-sidebar-panel-base-border-start);
+ border-right: var(--kt-app-sidebar-panel-base-border-end);
+
+ @include property( z-index, $app-sidebar-panel-base-z-index);
+ @include property( margin-left, $app-sidebar-panel-base-gap-start);
+ @include property( margin-right, $app-sidebar-panel-base-gap-end);
+ @include property( margin-top, $app-sidebar-panel-base-gap-top);
+ @include property( margin-bottom, $app-sidebar-panel-base-gap-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-panel-width: #{$app-sidebar-panel-base-width};
+ --kt-app-sidebar-panel-width-actual: #{$app-sidebar-panel-base-width};
+
+ --kt-app-sidebar-panel-gap-start: #{$app-sidebar-panel-base-gap-start};
+ --kt-app-sidebar-panel-gap-end: #{$app-sidebar-panel-base-gap-end};
+ --kt-app-sidebar-panel-gap-top: #{$app-sidebar-panel-base-gap-top};
+ --kt-app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-base-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-panel-minimize="on"] {
+ --kt-app-sidebar-panel-width: #{$app-sidebar-panel-minimize-width};
+
+ --kt-app-sidebar-panel-gap-start: #{$app-sidebar-panel-minimize-gap-start};
+ --kt-app-sidebar-panel-gap-end: #{$app-sidebar-panel-minimize-gap-end};
+ --kt-app-sidebar-panel-gap-top: #{$app-sidebar-panel-minimize-gap-top};
+ --kt-app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-minimize-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-panel-sticky="on"] {
+ --kt-app-sidebar-panel-width: #{$app-sidebar-panel-sticky-width};
+
+ --kt-app-sidebar-panel-gap-start: #{$app-sidebar-panel-sticky-gap-start};
+ --kt-app-sidebar-panel-gap-end: #{$app-sidebar-panel-sticky-gap-end};
+ --kt-app-sidebar-panel-gap-top: #{$app-sidebar-panel-sticky-gap-top};
+ --kt-app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-sticky-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-panel-collapse="on"] {
+ --kt-app-sidebar-panel-width-actual: #{$app-sidebar-panel-base-width};
+ --kt-app-sidebar-panel-width: 0px;
+ }
+
+ // States
+ .app-sidebar-panel {
+ [data-kt-app-sidebar-panel-static="true"] & {
+ position: relative;
+ }
+
+ [data-kt-app-sidebar-panel-offcanvas="true"] & {
+ display: none;
+ }
+
+ [data-kt-app-sidebar-panel-fixed="true"] & {
+ @include property( z-index, $app-sidebar-panel-fixed-z-index);
+ position: fixed;
+ left: calc(var(--kt-app-sidebar-width) + var(--kt-app-sidebar-gap-start, 0px) + var(--kt-app-sidebar-gap-end, 0px));
+ top: 0;
+ bottom: 0;
+ }
+
+ [data-kt-app-sidebar-panel-sticky="on"] & {
+ position: fixed;
+ left: calc(var(--kt-app-sidebar-width) + var(--kt-app-sidebar-gap-start, 0px) + var(--kt-app-sidebar-gap-end, 0px));
+ top: 0;
+ bottom: 0;
+ transition: $app-sidebar-panel-base-transition;
+
+ box-shadow: var(--kt-app-sidebar-panel-sticky-box-shadow);
+ border-left: var(--kt-app-sidebar-panel-sticky-border-start);
+ border-right: var(--kt-app-sidebar-panel-sticky-border-end);
+
+ @include property( z-index, $app-sidebar-panel-sticky-z-index);
+ @include property( margin-left, $app-sidebar-panel-sticky-gap-start);
+ @include property( margin-right, $app-sidebar-panel-sticky-gap-end);
+ @include property( margin-top, $app-sidebar-panel-sticky-gap-top);
+ @include property( margin-bottom, $app-sidebar-panel-sticky-gap-bottom);
+ }
+
+ [data-kt-app-sidebar-panel-minimize="on"] & {
+ transition: $app-sidebar-panel-base-transition;
+ background-color: var(--kt-app-sidebar-panel-minimize-bg-color);
+ box-shadow: var(--kt-app-sidebar-panel-minimize-box-shadow);
+ border-left: var(--kt-app-sidebar-panel-minimize-border-start);
+ border-right: var(--kt-app-sidebar-panel-minimize-border-end);
+
+
+ @include property( margin-left, $app-sidebar-panel-minimize-gap-start);
+ @include property( margin-right, $app-sidebar-panel-minimize-gap-end);
+ @include property( margin-top, $app-sidebar-panel-minimize-gap-top);
+ @include property( margin-bottom, $app-sidebar-panel-minimize-gap-bottom);
+ }
+
+ [data-kt-app-sidebar-panel-hoverable="true"] & {
+ .app-sidebar-panel-hoverable {
+ width: var(--kt-app-sidebar-panel-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-panel-hoverable="true"][data-kt-app-sidebar-panel-minimize="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-panel-base-transition;
+ width: var(--kt-app-sidebar-panel-width-actual);
+ box-shadow: var(--kt-app-sidebar-panel-minimize-hover-box-shadow);
+ }
+
+ [data-kt-app-sidebar-panel-collapse="on"] & {
+ transition: $app-sidebar-panel-base-transition;
+ width: var(--kt-app-sidebar-panel-width-actual);
+ margin-left: calc( -1 * (var(--kt-app-sidebar-panel-width-actual) + var(--kt-app-sidebar-gap-start, 0px) + var(--kt-app-sidebar-gap-end, 0px)));
+ }
+ }
+
+ // Integration
+ .app-sidebar-panel {
+ // Header
+ [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-header-fixed="true"]:not([data-kt-app-sidebar-panel-push-header="true"]) & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"]:not([data-kt-app-sidebar-panel-push-toolbar="true"]) & {
+ top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height, 0));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-panel-minimize="on"] {
+ .app-sidebar-panel-minimize-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-panel-minimize-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-panel-sticky="on"] {
+ .app-sidebar-panel-sticky-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-panel-sticky-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-panel-collapse="on"] {
+ .app-sidebar-panel-collapse-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-panel-collapse-d-flex {
+ display: flex !important;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-sidebar-panel {
+ display: none;
+ width: var(--kt-app-sidebar-panel-width);
+
+ background-color: var(--kt-app-sidebar-panel-base-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-panel-base-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-panel-base-border-start-mobile);
+ border-right: var(--kt-app-sidebar-panel-base-border-end-mobile);
+
+ @include property( z-index, $app-sidebar-panel-base-z-index-mobile);
+ @include property( margin-left, $app-sidebar-panel-base-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-panel-base-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-panel-base-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-panel-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-panel-gap-start: #{$app-sidebar-panel-base-gap-start-mobile};
+ --kt-app-sidebar-panel-gap-end: #{$app-sidebar-panel-base-gap-end-mobile};
+ --kt-app-sidebar-panel-gap-top: #{$app-sidebar-panel-base-gap-top-mobile};
+ --kt-app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-base-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-panel-minimize-mobile="on"] {
+ --kt-app-sidebar-panel-width: #{$app-sidebar-panel-minimize-width-mobile};
+
+ --kt-app-sidebar-panel-gap-start: #{$app-sidebar-panel-minimize-gap-start-mobile};
+ --kt-app-sidebar-panel-gap-end: #{$app-sidebar-panel-minimize-gap-end-mobile};
+ --kt-app-sidebar-panel-gap-top: #{$app-sidebar-panel-minimize-gap-top-mobile};
+ --kt-app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-minimize-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-panel-collapse-mobile="on"] {
+ --kt-app-sidebar-panel-width-actual: #{$app-sidebar-panel-base-width-mobile};
+ --kt-app-sidebar-panel-width: 0px;
+ }
+
+ // States
+ .app-sidebar-panel {
+ [data-kt-app-sidebar-panel-minimize-mobile="on"] & {
+ transition: $app-sidebar-panel-base-transition;
+
+ background-color: var(--kt-app-sidebar-panel-minimize-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-panel-minimize-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-panel-minimize-border-start-mobile);
+ border-right: var(--kt-app-sidebar-panel-minimize-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-panel-minimize-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-panel-minimize-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-panel-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-panel-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-sidebar-panel-hoverable-mobile="true"] & {
+ .app-sidebar-panel-hoverable {
+ width: var(--kt-app-sidebar-panel-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-panel-hoverable-mobile="true"][data-kt-app-sidebar-panel-minimize-mobile="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-panel-base-transition;
+ width: var(--kt-app-sidebar-panel-width-actual);
+
+ box-shadow: var(--kt-app-sidebar-panel-minimize-hover-box-shadow-mobile);
+ }
+
+ [data-kt-app-sidebar-panel-collapse-mobile="on"] & {
+ transition: $app-sidebar-panel-base-transition;
+ width: var(--kt-app-sidebar-panel-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-panel-width-actual));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-panel-minimize-mobile="on"] {
+ .app-sidebar-panel-minimize-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-panel-minimize-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-panel-collapse-mobile="on"] {
+ .app-sidebar-panel-collapse-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-panel-collapse-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar-primary.scss b/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar-primary.scss
new file mode 100644
index 0000000..9db9167
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar-primary.scss
@@ -0,0 +1,236 @@
+//
+// sidebar Primary
+//
+
+// General mode
+.app-sidebar-primary {
+ transition: $app-sidebar-primary-base-transition;
+ position: relative;
+ flex-shrink: 0;
+}
+
+// Utilities
+.app-sidebar-primary-collapse-d-flex,
+.app-sidebar-primary-minimize-d-flex,
+.app-sidebar-primary-collapse-mobile-d-flex,
+.app-sidebar-primary-minimize-mobile-d-flex {
+ display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-sidebar-primary {
+ background-color: var(--kt-app-sidebar-primary-base-bg-color);
+ box-shadow: var(--kt-app-sidebar-primary-base-box-shadow);
+ border-left: var(--kt-app-sidebar-primary-base-border-start);
+ border-right: var(--kt-app-sidebar-primary-base-border-end);
+
+ @include property( z-index, $app-sidebar-primary-base-z-index);
+ @include property( margin-left, $app-sidebar-primary-base-gap-start);
+ @include property( margin-right, $app-sidebar-primary-base-gap-end);
+ @include property( margin-top, $app-sidebar-primary-base-gap-top);
+ @include property( margin-bottom, $app-sidebar-primary-base-gap-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-primary-width-actual: #{$app-sidebar-primary-base-width};
+ }
+
+ [data-kt-app-sidebar-stacked="true"] {
+ --kt-app-sidebar-primary-width: #{$app-sidebar-primary-base-width};
+
+ --kt-app-sidebar-primary-gap-start: #{$app-sidebar-primary-base-gap-start};
+ --kt-app-sidebar-primary-gap-end: #{$app-sidebar-primary-base-gap-end};
+ --kt-app-sidebar-primary-gap-top: #{$app-sidebar-primary-base-gap-top};
+ --kt-app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-base-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-primary-minimize="on"] {
+ --kt-app-sidebar-primary-width: #{$app-sidebar-primary-minimize-width};
+
+ --kt-app-sidebar-primary-gap-start: #{$app-sidebar-primary-minimize-gap-start};
+ --kt-app-sidebar-primary-gap-end: #{$app-sidebar-primary-minimize-gap-end};
+ --kt-app-sidebar-primary-gap-top: #{$app-sidebar-primary-minimize-gap-top};
+ --kt-app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-minimize-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-primary-collapse="on"] {
+ --kt-app-sidebar-primary-width: 0px;
+ }
+
+ // States
+ .app-sidebar-primary {
+ width: var(--kt-app-sidebar-primary-width);
+
+ [data-kt-app-sidebar-primary-collapse="on"] & {
+ transition: $app-sidebar-primary-base-transition;
+ width: var(--kt-app-sidebar-primary-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-primary-width-actual));
+ }
+
+ [data-kt-app-sidebar-primary-minimize="on"] & {
+ transition: $app-sidebar-primary-base-transition;
+
+ background-color: var(--kt-app-sidebar-primary-minimize-bg-color);
+ box-shadow: var(--kt-app-sidebar-primary-minimize-box-shadow);
+ border-left: var(--kt-app-sidebar-primary-minimize-border-start);
+ border-right: var(--kt-app-sidebar-primary-minimize-border-end);
+
+ @include property( margin-left, $app-sidebar-primary-minimize-gap-start);
+ @include property( margin-right, $app-sidebar-primary-minimize-gap-end);
+ @include property( margin-top, $app-sidebar-primary-minimize-gap-top);
+ @include property( margin-bottom, $app-sidebar-primary-minimize-gap-bottom);
+ }
+
+ [data-kt-app-sidebar-primary-hoverable="true"] & {
+ .app-sidebar-primary-hoverable {
+ width: var(--kt-app-sidebar-primary-width-actual);
+ }
+ }
+
+ // Hover minimized
+ [data-kt-app-sidebar-primary-hoverable="true"][data-kt-app-sidebar-primary-minimize="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-primary-base-transition;
+ width: var(--kt-app-sidebar-primary-width-actual);
+ box-shadow: var(--kt-app-sidebar-primary-minimize-hover-box-shadow);
+ }
+ }
+
+ // Integration
+ .app-sidebar-primary {
+ // Header
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-sidebar-primary-below-header="true"] & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"][data-kt-app-sidebar-primary-below-toolbar="true"] & {
+ top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height, 0));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-primary-minimize="on"] {
+ .app-sidebar-primary-minimize-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-primary-minimize-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-primary-collapse="on"] {
+ .app-sidebar-primary-collapse-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-primary-collapse-d-flex {
+ display: flex !important;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-sidebar-primary {
+ @include property( z-index, $app-sidebar-primary-base-z-index-mobile);
+
+ background-color: var(--kt-app-sidebar-primary-base-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-primary-base-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-primary-base-border-start-mobile);
+ border-right: var(--kt-app-sidebar-primary-base-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-primary-base-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-primary-base-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-primary-base-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-primary-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-primary-width-actual: #{$app-sidebar-primary-base-width-mobile};
+ }
+
+ [data-kt-app-sidebar-stacked="true"] {
+ --kt-app-sidebar-primary-width: #{$app-sidebar-primary-base-width-mobile};
+
+ --kt-app-sidebar-primary-gap-start: #{$app-sidebar-primary-base-gap-start-mobile};
+ --kt-app-sidebar-primary-gap-end: #{$app-sidebar-primary-base-gap-end-mobile};
+ --kt-app-sidebar-primary-gap-top: #{$app-sidebar-primary-base-gap-top-mobile};
+ --kt-app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-base-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-primary-minimize-mobile="on"] {
+ --kt-app-sidebar-primary-width: #{$app-sidebar-primary-minimize-width-mobile};
+
+ --kt-app-sidebar-primary-gap-start: #{$app-sidebar-primary-minimize-gap-start-mobile};
+ --kt-app-sidebar-primary-gap-end: #{$app-sidebar-primary-minimize-gap-end-mobile};
+ --kt-app-sidebar-primary-gap-top: #{$app-sidebar-primary-minimize-gap-top-mobile};
+ --kt-app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-minimize-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-primary-collapse-mobile="on"] {
+ --kt-app-sidebar-primary-width: 0px;
+ }
+
+ // States
+ .app-sidebar-primary {
+ width: var(--kt-app-sidebar-primary-width);
+
+ [data-kt-app-sidebar-primary-collapse-mobile="on"] & {
+ transition: $app-sidebar-primary-base-transition;
+ width: var(--kt-app-sidebar-primary-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-primary-width-actual));
+ }
+
+ [data-kt-app-sidebar-primary-minimize-mobile="on"] & {
+ transition: $app-sidebar-primary-base-transition;
+ background-color: var(--kt-app-sidebar-primary-minimize-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-primary-base-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-primary-minimize-border-start-mobile);
+ border-left: var(--kt-app-sidebar-primary-minimize-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-primary-minimize-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-primary-minimize-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-primary-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-primary-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-sidebar-primary-hoverable-mobile="true"] & {
+ .app-sidebar-primary-hoverable {
+ width: var(--kt-app-sidebar-primary-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-primary-hoverable-mobile="true"][data-kt-app-sidebar-primary-minimize-mobile="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-primary-base-transition;
+ width: var(--kt-app-sidebar-primary-width-actual);
+ box-shadow: var(--kt-app-sidebar-primary-minimize-hover-box-shadow-mobile);
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-primary-minimize-mobile="on"] {
+ .app-sidebar-primary-minimize-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-primary-minimize-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-primary-collapse-mobile="on"] {
+ .app-sidebar-primary-collapse-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-primary-collapse-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar-secondary.scss b/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar-secondary.scss
new file mode 100644
index 0000000..0641268
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar-secondary.scss
@@ -0,0 +1,282 @@
+//
+// sidebar Secondary
+//
+
+// General mode
+.app-sidebar-secondary {
+ transition: $app-sidebar-secondary-base-transition;
+ position: relative;
+ flex-shrink: 0;
+}
+
+// Utilities
+.app-sidebar-secondary-collapse-d-flex,
+.app-sidebar-secondary-minimize-d-flex,
+.app-sidebar-secondary-collapse-mobile-d-flex,
+.app-sidebar-secondary-minimize-mobile-d-flex {
+ display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-sidebar-secondary {
+ @include property( z-index, $app-sidebar-secondary-base-z-index);
+
+ background-color: var(--kt-app-sidebar-secondary-base-bg-color);
+ box-shadow: var(--kt-app-sidebar-secondary-base-box-shadow);
+ border-left: var(--kt-app-sidebar-secondary-base-border-start);
+ border-right: var(--kt-app-sidebar-secondary-base-border-end);
+
+ @include property( margin-left, $app-sidebar-secondary-base-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-secondary-base-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-secondary-base-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-secondary-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-secondary-width-actual: calc(
+ #{$app-sidebar-base-width} -
+ #{$app-sidebar-primary-base-width} -
+ #{$app-sidebar-primary-base-gap-start} -
+ #{$app-sidebar-primary-base-gap-end} -
+ #{$app-sidebar-secondary-base-gap-start} -
+ #{$app-sidebar-secondary-base-gap-end}
+ );
+ }
+
+ [data-kt-app-sidebar-stacked="true"] {
+ --kt-app-sidebar-secondary-width: calc(
+ #{$app-sidebar-base-width} -
+ #{$app-sidebar-primary-base-width} -
+ #{$app-sidebar-primary-base-gap-start} -
+ #{$app-sidebar-primary-base-gap-end} -
+ #{$app-sidebar-secondary-base-gap-start} -
+ #{$app-sidebar-secondary-base-gap-end}
+ );
+
+ --kt-app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-base-gap-start};
+ --kt-app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-base-gap-end};
+ --kt-app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-base-gap-top};
+ --kt-app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-base-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-secondary-minimize="on"] {
+ --kt-app-sidebar-secondary-width: #{$app-sidebar-secondary-minimize-width};
+
+ --kt-app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-minimize-gap-start};
+ --kt-app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-minimize-gap-end};
+ --kt-app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-minimize-gap-top};
+ --kt-app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-minimize-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-secondary-collapse="on"] {
+ --kt-app-sidebar-secondary-width-actual: calc(
+ #{$app-sidebar-base-width} -
+ #{$app-sidebar-primary-base-width} -
+ #{$app-sidebar-primary-base-gap-start} -
+ #{$app-sidebar-primary-base-gap-end} -
+ #{$app-sidebar-secondary-base-gap-start} -
+ #{$app-sidebar-secondary-base-gap-end}
+ );
+
+ --kt-app-sidebar-secondary-width: 0px;
+ }
+
+ // States
+ .app-sidebar-secondary {
+ width: var(--kt-app-sidebar-secondary-width);
+
+ [data-kt-app-sidebar-secondary-collapse="on"] & {
+ transition: $app-sidebar-secondary-base-transition;
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-secondary-width-actual));
+ }
+
+ [data-kt-app-sidebar-secondary-minimize="on"] & {
+ transition: $app-sidebar-secondary-base-transition;
+
+ background-color: var(--kt-app-sidebar-secondary-minimize-bg-color);
+ box-shadow: var(--kt-app-sidebar-secondary-minimize-box-shadow);
+ border-left: var(--kt-app-sidebar-secondary-minimize-border-start);
+ border-right: var(--kt-app-sidebar-secondary-minimize-border-end);
+
+ @include property( margin-left, $app-sidebar-secondary-minimize-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-secondary-minimize-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-secondary-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-secondary-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-sidebar-secondary-hoverable="true"] & {
+ .app-sidebar-secondary-hoverable {
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-secondary-hoverable="true"][data-kt-app-sidebar-secondary-minimize="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-secondary-base-transition;
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ box-shadow: var(--kt-app-sidebar-secondary-minimize-hover-box-shadow);
+ }
+ }
+
+ // Integration
+ .app-sidebar-secondary {
+ // Header
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-sidebar-secondary-below-header="true"] & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"][data-kt-app-sidebar-secondary-below-toolbar="true"] & {
+ top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height, 0));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-secondary-minimize="on"] {
+ .app-sidebar-secondary-minimize-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-secondary-minimize-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-secondary-collapse="on"] {
+ .app-sidebar-secondary-collapse-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-secondary-collapse-d-flex {
+ display: flex !important;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-sidebar-secondary {
+ @include property( z-index, $app-sidebar-secondary-base-z-index-mobile);
+
+ background-color: var(--kt-app-sidebar-secondary-base-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-secondary-base-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-secondary-base-border-start-mobile);
+ border-right: var(--kt-app-sidebar-secondary-base-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-secondary-base-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-secondary-base-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-secondary-base-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-secondary-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-secondary-width-actual: calc(
+ #{$app-sidebar-base-width-mobile} -
+ #{$app-sidebar-primary-base-width-mobile} -
+ #{$app-sidebar-primary-base-gap-start-mobile} -
+ #{$app-sidebar-primary-base-gap-end-mobile} -
+ #{$app-sidebar-secondary-base-gap-start-mobile} -
+ #{$app-sidebar-secondary-base-gap-end-mobile}
+ );
+ }
+
+ [data-kt-app-sidebar-stacked="true"] {
+ --kt-app-sidebar-secondary-width: calc(
+ #{$app-sidebar-base-width-mobile} -
+ #{$app-sidebar-primary-base-width-mobile} -
+ #{$app-sidebar-primary-base-gap-start-mobile} -
+ #{$app-sidebar-primary-base-gap-end-mobile} -
+ #{$app-sidebar-secondary-base-gap-start-mobile} -
+ #{$app-sidebar-secondary-base-gap-end-mobile}
+ );
+
+ --kt-app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-base-gap-start-mobile};
+ --kt-app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-base-gap-end-mobile};
+ --kt-app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-base-gap-top-mobile};
+ --kt-app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-base-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-secondary-minimize-mobile="on"] {
+ --kt-app-sidebar-secondary-width: #{$app-sidebar-secondary-minimize-width-mobile};
+
+ --kt-app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-minimize-gap-start-mobile};
+ --kt-app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-minimize-gap-end-mobile};
+ --kt-app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-minimize-gap-top-mobile};
+ --kt-app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-minimize-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-secondary-collapse-mobile="on"] {
+ --kt-app-sidebar-secondary-width-actual: calc(
+ #{$app-sidebar-base-width-mobile} -
+ #{$app-sidebar-primary-base-width-mobile} -
+ #{$app-sidebar-primary-base-gap-start-mobile} -
+ #{$app-sidebar-primary-base-gap-end-mobile} -
+ #{$app-sidebar-secondary-base-gap-start-mobile} -
+ #{$app-sidebar-secondary-base-gap-end-mobile}
+ );
+
+ --kt-app-sidebar-secondary-width: 0px;
+ }
+
+ // States
+ .app-sidebar-secondary {
+ width: var(--kt-app-sidebar-secondary-width);
+
+ [data-kt-app-sidebar-secondary-collapse-mobile="on"] & {
+ transition: $app-sidebar-secondary-base-transition;
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-secondary-width-actual));
+ }
+
+ [data-kt-app-sidebar-secondary-minimize-mobile="on"] & {
+ transition: $app-sidebar-secondary-base-transition;
+ background-color: var(--kt-app-sidebar-secondary-minimize-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-secondary-minimize-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-secondary-minimize-border-start-mobile);
+ border-right: var(--kt-app-sidebar-secondary-minimize-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-secondary-minimize-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-secondary-minimize-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-secondary-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-secondary-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-sidebar-secondary-hoverable-mobile="true"] & {
+ .app-sidebar-secondary-hoverable {
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-secondary-hoverable-mobile="true"][data-kt-app-sidebar-secondary-minimize-mobile="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-secondary-base-transition;
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ box-shadow: var(--kt-app-sidebar-secondary-minimize-hover-box-shadow-mobile);
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-secondary-minimize-mobile="on"] {
+ .app-sidebar-secondary-minimize-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-secondary-minimize-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-secondary-collapse="on"] {
+ .app-sidebar-secondary-collapse-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-secondary-collapse-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar.scss b/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar.scss
new file mode 100644
index 0000000..097b6b3
--- /dev/null
+++ b/src/_metronic/assets/sass/core/layout/base/sidebar/_sidebar.scss
@@ -0,0 +1,296 @@
+//
+// sidebar
+//
+
+// General mode
+.app-sidebar {
+ transition: $app-sidebar-base-transition;
+}
+
+// Utilities
+.app-sidebar-minimize-d-flex,
+.app-sidebar-sticky-d-flex,
+.app-sidebar-collapse-d-flex,
+.app-sidebar-minimize-mobile-d-flex,
+.app-sidebar-collapse-mobile-d-flex {
+ display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-sidebar {
+ display: flex;
+ flex-shrink: 0;
+ width: var(--kt-app-sidebar-width);
+
+ background-color: var(--kt-app-sidebar-base-bg-color);
+ box-shadow: var(--kt-app-sidebar-base-box-shadow);
+ border-left: var(--kt-app-sidebar-base-border-start);
+ border-right: var(--kt-app-sidebar-base-border-end);
+
+ @include property( z-index, $app-sidebar-base-z-index);
+ @include property( margin-left, $app-sidebar-base-gap-start);
+ @include property( margin-right, $app-sidebar-base-gap-end);
+ @include property( margin-top, $app-sidebar-base-gap-top);
+ @include property( margin-bottom, $app-sidebar-base-gap-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-width: #{$app-sidebar-base-width};
+ --kt-app-sidebar-width-actual: #{$app-sidebar-base-width};
+
+ --kt-app-sidebar-gap-start: #{$app-sidebar-base-gap-start};
+ --kt-app-sidebar-gap-end: #{$app-sidebar-base-gap-end};
+ --kt-app-sidebar-gap-top: #{$app-sidebar-base-gap-top};
+ --kt-app-sidebar-gap-bottom: #{$app-sidebar-base-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-stacked="true"] {
+ --kt-app-sidebar-width: calc(var(--kt-app-sidebar-primary-width) + var(--kt-app-sidebar-secondary-width));
+ }
+
+ [data-kt-app-sidebar-minimize="on"] {
+ --kt-app-sidebar-width: #{$app-sidebar-minimize-width};
+
+ --kt-app-sidebar-gap-start: #{$app-sidebar-minimize-gap-start};
+ --kt-app-sidebar-gap-end: #{$app-sidebar-minimize-gap-end};
+ --kt-app-sidebar-gap-top: #{$app-sidebar-minimize-gap-top};
+ --kt-app-sidebar-gap-bottom: #{$app-sidebar-minimize-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-sticky="on"] {
+ --kt-app-sidebar-width: #{$app-sidebar-sticky-width};
+
+ --kt-app-sidebar-gap-start: #{$app-sidebar-sticky-gap-start};
+ --kt-app-sidebar-gap-end: #{$app-sidebar-sticky-gap-end};
+ --kt-app-sidebar-gap-top: #{$app-sidebar-sticky-gap-top};
+ --kt-app-sidebar-gap-bottom: #{$app-sidebar-sticky-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-collapse="on"] {
+ --kt-app-sidebar-width: 0px;
+ }
+
+ // States
+ .app-sidebar {
+ [data-kt-app-sidebar-static="true"] & {
+ position: relative;
+ }
+
+ [data-kt-app-sidebar-offcanvas="true"] & {
+ display: none;
+ }
+
+ [data-kt-app-sidebar-fixed="true"] & {
+ position: fixed;
+ @include property( z-index, $app-sidebar-fixed-z-index);
+ @include property( top, $app-sidebar-fixed-top);
+ @include property( bottom, $app-sidebar-fixed-bottom);
+ @include property( left, $app-sidebar-fixed-left);
+ }
+
+ [data-kt-app-sidebar-stacked="true"] & {
+ align-items: stretch;
+ }
+
+ [data-kt-app-sidebar-sticky="on"] & {
+ position: fixed;
+ transition: $app-sidebar-base-transition;
+ @include property( top, $app-sidebar-sticky-top);
+ @include property( bottom, $app-sidebar-sticky-bottom);
+ @include property( left, $app-sidebar-sticky-left);
+ @include property( z-index, $app-sidebar-sticky-z-index);
+
+ box-shadow: var(--kt-app-sidebar-sticky-box-shadow);
+ border-left: var(--kt-app-sidebar-sticky-border-start);
+ border-right: var(--kt-app-sidebar-sticky-border-end);
+
+ @include property( margin-left, $app-sidebar-sticky-gap-start);
+ @include property( margin-right, $app-sidebar-sticky-gap-end);
+ @include property( margin-top, $app-sidebar-sticky-gap-top);
+ @include property( margin-bottom, $app-sidebar-sticky-gap-bottom);
+ }
+
+ [data-kt-app-sidebar-minimize="on"] & {
+ transition: $app-sidebar-base-transition;
+
+ background-color: var(--kt-app-sidebar-minimize-bg-color);
+ box-shadow: var(--kt-app-sidebar-minimize-box-shadow);
+ border-left: var(--kt-app-sidebar-minimize-border-start);
+ border-right: var(--kt-app-sidebar-minimize-border-end);
+
+ @include property( margin-left, $app-sidebar-minimize-gap-start);
+ @include property( margin-right, $app-sidebar-minimize-gap-end);
+ @include property( margin-top, $app-sidebar-minimize-gap-top);
+ @include property( margin-bottom, $app-sidebar-minimize-gap-bottom);
+ }
+
+ [data-kt-app-sidebar-hoverable="true"] & {
+ .app-sidebar-wrapper {
+ width: var(--kt-app-sidebar-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-base-transition;
+ width: var(--kt-app-sidebar-width-actual);
+ @include property( box-shadow, $app-sidebar-minimize-hover-box-shadow);
+ }
+
+ [data-kt-app-sidebar-collapse="on"] & {
+ transition: $app-sidebar-base-transition;
+ width: var(--kt-app-sidebar-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-width-actual));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-minimize="on"] {
+ .app-sidebar-minimize-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-minimize-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-sticky="on"] {
+ .app-sidebar-sticky-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-sticky-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-collapse="on"] {
+ .app-sidebar-collapse-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-collapse-d-flex {
+ display: flex !important;
+ }
+ }
+
+ // Integration
+ .app-sidebar {
+ // Header
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"]:not([data-kt-app-sidebar-push-header="true"]) & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"]:not([data-kt-app-sidebar-push-toolbar="true"]) & {
+ top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height, 0px));
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-sidebar {
+ display: none;
+ width: var(--kt-app-sidebar-width);
+
+ background-color: var(--kt-app-sidebar-base-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-base-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-base-border-start-mobile);
+ border-right: var(--kt-app-sidebar-base-border-end-mobile);
+
+ @include property( z-index, $app-sidebar-base-z-index-mobile);
+ @include property( margin-left, $app-sidebar-base-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-base-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-base-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-width: #{$app-sidebar-base-width-mobile};
+ --kt-app-sidebar-width-actual: #{$app-sidebar-base-width-mobile};
+
+ --kt-app-sidebar-gap-start: #{$app-sidebar-base-gap-start-mobile};
+ --kt-app-sidebar-gap-end: #{$app-sidebar-base-gap-end-mobile};
+ --kt-app-sidebar-gap-top: #{$app-sidebar-base-gap-top-mobile};
+ --kt-app-sidebar-gap-bottom: #{$app-sidebar-base-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-minimize-mobile="on"] {
+ --kt-app-sidebar-width: #{$app-sidebar-minimize-width-mobile};
+
+ --kt-app-sidebar-gap-start: #{$app-sidebar-minimize-gap-start-mobile};
+ --kt-app-sidebar-gap-end: #{$app-sidebar-minimize-gap-end-mobile};
+ --kt-app-sidebar-gap-top: #{$app-sidebar-minimize-gap-top-mobile};
+ --kt-app-sidebar-gap-bottom: #{$app-sidebar-minimize-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-collapse-mobile="on"] {
+ --kt-app-sidebar-width: 0px;
+ }
+
+ // States
+ .app-sidebar {
+ [data-kt-app-sidebar-stacked="true"] & {
+ align-items: stretch;
+ }
+
+ [data-kt-app-sidebar-minimize-mobile="on"] & {
+ transition: $app-sidebar-base-transition;
+
+ background-color: var(--kt-app-sidebar-minimize-bg-color-mobilee);
+ box-shadow: var(--kt-app-sidebar-minimize-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-minimize-border-start-mobile);
+ border-right: var(--kt-app-sidebar-minimize-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-minimize-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-minimize-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-sidebar-hoverable-mobile="true"] & {
+ .app-sidebar-wrapper {
+ width: var(--kt-app-sidebar-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-hoverable-mobile="true"][data-kt-app-sidebar-minimize-mobile="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-base-transition;
+ width: var(--kt-app-sidebar-width-actual);
+ box-shadow: var(--kt-app-sidebar-minimize-hover-box-shadow-mobile);
+ }
+
+ [data-kt-app-sidebar-collapse-mobile="on"] & {
+ transition: $app-sidebar-base-transition;
+ width: var(--kt-app-sidebar-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-width-actual));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-minimize-mobile="on"] {
+ .app-sidebar-minimize-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-minimize-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-collapse-mobile="on"] {
+ .app-sidebar-collapse-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-collapse-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_apexcharts.scss b/src/_metronic/assets/sass/core/vendors/plugins/_apexcharts.scss
new file mode 100644
index 0000000..87b14f2
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_apexcharts.scss
@@ -0,0 +1,129 @@
+//
+// Apexcharts
+//
+
+// Text
+.apexcharts-text,
+.apexcharts-title-text,
+.apexcharts-legend-text {
+ font-family: $font-family-sans-serif !important;
+}
+
+.apexcharts-title-text {
+ font-weight: $font-weight-normal;
+}
+
+.apexcharts-pie-label {
+ font-weight: $font-weight-normal;
+ font-size: $font-size-sm;
+}
+
+// Dropdown
+.apexcharts-toolbar{
+ text-align: left !important;
+}
+
+.apexcharts-menu {
+ background-color: var(--kt-body-bg);
+ border: 0 !important;
+ padding: 0.5rem 0 !important;
+ box-shadow: var(--kt-dropdown-box-shadow);
+ border-radius: $border-radius !important;
+ overflow: hidden;
+ min-width: 10rem !important;
+
+ .apexcharts-menu-item {
+ padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+ transition: $transition-base;
+
+ &:hover{
+ background-color: var(--kt-hover-bg) !important;
+ }
+ }
+}
+
+// Tooltips
+.apexcharts-tooltip {
+ &.apexcharts-theme-light {
+ @include border-radius($border-radius);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ border: 0 !important;
+ background: var(--kt-body-bg) !important;
+ color: var(--kt-gray-800);
+
+ .apexcharts-tooltip-title {
+ background: var(--kt-body-bg) !important;
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-800);
+ border-bottom: 1px solid var(--kt-gray-100) !important;
+ }
+ }
+
+ .apexcharts-tooltip-title {
+ padding: 0.5rem 1rem;
+ }
+
+ .apexcharts-tooltip-series-group {
+ }
+}
+
+.apexcharts-xaxistooltip {
+ &.apexcharts-theme-light {
+ @include border-radius($border-radius !important);
+ box-shadow: var(--kt-dropdown-box-shadow) !important;
+ border: 0 !important;
+ background: var(--kt-dropdown-box-shadow) !important;
+ color: var(--kt-gray-800);
+
+ &:before {
+ border-bottom: 0 !important;
+ }
+
+ &:after {
+ border-bottom-color: var(--kt-dropdown-box-shadow) !important;
+ }
+ }
+}
+
+// Border radius integration
+.card-rounded-bottom {
+ .apexcharts-canvas {
+ svg {
+ border-bottom-left-radius: $card-border-radius;
+ border-bottom-right-radius: $card-border-radius;
+ }
+ }
+}
+
+// Border radius options
+.rounded {
+ .apexcharts-canvas {
+ svg {
+ border-radius: $border-radius !important;
+ }
+ }
+}
+
+.rounded-sm {
+ .apexcharts-canvas {
+ svg {
+ border-radius: $border-radius-sm !important;
+ }
+ }
+}
+
+.rounded-lg {
+ .apexcharts-canvas {
+ svg {
+ border-radius: $border-radius-lg !important;
+ }
+ }
+}
+
+.rounded-xl {
+ .apexcharts-canvas {
+ svg {
+ border-radius: $border-radius-xl !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_bootstrap-maxlength.scss b/src/_metronic/assets/sass/core/vendors/plugins/_bootstrap-maxlength.scss
new file mode 100644
index 0000000..a450979
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_bootstrap-maxlength.scss
@@ -0,0 +1,16 @@
+//
+// Bootstrap Maxlength
+//
+
+.bootstrap-maxlength {
+ z-index: $bootstrap-maxlength-z-index !important;
+
+ // In modal
+ .modal-open & {
+ z-index: #{$zindex-modal + 5} !important;
+ }
+
+ &.badge {
+ display: inline-flex !important;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_ckeditor.scss b/src/_metronic/assets/sass/core/vendors/plugins/_ckeditor.scss
new file mode 100644
index 0000000..9d9c4e6
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_ckeditor.scss
@@ -0,0 +1,54 @@
+//
+// CKEditor
+//
+
+
+// Base
+.ck-target{
+ display: none;
+}
+
+.ck-toolbar{
+ @include border-radius($border-radius !important);
+}
+
+.ck-content{
+ min-height: 200px;
+ @include border-radius($border-radius !important);
+
+ &.ck-focused{
+ border-color: var(--kt-primary) !important;
+ box-shadow: none !important;
+ }
+}
+
+// CKEditor Classic & Document
+.ck-editor{
+ .ck-toolbar{
+ @include border-top-radius($border-radius !important);
+ @include border-bottom-radius(0 !important);
+ }
+ .ck-content{
+ @include border-bottom-radius($border-radius !important);
+ @include border-top-radius(0 !important);
+ }
+}
+
+// CKEditor Inline / Balloon / Balloon Block
+.ck-body {
+ .ck-balloon-panel{
+ .ck-content{
+ min-height: 200px;
+ border-color: transparent !important;
+
+ &.ck-focused{
+ border-color: var(--kt-primary) !important;
+ }
+ }
+
+ &.ck-toolbar-container,
+ .ck-toolbar {
+ @include border-radius($border-radius !important);
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_datatables.scss b/src/_metronic/assets/sass/core/vendors/plugins/_datatables.scss
new file mode 100644
index 0000000..41d0dbc
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_datatables.scss
@@ -0,0 +1,233 @@
+//
+// DataTables
+//
+
+$toolbar-spacing: 1rem 0;
+
+// Base
+table.dataTable {
+ width: 100% !important;
+ margin: 0 !important;
+
+ th {
+ border-bottom-color: var(--kt-table-border-color);
+ }
+}
+
+// Toolbar
+div.dataTables_wrapper div.dataTables_length {
+ padding: $toolbar-spacing;
+}
+
+div.dataTables_wrapper div.dataTables_filter {
+ padding: $toolbar-spacing;
+}
+
+div.dataTables_wrapper div.dataTables_info {
+ display: flex;
+ flex-direction: column;
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-700);
+ padding: $toolbar-spacing;
+
+ .select-info,
+ .select-item {
+ margin-left: 0;
+ font-size: 0.9rem;
+ color: var(--kt-text-muted);
+ }
+}
+
+div.dataTables_length + div.dataTables_info {
+ margin-left: 1rem;
+}
+
+// Pagination
+div.dataTables_wrapper div.dataTables_paginate {
+ padding: $toolbar-spacing;
+ margin-left: 0.5rem;
+
+ .pagination {
+ margin: 0;
+ }
+}
+
+// Head
+table.dataTable>thead>tr> {
+ td, th {
+ &:not(.sorting_disabled) {
+ padding-right: 0;
+ }
+ }
+}
+
+// Sorting
+table.dataTable > thead {
+ .sorting {
+ &:after,
+ &:before {
+ display: none !important;
+ }
+ }
+
+ .sorting_asc,
+ .sorting_desc {
+ vertical-align: middle;
+
+ &:before,
+ &:after {
+ position: relative !important;
+ opacity: 1 !important;
+ display: inline-block !important;
+ width: 0.75rem;
+ height: 0.75rem;
+ content: " " !important;
+ //top: 50%;
+ bottom: auto;
+ right: auto !important;
+ left: auto;
+ margin-left: 0.5rem;
+ }
+
+ &:before {
+ display: none !important;
+ }
+ }
+}
+
+table.dataTable > thead .sorting_asc:after {
+ opacity: 1;
+ @include svg-bg-icon(arrow-top, var(--kt-text-muted));
+}
+
+table.dataTable > thead .sorting_desc:after {
+ opacity: 1;
+ @include svg-bg-icon(arrow-bottom, var(--kt-text-muted));
+}
+
+// Processing
+div.dataTables_wrapper {
+ .table-responsive {
+ position: relative;
+ }
+
+ div.dataTables_processing {
+ @include border-radius($border-radius);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ background-color: var(--kt-tooltip-bg);
+ color: var(--kt-gray-700);
+ font-weight: $font-weight-semibold;
+ margin: 0 !important;
+ width: auto;
+ padding: 1rem 2rem !important;
+ transform: translateX(-50%) translateY(-50%);
+
+ > div {
+ display: none;
+ }
+ }
+}
+
+// Responsive
+table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
+table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
+ $icon-size: 1.35rem;
+
+ &:before {
+ top: 50%;
+ left: 0;
+ height: $icon-size;
+ width: $icon-size;
+ line-height: 1.5;
+ text-indent: -999px !important;
+ margin-top: -(divide($icon-size, 2));
+ margin-right: divide($icon-size, 2);
+ display: inline-block;
+ position: relative;
+ font-size: 1.05rem;
+ border: 0;
+ box-shadow: none;
+ mask-size: 85%;
+ -webkit-mask-size: 85%;
+ content: ".";
+
+ :root &,
+ [data-theme="light"] & {
+ @include svg-bg-icon(expand, $gray-600);
+ }
+
+ [data-theme="dark"] & {
+ @include svg-bg-icon(expand, $gray-600-dark);
+ }
+ }
+}
+
+table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
+table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
+ @include svg-bg-icon(collapse, $primary);
+}
+
+table.dataTable > tbody > tr.child span.dtr-title {
+ display: inline-block;
+ min-width: 100px;
+ font-weight: $font-weight-semibold;
+}
+
+table.dataTable > tbody > tr.child span.dtr-data {
+ font-weight: $font-weight-normal;
+}
+
+// Striped
+table.dataTable.table-striped > tbody > tr.odd > * {
+ box-shadow: inset 0 0 0 9999px var(--bs-table-striped-bg);
+}
+
+table.dataTable > tbody > tr.selected > * {
+ box-shadow: inset 0 0 0 9999px var(--kt-primary);
+ color: var(--kt-primary-inverse);
+
+ a:not([class="btn"]) {
+ color: var(--kt-primary-light);
+ font-weight: $font-weight-semibold;
+ text-decoration: underline;
+ text-decoration-style: dotted;
+
+ &:hover {
+ color: var(--kt-primary-inverse);
+ }
+ }
+}
+
+// Scroll
+div.dataTables_scrollBody {
+ border-left: 0 !important;
+}
+
+.dataTables_scroll .dataTables_scrollBody .table {
+ thead {
+ line-height: 0;
+
+ .sorting {
+ &:after,
+ &:before {
+ display: none !important;
+ }
+ }
+ }
+}
+
+div.dtfc-right-top-blocker,
+div.dtfc-left-top-blocker {
+ background-color: var(--kt-body-bg);
+}
+
+// Fixed column
+table.dataTable thead tr > .dtfc-fixed-left,
+table.dataTable thead tr > .dtfc-fixed-right {
+ background-color: var(--kt-body-bg);
+}
+
+table.dataTable tbody tr > .dtfc-fixed-left,
+table.dataTable tbody tr > .dtfc-fixed-right {
+ background-color: var(--kt-body-bg);
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_daterangepicker.scss b/src/_metronic/assets/sass/core/vendors/plugins/_daterangepicker.scss
new file mode 100644
index 0000000..546af4b
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_daterangepicker.scss
@@ -0,0 +1,272 @@
+//
+// Bootstrap Daterangepicker plugin customization: https://www.daterangepicker.com
+//
+
+
+// Base
+.daterangepicker {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: auto;
+ background-color: var(--kt-body-bg);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ font-family: $font-family-sans-serif;
+ z-index: $zindex-dropdown;
+ @include border-radius($dropdown-border-radius);
+
+ &:after,
+ &:before {
+ display: none;
+ }
+
+ td {
+ &.off,
+ &.off.in-range,
+ &.off.start-date,
+ &.off.end-date {
+ background-color: transparent;
+ }
+ }
+
+ .modal-open & {
+ z-index: $zindex-modal + 1;
+ }
+
+ .calendar-table {
+ background-color: var(--kt-body-bg);
+ border: 0;
+ }
+
+ .ranges {
+ @include border-radius($dropdown-border-radius);
+ background-color: var(--kt-body-bg);
+ position: relative;
+ overflow: hidden;
+
+ ul {
+ padding: 1rem 0;
+ width: $daterangepicker-ranges-list-width;
+ overflow: auto;
+ max-height: $daterangepicker-ranges-list-height;
+ }
+
+ li {
+ padding: 0.7rem 1.75rem;
+ font-weight: 500;
+ font-size: 1rem;
+ color: var(--kt-gray-600);
+ transition: $transition-link;
+
+ &:hover {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ transition: $transition-link;
+ }
+
+ &.active {
+ background-color: var(--kt-component-active-bg);
+ color: var(--kt-component-active-color);
+ transition: $transition-link;
+ }
+ }
+ }
+
+ &.show-calendar {
+ .ranges {
+ @include border-radius(0);
+ @include border-top-start-radius($dropdown-border-radius);
+ margin-top: 0;
+ height: 297px;
+ }
+ }
+
+ &.show-ranges {
+ &.show-calendar {
+ .ranges {
+ border-right: 1px solid var(--kt-gray-200);
+ }
+ }
+
+ .drp-calendar.left {
+ border-left: 0;
+ }
+ }
+
+ .drp-buttons {
+ padding: 1rem 1.75rem;
+ border-top: 1px solid var(--kt-gray-200);
+
+ .btn {
+ font-size: 1rem;
+ font-weight: $font-weight-semibold;
+ padding: 0.5rem 1rem;
+ }
+
+ .cancelBtn {
+ @include button-custom-variant(
+ $color: var(--kt-light-inverse),
+ $icon-color: var(--kt-light-inverse),
+ $border-color: var(--kt-light),
+ $bg-color: var(--kt-light),
+ $color-active: var(--kt-light-inverse),
+ $icon-color-active: var(--kt-light-inverse),
+ $border-color-active: var(--kt-light-active),
+ $bg-color-active: var(--kt-light-active)
+ );
+ }
+ }
+
+ .drp-selected {
+ font-size: 0.9rem;
+ }
+
+ .drp-calendar {
+ &.left,
+ &.right {
+ padding: 1rem 1rem;
+ }
+
+ &.left {
+ border-left: 0 !important;
+ }
+
+ th,
+ td {
+ font-size: 1rem;
+ font-weight: $font-weight-normal;
+ width: 33px;
+ height: 33px;
+
+ &.available:hover {
+ @include border-radius($border-radius);
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ }
+ }
+
+ th {
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-800);
+
+ &.month {
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-800);
+ }
+
+ &.next,
+ &.prev {
+ span {
+ border-width: 0 1px 1px 0;
+ border-color: var(--kt-gray-600);
+ }
+
+ &.available:hover {
+ span {
+ border-color: var(--kt-component-hover-color);
+ }
+ }
+ }
+
+ &.next {
+ span {
+ margin-right: 1px;
+ }
+ }
+
+ &.prev {
+ span {
+ margin-left: 1px;
+ }
+ }
+ }
+
+ td {
+ color: var(--kt-gray-700);
+
+ &.available.off {
+ color: var(--kt-gray-400);
+ }
+
+ &.active {
+ background-color: var(--kt-component-active-bg) !important;
+ color: var(--kt-component-active-color) !important;
+ @include border-radius($border-radius);
+
+ &.start-date {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ &.end-date {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+ &.start-date.end-date {
+ @include border-radius($border-radius);
+ }
+ }
+
+ &.today,
+ &.today.active {
+ background: var(--kt-component-hover-bg) !important;
+ color: var(--kt-component-hover-color) !important;
+ @include border-radius($border-radius);
+ }
+
+ &.in-range.available:not(.active):not(.off):not(.today) {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ }
+
+ &:hover {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ }
+ }
+ }
+
+ select.ampmselect,
+ select.minuteselect,
+ select.hourselect,
+ select.monthselect,
+ select.yearselect {
+ padding-top: 0.35rem;
+ padding-bottom: 0.35rem;
+ @include border-radius($border-radius);
+ background-color: var(--kt-body-bg) !important;
+ border-color: transparent;
+ color: var(--kt-input-color);
+ font-weight: $font-weight-semibold;
+ outline: 0 !important;
+
+ &:focus {
+ background-color: var(--kt-gray-100);
+ }
+ }
+}
+
+// Tablet mode
+@include media-breakpoint-down(md) {
+ .daterangepicker {
+ &.show-calendar {
+ .ranges {
+ float: none !important;
+ height: auto !important;
+
+ ul {
+ width: 100%;
+ }
+ }
+
+ .drp-calendar {
+ float: none !important;
+ max-width: unset !important;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_draggable.scss b/src/_metronic/assets/sass/core/vendors/plugins/_draggable.scss
new file mode 100644
index 0000000..f542f34
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_draggable.scss
@@ -0,0 +1,28 @@
+//
+// Draggable plugin customization: https://shopify.github.io/draggable
+//
+
+.draggable {
+ transition: opacity 0.3s ease;
+ outline: none !important;
+
+ &.draggable-mirror {
+ opacity: 0.8;
+ transition: opacity 0.3s ease;
+ border: 2px dashed var(--kt-gray-300) !important;
+ @include border-radius($border-radius);
+ }
+
+ &.draggable--original {
+ opacity: 0 !important;
+ }
+
+ &.draggable-source--is-dragging.draggable--over {
+ opacity: 0 !important;
+ }
+
+ // Handle
+ .draggable-handle {
+ cursor: move;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_dropzone.scss b/src/_metronic/assets/sass/core/vendors/plugins/_dropzone.scss
new file mode 100644
index 0000000..f0b4bb8
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_dropzone.scss
@@ -0,0 +1,188 @@
+//
+// Dropzone plugin customization: https://www.dropzonejs.com
+//
+
+// Basic
+.dropzone {
+ min-height: auto;
+ padding: 1.5rem 1.75rem;
+ text-align: center;
+ cursor: pointer;
+ border: 1px dashed var(--kt-primary);
+ background-color: var(--kt-primary-light);
+ border-radius: $border-radius !important;
+
+ .dz-message{
+ margin: 0;
+ display: flex;
+ text-align: left;
+ }
+
+ .dz-preview {
+ border-radius: $border-radius !important;
+ margin: 0.75rem;
+
+ .dz-image {
+ border-radius: $border-radius !important;
+ z-index: 1;
+ }
+
+ &.dz-file-preview {
+ .dz-image {
+ background: var(--kt-gray-200);
+ }
+ }
+ }
+
+ .dz-success-mark,
+ .dz-error-mark {
+ $size: 40px;
+
+ margin-left: -(divide($size, 2)) !important;
+ margin-top: -(divide($size, 2)) !important;
+
+ svg {
+ height: $size !important;
+ width: $size !important;
+ }
+ }
+
+ .dz-remove {
+ $size: 1.65rem;
+ display:flex;
+ justify-content: center;
+ align-items: center;
+ height: $size;
+ width: $size;
+ font-size: 1rem;
+ text-indent: -9999px;
+ white-space: nowrap;
+ position: absolute;
+ z-index: 2;
+ background-color: var(--kt-body-bg) !important;
+ box-shadow: var(--kt-box-shadow);
+ border-radius: 100%;
+ top: -(divide($size,2));
+ right: -(divide($size,2));
+
+ &:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ display: block;
+ content: "";
+ mask-size: 40%;
+ -webkit-mask-size: 40%;
+ @include svg-bg-icon(close, var(--kt-gray-600));
+ }
+
+ &:hover {
+ &:after {
+ @include svg-bg-icon(close, var(--kt-primary));
+ }
+ }
+ }
+
+ .dz-error-message {
+ color: var(--kt-danger-inverse);
+ background: var(--kt-danger);
+ }
+}
+
+// Queue upload
+.dropzone.dropzone-queue {
+ border: 0;
+ padding: 0;
+ background-color: transparent;
+ text-align: left;
+
+ .dz-message{
+ display: none;
+ }
+
+ .dropzone-panel {
+ .dropzone-upload,
+ .dropzone-remove-all{
+ display: none;
+ }
+ }
+
+ .dropzone-item {
+ display: flex;
+ align-items: center;
+ margin-top: 0.75rem;
+ @include border-radius($border-radius);
+ padding: 0.5rem 1rem;
+ background-color: var(--kt-gray-100);
+
+ .dropzone-file {
+ flex-grow: 1;
+
+ .dropzone-filename {
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: var(--kt-gray-600);
+ text-overflow: ellipsis;
+ margin-right: 0.5rem;
+
+ &:hover {
+ color: var(--kt-primary);
+ }
+ }
+
+ .dropzone-error {
+ margin-top: 0.25rem;
+ font-size: 0.9rem;
+ font-weight: 400;
+ color: var(--kt-danger);
+ text-overflow: ellipsis;
+ }
+ }
+
+ .dropzone-progress {
+ width: 15%;
+
+ .progress {
+ height: 5px;
+ @include transition;
+ }
+ }
+
+ .dropzone-toolbar {
+ margin-left: 1rem;
+ display: flex;
+ flex-wrap: nowrap;
+
+ .dropzone-start,
+ .dropzone-cancel,
+ .dropzone-delete {
+ height: 25px;
+ width: 25px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: $transition-link;
+
+ i {
+ transition: $transition-link;
+ font-size: 0.8rem;
+ color: var(--kt-gray-600);
+ }
+
+ &:hover {
+ transition: $transition-link;
+ i {
+ color: var(--kt-primary);
+ }
+ }
+ }
+
+ .dropzone-start{
+ transition: $transition-link;
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_flatpickr.scss b/src/_metronic/assets/sass/core/vendors/plugins/_flatpickr.scss
new file mode 100644
index 0000000..8892ae6
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_flatpickr.scss
@@ -0,0 +1,407 @@
+//
+// Flatpickr
+//
+
+$flatpickr-padding-y: 0.5rem;
+$flatpickr-padding-x: 1rem;
+$flatpickr-width: 280px;
+$flatpickr-width-week-numbers: 325px;
+$flatpickr-day-height: 36px;
+$flatpickr-day-width: 100%;
+$flatpickr-time-height: 46px;
+
+// Container
+.flatpickr-calendar {
+ width: $flatpickr-width !important;
+ font-family: inherit;
+ border: 0;
+ border-radius: 0;
+ box-shadow: var(--kt-dropdown-box-shadow);
+ background-color: var(--kt-body-bg);
+ @include border-radius($dropdown-border-radius);
+
+ // Remow arrows
+ &:before,
+ &:after {
+ display: none;
+ }
+
+ // Week numbers
+ &.hasWeeks {
+ width: $flatpickr-width-week-numbers !important;
+ }
+}
+
+// Months container
+.flatpickr-months {
+ padding: 0 $flatpickr-padding-x;
+ padding-top: $flatpickr-padding-y;
+}
+
+// Inner container
+.flatpickr-innerContainer {
+ padding: $flatpickr-padding-y $flatpickr-padding-x;
+}
+
+// Day containers
+.flatpickr-days,
+.dayContainer {
+ width: 100% !important;
+ min-width: 100% !important;
+ max-width: 100% !important;
+}
+
+// Months
+.flatpickr-months {
+ .flatpickr-month {
+ background: transparent;
+ color: var(--kt-gray-600);
+ fill: var(--kt-gray-600);
+ height: 46px;
+ }
+
+ .flatpickr-prev-month,
+ .flatpickr-next-month {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ @include border-radius($border-radius);
+ top: 1rem;
+
+ svg {
+ fill: var(--kt-gray-500);
+ height: 13px;
+ width: 13px;
+ }
+
+ &:hover {
+ background: var(--kt-gray-100);
+
+ svg {
+ fill: var(--kt-gray-700);
+ }
+ }
+ }
+
+ .flatpickr-prev-month.flatpickr-prev-month,
+ .flatpickr-next-month.flatpickr-prev-month {
+ /*rtl:begin:ignore*/
+ left: $flatpickr-padding-x;
+ /*rtl:end:ignore*/
+ }
+
+ .flatpickr-prev-month.flatpickr-next-month,
+ .flatpickr-next-month.flatpickr-next-month {
+ /*rtl:begin:ignore*/
+ right: $flatpickr-padding-x;
+ /*rtl:end:ignore*/
+ }
+}
+
+// Month selector
+.flatpickr-current-month {
+ font-weight: $font-weight-semibold;
+ color: inherit;
+
+ .numInputWrapper {
+ @include border-radius($border-radius);
+ width: 65px;
+
+ span {
+ &.arrowUp {
+ @include border-top-end-radius($border-radius);
+ }
+
+ &.arrowDown {
+ @include border-bottom-end-radius($border-radius);
+ }
+ }
+ }
+
+ .flatpickr-monthDropdown-months {
+ border: 0 !important;
+ background-color: var(--kt-body-bg);
+ font-size: 1rem;
+ color: var(--kt-gray-700);
+ font-weight: $font-weight-semibold;
+ padding: 0.5rem 0.75rem;
+ margin-right: 0.5rem;
+ outline: none !important;
+ @include border-radius($border-radius);
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+
+ &:hover {
+ background: var(--kt-gray-100);
+ }
+
+ .flatpickr-monthDropdown-month {
+ font-size: 1rem;
+ color: var(--kt-gray-700);
+ font-weight: $font-weight-semibold;
+ background-color: transparent;
+ outline: none;
+ padding: 0;
+ }
+ }
+
+ span.cur-month {
+ color: var(--kt-gray-700);
+ font-size: 1rem;
+ font-weight: $font-weight-semibold;
+
+ &:hover {
+ background: var(--kt-gray-100);
+ }
+ }
+
+ input.cur-year {
+ color: var(--kt-gray-700);
+ font-size: 1.1rem;
+ padding: 0.5rem 0.75rem;
+ font-weight: $font-weight-semibold;
+ outline: 0 !important;
+ }
+}
+
+// Week days
+span.flatpickr-weekday {
+ color: var(--kt-gray-800);
+ font-size: 1rem;
+ font-weight: $font-weight-bold;
+}
+
+// Time
+.flatpickr-time {
+ @include border-bottom-radius($border-radius);
+
+ .flatpickr-calendar.hasTime & {
+ height: height;
+ line-height: height;
+ max-height: height;
+ border-top: 1px solid var(--kt-gray-100);
+ }
+
+ .numInputWrapper {
+ height: height;
+ }
+
+ .flatpickr-am-pm {
+ color: var(--kt-gray-700);
+ font-size: 1rem;
+ font-weight: $font-weight-semibold;
+ }
+
+ input {
+ &.flatpickr-hour,
+ &.flatpickr-minute {
+ color: var(--kt-gray-700);
+ font-size: 1rem;
+ font-weight: $font-weight-semibold;
+ }
+ }
+
+ input:hover,
+ .flatpickr-am-pm:hover,
+ input:focus,
+ .flatpickr-am-pm:focus {
+ background: transparent;
+ }
+}
+
+// Number input
+.numInputWrapper {
+ span {
+ border-left: 0 !important;
+ border-top: 0 !important;
+ border-bottom: 0 !important;
+ border-right: 0 !important;
+
+ &:hover {
+ background: transparent !important;
+ }
+
+ &:after {
+ top: 50% !important;
+ transform: translateY(-50%);
+ }
+
+ &.arrowUp {
+ &:after {
+ border-bottom-color: var(--kt-gray-500) !important;
+ }
+
+ &:hover {
+ &:after {
+ border-bottom-color: var(--kt-gray-700) !important;
+ }
+ }
+ }
+
+ &.arrowDown {
+ &:after {
+ border-top-color: var(--kt-gray-500) !important;
+ }
+
+ &:hover {
+ &:after {
+ border-top-color: var(--kt-gray-700) !important;
+ }
+ }
+ }
+ }
+
+ &:hover {
+ background: transparent;
+ }
+}
+
+// Day
+.flatpickr-day {
+ font-size: 1rem;
+ @include border-radius($border-radius);
+ box-shadow: none !important;
+ height: $flatpickr-day-height;
+ width: $flatpickr-day-width;
+ max-width: 100% !important;
+ margin: 0;
+ line-height: $flatpickr-day-height;
+ color: var(--kt-gray-600);
+ margin-top: 0 !important;
+
+ &.inRange,
+ &.prevMonthDay.inRange,
+ &.nextMonthDay.inRange,
+ &.today.inRange,
+ &.prevMonthDay.today.inRange,
+ &.nextMonthDay.today.inRange,
+ &:hover,
+ &.prevMonthDay:hover,
+ &.nextMonthDay:hover,
+ &:focus,
+ &.prevMonthDay:focus,
+ &.nextMonthDay:focus {
+ cursor: pointer;
+ outline: 0;
+ background: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ border-color: transparent;
+ }
+
+ // Today
+ &.today {
+ background: var(--kt-gray-100);
+ color: var(--kt-gray-600);
+ border-color: transparent;
+
+ &:hover,
+ &:focus {
+ border-color: transparent;
+ background: var(--kt-gray-200);
+ color: var(--kt-gray-700);
+ }
+ }
+
+ // Selected
+ &.selected,
+ &.startRange,
+ &.endRange,
+ &.selected.inRange,
+ &.startRange.inRange,
+ &.endRange.inRange,
+ &.selected:focus,
+ &.startRange:focus,
+ &.endRange:focus,
+ &.selected:hover,
+ &.startRange:hover,
+ &.endRange:hover,
+ &.selected.prevMonthDay,
+ &.startRange.prevMonthDay,
+ &.endRange.prevMonthDay,
+ &.selected.nextMonthDay,
+ &.startRange.nextMonthDay,
+ &.endRange.nextMonthDay {
+ background: var(--kt-component-active-bg);
+ color: var(--kt-component-active-color);;
+ border-color: transparent;
+ }
+
+ &.inRange,
+ &.prevMonthDay.inRange,
+ &.nextMonthDay.inRange,
+ &.today.inRange,
+ &.prevMonthDay.today.inRange,
+ &.nextMonthDay.today.inRange,
+ &:hover,
+ &.prevMonthDay:hover,
+ &.nextMonthDay:hover,
+ &:focus,
+ &.prevMonthDay:focus,
+ &.nextMonthDay:focus {
+ cursor: pointer;
+ outline: 0;
+ background: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ border-color: transparent;
+ }
+
+ // Today
+ &.today {
+ border-color: transparent;
+ }
+
+ &.today:hover,
+ &.today:focus {
+ border-color: transparent;
+ background: var(--kt-gray-100);
+ color: var(--kt-gray-600);
+ }
+
+ // Selected
+ &.selected,
+ &.startRange,
+ &.endRange,
+ &.selected.inRange,
+ &.startRange.inRange,
+ &.endRange.inRange,
+ &.selected:focus,
+ &.startRange:focus,
+ &.endRange:focus,
+ &.selected:hover,
+ &.startRange:hover,
+ &.endRange:hover,
+ &.selected.prevMonthDay,
+ &.startRange.prevMonthDay,
+ &.endRange.prevMonthDay,
+ &.selected.nextMonthDay,
+ &.startRange.nextMonthDay,
+ &.endRange.nextMonthDay {
+ background: var(--kt-component-active-bg);
+ color: var(--kt-component-active-color);;
+ border-color: transparent;
+ }
+
+ // Disabled
+ &.flatpickr-disabled,
+ &.flatpickr-disabled:hover,
+ &.prevMonthDay,
+ &.nextMonthDay,
+ &.notAllowed,
+ &.notAllowed.prevMonthDay,
+ &.notAllowed.nextMonthDay {
+ color: var(--kt-gray-400);
+ background: transparent;
+ border-color: transparent;
+ }
+ &.flatpickr-disabled,
+ &.flatpickr-disabled:hover {
+ cursor: not-allowed;
+ color: var(--kt-gray-400);
+ }
+}
+
+// Week numbers
+.flatpickr-weekwrapper {
+ margin-right: 5px;
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_formvalidation.scss b/src/_metronic/assets/sass/core/vendors/plugins/_formvalidation.scss
new file mode 100644
index 0000000..dd853e4
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_formvalidation.scss
@@ -0,0 +1,19 @@
+//
+// FormValidation Customization. More info: https://formvalidation.io/
+//
+
+.fv-plugins-message-container {
+ margin-top: 0.3rem;
+
+ .fv-help-block {
+ color: var(--kt-danger);
+ font-size: 1rem;
+ font-weight: $font-weight-normal;
+ }
+
+ &.valid-feedback,
+ &.invalid-feedback {
+ display: block;
+ font-weight: $font-weight-normal;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_fslightbox.scss b/src/_metronic/assets/sass/core/vendors/plugins/_fslightbox.scss
new file mode 100644
index 0000000..a9390cf
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_fslightbox.scss
@@ -0,0 +1,11 @@
+//
+// fslightbox
+//
+
+.fslightbox-slide-btn {
+ border-radius: $border-radius;
+}
+
+.fslightbox-toolbar {
+ border-bottom-left-radius: $border-radius;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_fullcalendar.scss b/src/_metronic/assets/sass/core/vendors/plugins/_fullcalendar.scss
new file mode 100644
index 0000000..2923198
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_fullcalendar.scss
@@ -0,0 +1,297 @@
+//
+// Fullcalendar plugin customization: https://fullcalendar.io/
+//
+
+body {
+ --fc-event-border-color: var(--kt-primary);
+ --fc-event-bg-color: var(--kt-primary);
+ --fc-event-text-color: var(--kt-primary-inverse);
+}
+
+// Base
+.fc {
+ // Border color
+ --fc-border-color: #{var(--kt-gray-200)};
+ --fc-page-bg-color: #{$white};
+ --fc-small-font-size: 0.95rem;
+
+ // General
+ --fc-highlight-color: var(--kt-light);
+ //--fc-non-business-color:
+ //--fc-bg-event-color:
+ --fc-bg-event-opacity: 0.3;
+ --fc-neutral-bg-color: var(--kt-light);
+ //--fc-event-selected-overlay-color:
+ --fc-today-bg-color: var(--kt--success-light);
+ //--fc-neutral-bg-color:
+ //--fc-neutral-text-color:
+ //--fc-more-link-text-color:
+ //--fc-more-link-bg-color:
+ --fc-now-indicator-color: var(--kt-danger);
+ --fc-list-event-hover-bg-color: var(--kt-light);
+
+ // Buttons
+ --fc-button-text-color: var(--kt-gray-600);
+ --fc-button-bg-color: var(--kt-gray-100);
+ --fc-button-border-color: var(--kt-gray-100);
+
+ --fc-button-hover-bg-color: var(--kt-gray-100);
+ --fc-button-hover-border-color: var(--kt-gray-100);
+
+ --fc-button-active-bg-color: var(--kt-gray-200);
+ --fc-button-active-border-color: var(--kt-gray-200);
+
+ // Table
+ table {
+ font-size: 1rem;
+ }
+
+ // Button
+ .fc-button {
+ padding: 0.75rem 1.25rem;
+ box-shadow: none !important;
+ border: 0 !important;
+ border-radius: $btn-border-radius;
+ vertical-align: middle;
+ font-weight: $font-weight-semibold;
+ text-transform: capitalize;
+ }
+
+ // Primary button
+ .fc-button-primary {
+ margin: 0;
+
+ // Icon
+ .fc-icon {
+ font-size: 1.35rem;
+ margin-bottom: 0.15rem;
+ }
+
+ &:not(:disabled):not(.fc-button-active) {
+ &:focus,
+ &:hover,
+ &:active {
+ color: var(--kt-gray-900);
+
+ .fc-icon {
+ color: var(--kt-gray-900);
+ }
+ }
+ }
+
+ &:not(:disabled).fc-button-active {
+ color: var(--kt-gray-900);
+
+ .fc-icon {
+ color: var(--kt-gray-900);
+ }
+ }
+ }
+
+ // Button group
+ .fc-button-group {
+ .fc-button {
+ margin: 0 !important;
+ }
+ }
+
+ // Toolbar title
+ .fc-toolbar-title {
+ font-size: 1.5rem;
+ font-weight: $font-weight-bold;
+ color: var(--kt-gray-800);
+ }
+
+ // Header cell
+ .fc-col-header-cell {
+ padding: 0.75rem 0.5rem;
+
+ .fc-col-header-cell-cushion {
+ font-size: 1.1rem;
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-800);
+ }
+ }
+
+ // Border radius
+ .fc-scrollgrid {
+ @include border-radius($border-radius);
+
+ thead > tr {
+ td:first-child {
+ @include border-top-start-radius($border-radius);
+ }
+
+ td:last-child {
+ @include border-top-end-radius($border-radius);
+ }
+ }
+
+ tbody > tr:last-child {
+ td:first-child {
+ @include border-bottom-start-radius($border-radius);
+ }
+
+ td:last-child {
+ @include border-bottom-end-radius($border-radius);
+ }
+ }
+ }
+
+ // Event
+ .fc-daygrid-event {
+ margin-top: 3px;
+ }
+
+ // Event title
+ .fc-daygrid-dot-event,
+ .fc-daygrid-block-event {
+ .fc-event-title,
+ .fc-event-time {
+ padding: 0.25rem 0.25rem;
+ }
+ }
+
+ // Day number
+ .fc-daygrid-day-number {
+ color: var(--kt-gray-800);
+ }
+
+ // Dot event
+ .fc-daygrid-dot-event {
+ background-color: var(--kt-light);
+ color: var(--kt-gray-600);
+
+ .fc-event-title {
+ font-weight: $font-weight-semibold;
+ }
+
+ &:hover,
+ &.fc-event-mirror {
+ background-color: var(--kt-light);
+ color: var(--kt-primary);
+ }
+ }
+
+ // Event dot
+ .fc-daygrid-event-dot {
+ margin-left: 0.5rem;
+ margin-right: 0.1rem;
+ }
+
+ // Popover
+ .fc-popover {
+ border: 0 !important;
+ background-color: var(--kt-tooltip-bg);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ @include border-radius($dropdown-border-radius);
+
+ .fc-popover-header {
+ @include border-top-radius($dropdown-border-radius);
+ padding: 0.65rem 0.75rem;
+ background-color: var(--kt-tooltip-bg);
+
+ .fc-popover-title {
+ color: var(--kt-gray-800);
+ font-size: 1rem;
+ font-weight: $font-weight-semibold;
+ }
+
+ .fc-popover-close {
+ font-size: 1rem;
+ color: var(--kt-gray-600);
+
+ &:hover {
+ color: var(--kt-primary);
+ }
+ }
+ }
+
+ .fc-popover-body {
+ padding: 0.5rem 0.75rem 0.75rem 0.75rem;
+ }
+ }
+
+ // More link
+ .fc-daygrid-more-link {
+ font-weight: $font-weight-semibold;
+ }
+
+ // Slot
+ .fc-timegrid-slot {
+ height: 2rem;
+ font-size: 0.95rem;
+ }
+
+ // List
+ .fc-list-day-cushion,
+ .fc-list-table td {
+ padding: 0.85rem 1.15rem;
+ }
+
+ .fc-list-day-text,
+ .fc-list-day-side-text {
+ font-size: 1.1rem;
+ color: var(--kt-gray-900);
+ font-weight: $font-weight-bold;
+ }
+
+ .fc-list,
+ //.fc-scroller,
+ .fc-list-table {
+ @include border-radius($border-radius);
+ }
+
+ .fc-list {
+ overflow: hidden;
+ position: relative;
+ }
+
+ // Week
+ .fc-timegrid-axis {
+ padding-left: 0rem;
+ padding-right: 0;
+ }
+
+ // Main
+ .fc-timegrid-event .fc-event-main {
+ padding: 0.25rem 0.25rem;
+ }
+
+ // Indicator arrow
+ .fc-timegrid-now-indicator-arrow {
+ margin-top: -1px;
+ }
+}
+
+// Event
+.fc-h-event {
+ font-weight: $font-weight-normal;
+}
+
+// Mobile mode
+@include media-breakpoint-down(md) {
+ .fc {
+ // Header toolbar
+ .fc-header-toolbar {
+ flex-direction: column;
+ align-items: flex-start;
+
+ .fc-toolbar-chunk {
+ &:nth-child(1),
+ &:nth-child(3) {
+ order: 2;
+ }
+
+ &:nth-child(2) {
+ order: 1;
+ }
+
+ &:nth-child(2),
+ &:nth-child(1) {
+ margin-bottom: 1rem;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_gmaps.scss b/src/_metronic/assets/sass/core/vendors/plugins/_gmaps.scss
new file mode 100644
index 0000000..0f9dd4c
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_gmaps.scss
@@ -0,0 +1,18 @@
+//
+// Gmaps Plugin
+//
+
+.gmaps {
+ /* important! bootstrap sets max-width on img to 100% which conflicts with google map canvas*/
+ img {
+ max-width: none;
+ }
+
+ &.gmaps-static {
+ > div {
+ background-repeat: no-repeat ;
+ background-position: 50% 50% ;
+ display:block;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_jkanban.scss b/src/_metronic/assets/sass/core/vendors/plugins/_jkanban.scss
new file mode 100644
index 0000000..d889064
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_jkanban.scss
@@ -0,0 +1,94 @@
+//
+// Kanban Board
+//
+
+// Variables
+$kanban-spacer-y: 1.25rem;
+$kanban-spacer-x: 1.25rem;
+
+.kanban-container {
+ width: 100% !important;
+ display: flex;
+ flex-wrap: wrap;
+
+ .kanban-board {
+ float: none;
+ flex-shrink: 0;
+ margin-bottom: $kanban-spacer-y;
+ margin-right: $kanban-spacer-x !important;
+ background-color: var(--kt-gray-100);
+ @include border-radius($border-radius);
+
+ &:last-child {
+ margin-right: 0 !important;
+ }
+
+ .kanban-board-header {
+ @include border-top-start-radius($border-radius);
+ @include border-top-end-radius($border-radius);
+
+ .kanban-title-board {
+ font-size: 1.2rem;
+ font-weight: 500;
+ color: var(--kt-gray-900);
+ }
+
+ @each $name, $color in $theme-colors {
+ &.#{$name} {
+ background-color: var(--kt-#{$name});
+ box-shadow: none;
+
+ .kanban-title-board {
+ color: var(--kt-#{$name}-inverse);
+ }
+ }
+
+ &.light-#{$name} {
+ color: rgba(var(--kt-#{$name}), 0.1);
+ box-shadow: none;
+
+ .kanban-title-board {
+ color: var(--kt-#{$name});
+ }
+ }
+ }
+ }
+
+ .kanban-drag {
+ .kanban-item {
+ @include border-radius($border-radius);
+ box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.05);
+ background: var(--kt-body-bg);
+
+ @each $name, $color in $theme-colors {
+ &[data-class="#{$name}"] {
+ background-color: var(--kt-#{$name});
+ color: var(--kt-#{$name}-inverse);
+ box-shadow: none;
+ }
+
+ &[data-class="light-#{$name}"] {
+ background-color: var(--kt-#{$name}-light);
+ color: var(--kt-#{$name});
+ box-shadow: none;
+ }
+ }
+ }
+ }
+
+ footer {
+ }
+ }
+}
+
+// Fixed height
+.kanban-fixed-height {
+ .kanban-container {
+ .kanban-board {
+ .kanban-drag {
+ position: relative;
+ overflow-y: auto;
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_jstree.scss b/src/_metronic/assets/sass/core/vendors/plugins/_jstree.scss
new file mode 100644
index 0000000..412d142
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_jstree.scss
@@ -0,0 +1,150 @@
+//
+// jsTree
+//
+
+.jstree-default {
+ .jstree-anchor {
+ color: var(--kt-gray-700);
+ padding: 0 8px 0 4px;
+ }
+
+ .jstree-icon {
+ color: var(--kt-gray-700);
+
+ font-size: 1.3rem;
+
+ &.la {
+ font-size: 1.5rem;
+ }
+ &.fa {
+ font-size: 1.2rem;
+ }
+ }
+
+ .jstree-disabled {
+ cursor: not-allowed;
+ line-height: auto;
+ height: auto;
+ opacity: 0.7;
+
+ .jstree-icon {
+ color: var(--kt-gray-700);
+ }
+ }
+
+ .jstree-clicked {
+ border: 0;
+ background: var(--kt-gray-100);
+ box-shadow: none;
+ }
+
+ .jstree-hovered {
+ border: 0;
+ background-color: var(--kt-gray-100);
+ box-shadow: none;
+ }
+
+ .jstree-wholerow-clicked,
+ .jstree-wholerow-clicked {
+ background: var(--kt-gray-200);
+ box-shadow: none;
+ }
+
+ .jstree-wholerow-hovered,
+ &.jstree-wholerow .jstree-wholerow-hovered {
+ border: 0;
+ background-color: var(--kt-gray-100);
+ box-shadow: none;
+ }
+}
+
+.jstree-open>.jstree-anchor>.fa-folder:before {
+ margin-left: 2px;
+ content: "\f07c";
+}
+
+.jstree-open>.jstree-anchor>.la-folder:before {
+ margin-left: 2px;
+ content: "\f200";
+}
+
+.jstree-default.jstree-rtl .jstree-node {
+ background-position: 100% 1px#{'/*rtl:ignore*/'} !important;
+}
+
+.jstree-default.jstree-rtl .jstree-last {
+ background: transparent #{'/*rtl:ignore*/'};
+ background-repeat: no-repeat;
+}
+
+.jstree-rtl .jstree-anchor {
+ padding: 0 4px 0 8px#{'/*rtl:ignore*/'};
+}
+
+// context menu
+.vakata-context,
+.vakata-context ul {
+ padding: 0.5rem 0;
+ min-width: 150px;
+ font-size: 1rem;
+ font-family: $font-family-base;
+ background: var(--kt-body-bg);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ border: 0;
+ @include border-radius($border-radius);
+
+ li {
+ padding: 0;
+ border: 0;
+
+ a {
+ padding: 0rem 1.2rem;
+ border: 0;
+ //line-height: 2.2em;
+
+ i {
+ display: none;
+ }
+
+ .vakata-contextmenu-sep {
+ display: none;
+ }
+
+ span,
+ ins {
+ display: none;
+ border: 0 !important;
+ }
+ }
+ }
+
+ .vakata-context-hover>a,
+ li a:hover {
+ margin: 0;
+ background-color: var(--kt-gray-100);
+ color: var(--kt-primary);
+ box-shadow: none;
+
+ .span,
+ .ins {
+ border: 0 !important;
+ }
+ }
+}
+
+.vakata-context .vakata-context-separator a,
+.vakata-context-rtl .vakata-context-separator a {
+ margin: 0;
+ border: 0;
+ height: 2px;
+ background-color: var(--kt-gray-200);
+}
+
+.jstree-rename-input {
+ outline: none !important;
+ padding: 2px 6px !important;
+ margin-right: -4px !important;
+ background-color: var(--kt-gray-100) !important;
+ border: 1px solid var(--kt-gray-100) !important;
+ @include border-radius($border-radius);
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_leaflet.scss b/src/_metronic/assets/sass/core/vendors/plugins/_leaflet.scss
new file mode 100644
index 0000000..3cc6f34
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_leaflet.scss
@@ -0,0 +1,23 @@
+//
+// leaflet
+//
+
+.leaflet-container {
+ .leaflet-pane,
+ .leaflet-top,
+ .leaflet-bottom,
+ .leaflet-control {
+ z-index: 1 !important;
+ }
+
+ .leaflet-popup-content-wrapper {
+ border-radius: $border-radius !important;
+ text-align: center;
+ box-shadow: var(--kt-box-shadow) !important;
+
+ .leaflet-popup-content {
+ font-family: $font-family-sans-serif;
+ font-size: $font-size-base;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_mixins.scss b/src/_metronic/assets/sass/core/vendors/plugins/_mixins.scss
new file mode 100644
index 0000000..c22460e
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_mixins.scss
@@ -0,0 +1,5 @@
+//
+// Mixins
+//
+
+@import "mixins/nouislider";
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_nouislider.scss b/src/_metronic/assets/sass/core/vendors/plugins/_nouislider.scss
new file mode 100644
index 0000000..e61522d
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_nouislider.scss
@@ -0,0 +1,103 @@
+//
+// NoUiSlider
+//
+
+
+// Base
+.noUi-target {
+ border: 0;
+ background: var(--kt-gray-100);
+ box-shadow:none;
+
+ &.noUi-horizontal {
+ height: 15px;
+
+ .noUi-handle {
+ width: 24px;
+ height: 24px;
+ top: -4.5px;
+ border-radius: 50%;
+ outline: none;
+
+ &::before {
+ display: none;
+ }
+
+ &::after {
+ display: none;
+ }
+ }
+ }
+
+ &.noUi-vertical {
+ height: 150px;
+ width: 15px;
+
+ .noUi-handle {
+ width: 24px;
+ height: 24px;
+ right: -4.5px;
+ border-radius: 50%;
+ outline: none;
+
+ &::before {
+ display: none;
+ }
+
+ &::after {
+ display: none;
+ }
+ }
+ }
+
+ .noUi-connect {
+ background: var(--kt-component-active-bg);
+ }
+
+ .noUi-handle {
+ background-color: $white; //var(--kt-body-bg);
+ border: 1px solid var(--kt-gray-200);
+ box-shadow:var(--kt-box-shadow-sm)
+ }
+
+ // Small size
+ &.noUi-sm {
+ @include nouislider-size(6px, 20px, 20px, 7px);
+ }
+
+ // Large size
+ &.noUi-lg {
+ @include nouislider-size(18px, 30px, 30px, 6px);
+ }
+}
+
+// Theme colors
+@each $name, $value in $theme-colors {
+ // NoUiSlider success color option
+ .noUi-target.noUi-target-#{$name} {
+ .noUi-connects {
+ background-color: var(--kt-#{$name}-light);
+
+ .noUi-connect {
+ background-color: var(--kt-#{$name});
+ }
+ }
+
+ .noUi-handle {
+ border: 1px solid var(--kt-#{$name});
+ box-shadow: 0 3px 6px -3px rgba(var(--kt-#{$name}), 0.7);
+ background-color: var(--kt-#{$name});
+ }
+ }
+}
+
+// Tooltip
+.noUi-tooltip {
+ box-shadow: var(--kt-tooltip-box-shadow);
+ background: var(--kt-tooltip-bg);
+ color: var(--kt-tooltip-color);
+ font-size: $tooltip-font-size;
+ border: 0;
+ padding: 0.5rem 0.75rem;
+ @include border-radius($tooltip-border-radius);
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_plugins.angular.scss b/src/_metronic/assets/sass/core/vendors/plugins/_plugins.angular.scss
new file mode 100644
index 0000000..0242e13
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_plugins.angular.scss
@@ -0,0 +1,12 @@
+//
+// Plugins
+//
+
+// Import Dependencies
+@import "root";
+@import "prismjs";
+@import "nouislider";
+@import "apexcharts";
+@import "fslightbox";
+@import "tiny-slider";
+@import "fullcalendar";
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_plugins.react.scss b/src/_metronic/assets/sass/core/vendors/plugins/_plugins.react.scss
new file mode 100644
index 0000000..0242e13
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_plugins.react.scss
@@ -0,0 +1,12 @@
+//
+// Plugins
+//
+
+// Import Dependencies
+@import "root";
+@import "prismjs";
+@import "nouislider";
+@import "apexcharts";
+@import "fslightbox";
+@import "tiny-slider";
+@import "fullcalendar";
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_plugins.scss b/src/_metronic/assets/sass/core/vendors/plugins/_plugins.scss
new file mode 100644
index 0000000..c2df238
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_plugins.scss
@@ -0,0 +1,32 @@
+//
+// Plugins
+//
+
+// Import Dependencies
+@import "root";
+@import "prismjs";
+@import "fslightbox";
+@import "select2";
+@import "formvalidation";
+@import "daterangepicker";
+@import "flatpickr";
+@import "tagify";
+@import "bootstrap-maxlength";
+@import "ckeditor";
+@import "datatables";
+@import "dropzone";
+@import "gmaps";
+@import "nouislider";
+@import "quill";
+@import "recaptcha";
+@import "sweetalert2";
+@import "tinymce";
+@import "toastr";
+@import "draggable";
+@import "apexcharts";
+@import "leaflet";
+@import "tiny-slider";
+@import "fullcalendar";
+@import "jkanban";
+@import "jstree";
+@import "vis-timeline";
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_plugins.vue.scss b/src/_metronic/assets/sass/core/vendors/plugins/_plugins.vue.scss
new file mode 100644
index 0000000..0242e13
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_plugins.vue.scss
@@ -0,0 +1,12 @@
+//
+// Plugins
+//
+
+// Import Dependencies
+@import "root";
+@import "prismjs";
+@import "nouislider";
+@import "apexcharts";
+@import "fslightbox";
+@import "tiny-slider";
+@import "fullcalendar";
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_prismjs.scss b/src/_metronic/assets/sass/core/vendors/plugins/_prismjs.scss
new file mode 100644
index 0000000..fa95a54
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_prismjs.scss
@@ -0,0 +1,84 @@
+//
+// Prismjs
+//
+
+// Highlight
+.highlight {
+ position: relative;
+ background: var(--kt-highlight-bg);
+ border-radius: $border-radius;
+ padding: 1.75rem 1.5rem 1.75rem 1.5rem;
+
+ // Tabs
+ .nav {
+ border-bottom: 1px solid var(--kt-highlight-border);
+ padding-bottom: 1rem;
+ margin-bottom: 1rem;
+ margin-top: -0.25rem;
+
+ .nav-item {
+ margin-right: 0.75rem;
+ }
+
+ .nav-link {
+ font-size: 0.9rem;
+ font-weight: 500;
+ padding: 0.35rem 1rem;
+ border-radius: $border-radius;
+ color: var(--kt-highlight-btn-color);
+ transition: $transition-base;
+ background-color: transparent;
+
+ &:focus,
+ &.active {
+ transition: $transition-base;
+ background-color: var(--kt-highlight-btn-bg-hover);
+ color: var(--kt-highlight-btn-color-hover);
+ }
+ }
+ }
+
+ .highlight-copy {
+ display: none;
+ position: absolute;
+ right: 1.75rem;
+ top: 1.5rem;
+ font-size: 0.85rem;
+ font-weight: 500;
+ padding: 0.35rem 1rem !important;
+ transition: $transition-base;
+ background-color: var(--kt-highlight-btn-bg);
+ color: var(--kt-highlight-btn-color);
+
+ &:focus,
+ &:hover {
+ transition: $transition-base;
+ background-color: var(--kt-highlight-btn-bg-hover);
+ color: var(--kt-highlight-btn-color-hover);
+ }
+ }
+
+ &:hover {
+ .highlight-copy {
+ display: flex;
+ }
+ }
+
+ // Code
+ .highlight-code {
+ pre {
+ background-color: transparent;
+ overflow: auto;
+ padding: 0;
+ margin: 0;
+
+ @include scrollbar-color( var(--kt-highlight-scrollbar-color), var(--kt-highlight-scrollbar-color-hover));
+
+ code[class*="language-"] {
+ padding: 0;
+ margin: 0;
+ font-size: 1rem !important;
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_quill.scss b/src/_metronic/assets/sass/core/vendors/plugins/_quill.scss
new file mode 100644
index 0000000..5f52679
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_quill.scss
@@ -0,0 +1,185 @@
+//
+// Quill
+//
+
+// Base
+.ql-toolbar {
+ font-family: $font-family-sans-serif;
+
+ &.ql-snow {
+ border: 1px solid var(--kt-border-color);
+ @include border-top-radius($border-radius);
+
+ .ql-picker,
+ button {
+ .ql-fill,
+ .ql-stroke {
+ stroke: var(--kt-gray-500);
+ }
+
+ .ql-fill {
+ fill: var(--kt-gray-500);
+ }
+
+ &.ql-expanded,
+ &.ql-active,
+ &:focus,
+ &:hover {
+ .ql-fill,
+ .ql-stroke {
+ stroke: var(--kt-primary);
+ }
+
+ .ql-fill {
+ fill: var(--kt-primary);
+ }
+ }
+ }
+ }
+}
+
+.ql-editor {
+ color: var(--kt-input-color);
+
+ &.ql-blank {
+ &:before {
+ left: auto !important;
+ right: auto !important;
+ color: var(--kt-text-muted) !important;
+ font-style: normal !important;
+ }
+ }
+}
+
+.ql-container {
+ &.ql-snow {
+ background-color: var(--kt-input-bg);
+ border: 1px solid var(--kt-gray-200);
+ border-top: 0;
+ @include border-bottom-radius($border-radius);
+ }
+}
+
+.ql-snow {
+ .ql-picker {
+ .ql-picker-label {
+ color: var(--kt-gray-500);
+
+ &.ql-active,
+ &:hover {
+ color: var(--kt-primary);
+ }
+ }
+
+ &.ql-expanded {
+ outline: none !important;
+ border-color: transparent !important;
+
+ .ql-picker-label {
+ border-color: transparent !important;
+ color: var(--kt-primary);
+ outline: none !important;
+
+ &.ql-active,
+ &:hover {
+ color: var(--kt-primary);
+ }
+ }
+
+ .ql-picker-options {
+ border: 0;
+ padding: 0.5rem 1rem;
+ box-shadow: var(--kt-dropdown-box-shadow);
+ background-color: var(--kt-body-bg);
+ @include border-radius($border-radius);
+
+ .ql-picker-item {
+ color: var(--kt-gray-600);
+ outline: none;
+
+ &.ql-selected,
+ &.ql-active,
+ &:hover {
+ color: var(--kt-primary);
+ }
+ }
+ }
+ }
+ }
+
+ .ql-tooltip {
+ border: 0;
+ padding: 0.5rem 1rem;
+ box-shadow: var(--kt-dropdown-box-shadow);
+ @include border-radius($border-radius);
+
+ input[type=text] {
+ @include input-reset();
+ border: 1px solid var(--kt-border-color);
+ color: $input-plaintext-color;
+ outline: none !important;
+ @include border-radius($border-radius);
+
+ &:active,
+ &:focus {
+ border-color: var(--kt-input-focus-border-color) !important;
+ }
+ }
+
+ .ql-preview {
+ color: var(--kt-gray-600);
+ }
+
+ .ql-action {
+ transition: color 0.3s ease;
+ color: var(--kt-gray-600);
+
+ &:hover {
+ transition: color 0.3s ease;
+ color: var(--kt-primary);
+ }
+ }
+
+ // Tooltip adjustment in modal
+ .modal & {
+ &.ql-editing {
+ left: 20px !important;
+ }
+ }
+ }
+
+ .ql-editor {
+ pre.ql-syntax {
+ background-color: var(--kt-gray-900);
+ color: var(--kt-text-muted);
+ overflow: visible;
+ @include border-radius($border-radius);
+ }
+ }
+}
+
+// Plain Style
+.ql-quil.ql-quil-plain {
+ .ql-toolbar {
+ padding: 0;
+ margin: 0;
+ border: 0;
+
+ &:after {
+ display: none;
+ }
+
+ .ql-picker-label {
+ padding-left: 0;
+ }
+ }
+
+ .ql-container {
+ border: 0;
+ }
+
+ .ql-editor {
+ border: 0;
+ padding: 0;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_recaptcha.scss b/src/_metronic/assets/sass/core/vendors/plugins/_recaptcha.scss
new file mode 100644
index 0000000..4c0d42e
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_recaptcha.scss
@@ -0,0 +1,32 @@
+//
+// Recaptcha
+//
+
+
+// Base
+.recaptcha {
+ padding: 15px;
+ border: 1px solid var(--kt-gray-200);
+ @include border-radius($border-radius);
+
+ .recaptcha-img {
+ margin-bottom: 10px;
+ }
+
+ .recaptcha_only_if_incorrect_sol {
+ color: var(--kt-danger);
+ }
+
+ .input-group {
+ .btn {
+ i {
+ padding-right: 0;
+ }
+ }
+
+ .form-control {
+ @include border-top-start-radius($border-radius !important);
+ @include border-bottom-start-radius($border-radius !important);
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_root.scss b/src/_metronic/assets/sass/core/vendors/plugins/_root.scss
new file mode 100644
index 0000000..afab66f
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_root.scss
@@ -0,0 +1,36 @@
+//
+// CSS Variables
+//
+
+:root,
+[data-theme="light"] {
+ // Select2
+
+ // Prismjs
+ --kt-highlight-bg: #{$highlight-bg};
+
+ --kt-highlight-border: #{$highlight-border};
+
+ --kt-highlight-btn-bg: #{$highlight-btn-bg};
+ --kt-highlight-btn-bg-hover: #{$highlight-btn-bg-hover};
+ --kt-highlight-btn-color: #{$highlight-btn-color};
+ --kt-highlight-btn-color-hover: #{$highlight-btn-color-hover};
+
+ --kt-highlight-scrollbar-color: #{$highlight-scrollbar-color};
+ --kt-highlight-scrollbar-color: #{$highlight-scrollbar-hover-color};
+}
+
+[data-theme="dark"] {
+ // Prismjs
+ --kt-highlight-bg: #{$highlight-bg-dark};
+
+ --kt-highlight-border: #{$highlight-border-dark};
+
+ --kt-highlight-btn-bg: #{$highlight-btn-bg-dark};
+ --kt-highlight-btn-bg-hover: #{$highlight-btn-bg-hover-dark};
+ --kt-highlight-btn-color: #{$highlight-btn-color-dark};
+ --kt-highlight-btn-color-hover: #{$highlight-btn-color-hover-dark};
+
+ --kt-highlight-scrollbar-color: #{$highlight-scrollbar-color-dark};
+ --kt-highlight-scrollbar-color-hover: #{$highlight-scrollbar-hover-color-dark};
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_select2.scss b/src/_metronic/assets/sass/core/vendors/plugins/_select2.scss
new file mode 100644
index 0000000..20fc962
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_select2.scss
@@ -0,0 +1,399 @@
+//
+// Select2 plugin customization: https://select2.org
+//
+
+$select2-dropdown-padding: 1rem 0;
+$select2-dropdown-option-padding: 0.75rem 1.25rem;
+$select2-dropdown-option-margin: 0 0;
+$select2-dropdown-option-check-padding: 1.25rem;
+
+$select2-dropdown-group-padding: 0 1.25rem 0 1.25rem;
+$select2-dropdown-group-margin: 0 0 0.25rem 0;
+
+$select2-search-padding: 0.5rem 1.25rem;
+$select2-search-margin: 0 0 0.5rem 0;
+
+$select2-clear-size: 0.7rem;
+$select2-clear-color: var(--kt-gray-700);
+$select2-clear-color-dark: var(--kt-gray-700);
+$select2-clear-color-hover: var(--kt-primary);
+$select2-clear-right: $form-select-indicator-padding; //$form-select-padding-x +
+
+
+// Bootstrap .form-control sizing integration
+$select2-tag-clear-size: 0.6rem;
+
+$select2-tag-padding-y-sm: 0.1rem;
+$select2-tag-padding-x-sm: 0.35rem;
+$select2-input-padding-y-sm: $input-padding-y-sm - $select2-tag-padding-y-sm * 2;
+
+$select2-tag-padding-y: 0.1rem;
+$select2-tag-padding-x: 0.5rem;
+$select2-input-padding-y: $input-padding-y - $select2-tag-padding-y * 2;
+
+$select2-tag-padding-y-lg: 0.15rem;
+$select2-tag-padding-x-lg: 0.65rem;
+$select2-input-padding-y-lg: $input-padding-y-lg - $select2-tag-padding-y-lg * 2;
+
+// Bootstrapa 5 Theme
+.select2-container--bootstrap5 {
+ // Selection
+ .select2-selection {
+ box-shadow: none !important;
+ height: auto;
+ outline: none !important;
+ }
+
+ // Selection focus & open states
+ &.select2-container--focus,
+ &.select2-container--open {
+ .form-select-solid {
+ background-color: var(--kt-input-solid-bg-focus);
+ }
+
+ .form-select:not(.form-select-solid):not(.form-select-transparent) {
+ border-color: var(--kt-input-focus-border-color);
+ }
+ }
+
+ // Search
+ .select2-search.select2-search--inline {
+ .select2-search__field {
+ color: var(--kt-input-color);
+ @include placeholder($input-placeholder-color);
+ font-weight: $input-font-weight;
+ font-family: inherit !important;
+ background-color: transparent;
+ border: 0;
+ box-shadow: none;
+ outline: none;
+ line-height: 1;
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ .form-select-solid .select2-search.select2-search--inline {
+ .select2-search__field {
+ color: var(--kt-input-solid-color);
+ font-family: inherit !important;
+ @include placeholder(var(--kt-input-solid-placeholder-color));
+ }
+ }
+
+ // Single mode
+ .select2-selection--single {
+ display: flex;
+ align-items: center;
+
+ // Selected
+ .select2-selection__rendered {
+ display: block;
+ padding-left: 0;
+ padding-right: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--kt-input-color);
+ }
+
+ // Placeholder
+ .select2-selection__placeholder {
+ color: $input-placeholder-color;
+ }
+
+ // Form select solid
+ &.form-select-solid {
+ // Selected
+ .select2-selection__rendered {
+ color: var(--kt-input-solid-color);
+ }
+
+ // Placeholder
+ .select2-selection__placeholder {
+ color: var(--kt-input-solid-placeholder-color);
+ }
+ }
+
+ // Form select transparent
+ &.form-select-transparent {
+ // Selected
+ .select2-selection__rendered {
+ color: var(--kt-gray-800);
+ }
+
+ // Placeholder
+ .select2-selection__placeholder {
+ color: var(--kt-gray-800);
+ }
+ }
+
+ // Form select dark color
+ &.form-select-dark {
+ // Selected
+ .select2-selection__rendered {
+ color: var(--kt-gray-900);
+ }
+ }
+ }
+
+ // Multiple mode
+ .select2-selection--multiple {
+ display: flex;
+ align-items: center;
+
+ // Search
+ .select2-search.select2-search--inline {
+ display: inline-flex;
+ }
+
+ // Selected
+ .select2-selection__rendered {
+ display: inline;
+ margin: 0;
+ padding: 0;
+
+ .select2-selection__choice {
+ display: inline-flex;
+ align-items: center;
+ position: relative;
+ background-color: var(--kt-gray-300);
+
+ .select2-selection__choice__remove {
+ @include svg-bg-icon(close, var(--kt-gray-700));
+ display: block;
+ position: absolute;
+ transform: translateY(-50%);
+ opacity: 0.5;
+ border: 0;
+ transition: $transition-link;
+ top: 50%;
+
+ span {
+ display: none;
+ }
+
+ &:hover {
+ opacity: 1;
+ @include svg-bg-icon(close, var(--kt-primary));
+ transition: $transition-link;
+ }
+ }
+
+ .select2-selection__choice__display {
+ font-weight: $font-weight-semibold;
+ }
+ }
+ }
+
+ // Choice
+ .select2-selection__choice {
+ .select2-selection__choice__remove {
+ height: $select2-tag-clear-size;
+ width: $select2-tag-clear-size;
+ }
+ }
+
+ // Sizes
+ &.form-select-sm {
+ min-height: $input-height-sm;
+ padding-top: $select2-input-padding-y-sm;
+ padding-bottom: $select2-input-padding-y-sm;
+
+ .select2-selection__choice {
+ border-radius: $btn-border-radius-sm;
+ padding: $select2-tag-padding-y-sm $select2-tag-padding-x-sm;
+ margin-right: $select2-tag-padding-x-sm;
+ margin-top: $select2-tag-padding-y-sm;
+ margin-bottom: $select2-tag-padding-y-sm;
+
+ .select2-selection__choice__display {
+ margin-left: $select2-tag-padding-x-sm + $select2-tag-clear-size;
+ font-size: $input-btn-font-size-sm;
+ }
+ }
+
+ .select2-search__field {
+ height: 14px;
+ }
+ }
+
+ &:not(.form-select-sm):not(.form-select-lg) {
+ min-height: $input-height;
+ padding-top: $select2-input-padding-y;
+ padding-bottom: $select2-input-padding-y;
+
+ .select2-selection__choice {
+ border-radius: $btn-border-radius;
+ padding: $select2-tag-padding-y $select2-tag-padding-x;
+ margin-right: $select2-tag-padding-x;
+ margin-top: $select2-tag-padding-y;
+ margin-bottom: $select2-tag-padding-y;
+
+ .select2-selection__choice__display {
+ margin-left: $select2-tag-padding-x + $select2-tag-clear-size;
+ font-size: $input-btn-font-size;
+ }
+ }
+
+ .select2-search__field {
+ height: 16px;
+ }
+ }
+
+ &.form-select-lg {
+ min-height: $input-height-lg;
+ padding-top: $select2-input-padding-y-lg;
+ padding-bottom: $select2-input-padding-y-lg;
+
+ .select2-selection__choice {
+ border-radius: $btn-border-radius-lg;
+ padding: $select2-tag-padding-y-lg $select2-tag-padding-x-lg;
+ margin-right: $select2-tag-padding-x-lg;
+ margin-top: $select2-tag-padding-y-lg;
+ margin-bottom: $select2-tag-padding-y-lg;
+
+ .select2-selection__choice__display {
+ margin-left: $select2-tag-padding-x-lg + $select2-tag-clear-size;
+ font-size: $input-btn-font-size-lg;
+ }
+ }
+
+ .select2-search__field {
+ height: 18px;
+ }
+ }
+ }
+
+ // Dropdown
+ .select2-dropdown {
+ border: 0;
+ box-shadow: var(--kt-dropdown-box-shadow);
+ border-radius: $dropdown-border-radius;
+ padding: $select2-dropdown-padding;
+ background-color: var(--kt-dropdown-bg);
+
+ // In modal
+ .modal-open & {
+ z-index: $zindex-modal + 1;
+ }
+
+ // Search
+ .select2-search {
+ padding: $select2-search-padding;
+ margin: $select2-search-margin;
+
+ .select2-search__field {
+ background-color: var(--kt-body-bg);
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ color: var(--kt-input-color);
+ font-size: $input-font-size-sm;
+ border: 1px solid var(--kt-input-border-color);
+ border-radius: $input-border-radius-sm;
+ outline: 0 !important;
+
+ &:focus,
+ &:active {
+ border: 1px solid var(--kt-input-focus-border-color);
+ }
+ }
+ }
+
+ // Options
+ .select2-results__options {
+ max-height: 250px;
+ overflow-y: auto;
+ }
+
+ // Option
+ .select2-results__option {
+ color: var(--kt-gray-700);
+ transition: $transition-link;
+ padding: $select2-dropdown-option-padding;
+ margin: $select2-dropdown-option-margin;
+
+ &.select2-results__option--highlighted {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ transition: $transition-link;
+ }
+
+ &.select2-results__option--selected {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ transition: $transition-link;
+ position: relative;
+
+ &:after {
+ top: 50%;
+ display: block;
+ position: absolute;
+ transform: translateY(-50%);
+ height: 0.75rem;
+ width: 0.75rem;
+ content: "";
+ @include svg-bg-icon(check, var(--kt-component-hover-color));
+ mask-position: center;
+ -webkit-mask-position: center;
+ right: $select2-dropdown-option-check-padding;
+ }
+ }
+
+ &.select2-results__option--disabled {
+ color: var(--kt-gray-400);
+ }
+
+ &.select2-results__message {
+ color: var(--kt-gray-600);
+ }
+
+ &.select2-results__option--group {
+ padding-left: 0;
+ padding-right: 0;
+
+ .select2-results__group {
+ display: block;
+ color: var(--kt-gray-800);
+ font-weight: $font-weight-semibold;
+ font-size: $h5-font-size;
+ padding: $select2-dropdown-group-padding;
+ margin: $select2-dropdown-group-margin;
+ }
+
+ .select2-results__option {
+ padding: $select2-dropdown-option-padding;
+ margin: $select2-dropdown-option-margin;
+ }
+ }
+ }
+ }
+
+ // Clear
+ .select2-selection__clear {
+ display: block;
+ height: $select2-clear-size;
+ width: $select2-clear-size;
+ top: 50%;
+ right: $select2-clear-right;
+ position: absolute;
+ transform: translateY(-50%);
+ background-color: var(--kt-gray-700) !important;
+ @include svg-bg-icon(close, var(--kt-gray-700));
+
+ span {
+ display: none;
+ }
+
+ &:hover {
+ background-color: var(--kt-primary) !important;
+ @include svg-bg-icon(close, var(--kt-primary));
+ }
+ }
+}
+
+// Floating label integration
+.form-floating {
+ .form-select {
+ padding-top: $form-floating-input-padding-t !important;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_sweetalert2.scss b/src/_metronic/assets/sass/core/vendors/plugins/_sweetalert2.scss
new file mode 100644
index 0000000..4dbe6ab
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_sweetalert2.scss
@@ -0,0 +1,112 @@
+//
+// SweetAlert2
+//
+
+// Base
+html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
+body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown):not(.modal-open) {
+ overflow-y: initial !important;
+
+ &:not(.sweetalert2-nopadding) {
+ padding-right: 0 !important;
+ }
+}
+
+// Popup
+.swal2-popup {
+ background-color: var(--kt-body-bg);
+ padding: 2rem;
+ @include border-radius($border-radius);
+
+ .swal2-title {
+ font-weight: 500;
+ font-size: 1.3rem;
+ color: var(--kt-dark);
+ }
+
+ .swal2-html-container,
+ .swal2-content {
+ font-weight: normal;
+ font-size: 1.1rem;
+ margin-top: 1.5rem;
+ color: var(--kt-gray-800);
+ }
+
+ .btn {
+ margin: 15px 5px 0;
+ }
+
+ .swal2-styled {
+ &:focus {
+ box-shadow: none;
+ }
+ }
+
+ .swal2-actions {
+ margin: 1.5rem auto 1rem auto;
+ }
+}
+
+// Container
+.swal2-container {
+ overflow-y: hidden !important;
+
+ &.swal2-shown {
+ background-color: rgba($black, 0.2);
+ }
+
+ // Content
+ .swal2-html-container {
+ max-height: 200px;
+ overflow: auto;
+ }
+}
+
+body.swal2-height-auto {
+ height: 100% !important;
+}
+
+// State Colors
+.swal2-icon {
+ // Warning
+ &.swal2-warning {
+ border-color: var(--kt-warning);
+ color: var(--kt-warning);
+ }
+
+ // Error
+ &.swal2-error {
+ border-color: var(--kt-danger);
+ color: var(--kt-danger);
+
+ [class^=swal2-x-mark-line] {
+ background-color: rgba(var(--kt-danger-rgb), 0.75);
+ }
+ }
+
+ // Success
+ &.swal2-success {
+ border-color: var(--kt-success);
+ color: var(--kt-success);
+
+ [class^=swal2-success-line] {
+ background-color: var(--kt-success);
+ }
+
+ .swal2-success-ring {
+ border-color: rgba(var(--kt-success-rgb), 0.3);
+ }
+ }
+
+ // Info
+ &.swal2-info {
+ border-color: var(--kt-info);
+ color: var(--kt-info);
+ }
+
+ // Question
+ &.swal2-question {
+ border-color: var(--kt-primary);
+ color: var(--kt-primary);
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_tagify.scss b/src/_metronic/assets/sass/core/vendors/plugins/_tagify.scss
new file mode 100644
index 0000000..3be65c6
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_tagify.scss
@@ -0,0 +1,221 @@
+//
+// Tagify
+//
+
+// Bootstrap .form-control sizing integration
+$tagify-tag-padding-y-sm: 0.3rem;
+$tagify-tag-padding-x-sm: 0.3rem;
+$tagify-input-padding-y-sm: #{$input-padding-y-sm - $tagify-tag-padding-y-sm};
+
+$tagify-tag-padding-y: 0.4rem;
+$tagify-tag-padding-x: 0.4rem;
+$tagify-input-padding-y: $input-padding-y - $tagify-tag-padding-y;
+
+$tagify-tag-padding-y-lg: 0.5rem;
+$tagify-tag-padding-x-lg: 0.5rem;
+$tagify-input-padding-y-lg: $input-padding-y-lg - $tagify-tag-padding-y-lg;
+
+// Base
+.tagify {
+ --tagify-dd-bg-color : var(--kt-body-bg);
+ --tags-border-color : var(--kt-input-border-color);
+ --tags-hover-border-color : var(--kt-input-border-color);
+ --tags-focus-border-color : var(--kt-input-focus-border-color);
+ --tag-bg : var(--kt-gray-200);
+ --tag-hover : var(--kt-gray-200);
+ --tag-text-color : var(--kt-gray-700);
+ --tag-text-color--edit : var(--kt-gray-700);
+ --tag-pad : 0 0.5rem;
+ --tag-inset-shadow-size : 1rem;
+ --tag-invalid-color : var(--kt-danger);
+ --tag-invalid-bg : var(--kt-danger-light);
+ --tag-remove-bg : var(--kt-gray-200);
+ --tag-remove-btn-color : transparent;
+ --tag-remove-btn-bg : transparent;
+ --tag-remove-btn-bg--hover : transparent;
+ --input-color : var(--kt-gray-700);
+ --placeholder-color : var(--kt-gray-400);
+ --placeholder-color-focus : var(--kt-gray-500);
+ --loader-size : .8rem;
+
+ .tagify__tag {
+ background-color: var(--tag-bg);
+ margin: 0;
+ line-height: 1;
+
+ div {
+ border-radius: inherit;
+ }
+
+ .tagify__tag-text {
+ overflow: visible;
+ }
+
+ .tagify__tag__removeBtn {
+ width: 0.6rem;
+ height: 0.6rem;
+ margin: 0 0.5rem 0 0;
+ border-radius: 0;
+ content: " ";
+ @include svg-bg-icon(close, var(--kt-gray-500));
+
+ &:after {
+ display: none;
+ }
+
+ &:hover {
+ @include svg-bg-icon(close, var(--kt-primary));
+ }
+ }
+
+ // Not allowed state
+ &.tagify--notAllowed {
+ div {
+ .tagify__tag-text {
+ color: var(--kt-danger);
+ opacity: .5;
+ }
+ }
+
+ .tagify__tag__removeBtn {
+ opacity: .5;
+ @include svg-bg-icon(close, var(--kt-danger));
+
+ &:hover {
+ background: transparent;
+ opacity: .75;
+ }
+ }
+ }
+ }
+
+ .tagify__input {
+ margin: 0;
+
+ &:before {
+ font-size: inherit;
+ line-height: inherit;
+ font-weight: inherit;
+ }
+ }
+
+ // Sizing
+ &.form-control {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+ }
+
+ &.form-control-sm {
+ border-radius: $btn-border-radius-sm;
+ min-height: $input-height-sm;
+ padding-top: $tagify-input-padding-y-sm;
+ padding-bottom: $tagify-input-padding-y-sm;
+
+ .tagify__tag {
+ padding: $tagify-tag-padding-y-sm $tagify-tag-padding-x-sm;
+ border-radius: $btn-border-radius-sm;
+
+ .tagify__tag-text {
+ font-size: $input-btn-font-size-sm;
+ }
+ }
+ }
+
+ &:not(.form-control-sm):not(.form-control-lg) {
+ border-radius: $btn-border-radius;
+ min-height: $input-height;
+ padding-top: $tagify-input-padding-y;
+ padding-bottom: $tagify-input-padding-y;
+
+ .tagify__tag {
+ padding: $tagify-tag-padding-y $tagify-tag-padding-x;
+ border-radius: $btn-border-radius;
+
+ .tagify__tag-text {
+ font-size: $input-btn-font-size;
+ }
+ }
+ }
+
+ &.form-control-lg {
+ border-radius: $btn-border-radius-lg;
+ min-height: $input-height-lg;
+ padding-top: $tagify-input-padding-y-lg;
+ padding-bottom: $tagify-input-padding-y-lg;
+
+ .tagify__tag {
+ padding: $tagify-tag-padding-y-lg $tagify-tag-padding-x-lg;
+ border-radius: $btn-border-radius-lg;
+
+ .tagify__tag-text {
+ font-size: $input-btn-font-size-lg;
+ }
+ }
+ }
+}
+
+// Dropdown
+.tagify__dropdown {
+ box-shadow: var(--kt-dropdown-box-shadow);
+ border: 0 !important;
+ outline: none !important;
+ padding: 0.75rem 0;
+ z-index: $zindex-dropdown;
+ background-color: var(--kt-body-bg);
+ @include border-radius($border-radius);
+
+ // Wrapper
+ ._wrapper {
+ max-height: none;
+ @include border-radius($border-radius);
+ }
+
+ // In modal
+ .modal-open & {
+ z-index: $zindex-modal + 1;
+ }
+
+ .tagify__dropdown__wrapper {
+ background-color: var(--kt-body-bg);
+ border: 0 !important;
+ outline: none !important;
+ box-shadow: none;
+ }
+
+ .tagify__dropdown__item {
+ color: var(--kt-gray-700);
+ border-radius: 0;
+ padding: 0.75rem 1.5rem;
+ margin: 0;
+ box-shadow: none;
+ font-weight: $font-weight-semibold;
+
+ &:hover,
+ &.tagify__dropdown__item--active {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ }
+ }
+
+ // Suggestions
+ &.tagify__inline__suggestions {
+ padding: $input-padding-y $input-padding-x;
+
+ .tagify__dropdown__item {
+ display: inline-block;
+ font-size: $font-size-sm;
+ padding: 0.35rem 0.5rem;
+ margin: 0.25rem 0.5rem 0.25rem 0;
+ background-color: var(--kt-gray-200);
+ color: var(--kt-gray-700);
+ @include border-radius($border-radius);
+
+ &:hover,
+ &.tagify__dropdown__item--active {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ }
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_tiny-slider.scss b/src/_metronic/assets/sass/core/vendors/plugins/_tiny-slider.scss
new file mode 100644
index 0000000..c8a6872
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_tiny-slider.scss
@@ -0,0 +1,109 @@
+//
+// Slider
+//
+
+// Base
+.tns {
+ position: relative;
+ overflow: hidden;
+
+ [data-tns="true"] {
+ display: none;
+ }
+
+ .tns-item {
+ opacity: 0;
+ transition: all 0.3s ease;
+ }
+
+ .tns-controls {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ button {
+ outline: none;
+ border: 0;
+ margin: 0 0.25rem;
+ @include border-radius($btn-border-radius);
+ padding: 0.5rem 0.75rem;
+ background-color: var(--kt-primary);
+ color: var(--kt-primary-inverse);
+
+ &:hover {
+ background-color: var(--kt-primary-active);
+ }
+ }
+ }
+
+ .tns-nav {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+
+ button {
+ display: block;
+ outline: none;
+ width: 1.25rem;
+ height: 0.75rem;
+ background-color: var(--kt-gray-200);
+ margin: 0 0.25rem;
+ border: 0;
+ @include border-radius(0.35rem);
+
+ &.tns-nav-active{
+ background-color: var(--kt-primary);
+ }
+ }
+ }
+
+ &.tns-initiazlied {
+ [data-tns="true"] {
+ display: flex;
+ }
+
+ .tns-item {
+ opacity: 1;
+ transition: all 0.3s ease;
+ }
+ }
+
+ // Default
+ &.tns-default {
+ position: relative;
+
+ // Navs
+ [data-controls="prev"],
+ [data-controls="next"] {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ [data-controls="prev"] {
+ left: 0;
+ }
+
+ [data-controls="next"] {
+ right: 0;
+ }
+
+ .tns-outer {
+ margin: 0 4rem;
+
+ // Tablet mode
+ @include media-breakpoint-down(md) {
+ margin: 0 2rem;
+ }
+ }
+ }
+}
+
+// Utils
+.tns-hide-disabled-nav {
+ [disabled] {
+ display: none !important;
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_tinymce.scss b/src/_metronic/assets/sass/core/vendors/plugins/_tinymce.scss
new file mode 100644
index 0000000..bc9f624
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_tinymce.scss
@@ -0,0 +1,13 @@
+//
+// TinyMCE
+//
+
+
+// Base
+.tox-target{
+ display: none;
+}
+
+.tox-tinymce{
+ @include border-radius($border-radius !important);
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_toastr.scss b/src/_metronic/assets/sass/core/vendors/plugins/_toastr.scss
new file mode 100644
index 0000000..62d9fc4
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_toastr.scss
@@ -0,0 +1,87 @@
+//
+// Toastr
+//
+
+// Base
+.toastr {
+ // this is for RTL
+ background-position: calc(100% - 1.5rem) center !important;
+ /*rtl:ignore*/
+ background-position: 1.5rem center !important;
+ box-shadow: var(--kt-dropdown-box-shadow) !important;
+ border-radius: $dropdown-border-radius !important;
+ border: 0 !important;
+ background-color: var(--kt-gray-100);
+ color: var(--kt-gray-700);
+ padding: 1.25rem 1.25rem 1.25rem 4.5rem !important;
+
+ .toastr-close-button {
+ outline: none !important;
+ font-size: 0;
+ width: 0.85rem;
+ height: 0.85rem;
+ }
+
+ // Title
+ .toastr-title {
+ font-size: 1.15rem;
+ font-weight: $font-weight-semibold;
+
+ & + .toastr-message {
+ margin-top: 0.25rem;
+ }
+ }
+
+ // Message
+ .toastr-message {
+ font-size: 1rem;
+ font-weight: $font-weight-normal;
+ }
+
+ // States
+ &.toastr-success {
+ background-color: var(--kt-success);
+ color: var(--kt-success-inverse);
+
+ .toastr-close-button {
+ @include svg-bg-icon(close, var(--kt-success-inverse));
+ }
+ }
+
+ &.toastr-info {
+ background-color: var(--kt-info);
+ color: var(--kt-info-inverse);
+
+ .toastr-close-button {
+ @include svg-bg-icon(close, var(--kt-info-inverse));
+ }
+ }
+
+ &.toastr-warning {
+ background-color: var(--kt-warning);
+ color: var(--kt-warning-inverse);
+
+ .toastr-close-button {
+ @include svg-bg-icon(close, var(--kt-warning-inverse));
+ }
+ }
+
+ &.toastr-error {
+ background-color: var(--kt-danger);
+ color: var(--kt-danger-inverse);
+
+ .toastr-close-button {
+ @include svg-bg-icon(close, var(--kt-danger-inverse));
+ }
+ }
+}
+
+
+// Placements
+.toastr-top-center {
+ top: 12px;
+}
+
+.toastr-bottom-center {
+ bottom: 12px;
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_variables.scss b/src/_metronic/assets/sass/core/vendors/plugins/_variables.scss
new file mode 100644
index 0000000..6918d84
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_variables.scss
@@ -0,0 +1,35 @@
+//
+// 3rd-party config
+//
+
+
+// Prismjs
+$highlight-bg: #1e1e3f;
+$highlight-bg-dark: #151521;
+
+$highlight-border: rgba($white, 0.1);
+$highlight-border-dark: rgba($white, 0.1);
+
+$highlight-btn-bg: lighten($highlight-bg, 9%);
+$highlight-btn-bg-dark: lighten($highlight-bg-dark, 9%);
+$highlight-btn-bg-hover: lighten($highlight-bg, 9%);
+$highlight-btn-bg-hover-dark: lighten($highlight-bg-dark, 9%);
+
+$highlight-btn-color: rgba($white, 0.75);
+$highlight-btn-color-dark: rgba($white, 0.75);
+$highlight-btn-color-hover: $primary;
+$highlight-btn-color-hover-dark: $primary;
+
+$highlight-scrollbar-color: lighten($highlight-bg, 12%);
+$highlight-scrollbar-color-dark: lighten($highlight-bg-dark, 12%);
+$highlight-scrollbar-hover-color: lighten($highlight-bg, 15%);
+$highlight-scrollbar-hover-color-dark: lighten($highlight-bg-dark, 15%);
+
+// Bootstrap Maxlength
+$bootstrap-maxlength-z-index: 1040;
+
+// Daterangepicker
+$daterangepicker-ranges-list-height: 260px;
+$daterangepicker-ranges-list-width: 150px;
+
+
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/_vis-timeline.scss b/src/_metronic/assets/sass/core/vendors/plugins/_vis-timeline.scss
new file mode 100644
index 0000000..1f8e01c
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/_vis-timeline.scss
@@ -0,0 +1,131 @@
+//
+// Vis Timeline
+//
+
+// Variables
+$vis-border-color: var(--kt-border-color);
+$vis-border-dashed-color: var(--kt-border-dashed-color);
+
+// General
+.vis-timeline {
+ border: 1px solid $vis-border-color !important;
+
+ @if ($enable-rounded) {
+ border-radius: $border-radius !important;
+ }
+
+ .vis-labelset {
+ .vis-label {
+ display: flex;
+ align-items: center;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ border-bottom: none;
+ font-size: $h4-font-size;
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-900);
+ }
+ }
+
+ .vis-itemset {
+ }
+
+ .vis-foreground {
+ .vis-group {
+ border-bottom: none;
+ }
+ }
+
+ .vis-item {
+ position: absolute;
+ color: var(--kt-gray-700);
+ border-color: var(--kt-primary);
+ border-width: 1px;
+ background-color: var(--kt-gray-100);
+
+ @if ($enable-rounded) {
+ border-radius: $border-radius !important;
+ }
+
+ &.vis-selected {
+ background-color: var(--kt-warning-light);
+ color: var(--kt-gray-700);
+ border-color: var(--kt-warning);
+ }
+
+ .vis-item-content {
+ padding: 0.75rem 1rem;
+ width: 100%;
+ transform: none !important;
+ }
+ }
+
+ .vis-time-axis {
+ font-size: $font-size-sm;
+ text-transform: uppercase;
+ font-weight: $font-weight-semibold;
+
+ .vis-text {
+ color: var(--kt-gray-400);
+ }
+
+ .vis-grid.vis-minor {
+ border-left-color: $vis-border-dashed-color !important;
+ }
+
+ .vis-grid.vis-vertical {
+ border-left-style: dashed !important;
+ }
+ }
+
+ .vis-panel {
+ .vis-shadow {
+ box-shadow: none !important;
+ }
+ }
+
+ .vis-panel {
+ &.vis-bottom,
+ &.vis-center,
+ &.vis-left,
+ &.vis-right,
+ &.vis-top {
+ border-color: $vis-border-color !important;
+ }
+ }
+
+ .vis-current-time {
+ background-color: var(--kt-success);
+ }
+}
+
+// Custom style
+.vis-timeline-custom {
+ .vis-timeline {
+ border: 0 !important;
+
+ .vis-label {
+ padding-left: 0 !important;
+ }
+ }
+
+ .vis-panel {
+ &.vis-bottom,
+ &.vis-center,
+ &.vis-left,
+ &.vis-right,
+ &.vis-top {
+ border: 0 !important;
+ }
+ }
+
+ .vis-item {
+ background-color: transparent;
+ border: 0 !important;
+ border-radius: 0 !important;
+
+ .vis-item-content {
+ padding: 0 !important;
+ }
+ }
+}
diff --git a/src/_metronic/assets/sass/core/vendors/plugins/mixins/_nouislider.scss b/src/_metronic/assets/sass/core/vendors/plugins/mixins/_nouislider.scss
new file mode 100644
index 0000000..455a2b2
--- /dev/null
+++ b/src/_metronic/assets/sass/core/vendors/plugins/mixins/_nouislider.scss
@@ -0,0 +1,13 @@
+//
+// noUiSlider Mixins
+//
+
+@mixin nouislider-size($height, $handle-width, $handle-height, $handle-pos-top) {
+ height: $height;
+
+ .noUi-handle {
+ width: $handle-width;
+ height: $handle-height;
+ top: -#{$handle-pos-top};
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/layout/_content.scss b/src/_metronic/assets/sass/layout/_content.scss
new file mode 100644
index 0000000..0aebeaa
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/_content.scss
@@ -0,0 +1,21 @@
+//
+// Content
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-content {
+ [data-kt-app-toolbar-enabled="true"]:not([data-kt-app-toolbar-fixed="true"]) & {
+ padding-top: 0;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-content {
+ [data-kt-app-toolbar-enabled="true"]:not([data-kt-app-toolbar-fixed-mobile="true"]) & {
+ padding-top: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/layout/_layout.scss b/src/_metronic/assets/sass/layout/_layout.scss
new file mode 100644
index 0000000..1ee48df
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/_layout.scss
@@ -0,0 +1,15 @@
+//
+// Layout
+//
+
+@import "root";
+@import "sidebar/sidebar";
+@import "sidebar/sidebar-minimize";
+@import "sidebar/sidebar-dark";
+@import "sidebar/sidebar-light";
+@import "header/header";
+@import "header/header-dark";
+@import "header/header-sidebar-light";
+@import "content";
+@import "toolbar";
+@import "page-title";
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/layout/_page-title.scss b/src/_metronic/assets/sass/layout/_page-title.scss
new file mode 100644
index 0000000..f345706
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/_page-title.scss
@@ -0,0 +1,14 @@
+//
+// Page Title(used by Dark Header layout only)
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ [data-kt-app-layout="dark-header"] {
+ .app-header {
+ .page-heading {
+ color: $white !important;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/layout/_root.scss b/src/_metronic/assets/sass/layout/_root.scss
new file mode 100644
index 0000000..8eab1bd
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/_root.scss
@@ -0,0 +1,89 @@
+//
+// Root
+//
+
+// Light mode
+@include theme-light() {
+ // Reboot
+ --kt-app-bg-color: #{$app-bg-color};
+ --kt-app-blank-bg-color: #{$app-blank-bg-color};
+
+ // Header base
+ --kt-app-header-base-bg-color: #{$app-header-base-bg-color};
+ --kt-app-header-base-bg-color-mobile: #{$app-header-base-bg-color-mobile};
+ --kt-app-header-base-box-shadow: #{$app-header-base-box-shadow};
+ --kt-app-header-base-box-shadow-mobile: #{$app-header-base-box-shadow-mobile};
+ --kt-app-header-base-menu-link-bg-color-active: #{$app-header-base-menu-link-bg-color-active};
+
+ // Header light
+ --kt-app-header-light-separator-color: #{$app-header-light-separator-color};
+
+ // Sidebar base
+ --kt-app-sidebar-base-toggle-btn-box-shadow: #{$app-sidebar-base-toggle-btn-box-shadow};
+ --kt-app-sidebar-base-toggle-btn-bg-color: #{$app-sidebar-base-toggle-btn-bg-color};
+
+ // Sidebar light
+ --kt-app-sidebar-light-bg-color: #{$app-sidebar-light-bg-color};
+ --kt-app-sidebar-light-box-shadow: #{$app-sidebar-light-box-shadow};
+ --kt-app-sidebar-light-separator-color: #{$app-sidebar-light-separator-color};
+ --kt-app-sidebar-light-scrollbar-color: #{$app-sidebar-light-scrollbar-color};
+ --kt-app-sidebar-light-scrollbar-color-hover: #{$app-sidebar-light-scrollbar-color-hover};
+ --kt-app-sidebar-light-menu-heading-color: #{$app-sidebar-light-menu-heading-color};
+ --kt-app-sidebar-light-menu-link-bg-color-active: #{$app-sidebar-light-menu-link-bg-color-active};
+ --kt-app-sidebar-light-header-menu-link-bg-color-active: #{$app-sidebar-light-header-menu-link-bg-color-active};
+
+ // Toolbar base
+ --kt-app-toolbar-base-bg-color: #{$app-toolbar-base-bg-color};
+ --kt-app-toolbar-base-bg-color-mobile: #{$app-toolbar-base-bg-color-mobile};
+ --kt-app-toolbar-base-box-shadow: #{$app-toolbar-base-box-shadow};
+ --kt-app-toolbar-base-box-shadow-mobile: #{$app-toolbar-base-box-shadow-mobile};
+ --kt-app-toolbar-base-border-top: #{$app-toolbar-base-border-top};
+ --kt-app-toolbar-base-border-top-mobile: #{$app-toolbar-base-border-top-mobile};
+
+ // Footer
+ --kt-app-footer-bg-color: #{$app-footer-bg-color};
+ --kt-app-footer-bg-color-mobile: #{$app-footer-bg-color-mobile};
+}
+
+// Dark mode
+@include theme-dark() {
+ // Reboot
+ --kt-app-bg-color: #{$app-bg-color-dark};
+ --kt-app-blank-bg-color: #{$app-blank-bg-color-dark};
+
+ // Header base
+ --kt-app-header-base-bg-color: #{$app-header-base-bg-color-dark};
+ --kt-app-header-base-bg-color-mobile: #{$app-header-base-bg-color-mobile-dark};
+ --kt-app-header-base-box-shadow: #{$app-header-base-box-shadow-dark};
+ --kt-app-header-base-box-shadow-mobile: #{$app-header-base-box-shadow-mobile-dark};
+ --kt-app-header-base-menu-link-bg-color-active: #{$app-header-base-menu-link-bg-color-active-dark};
+
+ // Header light
+ --kt-app-header-light-separator-color: #{$app-header-light-separator-color-dark};
+
+ // Sidebar base
+ --kt-app-sidebar-base-toggle-btn-box-shadow: #{$app-sidebar-base-toggle-btn-box-shadow-dark};
+ --kt-app-sidebar-base-toggle-btn-bg-color: #{$app-sidebar-base-toggle-btn-bg-color-dark};
+
+ // Sidebar light
+ --kt-app-sidebar-light-bg-color: #{$app-sidebar-light-bg-color-dark};
+ --kt-app-sidebar-light-box-shadow: #{$app-sidebar-light-box-shadow-dark};
+ --kt-app-sidebar-light-separator-color: #{$app-sidebar-light-separator-color-dark};
+ --kt-app-sidebar-light-scrollbar-color: #{$app-sidebar-light-scrollbar-color-dark};
+ --kt-app-sidebar-light-scrollbar-color-hover: #{$app-sidebar-light-scrollbar-color-hover-dark};
+ --kt-app-sidebar-light-menu-heading-color: #{$app-sidebar-light-menu-heading-color-dark};
+ --kt-app-sidebar-light-menu-link-bg-color-active: #{$app-sidebar-light-menu-link-bg-color-active-dark};
+ --kt-app-sidebar-light-header-menu-link-bg-color-active: #{$app-sidebar-light-header-menu-link-bg-color-active-dark};
+
+ // Toolbar base
+ --kt-app-toolbar-base-bg-color: #{$app-toolbar-base-bg-color-dark};
+ --kt-app-toolbar-base-bg-color-mobile: #{$app-toolbar-base-bg-color-mobile-dark};
+ --kt-app-toolbar-base-box-shadow: #{$app-toolbar-base-box-shadow-dark};
+ --kt-app-toolbar-base-box-shadow-mobile: #{$app-toolbar-base-box-shadow-mobile-dark};
+ --kt-app-toolbar-base-border-top: #{$app-toolbar-base-border-top-dark};
+ --kt-app-toolbar-base-border-top-mobile: #{$app-toolbar-base-border-top-mobile-dark};
+
+ // Footer
+ --kt-app-footer-bg-color: #{$app-footer-bg-color-dark};
+ --kt-app-footer-bg-color-mobile: #{$app-footer-bg-color-mobile-dark};
+}
diff --git a/src/_metronic/assets/sass/layout/_toolbar.scss b/src/_metronic/assets/sass/layout/_toolbar.scss
new file mode 100644
index 0000000..6b6dd12
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/_toolbar.scss
@@ -0,0 +1,38 @@
+//
+// Toolbar
+//
+
+// Form controls
+:is([data-kt-app-layout="light-sidebar"], [data-kt-app-layout="light-header"], [data-kt-app-layout="dark-header"]) {
+ .app-toolbar {
+ .form-select.form-select {
+ background-color: var(--kt-body-bg) !important;
+ }
+ }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-toolbar {
+ body:not([data-kt-app-toolbar-fixed="true"]) & {
+ height: auto;
+ background-color: transparent;
+ border-top: 0;
+ border-bottom: 0;
+ box-shadow: none;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-toolbar {
+ body:not([data-kt-app-toolbar-fixed-mobile="true"]) & {
+ height: auto;
+ background-color: transparent;
+ border-top: 0;
+ border-bottom: 0;
+ box-shadow: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/layout/_variables.custom.scss b/src/_metronic/assets/sass/layout/_variables.custom.scss
new file mode 100644
index 0000000..ab486ed
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/_variables.custom.scss
@@ -0,0 +1,111 @@
+//
+// Variables
+//
+
+// Reboot
+$app-bg-color: #f5f8fa;
+$app-bg-color-dark: #151521;
+$app-blank-bg-color: $white;
+$app-blank-bg-color-dark: $app-bg-color-dark;
+
+// Header base
+$app-header-base-height: 70px;
+$app-header-base-height-mobile: 60px;
+$app-header-base-bg-color: $body-bg;
+$app-header-base-bg-color-dark: #1e1e2d;
+$app-header-base-bg-color-mobile: $app-header-base-bg-color;
+$app-header-base-bg-color-mobile-dark: $app-header-base-bg-color-dark;
+$app-header-base-box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
+$app-header-base-box-shadow-dark: none;
+$app-header-base-box-shadow-mobile: $app-header-base-box-shadow;
+$app-header-base-box-shadow-mobile-dark: $app-header-base-box-shadow-dark;
+$app-header-base-menu-link-bg-color-active: $menu-link-bg-color-active;
+$app-header-base-menu-link-bg-color-active-dark: #2A2A3C;
+
+// Header light
+$app-header-light-separator-color: #E4E6EF;
+$app-header-light-separator-color-dark: $border-color-dark;
+
+// Header dark
+$app-header-dark-bg-color: #1e1e2d;
+$app-header-dark-separator-color: #282a3d;
+$app-header-dark-scrollbar-color: #3b3b64;
+$app-header-dark-scrollbar-color-hover: lighten($app-header-dark-scrollbar-color, 3%);
+
+// Sidebar base
+$app-sidebar-base-width: 265px;
+$app-sidebar-base-width-mobile: 250px;
+
+$app-sidebar-base-toggle-btn-box-shadow: 0px 0px 10px rgba(113, 121, 136, 0.1);
+$app-sidebar-base-toggle-btn-box-shadow-dark: none;
+$app-sidebar-base-toggle-btn-bg-color: $body-bg;
+$app-sidebar-base-toggle-btn-bg-color-dark: $app-header-base-menu-link-bg-color-active-dark;
+
+// Sidebar minimize
+$app-sidebar-minimize-width: 75px;
+
+// Sidebar light
+$app-sidebar-light-bg-color: $body-bg;
+$app-sidebar-light-bg-color-dark: #1e1e2d;
+
+$app-sidebar-light-box-shadow: 0 0 28px 0 rgba(82,63,105,.05);
+$app-sidebar-light-box-shadow-dark: none;
+
+$app-sidebar-light-separator-color: $app-header-light-separator-color;
+$app-sidebar-light-separator-color-dark: $app-header-light-separator-color-dark;
+
+$app-sidebar-light-scrollbar-color: $gray-200;
+$app-sidebar-light-scrollbar-color-dark: $gray-200-dark;
+$app-sidebar-light-scrollbar-color-hover: $gray-200;
+$app-sidebar-light-scrollbar-color-hover-dark: $gray-200-dark;
+$app-sidebar-light-menu-heading-color: #B5B5C3;
+$app-sidebar-light-menu-heading-color-dark: $gray-500-dark;
+$app-sidebar-light-menu-link-bg-color-active: #F4F6FA;
+$app-sidebar-light-menu-link-bg-color-active-dark: #2A2A3C;
+$app-sidebar-light-header-menu-link-bg-color-active: #EAEEF2;
+$app-sidebar-light-header-menu-link-bg-color-active-dark: $gray-100-dark;
+
+// Sidebar dark
+$app-sidebar-dark-bg-color: #1e1e2d;
+$app-sidebar-dark-separator-color: #393945;
+$app-sidebar-dark-scrollbar-color: $gray-300-dark;
+$app-sidebar-dark-scrollbar-color-hover: $gray-300-dark;
+$app-sidebar-dark-menu-heading-color: #646477;
+$app-sidebar-dark-menu-link-bg-color-active: #2A2A3C;
+
+// Toolbar base
+$app-toolbar-base-height: 55px;
+$app-toolbar-base-bg-color:$body-bg;
+$app-toolbar-base-bg-color-dark: darken(#1e1e2d, 2%);
+$app-toolbar-base-bg-color-mobile: $app-toolbar-base-bg-color;
+$app-toolbar-base-bg-color-mobile-dark: $app-toolbar-base-bg-color-dark;
+$app-toolbar-base-box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
+$app-toolbar-base-box-shadow-dark: none;
+$app-toolbar-base-box-shadow-mobile: $app-toolbar-base-box-shadow;
+$app-toolbar-base-box-shadow-mobile-dark: $app-toolbar-base-box-shadow-mobile;
+$app-toolbar-base-border-top: 1px solid $border-color;
+$app-toolbar-base-border-top-dark: 0;
+$app-toolbar-base-border-top-mobile: $app-toolbar-base-border-top;
+$app-toolbar-base-border-top-mobile-dark: $app-toolbar-base-border-top-mobile;
+
+// Footer
+$app-footer-height: 60px;
+$app-footer-height-mobile: auto;
+$app-footer-bg-color: $body-bg;
+$app-footer-bg-color-dark: #1e1e2d;
+$app-footer-bg-color-mobile: $app-footer-bg-color;
+$app-footer-bg-color-mobile-dark: $app-footer-bg-color-dark;
+
+// Scrolltop
+$scrolltop-bottom: 43px;
+$scrolltop-bottom-mobile: 23px;
+$scrolltop-end: 7px;
+$scrolltop-end-mobile: 5px;
+
+// Layout builder toggle(used for Demo purposes only)
+$app-layout-builder-toggle-end: 50px;
+$app-layout-builder-toggle-end-mobile: 40px;
+$app-layout-builder-toggle-bottom: 40px;
+$app-layout-builder-toggle-bottom-mobile: 20px;
+
+
diff --git a/src/_metronic/assets/sass/layout/header/_header-dark.scss b/src/_metronic/assets/sass/layout/header/_header-dark.scss
new file mode 100644
index 0000000..3fd8699
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/header/_header-dark.scss
@@ -0,0 +1,80 @@
+//
+// Dark Header(used by Dark Header layout only)
+//
+
+[data-kt-app-layout="dark-header"] {
+ .app-header {
+ background-color: $app-header-dark-bg-color;
+ border-bottom: 0 !important;
+
+ .btn-custom {
+ @include button-custom-variant(
+ $color:#B5B5C3,
+ $icon-color: #B5B5C3,
+ $border-color: null,
+ $bg-color: null,
+ $color-active: #B5B5C3,
+ $icon-color-active: var(--kt-primary),
+ $border-color-active: null,
+ $bg-color-active: rgba(63, 66, 84, 0.35)
+ );
+ }
+ }
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ // General mode
+ .app-header-menu {
+ .menu {
+ // Menu root links
+ > .menu-item {
+ @include menu-link-default-state(
+ $title-color: #9D9DA6,
+ $icon-color:#C5C5D8,
+ $bullet-color:#787887,
+ $arrow-color: #787887,
+ $bg-color: null,
+ $all-links: false
+ );
+
+ @include menu-link-hover-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: $app-sidebar-dark-menu-link-bg-color-active,
+ $all-links: false
+ );
+
+ @include menu-link-show-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: null,
+ $all-links: false
+ );
+
+ @include menu-link-here-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: $app-sidebar-dark-menu-link-bg-color-active,
+ $all-links: false
+ );
+
+ @include menu-link-active-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: $app-sidebar-dark-menu-link-bg-color-active,
+ $all-links: false
+ );
+ }
+ }
+ }
+ }
+}
+
diff --git a/src/_metronic/assets/sass/layout/header/_header-sidebar-light.scss b/src/_metronic/assets/sass/layout/header/_header-sidebar-light.scss
new file mode 100644
index 0000000..db38db8
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/header/_header-sidebar-light.scss
@@ -0,0 +1,55 @@
+//
+// Custom Header(used by Light Sidebar layout only)
+//
+
+[data-kt-app-layout="light-sidebar"] {
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ .app-header-menu {
+ .menu {
+ // Menu root item
+ > .menu-item {
+ @include menu-link-here-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-app-sidebar-light-header-menu-link-bg-color-active),
+ $all-links: false
+ );
+
+ @include menu-link-active-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-app-sidebar-light-header-menu-link-bg-color-active),
+ $all-links: false
+ );
+ }
+ }
+ }
+ }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ [data-kt-app-layout="light-sidebar"]:not([data-kt-app-header-fixed="true"]) {
+ .app-header {
+ background-color: transparent;
+ box-shadow: none;
+ border-bottom: 1px solid var(--kt-app-sidebar-light-separator-color);
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ [data-kt-app-layout="light-sidebar"]:not([data-kt-app-header-fixed-mobile="true"]) {
+ .app-header {
+ background-color: transparent;
+ box-shadow: none;
+ border-bottom: 1px solid var(--kt-app-sidebar-light-separator-color);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/layout/header/_header.scss b/src/_metronic/assets/sass/layout/header/_header.scss
new file mode 100644
index 0000000..693134d
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/header/_header.scss
@@ -0,0 +1,104 @@
+//
+// Header
+//
+
+// General mode
+.app-header-menu {
+ .menu {
+ .menu-item {
+ @include menu-link-default-state(
+ $title-color: var(--kt-gray-700),
+ $icon-color: var(--kt-gray-500),
+ $bullet-color: var(--kt-gray-500),
+ $arrow-color: var(--kt-gray-500),
+ $bg-color: null,
+ );
+
+ @include menu-link-hover-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-menu-link-bg-color-active)
+ );
+
+ @include menu-link-show-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: null,
+ );
+
+ @include menu-link-here-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-menu-link-bg-color-active)
+ );
+
+ @include menu-link-active-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-menu-link-bg-color-active)
+ );
+ }
+ }
+
+ .menu-extended {
+ --kt-menu-link-bg-color-active: rgba(var(--kt-gray-100-rgb), 0.7);
+ --kt-menu-link-bg-color-hover: rgba(var(--kt-gray-100-rgb), 0.7);
+
+
+ .menu-custom-icon {
+ background-color: var(--kt-gray-100);
+ }
+
+ .menu-link {
+ &.active,
+ &:hover {
+ .menu-custom-icon {
+ background-color: var(--kt-gray-200);
+ }
+ }
+ }
+ }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-header-menu {
+ .menu {
+ // Menu root item
+ > .menu-item {
+ margin-right: 0.5rem;
+
+ > .menu-link {
+ padding-top: 0.775rem;
+ padding-bottom: 0.775rem;
+ font-weight: $font-weight-semibold;
+ }
+
+ @include menu-link-here-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-app-header-base-menu-link-bg-color-active)
+ );
+ }
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-header {
+ .page-title {
+ display: none !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/layout/sidebar/_sidebar-dark.scss b/src/_metronic/assets/sass/layout/sidebar/_sidebar-dark.scss
new file mode 100644
index 0000000..360a232
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/sidebar/_sidebar-dark.scss
@@ -0,0 +1,79 @@
+//
+// Dark Sidebar(used by Dark Sidebar layout only)
+//
+
+[data-kt-app-layout="dark-sidebar"] {
+ .app-sidebar {
+ background-color: $app-sidebar-dark-bg-color;
+ border-right: 0 !important;
+
+ .hover-scroll-overlay-y {
+ @include scrollbar-color($app-sidebar-dark-scrollbar-color, $app-sidebar-dark-scrollbar-color-hover);
+ }
+
+ .app-sidebar-logo {
+ border-bottom: 1px dashed $app-sidebar-dark-separator-color;
+ }
+
+ .btn-custom {
+ @include button-custom-variant(
+ $color:#B5B5C3,
+ $icon-color: #B5B5C3,
+ $border-color: null,
+ $bg-color: rgba(63, 66, 84, 0.35),
+ $color-active: #B5B5C3,
+ $icon-color-active: null,
+ $border-color-active: null,
+ $bg-color-active: rgba(63, 66, 84, 0.35)
+ );
+ }
+
+ .menu {
+ .menu-item {
+ .menu-heading {
+ color: $app-sidebar-dark-menu-heading-color !important;
+ }
+
+ @include menu-link-default-state(
+ $title-color: #9D9DA6,
+ $icon-color:#C5C5D8,
+ $bullet-color:#787887,
+ $arrow-color: #787887,
+ $bg-color: null
+ );
+
+ @include menu-link-hover-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: null
+ );
+
+ @include menu-link-here-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: null
+ );
+
+ @include menu-link-show-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: null
+ );
+
+ @include menu-link-active-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: $app-sidebar-dark-menu-link-bg-color-active
+ );
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/layout/sidebar/_sidebar-light.scss b/src/_metronic/assets/sass/layout/sidebar/_sidebar-light.scss
new file mode 100644
index 0000000..ab0bd0e
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/sidebar/_sidebar-light.scss
@@ -0,0 +1,76 @@
+//
+// Light Sidebar(used by Light Sidebar layout only)
+//
+
+[data-kt-app-layout="light-sidebar"] {
+ .app-sidebar {
+ background-color: var(--kt-app-sidebar-light-bg-color);
+ border-right: 0 !important;
+
+ .hover-scroll-overlay-y {
+ @include scrollbar-color(var(--kt-app-sidebar-light-scrollbar-color), var(--kt-app-sidebar-light-scrollbar-color-hover));
+ }
+
+ .app-sidebar-logo {
+ border-bottom: 1px solid var(--kt-app-sidebar-light-separator-color);
+ }
+
+ .menu {
+ font-weight: $font-weight-semibold;
+
+ .menu-item {
+ .menu-heading {
+ color: var(--kt-app-sidebar-light-menu-heading-color) !important;
+ }
+
+ @include menu-link-default-state(
+ $title-color: var(--kt-gray-700),
+ $icon-color: var(--kt-gray-500),
+ $bullet-color: var(--kt-gray-500),
+ $arrow-color: var(--kt-gray-500),
+ $bg-color: null
+ );
+
+ @include menu-link-hover-state(
+ $title-color: var(--kt-gray-900),
+ $icon-color: var(--kt-gray-700),
+ $bullet-color: var(--kt-gray-700),
+ $arrow-color: var(--kt-gray-700),
+ $bg-color: null
+ );
+
+ @include menu-link-show-state(
+ $title-color: var(--kt-gray-900),
+ $icon-color: var(--kt-gray-700),
+ $bullet-color: var(--kt-gray-700),
+ $arrow-color: var(--kt-gray-700),
+ $bg-color: null
+ );
+
+ @include menu-link-here-state(
+ $title-color: var(--kt-gray-900),
+ $icon-color: var(--kt-gray-700),
+ $bullet-color: var(--kt-gray-700),
+ $arrow-color: var(--kt-gray-700),
+ $bg-color: null
+ );
+
+ @include menu-link-active-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-app-sidebar-light-menu-link-bg-color-active)
+ );
+ }
+ }
+ }
+}
+
+[data-kt-app-layout="light-sidebar"][data-kt-app-header-fixed="true"] {
+ .app-sidebar {
+ .app-sidebar-logo {
+ border-bottom: 1px dashed var(--kt-app-sidebar-light-separator-color);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/layout/sidebar/_sidebar-minimize.scss b/src/_metronic/assets/sass/layout/sidebar/_sidebar-minimize.scss
new file mode 100644
index 0000000..99d3481
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/sidebar/_sidebar-minimize.scss
@@ -0,0 +1,64 @@
+//
+// Sidebar Minimize
+//
+
+.app-sidebar-logo-minimize {
+ display: none;
+}
+
+// Sidebar footer
+.app-sidebar-footer {
+ .btn-custom {
+ .btn-icon {
+ display: none;
+ }
+ }
+}
+
+// Desktop sidebar minimize mode
+@include app-layout-minimize(app-sidebar) {
+ .app-sidebar-logo {
+ .app-sidebar-logo-default {
+ display: none;
+ }
+
+ .app-sidebar-logo-minimize {
+ display: inline-block;
+ }
+ }
+
+ .app-sidebar-wrapper {
+ width: var(--kt-app-sidebar-width-actual);
+ }
+
+ .app-sidebar-menu {
+ .menu-content,
+ .menu-title {
+ opacity: 0;
+ @include app-layout-transition(opacity);
+ }
+
+ .menu-item.show > .menu-sub {
+ height: 0;
+ overflow: hidden;
+ @include app-layout-transition(height);
+ }
+ }
+
+ .app-sidebar-footer {
+ .btn-custom {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+
+ .btn-label {
+ width: 0;
+ display: none;
+ }
+
+ .btn-icon {
+ width: auto;
+ display: block;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/layout/sidebar/_sidebar.scss b/src/_metronic/assets/sass/layout/sidebar/_sidebar.scss
new file mode 100644
index 0000000..481890e
--- /dev/null
+++ b/src/_metronic/assets/sass/layout/sidebar/_sidebar.scss
@@ -0,0 +1,51 @@
+//
+// Sidebar
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-sidebar-toggle {
+ box-shadow: var(--kt-app-sidebar-base-toggle-btn-box-shadow) !important;
+ background-color: var(--kt-app-sidebar-base-toggle-btn-bg-color) !important;
+
+ .active .svg-icon {
+ transform: rotateZ(0deg) !important;
+ }
+ }
+
+ [dir="rtl"] {
+ .app-sidebar-toggle {
+ .svg-icon {
+ transform: rotateZ(180deg);
+ }
+
+ &.active .svg-icon {
+ transform: rotateZ(0deg) !important;
+ }
+ }
+ }
+
+ .app-sidebar-logo {
+ height: var(--kt-app-header-height);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ flex-shrink: 0;
+ }
+
+ .app-sidebar-menu {
+ .menu {
+ & > .menu-item {
+ margin-left: 0.115rem;
+ }
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-sidebar-logo {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/_metronic/assets/sass/plugins.scss b/src/_metronic/assets/sass/plugins.scss
new file mode 100644
index 0000000..e25c213
--- /dev/null
+++ b/src/_metronic/assets/sass/plugins.scss
@@ -0,0 +1,13 @@
+//
+// Vendors customization
+//
+
+////////////////////////////////////////////////////////////////
+///////////// DO NOT MODIFY BELOW INCLUDE ORDER ////////////////
+////////////////////////////////////////////////////////////////
+
+// Initialize
+@import "init";
+
+// Plugins
+@import "./core/vendors/plugins/plugins";
diff --git a/src/_metronic/assets/sass/style.react.scss b/src/_metronic/assets/sass/style.react.scss
new file mode 100644
index 0000000..67306fc
--- /dev/null
+++ b/src/_metronic/assets/sass/style.react.scss
@@ -0,0 +1,7 @@
+// React vendors
+@import '~socicon/css/socicon.css';
+@import '~@fortawesome/fontawesome-free/css/all.min.css';
+@import '~line-awesome/dist/line-awesome/css/line-awesome.css';
+@import '~prism-themes/themes/prism-shades-of-purple.css';
+@import '~bootstrap-icons/font/bootstrap-icons.css';
+@import '~animate.css/animate.css';
diff --git a/src/_metronic/assets/sass/style.scss b/src/_metronic/assets/sass/style.scss
new file mode 100644
index 0000000..ae464dd
--- /dev/null
+++ b/src/_metronic/assets/sass/style.scss
@@ -0,0 +1,14 @@
+//
+// Theme style
+//
+
+// Initialize
+@import "init";
+
+// Components
+@import "./core/components/components";
+@import "components/components";
+
+// Layout
+@import "./core/layout/base/layout";
+@import "layout/layout";
\ No newline at end of file
diff --git a/src/_metronic/assets/ts/_utils/DomHelpers.ts b/src/_metronic/assets/ts/_utils/DomHelpers.ts
new file mode 100644
index 0000000..a98a203
--- /dev/null
+++ b/src/_metronic/assets/ts/_utils/DomHelpers.ts
@@ -0,0 +1,478 @@
+import {OffsetModel} from './models/OffsetModel'
+import {ViewPortModel} from './models/ViewPortModel'
+import {ElementStyleUtil} from './_ElementStyleUtil'
+import {DataUtil} from './_DataUtil'
+import {ElementAnimateUtil} from './ElementAnimateUtil'
+import {getObjectPropertyValueByKey, toJSON} from './_TypesHelpers'
+
+function getCSS(el: HTMLElement, styleProp: string) {
+ const defaultView = (el.ownerDocument || document).defaultView
+
+ if (!defaultView) {
+ return ''
+ }
+
+ // sanitize property name to css notation
+ // (hyphen separated words eg. font-Size)
+ styleProp = styleProp.replace(/([A-Z])/g, '-$1').toLowerCase()
+
+ return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp)
+}
+
+function getCSSVariableValue(variableName: string) {
+ let hex = getComputedStyle(document.documentElement).getPropertyValue(variableName)
+ if (hex && hex.length > 0) {
+ hex = hex.trim()
+ }
+
+ return hex
+}
+
+function getElementActualCss(el: HTMLElement, prop: any, cache: boolean) {
+ let css = ''
+
+ if (!el.getAttribute('kt-hidden-' + prop) || cache === false) {
+ let value
+
+ // the element is hidden so:
+ // making the el block so we can meassure its height but still be hidden
+ css = el.style.cssText
+ el.style.cssText = 'position: absolute; visibility: hidden; display: block;'
+
+ if (prop === 'width') {
+ value = el.offsetWidth
+ } else if (prop === 'height') {
+ value = el.offsetHeight
+ }
+
+ el.style.cssText = css
+
+ // store it in cache
+ if (value !== undefined) {
+ el.setAttribute('kt-hidden-' + prop, value.toString())
+ return parseFloat(value.toString())
+ }
+ return 0
+ } else {
+ // store it in cache
+ const attributeValue = el.getAttribute('kt-hidden-' + prop)
+ if (attributeValue || attributeValue === '0') {
+ return parseFloat(attributeValue)
+ }
+ }
+}
+
+function getElementActualHeight(el: HTMLElement) {
+ return getElementActualCss(el, 'height', false)
+}
+
+function getElementActualWidth(el: HTMLElement, cache?: boolean) {
+ return getElementActualCss(el, 'width', false)
+}
+
+function getElementIndex(element: HTMLElement) {
+ if (element.parentNode) {
+ const c = element.parentNode.children
+ for (let i = 0; i < c.length; i++) {
+ if (c[i] === element) return i
+ }
+ }
+ return -1
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+function getElementMatches(element: HTMLElement, selector: string) {
+ const p = Element.prototype
+ const f = p.matches || p.webkitMatchesSelector
+
+ if (element && element.tagName) {
+ return f.call(element, selector)
+ } else {
+ return false
+ }
+}
+
+function getElementOffset(el: HTMLElement): OffsetModel {
+ // Return zeros for disconnected and hidden (display: none) elements (gh-2310)
+ // Support: IE <=11 only
+ // Running getBoundingClientRect on a
+ // disconnected node in IE throws an error
+ if (!el.getClientRects().length) {
+ return {top: 0, left: 0}
+ }
+
+ // Get document-relative position by adding viewport scroll to viewport-relative gBCR
+ const rect = el.getBoundingClientRect()
+ const win = el.ownerDocument.defaultView
+ if (win) {
+ return {
+ top: rect.top + win.pageYOffset,
+ left: rect.left + win.pageXOffset,
+ }
+ }
+
+ return rect
+}
+
+function getElementParents(element: Element, selector: string) {
+ // Element.matches() polyfill
+ if (!Element.prototype.matches) {
+ Element.prototype.matches = function (s) {
+ const matches = (document || this.ownerDocument).querySelectorAll(s)
+ let i = matches.length
+ while (--i >= 0 && matches.item(i) !== this) {}
+ return i > -1
+ }
+ }
+
+ // Set up a parent array
+ const parents: Array = []
+
+ let el: Element | null = element
+
+ // Push each parent element to the array
+ for (; el && el !== document.body; el = el.parentElement) {
+ if (selector) {
+ if (el.matches(selector)) {
+ parents.push(el)
+ }
+ continue
+ }
+ parents.push(el)
+ }
+
+ // Return our parent array
+ return parents
+}
+
+function getHighestZindex(el: HTMLElement) {
+ let bufferNode: Node | null = el as Node
+ let buffer = el
+ while (bufferNode && bufferNode !== document) {
+ // Ignore z-index if position is set to a value where z-index is ignored by the browser
+ // This makes behavior of this function consistent across browsers
+ // WebKit always returns auto if the element is positioned
+ const position = buffer.style.getPropertyValue('position')
+ if (position === 'absolute' || position === 'relative' || position === 'fixed') {
+ // IE returns 0 when zIndex is not specified
+ // other browsers return a string
+ // we ignore the case of nested elements with an explicit value of 0
+ //
+ const value = parseInt(buffer.style.getPropertyValue('z-index'))
+ if (!isNaN(value) && value !== 0) {
+ return value
+ }
+ }
+
+ bufferNode = bufferNode.parentNode
+ buffer = bufferNode as HTMLElement
+ }
+ return null
+}
+
+function getScrollTop(): number {
+ return (document.scrollingElement || document.documentElement).scrollTop
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth
+function getViewPort(): ViewPortModel {
+ return {
+ width: window.innerWidth,
+ height: window.innerHeight,
+ }
+}
+
+function insertAfterElement(el: HTMLElement, referenceNode: HTMLElement) {
+ return referenceNode.parentNode?.insertBefore(el, referenceNode.nextSibling)
+}
+
+function isElementHasClasses(element: HTMLElement, classesStr: string): boolean {
+ const classes = classesStr.split(' ')
+ for (let i = 0; i < classes.length; i++) {
+ if (!element.classList.contains(classes[i])) {
+ return false
+ }
+ }
+
+ return true
+}
+
+function isVisibleElement(element: HTMLElement): boolean {
+ return !(element.offsetWidth === 0 && element.offsetHeight === 0)
+}
+
+// Throttle function: Input as function which needs to be throttled and delay is the time interval in milliseconds
+function throttle(timer: number | undefined, func: Function, delay?: number) {
+ // If setTimeout is already scheduled, no need to do anything
+ if (timer) {
+ return
+ }
+
+ // Schedule a setTimeout after delay seconds
+ timer = window.setTimeout(function () {
+ func()
+
+ // Once setTimeout function execution is finished, timerId = undefined so that in
+ // the next scroll event function execution can be scheduled by the setTimeout
+ timer = undefined
+ }, delay)
+}
+
+function getElementChildren(element: HTMLElement, selector: string): Array | null {
+ if (!element || !element.childNodes) {
+ return null
+ }
+
+ const result: Array = []
+ for (let i = 0; i < element.childNodes.length; i++) {
+ const child = element.childNodes[i]
+ // child.nodeType == 1 => Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
+ if (child.nodeType === 1 && getElementMatches(child as HTMLElement, selector)) {
+ result.push(child as HTMLElement)
+ }
+ }
+
+ return result
+}
+
+function getElementChild(element: HTMLElement, selector: string): HTMLElement | null {
+ const children = getElementChildren(element, selector)
+ return children ? children[0] : null
+}
+
+function isMobileDevice(): boolean {
+ let test = getViewPort().width < +getBreakpoint('lg') ? true : false
+
+ if (test === false) {
+ // For use within normal web clients
+ test = navigator.userAgent.match(/iPad/i) != null
+ }
+
+ return test
+}
+
+function slide(el: HTMLElement, dir: string, speed: number, callback: any) {
+ if (
+ !el ||
+ (dir === 'up' && isVisibleElement(el) === false) ||
+ (dir === 'down' && isVisibleElement(el) === true)
+ ) {
+ return
+ }
+
+ speed = speed ? speed : 600
+ let calcHeight = getElementActualHeight(el)
+ let calcPaddingTop: number = 0
+ let calcPaddingBottom: number = 0
+
+ if (ElementStyleUtil.get(el, 'padding-top') && DataUtil.get(el, 'slide-padding-top') !== true) {
+ DataUtil.set(el, 'slide-padding-top', ElementStyleUtil.get(el, 'padding-top'))
+ }
+
+ if (
+ ElementStyleUtil.get(el, 'padding-bottom') &&
+ DataUtil.has(el, 'slide-padding-bottom') !== true
+ ) {
+ DataUtil.set(el, 'slide-padding-bottom', ElementStyleUtil.get(el, 'padding-bottom'))
+ }
+
+ if (DataUtil.has(el, 'slide-padding-top')) {
+ const data = DataUtil.get(el, 'slide-padding-top') as string
+ calcPaddingTop = parseInt(data as string)
+ }
+
+ if (DataUtil.has(el, 'slide-padding-bottom')) {
+ const data = DataUtil.get(el, 'slide-padding-bottom') as string
+ calcPaddingBottom = parseInt(data)
+ }
+
+ if (dir === 'up') {
+ // up
+ el.style.cssText = 'display: block; overflow: hidden;'
+
+ if (calcPaddingTop) {
+ ElementAnimateUtil.animate(0, calcPaddingTop, speed, function (value: number) {
+ el.style.paddingTop = calcPaddingTop - value + 'px'
+ })
+ }
+
+ if (calcPaddingBottom) {
+ ElementAnimateUtil.animate(0, calcPaddingBottom, speed, function (value: number) {
+ el.style.paddingBottom = calcPaddingBottom - value + 'px'
+ })
+ }
+
+ ElementAnimateUtil.animate(
+ 0,
+ calcHeight || 0,
+ speed,
+ function (value: number) {
+ el.style.height = (calcHeight || 0) - value + 'px'
+ },
+ function () {
+ el.style.height = ''
+ el.style.display = 'none'
+
+ if (typeof callback === 'function') {
+ callback()
+ }
+ }
+ )
+ } else if (dir === 'down') {
+ // down
+ el.style.cssText = 'display: block; overflow: hidden;'
+
+ if (calcPaddingTop) {
+ ElementAnimateUtil.animate(
+ 0,
+ calcPaddingTop,
+ speed,
+ function (value: number) {
+ //
+ el.style.paddingTop = value + 'px'
+ },
+ function () {
+ el.style.paddingTop = ''
+ }
+ )
+ }
+
+ if (calcPaddingBottom) {
+ ElementAnimateUtil.animate(
+ 0,
+ calcPaddingBottom,
+ speed,
+ function (value: number) {
+ el.style.paddingBottom = value + 'px'
+ },
+ function () {
+ el.style.paddingBottom = ''
+ }
+ )
+ }
+
+ ElementAnimateUtil.animate(
+ 0,
+ calcHeight || 0,
+ speed,
+ function (value: number) {
+ el.style.height = value + 'px'
+ },
+ function () {
+ el.style.height = ''
+ el.style.display = ''
+ el.style.overflow = ''
+
+ if (typeof callback === 'function') {
+ callback()
+ }
+ }
+ )
+ }
+}
+
+function slideUp(el: HTMLElement, speed: number, callback: any) {
+ slide(el, 'up', speed, callback)
+}
+
+function slideDown(el: HTMLElement, speed: number, callback: any) {
+ slide(el, 'down', speed, callback)
+}
+
+function getBreakpoint(breakpoint: string) {
+ let value: number | string = getCSSVariableValue('--kt-' + breakpoint)
+ if (value) {
+ value = parseInt(value.trim())
+ }
+
+ return value
+}
+
+function getAttributeValueByBreakpoint(incomingAttr: string): string | JSON {
+ let value = toJSON(incomingAttr)
+ if (typeof value !== 'object') {
+ return incomingAttr
+ }
+
+ const width = getViewPort().width
+ let resultKey
+ let resultBreakpoint = -1
+ let breakpoint
+
+ for (let key in value) {
+ if (key === 'default') {
+ breakpoint = 0
+ } else {
+ breakpoint = getBreakpoint(key) ? +getBreakpoint(key) : parseInt(key)
+ }
+
+ if (breakpoint <= width && breakpoint > resultBreakpoint) {
+ resultKey = key
+ resultBreakpoint = breakpoint
+ }
+ }
+
+ return resultKey ? getObjectPropertyValueByKey(value, resultKey) : value
+}
+
+function colorLighten(color: string, amount: number) {
+ const addLight = (_color: string, _amount: number) => {
+ const cc = parseInt(_color, 16) + _amount
+ const cNum = cc > 255 ? 255 : cc
+ const c = cNum.toString(16).length > 1 ? cNum.toString(16) : `0${cNum.toString(16)}`
+ return c
+ }
+
+ color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+ amount = parseInt(((255 * amount) / 100).toString())
+ return (color = `#${addLight(color.substring(0, 2), amount)}${addLight(
+ color.substring(2, 4),
+ amount
+ )}${addLight(color.substring(4, 6), amount)}`)
+}
+
+function colorDarken(color: string, amount: number) {
+ const subtractLight = (_color: string, _amount: number) => {
+ const cc = parseInt(color, 16) - amount
+ const cNum = cc < 0 ? 0 : cc
+ const c = cNum.toString(16).length > 1 ? cNum.toString(16) : `0${cNum.toString(16)}`
+ return c
+ }
+
+ color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+ amount = parseInt(((255 * amount) / 100).toString())
+
+ return (color = `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
+ color.substring(2, 4),
+ amount
+ )}${subtractLight(color.substring(4, 6), amount)}`)
+}
+
+export {
+ getBreakpoint,
+ getCSS,
+ getCSSVariableValue,
+ getElementActualCss,
+ getElementActualHeight,
+ getElementActualWidth,
+ getElementIndex,
+ getElementMatches,
+ getElementOffset,
+ getElementParents,
+ getHighestZindex,
+ getScrollTop,
+ getViewPort,
+ insertAfterElement,
+ isElementHasClasses,
+ isVisibleElement,
+ throttle,
+ getElementChildren,
+ getElementChild,
+ isMobileDevice,
+ slide,
+ slideUp,
+ slideDown,
+ getAttributeValueByBreakpoint,
+ colorLighten,
+ colorDarken,
+}
diff --git a/src/_metronic/assets/ts/_utils/ElementAnimateUtil.ts b/src/_metronic/assets/ts/_utils/ElementAnimateUtil.ts
new file mode 100644
index 0000000..20a2339
--- /dev/null
+++ b/src/_metronic/assets/ts/_utils/ElementAnimateUtil.ts
@@ -0,0 +1,111 @@
+import {DOMEventHandlerUtil} from './_DOMEventHandlerUtil'
+import {ElementStyleUtil} from './_ElementStyleUtil'
+import {getElementOffset} from './DomHelpers'
+
+export class ElementAnimateUtil {
+ public static animate(
+ from: number,
+ to: number,
+ duration: number,
+ update: Function,
+ complete?: Function
+ ) {
+ /**
+ * TinyAnimate.easings
+ * Adapted from jQuery Easing
+ */
+ const easings = {
+ linear: function (t: number, b: number, c: number, d: number) {
+ return (c * t) / d + b
+ },
+ }
+
+ // Create mock done() function if necessary
+ if (!complete) {
+ complete = function () {}
+ }
+
+ // Animation loop
+ // let canceled = false;
+ const change = to - from
+
+ function loop(timestamp: number) {
+ var time = (timestamp || +new Date()) - start
+
+ if (time >= 0) {
+ update(easings.linear(time, from, change, duration))
+ }
+ if (time >= 0 && time >= duration) {
+ update(to)
+ if (complete) {
+ complete()
+ }
+ } else {
+ window.requestAnimationFrame(loop)
+ }
+ }
+
+ update(from)
+
+ // Start animation loop
+ const start =
+ window.performance && window.performance.now ? window.performance.now() : +new Date()
+
+ window.requestAnimationFrame(loop)
+ }
+
+ public static animateClass(
+ element: HTMLElement,
+ animationName: string,
+ callBack?: Function
+ ): void {
+ const animateClasses = animationName.split(' ')
+ animateClasses.forEach((cssClass) => element.classList.add(cssClass))
+ DOMEventHandlerUtil.one(element, 'animationend', function () {
+ animateClasses.forEach((cssClass) => element.classList.remove(cssClass))
+ })
+
+ if (callBack) {
+ DOMEventHandlerUtil.one(element, 'animationend', callBack)
+ }
+ }
+
+ public static transitionEnd(element: HTMLElement, callBack: Function) {
+ DOMEventHandlerUtil.one(element, 'transitionend', callBack)
+ }
+
+ public static animationEnd(element: HTMLElement, callBack: Function) {
+ DOMEventHandlerUtil.one(element, 'animationend', callBack)
+ }
+
+ public static animationDelay(element: HTMLElement, value: string) {
+ ElementStyleUtil.set(element, 'animation-delay', value)
+ }
+
+ public static animationDuration(element: HTMLElement, value: string) {
+ ElementStyleUtil.set(element, 'animation-duration', value)
+ }
+
+ public static scrollTo(element: HTMLElement | null, offset: number, duration: number = 500) {
+ let targetPos = element ? getElementOffset(element).top : 0
+ let scrollPos =
+ window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+
+ if (offset) {
+ scrollPos += offset
+ targetPos = targetPos - offset
+ }
+
+ const from = scrollPos
+ const to = targetPos
+
+ ElementAnimateUtil.animate(from, to, duration, function (value: number) {
+ document.documentElement.scrollTop = value
+ // document.body.parentNode.scrollTop = value;
+ document.body.scrollTop = value
+ }) //, easing, done
+ }
+ public static scrollTop(offset: number, duration: number) {
+ ElementAnimateUtil.scrollTo(null, offset, duration)
+ }
+}
diff --git a/src/_metronic/assets/ts/_utils/EventHandlerUtil.ts b/src/_metronic/assets/ts/_utils/EventHandlerUtil.ts
new file mode 100644
index 0000000..878a793
--- /dev/null
+++ b/src/_metronic/assets/ts/_utils/EventHandlerUtil.ts
@@ -0,0 +1,144 @@
+import {DataUtil} from './_DataUtil'
+import {getUniqueIdWithPrefix} from './_TypesHelpers'
+
+export interface EventMeta {
+ name: string
+ callback: Function
+ one: boolean
+ fired: boolean
+}
+
+export class EventHandlerUtil {
+ static store: {
+ [name: string]: {
+ [handlerId: string]: EventMeta
+ }
+ } = {}
+
+ private static setEventMetasByName(
+ name: string,
+ handlers: {
+ [handlerId: string]: EventMeta
+ }
+ ): void {
+ EventHandlerUtil.store[name] = handlers
+ }
+
+ private static getEventMetaByName(name: string):
+ | {
+ [handlerId: string]: EventMeta
+ }
+ | undefined {
+ return EventHandlerUtil.store[name]
+ }
+
+ private static setEventMetaByNameAndHandlerId(
+ name: string,
+ handlerId: string,
+ meta: EventMeta
+ ): void {
+ if (EventHandlerUtil.store[name]) {
+ EventHandlerUtil.store[name][handlerId] = meta
+ return
+ }
+ EventHandlerUtil.store[name] = {}
+ EventHandlerUtil.store[name][handlerId] = meta
+ }
+
+ private static getEventMetaByHandlerId(name: string, handlerId: string): EventMeta | undefined {
+ const handlersIds = EventHandlerUtil.store[name]
+ if (!handlersIds) {
+ return
+ }
+ return handlersIds[handlerId]
+ }
+
+ private static setFiredByNameAndHandlerId(name: string, handerId: string, fired: boolean): void {
+ const meta = EventHandlerUtil.getEventMetaByHandlerId(name, handerId)
+ if (!meta) {
+ return
+ }
+
+ meta.fired = fired
+ EventHandlerUtil.setEventMetaByNameAndHandlerId(name, handerId, meta)
+ }
+
+ private static addEvent(
+ element: HTMLElement,
+ name: string,
+ callback: Function,
+ one: boolean = false
+ ): string {
+ const handlerId = getUniqueIdWithPrefix('event')
+ const data = DataUtil.get(element, name)
+ const handlersIds = data ? (data as string[]) : []
+ handlersIds.push(handlerId)
+
+ DataUtil.set(element, name, handlersIds)
+
+ const meta: EventMeta = {
+ name: name,
+ callback: callback,
+ one: one,
+ fired: false,
+ }
+
+ EventHandlerUtil.setEventMetaByNameAndHandlerId(name, handlerId, meta)
+ return handlerId
+ }
+
+ private static removeEvent(element: HTMLElement, name: string, handerId: string) {
+ DataUtil.removeOne(element, name, handerId)
+ const handlersIds = EventHandlerUtil.store[name]
+ if (handlersIds) {
+ return
+ }
+
+ delete EventHandlerUtil.store[name][handerId]
+ }
+
+ public static trigger(element: HTMLElement, name: string, target?: any, e?: Event): boolean {
+ let returnValue = true
+ if (!DataUtil.has(element, name)) {
+ return returnValue
+ }
+
+ let eventValue
+ let handlerId
+ const data = DataUtil.get(element, name)
+ const handlersIds = data ? (data as string[]) : []
+ for (let i = 0; i < handlersIds.length; i++) {
+ handlerId = handlersIds[i]
+ if (EventHandlerUtil.store[name] && EventHandlerUtil.store[name][handlerId]) {
+ const handler = EventHandlerUtil.store[name][handlerId]
+ if (handler.name === name) {
+ if (handler.one) {
+ if (handler.fired) {
+ EventHandlerUtil.store[name][handlerId].fired = true
+ eventValue = handler.callback.call(this, target)
+ }
+ } else {
+ eventValue = handler.callback.call(this, target)
+ }
+
+ if (eventValue === false) {
+ returnValue = false
+ }
+ }
+ }
+ }
+ return returnValue
+ }
+
+ public static on = function (element: HTMLElement, name: string, callBack: Function): void {
+ EventHandlerUtil.addEvent(element, name, callBack, false)
+ }
+
+ public static one(element: HTMLElement, name: string, callBack: Function): void {
+ EventHandlerUtil.addEvent(element, name, callBack, true)
+ }
+
+ public static off(element: HTMLElement, name: string, handerId: string): void {
+ EventHandlerUtil.removeEvent(element, name, handerId)
+ }
+}
diff --git a/src/_metronic/assets/ts/_utils/_DOMEventHandlerUtil.ts b/src/_metronic/assets/ts/_utils/_DOMEventHandlerUtil.ts
new file mode 100644
index 0000000..568f812
--- /dev/null
+++ b/src/_metronic/assets/ts/_utils/_DOMEventHandlerUtil.ts
@@ -0,0 +1,60 @@
+import {getUniqueIdWithPrefix} from './_TypesHelpers'
+
+export class DOMEventHandlerUtil {
+ public static store = new Map()
+
+ public static on(
+ element: HTMLElement,
+ selector: string,
+ eventName: string,
+ callBack: any
+ ): string {
+ const eventId = getUniqueIdWithPrefix('DOMEvent')
+ DOMEventHandlerUtil.store.set(eventId, (e: Event) => {
+ const targets = element.querySelectorAll(selector)
+ let target: HTMLElement | null = e.target as HTMLElement
+ while (target && target !== element) {
+ for (let i = 0; i < targets.length; i++) {
+ if (target === targets[i]) {
+ callBack.call(target, e)
+ }
+ }
+
+ if (target.parentElement) {
+ target = target.parentElement
+ } else {
+ target = null
+ }
+ }
+ })
+ element.addEventListener(eventName, DOMEventHandlerUtil.store.get(eventId))
+ return eventId
+ }
+
+ public static off(element: HTMLElement, eventName: string, eventId: string): void {
+ const funcFromStore = DOMEventHandlerUtil.store.get(eventId)
+ if (!funcFromStore) {
+ return
+ }
+
+ element.removeEventListener(eventName, funcFromStore)
+ DOMEventHandlerUtil.store.delete(eventId)
+ }
+
+ public static one(element: HTMLElement, eventName: string, callBack: Function): void {
+ element.addEventListener(eventName, function calee(e) {
+ // remove event
+ if (e.target && e.target.removeEventListener) {
+ e.target.removeEventListener(e.type, calee)
+ }
+
+ if (element && e && e.currentTarget) {
+ // if (element && element.removeEventListener && e && e.currentTarget) {
+ e.currentTarget.removeEventListener(e.type, calee)
+ }
+
+ // call hander
+ return callBack(e)
+ })
+ }
+}
diff --git a/src/_metronic/assets/ts/_utils/_DataUtil.ts b/src/_metronic/assets/ts/_utils/_DataUtil.ts
new file mode 100644
index 0000000..14e9cae
--- /dev/null
+++ b/src/_metronic/assets/ts/_utils/_DataUtil.ts
@@ -0,0 +1,72 @@
+export class DataUtil {
+ static store: Map> = new Map()
+
+ public static set(instance: HTMLElement | undefined, key: string, data: unknown): void {
+ if (!instance) {
+ return
+ }
+
+ const instanceData = DataUtil.store.get(instance)
+ if (!instanceData) {
+ const newMap = new Map().set(key, data)
+ DataUtil.store.set(instance, newMap)
+ return
+ }
+
+ instanceData.set(key, data)
+ }
+
+ public static get(instance: HTMLElement, key: string): unknown | undefined {
+ const instanceData = DataUtil.store.get(instance)
+ if (!instanceData) {
+ return
+ }
+
+ return instanceData.get(key)
+ }
+
+ public static remove(instance: HTMLElement, key: string): void {
+ const instanceData = DataUtil.store.get(instance)
+ if (!instanceData) {
+ return
+ }
+
+ instanceData.delete(key)
+ }
+
+ public static removeOne(instance: HTMLElement, key: string, eventId: string) {
+ const instanceData = DataUtil.store.get(instance)
+ if (!instanceData) {
+ return
+ }
+
+ const eventsIds = instanceData.get(key)
+ if (!eventsIds) {
+ return
+ }
+
+ const updateEventsIds = (eventsIds as string[]).filter((f) => f !== eventId)
+ DataUtil.set(instance, key, updateEventsIds)
+ }
+
+ public static has(instance: HTMLElement, key: string): boolean {
+ const instanceData = DataUtil.store.get(instance)
+ if (instanceData) {
+ return instanceData.has(key)
+ }
+
+ return false
+ }
+
+ public static getAllInstancesByKey(key: string) {
+ const result: any[] = []
+ DataUtil.store.forEach((val) => {
+ val.forEach((v, k) => {
+ if (k === key) {
+ result.push(v)
+ }
+ })
+ })
+ return result
+ }
+}
diff --git a/src/_metronic/assets/ts/_utils/_ElementStyleUtil.ts b/src/_metronic/assets/ts/_utils/_ElementStyleUtil.ts
new file mode 100644
index 0000000..b0ddda4
--- /dev/null
+++ b/src/_metronic/assets/ts/_utils/_ElementStyleUtil.ts
@@ -0,0 +1,17 @@
+export class ElementStyleUtil {
+ public static set(element: HTMLElement, property: string, value?: any, important?: boolean) {
+ if (important) {
+ element.style.setProperty(property, value, 'important')
+ } else {
+ element.style.setProperty(property, value)
+ }
+ }
+
+ public static get(element: HTMLElement, attributeName: string) {
+ return element.style.getPropertyValue(attributeName)
+ }
+
+ public static remove(element: HTMLElement, attibuteName: string) {
+ element.style.removeProperty(attibuteName)
+ }
+}
diff --git a/src/_metronic/assets/ts/_utils/_TypesHelpers.ts b/src/_metronic/assets/ts/_utils/_TypesHelpers.ts
new file mode 100644
index 0000000..5c32269
--- /dev/null
+++ b/src/_metronic/assets/ts/_utils/_TypesHelpers.ts
@@ -0,0 +1,54 @@
+function getObjectPropertyValueByKey(obj: any, key: string): any | undefined {
+ const map = new Map(Object.entries(obj))
+ if (obj.hasOwnProperty(key) && map) {
+ return map.get(key)
+ }
+}
+
+/**
+ * Generates unique ID for give prefix.
+ * @param {string} prefix Prefix for generated ID
+ * @returns {boolean}
+ */
+function getUniqueIdWithPrefix(prefix: string | undefined): string {
+ const result = Math.floor(Math.random() * new Date().getTime()).toString()
+ if (!prefix) {
+ return result
+ }
+
+ return `${prefix}${result}`
+}
+
+/* eslint-disable no-useless-escape */
+function stringSnakeToCamel(str: string): string {
+ return str.replace(/(\-\w)/g, function (m) {
+ return m[1].toUpperCase()
+ })
+}
+
+function toJSON(value: string | JSON): JSON | undefined {
+ if (typeof value !== 'string') {
+ return value
+ }
+
+ if (!value) {
+ return undefined
+ }
+
+ // ("'" => "\"");
+ const result = value
+ .toString()
+ .split('')
+ .map((el) => (el !== "'" ? el : '"'))
+ .join('')
+ var jsonStr = result.replace(/(\w+:)|(\w+ :)/g, function (matched) {
+ return '"' + matched.substring(0, matched.length - 1) + '":'
+ })
+ try {
+ return JSON.parse(jsonStr)
+ } catch {
+ return undefined
+ }
+}
+
+export {getObjectPropertyValueByKey, getUniqueIdWithPrefix, stringSnakeToCamel, toJSON}
diff --git a/src/_metronic/assets/ts/_utils/index.ts b/src/_metronic/assets/ts/_utils/index.ts
new file mode 100644
index 0000000..02ad68f
--- /dev/null
+++ b/src/_metronic/assets/ts/_utils/index.ts
@@ -0,0 +1,12 @@
+// Types
+export * from './models/OffsetModel'
+export * from './models/ViewPortModel'
+// Helpers
+export * from './DomHelpers'
+export * from './_TypesHelpers'
+// Basic
+export * from './_DataUtil'
+export * from './_DOMEventHandlerUtil'
+export * from './_ElementStyleUtil'
+export * from './ElementAnimateUtil'
+export * from './EventHandlerUtil'
diff --git a/src/_metronic/assets/ts/_utils/models/OffsetModel.ts b/src/_metronic/assets/ts/_utils/models/OffsetModel.ts
new file mode 100644
index 0000000..bea6c4e
--- /dev/null
+++ b/src/_metronic/assets/ts/_utils/models/OffsetModel.ts
@@ -0,0 +1,4 @@
+export interface OffsetModel {
+ top: number
+ left: number
+}
diff --git a/src/_metronic/assets/ts/_utils/models/ViewPortModel.ts b/src/_metronic/assets/ts/_utils/models/ViewPortModel.ts
new file mode 100644
index 0000000..63ee145
--- /dev/null
+++ b/src/_metronic/assets/ts/_utils/models/ViewPortModel.ts
@@ -0,0 +1,4 @@
+export interface ViewPortModel {
+ width: number
+ height: number
+}
diff --git a/src/_metronic/assets/ts/components/MenuComponent.ts b/src/_metronic/assets/ts/components/MenuComponent.ts
new file mode 100644
index 0000000..e27ac0b
--- /dev/null
+++ b/src/_metronic/assets/ts/components/MenuComponent.ts
@@ -0,0 +1,1088 @@
+import {createPopper, VirtualElement} from '@popperjs/core'
+import {
+ getElementChild,
+ getElementParents,
+ getAttributeValueByBreakpoint,
+ getUniqueIdWithPrefix,
+ DataUtil,
+ ElementStyleUtil,
+ EventHandlerUtil,
+ insertAfterElement,
+ slideUp,
+ slideDown,
+ DOMEventHandlerUtil,
+ throttle,
+ getHighestZindex,
+} from '../_utils/index'
+
+export interface MenuOptions {
+ dropdown: {
+ hoverTimeout: number
+ zindex: number
+ }
+ accordion: {
+ slideSpeed: number
+ expand: boolean
+ }
+}
+
+const defaultMenuOptions: MenuOptions = {
+ dropdown: {
+ hoverTimeout: 200,
+ zindex: 105,
+ },
+ accordion: {
+ slideSpeed: 250,
+ expand: false,
+ },
+}
+
+type PopperPlacement =
+ | 'right'
+ | 'auto'
+ | 'auto-start'
+ | 'auto-end'
+ | 'top'
+ | 'bottom'
+ | 'left'
+ | 'top-start'
+ | 'top-end'
+ | 'bottom-start'
+ | 'bottom-end'
+ | 'right-start'
+ | 'right-end'
+ | 'left-start'
+ | 'left-end'
+ | undefined
+
+class MenuComponent {
+ element: HTMLElement
+ options: MenuOptions
+ instanceUid: string
+ triggerElement: HTMLElement | null = null
+
+ constructor(_element: HTMLElement, options: MenuOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultMenuOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('menu')
+ // this.element.setAttribute('data-kt-menu', 'true')
+ this._setTriggerElement()
+ this._update()
+ DataUtil.set(this.element, 'menu', this)
+ return this
+ }
+
+ // Set external trigger element
+ private _setTriggerElement = () => {
+ const target = document.querySelector(
+ `[data-kt-menu-target="#${this.element.getAttribute('id')}"`
+ )
+
+ if (target) {
+ this.triggerElement = target as HTMLElement
+ } else if (this.element.closest('[data-kt-menu-trigger]')) {
+ this.triggerElement = this.element.closest('[data-kt-menu-trigger]') as HTMLElement
+ } else if (
+ this.element.parentNode &&
+ getElementChild(this.element.parentNode as HTMLElement, '[data-kt-menu-trigger]')
+ ) {
+ const child = getElementChild(
+ this.element.parentNode as HTMLElement,
+ '[data-kt-menu-trigger]'
+ )
+ if (child) {
+ this.triggerElement = child
+ }
+ }
+
+ if (this.triggerElement) {
+ DataUtil.set(this.triggerElement, 'menu', this)
+ }
+ }
+
+ // Test if menu has external trigger element
+ private _isTriggerElement = (item: HTMLElement) => {
+ return this.triggerElement === item
+ }
+
+ // Get item option(through html attributes)
+ private _getItemOption = (item: HTMLElement, name: string) => {
+ let value: string | JSON | null | boolean = null
+ if (item && item.hasAttribute('data-kt-menu-' + name)) {
+ const attr = item.getAttribute('data-kt-menu-' + name) || ''
+ value = getAttributeValueByBreakpoint(attr)
+ if (value !== null && String(value) === 'true') {
+ value = true
+ } else if (value !== null && String(value) === 'false') {
+ value = false
+ }
+ }
+ return value
+ }
+
+ // Get item element
+ private _getItemElement = (_element: HTMLElement): HTMLElement | undefined => {
+ // Element is the external trigger element
+ if (this._isTriggerElement(_element)) {
+ return _element
+ }
+
+ // Element has item toggler attribute
+ if (_element.hasAttribute('data-kt-menu-trigger')) {
+ return _element
+ }
+
+ // Element has item DOM reference in it's data storage
+ const itemElement = DataUtil.get(_element, 'item')
+ if (itemElement) {
+ return itemElement as HTMLElement
+ }
+
+ // Item is parent of element
+ const item = _element.closest('.menu-item[data-kt-menu-trigger]')
+ if (item) {
+ return item
+ }
+
+ // Element's parent has item DOM reference in it's data storage
+ const sub = _element.closest('.menu-sub')
+ if (sub) {
+ const subItem = DataUtil.get(sub as HTMLElement, 'item')
+ if (subItem) {
+ return subItem as HTMLElement
+ }
+ }
+ }
+
+ // Get item parent element
+ private _getItemParentElement = (item: HTMLElement) => {
+ const sub = item.closest('.menu-sub')
+ if (!sub) {
+ return null
+ }
+
+ const subItem = DataUtil.get(sub, 'item')
+ if (subItem) {
+ return subItem as HTMLElement
+ }
+
+ const parentItem = sub.closest('.menu-item[data-kt-menu-trigger]')
+ if (sub && parentItem) {
+ return parentItem
+ }
+
+ return null
+ }
+
+ // Get item parent elements
+ private _getItemParentElements = (item: HTMLElement) => {
+ const parents: Array = []
+ let parent: HTMLElement | null
+ let i = 0
+ let buffer: HTMLElement = item
+
+ do {
+ parent = this._getItemParentElement(buffer)
+ if (parent) {
+ parents.push(parent)
+ buffer = parent as HTMLElement
+ }
+
+ i++
+ } while (parent !== null && i < 20)
+
+ if (this.triggerElement) {
+ parents.unshift(this.triggerElement)
+ }
+
+ return parents
+ }
+
+ // Prepare popper config for dropdown(see: https://popper.js.org/docs/v2/)
+ private _getDropdownPopperConfig = (item: HTMLElement) => {
+ // Placement
+ const placementOption = this._getItemOption(item, 'placement')
+ let placement: PopperPlacement = 'right'
+ if (placementOption) {
+ placement = placementOption as PopperPlacement
+ }
+
+ // Flip
+ // const flipValue = this._getItemOption(item, 'flip')
+ // const flip = flipValue ? flipValue.toString().split(',') : []
+
+ // Offset
+ const offsetValue = this._getItemOption(item, 'offset')
+ const offset = offsetValue ? offsetValue.toString().split(',') : []
+
+ // Strategy
+ const strategy: 'absolute' | 'fixed' | undefined =
+ this._getItemOption(item, 'overflow') === true ? 'absolute' : 'fixed'
+
+ return {
+ placement: placement,
+ strategy: strategy,
+ modifiers: [
+ {
+ name: 'offset',
+ options: {
+ offset: offset,
+ },
+ },
+ {
+ name: 'preventOverflow',
+ },
+ {
+ name: 'flip',
+ options: {
+ // altBoundary: true,
+ // fallbackPlacements: flip,
+ flipVariations: false,
+ },
+ },
+ ],
+ }
+ }
+
+ // Get item child element
+ private _getItemChildElement = (item: HTMLElement): HTMLElement | null => {
+ let selector = item
+
+ const subItem = DataUtil.get(item, 'sub')
+ if (subItem) {
+ selector = subItem as HTMLElement
+ }
+
+ if (selector) {
+ //element = selector.querySelector('.show.menu-item[data-kt-menu-trigger]');
+ const element = selector.querySelector('.menu-item[data-kt-menu-trigger]')
+ if (element) {
+ return element
+ }
+ }
+ return null
+ }
+
+ // Get item child elements
+ private _getItemChildElements = (item: HTMLElement) => {
+ const children: Array = []
+ let child: HTMLElement | null
+ let i = 0
+ let buffer = item
+ do {
+ child = this._getItemChildElement(buffer)
+ if (child) {
+ children.push(child)
+ buffer = child as HTMLElement
+ }
+
+ i++
+ } while (child !== null && i < 20)
+
+ return children
+ }
+
+ // Get item sub element
+ private _getItemSubElement = (item: HTMLElement): HTMLElement | null => {
+ if (!item) {
+ return null
+ }
+
+ if (this._isTriggerElement(item)) {
+ return this.element
+ }
+
+ if (item.classList.contains('menu-sub')) {
+ return item
+ } else if (DataUtil.has(item, 'sub')) {
+ const itemSub = DataUtil.get(item, 'sub')
+ return itemSub ? (itemSub as HTMLElement) : null
+ } else {
+ return getElementChild(item, '.menu-sub')
+ }
+ }
+
+ private _getCss = (el: HTMLElement, styleProp: string) => {
+ const defaultView = (el.ownerDocument || document).defaultView
+ if (!defaultView) {
+ return ''
+ }
+
+ // sanitize property name to css notation
+ // (hyphen separated words eg. font-Size)
+ styleProp = styleProp.replace(/([A-Z])/g, '-$1').toLowerCase()
+
+ return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp)
+ }
+
+ // Get item sub type
+ private _getItemSubType = (element: HTMLElement) => {
+ const sub = this._getItemSubElement(element)
+ if (sub && parseInt(this._getCss(sub as HTMLElement, 'z-index')) > 0) {
+ return 'dropdown'
+ } else {
+ return 'accordion'
+ }
+ }
+
+ // Test if item's sub is shown
+ private _isItemSubShown = (item: HTMLElement) => {
+ let sub = this._getItemSubElement(item)
+ if (sub) {
+ if (this._getItemSubType(item) === 'dropdown') {
+ const subHTMLElement = sub as HTMLElement
+ return (
+ subHTMLElement.classList.contains('show') &&
+ subHTMLElement.hasAttribute('data-popper-placement')
+ )
+ } else {
+ return item.classList.contains('show')
+ }
+ }
+
+ return false
+ }
+
+ // Test if item dropdown is permanent
+ private _isItemDropdownPermanent = (item: HTMLElement) => {
+ return this._getItemOption(item, 'permanent') === true
+ }
+
+ // Test if item's parent is shown
+ private _isItemParentShown = (item: HTMLElement) => {
+ return getElementParents(item, '.menu-item.show').length > 0
+ }
+
+ // Test of it is item sub element
+ private _isItemSubElement = (item: HTMLElement) => {
+ return item.classList.contains('menu-sub')
+ }
+
+ // Test if item has sub
+ private _hasItemSub = (item: HTMLElement) => {
+ return item.classList.contains('menu-item') && item.hasAttribute('data-kt-menu-trigger')
+ }
+
+ // Get link element
+ private _getItemLinkElement = (item: HTMLElement) => {
+ return getElementChild(item, '.menu-link')
+ }
+
+ // Get toggle element
+ private _getItemToggleElement = (item: HTMLElement) => {
+ if (this.triggerElement) {
+ return this.triggerElement
+ }
+
+ return this._getItemLinkElement(item)
+ }
+
+ // Show item dropdown
+ private _showDropdown = (item: HTMLElement) => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.menu.dropdown.show') === false) {
+ return
+ }
+
+ // Hide all currently shown dropdowns except current one
+ MenuComponent.hideDropdowns(item)
+
+ // const toggle = this._isTriggerElement(item) ? item : this._getItemLinkElement(item);
+ const sub = this._getItemSubElement(item)
+ const width = this._getItemOption(item, 'width')
+ const height = this._getItemOption(item, 'height')
+
+ let zindex = this.options.dropdown.zindex
+ const parentZindex = getHighestZindex(item) // update
+ // Apply a new z-index if dropdown's toggle element or it's parent has greater z-index // update
+ if (parentZindex !== null && parentZindex >= zindex) {
+ zindex = parentZindex + 1
+ }
+
+ if (zindex && sub) {
+ ElementStyleUtil.set(sub, 'z-index', zindex)
+ }
+
+ if (width && sub) {
+ ElementStyleUtil.set(sub, 'width', width)
+ }
+
+ if (height && sub) {
+ ElementStyleUtil.set(sub, 'height', height)
+ }
+
+ this.initDropdownPopper(item, sub as HTMLElement)
+
+ item.classList.add('show')
+ item.classList.add('menu-dropdown')
+ sub?.classList.add('show')
+
+ // Append the sub the the root of the menu
+ if (this._getItemOption(item, 'overflow') === true) {
+ if (sub) {
+ document.body.appendChild(sub)
+ DataUtil.set(item, 'sub', sub)
+ DataUtil.set(sub, 'item', item)
+ DataUtil.set(sub, 'menu', this)
+ }
+ } else {
+ if (sub) {
+ DataUtil.set(sub, 'item', item)
+ }
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.menu.dropdown.shown')
+ }
+
+ // Init dropdown popper(new)
+ private initDropdownPopper = (item: HTMLElement, sub: HTMLElement) => {
+ // Setup popper instance
+ let reference
+ const attach = this._getItemOption(item, 'attach') as string
+
+ if (attach) {
+ if (attach === 'parent') {
+ reference = item.parentNode
+ } else {
+ reference = document.querySelector(attach)
+ }
+ } else {
+ reference = item
+ }
+
+ if (reference) {
+ const popper = createPopper(
+ reference as Element | VirtualElement,
+ sub,
+ this._getDropdownPopperConfig(item)
+ )
+ DataUtil.set(item, 'popper', popper)
+ }
+ }
+
+ // Hide item dropdown
+ private _hideDropdown = (item: HTMLElement) => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.menu.dropdown.hide') === false) {
+ return
+ }
+
+ const sub = this._getItemSubElement(item)
+ if (sub) {
+ ElementStyleUtil.set(sub, 'z-index', '')
+ ElementStyleUtil.set(sub, 'width', '')
+ ElementStyleUtil.set(sub, 'height', '')
+ }
+
+ item.classList.remove('show')
+ item.classList.remove('menu-dropdown')
+ if (sub) {
+ sub.classList.remove('show')
+ }
+
+ // Append the sub back to it's parent
+ if (this._getItemOption(item, 'overflow') === true) {
+ if (item.classList.contains('menu-item')) {
+ if (sub) {
+ item.appendChild(sub)
+ }
+ } else {
+ insertAfterElement(this.element, item)
+ }
+
+ if (sub) {
+ DataUtil.remove(item, 'sub')
+ DataUtil.remove(sub, 'item')
+ DataUtil.remove(sub, 'menu')
+ }
+ }
+
+ if (DataUtil.has(item, 'popper') === true) {
+ // @ts-ignore
+ DataUtil.get(item, 'popper').destroy()
+ DataUtil.remove(item, 'popper')
+ }
+
+ // Destroy popper(new)
+ this.destroyDropdownPopper(item)
+ EventHandlerUtil.trigger(this.element, 'kt.menu.dropdown.hidden')
+ }
+
+ // Destroy dropdown popper(new)
+ private destroyDropdownPopper = (item: HTMLElement) => {
+ if (DataUtil.has(item, 'popper') === true) {
+ // @ts-ignore
+ DataUtil.get(item, 'popper').destroy()
+ DataUtil.remove(item, 'popper')
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.menu.dropdown.hidden')
+ }
+
+ private _showAccordion = (item: HTMLElement) => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.menu.accordion.show') === false) {
+ return
+ }
+
+ if (this.options.accordion.expand === false) {
+ this._hideAccordions(item)
+ }
+
+ if (DataUtil.has(item, 'popper') === true) {
+ this._hideDropdown(item)
+ }
+
+ item.classList.add('hover') // updateWW
+ item.classList.add('showing')
+
+ const subElement = this._getItemSubElement(item)
+ if (subElement) {
+ const sub = subElement as HTMLElement
+ slideDown(sub, this.options.accordion.slideSpeed, () => {
+ item.classList.remove('showing')
+ item.classList.add('show')
+ sub.classList.add('show')
+ EventHandlerUtil.trigger(this.element, 'kt.menu.accordion.shown')
+ })
+ }
+ }
+
+ private _hideAccordion = (item: HTMLElement) => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.menu.accordion.hide') === false) {
+ return
+ }
+
+ const sub = this._getItemSubElement(item)
+ item.classList.add('hiding')
+
+ if (sub) {
+ slideUp(sub, this.options.accordion.slideSpeed, () => {
+ item.classList.remove('hiding')
+ item.classList.remove('show')
+ sub.classList.remove('show')
+ item.classList.remove('hover') // update
+ EventHandlerUtil.trigger(this.element, 'kt.menu.accordion.hidden')
+ })
+ }
+ }
+
+ // Hide all shown accordions of item
+ private _hideAccordions = (item: HTMLElement) => {
+ const itemsToHide = this.element.querySelectorAll('.show[data-kt-menu-trigger]')
+ if (itemsToHide && itemsToHide.length > 0) {
+ for (var i = 0, len = itemsToHide.length; i < len; i++) {
+ const itemToHide = itemsToHide[i] as HTMLElement
+
+ if (
+ this._getItemSubType(itemToHide) === 'accordion' &&
+ itemToHide !== item &&
+ item.contains(itemToHide) === false &&
+ itemToHide.contains(item) === false
+ ) {
+ this._hideAccordion(itemToHide)
+ }
+ }
+ }
+ }
+
+ // Event Handlers
+ // Reset item state classes if item sub type changed
+ private _reset = (item: HTMLElement) => {
+ if (this._hasItemSub(item) === false) {
+ return
+ }
+
+ const sub = this._getItemSubElement(item)
+
+ // Reset sub state if sub type is changed during the window resize
+ if (DataUtil.has(item, 'type') && DataUtil.get(item, 'type') !== this._getItemSubType(item)) {
+ // updated
+ item.classList.remove('hover')
+ item.classList.remove('show')
+ item.classList.remove('show')
+ if (sub) {
+ sub.classList.remove('show')
+ }
+ } // updated
+ }
+
+ // TODO: not done
+ private _destroy = () => {}
+
+ // Update all item state classes if item sub type changed
+ private _update = () => {
+ const items = this.element.querySelectorAll('.menu-item[data-kt-menu-trigger]')
+ items.forEach((el) => this._reset(el as HTMLElement))
+ }
+
+ // Hide item sub
+ private _hide = (item: HTMLElement) => {
+ if (!item) {
+ return
+ }
+
+ if (this._isItemSubShown(item) === false) {
+ return
+ }
+
+ if (this._getItemSubType(item) === 'dropdown') {
+ this._hideDropdown(item)
+ } else if (this._getItemSubType(item) === 'accordion') {
+ this._hideAccordion(item)
+ }
+ }
+
+ // Show item sub
+ private _show = (item: HTMLElement) => {
+ if (!item) {
+ return
+ }
+
+ if (this._isItemSubShown(item) === true) {
+ return
+ }
+
+ if (this._getItemSubType(item) === 'dropdown') {
+ this._showDropdown(item) // // show current dropdown
+ } else if (this._getItemSubType(item) === 'accordion') {
+ this._showAccordion(item)
+ }
+
+ // Remember last submenu type
+
+ DataUtil.set(item, 'type', this._getItemSubType(item)) // updated
+ }
+
+ // Toggle item sub
+ private _toggle = (item: HTMLElement) => {
+ if (!item) {
+ return
+ }
+
+ if (this._isItemSubShown(item) === true) {
+ this._hide(item)
+ } else {
+ this._show(item)
+ }
+ }
+
+ // Mouseout handle
+ private _mouseout = (element: HTMLElement, e: MouseEvent) => {
+ const item = this._getItemElement(element)
+ if (!item) {
+ return
+ }
+
+ if (this._getItemOption(item, 'trigger') !== 'hover') {
+ return
+ }
+
+ const timeout = setTimeout(() => {
+ if (DataUtil.get(item, 'hover') === '1') {
+ this._hide(item)
+ }
+ }, this.options.dropdown.hoverTimeout)
+
+ DataUtil.set(item, 'hover', '1')
+ DataUtil.set(item, 'timeout', timeout)
+ }
+
+ // Mouseover handle
+ private _mouseover = (element: HTMLElement, e: MouseEvent) => {
+ const item = this._getItemElement(element)
+ if (!item) {
+ return
+ }
+
+ if (this._getItemOption(item, 'trigger') !== 'hover') {
+ return
+ }
+
+ if (DataUtil.get(item, 'hover') === '1') {
+ const timeout = DataUtil.get(item, 'timeout')
+ if (timeout) {
+ clearTimeout(timeout as number)
+ }
+ DataUtil.remove(item, 'hover')
+ DataUtil.remove(item, 'timeout')
+ }
+
+ this._show(item)
+ }
+
+ // Dismiss handler
+ private _dismiss = (element: HTMLElement, e: Event) => {
+ const item = this._getItemElement(element)
+ if (!item) {
+ return
+ }
+ const items = this._getItemChildElements(item)
+ //if ( item !== null && _getItemOption(item, 'trigger') === 'click' && _getItemSubType(item) === 'dropdown' ) {
+ const itemSubType = this._getItemSubType(item)
+ if (item !== null && itemSubType === 'dropdown') {
+ this._hide(item) // hide items dropdown
+
+ // Hide all child elements as well
+ if (items.length > 0) {
+ for (let i = 0, len = items.length; i < len; i++) {
+ //if ( _getItemOption(item, 'trigger') === 'click' && _getItemSubType(item) === 'dropdown' ) {
+ if (items[i] !== null && this._getItemSubType(items[i] as HTMLElement) === 'dropdown') {
+ this._hide(items[i] as HTMLElement)
+ }
+ }
+ }
+ }
+ }
+
+ // Link handler
+ private _link = (element: HTMLElement, e: Event) => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.menu.link.click') === false) {
+ return
+ }
+
+ // Dismiss all shown dropdowns
+ MenuComponent.hideDropdowns(undefined)
+ EventHandlerUtil.trigger(this.element, 'kt.menu.link.clicked')
+ }
+
+ private _click = (element: HTMLElement, e: Event) => {
+ e.preventDefault()
+ const item = this._getItemElement(element)
+ if (item) {
+ if (this._getItemOption(item, 'trigger') !== 'click') {
+ return
+ }
+
+ if (this._getItemOption(item, 'toggle') === false) {
+ this._show(item)
+ } else {
+ this._toggle(item)
+ }
+ }
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public click = (element: HTMLElement, e: Event) => {
+ return this._click(element, e)
+ }
+
+ public link = (element: HTMLElement, e: Event) => {
+ return this._link(element, e)
+ }
+
+ public dismiss = (element: HTMLElement, e: Event) => {
+ return this._dismiss(element, e)
+ }
+
+ public mouseover = (element: HTMLElement, e: Event) => {
+ return this._mouseover(element, e as MouseEvent)
+ }
+
+ public mouseout = (element: HTMLElement, e: Event) => {
+ return this._mouseout(element, e as MouseEvent)
+ }
+
+ // General Methods
+ public getItemTriggerType = (item: HTMLElement) => {
+ return this._getItemOption(item, 'trigger')
+ }
+
+ public getItemSubType = (element: HTMLElement) => {
+ return this._getItemSubType(element)
+ }
+
+ public show = (item: HTMLElement) => {
+ return this._show(item)
+ }
+
+ public hide = (item: HTMLElement) => {
+ return this._hide(item)
+ }
+
+ public reset = (item: HTMLElement) => {
+ return this._reset(item)
+ }
+
+ public update = () => {
+ return this._update()
+ }
+
+ public getElement = () => {
+ return this.element
+ }
+
+ public getItemLinkElement = (item: HTMLElement) => {
+ return this._getItemLinkElement(item)
+ }
+
+ public getItemToggleElement = (item: HTMLElement) => {
+ return this._getItemToggleElement(item)
+ }
+
+ public getItemSubElement = (item: HTMLElement) => {
+ return this._getItemSubElement(item)
+ }
+
+ public getItemParentElements = (item: HTMLElement) => {
+ return this._getItemParentElements(item)
+ }
+
+ public isItemSubShown = (item: HTMLElement) => {
+ return this._isItemSubShown(item)
+ }
+
+ public isItemParentShown = (item: HTMLElement) => {
+ return this._isItemParentShown(item)
+ }
+
+ public getTriggerElement = () => {
+ return this.triggerElement
+ }
+
+ public isItemDropdownPermanent = (item: HTMLElement) => {
+ return this._isItemDropdownPermanent(item)
+ }
+
+ // Accordion Mode Methods
+ public hideAccordions = (item: HTMLElement) => {
+ return this._hideAccordions(item)
+ }
+
+ // Event API
+ public on = (name: string, handler: any) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: any) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ // public static methods
+ // Get KTMenu instance by element
+ public static getInstance = (element: HTMLElement): MenuComponent | null => {
+ // Element has menu DOM reference in it's DATA storage
+ const elementMenu = DataUtil.get(element, 'menu')
+ if (elementMenu) {
+ return elementMenu as MenuComponent
+ }
+
+ // Element has .menu parent
+ const menu = element.closest('.menu')
+ if (menu) {
+ const menuData = DataUtil.get(menu as HTMLElement, 'menu')
+ if (menuData) {
+ return menuData as MenuComponent
+ }
+ }
+
+ // Element has a parent with DOM reference to .menu in it's DATA storage
+ if (element.classList.contains('menu-link')) {
+ const sub = element.closest('.menu-sub')
+ if (sub) {
+ const subMenu = DataUtil.get(sub as HTMLElement, 'menu')
+ if (subMenu) {
+ return subMenu as MenuComponent
+ }
+ }
+ }
+
+ return null
+ }
+
+ // Hide all dropdowns and skip one if provided
+ public static hideDropdowns = (skip: HTMLElement | undefined) => {
+ const items = document.querySelectorAll(
+ '.show.menu-dropdown[data-kt-menu-trigger]'
+ )
+
+ if (items && items.length > 0) {
+ for (let i = 0, len = items.length; i < len; i++) {
+ const item = items[i]
+ const menu = MenuComponent.getInstance(item as HTMLElement)
+
+ if (menu && menu.getItemSubType(item) === 'dropdown') {
+ if (skip) {
+ if (
+ // @ts-ignore
+ menu.getItemSubElement(item).contains(skip) === false &&
+ item.contains(skip) === false &&
+ item !== skip
+ ) {
+ menu.hide(item)
+ }
+ } else {
+ menu.hide(item)
+ }
+ }
+ }
+ }
+ }
+
+ public static updateDropdowns = () => {
+ const items = document.querySelectorAll('.show.menu-dropdown[data-kt-menu-trigger]')
+ if (items && items.length > 0) {
+ for (var i = 0, len = items.length; i < len; i++) {
+ var item = items[i]
+
+ if (DataUtil.has(item as HTMLElement, 'popper')) {
+ // @ts-ignore
+ DataUtil.get(item as HTMLElement, 'popper').forceUpdate()
+ }
+ }
+ }
+ }
+
+ // Global handlers
+ public static createInstances = (selector: string) => {
+ // Initialize menus
+ document.querySelectorAll(selector).forEach((el) => {
+ const menuItem = el as HTMLElement
+ let menuInstance = MenuComponent.getInstance(menuItem)
+ if (!menuInstance) {
+ menuInstance = new MenuComponent(el as HTMLElement, defaultMenuOptions)
+ }
+ })
+ }
+
+ public static initGlobalHandlers = () => {
+ // Dropdown handler
+ document.addEventListener('click', (e) => {
+ const menuItems = document.querySelectorAll('.show.menu-dropdown[data-kt-menu-trigger]')
+ if (menuItems && menuItems.length > 0) {
+ for (let i = 0; i < menuItems.length; i++) {
+ const item = menuItems[i] as HTMLElement
+ const menuObj = MenuComponent.getInstance(item) as MenuComponent
+ if (menuObj && menuObj.getItemSubType(item) === 'dropdown') {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const menu = menuObj.getElement()
+ const sub = menuObj.getItemSubElement(item) as HTMLElement
+ if (item === e.target || item.contains(e.target as HTMLElement)) {
+ continue
+ }
+
+ if (sub && (sub === e.target || sub.contains(e.target as HTMLElement))) {
+ continue
+ }
+ menuObj.hide(item)
+ }
+ }
+ }
+ })
+
+ // Sub toggle handler
+ DOMEventHandlerUtil.on(
+ document.body,
+ '.menu-item[data-kt-menu-trigger] > .menu-link, [data-kt-menu-trigger]:not(.menu-item):not([data-kt-menu-trigger="auto"])',
+ 'click',
+ function (this: HTMLElement, e: Event) {
+ const menu = MenuComponent.getInstance(this) as MenuComponent
+ if (menu) {
+ return menu.click(this, e)
+ }
+ }
+ )
+
+ // // Link handler
+ DOMEventHandlerUtil.on(
+ document.body,
+ '.menu-item:not([data-kt-menu-trigger]) > .menu-link',
+ 'click',
+ function (this: HTMLElement, e: Event) {
+ e.stopPropagation()
+ const menu = MenuComponent.getInstance(this)
+ if (menu && menu.link) {
+ return menu.link(this, e)
+ }
+ }
+ )
+
+ // Dismiss handler
+ DOMEventHandlerUtil.on(
+ document.body,
+ '[data-kt-menu-dismiss="true"]',
+ 'click',
+ function (this: HTMLElement, e: Event) {
+ const menu = MenuComponent.getInstance(this) as MenuComponent
+ if (menu) {
+ return menu.dismiss(this, e)
+ }
+ }
+ )
+
+ // Mouseover handler
+ DOMEventHandlerUtil.on(
+ document.body,
+ '[data-kt-menu-trigger], .menu-sub',
+ 'mouseover',
+ function (this: HTMLElement, e: Event) {
+ const menu = MenuComponent.getInstance(this) as MenuComponent
+ if (menu && menu.getItemSubType(this) === 'dropdown') {
+ return menu.mouseover(this, e)
+ }
+ }
+ )
+
+ // Mouseout handler
+ DOMEventHandlerUtil.on(
+ document.body,
+ '[data-kt-menu-trigger], .menu-sub',
+ 'mouseout',
+ function (this: HTMLElement, e: Event) {
+ const menu = MenuComponent.getInstance(this) as MenuComponent
+ if (menu && menu.getItemSubType(this) === 'dropdown') {
+ return menu.mouseout(this, e)
+ }
+ }
+ )
+
+ // Resize handler
+ window.addEventListener('resize', () => {
+ let timer
+ throttle(
+ timer,
+ () => {
+ // Locate and update Drawer instances on window resize
+ const elements = document.querySelectorAll('[data-kt-menu="true"]')
+ elements.forEach((el) => {
+ const menu = MenuComponent.getInstance(el as HTMLElement)
+ if (menu) {
+ menu.update()
+ }
+ })
+ },
+ 200
+ )
+ })
+ }
+
+ public static bootstrap = () => {
+ MenuComponent.initGlobalHandlers()
+ MenuComponent.createInstances('[data-kt-menu="true"]')
+ }
+
+ public static reinitialization = () => {
+ MenuComponent.createInstances('[data-kt-menu="true"]')
+ }
+
+ public static createInsance = (
+ selector: string,
+ options: MenuOptions = defaultMenuOptions
+ ): MenuComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let menu = MenuComponent.getInstance(item)
+ if (!menu) {
+ menu = new MenuComponent(item, options)
+ }
+ return menu
+ }
+}
+
+export {MenuComponent, defaultMenuOptions}
diff --git a/src/_metronic/assets/ts/components/SearchComponent.ts b/src/_metronic/assets/ts/components/SearchComponent.ts
new file mode 100644
index 0000000..88a6609
--- /dev/null
+++ b/src/_metronic/assets/ts/components/SearchComponent.ts
@@ -0,0 +1,478 @@
+import {
+ EventHandlerUtil,
+ DataUtil,
+ getBreakpoint,
+ getAttributeValueByBreakpoint,
+ stringSnakeToCamel,
+ getObjectPropertyValueByKey,
+ getViewPort,
+ isVisibleElement,
+ throttle,
+} from '../_utils/index'
+
+import {MenuComponent, defaultMenuOptions} from './MenuComponent'
+
+export interface ISearchOptions {
+ minLength: number // Miniam text lenght to query search
+ keypress: boolean // Enable search on keypress
+ enter: boolean // Enable search on enter key press
+ layout: 'menu' | 'inline' // Use 'menu' or 'inline' layout options to display search results
+ responsive?: number // Pass integer value or bootstrap compatible breakpoint key(sm,md,lg,xl,xxl) to enable reponsive form mode for device width below the breakpoint value
+ showOnFocus: boolean // Always show menu on input focus
+}
+
+export interface ISearchQueries {
+ componentName: string
+ instanseQuery: string
+ attrQuery: string
+}
+
+const defaultSearchOptions: ISearchOptions = {
+ minLength: 2, // Miniam text lenght to query search
+ keypress: true, // Enable search on keypress
+ enter: true, // Enable search on enter key press
+ layout: 'menu', // Use 'menu' or 'inline' layout options to display search results
+ showOnFocus: true, // Always show menu on input focus
+}
+
+const defaultSearchQueires: ISearchQueries = {
+ componentName: 'search',
+ instanseQuery: '[data-kt-search]',
+ attrQuery: 'data-kt-search-',
+}
+
+class SearchComponent {
+ element: HTMLElement
+ contentElement: HTMLElement
+ formElement: HTMLFormElement
+ inputElement: HTMLInputElement
+ spinnerElement: HTMLElement
+ clearElement: HTMLElement
+ toggleElement: HTMLElement
+ submitElement: HTMLElement
+ toolbarElement: HTMLElement
+ resultsElement: HTMLElement
+ suggestionElement: HTMLElement
+ emptyElement: HTMLElement
+ layout: any
+
+ options: ISearchOptions
+ queries: ISearchQueries
+
+ processing: boolean = false
+ menuObject: MenuComponent | undefined
+
+ constructor(_element: HTMLElement, _options: ISearchOptions, _queries: ISearchQueries) {
+ // Variables
+ this.options = Object.assign(defaultSearchOptions, _options)
+ this.queries = _queries
+
+ // Elements
+ this.element = _element
+ this.contentElement = this._getElement('content') as HTMLElement
+ this.formElement = this._getElement('form') as HTMLFormElement
+ this.inputElement = this._getElement('input') as HTMLInputElement
+ this.spinnerElement = this._getElement('spinner') as HTMLElement
+ this.clearElement = this._getElement('clear') as HTMLElement
+ this.toggleElement = this._getElement('toggle') as HTMLElement
+ this.submitElement = this._getElement('submit') as HTMLElement
+ this.toolbarElement = this._getElement('toolbar') as HTMLElement
+
+ this.resultsElement = this._getElement('results') as HTMLElement
+ this.suggestionElement = this._getElement('suggestion') as HTMLElement
+ this.emptyElement = this._getElement('empty') as HTMLElement
+
+ // Layout
+ this.layout = this.getOption('layout')
+ if (this.layout === 'menu') {
+ this.menuObject = new MenuComponent(this.contentElement, defaultMenuOptions)
+ }
+
+ // Update
+ this.update()
+
+ // Event Handlers
+ this.handlers()
+
+ DataUtil.set(this.element, this.queries.componentName, this)
+ }
+
+ private _getElement = (name: string) => {
+ return this.element.querySelector('[data-kt-search-element="' + name + '"]')
+ }
+
+ // Get option
+ private getOption = (name: string) => {
+ const attr = this.element.getAttribute(`${this.queries.attrQuery}${name}`)
+ if (attr) {
+ let value = getAttributeValueByBreakpoint(attr)
+
+ if (value !== null && String(value) === 'true') {
+ return true
+ } else if (value !== null && String(value) === 'false') {
+ return false
+ }
+
+ return value
+ } else {
+ const optionName = stringSnakeToCamel(name)
+
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ } else {
+ return null
+ }
+ }
+ }
+
+ // Check if responsive form mode is enabled
+ private getResponsiveFormMode = () => {
+ const responsive = this.getOption('responsive') as string
+ const width = getViewPort().width
+
+ if (!responsive) {
+ return null
+ }
+
+ const breakpoint = getBreakpoint(responsive)
+ let breakPointNum = -1
+ if (!breakpoint) {
+ breakPointNum = parseInt(responsive)
+ } else {
+ breakPointNum = +breakpoint
+ }
+
+ if (width < breakPointNum) {
+ return 'on'
+ } else {
+ return 'off'
+ }
+ }
+
+ // Focus
+ private focus = () => {
+ this.element.classList.add('focus')
+
+ if (
+ this.getOption('show-on-focus') === true ||
+ this.inputElement.value.length >= this.options.minLength
+ ) {
+ this.show()
+ }
+ }
+
+ // Blur
+ private blur = () => {
+ this.element.classList.remove('focus')
+ }
+
+ // Enter
+ private enter = (e: KeyboardEvent) => {
+ const key = e.charCode || e.keyCode || 0
+
+ if (key === 13) {
+ e.preventDefault()
+
+ this.search()
+ }
+ }
+
+ // Input
+ private input = () => {
+ if (this.getOption('min-length')) {
+ const minLength = parseInt(this.getOption('min-length') as string)
+
+ if (this.inputElement.value.length >= minLength) {
+ this.search()
+ } else if (this.inputElement.value.length === 0) {
+ this.clear()
+ }
+ }
+ }
+
+ private handlers(): void {
+ const context = this
+
+ // Focus
+ this.inputElement.addEventListener('focus', this.focus)
+
+ // Blur
+ this.inputElement.addEventListener('blur', this.blur)
+
+ // Keypress
+ if (this.getOption('keypress') === true) {
+ this.inputElement.addEventListener('input', this.input)
+ }
+
+ // Submit
+ if (this.submitElement) {
+ this.submitElement.addEventListener('click', this.search)
+ }
+
+ // Enter
+ if (this.getOption('enter') === true) {
+ this.inputElement.addEventListener('keypress', this.enter)
+ }
+
+ // Clear
+ if (this.clearElement) {
+ this.clearElement.addEventListener('click', this.clear)
+ }
+
+ // Menu
+ if (this.menuObject) {
+ // Toggle menu
+ if (this.toggleElement) {
+ this.toggleElement.addEventListener('click', this.show)
+
+ this.menuObject.on('kt.menu.dropdown.show', function () {
+ // @ts-ignore
+ if (isVisibleElement(context.toggleElement)) {
+ // @ts-ignore
+ context.toggleElement.classList.add('active')
+ // @ts-ignore
+ context.toggleElement.classList.add('show')
+ }
+ })
+
+ this.menuObject.on('kt.menu.dropdown.hide', function () {
+ // @ts-ignore
+ if (isVisibleElement(context.toggleElement)) {
+ // @ts-ignore
+ context.toggleElement.classList.remove('active')
+ // @ts-ignore
+ context.toggleElement.classList.remove('show')
+ }
+ })
+ }
+
+ this.menuObject.on('kt.menu.dropdown.shown', function () {
+ // @ts-ignore
+ context.inputElement.focus()
+ })
+ }
+
+ // Window resize handling
+ window.addEventListener('resize', () => {
+ let timer
+
+ throttle(
+ timer,
+ () => {
+ this.update()
+ },
+ 200
+ )
+ })
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ // Update
+ public update = () => {
+ // Handle responsive form
+ if (this.layout === 'menu') {
+ let responsiveFormMode = this.getResponsiveFormMode()
+
+ if (responsiveFormMode === 'on' && !this.contentElement.contains(this.formElement)) {
+ this.contentElement.prepend(this.formElement)
+ this.formElement.classList.remove('d-none')
+ } else if (responsiveFormMode === 'off' && this.contentElement.contains(this.formElement)) {
+ this.element.prepend(this.formElement)
+ this.formElement.classList.add('d-none')
+ }
+ }
+ }
+
+ // Show menu
+ public show = () => {
+ if (this.menuObject) {
+ this.update()
+
+ this.menuObject.show(this.element)
+ }
+ }
+
+ // Hide menu
+ public hide = () => {
+ if (this.menuObject) {
+ this.update()
+
+ this.menuObject.hide(this.element)
+ }
+ }
+
+ // Search
+ public search = () => {
+ if (!this.processing) {
+ // Show search spinner
+ if (this.spinnerElement) {
+ this.spinnerElement.classList.remove('d-none')
+ }
+
+ // Hide search clear button
+ if (this.clearElement) {
+ this.clearElement.classList.add('d-none')
+ }
+
+ // Hide search toolbar
+ if (this.toolbarElement) {
+ this.toolbarElement.classList.add('d-none')
+ }
+
+ // Focus input
+ this.inputElement.focus()
+
+ this.processing = true
+ EventHandlerUtil.trigger(this.element, 'kt.search.process', this)
+ }
+ }
+
+ // Complete
+ public complete = () => {
+ if (this.spinnerElement) {
+ this.spinnerElement.classList.add('d-none')
+ }
+
+ // Show search toolbar
+ if (this.clearElement) {
+ this.clearElement.classList.remove('d-none')
+ }
+
+ if (this.inputElement.value.length === 0) {
+ this.clear()
+ }
+
+ // Focus input
+ this.inputElement.focus()
+
+ this.show()
+
+ this.processing = false
+ }
+
+ // Clear
+ public clear = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.search.clear') === false) {
+ return
+ }
+
+ // Clear and focus input
+ this.inputElement.value = ''
+ this.inputElement.focus()
+
+ // Hide clear icon
+ if (this.clearElement) {
+ this.clearElement.classList.add('d-none')
+ }
+
+ // Show search toolbar
+ if (this.toolbarElement) {
+ this.toolbarElement.classList.remove('d-none')
+ }
+
+ // Hide menu
+ if (this.getOption('show-on-focus') === false) {
+ this.hide()
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.search.cleared')
+ }
+
+ public isProcessing = () => {
+ return this.processing
+ }
+
+ public getQuery = () => {
+ return this.inputElement.value
+ }
+
+ public getMenu = () => {
+ return this.menuObject
+ }
+
+ public getFormElement = () => {
+ return this.formElement
+ }
+
+ public getInputElement(): HTMLInputElement {
+ return this.inputElement
+ }
+
+ public getContentElement(): HTMLElement {
+ return this.contentElement
+ }
+
+ public getElement(): HTMLElement {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ // Static methods
+ public static getInstance = (
+ el: HTMLElement,
+ componentName: string = defaultSearchQueires.componentName
+ ) => {
+ const Search = DataUtil.get(el, componentName)
+ if (Search) {
+ return Search as SearchComponent
+ }
+
+ return null
+ }
+
+ public static createInstances = (
+ selector: string = defaultSearchQueires.instanseQuery,
+ options: ISearchOptions = defaultSearchOptions,
+ queries: ISearchQueries = defaultSearchQueires
+ ) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ let Search = SearchComponent.getInstance(item)
+ if (!Search) {
+ Search = new SearchComponent(item, options, queries)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string = defaultSearchQueires.instanseQuery,
+ options: ISearchOptions = defaultSearchOptions,
+ queries: ISearchQueries = defaultSearchQueires
+ ): SearchComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let Search = SearchComponent.getInstance(item)
+ if (!Search) {
+ Search = new SearchComponent(item, options, queries)
+ }
+ return Search
+ }
+
+ public static bootstrap = (selector: string = defaultSearchQueires.instanseQuery) => {
+ SearchComponent.createInstances(selector)
+ }
+
+ public static reinitialization = (selector: string = defaultSearchQueires.instanseQuery) => {
+ SearchComponent.createInstances(selector)
+ }
+}
+export {SearchComponent, defaultSearchOptions, defaultSearchQueires}
diff --git a/src/_metronic/assets/ts/components/_CookieComponent.ts b/src/_metronic/assets/ts/components/_CookieComponent.ts
new file mode 100644
index 0000000..67b3d44
--- /dev/null
+++ b/src/_metronic/assets/ts/components/_CookieComponent.ts
@@ -0,0 +1,60 @@
+/* eslint-disable no-useless-escape */
+// DOCS: https://javascript.info/cookie
+export class CookieComponent {
+ /**
+ * Returns the cookie with the given name, or undefined if not found
+ *
+ * @param {string} name - cookie name
+ * @returns string | null
+ */
+ public static get(name: string): string | undefined {
+ let matches = document.cookie.match(
+ new RegExp('(?:^|; )' + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)')
+ )
+ return matches ? decodeURIComponent(matches[1]) : undefined
+ }
+
+ /**
+ * Please note that a cookie value is encoded,
+ * so getCookie uses a built-in decodeURIComponent function to decode it.
+ *
+ * @param {string} name - cookie name
+ * @param {string | number | boolean} value - cookie value
+ * @param {any} cookieOptions - cookie options
+ * @returns void
+ */
+ public static set(name: string, value: string | number | boolean, cookieOptions: any): void {
+ const options = {
+ path: '/',
+ // add other defaults here if necessary
+ ...cookieOptions,
+ }
+
+ if (options.expires instanceof Date) {
+ options.expires = options.expires.toUTCString()
+ }
+
+ let updatedCookie = encodeURIComponent(name) + '=' + encodeURIComponent(value)
+
+ for (let optionKey in options) {
+ updatedCookie += '; ' + optionKey
+ let optionValue = options[optionKey]
+ if (optionValue !== true) {
+ updatedCookie += '=' + optionValue
+ }
+ }
+
+ document.cookie = updatedCookie
+ }
+
+ /**
+ * To delete a cookie, we can call it with a negative expiration date
+ *
+ * @param {string} name
+ */
+ public static delete(name: string): void {
+ CookieComponent.set(name, '', {
+ 'max-age': -1,
+ })
+ }
+}
diff --git a/src/_metronic/assets/ts/components/_DrawerComponent.ts b/src/_metronic/assets/ts/components/_DrawerComponent.ts
new file mode 100644
index 0000000..6dbfd44
--- /dev/null
+++ b/src/_metronic/assets/ts/components/_DrawerComponent.ts
@@ -0,0 +1,385 @@
+import {
+ EventHandlerUtil,
+ getUniqueIdWithPrefix,
+ getObjectPropertyValueByKey,
+ stringSnakeToCamel,
+ getAttributeValueByBreakpoint,
+ throttle,
+ getCSS,
+ DOMEventHandlerUtil,
+ ElementStyleUtil,
+} from '../_utils/index'
+
+export class DrawerStore {
+ static store: Map = new Map()
+
+ public static set(instanceId: string, drawerComponentObj: DrawerComponent): void {
+ if (DrawerStore.has(instanceId)) {
+ return
+ }
+
+ DrawerStore.store.set(instanceId, drawerComponentObj)
+ }
+
+ public static get(instanceId: string): DrawerComponent | undefined {
+ if (!DrawerStore.has(instanceId)) {
+ return
+ }
+ return DrawerStore.store.get(instanceId)
+ }
+
+ public static remove(instanceId: string): void {
+ if (!DrawerStore.has(instanceId)) {
+ return
+ }
+
+ DrawerStore.store.delete(instanceId)
+ }
+
+ public static has(instanceId: string): boolean {
+ return DrawerStore.store.has(instanceId)
+ }
+
+ public static getAllInstances() {
+ return DrawerStore.store
+ }
+}
+
+export interface DrawerOptions {
+ overlay: boolean
+ baseClass: string
+ overlayClass: string
+ direction: string
+}
+
+const defaultDrawerOptions: DrawerOptions = {
+ overlay: true,
+ baseClass: 'drawer',
+ overlayClass: 'drawer-overlay',
+ direction: 'end',
+}
+
+class DrawerComponent {
+ element: HTMLElement
+ overlayElement: HTMLElement | null = null
+ toggleElement: HTMLElement | null = null
+ options: DrawerOptions
+ instanceUid: string
+ name: string = ''
+ shown: boolean = false
+ lastWidth: number = 0
+ closeElement: HTMLElement | null = null
+
+ constructor(_element: HTMLElement, options: DrawerOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultDrawerOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('drawer')
+ this.overlayElement = null
+ this.name = this.element.getAttribute('data-kt-drawer-name') || ''
+ this.shown = false
+ this.toggleElement = null
+ // Event Handlers
+ this._handlers()
+ // Update Instance
+ this._update()
+ // Bind Instance
+ DrawerStore.set(this.element.id, this)
+ }
+
+ private _handlers = () => {
+ const togglers = this._getOption('toggle') as string
+ const closers = this._getOption('close') as string
+
+ if (togglers !== null && togglers.length > 0) {
+ DOMEventHandlerUtil.on(document.body, togglers, 'click', (e: Event) => {
+ e.preventDefault()
+ this.toggleElement = document.getElementById(togglers)
+ this._toggle()
+ })
+ }
+
+ if (closers !== null && closers.length > 0) {
+ DOMEventHandlerUtil.on(document.body, closers, 'click', (e: Event) => {
+ e.preventDefault()
+ this.closeElement = document.getElementById(closers)
+
+ this._hide()
+ })
+ }
+ }
+
+ private _update = () => {
+ const width = String(this._getOption('width'))
+ const direction = String(this._getOption('direction'))
+
+ // Reset state
+ const hasBaseClass = this.element.classList.contains(`${this.options.baseClass}-on`)
+ const bodyCanvasAttr = String(document.body.getAttribute(`data-kt-drawer-${this.name}-`))
+
+ if (hasBaseClass === true && bodyCanvasAttr === 'on') {
+ this.shown = true
+ } else {
+ this.shown = false
+ }
+
+ // Activate/deactivate
+ if (this._getOption('activate') === true) {
+ this.element.classList.add(this.options.baseClass)
+ this.element.classList.add(`${this.options.baseClass}-${direction}`)
+ ElementStyleUtil.set(this.element, 'width', width, true)
+
+ this.lastWidth = parseInt(width)
+ } else {
+ ElementStyleUtil.set(this.element, 'width', '')
+ this.element.classList.remove(this.options.baseClass)
+ this.element.classList.remove(`${this.options.baseClass}-${direction}`)
+ this._hide()
+ }
+ }
+
+ private _getOption = (name: string) => {
+ const attr = this.element.getAttribute(`data-kt-drawer-${name}`)
+ if (attr) {
+ let value = getAttributeValueByBreakpoint(attr)
+ if (value !== null && String(value) === 'true') {
+ return true
+ } else {
+ if (value !== null && String(value) === 'false') {
+ return false
+ }
+ }
+
+ return value
+ } else {
+ const optionName = stringSnakeToCamel(name)
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ } else {
+ return null
+ }
+ }
+ }
+
+ private _toggle = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.drawer.toggle') === false) {
+ return
+ }
+
+ if (this.shown) {
+ this._hide()
+ } else {
+ this._show()
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.drawer.toggled')
+ }
+
+ private _hide = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.drawer.hide') === false) {
+ return
+ }
+
+ this.shown = false
+ this._deleteOverlay()
+ document.body.removeAttribute(`data-kt-drawer-${this.name}`)
+ document.body.removeAttribute(`data-kt-drawer`)
+ this.element.classList.remove(`${this.options.baseClass}-on`)
+ if (this.toggleElement != null) {
+ this.toggleElement.classList.remove('active')
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.drawer.after.hidden')
+ }
+
+ private _show = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.drawer.show') === false) {
+ return
+ }
+
+ this.shown = true
+ this._createOverlay()
+ document.body.setAttribute(`data-kt-drawer-${this.name}`, 'on')
+ document.body.setAttribute('data-kt-drawer', 'on')
+ this.element.classList.add(`${this.options.baseClass}-on`)
+ if (this.toggleElement !== null) {
+ this.toggleElement.classList.add('active')
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.drawer.shown')
+ }
+
+ private _createOverlay = () => {
+ if (this._getOption('overlay') === true) {
+ this.overlayElement = document.createElement('DIV')
+ const elementZIndex = getCSS(this.element, 'z-index')
+ if (elementZIndex) {
+ const overlayZindex = parseInt(elementZIndex) - 1
+ ElementStyleUtil.set(this.overlayElement, 'z-index', overlayZindex) // update
+ }
+ document.body.append(this.overlayElement)
+ const overlayClassOption = this._getOption('overlay-class')
+ if (overlayClassOption) {
+ this.overlayElement.classList.add(overlayClassOption.toString())
+ }
+ this.overlayElement.addEventListener('click', (e) => {
+ e.preventDefault()
+ this._hide()
+ })
+ }
+ }
+
+ private _deleteOverlay = () => {
+ if (this.overlayElement !== null && this.overlayElement.parentNode) {
+ this.overlayElement.parentNode.removeChild(this.overlayElement)
+ }
+ }
+
+ private _getDirection = () => {
+ return String(this._getOption('direction')) === 'left' ? 'left' : 'right'
+ }
+
+ private _getWidth = () => {
+ let width = this._getOption('width')
+ if (width && width === 'auto') {
+ width = getCSS(this.element, 'width')
+ }
+
+ return width
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public toggle = () => {
+ this._toggle()
+ }
+
+ public show = () => {
+ this._show()
+ }
+
+ public hide = () => {
+ this._hide()
+ }
+
+ public isShown = () => {
+ return this.shown
+ }
+
+ public update = () => {
+ this._update()
+ }
+
+ public goElement = () => {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handerId)
+ }
+
+ public trigger = (name: string, event: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Static methods
+ public static hasInstace = (elementId: string): boolean => {
+ return DrawerStore.has(elementId)
+ }
+
+ public static getInstance = (elementId: string) => {
+ return DrawerStore.get(elementId)
+ }
+
+ public static hideAll = () => {
+ const oldInstances = DrawerStore.getAllInstances()
+ oldInstances.forEach((dr) => {
+ dr.hide()
+ })
+ }
+
+ public static updateAll = () => {
+ const oldInstances = DrawerStore.getAllInstances()
+ oldInstances.forEach((dr) => {
+ dr.update()
+ })
+ }
+
+ // Create Instances
+ public static createInstances(selector: string): void {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((element) => {
+ const item = element as HTMLElement
+ let drawer = DrawerComponent.getInstance(item.id)
+ if (!drawer) {
+ drawer = new DrawerComponent(item, defaultDrawerOptions)
+ }
+ drawer.element = item
+ drawer.hide()
+ })
+ }
+
+ // Dismiss instances
+ public static handleDismiss = () => {
+ // External drawer toggle handler
+ DOMEventHandlerUtil.on(document.body, '[data-kt-drawer-dismiss="true"]', 'click', () => {
+ /* @ts-ignore */
+ const element = this.closest('[data-kt-drawer="true"]')
+ if (element) {
+ const drawer = DrawerComponent.getInstance(element)
+ if (drawer && drawer.isShown()) {
+ drawer.hide()
+ }
+ }
+ })
+ }
+
+ // Global Initialization
+ public static initGlobalHandlers(): void {
+ // Window Resize Handling
+ window.addEventListener('resize', function () {
+ let timer: number | undefined
+ throttle(
+ timer,
+ () => {
+ // Locate and update Drawer instances on window resize
+ const elements = document.body.querySelectorAll('[data-kt-drawer="true"]')
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ const instance = DrawerComponent.getInstance(item.id)
+ if (instance) {
+ instance.element = item
+ instance.update()
+ }
+ })
+ },
+ 200
+ )
+ })
+ }
+
+ public static bootstrap = () => {
+ DrawerComponent.createInstances('[data-kt-drawer="true"]')
+ DrawerComponent.initGlobalHandlers()
+ DrawerComponent.handleDismiss()
+ }
+
+ public static reinitialization = () => {
+ DrawerComponent.createInstances('[data-kt-drawer="true"]')
+ DrawerComponent.hideAll()
+ DrawerComponent.updateAll()
+ DrawerComponent.handleDismiss()
+ }
+}
+
+export {DrawerComponent, defaultDrawerOptions}
diff --git a/src/_metronic/assets/ts/components/_FeedbackComponent.ts b/src/_metronic/assets/ts/components/_FeedbackComponent.ts
new file mode 100644
index 0000000..c3ebb12
--- /dev/null
+++ b/src/_metronic/assets/ts/components/_FeedbackComponent.ts
@@ -0,0 +1,152 @@
+import {
+ DataUtil,
+ ElementStyleUtil,
+ EventHandlerUtil,
+ getUniqueIdWithPrefix,
+ getAttributeValueByBreakpoint,
+} from '../_utils/index'
+
+export interface FeedbackOptions {
+ width?: number
+ placement?: string
+ content?: string
+ type?: string
+}
+
+const defaultFeedbackOptions: FeedbackOptions = {
+ width: 100,
+ placement: 'top-center',
+ content: '',
+ type: 'popup',
+}
+
+class FeedbackComponent {
+ element: HTMLElement
+ options: FeedbackOptions
+ instanceUid: string
+ shown: boolean
+
+ constructor(_element: HTMLElement, options: FeedbackOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultFeedbackOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('feedback')
+ this.shown = false
+
+ // Event handlers
+ this._handlers() // will add in the show popup
+ DataUtil.set(this.element, 'feedback', this)
+ }
+
+ private _handlers = () => {
+ this.element.addEventListener('click', (e: Event) => {
+ e.preventDefault()
+ this._go()
+ })
+ }
+
+ private _go = () => {}
+
+ private showPopup = () => {
+ this.element = document.createElement('DIV')
+
+ this.element.classList.add('feedback feedback-popup')
+ this.element.innerHTML = this.options.content || ''
+
+ if (this.options.placement === 'top-center') {
+ this.setPopupTopCenterPosition()
+ }
+
+ document.body.appendChild(this.element)
+ this.element.classList.add('feedback-shown')
+ this.shown = true
+ }
+
+ private setPopupTopCenterPosition = () => {
+ const width = getAttributeValueByBreakpoint(this.options.width?.toString() || '0')
+ const height = ElementStyleUtil.get(this.element, 'height')
+ this.element.classList.add('feedback-top-center')
+ ElementStyleUtil.set(this.element, 'width', width)
+ ElementStyleUtil.set(this.element, 'left', '50%')
+ ElementStyleUtil.set(this.element, 'top', '-' + height)
+ }
+
+ private hidePopup = () => {
+ this.element.remove()
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public show = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.feedback.show') === false) {
+ return
+ }
+
+ if (this.options.type === 'popup') {
+ this.showPopup()
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.feedback.shown')
+
+ return this
+ }
+
+ public hide = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.feedback.hide') === false) {
+ return
+ }
+
+ if (this.options.type === 'popup') {
+ this.hidePopup()
+ }
+
+ this.shown = false
+ EventHandlerUtil.trigger(this.element, 'kt.feedback.hidden')
+ return this
+ }
+
+ public isShown = () => {
+ return this.isShown
+ }
+
+ public getElement = () => {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handerId)
+ }
+
+ public trigger = (name: string, event: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Create Instances
+ public static createInstances(selector: string) {
+ throw new Error('not implemented')
+ }
+
+ // Static methods
+ public static hasInstace(element: HTMLElement) {
+ throw new Error('not implemented')
+ }
+
+ public static getInstance(element: HTMLElement) {
+ throw new Error('not implemented')
+ }
+
+ public static bootstrap(attr: string = '[data-Feedback]') {
+ throw new Error('not implemented')
+ }
+}
+
+export {FeedbackComponent, defaultFeedbackOptions}
diff --git a/src/_metronic/assets/ts/components/_ImageInputComponent.ts b/src/_metronic/assets/ts/components/_ImageInputComponent.ts
new file mode 100644
index 0000000..1301a95
--- /dev/null
+++ b/src/_metronic/assets/ts/components/_ImageInputComponent.ts
@@ -0,0 +1,229 @@
+import {EventHandlerUtil, DataUtil, getUniqueIdWithPrefix, getCSS} from '../_utils/index'
+
+export interface IImageInputOptions {}
+
+export interface IImageInputQueries {
+ componentName: string
+ instanseQuery: string
+ inputQuery: string
+ wrapperQuery: string
+ cancelQuery: string
+ removeQuery: string
+ hiddenQuery: string
+}
+
+const defaultImageInputOptions = {}
+
+const defaultImageInputQueires: IImageInputQueries = {
+ componentName: 'image-input',
+ instanseQuery: '[data-kt-image-input]',
+ inputQuery: 'input[type="file"]',
+ wrapperQuery: '.image-input-wrapper',
+ cancelQuery: '[data-kt-image-input-action="cancel"]',
+ removeQuery: '[data-kt-image-input-action="remove"]',
+ hiddenQuery: 'input[type="hidden"]',
+}
+
+class ImageInputComponent {
+ element: HTMLElement
+ inputElement: HTMLInputElement | null
+ wrapperElement: HTMLElement | null
+ cancelElement: HTMLElement | null
+ removeElement: HTMLElement | null
+ hiddenElement: HTMLInputElement | null
+ src: string = ''
+ options: IImageInputOptions
+ queries: IImageInputQueries
+ uid: string
+ value: string = ''
+
+ constructor(_element: HTMLElement, _options: IImageInputOptions, _queries: IImageInputQueries) {
+ // Variables
+ this.options = Object.assign(defaultImageInputOptions, _options)
+ this.queries = _queries
+ this.uid = getUniqueIdWithPrefix(this.queries.componentName)
+
+ // Elements
+ this.element = _element
+ this.inputElement = this.element.querySelector(this.queries.inputQuery)
+ this.wrapperElement = this.element.querySelector(this.queries.wrapperQuery)
+ this.cancelElement = this.element.querySelector(this.queries.cancelQuery)
+ this.removeElement = this.element.querySelector(this.queries.removeQuery)
+ this.hiddenElement = this.element.querySelector(this.queries.hiddenQuery)
+ if (this.wrapperElement) {
+ this.src = getCSS(this.wrapperElement, 'backgroundImage')
+ }
+
+ // Event Handlers
+ this.handlers()
+
+ DataUtil.set(this.element, this.queries.componentName, this)
+ }
+
+ private handlers(): void {
+ this.element.addEventListener('change', this._change)
+ if (this.cancelElement) {
+ this.cancelElement.addEventListener('click', this._cancel)
+ }
+
+ if (this.removeElement) {
+ this.removeElement.addEventListener('click', this._cancel)
+ }
+ }
+
+ // Event Handlers
+ private _change = (e: Event) => {
+ e.preventDefault()
+
+ if (this.inputElement !== null && this.inputElement.files && this.inputElement.files[0]) {
+ // Fire change event
+ if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.change', e) === false) {
+ return
+ }
+
+ const reader = new FileReader()
+
+ reader.onload = (e: ProgressEvent) => {
+ if (this.wrapperElement && e.target) {
+ this.wrapperElement.style.setProperty('background-image', `url('${e.target.result}')`)
+ }
+ }
+
+ reader.readAsDataURL(this.inputElement.files[0])
+ this.element.classList.add('image-input-changed')
+ this.element.classList.remove('image-input-empty')
+
+ // Fire removed event
+ EventHandlerUtil.trigger(this.element, 'kt.imageinput.changed', e)
+ }
+ }
+
+ private _cancel = (e: Event) => {
+ e.preventDefault()
+
+ // Fire cancel event
+ if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.cancel', e) === false) {
+ return
+ }
+
+ this.element.classList.remove('image-input-changed')
+ this.element.classList.remove('image-input-empty')
+ this.element.style.setProperty('background-image', this.src)
+ if (this.inputElement) {
+ this.inputElement.value = ''
+ }
+
+ if (this.hiddenElement !== null) {
+ this.hiddenElement.value = '0'
+ }
+
+ // Fire canceled event
+ EventHandlerUtil.trigger(this.element, 'kt.imageinput.canceled', e)
+ }
+
+ private _remove = (e: Event) => {
+ e.preventDefault()
+
+ // Fire remove event
+ if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.remove', e) === false) {
+ return
+ }
+
+ this.element.classList.remove('image-input-changed')
+ this.element.classList.add('image-input-empty')
+ if (this.wrapperElement) {
+ this.wrapperElement.style.setProperty('background-image', 'none')
+ }
+
+ if (this.inputElement) {
+ this.inputElement.value = ''
+ }
+
+ if (this.hiddenElement !== null) {
+ this.hiddenElement.value = '1'
+ }
+
+ // Fire removed event
+ EventHandlerUtil.trigger(this.element, 'kt.imageinput.removed', e)
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public getInputElement(): HTMLInputElement | null {
+ return this.inputElement
+ }
+
+ public getElement(): HTMLElement {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ public trigger = (name: string, event: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Static methods
+ public static getInstance = (
+ el: HTMLElement,
+ componentName: string = defaultImageInputQueires.componentName
+ ): ImageInputComponent | undefined => {
+ const ImageInput = DataUtil.get(el, componentName)
+ if (ImageInput) {
+ return ImageInput as ImageInputComponent
+ }
+ }
+
+ public static createInstances = (
+ selector: string = defaultImageInputQueires.instanseQuery,
+ options: IImageInputOptions = defaultImageInputOptions,
+ queries: IImageInputQueries = defaultImageInputQueires
+ ) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ let ImageInput = ImageInputComponent.getInstance(item)
+ if (!ImageInput) {
+ ImageInput = new ImageInputComponent(item, options, queries)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string = defaultImageInputQueires.instanseQuery,
+ options: IImageInputOptions = defaultImageInputOptions,
+ queries: IImageInputQueries = defaultImageInputQueires
+ ): ImageInputComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let ImageInput = ImageInputComponent.getInstance(item)
+ if (!ImageInput) {
+ ImageInput = new ImageInputComponent(item, options, queries)
+ }
+ return ImageInput
+ }
+
+ public static bootstrap = (selector: string = defaultImageInputQueires.instanseQuery) => {
+ ImageInputComponent.createInstances(selector)
+ }
+
+ public static reinitialization = (selector: string = defaultImageInputQueires.instanseQuery) => {
+ ImageInputComponent.createInstances(selector)
+ }
+}
+export {ImageInputComponent, defaultImageInputOptions, defaultImageInputQueires}
diff --git a/src/_metronic/assets/ts/components/_PasswordMeterComponent.ts b/src/_metronic/assets/ts/components/_PasswordMeterComponent.ts
new file mode 100644
index 0000000..8a90252
--- /dev/null
+++ b/src/_metronic/assets/ts/components/_PasswordMeterComponent.ts
@@ -0,0 +1,273 @@
+/* eslint-disable array-callback-return */
+/* eslint-disable no-useless-escape */
+import {DataUtil} from '../_utils/index'
+
+export interface IPasswordMeterOptions {
+ minLength: number
+ checkUppercase: boolean
+ checkLowercase: boolean
+ checkDigit: boolean
+ checkChar: boolean
+ scoreHighlightClass: string
+}
+
+export interface IPasswordMeterQueries {
+ componentName: string
+ instanseQuery: string
+ inputQuery: string
+ visibilityQuery: string
+ highlightQuery: string
+}
+
+const defaultPasswordMeterOptions = {
+ minLength: 8,
+ checkUppercase: true,
+ checkLowercase: true,
+ checkDigit: true,
+ checkChar: true,
+ scoreHighlightClass: 'active',
+}
+
+const defaultPasswordMeterQueires: IPasswordMeterQueries = {
+ componentName: 'password-meter',
+ instanseQuery: '[data-kt-password-meter]',
+ inputQuery: 'input[type]',
+ visibilityQuery: '[data-kt-password-meter-control="visibility"]',
+ highlightQuery: '[data-kt-password-meter-control="highlight"]',
+}
+
+class PasswordMeterComponent {
+ element: HTMLElement
+ inputElement: HTMLInputElement | null
+ visibilityElement: HTMLElement | null
+ highlightElement: HTMLElement | null
+ options: IPasswordMeterOptions
+ queries: IPasswordMeterQueries
+ score: number
+ checkSteps: number
+
+ constructor(
+ _element: HTMLElement,
+ _options: IPasswordMeterOptions,
+ _queries: IPasswordMeterQueries
+ ) {
+ this.element = _element
+ this.options = Object.assign(defaultPasswordMeterOptions, _options)
+ this.queries = _queries
+ this.score = 0
+ this.checkSteps = 5
+
+ // Elements
+ this.inputElement = this.element.querySelector(this.queries.inputQuery)
+ this.visibilityElement = this.element.querySelector(this.queries.visibilityQuery)
+ this.highlightElement = this.element.querySelector(this.queries.highlightQuery)
+
+ // Event Handlers
+ this.handlers()
+
+ DataUtil.set(this.element, this.queries.componentName, this)
+ }
+
+ private handlers(): void {
+ if (this.inputElement) {
+ this.inputElement.addEventListener('input', () => {
+ this.check()
+ })
+ }
+
+ if (this.visibilityElement) {
+ this.visibilityElement.addEventListener('click', () => {
+ this.visitbility()
+ })
+ }
+ }
+
+ private visitbility() {
+ if (this.visibilityElement && this.inputElement) {
+ const visibleIcon = this.visibilityElement.querySelector(
+ 'i:not(.d-none), .svg-icon:not(.d-none)'
+ )
+
+ const hiddenIcon = this.visibilityElement.querySelector('i.d-none, .svg-icon.d-none')
+
+ const typeAttr = this.inputElement.getAttribute('type') || ''
+
+ if (typeAttr === 'password') {
+ this.inputElement.setAttribute('type', 'text')
+ } else {
+ this.inputElement.setAttribute('type', 'password')
+ }
+
+ visibleIcon?.classList.add('d-none')
+ hiddenIcon?.classList.remove('d-none')
+
+ this.inputElement.focus()
+ }
+ }
+
+ private checkScore(): number {
+ return 0
+ }
+
+ private checkLength(): boolean {
+ if (this.inputElement) {
+ return this.inputElement.value.length >= this.options.minLength // 20 score
+ }
+
+ return false
+ }
+
+ private checkLowerCase(): boolean {
+ const val = this.inputElement ? this.inputElement.value : ''
+ return /[a-z]/.test(val) // 20 score
+ }
+
+ private checkUppercase(): boolean {
+ const val = this.inputElement ? this.inputElement.value : ''
+ return /[A-Z]/.test(val) // 20 score
+ }
+
+ private checkDigit(): boolean {
+ const val = this.inputElement ? this.inputElement.value : ''
+ return /[0-9]/.test(val) // 20 score
+ }
+
+ private checkChar(): boolean {
+ const val = this.inputElement ? this.inputElement.value : ''
+ return /[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(val) // 20 score
+ }
+
+ private getCheckScore(): number {
+ let count = 1
+ if (this.options.checkUppercase) {
+ count++
+ }
+
+ if (this.options.checkLowercase) {
+ count++
+ }
+
+ if (this.options.checkDigit) {
+ count++
+ }
+
+ if (this.options.checkChar) {
+ count++
+ }
+
+ this.checkSteps = count
+ return 100 / this.checkSteps
+ }
+
+ private highlight() {
+ const items = this.highlightElement
+ ? [].slice.call(this.highlightElement.querySelectorAll('div'))
+ : []
+ const total = items.length
+ let index = 0
+ const checkScore = this.getCheckScore()
+ const score = this.getScore()
+
+ items.map((item: HTMLElement) => {
+ index++
+ if (checkScore * index * (this.checkSteps / total) <= score) {
+ item.classList.add('active')
+ } else {
+ item.classList.remove('active')
+ }
+ })
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public reset = () => {
+ this.score = 0
+ this.highlight()
+ }
+
+ public getScore() {
+ return this.score
+ }
+
+ public check() {
+ let score = 0
+ const checkScore = this.getCheckScore()
+ if (this.checkLength()) {
+ score = score + checkScore
+ }
+
+ if (this.options.checkUppercase && this.checkLowerCase()) {
+ score = score + checkScore
+ }
+
+ if (this.options.checkLowercase && this.checkUppercase()) {
+ score = score + checkScore
+ }
+
+ if (this.options.checkDigit && this.checkDigit()) {
+ score = score + checkScore
+ }
+
+ if (this.options.checkChar && this.checkChar()) {
+ score = score + checkScore
+ }
+
+ this.score = score
+ this.highlight()
+ }
+
+ // Static methods
+ public static getInstance = (
+ el: HTMLElement,
+ componentName: string = defaultPasswordMeterQueires.componentName
+ ): PasswordMeterComponent | undefined => {
+ const passwordMeter = DataUtil.get(el, componentName)
+ if (passwordMeter) {
+ return passwordMeter as PasswordMeterComponent
+ }
+ }
+
+ public static createInstances = (
+ selector: string = defaultPasswordMeterQueires.instanseQuery,
+ options: IPasswordMeterOptions = defaultPasswordMeterOptions,
+ queries: IPasswordMeterQueries = defaultPasswordMeterQueires
+ ) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ let passwordMeter = PasswordMeterComponent.getInstance(item)
+ if (!passwordMeter) {
+ passwordMeter = new PasswordMeterComponent(item, options, queries)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string = defaultPasswordMeterQueires.instanseQuery,
+ options: IPasswordMeterOptions = defaultPasswordMeterOptions,
+ queries: IPasswordMeterQueries = defaultPasswordMeterQueires
+ ): PasswordMeterComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let passwordMeter = PasswordMeterComponent.getInstance(item)
+ if (!passwordMeter) {
+ passwordMeter = new PasswordMeterComponent(item, options, queries)
+ }
+ return passwordMeter
+ }
+
+ public static bootstrap = (selector: string = defaultPasswordMeterQueires.instanseQuery) => {
+ PasswordMeterComponent.createInstances(selector)
+ }
+
+ public static reinitialization = (
+ selector: string = defaultPasswordMeterQueires.instanseQuery
+ ) => {
+ PasswordMeterComponent.createInstances(selector)
+ }
+}
+export {PasswordMeterComponent, defaultPasswordMeterOptions, defaultPasswordMeterQueires}
diff --git a/src/_metronic/assets/ts/components/_ScrollComponent.ts b/src/_metronic/assets/ts/components/_ScrollComponent.ts
new file mode 100644
index 0000000..67a461f
--- /dev/null
+++ b/src/_metronic/assets/ts/components/_ScrollComponent.ts
@@ -0,0 +1,312 @@
+import {
+ DataUtil,
+ getObjectPropertyValueByKey,
+ stringSnakeToCamel,
+ getAttributeValueByBreakpoint,
+ getViewPort,
+ isVisibleElement,
+ throttle,
+ getCSS,
+ ElementStyleUtil,
+} from '../_utils/index'
+import {CookieComponent} from './_CookieComponent'
+
+export interface ScrollOptions {
+ saveState?: boolean
+}
+
+const defaultScrollOptions: ScrollOptions = {
+ saveState: true,
+}
+
+class ScrollComponent {
+ element: HTMLElement
+ options: ScrollOptions
+ id: string
+
+ constructor(_element: HTMLElement, options: ScrollOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultScrollOptions, options)
+ this.id = this.element.getAttribute('id') || ''
+ this.update()
+ // this.element.setAttribute('data-kt-scrolltop', 'true')
+ DataUtil.set(this.element, 'scroll', this)
+ }
+
+ private getOption = (name: string) => {
+ if (this.element.hasAttribute('data-kt-scroll-' + name) === true) {
+ const attr = this.element.getAttribute('data-kt-scroll-' + name) || ''
+ let value: string | JSON | boolean = getAttributeValueByBreakpoint(attr)
+ if (value !== null && String(value) === 'true') {
+ value = true
+ } else if (value !== null && String(value) === 'false') {
+ value = false
+ }
+
+ return value
+ } else {
+ const optionName = stringSnakeToCamel(name)
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ } else {
+ return null
+ }
+ }
+ }
+
+ private getHeightType = () => {
+ if (this.getOption('height')) {
+ return 'height'
+ }
+ if (this.getOption('min-height')) {
+ return 'min-height'
+ }
+ if (this.getOption('max-height')) {
+ return 'max-height'
+ }
+ }
+
+ private getAutoHeight = () => {
+ let height: number | string = getViewPort().height
+ const dependencies = this.getOption('dependencies')
+ const wrappers = this.getOption('wrappers')
+ const offset = this.getOption('offset')
+
+ // Height dependencies
+ if (dependencies !== null) {
+ const elements = document.querySelectorAll(dependencies as string)
+ if (elements && elements.length > 0) {
+ for (let i = 0, len = elements.length; i < len; i++) {
+ const element = elements[i] as HTMLElement
+ if (isVisibleElement(element) === false) {
+ continue
+ }
+
+ height = height - parseInt(getCSS(element, 'height'))
+ height = height - parseInt(getCSS(element, 'margin-top'))
+ height = height - parseInt(getCSS(element, 'margin-bottom'))
+
+ const borderTop = getCSS(element, 'border-top')
+ if (borderTop) {
+ height = height - parseInt(borderTop)
+ }
+
+ const borderBottom = getCSS(element, 'border-bottom')
+ if (borderBottom) {
+ height = height - parseInt(borderBottom)
+ }
+ }
+ }
+ }
+
+ // Wrappers
+ if (wrappers !== null) {
+ var elements = document.querySelectorAll(wrappers as string)
+ if (elements && elements.length > 0) {
+ for (let i = 0, len = elements.length; i < len; i++) {
+ const element = elements[i] as HTMLElement
+
+ if (!isVisibleElement(element)) {
+ continue
+ }
+
+ height = height - parseInt(getCSS(element, 'margin-top'))
+ height = height - parseInt(getCSS(element, 'margin-bottom'))
+ height = height - parseInt(getCSS(element, 'padding-top'))
+ height = height - parseInt(getCSS(element, 'padding-bottom'))
+
+ const borderTop = getCSS(element, 'border-top')
+ if (borderTop) {
+ height = height - parseInt(borderTop)
+ }
+
+ const borderBottom = getCSS(element, 'border-bottom')
+ if (borderBottom) {
+ height = height - parseInt(borderBottom)
+ }
+ }
+ }
+ }
+
+ // Custom offset
+ if (offset !== null) {
+ height = height - parseInt(offset as string)
+ }
+
+ height = height - parseInt(getCSS(this.element, 'margin-top'))
+ height = height - parseInt(getCSS(this.element, 'margin-bottom'))
+
+ const borderTop = getCSS(this.element, 'border-top')
+ if (borderTop) {
+ height = height - parseInt(borderTop)
+ }
+
+ const borderBottom = getCSS(this.element, 'border-bottom')
+ if (borderBottom) {
+ height = height - parseInt(borderBottom)
+ }
+
+ height = String(height) + 'px'
+
+ return height
+ }
+
+ private setupHeight = () => {
+ let height = this.getHeight()
+ let heightType = this.getHeightType() as string
+
+ // Set height
+ if (height !== null && height.length > 0) {
+ ElementStyleUtil.set(this.element, heightType, height)
+ } else {
+ ElementStyleUtil.set(this.element, heightType, '')
+ }
+ }
+
+ private setupState = () => {
+ if (this.getOption('save-state') === true && this.id) {
+ const cookie = CookieComponent.get(this.id + 'st')
+ if (cookie) {
+ var pos = parseInt(cookie)
+
+ if (pos > 0) {
+ this.element.scrollTop = pos
+ }
+ }
+ }
+ }
+
+ private setupScrollHandler = () => {
+ if (this.getOption('save-state') === true && this.id) {
+ this.element.addEventListener('scroll', this.scrollHandler)
+ } else {
+ this.element.removeEventListener('scroll', this.scrollHandler)
+ }
+ }
+
+ private scrollHandler = () => {
+ const cookieId = this.id + 'st'
+ CookieComponent.set(cookieId, this.element.scrollTop, {})
+ }
+
+ private destroyScrollHandler = () => {
+ this.element.removeEventListener('scroll', this.scrollHandler)
+ }
+
+ private resetHeight = () => {
+ const heghtType = this.getHeightType()
+ if (heghtType) {
+ ElementStyleUtil.set(this.element, heghtType, '')
+ }
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public update = () => {
+ // Activate/deactivate
+ if (
+ this.getOption('activate') === true ||
+ !this.element.hasAttribute('data-kt-scroll-activate')
+ ) {
+ this.setupHeight()
+ this.setupScrollHandler()
+ this.setupState()
+ } else {
+ this.resetHeight()
+ this.destroyScrollHandler()
+ }
+ }
+
+ public getHeight = () => {
+ const heightType = this.getHeightType()
+ const height = this.getOption(heightType || '')
+ if (height instanceof Function) {
+ return height.call(height)
+ } else if (height !== null && typeof height === 'string' && height.toLowerCase() === 'auto') {
+ return this.getAutoHeight()
+ } else {
+ return height
+ }
+ }
+
+ public getElement = () => {
+ return this.element
+ }
+
+ // Static methods
+ public static hasInstace(element: HTMLElement) {
+ return DataUtil.has(element, 'scroll')
+ }
+
+ public static getInstance(element: HTMLElement): ScrollComponent | undefined {
+ if (element !== null && ScrollComponent.hasInstace(element)) {
+ const data = DataUtil.get(element, 'scroll')
+ if (data) {
+ return data as ScrollComponent
+ }
+ }
+ }
+
+ // Create Instances
+ public static createInstances(selector: string) {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((element: Element) => {
+ const item = element as HTMLElement
+ let scroll = ScrollComponent.getInstance(item)
+ if (!scroll) {
+ scroll = new ScrollComponent(item, defaultScrollOptions)
+ }
+ })
+ }
+
+ public static destroyAll(attr: string = '[data-kt-scroll="true"]') {}
+
+ public static bootstrap(attr: string = '[data-kt-scroll="true"]') {
+ ScrollComponent.createInstances(attr)
+ ScrollComponent.resize()
+ }
+
+ public static createInstance = (
+ element: HTMLElement,
+ options: ScrollOptions = defaultScrollOptions
+ ): ScrollComponent | undefined => {
+ let scroll = ScrollComponent.getInstance(element)
+ if (!scroll) {
+ scroll = new ScrollComponent(element, options)
+ }
+ return scroll
+ }
+
+ public static reinitialization(attr: string = '[data-kt-scroll="true"]') {
+ ScrollComponent.createInstances(attr)
+ }
+
+ public static updateAll() {
+ const elements = document.body.querySelectorAll('[data-kt-scroll="true"]')
+ elements.forEach((element: Element) => {
+ const instance = ScrollComponent.getInstance(element as HTMLElement)
+ if (instance) {
+ instance.update()
+ }
+ })
+ }
+
+ public static resize() {
+ // Window Resize Handling
+ window.addEventListener('resize', function () {
+ let timer
+ throttle(
+ timer,
+ () => {
+ // Locate and update Drawer instances on window resize
+ ScrollComponent.updateAll()
+ },
+ 200
+ )
+ })
+ }
+}
+
+export {ScrollComponent, defaultScrollOptions}
diff --git a/src/_metronic/assets/ts/components/_ScrollTopComponent.ts b/src/_metronic/assets/ts/components/_ScrollTopComponent.ts
new file mode 100644
index 0000000..ea8d924
--- /dev/null
+++ b/src/_metronic/assets/ts/components/_ScrollTopComponent.ts
@@ -0,0 +1,148 @@
+import {
+ getScrollTop,
+ getAttributeValueByBreakpoint,
+ throttle,
+ getObjectPropertyValueByKey,
+ stringSnakeToCamel,
+ getUniqueIdWithPrefix,
+ DataUtil,
+ ElementAnimateUtil,
+} from '../_utils/index'
+
+export interface IScrollTopOptions {
+ offset: number
+ speed: number
+}
+
+const defaultScrollTopOptions: IScrollTopOptions = {
+ offset: 200,
+ speed: 600,
+}
+
+class ScrollTopComponent {
+ element: HTMLElement
+ options: IScrollTopOptions
+ instanceUid: string
+
+ constructor(_element: HTMLElement, options: IScrollTopOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultScrollTopOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('scrolltop')
+
+ // Event Handlers
+ this._handlers()
+
+ // Bind Instance
+ DataUtil.set(this.element, 'scrolltop', this)
+ }
+
+ private _handlers = () => {
+ let timer: number
+ window.addEventListener('scroll', () => {
+ throttle(timer, () => {
+ this._scroll()
+ })
+ })
+
+ this.element.addEventListener('click', (e: Event) => {
+ e.preventDefault()
+ this._go()
+ })
+ }
+
+ private _scroll = () => {
+ const offset = parseInt(this._getOption('offset') as string)
+ const pos = getScrollTop() // current vertical position
+ if (pos > offset) {
+ if (!document.body.hasAttribute('data-kt-scrolltop')) {
+ document.body.setAttribute('data-kt-scrolltop', 'on')
+ }
+ } else {
+ if (document.body.hasAttribute('data-kt-scrolltop')) {
+ document.body.removeAttribute('data-kt-scrolltop')
+ }
+ }
+ }
+
+ private _go = () => {
+ const speed = parseInt(this._getOption('speed') as string)
+ ElementAnimateUtil.scrollTop(0, speed)
+ }
+
+ private _getOption = (name: string) => {
+ const attr = this.element.getAttribute(`data-kt-scrolltop-${name}`)
+ if (attr) {
+ const value = getAttributeValueByBreakpoint(attr)
+ return value !== null && String(value) === 'true'
+ }
+
+ const optionName = stringSnakeToCamel(name)
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ }
+
+ return null
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+
+ // Plugin API
+ public go = () => {
+ return this._go()
+ }
+
+ public getElement = () => {
+ return this.element
+ }
+
+ // Static methods
+ public static getInstance = (el: HTMLElement): ScrollTopComponent | undefined => {
+ const scrollTop = DataUtil.get(el, 'scrolltop')
+ if (scrollTop) {
+ return scrollTop as ScrollTopComponent
+ }
+ }
+
+ public static createInstances = (selector: string) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ let scrollTop = ScrollTopComponent.getInstance(item)
+ if (!scrollTop) {
+ scrollTop = new ScrollTopComponent(item, defaultScrollTopOptions)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string,
+ options: IScrollTopOptions = defaultScrollTopOptions
+ ): ScrollTopComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let scrollTop = ScrollTopComponent.getInstance(item)
+ if (!scrollTop) {
+ scrollTop = new ScrollTopComponent(item, options)
+ }
+ return scrollTop
+ }
+
+ public static bootstrap = () => {
+ ScrollTopComponent.createInstances('[data-kt-scrolltop="true"]')
+ }
+
+ public static reinitialization = () => {
+ ScrollTopComponent.createInstances('[data-kt-scrolltop="true"]')
+ }
+
+ public static goTop = () => {
+ ElementAnimateUtil.scrollTop(0, defaultScrollTopOptions.speed)
+ }
+}
+export {ScrollTopComponent, defaultScrollTopOptions}
diff --git a/src/_metronic/assets/ts/components/_StepperComponent.ts b/src/_metronic/assets/ts/components/_StepperComponent.ts
new file mode 100644
index 0000000..4e88aa6
--- /dev/null
+++ b/src/_metronic/assets/ts/components/_StepperComponent.ts
@@ -0,0 +1,332 @@
+import {
+ getElementIndex,
+ getUniqueIdWithPrefix,
+ ElementAnimateUtil,
+ EventHandlerUtil,
+ DataUtil,
+ DOMEventHandlerUtil,
+ ElementStyleUtil,
+} from '../_utils/index'
+
+export interface IStepperOptions {
+ startIndex: number
+ animation: boolean
+ animationSpeed: string
+ animationNextClass: string
+ animationPreviousClass: string
+}
+
+const defaultStepperOptions: IStepperOptions = {
+ startIndex: 1,
+ animation: false,
+ animationSpeed: '0.3s',
+ animationNextClass: 'animate__animated animate__slideInRight animate__fast',
+ animationPreviousClass: 'animate__animated animate__slideInLeft animate__fast',
+}
+
+class StepperComponent {
+ element: HTMLElement
+ options: IStepperOptions
+ instanceUid: string
+ steps: NodeListOf
+ btnNext: HTMLElement | null
+ btnPrev: HTMLElement | null
+ btnSubmit: HTMLElement | null
+ totatStepsNumber: number = 0
+ passedStepIndex: number = 0
+ currentStepIndex: number = 1
+
+ constructor(_element: HTMLElement, options: IStepperOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultStepperOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('stepper')
+
+ // Elements
+ this.steps = this.element.querySelectorAll('[data-kt-stepper-element="nav"]')
+ this.btnNext = this.element.querySelector('[data-kt-stepper-action="next"]')
+ this.btnPrev = this.element.querySelector('[data-kt-stepper-action="previous"]')
+ this.btnSubmit = this.element.querySelector('[data-kt-stepper-action="submit"]')
+
+ // Variables
+ this.totatStepsNumber = this.steps?.length | 0
+ this.passedStepIndex = 0
+ this.currentStepIndex = 1
+
+ // Set Current Step
+ if (this.options.startIndex > 1) {
+ this._goTo(this.options.startIndex)
+ }
+
+ // Event Handlers
+ this.initHandlers()
+
+ // Bind Instance
+ DataUtil.set(this.element, 'stepper', this)
+ }
+
+ private _goTo = (index: number) => {
+ EventHandlerUtil.trigger(this.element, 'kt.stepper.change')
+ // Skip if this step is already shown
+ if (index === this.currentStepIndex || index > this.totatStepsNumber || index < 0) {
+ return
+ }
+
+ // Validate step number
+ index = parseInt(index.toString())
+ // Set current step
+ this.passedStepIndex = this.currentStepIndex
+ this.currentStepIndex = index
+
+ // Refresh elements
+ this.refreshUI()
+
+ EventHandlerUtil.trigger(this.element, 'kt.stepper.changed')
+ }
+
+ private initHandlers = () => {
+ this.btnNext?.addEventListener('click', (e: Event) => {
+ e.preventDefault()
+
+ EventHandlerUtil.trigger(this.element, 'kt.stepper.next', e)
+ })
+
+ this.btnPrev?.addEventListener('click', (e: Event) => {
+ e.preventDefault()
+
+ EventHandlerUtil.trigger(this.element, 'kt.stepper.previous', e)
+ })
+
+ DOMEventHandlerUtil.on(this.element, '[data-kt-stepper-action="step"]', 'click', (e: Event) => {
+ e.preventDefault()
+
+ if (this.steps && this.steps.length > 0) {
+ for (let i = 0; i < this.steps.length; i++) {
+ if ((this.steps[i] as HTMLElement) === this.element) {
+ let index = i + 1
+
+ const stepDirection = this._getStepDirection(index)
+ EventHandlerUtil.trigger(this.element, `stepper.${stepDirection}`, e)
+ return
+ }
+ }
+ }
+ })
+ }
+
+ private _getStepDirection = (index: number) => {
+ return index > this.currentStepIndex ? 'next' : 'previous'
+ }
+
+ private getStepContent = (index: number) => {
+ const content = this.element.querySelectorAll('[data-kt-stepper-element="content"]')
+ if (!content) {
+ return false
+ }
+
+ if (content[index - 1]) {
+ return content[index - 1]
+ }
+
+ return false
+ }
+
+ private getLastStepIndex = () => {
+ return this.totatStepsNumber
+ }
+
+ private getTotalStepsNumber = () => {
+ return this.totatStepsNumber
+ }
+
+ private refreshUI = () => {
+ let state = ''
+
+ if (this.isLastStep()) {
+ state = 'last'
+ } else if (this.isFirstStep()) {
+ state = 'first'
+ } else {
+ state = 'between'
+ }
+
+ // Set state class
+ this.element.classList.remove('last')
+ this.element.classList.remove('first')
+ this.element.classList.remove('between')
+
+ this.element.classList.add(state)
+
+ // Step Items
+ const elements = this.element.querySelectorAll(
+ '[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]'
+ )
+
+ if (!elements || elements.length <= 0) {
+ return
+ }
+
+ for (var i = 0, len = elements.length; i < len; i++) {
+ var element = elements[i] as HTMLElement
+ var index = getElementIndex(element) + 1
+
+ element.classList.remove('current')
+ element.classList.remove('completed')
+ element.classList.remove('pending')
+
+ if (index === this.currentStepIndex) {
+ element.classList.add('current')
+
+ if (
+ this.options.animation !== false &&
+ element.getAttribute('data-kt-stepper-element') === 'content'
+ ) {
+ ElementStyleUtil.set(element, 'animationDuration', this.options.animationSpeed)
+
+ const animation =
+ this._getStepDirection(this.passedStepIndex) === 'previous'
+ ? this.options.animationPreviousClass
+ : this.options.animationNextClass
+ ElementAnimateUtil.animateClass(element, animation)
+ }
+ } else {
+ if (index < this.currentStepIndex) {
+ element.classList.add('completed')
+ } else {
+ element.classList.add('pending')
+ }
+ }
+ }
+ }
+
+ private isLastStep = () => {
+ return this.currentStepIndex === this.totatStepsNumber
+ }
+
+ private isFirstStep = () => {
+ return this.currentStepIndex === 1
+ }
+
+ private isBetweenStep = () => {
+ return this.isLastStep() === false && this.isFirstStep() === false
+ }
+
+ // ///////////////////////
+ // // ** Public API ** //
+ // ///////////////////////
+
+ // // Plugin API
+ public goto = (index: number) => {
+ return this._goTo(index)
+ }
+
+ public goNext = () => {
+ return this.goto(this.getNextStepIndex())
+ }
+
+ public goPrev = () => {
+ return this.goto(this.getPrevStepIndex())
+ }
+
+ public goFirst = () => {
+ return this.goto(1)
+ }
+
+ public goLast = () => {
+ return this.goto(this.getLastStepIndex())
+ }
+
+ public getCurrentStepIndex = () => {
+ return this.currentStepIndex
+ }
+
+ public getNextStepIndex = () => {
+ if (this.totatStepsNumber >= this.currentStepIndex + 1) {
+ return this.currentStepIndex + 1
+ } else {
+ return this.totatStepsNumber
+ }
+ }
+
+ public getPassedStepIndex = () => {
+ return this.passedStepIndex
+ }
+
+ public getPrevStepIndex = () => {
+ if (this.currentStepIndex - 1 > 1) {
+ return this.currentStepIndex - 1
+ } else {
+ return 1
+ }
+ }
+
+ public getElement = (index: number) => {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ public destroy = () => {
+ console.log('destroy stepper')
+ }
+
+ public trigger = (name: string, event: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Static methods
+ public static hasInstace(element: HTMLElement): boolean {
+ return DataUtil.has(element, 'stepper')
+ }
+
+ public static getInstance(element: HTMLElement): StepperComponent | undefined {
+ if (element !== null && StepperComponent.hasInstace(element)) {
+ const data = DataUtil.get(element, 'stepper')
+ if (data) {
+ return data as StepperComponent
+ }
+ }
+ }
+
+ // Create Instances
+ public static createInstances(selector: string): void {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((element) => {
+ const item = element as HTMLElement
+ let stepper = StepperComponent.getInstance(item)
+ if (!stepper) {
+ stepper = new StepperComponent(item, defaultStepperOptions)
+ }
+ })
+ }
+
+ public static createInsance = (
+ element: HTMLElement,
+ options: IStepperOptions = defaultStepperOptions
+ ): StepperComponent | null => {
+ if (!element) {
+ return null
+ }
+ let stepper = StepperComponent.getInstance(element)
+ if (!stepper) {
+ stepper = new StepperComponent(element, options)
+ }
+ return stepper
+ }
+
+ public static bootstrap(attr: string = '[data-kt-stepper]') {
+ StepperComponent.createInstances(attr)
+ }
+}
+
+export {StepperComponent, defaultStepperOptions}
diff --git a/src/_metronic/assets/ts/components/_StickyComponent.ts b/src/_metronic/assets/ts/components/_StickyComponent.ts
new file mode 100644
index 0000000..0a5bd85
--- /dev/null
+++ b/src/_metronic/assets/ts/components/_StickyComponent.ts
@@ -0,0 +1,285 @@
+import {
+ getElementOffset,
+ getScrollTop,
+ getAttributeValueByBreakpoint,
+ getUniqueIdWithPrefix,
+ getObjectPropertyValueByKey,
+ stringSnakeToCamel,
+ getCSS,
+ DataUtil,
+ ElementAnimateUtil,
+ ElementStyleUtil,
+ EventHandlerUtil,
+} from '../_utils/index'
+
+export interface StickyOptions {
+ offset: number
+ reverse: boolean
+ animation: boolean
+ animationSpeed: string
+ animationClass: string
+}
+
+const defaultStickyOptions: StickyOptions = {
+ offset: 200,
+ reverse: false,
+ animation: true,
+ animationSpeed: '0.3s',
+ animationClass: 'animation-slide-in-down',
+}
+
+class StickyComponent {
+ element: HTMLElement
+ options: StickyOptions
+ instanceUid: string
+ instanceName: string | null = ''
+ attributeName: string
+ eventTriggerState: boolean
+ lastScrollTop: number
+
+ constructor(_element: HTMLElement, options: StickyOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultStickyOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('sticky')
+ this.instanceName = this.element.getAttribute('data-kt-sticky-name')
+ this.attributeName = 'data-kt-sticky-' + this.instanceName
+ this.eventTriggerState = true
+ this.lastScrollTop = 0
+
+ // Event Handlers
+ window.addEventListener('scroll', this.scroll)
+
+ // Initial Launch
+ this.scroll()
+
+ DataUtil.set(this.element, 'sticky', this)
+ }
+
+ private scroll = () => {
+ let offset = this.getOption('offset')
+ let reverse = this.getOption('reverse')
+
+ // Exit if false
+ if (offset === false) {
+ return
+ }
+
+ let offsetNum = 0
+ if (typeof offset === 'string') {
+ offsetNum = parseInt(offset)
+ }
+
+ const st = getScrollTop()
+
+ // Reverse scroll mode
+ if (reverse === true) {
+ // Release on reverse scroll mode
+ if (st > offsetNum && this.lastScrollTop < st) {
+ if (document.body.hasAttribute(this.attributeName) === false) {
+ this.enable()
+ document.body.setAttribute(this.attributeName, 'on')
+ }
+
+ if (this.eventTriggerState === true) {
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.on')
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+
+ this.eventTriggerState = false
+ }
+ } else {
+ // Back scroll mode
+ if (document.body.hasAttribute(this.attributeName)) {
+ this.disable()
+ document.body.removeAttribute(this.attributeName)
+ }
+
+ if (this.eventTriggerState === false) {
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.off')
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+
+ this.eventTriggerState = true
+ }
+ }
+
+ this.lastScrollTop = st
+ return
+ }
+
+ // Classic scroll mode
+ if (st > offsetNum) {
+ if (document.body.hasAttribute(this.attributeName) === false) {
+ this.enable()
+ document.body.setAttribute(this.attributeName, 'on')
+ }
+
+ if (this.eventTriggerState === true) {
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.on')
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+ this.eventTriggerState = false
+ }
+ } else {
+ // back scroll mode
+ if (document.body.hasAttribute(this.attributeName) === true) {
+ this.disable()
+ document.body.removeAttribute(this.attributeName)
+ }
+
+ if (this.eventTriggerState === false) {
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.off')
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+ this.eventTriggerState = true
+ }
+ }
+ }
+
+ private getOption = (name: string) => {
+ const dataStickyAttr = 'data-kt-sticky-' + name
+ if (this.element.hasAttribute(dataStickyAttr) === true) {
+ const attrValueInStr = this.element.getAttribute(dataStickyAttr)
+ const attrValue = getAttributeValueByBreakpoint(attrValueInStr || '')
+ if (attrValue !== null && String(attrValue) === 'true') {
+ return true
+ } else if (attrValue !== null && String(attrValue) === 'false') {
+ return false
+ }
+
+ return attrValue
+ } else {
+ const optionName = stringSnakeToCamel(name)
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ }
+ }
+ }
+
+ private disable = () => {
+ ElementStyleUtil.remove(this.element, 'top')
+ ElementStyleUtil.remove(this.element, 'width')
+ ElementStyleUtil.remove(this.element, 'left')
+ ElementStyleUtil.remove(this.element, 'right')
+ ElementStyleUtil.remove(this.element, 'z-index')
+ ElementStyleUtil.remove(this.element, 'position')
+ }
+
+ private enable = (update: boolean = false) => {
+ const top = this.getOption('top')
+ const left = this.getOption('left')
+ // const right = this.getOption("right");
+ let width = this.getOption('width')
+ const zindex = this.getOption('zindex')
+
+ if (update !== true && this.getOption('animation') === true) {
+ ElementStyleUtil.set(this.element, 'animationDuration', this.getOption('animationSpeed'))
+ ElementAnimateUtil.animateClass(this.element, 'animation ' + this.getOption('animationClass'))
+ }
+
+ if (zindex !== null) {
+ ElementStyleUtil.set(this.element, 'z-index', zindex)
+ ElementStyleUtil.set(this.element, 'position', 'fixed')
+ }
+
+ if (top !== null) {
+ ElementStyleUtil.set(this.element, 'top', top)
+ }
+
+ if (width !== null && width !== undefined) {
+ const widthTarget = getObjectPropertyValueByKey(width, 'target')
+ if (widthTarget) {
+ const targetElement = document.querySelector(widthTarget)
+ if (targetElement) {
+ width = getCSS(targetElement, 'width')
+ }
+ }
+ ElementStyleUtil.set(this.element, 'width', width)
+ }
+
+ if (left !== null) {
+ if (String(left).toLowerCase() === 'auto') {
+ var offsetLeft = getElementOffset(this.element).left
+
+ if (offsetLeft > 0) {
+ ElementStyleUtil.set(this.element, 'left', String(offsetLeft) + 'px')
+ }
+ }
+ }
+ }
+
+ public update = () => {
+ if (document.body.hasAttribute(this.attributeName) === true) {
+ this.disable()
+ document.body.removeAttribute(this.attributeName)
+ this.enable(true)
+ document.body.setAttribute(this.attributeName, 'on')
+ }
+ }
+
+ // Event API
+ public on = (name: string, callBack: Function) => {
+ return EventHandlerUtil.on(this.element, name, callBack)
+ }
+
+ public one = (name: string, callback: Function) => {
+ return EventHandlerUtil.one(this.element, name, callback)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ public trigger = (name: string) => {
+ return EventHandlerUtil.trigger(this.element, name)
+ }
+
+ // Static methods
+ public static hasInstace(element: HTMLElement) {
+ return DataUtil.has(element, 'sticky')
+ }
+
+ public static getInstance(element: HTMLElement): StickyComponent | undefined {
+ if (element !== null && StickyComponent.hasInstace(element)) {
+ const data = DataUtil.get(element, 'sticky')
+ if (data) {
+ return data as StickyComponent
+ }
+ }
+ }
+
+ // Create Instances
+ public static createInstances(selector: string) {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((element) => {
+ const item = element as HTMLElement
+ let sticky = StickyComponent.getInstance(item)
+ if (!sticky) {
+ sticky = new StickyComponent(item, defaultStickyOptions)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string,
+ options: StickyOptions = defaultStickyOptions
+ ): StickyComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let sticky = StickyComponent.getInstance(item)
+ if (!sticky) {
+ sticky = new StickyComponent(item, options)
+ }
+ return sticky
+ }
+
+ public static bootstrap(attr: string = '[data-kt-sticky="true"]') {
+ StickyComponent.createInstances(attr)
+ }
+
+ public static reInitialization(attr: string = '[data-kt-sticky="true"]') {
+ StickyComponent.createInstances(attr)
+ }
+}
+
+export {StickyComponent, defaultStickyOptions}
diff --git a/src/_metronic/assets/ts/components/_SwapperComponent.ts b/src/_metronic/assets/ts/components/_SwapperComponent.ts
new file mode 100644
index 0000000..31e99e8
--- /dev/null
+++ b/src/_metronic/assets/ts/components/_SwapperComponent.ts
@@ -0,0 +1,210 @@
+import {
+ getAttributeValueByBreakpoint,
+ stringSnakeToCamel,
+ getObjectPropertyValueByKey,
+ EventHandlerUtil,
+ throttle,
+} from '../_utils/index'
+
+export class SwapperStore {
+ static store: Map = new Map()
+
+ public static set(instanceId: string, drawerComponentObj: SwapperComponent): void {
+ if (SwapperStore.has(instanceId)) {
+ return
+ }
+
+ SwapperStore.store.set(instanceId, drawerComponentObj)
+ }
+
+ public static get(instanceId: string): SwapperComponent | undefined {
+ if (!SwapperStore.has(instanceId)) {
+ return
+ }
+ return SwapperStore.store.get(instanceId)
+ }
+
+ public static remove(instanceId: string): void {
+ if (!SwapperStore.has(instanceId)) {
+ return
+ }
+
+ SwapperStore.store.delete(instanceId)
+ }
+
+ public static has(instanceId: string): boolean {
+ return SwapperStore.store.has(instanceId)
+ }
+
+ public static getAllInstances() {
+ return SwapperStore.store
+ }
+}
+
+export interface ISwapperOptions {
+ mode: string
+}
+
+export interface ISwapperQueries {
+ componentName: string
+ instanseQuery: string
+ attrQuery: string
+}
+
+const defaultSwapperOptions: ISwapperOptions = {
+ mode: 'append',
+}
+
+const defaultSwapperQueires: ISwapperQueries = {
+ componentName: 'swapper',
+ instanseQuery: '[data-kt-swapper="true"]',
+ attrQuery: 'data-kt-swapper-',
+}
+
+class SwapperComponent {
+ element: HTMLElement
+ options: ISwapperOptions
+ queries: ISwapperQueries
+
+ constructor(_element: HTMLElement, _options: ISwapperOptions, _queries: ISwapperQueries) {
+ this.element = _element
+ this.options = Object.assign(defaultSwapperOptions, _options)
+ this.queries = _queries
+
+ // Initial update
+ this.update()
+
+ SwapperStore.set(this.element.id, this)
+ }
+
+ private getOption(name: string) {
+ const attr = this.element.getAttribute(`${this.queries.attrQuery}${name}`)
+ if (attr) {
+ let value = getAttributeValueByBreakpoint(attr)
+ if (attr != null && String(value) === 'true') {
+ return true
+ } else if (value !== null && String(value) === 'false') {
+ return false
+ }
+ return value
+ } else {
+ const optionName = stringSnakeToCamel(name)
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ } else {
+ return null
+ }
+ }
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public update = () => {
+ const parentSelector = this.getOption('parent')?.toString()
+ const mode = this.getOption('mode')
+ const parentElement = parentSelector ? document.querySelector(parentSelector) : null
+ if (parentElement && this.element.parentNode !== parentElement) {
+ const alreadyPended = document.getElementById('kt_header_menu') !== null
+ if (!alreadyPended) {
+ if (mode === 'prepend') {
+ parentElement.prepend(this.element)
+ } else if (mode === 'append') {
+ parentElement.append(this.element)
+ }
+ }
+ }
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ public trigger = (name: string, event: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Static methods
+ public static getInstance = (
+ el: HTMLElement,
+ componentName: string = defaultSwapperQueires.componentName
+ ): SwapperComponent | null => {
+ const place = SwapperStore.get(el.id)
+ if (place) {
+ return place as SwapperComponent
+ }
+
+ return null
+ }
+
+ public static createInstances = (
+ selector: string = defaultSwapperQueires.instanseQuery,
+ options: ISwapperOptions = defaultSwapperOptions,
+ queries: ISwapperQueries = defaultSwapperQueires
+ ) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ let place = SwapperComponent.getInstance(item)
+ if (!place) {
+ place = new SwapperComponent(item, options, queries)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string = defaultSwapperQueires.instanseQuery,
+ options: ISwapperOptions = defaultSwapperOptions,
+ queries: ISwapperQueries = defaultSwapperQueires
+ ): SwapperComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let place = SwapperComponent.getInstance(item)
+ if (!place) {
+ place = new SwapperComponent(item, options, queries)
+ }
+ return place
+ }
+
+ public static bootstrap = (selector: string = defaultSwapperQueires.instanseQuery) => {
+ SwapperComponent.createInstances(selector)
+ }
+
+ public static reinitialization = (selector: string = defaultSwapperQueires.instanseQuery) => {
+ SwapperComponent.createInstances(selector)
+ }
+}
+
+// Window resize handler
+window.addEventListener('resize', function () {
+ let timer
+ throttle(
+ timer,
+ () => {
+ // Locate and update Offcanvas instances on window resize
+ const elements = document.querySelectorAll(defaultSwapperQueires.instanseQuery)
+ elements.forEach((el) => {
+ const place = SwapperComponent.getInstance(el as HTMLElement)
+ if (place) {
+ place.update()
+ }
+ })
+ },
+ 200
+ )
+})
+
+export {SwapperComponent, defaultSwapperOptions, defaultSwapperQueires}
diff --git a/src/_metronic/assets/ts/components/_ToggleComponent.ts b/src/_metronic/assets/ts/components/_ToggleComponent.ts
new file mode 100644
index 0000000..9119b94
--- /dev/null
+++ b/src/_metronic/assets/ts/components/_ToggleComponent.ts
@@ -0,0 +1,200 @@
+import {DataUtil, getUniqueIdWithPrefix, EventHandlerUtil} from '../_utils/index'
+// Helpers
+import {CookieComponent} from './_CookieComponent'
+
+export interface ToggleOptions {
+ saveState: boolean
+ targetState?: string
+ toggleState?: string
+ targetToggleMode?: string
+}
+
+const defaultToggleOptions: ToggleOptions = {
+ saveState: false,
+}
+
+class ToggleComponent {
+ element: HTMLElement
+ instanceUid: string
+ options: ToggleOptions
+ state: string = ''
+ mode: string = ''
+ target: HTMLElement | null = null
+ attribute: string = ''
+
+ constructor(_element: HTMLElement, options: ToggleOptions) {
+ this.options = Object.assign(defaultToggleOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('toggle')
+ this.element = _element
+
+ const elementTargetAttr = this.element.getAttribute('data-kt-toggle-target')
+ if (elementTargetAttr) {
+ this.target = document.querySelector(elementTargetAttr)
+ }
+ const elementToggleAttr = this.element.getAttribute('data-kt-toggle-state')
+ this.state = elementToggleAttr || ''
+ const elementModeAttr = this.element.getAttribute('data-kt-toggle-mode')
+ this.mode = elementModeAttr || ''
+ this.attribute = 'data-kt-' + this.element.getAttribute('data-kt-toggle-name')
+
+ // Event Handlers
+ this._handlers()
+
+ // Update Instance
+ // Bind Instance
+ DataUtil.set(this.element, 'toggle', this)
+ }
+
+ private _handlers = () => {
+ this.element.addEventListener('click', (e: Event) => {
+ e.preventDefault()
+
+ if (this.mode === '') {
+ this._toggle()
+ return
+ }
+
+ if (this.mode === 'off' && !this._isEnabled()) {
+ this._toggle()
+ } else if (this.mode === 'on' && this._isEnabled()) {
+ this._toggle()
+ }
+ })
+ }
+
+ // Event handlers
+ private _toggle = () => {
+ // Trigger "after.toggle" event
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.change')
+
+ if (this._isEnabled()) {
+ this._disable()
+ } else {
+ this._enable()
+ }
+
+ // Trigger "before.toggle" event
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.changed')
+ return this
+ }
+
+ private _enable = () => {
+ if (this._isEnabled()) {
+ return
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.enable')
+ this.target?.setAttribute(this.attribute, 'on')
+ if (this.state.length > 0) {
+ this.element.classList.add(this.state)
+ }
+
+ if (this.options.saveState) {
+ CookieComponent.set(this.attribute, 'on', {})
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.enabled')
+ return this
+ }
+
+ private _disable = () => {
+ if (!this._isEnabled()) {
+ return false
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.disable')
+ this.target?.removeAttribute(this.attribute)
+
+ if (this.state.length > 0) {
+ this.element.classList.remove(this.state)
+ }
+
+ if (this.options.saveState) {
+ CookieComponent.delete(this.attribute)
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.disabled')
+ return this
+ }
+
+ private _isEnabled = () => {
+ if (!this.target) {
+ return false
+ }
+
+ return String(this.target.getAttribute(this.attribute)).toLowerCase() === 'on'
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+
+ // Plugin API
+ // Plugin API
+ public toggle = () => {
+ return this._toggle()
+ }
+
+ public enable = () => {
+ return this._enable()
+ }
+
+ public disable = () => {
+ return this._disable()
+ }
+
+ public isEnabled = () => {
+ return this._isEnabled()
+ }
+
+ public goElement = () => {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ public trigger = (name: string, event?: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Static methods
+ public static getInstance = (el: HTMLElement) => {
+ const toggleElement = DataUtil.get(el, 'toggle')
+ if (toggleElement) {
+ return toggleElement
+ }
+
+ return null
+ }
+
+ public static createInstances = (selector: string) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ let toggle = ToggleComponent.getInstance(el)
+ if (!toggle) {
+ toggle = new ToggleComponent(el, defaultToggleOptions)
+ }
+ })
+ }
+
+ public static reinitialization = () => {
+ ToggleComponent.createInstances('[data-kt-toggle]')
+ }
+
+ public static bootstrap = () => {
+ ToggleComponent.createInstances('[data-kt-toggle]')
+ }
+}
+
+export {ToggleComponent, defaultToggleOptions}
diff --git a/src/_metronic/assets/ts/components/index.ts b/src/_metronic/assets/ts/components/index.ts
new file mode 100644
index 0000000..bf59774
--- /dev/null
+++ b/src/_metronic/assets/ts/components/index.ts
@@ -0,0 +1,14 @@
+export * from './_CookieComponent'
+export * from './_DrawerComponent'
+export * from './_FeedbackComponent'
+export * from './_ImageInputComponent'
+export * from './_ScrollComponent'
+export * from './_ScrollTopComponent'
+export * from './_StepperComponent'
+export * from './_StickyComponent'
+export * from './_ToggleComponent'
+// export * from './_DialerComponent';
+export * from './_PasswordMeterComponent'
+export * from './_SwapperComponent'
+export * from './MenuComponent'
+export * from './SearchComponent'
diff --git a/src/_metronic/assets/ts/index.ts b/src/_metronic/assets/ts/index.ts
new file mode 100644
index 0000000..eb9a9f9
--- /dev/null
+++ b/src/_metronic/assets/ts/index.ts
@@ -0,0 +1,43 @@
+export * as KTUtil from './_utils/index'
+export * as components from './components/index'
+// declare global {
+// interface Window {
+// keenthemes: any;
+// }
+// }
+
+// window.keenthemes = {
+// components: {
+// ScrollTop: components.ScrollTopComponent,
+// Coockie: components.CookieComponent,
+// Drawer: components.DrawerComponent,
+// Feedback: components.FeedbackComponent,
+// ImageInput: components.ImageInputComponent,
+// Scroll: components.ScrollComponent,
+// Stepper: components.StepperComponent,
+// Sticky: components.StickyComponent,
+// Toggle: components.ToggleComponent,
+// Menu: components.MenuComponent,
+// Search: components.SearchComponent,
+// Dialder: components.DialerComponent,
+// PasswordMeter: components.PasswordMeterComponent,
+// Place: components.PlaceComponent,
+// defaultDialerOptions: components.defaultDialerOptions,
+// defaultDialderQueries: components.defaultDialerQueires,
+// defaultPasswordMeterOptions: components.defaultPasswordMeterOptions,
+// defaultPasswordMeterQueries: components.defaultPasswordMeterQueires,
+// defaultPlaceOptions: components.defaultPlaceOptions,
+// defaultPlaceQueries: components.defaultPlaceQueires,
+// defaultDrawerOptions: components.defaultDrawerOptions,
+// defaultFeedbackOptions: components.defaultFeedbackOptions,
+// defaultImageInputOptions: components.defaultImageInputOptions,
+// defaultScrollOptions: components.defaultScrollOptions,
+// defaultScrollTopOptions: components.defaultScrollTopOptions,
+// defaultStepperOptions: components.defaultStepperOptions,
+// defaultStickyOptions: components.defaultStickyOptions,
+// defaultToggleOptions: components.defaultToggleOptions,
+// defaultMenuOptions: components.defaultMenuOptions,
+// defaultSearchOptions: components.defaultSearchOptions,
+// },
+// utils: KTUtil,
+// };
diff --git a/src/_metronic/assets/ts/layout/ThemeMode.ts b/src/_metronic/assets/ts/layout/ThemeMode.ts
new file mode 100644
index 0000000..d96c629
--- /dev/null
+++ b/src/_metronic/assets/ts/layout/ThemeMode.ts
@@ -0,0 +1,195 @@
+import {themeMenuModeLSKey, themeModelSKey} from '../../../partials'
+import {EventHandlerUtil} from '../_utils'
+
+type Mode = 'light' | 'dark' | 'system'
+
+class ThemeMode {
+ menu: HTMLElement | null = null
+ element: HTMLElement | null = null
+
+ public getMode = (): Mode => {
+ const menuMode: Mode | '' = this.getMenuMode()
+ const defaultMode = 'light'
+ if (!localStorage) {
+ return defaultMode
+ }
+
+ const ls = localStorage.getItem(themeModelSKey)
+ if (ls) {
+ return ls as Mode
+ }
+
+ const dataTheme = this.element?.getAttribute('data-theme')
+ if (dataTheme) {
+ return dataTheme as Mode
+ }
+
+ if (!menuMode) {
+ return defaultMode
+ }
+
+ if (menuMode === 'system') {
+ return this.getSystemMode()
+ }
+
+ return menuMode
+ }
+
+ public setMode = (mode: Mode, menuMode: Mode | ''): void => {
+ // Check input values
+ if (mode !== 'light' && mode !== 'dark') {
+ return
+ }
+
+ // Reset mode if system mode was changed
+ if (menuMode === 'system') {
+ if (this.getSystemMode() !== mode) {
+ mode = this.getSystemMode()
+ }
+ }
+
+ // Check menu mode
+ if (!menuMode) {
+ menuMode = mode
+ }
+
+ // Read active menu mode value
+ const activeMenuItem: HTMLElement | null =
+ this.menu?.querySelector('[data-kt-element="mode"][data-kt-value="' + menuMode + '"]') || null
+
+ // Enable switching state
+ this.element?.setAttribute('data-kt-theme-mode-switching', 'true')
+
+ // Set mode to the target element
+ this.element?.setAttribute('data-theme', mode)
+
+ // Disable switching state
+ const self = this
+ setTimeout(function () {
+ self.element?.removeAttribute('data-kt-theme-mode-switching')
+ }, 300)
+
+ // Store mode value in storage
+ if (localStorage) {
+ localStorage.setItem(themeModelSKey, mode)
+ }
+
+ // Set active menu item
+ if (activeMenuItem && localStorage) {
+ localStorage.setItem(themeMenuModeLSKey, menuMode)
+ this.setActiveMenuItem(activeMenuItem)
+ }
+
+ // Flip images
+ this.flipImages()
+ }
+
+ public getMenuMode = (): Mode | '' => {
+ const menuItem = this.menu?.querySelector('.active[data-kt-element="mode"]')
+ const dataKTValue = menuItem?.getAttribute('data-kt-value')
+ if (dataKTValue) {
+ return dataKTValue as Mode
+ }
+
+ const ls = localStorage ? localStorage.getItem(themeMenuModeLSKey) : null
+ return (ls as Mode) || ''
+ }
+
+ public getSystemMode = (): Mode => {
+ return window.matchMedia('(prefers-color-scheme: dark)') ? 'dark' : 'light'
+ }
+
+ private initMode = (): void => {
+ this.setMode(this.getMode(), this.getMenuMode())
+ if (this.element) {
+ EventHandlerUtil.trigger(this.element, 'kt.thememode.init')
+ }
+ }
+
+ private getActiveMenuItem = (): HTMLElement | null => {
+ return (
+ this.menu?.querySelector(
+ '[data-kt-element="mode"][data-kt-value="' + this.getMenuMode() + '"]'
+ ) || null
+ )
+ }
+
+ private setActiveMenuItem = (item: HTMLElement): void => {
+ const menuMode = item.getAttribute('data-kt-value')
+ const activeItem = this.menu?.querySelector('.active[data-kt-element="mode"]')
+ if (activeItem) {
+ activeItem.classList.remove('active')
+ }
+
+ item.classList.add('active')
+ if (localStorage && menuMode) {
+ localStorage.setItem(themeMenuModeLSKey, menuMode)
+ }
+ }
+
+ private handleMenu = (): void => {
+ this.menu
+ ?.querySelectorAll('[data-kt-element="mode"]')
+ ?.forEach((item: HTMLElement) => {
+ item.addEventListener('click', (e) => {
+ e.preventDefault()
+
+ const menuMode: string | null = item.getAttribute('data-kt-value')
+ const mode = menuMode === 'system' ? this.getSystemMode() : menuMode
+
+ if (mode) {
+ this.setMode(mode as Mode, menuMode as Mode | '')
+ }
+ })
+ })
+ }
+
+ public flipImages = () => {
+ document.querySelectorAll('[data-kt-img-dark]')?.forEach((item: HTMLElement) => {
+ if (item.tagName === 'IMG') {
+ if (this.getMode() === 'dark' && item.hasAttribute('data-kt-img-dark')) {
+ item.setAttribute('data-kt-img-light', item.getAttribute('src') || '')
+ item.setAttribute('src', item.getAttribute('data-kt-img-dark') || '')
+ } else if (this.getMode() === 'light' && item.hasAttribute('data-kt-img-light')) {
+ item.setAttribute('data-kt-img-dark', item.getAttribute('src') || '')
+ item.setAttribute('src', item.getAttribute('data-kt-img-light') || '')
+ }
+ } else {
+ if (this.getMode() === 'dark' && item.hasAttribute('data-kt-img-dark')) {
+ item.setAttribute('data-kt-img-light', item.getAttribute('src') || '')
+ item.style.backgroundImage = "url('" + item.getAttribute('data-kt-img-dark') + "')"
+ } else if (this.getMode() === 'light' && item.hasAttribute('data-kt-img-light')) {
+ item.setAttribute('data-kt-img-dark', item.getAttribute('src') || '')
+ item.style.backgroundImage = "url('" + item.getAttribute('data-kt-img-light') + "')"
+ }
+ }
+ })
+ }
+
+ public on = (name: string, hander: Function) => {
+ if (this.element) {
+ return EventHandlerUtil.on(this.element, name, hander)
+ }
+ }
+
+ public off = (name: string, handlerId: string) => {
+ if (this.element) {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+ }
+
+ public init = () => {
+ this.menu = document.querySelector('[data-kt-element="theme-mode-menu"]')
+ this.element = document.documentElement
+
+ this.initMode()
+
+ if (this.menu) {
+ this.handleMenu()
+ }
+ }
+}
+
+const ThemeModeComponent = new ThemeMode()
+// Initialize app on document ready => ThemeModeComponent.init()
+export {ThemeModeComponent}
diff --git a/src/_metronic/assets/ts/layout/index.ts b/src/_metronic/assets/ts/layout/index.ts
new file mode 100644
index 0000000..8b157b2
--- /dev/null
+++ b/src/_metronic/assets/ts/layout/index.ts
@@ -0,0 +1 @@
+export * from './ThemeMode'
diff --git a/src/_metronic/helpers/AssetHelpers.ts b/src/_metronic/helpers/AssetHelpers.ts
new file mode 100644
index 0000000..821a9d8
--- /dev/null
+++ b/src/_metronic/helpers/AssetHelpers.ts
@@ -0,0 +1 @@
+export const toAbsoluteUrl = (pathname: string) => process.env.PUBLIC_URL + pathname
diff --git a/src/_metronic/helpers/RouterHelpers.ts b/src/_metronic/helpers/RouterHelpers.ts
new file mode 100644
index 0000000..7cc10dc
--- /dev/null
+++ b/src/_metronic/helpers/RouterHelpers.ts
@@ -0,0 +1,20 @@
+export function getCurrentUrl(pathname: string) {
+ return pathname.split(/[?#]/)[0]
+}
+
+export function checkIsActive(pathname: string, url: string) {
+ const current = getCurrentUrl(pathname)
+ if (!current || !url) {
+ return false
+ }
+
+ if (current === url) {
+ return true
+ }
+
+ if (current.indexOf(url) > -1) {
+ return true
+ }
+
+ return false
+}
diff --git a/src/_metronic/helpers/components/KTCard.tsx b/src/_metronic/helpers/components/KTCard.tsx
new file mode 100644
index 0000000..dace09c
--- /dev/null
+++ b/src/_metronic/helpers/components/KTCard.tsx
@@ -0,0 +1,62 @@
+import {FC} from 'react'
+import clsx from 'clsx'
+import {WithChildren} from '../react18MigrationHelpers'
+
+// Wrapper on html card:
+// https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html
+
+type Props = {
+ className?: string
+ shadow?: boolean
+ flush?: boolean // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#flush
+ resetSidePaddings?: boolean // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#reset-side-paddings
+ border?: boolean // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#bordered
+ dashed?: boolean // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#dashed
+ stretch?: 'stretch' | 'stretch-75' | 'stretch-50' | 'stretch-33' | 'stretch-25' // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#stretch
+ rounded?: 'rounded' | 'rounded-top' | 'rounded-bottom'
+ // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#utilities
+ utilityP?: number
+ utilityPY?: number
+ utilityPX?: number
+}
+
+const KTCard: FC = (props) => {
+ const {
+ className,
+ shadow,
+ flush,
+ resetSidePaddings,
+ border,
+ dashed,
+ stretch,
+ rounded,
+ utilityP,
+ utilityPY,
+ utilityPX,
+ children,
+ } = props
+ return (
+
+ {children}
+
+ )
+}
+
+export {KTCard}
diff --git a/src/_metronic/helpers/components/KTCardBody.tsx b/src/_metronic/helpers/components/KTCardBody.tsx
new file mode 100644
index 0000000..3611852
--- /dev/null
+++ b/src/_metronic/helpers/components/KTCardBody.tsx
@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+import {FC} from 'react'
+import {WithChildren} from '../react18MigrationHelpers'
+
+type Props = {
+ className?: string
+ scroll?: boolean
+ height?: number
+}
+
+const KTCardBody: FC = (props) => {
+ const {className, scroll, height, children} = props
+ return (
+
+ {children}
+
+ )
+}
+
+export {KTCardBody}
diff --git a/src/_metronic/helpers/components/KTSVG.tsx b/src/_metronic/helpers/components/KTSVG.tsx
new file mode 100644
index 0000000..112d069
--- /dev/null
+++ b/src/_metronic/helpers/components/KTSVG.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import SVG from 'react-inlinesvg'
+import {toAbsoluteUrl} from '../AssetHelpers'
+type Props = {
+ className?: string
+ path: string
+ svgClassName?: string
+}
+
+const KTSVG: React.FC = ({className = '', path, svgClassName = 'mh-50px'}) => {
+ return (
+
+
+
+ )
+}
+
+export {KTSVG}
diff --git a/src/_metronic/helpers/crud-helper/consts.ts b/src/_metronic/helpers/crud-helper/consts.ts
new file mode 100644
index 0000000..8c09903
--- /dev/null
+++ b/src/_metronic/helpers/crud-helper/consts.ts
@@ -0,0 +1,5 @@
+const QUERIES = {
+ USERS_LIST: 'users-list',
+}
+
+export {QUERIES}
diff --git a/src/_metronic/helpers/crud-helper/helpers.tsx b/src/_metronic/helpers/crud-helper/helpers.tsx
new file mode 100644
index 0000000..9208603
--- /dev/null
+++ b/src/_metronic/helpers/crud-helper/helpers.tsx
@@ -0,0 +1,124 @@
+import {createContext, Dispatch, SetStateAction, useEffect, useState} from 'react'
+import qs from 'qs'
+import {ID, QueryResponseContextProps, QueryState} from './models'
+
+function createResponseContext(initialState: QueryResponseContextProps) {
+ return createContext(initialState)
+}
+
+function isNotEmpty(obj: unknown) {
+ return obj !== undefined && obj !== null && obj !== ''
+}
+
+// Example: page=1&items_per_page=10&sort=id&order=desc&search=a&filter_name=a&filter_online=false
+function stringifyRequestQuery(state: QueryState): string {
+ const pagination = qs.stringify(state, {filter: ['page', 'items_per_page'], skipNulls: true})
+ const sort = qs.stringify(state, {filter: ['sort', 'order'], skipNulls: true})
+ const search = isNotEmpty(state.search)
+ ? qs.stringify(state, {filter: ['search'], skipNulls: true})
+ : ''
+
+ const filter = state.filter
+ ? Object.entries(state.filter as Object)
+ .filter((obj) => isNotEmpty(obj[1]))
+ .map((obj) => {
+ return `filter_${obj[0]}=${obj[1]}`
+ })
+ .join('&')
+ : ''
+
+ return [pagination, sort, search, filter]
+ .filter((f) => f)
+ .join('&')
+ .toLowerCase()
+}
+
+function parseRequestQuery(query: string): QueryState {
+ const cache: unknown = qs.parse(query)
+ return cache as QueryState
+}
+
+function calculatedGroupingIsDisabled(isLoading: boolean, data: Array | undefined): boolean {
+ if (isLoading) {
+ return true
+ }
+
+ return !data || !data.length
+}
+
+function calculateIsAllDataSelected(data: Array | undefined, selected: Array): boolean {
+ if (!data) {
+ return false
+ }
+
+ return data.length > 0 && data.length === selected.length
+}
+
+function groupingOnSelect(
+ id: ID,
+ selected: Array,
+ setSelected: Dispatch>>
+) {
+ if (!id) {
+ return
+ }
+
+ if (selected.includes(id)) {
+ setSelected(selected.filter((itemId) => itemId !== id))
+ } else {
+ const updatedSelected = [...selected]
+ updatedSelected.push(id)
+ setSelected(updatedSelected)
+ }
+}
+
+function groupingOnSelectAll(
+ isAllSelected: boolean,
+ setSelected: Dispatch>>,
+ data?: Array
+) {
+ if (isAllSelected) {
+ setSelected([])
+ return
+ }
+
+ if (!data || !data.length) {
+ return
+ }
+
+ setSelected(data.filter((item) => item.id).map((item) => item.id))
+}
+
+// Hook
+function useDebounce(value: string | undefined, delay: number) {
+ // State and setters for debounced value
+ const [debouncedValue, setDebouncedValue] = useState(value)
+ useEffect(
+ () => {
+ // Update debounced value after delay
+ const handler = setTimeout(() => {
+ setDebouncedValue(value)
+ }, delay)
+ // Cancel the timeout if value changes (also on delay change or unmount)
+ // This is how we prevent debounced value from updating if value is changed ...
+ // .. within the delay period. Timeout gets cleared and restarted.
+ return () => {
+ clearTimeout(handler)
+ }
+ },
+ [value, delay] // Only re-call effect if value or delay changes
+ )
+ return debouncedValue
+}
+
+export {
+ createResponseContext,
+ stringifyRequestQuery,
+ parseRequestQuery,
+ calculatedGroupingIsDisabled,
+ calculateIsAllDataSelected,
+ groupingOnSelect,
+ groupingOnSelectAll,
+ useDebounce,
+ isNotEmpty,
+}
diff --git a/src/_metronic/helpers/crud-helper/models.ts b/src/_metronic/helpers/crud-helper/models.ts
new file mode 100644
index 0000000..3f36d9f
--- /dev/null
+++ b/src/_metronic/helpers/crud-helper/models.ts
@@ -0,0 +1,83 @@
+import {Dispatch, SetStateAction} from 'react'
+
+export type ID = undefined | null | number
+
+export type PaginationState = {
+ page: number
+ items_per_page: 10 | 30 | 50 | 100
+ links?: Array<{label: string; active: boolean; url: string | null; page: number | null}>
+}
+
+export type SortState = {
+ sort?: string
+ order?: 'asc' | 'desc'
+}
+
+export type FilterState = {
+ filter?: unknown
+}
+
+export type SearchState = {
+ search?: string
+}
+
+export type Response = {
+ data?: T
+ payload?: {
+ message?: string
+ errors?: {
+ [key: string]: Array
+ }
+ pagination?: PaginationState
+ }
+}
+
+export type QueryState = PaginationState & SortState & FilterState & SearchState
+
+export type QueryRequestContextProps = {
+ state: QueryState
+ updateState: (updates: Partial) => void
+}
+
+export const initialQueryState: QueryState = {
+ page: 1,
+ items_per_page: 10,
+}
+
+export const initialQueryRequest: QueryRequestContextProps = {
+ state: initialQueryState,
+ updateState: () => {},
+}
+
+export type QueryResponseContextProps = {
+ response?: Response> | undefined
+ refetch: () => void
+ isLoading: boolean
+ query: string
+}
+
+export const initialQueryResponse = {refetch: () => {}, isLoading: false, query: ''}
+
+export type ListViewContextProps = {
+ selected: Array
+ onSelect: (selectedId: ID) => void
+ onSelectAll: () => void
+ clearSelected: () => void
+ // NULL => (CREATION MODE) | MODAL IS OPENED
+ // NUMBER => (EDIT MODE) | MODAL IS OPENED
+ // UNDEFINED => MODAL IS CLOSED
+ itemIdForUpdate?: ID
+ setItemIdForUpdate: Dispatch>
+ isAllSelected: boolean
+ disabled: boolean
+}
+
+export const initialListView: ListViewContextProps = {
+ selected: [],
+ onSelect: () => {},
+ onSelectAll: () => {},
+ clearSelected: () => {},
+ setItemIdForUpdate: () => {},
+ isAllSelected: false,
+ disabled: false,
+}
diff --git a/src/_metronic/helpers/dataExamples.ts b/src/_metronic/helpers/dataExamples.ts
new file mode 100644
index 0000000..1aa0a31
--- /dev/null
+++ b/src/_metronic/helpers/dataExamples.ts
@@ -0,0 +1,281 @@
+export interface MessageModel {
+ user: number
+ type: 'in' | 'out'
+ text: string
+ time: string
+ template?: boolean
+}
+
+const defaultMessages: Array = [
+ {
+ user: 4,
+ type: 'in',
+ text: 'How likely are you to recommend our company to your friends and family ?',
+ time: '2 mins',
+ },
+ {
+ user: 2,
+ type: 'out',
+ text: 'Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.',
+ time: '5 mins',
+ },
+ {
+ user: 4,
+ type: 'in',
+ text: 'Ok, Understood!',
+ time: '1 Hour',
+ },
+ {
+ user: 2,
+ type: 'out',
+ text: 'You’ll receive notifications for all issues, pull requests!',
+ time: '2 Hours',
+ },
+ {
+ user: 4,
+ type: 'in',
+ text: 'You can unwatch this repository immediately by clicking here: Keenthemes.com ',
+ time: '3 Hours',
+ },
+ {
+ user: 2,
+ type: 'out',
+ text: 'Most purchased Business courses during this sale!',
+ time: '4 Hours',
+ },
+ {
+ user: 4,
+ type: 'in',
+ text: 'Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided',
+ time: '5 Hours',
+ },
+ {
+ template: true,
+ user: 2,
+ type: 'out',
+ text: '',
+ time: 'Just now',
+ },
+ {
+ template: true,
+ user: 4,
+ type: 'in',
+ text: 'Right before vacation season we have the next Big Deal for you.',
+ time: 'Just now',
+ },
+]
+
+export interface UserInfoModel {
+ initials?: {label: string; state: 'warning' | 'danger' | 'primary' | 'success' | 'info'}
+ name: string
+ avatar?: string
+ email: string
+ position: string
+ online: boolean
+}
+
+const defaultUserInfos: Array = [
+ {
+ name: 'Emma Smith',
+ avatar: 'avatars/300-6.jpg',
+ email: 'e.smith@kpmg.com.au',
+ position: 'Art Director',
+ online: false,
+ },
+ {
+ name: 'Melody Macy',
+ initials: {label: 'M', state: 'danger'},
+ email: 'melody@altbox.com',
+ position: 'Marketing Analytic',
+ online: true,
+ },
+ {
+ name: 'Max Smith',
+ avatar: 'avatars/300-1.jpg',
+ email: 'max@kt.com',
+ position: 'Software Enginer',
+ online: false,
+ },
+ {
+ name: 'Sean Bean',
+ avatar: 'avatars/300-5.jpg',
+ email: 'sean@dellito.com',
+ position: 'Web Developer',
+ online: false,
+ },
+ {
+ name: 'Brian Cox',
+ avatar: 'avatars/300-25.jpg',
+ email: 'brian@exchange.com',
+ position: 'UI/UX Designer',
+ online: false,
+ },
+ {
+ name: 'Mikaela Collins',
+ initials: {label: 'M', state: 'warning'},
+ email: 'mikaela@pexcom.com',
+ position: 'Head Of Marketing',
+ online: true,
+ },
+ {
+ name: 'Francis Mitcham',
+ avatar: 'avatars/300-9.jpg',
+ email: 'f.mitcham@kpmg.com.au',
+ position: 'Software Arcitect',
+ online: false,
+ },
+
+ {
+ name: 'Olivia Wild',
+ initials: {label: 'O', state: 'danger'},
+ email: 'olivia@corpmail.com',
+ position: 'System Admin',
+ online: true,
+ },
+ {
+ name: 'Neil Owen',
+ initials: {label: 'N', state: 'primary'},
+ email: 'owen.neil@gmail.com',
+ position: 'Account Manager',
+ online: true,
+ },
+ {
+ name: 'Dan Wilson',
+ avatar: 'avatars/300-23.jpg',
+ email: 'dam@consilting.com',
+ position: 'Web Desinger',
+ online: false,
+ },
+ {
+ name: 'Emma Bold',
+ initials: {label: 'E', state: 'danger'},
+ email: 'emma@intenso.com',
+ position: 'Corporate Finance',
+ online: true,
+ },
+ {
+ name: 'Ana Crown',
+ avatar: 'avatars/300-12.jpg',
+ email: 'ana.cf@limtel.com',
+ position: 'Customer Relationship',
+ online: false,
+ },
+ {
+ name: 'Robert Doe',
+ initials: {label: 'A', state: 'info'},
+ email: 'robert@benko.com',
+ position: 'Marketing Executive',
+ online: true,
+ },
+ {
+ name: 'John Miller',
+ avatar: 'avatars/300-13.jpg',
+ email: 'miller@mapple.com',
+ position: 'Project Manager',
+ online: false,
+ },
+ {
+ name: 'Lucy Kunic',
+ initials: {label: 'L', state: 'success'},
+ email: 'lucy.m@fentech.com',
+ position: 'SEO Master',
+ online: true,
+ },
+ {
+ name: 'Ethan Wilder',
+ avatar: 'avatars/300-21.jpg',
+ email: 'ethan@loop.com.au',
+ position: 'Accountant',
+ online: true,
+ },
+]
+
+const messageFromClient: MessageModel = {
+ user: 4,
+ type: 'in',
+ text: 'Thank you for your awesome support!',
+ time: 'Just now',
+}
+
+export interface AlertModel {
+ title: string
+ description: string
+ time: string
+ icon: string
+ state: 'primary' | 'danger' | 'warning' | 'success' | 'info'
+}
+
+const defaultAlerts: Array = [
+ {
+ title: 'Project Alice',
+ description: 'Phase 1 development',
+ time: '1 hr',
+ icon: 'icons/duotune/technology/teh008.svg',
+ state: 'primary',
+ },
+ {
+ title: 'HR Confidential',
+ description: 'Confidential staff documents',
+ time: '2 hrs',
+ icon: 'icons/duotune/general/gen044.svg',
+ state: 'danger',
+ },
+ {
+ title: 'Company HR',
+ description: 'Corporeate staff profiles',
+ time: '5 hrs',
+ icon: 'icons/duotune/finance/fin006.svg',
+ state: 'warning',
+ },
+ {
+ title: 'Project Red',
+ description: 'New frontend admin theme',
+ time: '2 days',
+ icon: 'icons/duotune/files/fil023.svg',
+ state: 'success',
+ },
+ {
+ title: 'Project Breafing',
+ description: 'Product launch status update',
+ time: '21 Jan',
+ icon: 'icons/duotune/maps/map001.svg',
+ state: 'primary',
+ },
+ {
+ title: 'Banner Assets',
+ description: 'Collection of banner images',
+ time: '21 Jan',
+ icon: 'icons/duotune/general/gen006.svg',
+ state: 'info',
+ },
+ {
+ title: 'Icon Assets',
+ description: 'Collection of SVG icons',
+ time: '20 March',
+ icon: 'icons/duotune/art/art002.svg',
+ state: 'warning',
+ },
+]
+export interface LogModel {
+ code: string
+ state: 'success' | 'danger' | 'warning'
+ message: string
+ time: string
+}
+
+const defaultLogs: Array = [
+ {code: '200 OK', state: 'success', message: 'New order', time: 'Just now'},
+ {code: '500 ERR', state: 'danger', message: 'New customer', time: '2 hrs'},
+ {code: '200 OK', state: 'success', message: 'Payment process', time: '5 hrs'},
+ {code: '300 WRN', state: 'warning', message: 'Search query', time: '2 days'},
+ {code: '200 OK', state: 'success', message: 'API connection', time: '1 week'},
+ {code: '200 OK', state: 'success', message: 'Database restore', time: 'Mar 5'},
+ {code: '300 WRN', state: 'warning', message: 'System update', time: 'May 15'},
+ {code: '300 WRN', state: 'warning', message: 'Server OS update', time: 'Apr 3'},
+ {code: '300 WRN', state: 'warning', message: 'API rollback', time: 'Jun 30'},
+ {code: '500 ERR', state: 'danger', message: 'Refund process', time: 'Jul 10'},
+ {code: '500 ERR', state: 'danger', message: 'Withdrawal process', time: 'Sep 10'},
+ {code: '500 ERR', state: 'danger', message: 'Mail tasks', time: 'Dec 10'},
+]
+
+export {defaultMessages, defaultUserInfos, defaultAlerts, defaultLogs, messageFromClient}
diff --git a/src/_metronic/helpers/index.ts b/src/_metronic/helpers/index.ts
new file mode 100644
index 0000000..095f84d
--- /dev/null
+++ b/src/_metronic/helpers/index.ts
@@ -0,0 +1,10 @@
+export * from './AssetHelpers'
+export * from './RouterHelpers'
+export * from './components/KTSVG'
+export * from './components/KTCard'
+export * from './components/KTCardBody'
+export * from './dataExamples'
+export * from './crud-helper/helpers'
+export * from './crud-helper/models'
+export * from './crud-helper/consts'
+export * from './react18MigrationHelpers'
\ No newline at end of file
diff --git a/src/_metronic/helpers/react18MigrationHelpers.ts b/src/_metronic/helpers/react18MigrationHelpers.ts
new file mode 100644
index 0000000..256f0a2
--- /dev/null
+++ b/src/_metronic/helpers/react18MigrationHelpers.ts
@@ -0,0 +1,14 @@
+import {ReactNode} from 'react'
+import {MenuComponent} from '../assets/ts/components'
+
+type WithChildren = {
+ children?: ReactNode
+}
+
+const reInitMenu = () => {
+ setTimeout(() => {
+ MenuComponent.reinitialization()
+ }, 500)
+}
+
+export {type WithChildren, reInitMenu}
diff --git a/src/_metronic/i18n/Metronici18n.tsx b/src/_metronic/i18n/Metronici18n.tsx
new file mode 100644
index 0000000..2ba569c
--- /dev/null
+++ b/src/_metronic/i18n/Metronici18n.tsx
@@ -0,0 +1,42 @@
+import React, {FC, createContext, useContext} from 'react'
+import {WithChildren} from '../helpers'
+
+const I18N_CONFIG_KEY = process.env.REACT_APP_I18N_CONFIG_KEY || 'i18nConfig'
+
+type Props = {
+ selectedLang: 'de' | 'en' | 'es' | 'fr' | 'ja' | 'zh'
+}
+const initialState: Props = {
+ selectedLang: 'en',
+}
+
+function getConfig(): Props {
+ const ls = localStorage.getItem(I18N_CONFIG_KEY)
+ if (ls) {
+ try {
+ return JSON.parse(ls) as Props
+ } catch (er) {
+ console.error(er)
+ }
+ }
+ return initialState
+}
+
+// Side effect
+export function setLanguage(lang: string) {
+ localStorage.setItem(I18N_CONFIG_KEY, JSON.stringify({selectedLang: lang}))
+ window.location.reload()
+}
+
+const I18nContext = createContext(initialState)
+
+const useLang = () => {
+ return useContext(I18nContext).selectedLang
+}
+
+const MetronicI18nProvider: FC = ({children}) => {
+ const lang = getConfig()
+ return {children}
+}
+
+export {MetronicI18nProvider, useLang}
diff --git a/src/_metronic/i18n/i18nProvider.tsx b/src/_metronic/i18n/i18nProvider.tsx
new file mode 100644
index 0000000..2ed481f
--- /dev/null
+++ b/src/_metronic/i18n/i18nProvider.tsx
@@ -0,0 +1,40 @@
+import {FC} from 'react'
+import {useLang} from './Metronici18n'
+import {IntlProvider} from 'react-intl'
+import '@formatjs/intl-relativetimeformat/polyfill'
+import '@formatjs/intl-relativetimeformat/locale-data/en'
+import '@formatjs/intl-relativetimeformat/locale-data/de'
+import '@formatjs/intl-relativetimeformat/locale-data/es'
+import '@formatjs/intl-relativetimeformat/locale-data/fr'
+import '@formatjs/intl-relativetimeformat/locale-data/ja'
+import '@formatjs/intl-relativetimeformat/locale-data/zh'
+
+import deMessages from './messages/de.json'
+import enMessages from './messages/en.json'
+import esMessages from './messages/es.json'
+import frMessages from './messages/fr.json'
+import jaMessages from './messages/ja.json'
+import zhMessages from './messages/zh.json'
+import { WithChildren } from '../helpers'
+
+const allMessages = {
+ de: deMessages,
+ en: enMessages,
+ es: esMessages,
+ fr: frMessages,
+ ja: jaMessages,
+ zh: zhMessages,
+}
+
+const I18nProvider: FC = ({children}) => {
+ const locale = useLang()
+ const messages = allMessages[locale]
+
+ return (
+
+ {children}
+
+ )
+}
+
+export {I18nProvider}
diff --git a/src/_metronic/i18n/messages/de.json b/src/_metronic/i18n/messages/de.json
new file mode 100644
index 0000000..37ba3ce
--- /dev/null
+++ b/src/_metronic/i18n/messages/de.json
@@ -0,0 +1,69 @@
+{
+ "TRANSLATOR.SELECT": "Wähle deine Sprache",
+ "MENU.NEW": "Neu",
+ "MENU.ACTIONS": "Aktionen",
+ "MENU.CREATE_POST": "Erstellen Sie einen neuen Beitrag",
+ "MENU.PAGES": "Pages",
+ "MENU.FEATURES": "Eigenschaften",
+ "MENU.APPS": "Apps",
+ "MENU.DASHBOARD": "Instrumententafel",
+ "AUTH.GENERAL.OR": "Oder",
+ "AUTH.GENERAL.SUBMIT_BUTTON": "einreichen",
+ "AUTH.GENERAL.NO_ACCOUNT": "Hast du kein Konto?",
+ "AUTH.GENERAL.SIGNUP_BUTTON": "Anmelden",
+ "AUTH.GENERAL.FORGOT_BUTTON": "Passwort vergessen",
+ "AUTH.GENERAL.BACK_BUTTON": "Zurück",
+ "AUTH.GENERAL.PRIVACY": "Privatsphäre",
+ "AUTH.GENERAL.LEGAL": "Legal",
+ "AUTH.GENERAL.CONTACT": "Kontakt",
+ "AUTH.LOGIN.TITLE": "Create Account",
+ "AUTH.LOGIN.BUTTON": "Sign In",
+ "AUTH.FORGOT.TITLE": "Forgotten Password?",
+ "AUTH.FORGOT.DESC": "Enter your email to reset your password",
+ "AUTH.FORGOT.SUCCESS": "Your account has been successfully reset.",
+ "AUTH.REGISTER.TITLE": "Sign Up",
+ "AUTH.REGISTER.DESC": "Enter your details to create your account",
+ "AUTH.REGISTER.SUCCESS": "Your account has been successfuly registered.",
+ "AUTH.INPUT.EMAIL": "Email",
+ "AUTH.INPUT.FULLNAME": "Fullname",
+ "AUTH.INPUT.PASSWORD": "Password",
+ "AUTH.INPUT.CONFIRM_PASSWORD": "Confirm Password",
+ "AUTH.INPUT.USERNAME": "Nutzername",
+ "AUTH.VALIDATION.INVALID": "{name} is not valid",
+ "AUTH.VALIDATION.REQUIRED": "{name} is required",
+ "AUTH.VALIDATION.MIN_LENGTH": "{name}} minimum length is {{min}",
+ "AUTH.VALIDATION.AGREEMENT_REQUIRED": "Accepting terms & conditions are required",
+ "AUTH.VALIDATION.NOT_FOUND": "The requested {name} is not found",
+ "AUTH.VALIDATION.INVALID_LOGIN": "The login detail is incorrect",
+ "AUTH.VALIDATION.REQUIRED_FIELD": "Required field",
+ "AUTH.VALIDATION.MIN_LENGTH_FIELD": "Minimum field length:",
+ "AUTH.VALIDATION.MAX_LENGTH_FIELD": "Maximum field length:",
+ "AUTH.VALIDATION.INVALID_FIELD": "Field is not valid",
+ "ECOMMERCE.COMMON.SELECTED_RECORDS_COUNT": "Selected records count: ",
+ "ECOMMERCE.COMMON.ALL": "All",
+ "ECOMMERCE.COMMON.SUSPENDED": "Suspended",
+ "ECOMMERCE.COMMON.ACTIVE": "Active",
+ "ECOMMERCE.COMMON.FILTER": "Filter",
+ "ECOMMERCE.COMMON.BY_STATUS": "by Status",
+ "ECOMMERCE.COMMON.BY_TYPE": "by Type",
+ "ECOMMERCE.COMMON.BUSINESS": "Business",
+ "ECOMMERCE.COMMON.INDIVIDUAL": "Individual",
+ "ECOMMERCE.COMMON.SEARCH": "Search",
+ "ECOMMERCE.COMMON.IN_ALL_FIELDS": "in all fields",
+ "ECOMMERCE.ECOMMERCE": "eCommerce",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS": "Customers",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS_LIST": "Customers list",
+ "ECOMMERCE.CUSTOMERS.NEW_CUSTOMER": "New Customer",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.TITLE": "Customer Delete",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.DESCRIPTION": "Are you sure to permanently delete this customer?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.WAIT_DESCRIPTION": "Customer is deleting...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.MESSAGE": "Customer has been deleted",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.TITLE": "Customers Delete",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.DESCRIPTION": "Are you sure to permanently delete selected customers?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.WAIT_DESCRIPTION": "Customers are deleting...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.MESSAGE": "Selected customers have been deleted",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.TITLE": "Status has been updated for selected customers",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.MESSAGE": "Selected customers status have successfully been updated",
+ "ECOMMERCE.CUSTOMERS.EDIT.UPDATE_MESSAGE": "Customer has been updated",
+ "ECOMMERCE.CUSTOMERS.EDIT.ADD_MESSAGE": "Customer has been created"
+}
diff --git a/src/_metronic/i18n/messages/en.json b/src/_metronic/i18n/messages/en.json
new file mode 100644
index 0000000..1835e12
--- /dev/null
+++ b/src/_metronic/i18n/messages/en.json
@@ -0,0 +1,69 @@
+{
+ "TRANSLATOR.SELECT": "Select your language",
+ "MENU.NEW": "new",
+ "MENU.ACTIONS": "Actions",
+ "MENU.CREATE_POST": "Create New Post",
+ "MENU.PAGES": "Pages",
+ "MENU.FEATURES": "Features",
+ "MENU.APPS": "Apps",
+ "MENU.DASHBOARD": "Dashboard",
+ "AUTH.GENERAL.OR": "Or",
+ "AUTH.GENERAL.SUBMIT_BUTTON": "Submit",
+ "AUTH.GENERAL.NO_ACCOUNT": "Don't have an account?",
+ "AUTH.GENERAL.SIGNUP_BUTTON": "Sign Up",
+ "AUTH.GENERAL.FORGOT_BUTTON": "Forgot Password",
+ "AUTH.GENERAL.BACK_BUTTON": "Back",
+ "AUTH.GENERAL.PRIVACY": "Privacy",
+ "AUTH.GENERAL.LEGAL": "Legal",
+ "AUTH.GENERAL.CONTACT": "Contact",
+ "AUTH.LOGIN.TITLE": "Login Account",
+ "AUTH.LOGIN.BUTTON": "Sign In",
+ "AUTH.FORGOT.TITLE": "Forgotten Password?",
+ "AUTH.FORGOT.DESC": "Enter your email to reset your password",
+ "AUTH.FORGOT.SUCCESS": "Your account has been successfully reset.",
+ "AUTH.REGISTER.TITLE": "Sign Up",
+ "AUTH.REGISTER.DESC": "Enter your details to create your account",
+ "AUTH.REGISTER.SUCCESS": "Your account has been successfuly registered.",
+ "AUTH.INPUT.EMAIL": "Email",
+ "AUTH.INPUT.FULLNAME": "Fullname",
+ "AUTH.INPUT.PASSWORD": "Password",
+ "AUTH.INPUT.CONFIRM_PASSWORD": "Confirm Password",
+ "AUTH.INPUT.USERNAME": "Username",
+ "AUTH.VALIDATION.INVALID": "{name} is not valid",
+ "AUTH.VALIDATION.REQUIRED": "{name} is required",
+ "AUTH.VALIDATION.MIN_LENGTH": "{name}} minimum length is {{min}",
+ "AUTH.VALIDATION.AGREEMENT_REQUIRED": "Accepting terms & conditions are required",
+ "AUTH.VALIDATION.NOT_FOUND": "The requested {name} is not found",
+ "AUTH.VALIDATION.INVALID_LOGIN": "The login detail is incorrect",
+ "AUTH.VALIDATION.REQUIRED_FIELD": "Required field",
+ "AUTH.VALIDATION.MIN_LENGTH_FIELD": "Minimum field length:",
+ "AUTH.VALIDATION.MAX_LENGTH_FIELD": "Maximum field length:",
+ "AUTH.VALIDATION.INVALID_FIELD": "Field is not valid",
+ "ECOMMERCE.COMMON.SELECTED_RECORDS_COUNT": "Selected records count: ",
+ "ECOMMERCE.COMMON.ALL": "All",
+ "ECOMMERCE.COMMON.SUSPENDED": "Suspended",
+ "ECOMMERCE.COMMON.ACTIVE": "Active",
+ "ECOMMERCE.COMMON.FILTER": "Filter",
+ "ECOMMERCE.COMMON.BY_STATUS": "by Status",
+ "ECOMMERCE.COMMON.BY_TYPE": "by Type",
+ "ECOMMERCE.COMMON.BUSINESS": "Business",
+ "ECOMMERCE.COMMON.INDIVIDUAL": "Individual",
+ "ECOMMERCE.COMMON.SEARCH": "Search",
+ "ECOMMERCE.COMMON.IN_ALL_FIELDS": "in all fields",
+ "ECOMMERCE.ECOMMERCE": "eCommerce",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS": "Customers",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS_LIST": "Customers list",
+ "ECOMMERCE.CUSTOMERS.NEW_CUSTOMER": "New Customer",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.TITLE": "Customer Delete",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.DESCRIPTION": "Are you sure to permanently delete this customer?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.WAIT_DESCRIPTION": "Customer is deleting...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.MESSAGE": "Customer has been deleted",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.TITLE": "Customers Delete",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.DESCRIPTION": "Are you sure to permanently delete selected customers?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.WAIT_DESCRIPTION": "Customers are deleting...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.MESSAGE": "Selected customers have been deleted",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.TITLE": "Status has been updated for selected customers",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.MESSAGE": "Selected customers status have successfully been updated",
+ "ECOMMERCE.CUSTOMERS.EDIT.UPDATE_MESSAGE": "Customer has been updated",
+ "ECOMMERCE.CUSTOMERS.EDIT.ADD_MESSAGE": "Customer has been created"
+}
diff --git a/src/_metronic/i18n/messages/es.json b/src/_metronic/i18n/messages/es.json
new file mode 100644
index 0000000..b2d3693
--- /dev/null
+++ b/src/_metronic/i18n/messages/es.json
@@ -0,0 +1,69 @@
+{
+ "TRANSLATOR.SELECT": "Elige tu idioma",
+ "MENU.NEW": "nuevo",
+ "MENU.ACTIONS": "Comportamiento",
+ "MENU.CREATE_POST": "Crear nueva publicación",
+ "MENU.PAGES": "Pages",
+ "MENU.FEATURES": "Caracteristicas",
+ "MENU.APPS": "Aplicaciones",
+ "MENU.DASHBOARD": "Tablero",
+ "AUTH.GENERAL.OR": "O",
+ "AUTH.GENERAL.SUBMIT_BUTTON": "Enviar",
+ "AUTH.GENERAL.NO_ACCOUNT": "No tienes una cuenta?",
+ "AUTH.GENERAL.SIGNUP_BUTTON": "Regístrate",
+ "AUTH.GENERAL.FORGOT_BUTTON": "Se te olvidó tu contraseña",
+ "AUTH.GENERAL.BACK_BUTTON": "Espalda",
+ "AUTH.GENERAL.PRIVACY": "Intimidad",
+ "AUTH.GENERAL.LEGAL": "Legal",
+ "AUTH.GENERAL.CONTACT": "Contacto",
+ "AUTH.LOGIN.TITLE": "Crear una cuenta",
+ "AUTH.LOGIN.BUTTON": "Registrarse",
+ "AUTH.FORGOT.TITLE": "Contraseña olvidada?",
+ "AUTH.FORGOT.DESC": "Ingrese su correo electrónico para restablecer su contraseña",
+ "AUTH.FORGOT.SUCCESS": "Your account has been successfully reset.",
+ "AUTH.REGISTER.TITLE": "Sign Up",
+ "AUTH.REGISTER.DESC": "Enter your details to create your account",
+ "AUTH.REGISTER.SUCCESS": "Your account has been successfuly registered.",
+ "AUTH.INPUT.EMAIL": "Email",
+ "AUTH.INPUT.FULLNAME": "Fullname",
+ "AUTH.INPUT.PASSWORD": "Password",
+ "AUTH.INPUT.CONFIRM_PASSWORD": "Confirm Password",
+ "AUTH.INPUT.USERNAME": "Usuario",
+ "AUTH.VALIDATION.INVALID": "{name} is not valid",
+ "AUTH.VALIDATION.REQUIRED": "{name} is required",
+ "AUTH.VALIDATION.MIN_LENGTH": "{name}} minimum length is {{min}",
+ "AUTH.VALIDATION.AGREEMENT_REQUIRED": "Accepting terms & conditions are required",
+ "AUTH.VALIDATION.NOT_FOUND": "The requested {name} is not found",
+ "AUTH.VALIDATION.INVALID_LOGIN": "The login detail is incorrect",
+ "AUTH.VALIDATION.REQUIRED_FIELD": "Required field",
+ "AUTH.VALIDATION.MIN_LENGTH_FIELD": "Minimum field length:",
+ "AUTH.VALIDATION.MAX_LENGTH_FIELD": "Maximum field length:",
+ "AUTH.VALIDATION.INVALID_FIELD": "Field is not valid",
+ "ECOMMERCE.COMMON.SELECTED_RECORDS_COUNT": "Selected records count: ",
+ "ECOMMERCE.COMMON.ALL": "All",
+ "ECOMMERCE.COMMON.SUSPENDED": "Suspended",
+ "ECOMMERCE.COMMON.ACTIVE": "Active",
+ "ECOMMERCE.COMMON.FILTER": "Filter",
+ "ECOMMERCE.COMMON.BY_STATUS": "by Status",
+ "ECOMMERCE.COMMON.BY_TYPE": "by Type",
+ "ECOMMERCE.COMMON.BUSINESS": "Business",
+ "ECOMMERCE.COMMON.INDIVIDUAL": "Individual",
+ "ECOMMERCE.COMMON.SEARCH": "Search",
+ "ECOMMERCE.COMMON.IN_ALL_FIELDS": "in all fields",
+ "ECOMMERCE.ECOMMERCE": "eCommerce",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS": "Customers",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS_LIST": "Customers list",
+ "ECOMMERCE.CUSTOMERS.NEW_CUSTOMER": "New Customer",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.TITLE": "Customer Delete",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.DESCRIPTION": "Are you sure to permanently delete this customer?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.WAIT_DESCRIPTION": "Customer is deleting...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.MESSAGE": "Customer has been deleted",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.TITLE": "Customers Delete",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.DESCRIPTION": "Are you sure to permanently delete selected customers?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.WAIT_DESCRIPTION": "Customers are deleting...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.MESSAGE": "Selected customers have been deleted",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.TITLE": "Status has been updated for selected customers",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.MESSAGE": "Selected customers status have successfully been updated",
+ "ECOMMERCE.CUSTOMERS.EDIT.UPDATE_MESSAGE": "Customer has been updated",
+ "ECOMMERCE.CUSTOMERS.EDIT.ADD_MESSAGE": "Customer has been created"
+}
diff --git a/src/_metronic/i18n/messages/fr.json b/src/_metronic/i18n/messages/fr.json
new file mode 100644
index 0000000..accb3f3
--- /dev/null
+++ b/src/_metronic/i18n/messages/fr.json
@@ -0,0 +1,69 @@
+{
+ "TRANSLATOR.SELECT": "choisissez votre langue",
+ "MENU.NEW": "Nouveau",
+ "MENU.ACTIONS": "Actes",
+ "MENU.CREATE_POST": "Créer un nouveau Post",
+ "MENU.PAGES": "Pages",
+ "MENU.FEATURES": "Fonctionnalités",
+ "MENU.APPS": "Applications",
+ "MENU.DASHBOARD": "Tableau de Bord",
+ "AUTH.GENERAL.OR": "Ou",
+ "AUTH.GENERAL.SUBMIT_BUTTON": "Soumettre",
+ "AUTH.GENERAL.NO_ACCOUNT": "Ne pas avoir de compte?",
+ "AUTH.GENERAL.SIGNUP_BUTTON": "Registre",
+ "AUTH.GENERAL.FORGOT_BUTTON": "Mot de passe oublié",
+ "AUTH.GENERAL.BACK_BUTTON": "Back",
+ "AUTH.GENERAL.PRIVACY": "Privacy",
+ "AUTH.GENERAL.LEGAL": "Legal",
+ "AUTH.GENERAL.CONTACT": "Contact",
+ "AUTH.LOGIN.TITLE": "Créer un compte",
+ "AUTH.LOGIN.BUTTON": "Sign In",
+ "AUTH.FORGOT.TITLE": "Forgotten Password?",
+ "AUTH.FORGOT.DESC": "Enter your email to reset your password",
+ "AUTH.FORGOT.SUCCESS": "Your account has been successfully reset.",
+ "AUTH.REGISTER.TITLE": "Sign Up",
+ "AUTH.REGISTER.DESC": "Enter your details to create your account",
+ "AUTH.REGISTER.SUCCESS": "Your account has been successfuly registered.",
+ "AUTH.INPUT.EMAIL": "Email",
+ "AUTH.INPUT.FULLNAME": "Fullname",
+ "AUTH.INPUT.PASSWORD": "Mot de passe",
+ "AUTH.INPUT.CONFIRM_PASSWORD": "Confirm Password",
+ "AUTH.INPUT.USERNAME": "Nom d'utilisateur",
+ "AUTH.VALIDATION.INVALID": "{name} n'est pas valide",
+ "AUTH.VALIDATION.REQUIRED": "{name} est requis",
+ "AUTH.VALIDATION.MIN_LENGTH": "{name}} minimum length is {{min}",
+ "AUTH.VALIDATION.AGREEMENT_REQUIRED": "Accepting terms & conditions are required",
+ "AUTH.VALIDATION.NOT_FOUND": "The requested {name} is not found",
+ "AUTH.VALIDATION.INVALID_LOGIN": "The login detail is incorrect",
+ "AUTH.VALIDATION.REQUIRED_FIELD": "Required field",
+ "AUTH.VALIDATION.MIN_LENGTH_FIELD": "Minimum field length:",
+ "AUTH.VALIDATION.MAX_LENGTH_FIELD": "Maximum field length:",
+ "AUTH.VALIDATION.INVALID_FIELD": "Field is not valid",
+ "ECOMMERCE.COMMON.SELECTED_RECORDS_COUNT": "Nombre d'enregistrements sélectionnés: ",
+ "ECOMMERCE.COMMON.ALL": "All",
+ "ECOMMERCE.COMMON.SUSPENDED": "Suspended",
+ "ECOMMERCE.COMMON.ACTIVE": "Active",
+ "ECOMMERCE.COMMON.FILTER": "Filter",
+ "ECOMMERCE.COMMON.BY_STATUS": "by Status",
+ "ECOMMERCE.COMMON.BY_TYPE": "by Type",
+ "ECOMMERCE.COMMON.BUSINESS": "Business",
+ "ECOMMERCE.COMMON.INDIVIDUAL": "Individual",
+ "ECOMMERCE.COMMON.SEARCH": "Search",
+ "ECOMMERCE.COMMON.IN_ALL_FIELDS": "in all fields",
+ "ECOMMERCE.ECOMMERCE": "éCommerce",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS": "Les clients",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS_LIST": "Liste des clients",
+ "ECOMMERCE.CUSTOMERS.NEW_CUSTOMER": "Nouveau client",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.TITLE": "Suppression du client",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.DESCRIPTION": "Êtes-vous sûr de supprimer définitivement ce client?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.WAIT_DESCRIPTION": "Le client est en train de supprimer ...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.MESSAGE": "Le client a été supprimé",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.TITLE": "Supprimer les clients",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.DESCRIPTION": "Êtes-vous sûr de supprimer définitivement les clients sélectionnés?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.WAIT_DESCRIPTION": "Les clients suppriment ...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.MESSAGE": "Les clients sélectionnés ont été supprimés",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.TITLE": "Le statut a été mis à jour pour les clients sélectionnés",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.MESSAGE": "Le statut des clients sélectionnés a été mis à jour avec succès",
+ "ECOMMERCE.CUSTOMERS.EDIT.UPDATE_MESSAGE": "Le client a été mis à jour",
+ "ECOMMERCE.CUSTOMERS.EDIT.ADD_MESSAGE": "Le client a été créé"
+}
diff --git a/src/_metronic/i18n/messages/ja.json b/src/_metronic/i18n/messages/ja.json
new file mode 100644
index 0000000..0f3c395
--- /dev/null
+++ b/src/_metronic/i18n/messages/ja.json
@@ -0,0 +1,69 @@
+{
+ "TRANSLATOR.SELECT": "あなたが使う言語を選んでください",
+ "MENU.NEW": "新しい",
+ "MENU.ACTIONS": "行動",
+ "MENU.CREATE_POST": "新しい投稿を作成",
+ "MENU.PAGES": "Pages",
+ "MENU.FEATURES": "特徴",
+ "MENU.APPS": "アプリ",
+ "MENU.DASHBOARD": "ダッシュボード",
+ "AUTH.GENERAL.OR": "または",
+ "AUTH.GENERAL.SUBMIT_BUTTON": "提出する",
+ "AUTH.GENERAL.NO_ACCOUNT": "アカウントを持っていない?",
+ "AUTH.GENERAL.SIGNUP_BUTTON": "サインアップ",
+ "AUTH.GENERAL.FORGOT_BUTTON": "パスワードをお忘れですか",
+ "AUTH.GENERAL.BACK_BUTTON": "バック",
+ "AUTH.GENERAL.PRIVACY": "プライバシー",
+ "AUTH.GENERAL.LEGAL": "法的",
+ "AUTH.GENERAL.CONTACT": "接触",
+ "AUTH.LOGIN.TITLE": "Create Account",
+ "AUTH.LOGIN.BUTTON": "Sign In",
+ "AUTH.FORGOT.TITLE": "Forgotten Password?",
+ "AUTH.FORGOT.DESC": "Enter your email to reset your password",
+ "AUTH.FORGOT.SUCCESS": "Your account has been successfully reset.",
+ "AUTH.REGISTER.TITLE": "Sign Up",
+ "AUTH.REGISTER.DESC": "Enter your details to create your account",
+ "AUTH.REGISTER.SUCCESS": "Your account has been successfuly registered.",
+ "AUTH.INPUT.EMAIL": "Email",
+ "AUTH.INPUT.FULLNAME": "Fullname",
+ "AUTH.INPUT.PASSWORD": "Password",
+ "AUTH.INPUT.CONFIRM_PASSWORD": "Confirm Password",
+ "AUTH.INPUT.USERNAME": "ユーザー名",
+ "AUTH.VALIDATION.INVALID": "{name} is not valid",
+ "AUTH.VALIDATION.REQUIRED": "{name} is required",
+ "AUTH.VALIDATION.MIN_LENGTH": "{name}} minimum length is {{min}",
+ "AUTH.VALIDATION.AGREEMENT_REQUIRED": "Accepting terms & conditions are required",
+ "AUTH.VALIDATION.NOT_FOUND": "The requested {name} is not found",
+ "AUTH.VALIDATION.INVALID_LOGIN": "The login detail is incorrect",
+ "AUTH.VALIDATION.REQUIRED_FIELD": "Required field",
+ "AUTH.VALIDATION.MIN_LENGTH_FIELD": "Minimum field length:",
+ "AUTH.VALIDATION.MAX_LENGTH_FIELD": "Maximum field length:",
+ "AUTH.VALIDATION.INVALID_FIELD": "Field is not valid",
+ "ECOMMERCE.COMMON.SELECTED_RECORDS_COUNT": "Selected records count: ",
+ "ECOMMERCE.COMMON.ALL": "All",
+ "ECOMMERCE.COMMON.SUSPENDED": "Suspended",
+ "ECOMMERCE.COMMON.ACTIVE": "Active",
+ "ECOMMERCE.COMMON.FILTER": "Filter",
+ "ECOMMERCE.COMMON.BY_STATUS": "by Status",
+ "ECOMMERCE.COMMON.BY_TYPE": "by Type",
+ "ECOMMERCE.COMMON.BUSINESS": "Business",
+ "ECOMMERCE.COMMON.INDIVIDUAL": "Individual",
+ "ECOMMERCE.COMMON.SEARCH": "Search",
+ "ECOMMERCE.COMMON.IN_ALL_FIELDS": "in all fields",
+ "ECOMMERCE.ECOMMERCE": "eCommerce",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS": "Customers",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS_LIST": "Customers list",
+ "ECOMMERCE.CUSTOMERS.NEW_CUSTOMER": "New Customer",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.TITLE": "Customer Delete",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.DESCRIPTION": "Are you sure to permanently delete this customer?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.WAIT_DESCRIPTION": "Customer is deleting...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.MESSAGE": "Customer has been deleted",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.TITLE": "Customers Delete",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.DESCRIPTION": "Are you sure to permanently delete selected customers?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.WAIT_DESCRIPTION": "Customers are deleting...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.MESSAGE": "Selected customers have been deleted",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.TITLE": "Status has been updated for selected customers",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.MESSAGE": "Selected customers status have successfully been updated",
+ "ECOMMERCE.CUSTOMERS.EDIT.UPDATE_MESSAGE": "Customer has been updated",
+ "ECOMMERCE.CUSTOMERS.EDIT.ADD_MESSAGE": "Customer has been created"
+}
diff --git a/src/_metronic/i18n/messages/zh.json b/src/_metronic/i18n/messages/zh.json
new file mode 100644
index 0000000..1389d5c
--- /dev/null
+++ b/src/_metronic/i18n/messages/zh.json
@@ -0,0 +1,69 @@
+{
+ "TRANSLATOR.SELECT": "选择你的语言",
+ "MENU.NEW": "新",
+ "MENU.ACTIONS": "行动",
+ "MENU.CREATE_POST": "创建新帖子",
+ "MENU.PAGES": "Pages",
+ "MENU.FEATURES": "特征",
+ "MENU.APPS": "应用",
+ "MENU.DASHBOARD": "仪表板",
+ "AUTH.GENERAL.OR": "要么",
+ "AUTH.GENERAL.SUBMIT_BUTTON": "提交",
+ "AUTH.GENERAL.NO_ACCOUNT": "没有账号?",
+ "AUTH.GENERAL.SIGNUP_BUTTON": "注册",
+ "AUTH.GENERAL.FORGOT_BUTTON": "忘记密码",
+ "AUTH.GENERAL.BACK_BUTTON": "背部",
+ "AUTH.GENERAL.PRIVACY": "隐私",
+ "AUTH.GENERAL.LEGAL": "法律",
+ "AUTH.GENERAL.CONTACT": "联系",
+ "AUTH.LOGIN.TITLE": "创建帐号",
+ "AUTH.LOGIN.BUTTON": "签到",
+ "AUTH.FORGOT.TITLE": "Forgotten Password?",
+ "AUTH.FORGOT.DESC": "Enter your email to reset your password",
+ "AUTH.FORGOT.SUCCESS": "Your account has been successfully reset.",
+ "AUTH.REGISTER.TITLE": "Sign Up",
+ "AUTH.REGISTER.DESC": "Enter your details to create your account",
+ "AUTH.REGISTER.SUCCESS": "Your account has been successfuly registered.",
+ "AUTH.INPUT.EMAIL": "Email",
+ "AUTH.INPUT.FULLNAME": "Fullname",
+ "AUTH.INPUT.PASSWORD": "Password",
+ "AUTH.INPUT.CONFIRM_PASSWORD": "Confirm Password",
+ "AUTH.INPUT.USERNAME": "用戶名",
+ "AUTH.VALIDATION.INVALID": "{name} is not valid",
+ "AUTH.VALIDATION.REQUIRED": "{name} is required",
+ "AUTH.VALIDATION.MIN_LENGTH": "{name}} minimum length is {{min}",
+ "AUTH.VALIDATION.AGREEMENT_REQUIRED": "Accepting terms & conditions are required",
+ "AUTH.VALIDATION.NOT_FOUND": "The requested {name} is not found",
+ "AUTH.VALIDATION.INVALID_LOGIN": "The login detail is incorrect",
+ "AUTH.VALIDATION.REQUIRED_FIELD": "Required field",
+ "AUTH.VALIDATION.MIN_LENGTH_FIELD": "Minimum field length:",
+ "AUTH.VALIDATION.MAX_LENGTH_FIELD": "Maximum field length:",
+ "AUTH.VALIDATION.INVALID_FIELD": "Field is not valid",
+ "ECOMMERCE.COMMON.SELECTED_RECORDS_COUNT": "Selected records count: ",
+ "ECOMMERCE.COMMON.ALL": "All",
+ "ECOMMERCE.COMMON.SUSPENDED": "Suspended",
+ "ECOMMERCE.COMMON.ACTIVE": "Active",
+ "ECOMMERCE.COMMON.FILTER": "Filter",
+ "ECOMMERCE.COMMON.BY_STATUS": "by Status",
+ "ECOMMERCE.COMMON.BY_TYPE": "by Type",
+ "ECOMMERCE.COMMON.BUSINESS": "Business",
+ "ECOMMERCE.COMMON.INDIVIDUAL": "Individual",
+ "ECOMMERCE.COMMON.SEARCH": "Search",
+ "ECOMMERCE.COMMON.IN_ALL_FIELDS": "in all fields",
+ "ECOMMERCE.ECOMMERCE": "eCommerce",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS": "顾客",
+ "ECOMMERCE.CUSTOMERS.CUSTOMERS_LIST": "客户名单",
+ "ECOMMERCE.CUSTOMERS.NEW_CUSTOMER": "New Customer",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.TITLE": "Customer Delete",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.DESCRIPTION": "Are you sure to permanently delete this customer?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.WAIT_DESCRIPTION": "Customer is deleting...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_SIMPLE.MESSAGE": "Customer has been deleted",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.TITLE": "Customers Delete",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.DESCRIPTION": "Are you sure to permanently delete selected customers?",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.WAIT_DESCRIPTION": "Customers are deleting...",
+ "ECOMMERCE.CUSTOMERS.DELETE_CUSTOMER_MULTY.MESSAGE": "Selected customers have been deleted",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.TITLE": "Status has been updated for selected customers",
+ "ECOMMERCE.CUSTOMERS.UPDATE_STATUS.MESSAGE": "Selected customers status have successfully been updated",
+ "ECOMMERCE.CUSTOMERS.EDIT.UPDATE_MESSAGE": "Customer has been updated",
+ "ECOMMERCE.CUSTOMERS.EDIT.ADD_MESSAGE": "Customer has been created"
+}
diff --git a/src/_metronic/layout/MasterInit.tsx b/src/_metronic/layout/MasterInit.tsx
new file mode 100644
index 0000000..203e449
--- /dev/null
+++ b/src/_metronic/layout/MasterInit.tsx
@@ -0,0 +1,44 @@
+import {useEffect, useRef} from 'react'
+import {Tab} from 'bootstrap'
+import {
+ MenuComponent,
+ DrawerComponent,
+ ScrollComponent,
+ ScrollTopComponent,
+ StickyComponent,
+ ToggleComponent,
+ SwapperComponent,
+} from '../assets/ts/components'
+import {ThemeModeComponent} from '../assets/ts/layout'
+
+import {useLayout} from './core'
+
+export function MasterInit() {
+ const {config} = useLayout()
+ const isFirstRun = useRef(true)
+ const pluginsInitialization = () => {
+ isFirstRun.current = false
+ ThemeModeComponent.init()
+ setTimeout(() => {
+ ToggleComponent.bootstrap()
+ ScrollTopComponent.bootstrap()
+ DrawerComponent.bootstrap()
+ StickyComponent.bootstrap()
+ MenuComponent.bootstrap()
+ ScrollComponent.bootstrap()
+ SwapperComponent.bootstrap()
+ document.querySelectorAll('[data-bs-toggle="tab"]').forEach((tab) => {
+ Tab.getOrCreateInstance(tab)
+ })
+ }, 500)
+ }
+
+ useEffect(() => {
+ if (isFirstRun.current) {
+ isFirstRun.current = false
+ pluginsInitialization()
+ }
+ }, [config])
+
+ return <>>
+}
diff --git a/src/_metronic/layout/MasterLayout.tsx b/src/_metronic/layout/MasterLayout.tsx
new file mode 100644
index 0000000..8c5a5a0
--- /dev/null
+++ b/src/_metronic/layout/MasterLayout.tsx
@@ -0,0 +1,63 @@
+import {useEffect} from 'react'
+import {Outlet, useLocation} from 'react-router-dom'
+import {HeaderWrapper} from './components/header'
+//import {RightToolbar} from '../partials/layout/RightToolbar'
+import {ScrollTop} from './components/scroll-top'
+import {Content} from './components/content'
+import {FooterWrapper} from './components/footer'
+import {Sidebar} from './components/sidebar'
+import {
+ DrawerMessenger,
+ ActivityDrawer,
+ InviteUsers,
+ UpgradePlan,
+ ThemeModeProvider,
+} from '../partials'
+import {PageDataProvider} from './core'
+import {reInitMenu} from '../helpers'
+import {ToolbarWrapper} from './components/toolbar'
+
+const MasterLayout = () => {
+ const location = useLocation()
+ useEffect(() => {
+ reInitMenu()
+ }, [location.key])
+
+ return (
+
+
+
+
+ {/* begin:: Drawers */}
+
+ {/* */}
+
+ {/* end:: Drawers */}
+
+ {/* begin:: Modals */}
+
+
+ {/* end:: Modals */}
+
+
+
+ )
+}
+
+export {MasterLayout}
diff --git a/src/_metronic/layout/components/content/Content.tsx b/src/_metronic/layout/components/content/Content.tsx
new file mode 100644
index 0000000..16b8ca3
--- /dev/null
+++ b/src/_metronic/layout/components/content/Content.tsx
@@ -0,0 +1,39 @@
+import {useEffect} from 'react'
+import {useLocation} from 'react-router'
+import clsx from 'clsx'
+import {useLayout} from '../../core'
+import {DrawerComponent} from '../../../assets/ts/components'
+import {WithChildren} from '../../../helpers'
+
+const Content = ({children}: WithChildren) => {
+ const {config, classes} = useLayout()
+ const location = useLocation()
+ useEffect(() => {
+ DrawerComponent.hideAll()
+ }, [location])
+
+ const appContentContainer = config.app?.content?.container
+ return (
+
+ {appContentContainer ? (
+
+ {children}
+
+ ) : (
+ <>{children}>
+ )}
+
+ )
+}
+
+export {Content}
diff --git a/src/_metronic/layout/components/content/index.ts b/src/_metronic/layout/components/content/index.ts
new file mode 100644
index 0000000..aa90efe
--- /dev/null
+++ b/src/_metronic/layout/components/content/index.ts
@@ -0,0 +1 @@
+export * from './Content'
diff --git a/src/_metronic/layout/components/footer/Footer.tsx b/src/_metronic/layout/components/footer/Footer.tsx
new file mode 100644
index 0000000..2d8748a
--- /dev/null
+++ b/src/_metronic/layout/components/footer/Footer.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable react/jsx-no-target-blank */
+import {useEffect} from 'react'
+import {ILayout, useLayout} from '../../core'
+
+const Footer = () => {
+ const {config} = useLayout()
+ useEffect(() => {
+ updateDOM(config)
+ }, [config])
+ return (
+ <>
+
+
+
+ >
+ )
+}
+
+const updateDOM = (config: ILayout) => {
+ if (config.app?.footer?.fixed?.desktop) {
+ document.body.classList.add('data-kt-app-footer-fixed', 'true')
+ }
+
+ if (config.app?.footer?.fixed?.mobile) {
+ document.body.classList.add('data-kt-app-footer-fixed-mobile', 'true')
+ }
+}
+
+export {Footer}
diff --git a/src/_metronic/layout/components/footer/FooterWrapper.tsx b/src/_metronic/layout/components/footer/FooterWrapper.tsx
new file mode 100644
index 0000000..0a1ca6f
--- /dev/null
+++ b/src/_metronic/layout/components/footer/FooterWrapper.tsx
@@ -0,0 +1,24 @@
+import clsx from 'clsx'
+import {useLayout} from '../../core'
+import {Footer} from './Footer'
+
+const FooterWrapper = () => {
+ const {config} = useLayout()
+ if (!config.app?.footer?.display) {
+ return null
+ }
+
+ return (
+
+ )
+}
+
+export {FooterWrapper}
diff --git a/src/_metronic/layout/components/footer/index.ts b/src/_metronic/layout/components/footer/index.ts
new file mode 100644
index 0000000..eeeabf7
--- /dev/null
+++ b/src/_metronic/layout/components/footer/index.ts
@@ -0,0 +1 @@
+export * from './FooterWrapper'
diff --git a/src/_metronic/layout/components/header/Header.tsx b/src/_metronic/layout/components/header/Header.tsx
new file mode 100644
index 0000000..9ae256d
--- /dev/null
+++ b/src/_metronic/layout/components/header/Header.tsx
@@ -0,0 +1,89 @@
+import {FC, useEffect} from 'react'
+import {ILayout, useLayout} from '../../core'
+import {MenuInner} from './header-menus'
+
+const Header: FC = () => {
+ const {config} = useLayout()
+ useEffect(() => {
+ updateDOM(config)
+ }, [config])
+
+ return (
+
+ )
+}
+
+const updateDOM = (config: ILayout) => {
+ if (config.app?.header?.default?.fixed?.desktop) {
+ document.body.setAttribute('data-kt-app-header-fixed', 'true')
+ }
+
+ if (config.app?.header?.default?.fixed?.mobile) {
+ document.body.setAttribute('data-kt-app-header-fixed-mobile', 'true')
+ }
+
+ if (config.app?.header?.default?.stacked) {
+ document.body.setAttribute('data-kt-app-header-stacked', 'true')
+ }
+
+ const appHeaderDefaultStickyEnabled = config.app?.header?.default?.sticky?.enabled
+ let appHeaderDefaultStickyAttributes: {[attrName: string]: string} = {}
+ if (appHeaderDefaultStickyEnabled) {
+ appHeaderDefaultStickyAttributes = config.app?.header?.default?.sticky?.attributes as {
+ [attrName: string]: string
+ }
+ }
+
+ const appHeaderDefaultMinimizeEnabled = config.app?.header?.default?.minimize?.enabled
+ let appHeaderDefaultMinimizeAttributes: {[attrName: string]: string} = {}
+ if (appHeaderDefaultMinimizeEnabled) {
+ appHeaderDefaultMinimizeAttributes = config.app?.header?.default?.minimize?.attributes as {
+ [attrName: string]: string
+ }
+ }
+
+ setTimeout(() => {
+ const headerElement = document.getElementById('kt_app_header')
+ // header
+ if (headerElement) {
+ const headerAttributes = headerElement
+ .getAttributeNames()
+ .filter((t) => t.indexOf('data-') > -1)
+ headerAttributes.forEach((attr) => headerElement.removeAttribute(attr))
+
+ if (appHeaderDefaultStickyEnabled) {
+ for (const key in appHeaderDefaultStickyAttributes) {
+ if (appHeaderDefaultStickyAttributes.hasOwnProperty(key)) {
+ headerElement.setAttribute(key, appHeaderDefaultStickyAttributes[key])
+ }
+ }
+ }
+
+ if (appHeaderDefaultMinimizeEnabled) {
+ for (const key in appHeaderDefaultMinimizeAttributes) {
+ if (appHeaderDefaultMinimizeAttributes.hasOwnProperty(key)) {
+ headerElement.setAttribute(key, appHeaderDefaultMinimizeAttributes[key])
+ }
+ }
+ }
+ }
+ }, 0)
+}
+
+export {Header}
diff --git a/src/_metronic/layout/components/header/HeaderWrapper.tsx b/src/_metronic/layout/components/header/HeaderWrapper.tsx
new file mode 100644
index 0000000..60d1a16
--- /dev/null
+++ b/src/_metronic/layout/components/header/HeaderWrapper.tsx
@@ -0,0 +1,100 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import clsx from 'clsx'
+import {Link} from 'react-router-dom'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {useLayout} from '../../core'
+import {Header} from './Header'
+import {Navbar} from './Navbar'
+
+export function HeaderWrapper() {
+ const {config, classes} = useLayout()
+ if (!config.app?.header?.display) {
+ return null
+ }
+
+ return (
+
+ )
+}
diff --git a/src/_metronic/layout/components/header/Navbar.tsx b/src/_metronic/layout/components/header/Navbar.tsx
new file mode 100644
index 0000000..3006bbe
--- /dev/null
+++ b/src/_metronic/layout/components/header/Navbar.tsx
@@ -0,0 +1,75 @@
+import clsx from 'clsx'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {HeaderNotificationsMenu, HeaderUserMenu, Search, ThemeModeSwitcher} from '../../../partials'
+import {useLayout} from '../../core'
+
+const itemClass = 'ms-1 ms-lg-3'
+const btnClass =
+ 'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px w-md-40px h-md-40px'
+const userAvatarClass = 'symbol-35px symbol-md-40px'
+const btnIconClass = 'svg-icon-1'
+
+const Navbar = () => {
+ const {config} = useLayout()
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {config.app?.header?.default?.menu?.display && (
+
+
+
+ )}
+
+ )
+}
+
+export {Navbar}
diff --git a/src/_metronic/layout/components/header/header-menus/MegaMenu.tsx b/src/_metronic/layout/components/header/header-menus/MegaMenu.tsx
new file mode 100644
index 0000000..0291c55
--- /dev/null
+++ b/src/_metronic/layout/components/header/header-menus/MegaMenu.tsx
@@ -0,0 +1,162 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {Link} from 'react-router-dom'
+import {toAbsoluteUrl} from '../../../../helpers'
+import {useLayout} from '../../../core'
+
+const MegaMenu: FC = () => {
+ const {setLayoutType, setToolbarType} = useLayout()
+ return (
+
+ {/* begin:Col */}
+
+ {/* begin:Row */}
+
+ {/* begin:Col */}
+
+ {/* begin:Heading */}
+
Layouts
+ {/* end:Heading */}
+ {/* begin:Menu item */}
+
+ {/* end:Menu item */}
+ {/* begin:Menu item */}
+
+ {/* end:Menu item */}
+ {/* begin:Menu item */}
+
+ {/* end:Menu item */}
+ {/* begin:Menu item */}
+
+ {/* end:Menu item */}
+
+ {/* end:Col */}
+ {/* begin:Col */}
+
+ {/* begin:Heading */}
+
Toolbars
+ {/* end:Heading */}
+ {/* begin:Menu item */}
+
+ {/* end:Menu item */}
+ {/* begin:Menu item */}
+
+ {/* end:Menu item */}
+ {/* begin:Menu item */}
+
+ {/* end:Menu item */}
+ {/* begin:Menu item */}
+
+ {/* end:Menu item */}
+ {/* begin:Menu item */}
+
+ {/* end:Menu item */}
+
+ {/* end:Col */}
+
+ {/* end:Row */}
+
+ {/* begin:Layout Builder */}
+
+
+
Layout Builder
+
Customize view
+
+
+ Try Builder
+
+
+ {/* end:Layout Builder */}
+
+ {/* end:Col */}
+ {/* begin:Col */}
+
+
+
+ {/* end:Col */}
+
+ )
+}
+
+export {MegaMenu}
diff --git a/src/_metronic/layout/components/header/header-menus/MenuInner.tsx b/src/_metronic/layout/components/header/header-menus/MenuInner.tsx
new file mode 100644
index 0000000..68b2243
--- /dev/null
+++ b/src/_metronic/layout/components/header/header-menus/MenuInner.tsx
@@ -0,0 +1,134 @@
+import {useIntl} from 'react-intl'
+import {MenuItem} from './MenuItem'
+import {MenuInnerWithSub} from './MenuInnerWithSub'
+import {MegaMenu} from './MegaMenu'
+
+export function MenuInner() {
+ const intl = useIntl()
+ return (
+ <>
+
+
+
+ {/* PAGES */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* ACCOUNT */}
+
+
+
+
+
+ {/* ERRORS */}
+
+
+
+
+
+ {/* Widgets */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* PAGES */}
+
+
+
+
+
+
+
+
+
+
+
+ >
+ )
+}
diff --git a/src/_metronic/layout/components/header/header-menus/MenuInnerWithSub.tsx b/src/_metronic/layout/components/header/header-menus/MenuInnerWithSub.tsx
new file mode 100644
index 0000000..a3ce71e
--- /dev/null
+++ b/src/_metronic/layout/components/header/header-menus/MenuInnerWithSub.tsx
@@ -0,0 +1,82 @@
+import {FC, useRef, useEffect} from 'react'
+import {useLocation} from 'react-router'
+import clsx from 'clsx'
+import {checkIsActive, KTSVG, WithChildren} from '../../../../helpers'
+
+type Props = {
+ to: string
+ title: string
+ icon?: string
+ fontIcon?: string
+ menuTrigger?: 'click' | `{default:'click', lg: 'hover'}`
+ menuPlacement?: 'right-start' | 'bottom-start' | 'left-start'
+ hasArrow?: boolean
+ hasBullet?: boolean
+ isMega?: boolean
+}
+
+const MenuInnerWithSub: FC = ({
+ children,
+ to,
+ title,
+ icon,
+ fontIcon,
+ menuTrigger,
+ menuPlacement,
+ hasArrow = false,
+ hasBullet = false,
+ isMega = false,
+}) => {
+ const menuItemRef = useRef(null)
+ const {pathname} = useLocation()
+
+ useEffect(() => {
+ if (menuItemRef.current && menuTrigger && menuPlacement) {
+ menuItemRef.current.setAttribute('data-kt-menu-trigger', menuTrigger)
+ menuItemRef.current.setAttribute('data-kt-menu-placement', menuPlacement)
+ }
+ }, [menuTrigger, menuPlacement])
+
+ return (
+
+
+ {hasBullet && (
+
+
+
+ )}
+
+ {icon && (
+
+
+
+ )}
+
+ {fontIcon && (
+
+
+
+ )}
+
+ {title}
+
+ {hasArrow && }
+
+
+ {children}
+
+
+ )
+}
+
+export {MenuInnerWithSub}
diff --git a/src/_metronic/layout/components/header/header-menus/MenuItem.tsx b/src/_metronic/layout/components/header/header-menus/MenuItem.tsx
new file mode 100644
index 0000000..84616b1
--- /dev/null
+++ b/src/_metronic/layout/components/header/header-menus/MenuItem.tsx
@@ -0,0 +1,53 @@
+import {FC} from 'react'
+import {useLocation} from 'react-router'
+import {Link} from 'react-router-dom'
+import clsx from 'clsx'
+import {checkIsActive, KTSVG} from '../../../../helpers'
+
+type Props = {
+ to: string
+ title: string
+ icon?: string
+ fontIcon?: string
+ hasArrow?: boolean
+ hasBullet?: boolean
+}
+
+const MenuItem: FC = ({to, title, icon, fontIcon, hasArrow = false, hasBullet = false}) => {
+ const {pathname} = useLocation()
+
+ return (
+
+
+ {hasBullet && (
+
+
+
+ )}
+
+ {icon && (
+
+
+
+ )}
+
+ {fontIcon && (
+
+
+
+ )}
+
+ {title}
+
+ {hasArrow && }
+
+
+ )
+}
+
+export {MenuItem}
diff --git a/src/_metronic/layout/components/header/header-menus/index.ts b/src/_metronic/layout/components/header/header-menus/index.ts
new file mode 100644
index 0000000..fecbc56
--- /dev/null
+++ b/src/_metronic/layout/components/header/header-menus/index.ts
@@ -0,0 +1 @@
+export * from './MenuInner'
diff --git a/src/_metronic/layout/components/header/index.ts b/src/_metronic/layout/components/header/index.ts
new file mode 100644
index 0000000..1019be4
--- /dev/null
+++ b/src/_metronic/layout/components/header/index.ts
@@ -0,0 +1 @@
+export * from './HeaderWrapper'
diff --git a/src/_metronic/layout/components/scroll-top/ScrollTop.tsx b/src/_metronic/layout/components/scroll-top/ScrollTop.tsx
new file mode 100644
index 0000000..23f86aa
--- /dev/null
+++ b/src/_metronic/layout/components/scroll-top/ScrollTop.tsx
@@ -0,0 +1,57 @@
+import {useEffect, useRef} from 'react'
+import {useLocation} from 'react-router-dom'
+import {
+ ScrollTopComponent,
+ DrawerComponent,
+ ToggleComponent,
+ StickyComponent,
+} from '../../../assets/ts/components'
+import {KTSVG} from '../../../helpers'
+
+export function ScrollTop() {
+ const {pathname} = useLocation()
+ const isFirstRun = useRef(true)
+
+ const pluginsReinitialization = () => {
+ setTimeout(() => {
+ StickyComponent.reInitialization()
+ setTimeout(() => {
+ ToggleComponent.reinitialization()
+ DrawerComponent.reinitialization()
+ }, 70)
+ }, 140)
+ }
+
+ const scrollTop = () => {
+ ScrollTopComponent.goTop()
+ }
+
+ const updateHeaderSticky = () => {
+ const stickyHeader = document.body.querySelectorAll(`[data-kt-sticky-name="header"]`)
+ if (stickyHeader && stickyHeader.length > 0) {
+ const sticky = StickyComponent.getInstance(stickyHeader[0] as HTMLElement)
+ if (sticky) {
+ sticky.update()
+ }
+ }
+ }
+
+ useEffect(() => {
+ if (isFirstRun.current) {
+ isFirstRun.current = false
+ } else {
+ pluginsReinitialization()
+ }
+
+ updateHeaderSticky()
+ setTimeout(() => {
+ scrollTop()
+ }, 0)
+ }, [pathname])
+
+ return (
+
+
+
+ )
+}
diff --git a/src/_metronic/layout/components/scroll-top/index.ts b/src/_metronic/layout/components/scroll-top/index.ts
new file mode 100644
index 0000000..44b0415
--- /dev/null
+++ b/src/_metronic/layout/components/scroll-top/index.ts
@@ -0,0 +1 @@
+export * from './ScrollTop'
diff --git a/src/_metronic/layout/components/sidebar/Sidebar.tsx b/src/_metronic/layout/components/sidebar/Sidebar.tsx
new file mode 100644
index 0000000..c1621c5
--- /dev/null
+++ b/src/_metronic/layout/components/sidebar/Sidebar.tsx
@@ -0,0 +1,129 @@
+import clsx from 'clsx'
+import {useEffect} from 'react'
+import {ILayout, useLayout} from '../../core'
+import {SidebarMenu} from './sidebar-menu/SidebarMenu'
+import {SidebarFooter} from './SidebarFooter'
+import {SidebarLogo} from './SidebarLogo'
+
+const Sidebar = () => {
+ const {config} = useLayout()
+
+ useEffect(() => {
+ updateDOM(config)
+ }, [config])
+
+ if (!config.app?.sidebar?.display) {
+ return null
+ }
+
+ return (
+
+ )
+}
+
+const updateDOM = (config: ILayout) => {
+ if (config.app?.sidebar?.default?.minimize?.desktop?.enabled) {
+ if (config.app?.sidebar?.default?.minimize?.desktop?.default) {
+ document.body.setAttribute('data-kt-app-sidebar-minimize', 'on')
+ }
+
+ if (config.app?.sidebar?.default?.minimize?.desktop?.hoverable) {
+ document.body.setAttribute('data-kt-app-sidebar-hoverable', 'true')
+ }
+ }
+
+ if (config.app?.sidebar?.default?.minimize?.mobile?.enabled) {
+ if (config.app?.sidebar?.default?.minimize?.mobile?.default) {
+ document.body.setAttribute('data-kt-app-sidebar-minimize-mobile', 'on')
+ }
+
+ if (config.app?.sidebar?.default?.minimize?.mobile?.hoverable) {
+ document.body.setAttribute('data-kt-app-sidebar-hoverable-mobile', 'true')
+ }
+ }
+
+ if (config.app?.sidebar?.default?.collapse?.desktop?.enabled) {
+ if (config.app?.sidebar?.default?.collapse?.desktop?.default) {
+ document.body.setAttribute('data-kt-app-sidebar-collapse', 'on')
+ }
+ }
+
+ if (config.app?.sidebar?.default?.collapse?.mobile?.enabled) {
+ if (config.app?.sidebar?.default?.collapse?.mobile?.default) {
+ document.body.setAttribute('data-kt-app-sidebar-collapse-mobile', 'on')
+ }
+ }
+
+ if (config.app?.sidebar?.default?.push) {
+ if (config.app?.sidebar?.default?.push?.header) {
+ document.body.setAttribute('data-kt-app-sidebar-push-header', 'true')
+ }
+
+ if (config.app?.sidebar?.default?.push?.toolbar) {
+ document.body.setAttribute('data-kt-app-sidebar-push-toolbar', 'true')
+ }
+
+ if (config.app?.sidebar?.default?.push?.footer) {
+ document.body.setAttribute('data-kt-app-sidebar-push-footer', 'true')
+ }
+ }
+
+ if (config.app?.sidebar?.default?.stacked) {
+ document.body.setAttribute('app-sidebar-stacked', 'true')
+ }
+
+ document.body.setAttribute('data-kt-app-sidebar-enabled', 'true')
+ document.body.setAttribute(
+ 'data-kt-app-sidebar-fixed',
+ config.app?.sidebar?.default?.fixed?.desktop?.toString() || ''
+ )
+
+ const appSidebarDefaultDrawerEnabled = config.app?.sidebar?.default?.drawer?.enabled
+ let appSidebarDefaultDrawerAttributes: {[attrName: string]: string} = {}
+ if (appSidebarDefaultDrawerEnabled) {
+ appSidebarDefaultDrawerAttributes = config.app?.sidebar?.default?.drawer?.attributes as {
+ [attrName: string]: string
+ }
+ }
+
+ const appSidebarDefaultStickyEnabled = config.app?.sidebar?.default?.sticky?.enabled
+ let appSidebarDefaultStickyAttributes: {[attrName: string]: string} = {}
+ if (appSidebarDefaultStickyEnabled) {
+ appSidebarDefaultStickyAttributes = config.app?.sidebar?.default?.sticky?.attributes as {
+ [attrName: string]: string
+ }
+ }
+
+ setTimeout(() => {
+ const sidebarElement = document.getElementById('kt_app_sidebar')
+ // sidebar
+ if (sidebarElement) {
+ const sidebarAttributes = sidebarElement
+ .getAttributeNames()
+ .filter((t) => t.indexOf('data-') > -1)
+ sidebarAttributes.forEach((attr) => sidebarElement.removeAttribute(attr))
+
+ if (appSidebarDefaultDrawerEnabled) {
+ for (const key in appSidebarDefaultDrawerAttributes) {
+ if (appSidebarDefaultDrawerAttributes.hasOwnProperty(key)) {
+ sidebarElement.setAttribute(key, appSidebarDefaultDrawerAttributes[key])
+ }
+ }
+ }
+
+ if (appSidebarDefaultStickyEnabled) {
+ for (const key in appSidebarDefaultStickyAttributes) {
+ if (appSidebarDefaultStickyAttributes.hasOwnProperty(key)) {
+ sidebarElement.setAttribute(key, appSidebarDefaultStickyAttributes[key])
+ }
+ }
+ }
+ }
+ }, 0)
+}
+
+export {Sidebar}
diff --git a/src/_metronic/layout/components/sidebar/SidebarFooter.tsx b/src/_metronic/layout/components/sidebar/SidebarFooter.tsx
new file mode 100644
index 0000000..3b5ee97
--- /dev/null
+++ b/src/_metronic/layout/components/sidebar/SidebarFooter.tsx
@@ -0,0 +1,23 @@
+/* eslint-disable react/jsx-no-target-blank */
+import {KTSVG} from '../../../helpers'
+
+const SidebarFooter = () => {
+ return (
+
+ )
+}
+
+export {SidebarFooter}
diff --git a/src/_metronic/layout/components/sidebar/SidebarLogo.tsx b/src/_metronic/layout/components/sidebar/SidebarLogo.tsx
new file mode 100644
index 0000000..ff342a8
--- /dev/null
+++ b/src/_metronic/layout/components/sidebar/SidebarLogo.tsx
@@ -0,0 +1,69 @@
+import {Link} from 'react-router-dom'
+import clsx from 'clsx'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {useLayout} from '../../core'
+
+const SidebarLogo = () => {
+ const {config} = useLayout()
+ const appSidebarDefaultMinimizeDesktopEnabled =
+ config?.app?.sidebar?.default?.minimize?.desktop?.enabled
+ const appSidebarDefaultCollapseDesktopEnabled =
+ config?.app?.sidebar?.default?.collapse?.desktop?.enabled
+ const toggleType = appSidebarDefaultCollapseDesktopEnabled
+ ? 'collapse'
+ : appSidebarDefaultMinimizeDesktopEnabled
+ ? 'minimize'
+ : ''
+ const toggleState = appSidebarDefaultMinimizeDesktopEnabled ? 'active' : ''
+ const appSidebarDefaultMinimizeDefault = config.app?.sidebar?.default?.minimize?.desktop?.default
+ return (
+
+ )
+}
+
+export {SidebarLogo}
diff --git a/src/_metronic/layout/components/sidebar/index.ts b/src/_metronic/layout/components/sidebar/index.ts
new file mode 100644
index 0000000..9130e63
--- /dev/null
+++ b/src/_metronic/layout/components/sidebar/index.ts
@@ -0,0 +1 @@
+export * from './Sidebar'
diff --git a/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenu.tsx b/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenu.tsx
new file mode 100644
index 0000000..187d09e
--- /dev/null
+++ b/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenu.tsx
@@ -0,0 +1,30 @@
+import {SidebarMenuMain} from './SidebarMenuMain'
+
+const SidebarMenu = () => {
+ return (
+
+
+
+ )
+}
+
+export {SidebarMenu}
diff --git a/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenuItem.tsx b/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenuItem.tsx
new file mode 100644
index 0000000..149a8c1
--- /dev/null
+++ b/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenuItem.tsx
@@ -0,0 +1,53 @@
+import {FC} from 'react'
+import clsx from 'clsx'
+import {Link} from 'react-router-dom'
+import {useLocation} from 'react-router'
+import {checkIsActive, KTSVG, WithChildren} from '../../../../helpers'
+import {useLayout} from '../../../core'
+
+type Props = {
+ to: string
+ title: string
+ icon?: string
+ fontIcon?: string
+ hasBullet?: boolean
+}
+
+const SidebarMenuItem: FC = ({
+ children,
+ to,
+ title,
+ icon,
+ fontIcon,
+ hasBullet = false,
+}) => {
+ const {pathname} = useLocation()
+ const isActive = checkIsActive(pathname, to)
+ const {config} = useLayout()
+ const {app} = config
+
+ return (
+
+
+ {hasBullet && (
+
+
+
+ )}
+ {icon && app?.sidebar?.default?.menu?.iconType === 'svg' && (
+
+ {' '}
+
+
+ )}
+ {fontIcon && app?.sidebar?.default?.menu?.iconType === 'font' && (
+
+ )}
+ {title}
+
+ {children}
+
+ )
+}
+
+export {SidebarMenuItem}
diff --git a/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenuItemWithSub.tsx b/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenuItemWithSub.tsx
new file mode 100644
index 0000000..a40e558
--- /dev/null
+++ b/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenuItemWithSub.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import clsx from 'clsx'
+import {useLocation} from 'react-router'
+import {checkIsActive, KTSVG, WithChildren} from '../../../../helpers'
+import {useLayout} from '../../../core'
+
+type Props = {
+ to: string
+ title: string
+ icon?: string
+ fontIcon?: string
+ hasBullet?: boolean
+}
+
+const SidebarMenuItemWithSub: React.FC = ({
+ children,
+ to,
+ title,
+ icon,
+ fontIcon,
+ hasBullet,
+}) => {
+ const {pathname} = useLocation()
+ const isActive = checkIsActive(pathname, to)
+ const {config} = useLayout()
+ const {app} = config
+
+ return (
+
+
+ {hasBullet && (
+
+
+
+ )}
+ {icon && app?.sidebar?.default?.menu?.iconType === 'svg' && (
+
+
+
+ )}
+ {fontIcon && app?.sidebar?.default?.menu?.iconType === 'font' && (
+
+ )}
+ {title}
+
+
+
+ {children}
+
+
+ )
+}
+
+export {SidebarMenuItemWithSub}
diff --git a/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenuMain.tsx b/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenuMain.tsx
new file mode 100644
index 0000000..e49dbfa
--- /dev/null
+++ b/src/_metronic/layout/components/sidebar/sidebar-menu/SidebarMenuMain.tsx
@@ -0,0 +1,133 @@
+/* eslint-disable react/jsx-no-target-blank */
+import React from 'react'
+import {useIntl} from 'react-intl'
+import {KTSVG} from '../../../../helpers'
+import {SidebarMenuItemWithSub} from './SidebarMenuItemWithSub'
+import {SidebarMenuItem} from './SidebarMenuItem'
+
+const SidebarMenuMain = () => {
+ const intl = useIntl()
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ )
+}
+
+export {SidebarMenuMain}
diff --git a/src/_metronic/layout/components/toolbar/Toolbar.tsx b/src/_metronic/layout/components/toolbar/Toolbar.tsx
new file mode 100644
index 0000000..4f70327
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/Toolbar.tsx
@@ -0,0 +1,101 @@
+import {useEffect} from 'react'
+import {ILayout, useLayout} from '../../core'
+import {
+ ToolbarAccounting,
+ ToolbarClassic,
+ ToolbarExtended,
+ ToolbarReports,
+ ToolbarSaas,
+} from './toolbars'
+
+const Toolbar = () => {
+ const {config} = useLayout()
+ useEffect(() => {
+ updateDOM(config)
+ document.body.setAttribute('data-kt-app-toolbar-enabled', 'true')
+ }, [config])
+
+ switch (config.app?.toolbar?.layout) {
+ case 'classic':
+ return
+ case 'accounting':
+ return
+ case 'extended':
+ return
+ case 'reports':
+ return
+ case 'saas':
+ return
+ default:
+ return
+ }
+}
+
+const updateDOM = (config: ILayout) => {
+ let appToolbarSwapAttributes: {[attrName: string]: string} = {}
+ const appToolbarSwapEnabled = config.app?.toolbar?.swap?.enabled
+ if (appToolbarSwapEnabled) {
+ appToolbarSwapAttributes = config.app?.toolbar?.swap?.attributes as {[attrName: string]: string}
+ }
+
+ let appToolbarStickyAttributes: {[attrName: string]: string} = {}
+ const appToolbarStickyEnabled = config.app?.toolbar?.sticky?.enabled
+ if (appToolbarStickyEnabled) {
+ appToolbarStickyAttributes = config.app?.toolbar?.sticky?.attributes as {
+ [attrName: string]: string
+ }
+
+ let appToolbarMinimizeAttributes: {[attrName: string]: string} = {}
+ const appToolbarMinimizeEnabled = config.app?.toolbar?.minimize?.enabled
+ if (appToolbarMinimizeEnabled) {
+ appToolbarMinimizeAttributes = config.app?.toolbar?.minimize?.attributes as {
+ [attrName: string]: string
+ }
+ }
+
+ if (config.app?.toolbar?.fixed?.desktop) {
+ document.body.setAttribute('data-kt-app-toolbar-fixed', 'true')
+ }
+
+ if (config.app?.toolbar?.fixed?.mobile) {
+ document.body.setAttribute('data-kt-app-toolbar-fixed-mobile', 'true')
+ }
+
+ setTimeout(() => {
+ const toolbarElement = document.getElementById('kt_app_toolbar')
+ // toolbar
+ if (toolbarElement) {
+ const toolbarAttributes = toolbarElement
+ .getAttributeNames()
+ .filter((t) => t.indexOf('data-') > -1)
+ toolbarAttributes.forEach((attr) => toolbarElement.removeAttribute(attr))
+
+ if (appToolbarSwapEnabled) {
+ for (const key in appToolbarSwapAttributes) {
+ if (appToolbarSwapAttributes.hasOwnProperty(key)) {
+ toolbarElement.setAttribute(key, appToolbarSwapAttributes[key])
+ }
+ }
+ }
+
+ if (appToolbarStickyEnabled) {
+ for (const key in appToolbarStickyAttributes) {
+ if (appToolbarStickyAttributes.hasOwnProperty(key)) {
+ toolbarElement.setAttribute(key, appToolbarStickyAttributes[key])
+ }
+ }
+ }
+
+ if (appToolbarMinimizeEnabled) {
+ for (const key in appToolbarMinimizeAttributes) {
+ if (appToolbarMinimizeAttributes.hasOwnProperty(key)) {
+ toolbarElement.setAttribute(key, appToolbarMinimizeAttributes[key])
+ }
+ }
+ }
+ }
+ }, 0)
+ }
+}
+
+export {Toolbar}
diff --git a/src/_metronic/layout/components/toolbar/ToolbarWrapper.tsx b/src/_metronic/layout/components/toolbar/ToolbarWrapper.tsx
new file mode 100644
index 0000000..e95d0fe
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/ToolbarWrapper.tsx
@@ -0,0 +1,51 @@
+import clsx from 'clsx'
+import {ToolbarType, useLayout} from '../../core'
+import {Toolbar} from './Toolbar'
+import {PageTitleWrapper} from './page-title'
+
+const ToolbarWrapper = () => {
+ const {config, classes} = useLayout()
+ if (!config.app?.toolbar?.display) {
+ return null
+ }
+
+ const isPageTitleVisible = showPageTitle(
+ config.app?.toolbar?.layout,
+ config.app?.pageTitle?.display
+ )
+
+ return (
+
+ )
+}
+
+const showPageTitle = (appToolbarLayout?: ToolbarType, appPageTitleDisplay?: boolean): boolean => {
+ const viewsWithPageTitles = ['classic', 'reports', 'saas']
+ if (!appToolbarLayout || !appPageTitleDisplay) {
+ return false
+ }
+
+ return appPageTitleDisplay && viewsWithPageTitles.some((t) => t === appToolbarLayout)
+}
+
+export {ToolbarWrapper}
diff --git a/src/_metronic/layout/components/toolbar/index.ts b/src/_metronic/layout/components/toolbar/index.ts
new file mode 100644
index 0000000..f89cb26
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/index.ts
@@ -0,0 +1 @@
+export * from './ToolbarWrapper'
diff --git a/src/_metronic/layout/components/toolbar/page-title/PageTitle.tsx b/src/_metronic/layout/components/toolbar/page-title/PageTitle.tsx
new file mode 100644
index 0000000..b0c47c5
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/page-title/PageTitle.tsx
@@ -0,0 +1,86 @@
+import clsx from 'clsx'
+import {Link} from 'react-router-dom'
+import {useLayout} from '../../../core'
+import {usePageData} from '../../../core/PageData'
+
+const PageTitle = () => {
+ const {pageTitle, pageDescription, pageBreadcrumbs} = usePageData()
+ const {config, classes} = useLayout()
+ const appPageTitleDirection = config.app?.pageTitle?.direction
+
+ return (
+
+ {/* begin::Title */}
+ {config.app?.pageTitle?.display && pageTitle && (
+
+ {pageTitle}
+ {pageDescription && config.app?.pageTitle && config.app?.pageTitle?.description && (
+
+ {config.app?.pageTitle?.direction === 'row' && (
+
+ )}
+ {pageDescription}{' '}
+
+ )}
+
+ )}
+ {/* end::Title */}
+
+ {pageBreadcrumbs &&
+ pageBreadcrumbs.length > 0 &&
+ config.app?.pageTitle &&
+ config.app?.pageTitle?.breadCrumb && (
+ <>
+ {config.app?.pageTitle?.direction === 'row' && (
+
+ )}
+
+ {Array.from(pageBreadcrumbs).map((item, index) => (
+
+ {!item.isSeparator ? (
+
+ {item.title}
+
+ ) : (
+
+ )}
+
+ ))}
+ {pageTitle}
+
+ >
+ )}
+
+ )
+}
+
+export {PageTitle}
diff --git a/src/_metronic/layout/components/toolbar/page-title/PageTitleWrapper.tsx b/src/_metronic/layout/components/toolbar/page-title/PageTitleWrapper.tsx
new file mode 100644
index 0000000..87360e5
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/page-title/PageTitleWrapper.tsx
@@ -0,0 +1,13 @@
+import {useLayout} from '../../../core'
+import {PageTitle} from './PageTitle'
+
+const PageTitleWrapper = () => {
+ const {config} = useLayout()
+ if (!config.app?.pageTitle?.display) {
+ return null
+ }
+
+ return
+}
+
+export {PageTitleWrapper}
diff --git a/src/_metronic/layout/components/toolbar/page-title/index.ts b/src/_metronic/layout/components/toolbar/page-title/index.ts
new file mode 100644
index 0000000..9c82991
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/page-title/index.ts
@@ -0,0 +1 @@
+export * from './PageTitleWrapper'
diff --git a/src/_metronic/layout/components/toolbar/toolbars/ToolbarAccounting.tsx b/src/_metronic/layout/components/toolbar/toolbars/ToolbarAccounting.tsx
new file mode 100644
index 0000000..74d293b
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/toolbars/ToolbarAccounting.tsx
@@ -0,0 +1,139 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC, useEffect, useState} from 'react'
+import {KTSVG} from '../../../../helpers'
+
+const ToolbarAccounting: FC = () => {
+ const [progress, setProgress] = useState('1')
+ const [filter, setFilter] = useState('1')
+
+ useEffect(() => {
+ document.body.setAttribute('data-kt-app-toolbar-fixed', 'true')
+ }, [])
+
+ return (
+ <>
+
+ {/* begin::Input group */}
+
+ {/* begin::Label */}
+
Actions:
+ {/* end::Label */}
+
+ {/* begin::Actions */}
+
+ {/* begin::Button */}
+
+ {/* end::Button */}
+
+ {/* begin::Button */}
+
+ {/* end::Button */}
+
+ {/* begin::Button */}
+
+ {/* end::Button */}
+
+ {/* end::Actions */}
+
+ {/* end::Input group */}
+
+ {/* begin::Input group */}
+
+ {/* begin::Desktop separartor */}
+
+ {/* end::Desktop separartor */}
+
+ {/* begin::Label */}
+
Progress:
+ {/* end::Label */}
+
+
+
+ {/* end::Input group */}
+ {/* end::Toolbar start */}
+
+ {/* begin::Toolbar end */}
+
+ {/* begin::Input group */}
+
+ {/* begin::Select */}
+ setProgress(e.target.value)}
+ >
+
+ Today 16 Feb
+ In Progress
+ Done
+
+ {/* end::Select */}
+
+ {/* end::Input group- */}
+
+ {/* begin::Input group- */}
+
+ {/* begin::Select */}
+ setFilter(e.target.value)}
+ >
+
+ Filters
+ In Progress
+ Done
+
+ {/* end::Content */}
+
+ {/* end::Input group- */}
+
+ >
+ )
+}
+
+export {ToolbarAccounting}
diff --git a/src/_metronic/layout/components/toolbar/toolbars/ToolbarClassic.tsx b/src/_metronic/layout/components/toolbar/toolbars/ToolbarClassic.tsx
new file mode 100644
index 0000000..01a40d2
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/toolbars/ToolbarClassic.tsx
@@ -0,0 +1,71 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+import {useState} from 'react'
+import {KTSVG} from '../../../../helpers'
+import {CreateAppModal, Dropdown1} from '../../../../partials'
+import {useLayout} from '../../../core'
+
+const ToolbarClassic = () => {
+ const {config} = useLayout()
+ const [showCreateAppModal, setShowCreateAppModal] = useState(false)
+ const daterangepickerButtonClass = config.app?.toolbar?.fixed?.desktop
+ ? 'btn-light'
+ : 'bg-body btn-color-gray-700 btn-active-color-primary'
+
+ return (
+
+ )
+}
+
+export {ToolbarClassic}
diff --git a/src/_metronic/layout/components/toolbar/toolbars/ToolbarExtended.tsx b/src/_metronic/layout/components/toolbar/toolbars/ToolbarExtended.tsx
new file mode 100644
index 0000000..358712f
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/toolbars/ToolbarExtended.tsx
@@ -0,0 +1,163 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC, useEffect, useState} from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../../helpers'
+
+const ToolbarExtended: FC = () => {
+ const [progress, setProgress] = useState('1')
+ const [search, setSearch] = useState('')
+
+ useEffect(() => {
+ document.body.setAttribute('data-kt-app-toolbar-fixed', 'true')
+ }, [])
+
+ return (
+ <>
+
+ {/* begin::Label */}
+
Team:
+ {/* end::Label */}
+
+ {/* begin::Users */}
+
+ {/* begin::User */}
+
+ {/* end::User */}
+
+ {/* begin::User */}
+
+
+
+ {/* end::User */}
+
+ {/* begin::User */}
+
+
+
+ {/* end::User */}
+
+ {/* begin::User */}
+
+ {/* end::User */}
+
+ {/* begin::User */}
+
+
+
+ {/* end::User */}
+
+ {/* begin::User */}
+
+ {/* end::User */}
+
+ {/* begin::User */}
+
+
+
+ {/* end::User */}
+
+ {/* end::Users */}
+
+ {/* begin::Button */}
+
+
+ {/* end::Button */}
+ {/* end::Toolbar start */}
+
+ {/* begin::Toolbar end */}
+
+ {/* begin::Search */}
+
+
+ setSearch(e.target.value)}
+ placeholder='Search Team'
+ />
+
+ {/* end::Search */}
+
+ {/* begin::Separartor */}
+
+ {/* end::Separartor */}
+
+ {/* begin::Label */}
+
+ Sort By:
+
+ {/* end::Label */}
+
+ {/* begin::Select */}
+
setProgress(e.target.value)}
+ >
+
+ Latest
+ In Progress
+ Done
+
+ {/* end::Select */}
+
+ {/* begin::Actions */}
+
+
+
+
+
+
+
+
+
+ {/* end::Actions */}
+
+ >
+ )
+}
+
+export {ToolbarExtended}
diff --git a/src/_metronic/layout/components/toolbar/toolbars/ToolbarReports.tsx b/src/_metronic/layout/components/toolbar/toolbars/ToolbarReports.tsx
new file mode 100644
index 0000000..08b0b78
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/toolbars/ToolbarReports.tsx
@@ -0,0 +1,121 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {useEffect, useState} from 'react'
+import {KTSVG} from '../../../../helpers'
+
+const ToolbarReports = () => {
+ const [progress, setProgress] = useState('1')
+
+ useEffect(() => {
+ document.body.setAttribute('data-kt-app-toolbar-fixed', 'true')
+ }, [])
+
+ return (
+
+ {/* begin::Wrapper */}
+
+ {/* begin::Label */}
+
+ Filter By:
+
+ {/* end::Label */}
+
+
+
+ {/* end::Wrapper */}
+
+ {/* begin::Separartor */}
+
+ {/* end::Separartor */}
+
+ {/* begin::Wrapper */}
+
+ {/* begin::Label */}
+
+ Sort By:
+
+ {/* end::Label */}
+
+ {/* begin::Select */}
+
setProgress(e.target.value)}
+ >
+
+ Latest
+ In Progress
+ Done
+
+ {/* end::Select */}
+
+ {/* begin::Actions */}
+
+
+
+
+
+
+
+
+
+ {/* end::Actions */}
+
+ {/* end::Wrapper */}
+
+ )
+}
+
+export {ToolbarReports}
diff --git a/src/_metronic/layout/components/toolbar/toolbars/ToolbarSaas.tsx b/src/_metronic/layout/components/toolbar/toolbars/ToolbarSaas.tsx
new file mode 100644
index 0000000..b349fcf
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/toolbars/ToolbarSaas.tsx
@@ -0,0 +1,126 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC, useEffect, useState} from 'react'
+import {KTSVG} from '../../../../helpers'
+
+const ToolbarSaas: FC = () => {
+ const [progress, setProgress] = useState('1')
+ useEffect(() => {
+ document.body.setAttribute('data-kt-app-toolbar-fixed', 'true')
+ }, [])
+
+ return (
+
+ {/* begin::Action wrapper */}
+
+ {/* begin::Label */}
+
+ Sort By:
+
+ {/* end::Label */}
+
+ {/* begin::Select */}
+ setProgress(e.target.value)}
+ value={progress}
+ >
+
+ Latest
+ In Progress
+ Done
+
+ {/* end::Select */}
+
+ {/* end::Action wrapper */}
+
+ {/* begin::Action wrapper */}
+
+ {/* begin::Separartor */}
+
+ {/* end::Separartor */}
+
+ {/* begin::Label */}
+
Impact Level:
+ {/* end::Label */}
+
+ {/* begin::NoUiSlider */}
+
+ {/* end::NoUiSlider */}
+
+ {/* begin::Separartor */}
+
+ {/* end::Separartor */}
+
+ {/* end::Action wrapper */}
+
+ {/* begin::Action wrapper */}
+
+ {/* begin::Label */}
+
Quick Tools:
+ {/* end::Label */}
+
+ {/* begin::Actions */}
+
+ {/* begin::Action */}
+
+
+
+ {/* end::Action */}
+
+ {/* begin::Action */}
+
+
+
+ {/* end::Action */}
+
+ {/* begin::Action */}
+
+
+
+ {/* end::Action */}
+
+ {/* end::Actions */}
+
+ {/* end::Action wrapper */}
+
+ )
+}
+
+export {ToolbarSaas}
diff --git a/src/_metronic/layout/components/toolbar/toolbars/index.ts b/src/_metronic/layout/components/toolbar/toolbars/index.ts
new file mode 100644
index 0000000..c3a7436
--- /dev/null
+++ b/src/_metronic/layout/components/toolbar/toolbars/index.ts
@@ -0,0 +1,5 @@
+export * from './ToolbarAccounting'
+export * from './ToolbarClassic'
+export * from './ToolbarExtended'
+export * from './ToolbarReports'
+export * from './ToolbarSaas'
diff --git a/src/_metronic/layout/core/MetronicSplashScreen.tsx b/src/_metronic/layout/core/MetronicSplashScreen.tsx
new file mode 100644
index 0000000..a66b9f8
--- /dev/null
+++ b/src/_metronic/layout/core/MetronicSplashScreen.tsx
@@ -0,0 +1,79 @@
+import React, {
+ FC,
+ createContext,
+ useContext,
+ useState,
+ useEffect,
+ SetStateAction,
+ Dispatch,
+} from 'react'
+import {WithChildren} from '../../helpers'
+
+const MetronicSplashScreenContext = createContext> | undefined>(
+ undefined
+)
+
+const MetronicSplashScreenProvider: FC = ({children}) => {
+ const [count, setCount] = useState(0)
+ let visible = count > 0
+
+ useEffect(() => {
+ const splashScreen = document.getElementById('splash-screen')
+
+ // Show SplashScreen
+ if (splashScreen && visible) {
+ splashScreen.classList.remove('hidden')
+
+ return () => {
+ splashScreen.classList.add('hidden')
+ }
+ }
+
+ // Hide SplashScreen
+ let timeout: number
+ if (splashScreen && !visible) {
+ timeout = window.setTimeout(() => {
+ splashScreen.classList.add('hidden')
+ }, 3000)
+ }
+
+ return () => {
+ clearTimeout(timeout)
+ }
+ }, [visible])
+
+ return (
+
+ {children}
+
+ )
+}
+
+const LayoutSplashScreen: FC<{visible?: boolean}> = ({visible = true}) => {
+ // Everything are ready - remove splashscreen
+ const setCount = useContext(MetronicSplashScreenContext)
+
+ useEffect(() => {
+ if (!visible) {
+ return
+ }
+
+ if (setCount) {
+ setCount((prev) => {
+ return prev + 1
+ })
+ }
+
+ return () => {
+ if (setCount) {
+ setCount((prev) => {
+ return prev - 1
+ })
+ }
+ }
+ }, [setCount, visible])
+
+ return null
+}
+
+export {MetronicSplashScreenProvider, LayoutSplashScreen}
diff --git a/src/_metronic/layout/core/PageData.tsx b/src/_metronic/layout/core/PageData.tsx
new file mode 100644
index 0000000..99195ee
--- /dev/null
+++ b/src/_metronic/layout/core/PageData.tsx
@@ -0,0 +1,96 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {FC, createContext, useContext, useEffect, useState} from 'react'
+import {WithChildren} from '../../helpers'
+
+export interface PageLink {
+ title: string
+ path: string
+ isActive: boolean
+ isSeparator?: boolean
+}
+
+export interface PageDataContextModel {
+ pageTitle?: string
+ setPageTitle: (_title: string) => void
+ pageDescription?: string
+ setPageDescription: (_description: string) => void
+ pageBreadcrumbs?: Array
+ setPageBreadcrumbs: (_breadcrumbs: Array) => void
+}
+
+const PageDataContext = createContext({
+ setPageTitle: (_title: string) => {},
+ setPageBreadcrumbs: (_breadcrumbs: Array) => {},
+ setPageDescription: (_description: string) => {},
+})
+
+const PageDataProvider: FC = ({children}) => {
+ const [pageTitle, setPageTitle] = useState('')
+ const [pageDescription, setPageDescription] = useState('')
+ const [pageBreadcrumbs, setPageBreadcrumbs] = useState>([])
+ const value: PageDataContextModel = {
+ pageTitle,
+ setPageTitle,
+ pageDescription,
+ setPageDescription,
+ pageBreadcrumbs,
+ setPageBreadcrumbs,
+ }
+ return {children}
+}
+
+function usePageData() {
+ return useContext(PageDataContext)
+}
+
+type Props = {
+ description?: string
+ breadcrumbs?: Array
+}
+
+const PageTitle: FC = ({children, description, breadcrumbs}) => {
+ const {setPageTitle, setPageDescription, setPageBreadcrumbs} = usePageData()
+ useEffect(() => {
+ if (children) {
+ setPageTitle(children.toString())
+ }
+ return () => {
+ setPageTitle('')
+ }
+ }, [children])
+
+ useEffect(() => {
+ if (description) {
+ setPageDescription(description)
+ }
+ return () => {
+ setPageDescription('')
+ }
+ }, [description])
+
+ useEffect(() => {
+ if (breadcrumbs) {
+ setPageBreadcrumbs(breadcrumbs)
+ }
+ return () => {
+ setPageBreadcrumbs([])
+ }
+ }, [breadcrumbs])
+
+ return <>>
+}
+
+const PageDescription: FC = ({children}) => {
+ const {setPageDescription} = usePageData()
+ useEffect(() => {
+ if (children) {
+ setPageDescription(children.toString())
+ }
+ return () => {
+ setPageDescription('')
+ }
+ }, [children])
+ return <>>
+}
+
+export {PageDescription, PageTitle, PageDataProvider, usePageData}
diff --git a/src/_metronic/layout/core/_LayoutConfig.ts b/src/_metronic/layout/core/_LayoutConfig.ts
new file mode 100644
index 0000000..e63dcfa
--- /dev/null
+++ b/src/_metronic/layout/core/_LayoutConfig.ts
@@ -0,0 +1,138 @@
+import {ILayout} from './_Models'
+
+export const DefaultConfig: ILayout = {
+ layoutType: 'dark-sidebar',
+ main: {
+ componentName: 'main',
+ type: 'default',
+ pageBgWhite: false,
+ },
+ app: {
+ general: {
+ componentName: 'general',
+ evolution: true,
+ layoutType: 'default',
+ mode: 'light',
+ rtl: false,
+ primaryColor: '#50CD89',
+ pageBgWhite: false,
+ pageWidth: 'default',
+ },
+ header: {
+ componentName: 'header',
+ display: true,
+ default: {
+ container: 'fluid',
+ containerClass: 'd-flex align-items-stretch justify-content-between',
+ fixed: {
+ desktop: true,
+ mobile: false,
+ },
+ content: 'menu',
+ menu: {
+ display: true,
+ iconType: 'svg',
+ },
+ },
+ },
+ sidebar: {
+ componentName: 'sidebar',
+ display: true,
+ default: {
+ class: 'flex-column',
+ push: {
+ header: true,
+ toolbar: true,
+ footer: true,
+ },
+ drawer: {
+ enabled: true,
+ attributes: {
+ 'data-kt-drawer': 'true',
+ 'data-kt-drawer-name': 'app-sidebar',
+ 'data-kt-drawer-activate': '{default: true, lg: false}',
+ 'data-kt-drawer-overlay': 'true',
+ 'data-kt-drawer-width': '225px',
+ 'data-kt-drawer-direction': 'start',
+ 'data-kt-drawer-toggle': '#kt_app_sidebar_mobile_toggle',
+ },
+ },
+ fixed: {
+ desktop: true,
+ },
+ minimize: {
+ desktop: {
+ enabled: true,
+ default: false,
+ hoverable: true,
+ },
+ },
+ menu: {
+ iconType: 'svg',
+ },
+ },
+ },
+ toolbar: {
+ componentName: 'toolbar',
+ display: true,
+ layout: 'classic',
+ class: 'py-3 py-lg-6',
+ container: 'fluid',
+ containerClass: 'd-flex flex-stack',
+ fixed: {
+ desktop: false,
+ mobile: false,
+ },
+ // custom settings,
+ filterButton: true,
+ daterangepickerButton: false,
+ primaryButton: true,
+ primaryButtonLabel: 'Create',
+ primaryButtonModal: 'create-app',
+ },
+ pageTitle: {
+ componentName: 'page-title',
+ display: true,
+ breadCrumb: true,
+ description: false,
+ direction: 'column',
+ },
+ content: {
+ componentName: 'content',
+ container: 'fluid',
+ },
+ footer: {
+ componentName: 'footer',
+ display: true,
+ container: 'fluid',
+ containerClass: 'd-flex flex-column flex-md-row flex-center flex-md-stack py-3',
+ fixed: {
+ desktop: false,
+ mobile: false,
+ },
+ },
+ pageLoader: {
+ componentName: 'page-loader',
+ type: 'none',
+ logoImage: 'default.svg',
+ logoClass: 'mh-75px',
+ },
+ },
+ illustrations: {
+ componentName: 'illustrations',
+ set: 'sketchy-1',
+ },
+ scrolltop: {
+ componentName: 'scrolltop',
+ display: true,
+ },
+ engage: {
+ componentName: 'engage',
+ demos: {
+ enabled: true,
+ },
+ purchase: {
+ enabled: false,
+ },
+ },
+}
diff --git a/src/_metronic/layout/core/_LayoutProvider.tsx b/src/_metronic/layout/core/_LayoutProvider.tsx
new file mode 100644
index 0000000..82908e9
--- /dev/null
+++ b/src/_metronic/layout/core/_LayoutProvider.tsx
@@ -0,0 +1,111 @@
+import {FC, createContext, useContext, useState, useEffect} from 'react'
+import {DefaultConfig} from './_LayoutConfig'
+import {
+ setLayoutIntoLocalStorage,
+ getEmptyCssClasses,
+ getEmptyCSSVariables,
+ getEmptyHTMLAttributes,
+ LayoutSetup,
+} from './_LayoutSetup'
+import {
+ ILayout,
+ ILayoutCSSVariables,
+ ILayoutCSSClasses,
+ ILayoutHTMLAttributes,
+ LayoutType,
+ ToolbarType,
+} from './_Models'
+import {WithChildren} from '../../helpers'
+
+export interface LayoutContextModel {
+ config: ILayout
+ classes: ILayoutCSSClasses
+ attributes: ILayoutHTMLAttributes
+ cssVariables: ILayoutCSSVariables
+ setLayout: (config: LayoutSetup) => void
+ setLayoutType: (layoutType: LayoutType) => void
+ setToolbarType: (toolbarType: ToolbarType) => void
+}
+
+const LayoutContext = createContext({
+ config: DefaultConfig,
+ classes: getEmptyCssClasses(),
+ attributes: getEmptyHTMLAttributes(),
+ cssVariables: getEmptyCSSVariables(),
+ setLayout: (config: LayoutSetup) => {},
+ setLayoutType: (layoutType: LayoutType) => {},
+ setToolbarType: (toolbarType: ToolbarType) => {},
+})
+
+const enableSplashScreen = () => {
+ const splashScreen = document.getElementById('splash-screen')
+ if (splashScreen) {
+ splashScreen.style.setProperty('display', 'flex')
+ }
+}
+
+const disableSplashScreen = () => {
+ const splashScreen = document.getElementById('splash-screen')
+ if (splashScreen) {
+ splashScreen.style.setProperty('display', 'none')
+ }
+}
+
+const LayoutProvider: FC = ({children}) => {
+ const [config, setConfig] = useState(LayoutSetup.config)
+ const [classes, setClasses] = useState(LayoutSetup.classes)
+ const [attributes, setAttributes] = useState(LayoutSetup.attributes)
+ const [cssVariables, setCSSVariables] = useState(LayoutSetup.cssVariables)
+
+ const setLayout = (_themeConfig: Partial) => {
+ enableSplashScreen()
+ const bodyClasses = Array.from(document.body.classList)
+ bodyClasses.forEach((cl) => document.body.classList.remove(cl))
+ const updatedConfig = LayoutSetup.updatePartialConfig(_themeConfig)
+ setConfig(Object.assign({}, updatedConfig))
+ setClasses(LayoutSetup.classes)
+ setAttributes(LayoutSetup.attributes)
+ setCSSVariables(LayoutSetup.cssVariables)
+ setTimeout(() => {
+ disableSplashScreen()
+ }, 500)
+ }
+
+ const setToolbarType = (toolbarType: ToolbarType) => {
+ const updatedConfig = {...config}
+ if (updatedConfig.app?.toolbar) {
+ updatedConfig.app.toolbar.layout = toolbarType
+ }
+
+ setLayoutIntoLocalStorage(updatedConfig)
+ window.location.reload()
+ }
+
+ const setLayoutType = (layoutType: LayoutType) => {
+ const updatedLayout = {...config, layoutType}
+ setLayoutIntoLocalStorage(updatedLayout)
+ window.location.reload()
+ }
+
+ const value: LayoutContextModel = {
+ config,
+ classes,
+ attributes,
+ cssVariables,
+ setLayout,
+ setLayoutType,
+ setToolbarType,
+ }
+
+ useEffect(() => {
+ disableSplashScreen()
+ }, [])
+
+ return {children}
+}
+
+export {LayoutContext, LayoutProvider}
+
+export function useLayout() {
+ return useContext(LayoutContext)
+}
diff --git a/src/_metronic/layout/core/_LayoutSetup.ts b/src/_metronic/layout/core/_LayoutSetup.ts
new file mode 100644
index 0000000..1a865fc
--- /dev/null
+++ b/src/_metronic/layout/core/_LayoutSetup.ts
@@ -0,0 +1,222 @@
+import {ILayout, ILayoutCSSClasses, ILayoutHTMLAttributes, ILayoutCSSVariables} from './_Models'
+import {DefaultConfig} from './_LayoutConfig'
+
+const LAYOUT_CONFIG_KEY = process.env.REACT_APP_BASE_LAYOUT_CONFIG_KEY || 'LayoutConfig'
+
+const getLayoutFromLocalStorage = (): ILayout => {
+ const ls = localStorage.getItem(LAYOUT_CONFIG_KEY)
+ if (ls) {
+ try {
+ return JSON.parse(ls) as ILayout
+ } catch (er) {
+ console.error(er)
+ }
+ }
+ return DefaultConfig
+}
+
+const setLayoutIntoLocalStorage = (config: ILayout) => {
+ try {
+ localStorage.setItem(LAYOUT_CONFIG_KEY, JSON.stringify(config))
+ } catch (er) {
+ console.error(er)
+ }
+}
+
+const getEmptyCssClasses = (): ILayoutCSSClasses => {
+ return {
+ header: [],
+ headerContainer: [],
+ headerMobile: [],
+ headerMenu: [],
+ aside: [],
+ asideMenu: [],
+ asideToggle: [],
+ toolbar: [],
+ toolbarContainer: [],
+ content: [],
+ contentContainer: [],
+ footerContainer: [],
+ sidebar: [],
+ pageTitle: [],
+ pageContainer: [],
+ }
+}
+
+const getEmptyHTMLAttributes = () => {
+ return {
+ asideMenu: new Map(),
+ headerMobile: new Map(),
+ headerMenu: new Map(),
+ headerContainer: new Map(),
+ pageTitle: new Map(),
+ }
+}
+
+const getEmptyCSSVariables = () => {
+ return {
+ body: new Map(),
+ }
+}
+
+class LayoutSetup {
+ public static isLoaded: boolean = false
+ public static config: ILayout = getLayoutFromLocalStorage()
+ public static classes: ILayoutCSSClasses = getEmptyCssClasses()
+ public static attributes: ILayoutHTMLAttributes = getEmptyHTMLAttributes()
+ public static cssVariables: ILayoutCSSVariables = getEmptyCSSVariables()
+
+ private static initCSSClasses(): void {
+ LayoutSetup.classes = getEmptyCssClasses()
+ }
+
+ private static initHTMLAttributes(): void {
+ LayoutSetup.attributes = Object.assign({}, getEmptyHTMLAttributes())
+ }
+
+ private static initCSSVariables(): void {
+ LayoutSetup.cssVariables = getEmptyCSSVariables()
+ }
+
+ private static initConfig(config: ILayout): ILayout {
+ let updatedConfig = LayoutSetup.initLayoutSettings(config)
+ updatedConfig = LayoutSetup.initToolbarSetting(updatedConfig)
+ return LayoutSetup.initWidthSettings(updatedConfig)
+ }
+
+ private static initLayoutSettings(config: ILayout): ILayout {
+ const updatedConfig = {...config}
+ // clear body classes
+ const bodyClasses = document.body.classList.value.split(' ')
+ bodyClasses.forEach((cssClass) => document.body.classList.remove(cssClass))
+ // clear body attributes
+ const bodyAttributes = document.body.getAttributeNames().filter((t) => t.indexOf('data-') > -1)
+ bodyAttributes.forEach((attr) => document.body.removeAttribute(attr))
+ document.body.setAttribute('style', '')
+ document.body.setAttribute('id', 'kt_app_body')
+ document.body.setAttribute('data-kt-app-layout', updatedConfig.layoutType)
+ document.body.setAttribute('data-kt-name', 'metronic')
+ document.body.classList.add('app-default')
+
+ const pageWidth = updatedConfig.app?.general?.pageWidth
+ if (updatedConfig.layoutType === 'light-header' || updatedConfig.layoutType === 'dark-header') {
+ if (pageWidth === 'default') {
+ const header = updatedConfig.app?.header
+ if (header && header.default && header.default.container) {
+ header.default.container = 'fixed'
+ }
+
+ const toolbar = updatedConfig.app?.toolbar
+ if (toolbar) {
+ toolbar.container = 'fixed'
+ }
+
+ const content = updatedConfig.app?.content
+ if (content) {
+ content.container = 'fixed'
+ }
+
+ const footer = updatedConfig.app?.footer
+ if (footer) {
+ footer.container = 'fixed'
+ }
+
+ const updatedApp = {
+ ...updatedConfig.app,
+ ...header,
+ ...toolbar,
+ ...content,
+ ...footer,
+ }
+ return {...updatedConfig, app: updatedApp}
+ }
+ }
+ return updatedConfig
+ }
+
+ private static initToolbarSetting(config: ILayout): ILayout {
+ const updatedConfig = {...config}
+ const appHeaderDefaultContent = updatedConfig.app?.header?.default?.content
+ if (appHeaderDefaultContent === 'page-title') {
+ const toolbar = updatedConfig.app?.toolbar
+ if (toolbar) {
+ toolbar.display = false
+ const updatedApp = {...updatedConfig.app, ...toolbar}
+ return {...updatedConfig, app: updatedApp}
+ }
+ return updatedConfig
+ }
+
+ const pageTitle = updatedConfig.app?.pageTitle
+ if (pageTitle) {
+ pageTitle.description = false
+ pageTitle.breadCrumb = true
+ const updatedApp = {...updatedConfig.app, ...pageTitle}
+ return {...updatedConfig, app: updatedApp}
+ }
+
+ return updatedConfig
+ }
+
+ private static initWidthSettings(config: ILayout): ILayout {
+ const updatedConfig = {...config}
+ const pageWidth = updatedConfig.app?.general?.pageWidth
+ if (!pageWidth || pageWidth === 'default') {
+ return config
+ }
+
+ const header = updatedConfig.app?.header
+ if (header && header.default) {
+ header.default.container = pageWidth
+ }
+ const toolbar = updatedConfig.app?.toolbar
+ if (toolbar) {
+ toolbar.container = pageWidth
+ }
+ const content = updatedConfig.app?.content
+ if (content) {
+ content.container = pageWidth
+ }
+ const footer = updatedConfig.app?.footer
+ if (footer) {
+ footer.container = pageWidth
+ }
+ const updatedApp = {
+ ...updatedConfig.app,
+ ...header,
+ ...toolbar,
+ ...content,
+ ...footer,
+ }
+ return {...updatedConfig, app: updatedApp}
+ }
+
+ public static updatePartialConfig(fieldsToUpdate: Partial): ILayout {
+ const config = LayoutSetup.config
+ const updatedConfig = {...config, ...fieldsToUpdate}
+ LayoutSetup.initCSSClasses()
+ LayoutSetup.initCSSVariables()
+ LayoutSetup.initHTMLAttributes()
+ LayoutSetup.isLoaded = false
+ LayoutSetup.config = LayoutSetup.initConfig(Object.assign({}, updatedConfig))
+ LayoutSetup.isLoaded = true // remove loading there
+ return updatedConfig
+ }
+
+ public static setConfig(config: ILayout): void {
+ setLayoutIntoLocalStorage(config)
+ }
+
+ public static bootstrap = (() => {
+ LayoutSetup.updatePartialConfig(LayoutSetup.config)
+ })()
+}
+
+export {
+ LayoutSetup,
+ getLayoutFromLocalStorage,
+ setLayoutIntoLocalStorage,
+ getEmptyCssClasses,
+ getEmptyCSSVariables,
+ getEmptyHTMLAttributes,
+}
diff --git a/src/_metronic/layout/core/_Models.ts b/src/_metronic/layout/core/_Models.ts
new file mode 100644
index 0000000..89df93c
--- /dev/null
+++ b/src/_metronic/layout/core/_Models.ts
@@ -0,0 +1,257 @@
+export type LayoutType = 'dark-sidebar' | 'light-sidebar' | 'dark-header' | 'light-header'
+
+export type CSSClassesType = {
+ [key: string]: string[]
+}
+
+export type HTMLAttributesType = {
+ [key: string]: {
+ [attrName: string]: string | boolean
+ }
+}
+
+export interface ILayoutComponent {
+ componentName?: string
+}
+
+export interface IPageLoader extends ILayoutComponent {
+ componentName?: 'page-loader'
+ type?: 'none' | 'default' | 'spinner-message' | 'spinner-logo'
+ logoImage?: string
+ logoClass?: string
+}
+
+export interface IScrollTop extends ILayoutComponent {
+ display?: boolean
+}
+
+export interface IHeader extends ILayoutComponent {
+ componentName?: 'header'
+ display?: boolean
+ default?: {
+ container?: 'fluid' | 'fixed'
+ containerClass?: string
+ fixed?: {
+ desktop?: boolean
+ mobile?: boolean
+ }
+ content?: string
+ menu?: {
+ display?: boolean
+ iconType?: 'svg' | 'font'
+ }
+ stacked?: boolean
+ sticky?: {
+ enabled?: boolean
+ attributes?: {[attrName: string]: string}
+ }
+ minimize?: {
+ enabled?: boolean
+ attributes?: {[attrName: string]: string}
+ }
+ }
+}
+
+export interface ISidebar extends ILayoutComponent {
+ componentName?: 'sidebar'
+ display?: boolean
+ default?: {
+ class?: string
+ push?: {
+ header?: boolean
+ toolbar?: boolean
+ footer?: boolean
+ }
+ drawer?: {
+ enabled?: boolean
+ attributes?: {[attrName: string]: string}
+ }
+ sticky?: {
+ enabled?: boolean
+ attributes?: {[attrName: string]: string}
+ }
+ fixed?: {
+ desktop?: boolean
+ }
+ minimize?: {
+ desktop?: {
+ enabled?: boolean
+ default?: boolean
+ hoverable?: boolean
+ }
+ mobile?: {
+ enabled?: boolean
+ default?: boolean
+ hoverable?: boolean
+ }
+ }
+ menu?: {
+ iconType?: 'svg' | 'font'
+ }
+ collapse?: {
+ desktop?: {
+ enabled?: boolean
+ default?: boolean
+ }
+ mobile?: {
+ enabled?: boolean
+ default?: boolean
+ }
+ }
+ stacked?: boolean
+ }
+ toggle?: boolean
+}
+
+export type ToolbarType = 'classic' | 'accounting' | 'extended' | 'reports' | 'saas'
+
+export interface IToolbar extends ILayoutComponent {
+ componentName?: 'toolbar'
+ display?: boolean
+ layout?: ToolbarType
+ class?: string
+ container?: 'fixed' | 'fluid'
+ containerClass?: string
+ fixed?: {
+ desktop?: boolean
+ mobile?: boolean
+ }
+ swap?: {
+ enabled?: boolean
+ attributes?: {[attrName: string]: string}
+ }
+ sticky?: {
+ enabled?: boolean
+ attributes?: {[attrName: string]: string}
+ }
+ minimize?: {
+ enabled?: boolean
+ attributes?: {[attrName: string]: string}
+ }
+
+ // Custom settings
+ filterButton?: boolean
+ daterangepickerButton?: boolean
+ primaryButton?: boolean
+ primaryButtonLabel?: string
+ primaryButtonModal?: string
+ secondaryButton?: boolean
+}
+
+export interface IMain extends ILayoutComponent {
+ type?: 'blank' | 'default' | 'none' // Set layout type: default|blank|none
+ pageBgWhite?: boolean // Set true if page background color is white
+}
+
+export interface IIllustrations extends ILayoutComponent {
+ componentName?: 'illustrations'
+ set?: 'sketchy-1'
+}
+
+export interface IGeneral extends ILayoutComponent {
+ componentName?: 'general'
+ evolution?: boolean
+ layoutType?: 'default' | 'blank'
+ mode?: 'light' | 'dark' | 'system'
+ rtl?: boolean
+ primaryColor?: string // Used in email templates
+ pageBgWhite?: boolean // Set true if page background color is white
+ pageWidth?: 'default' | 'fluid' | 'fixed'
+}
+
+export interface IMegaMenu extends ILayoutComponent {
+ display: boolean
+}
+
+export interface ISidebarPanel extends ILayoutComponent {
+ componentName?: 'sidebar-panel'
+ display: boolean
+}
+
+export interface IContent extends ILayoutComponent {
+ componentName?: 'content'
+ container?: 'fixed' | 'fluid'
+ class?: string
+}
+
+export interface IFooter extends ILayoutComponent {
+ componentName?: 'footer'
+ display?: boolean
+ container?: 'fluid' | 'fixed'
+ containerClass?: string
+ placement?: string
+ fixed?: {
+ desktop?: boolean
+ mobile?: boolean
+ }
+}
+
+export interface IPageTitle extends ILayoutComponent {
+ componentName?: 'page-title'
+ display?: boolean
+ breadCrumb?: boolean
+ description?: boolean
+ direction?: 'row' | 'column'
+ class?: string
+}
+
+export interface IEngage extends ILayoutComponent {
+ componentName?: 'engage'
+ demos?: {
+ enabled?: boolean
+ }
+ purchase?: {
+ enabled?: boolean
+ }
+}
+
+export interface IApp {
+ general?: IGeneral
+ header?: IHeader
+ sidebar?: ISidebar
+ sidebarPanel?: ISidebarPanel
+ toolbar?: IToolbar
+ pageTitle?: IPageTitle
+ content?: IContent
+ footer?: IFooter
+ pageLoader?: IPageLoader
+}
+
+export interface ILayout {
+ layoutType: LayoutType
+ main?: IMain
+ app?: IApp
+ illustrations?: IIllustrations
+ scrolltop?: IScrollTop
+ engage?: IEngage
+}
+
+export interface ILayoutCSSClasses {
+ header: Array
+ headerContainer: Array
+ headerMobile: Array
+ headerMenu: Array
+ aside: Array
+ asideMenu: Array
+ asideToggle: Array
+ sidebar: Array
+ toolbar: Array
+ toolbarContainer: Array
+ content: Array
+ contentContainer: Array
+ footerContainer: Array
+ pageTitle: Array
+ pageContainer: Array
+}
+
+export interface ILayoutHTMLAttributes {
+ asideMenu: Map
+ headerMobile: Map
+ headerMenu: Map
+ headerContainer: Map
+ pageTitle: Map
+}
+
+export interface ILayoutCSSVariables {
+ body: Map
+}
diff --git a/src/_metronic/layout/core/index.ts b/src/_metronic/layout/core/index.ts
new file mode 100644
index 0000000..90d0d9b
--- /dev/null
+++ b/src/_metronic/layout/core/index.ts
@@ -0,0 +1,6 @@
+export * from './_LayoutConfig'
+export * from './_LayoutProvider'
+export * from './_Models'
+export * from './_LayoutSetup'
+export * from './PageData'
+export * from './MetronicSplashScreen'
diff --git a/src/_metronic/partials/chat/ChatInner.tsx b/src/_metronic/partials/chat/ChatInner.tsx
new file mode 100644
index 0000000..e53422b
--- /dev/null
+++ b/src/_metronic/partials/chat/ChatInner.tsx
@@ -0,0 +1,193 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC, useState} from 'react'
+import clsx from 'clsx'
+import {
+ toAbsoluteUrl,
+ defaultMessages,
+ defaultUserInfos,
+ MessageModel,
+ UserInfoModel,
+ messageFromClient,
+} from '../../helpers'
+
+type Props = {
+ isDrawer?: boolean
+}
+
+const bufferMessages = defaultMessages
+
+const ChatInner: FC = ({isDrawer = false}) => {
+ const [chatUpdateFlag, toggleChatUpdateFlat] = useState(false)
+ const [message, setMessage] = useState('')
+ const [messages, setMessages] = useState(bufferMessages)
+ const [userInfos] = useState(defaultUserInfos)
+
+ const sendMessage = () => {
+ const newMessage: MessageModel = {
+ user: 2,
+ type: 'out',
+ text: message,
+ time: 'Just now',
+ }
+
+ bufferMessages.push(newMessage)
+ setMessages(bufferMessages)
+ toggleChatUpdateFlat(!chatUpdateFlag)
+ setMessage('')
+ setTimeout(() => {
+ bufferMessages.push(messageFromClient)
+ setMessages(() => bufferMessages)
+ toggleChatUpdateFlat((flag) => !flag)
+ }, 1000)
+ }
+
+ const onEnterPress = (e: React.KeyboardEvent) => {
+ if (e.keyCode === 13 && e.shiftKey === false) {
+ e.preventDefault()
+ sendMessage()
+ }
+ }
+
+ return (
+
+
+ {messages.map((message, index) => {
+ const userInfo = userInfos[message.user]
+ const state = message.type === 'in' ? 'info' : 'primary'
+ const templateAttr = {}
+ if (message.template) {
+ Object.defineProperty(templateAttr, 'data-kt-element', {
+ value: `template-${message.type}`,
+ })
+ }
+ const contentClass = `${isDrawer ? '' : 'd-flex'} justify-content-${
+ message.type === 'in' ? 'start' : 'end'
+ } mb-10`
+ return (
+
+
+
+ {message.type === 'in' ? (
+ <>
+
+
+
+
+ >
+ ) : (
+ <>
+
+
+
+
+ >
+ )}
+
+
+
+
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Send
+
+
+
+
+ )
+}
+
+export {ChatInner}
diff --git a/src/_metronic/partials/content/activity/Item1.tsx b/src/_metronic/partials/content/activity/Item1.tsx
new file mode 100644
index 0000000..22a4b12
--- /dev/null
+++ b/src/_metronic/partials/content/activity/Item1.tsx
@@ -0,0 +1,106 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+const Item1: FC = () => {
+ return (
+
+
+
+
+
+
+
+
+ There are 2 new tasks for you in “AirPlus Mobile APp” project:
+
+
+
+
Added at 4:23 PM by
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export {Item1}
diff --git a/src/_metronic/partials/content/activity/Item2.tsx b/src/_metronic/partials/content/activity/Item2.tsx
new file mode 100644
index 0000000..c0cf134
--- /dev/null
+++ b/src/_metronic/partials/content/activity/Item2.tsx
@@ -0,0 +1,43 @@
+import {FC} from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+const Item2: FC = () => {
+ return (
+
+
+
+
+
+
+
+
+ Invitation for crafting engaging designs that speak human workshop
+
+
+
+
Sent at 4:23 PM by
+
+
+
+
+
+
+
+
+ )
+}
+
+export {Item2}
diff --git a/src/_metronic/partials/content/activity/Item3.tsx b/src/_metronic/partials/content/activity/Item3.tsx
new file mode 100644
index 0000000..052038c
--- /dev/null
+++ b/src/_metronic/partials/content/activity/Item3.tsx
@@ -0,0 +1,84 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+const Item3: FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export {Item3}
diff --git a/src/_metronic/partials/content/activity/Item4.tsx b/src/_metronic/partials/content/activity/Item4.tsx
new file mode 100644
index 0000000..3007711
--- /dev/null
+++ b/src/_metronic/partials/content/activity/Item4.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+const Item4: FC = () => {
+ return (
+
+
+
+
+
+
+
+
+ Task{' '}
+
+ #45890
+
+ merged with{' '}
+
+ #45890
+ {' '}
+ in “Ads Pro Admin Dashboard project:
+
+
+
+
Initiated at 4:23 PM by
+
+
+
+
+
+
+
+
+ )
+}
+
+export {Item4}
diff --git a/src/_metronic/partials/content/activity/Item5.tsx b/src/_metronic/partials/content/activity/Item5.tsx
new file mode 100644
index 0000000..a2e40a4
--- /dev/null
+++ b/src/_metronic/partials/content/activity/Item5.tsx
@@ -0,0 +1,94 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+const Item5: FC = () => {
+ return (
+
+
+
+
+
+
+
+
3 new application design concepts added:
+
+
+
Created at 4:23 PM by
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export {Item5}
diff --git a/src/_metronic/partials/content/activity/Item6.tsx b/src/_metronic/partials/content/activity/Item6.tsx
new file mode 100644
index 0000000..b650ea1
--- /dev/null
+++ b/src/_metronic/partials/content/activity/Item6.tsx
@@ -0,0 +1,44 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {KTSVG} from '../../../helpers'
+
+const Item6: FC = () => {
+ return (
+
+
+
+
+
+
+
+
+ New case{' '}
+
+ #67890
+
+ is assigned to you in Multi-platform Database Design project
+
+
+
+
+
+
+ )
+}
+
+export {Item6}
diff --git a/src/_metronic/partials/content/activity/Item7.tsx b/src/_metronic/partials/content/activity/Item7.tsx
new file mode 100644
index 0000000..5260ca0
--- /dev/null
+++ b/src/_metronic/partials/content/activity/Item7.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+const Item7: FC = () => {
+ return (
+
+
+
+
+
+
+
+
You have received a new order:
+
+
+
Placed at 5:05 AM by
+
+
+
+
+
+
+
+
+
+
+
+
+
Database Backup Process Completed!
+
+ Login into Metronic Admin Dashboard to make sure the data integrity is OK
+
+
+
+ Proceed
+
+
+
+
+
+
+ )
+}
+
+export {Item7}
diff --git a/src/_metronic/partials/content/activity/Item8.tsx b/src/_metronic/partials/content/activity/Item8.tsx
new file mode 100644
index 0000000..a9ba755
--- /dev/null
+++ b/src/_metronic/partials/content/activity/Item8.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {KTSVG} from '../../../helpers'
+
+const Item8: FC = () => {
+ return (
+
+
+
+
+
+
+
+
+ New order{' '}
+
+ #67890
+
+ is placed for Workshow Planning & Budget Estimation
+
+
+
+
+
+
+ )
+}
+
+export {Item8}
diff --git a/src/_metronic/partials/content/cards/Card1.tsx b/src/_metronic/partials/content/cards/Card1.tsx
new file mode 100644
index 0000000..8df8f83
--- /dev/null
+++ b/src/_metronic/partials/content/cards/Card1.tsx
@@ -0,0 +1,68 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ color?: string
+ avatar?: string
+ online?: boolean
+ name: string
+ job: string
+ avgEarnings: string
+ totalEarnings: string
+}
+
+const Card1: FC = ({
+ color = '',
+ avatar = '',
+ online = false,
+ name,
+ job,
+ avgEarnings,
+ totalEarnings,
+}) => {
+ return (
+
+
+
+
+ {color ? (
+
+ {name.charAt(0)}
+
+ ) : (
+
+ )}
+ {online && (
+
+ )}
+
+
+
+
+ {name}
+
+
+
{job}
+
+
+
+
{avgEarnings}
+
Avg. Earnings
+
+
+
+
{totalEarnings}
+
Total Sales
+
+
+
+
+ Send Message
+
+
+
+ )
+}
+
+export {Card1}
diff --git a/src/_metronic/partials/content/cards/Card2.tsx b/src/_metronic/partials/content/cards/Card2.tsx
new file mode 100644
index 0000000..3170ae8
--- /dev/null
+++ b/src/_metronic/partials/content/cards/Card2.tsx
@@ -0,0 +1,87 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {Link} from 'react-router-dom'
+import {IconUserModel} from '../../../../app/modules/profile/ProfileModels'
+import {UsersList} from '../../../../app/modules/profile/components/UsersList'
+import {toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ icon: string
+ badgeColor: string
+ status: string
+ statusColor: string
+ title: string
+ description: string
+ date: string
+ budget: string
+ progress: number
+ users?: Array
+}
+
+const Card2: FC = ({
+ icon,
+ badgeColor,
+ status,
+ statusColor,
+ title,
+ description,
+ date,
+ budget,
+ progress,
+ users = undefined,
+}) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ {status}
+
+
+
+
+
+
{title}
+
+
{description}
+
+
+
+
+
+
+
+
+ )
+}
+
+export {Card2}
diff --git a/src/_metronic/partials/content/cards/Card3.tsx b/src/_metronic/partials/content/cards/Card3.tsx
new file mode 100644
index 0000000..c127a19
--- /dev/null
+++ b/src/_metronic/partials/content/cards/Card3.tsx
@@ -0,0 +1,69 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {toAbsoluteUrl, KTSVG} from '../../../helpers'
+
+type Props = {
+ color?: string
+ avatar?: string
+ online?: boolean
+ name: string
+ job: string
+ avgEarnings: string
+ totalEarnings: string
+}
+
+const Card3: FC = ({
+ color = '',
+ avatar = '',
+ online = false,
+ name,
+ job,
+ avgEarnings,
+ totalEarnings,
+}) => {
+ return (
+
+
+
+
+ {color ? (
+
+ {name.charAt(0)}
+
+ ) : (
+
+ )}
+ {online && (
+
+ )}
+
+
+
+
+ {name}
+
+
+
{job}
+
+
+
+
{avgEarnings}
+
Avg. Earnings
+
+
+
+
{totalEarnings}
+
Total Sales
+
+
+
+
+
+ Connect
+
+
+
+ )
+}
+
+export {Card3}
diff --git a/src/_metronic/partials/content/cards/Card4.tsx b/src/_metronic/partials/content/cards/Card4.tsx
new file mode 100644
index 0000000..9dd1ad2
--- /dev/null
+++ b/src/_metronic/partials/content/cards/Card4.tsx
@@ -0,0 +1,27 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ icon: string
+ title: string
+ description: string
+}
+
+const Card4: FC = ({icon, title, description}) => {
+ return (
+
+ )
+}
+
+export {Card4}
diff --git a/src/_metronic/partials/content/cards/Card5.tsx b/src/_metronic/partials/content/cards/Card5.tsx
new file mode 100644
index 0000000..c81eb5e
--- /dev/null
+++ b/src/_metronic/partials/content/cards/Card5.tsx
@@ -0,0 +1,93 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {toAbsoluteUrl, KTSVG} from '../../../helpers'
+import {Dropdown1} from '../dropdown/Dropdown1'
+
+type Props = {
+ image: string
+ title: string
+ description: string
+ status: 'up' | 'down'
+ statusValue: number
+ statusDesc: string
+ progress: number
+ progressType: string
+}
+
+const Card5: FC = ({
+ image,
+ title,
+ description,
+ status,
+ statusValue,
+ statusDesc,
+ progress,
+ progressType,
+}) => {
+ return (
+
+
+
+
+
{description}
+
+
+ {status === 'up' && (
+
+ )}
+
+ {status === 'down' && (
+
+ )}
+
+
+ {status === 'up' ? '+' : '-'}
+ {statusValue}%
+
+
+
{statusDesc}
+
+
+
+ {progress}%
+ {progressType}
+
+
+
+ )
+}
+
+export {Card5}
diff --git a/src/_metronic/partials/content/code-highlight/CodeBlock.tsx b/src/_metronic/partials/content/code-highlight/CodeBlock.tsx
new file mode 100644
index 0000000..e69e425
--- /dev/null
+++ b/src/_metronic/partials/content/code-highlight/CodeBlock.tsx
@@ -0,0 +1,74 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+// @ts-nocheck
+import React, {useState, useEffect, useRef} from 'react'
+import {CopyToClipboard} from 'react-copy-to-clipboard'
+import Highlight, {defaultProps, Language} from 'prism-react-renderer'
+import theme from 'prism-react-renderer/themes/shadesOfPurple'
+import {OverlayTrigger, Tooltip} from 'react-bootstrap'
+
+type Props = {
+ code: string
+ language: Language
+}
+
+const CodeBlock: React.FC = ({code, language}) => {
+ const codeRef = useRef(null)
+ const [copied, setCopied] = useState(false)
+ useEffect(() => {
+ if (!copied) {
+ return
+ }
+
+ setTimeout(() => {
+ setCopied(false)
+ }, 1500)
+ }, [copied])
+
+ useEffect(() => {
+ if (!codeRef.current) {
+ return
+ }
+
+ const prismCodeElement = codeRef.current.querySelector('.prism-code ') as HTMLDivElement
+ if (prismCodeElement) {
+ prismCodeElement.style.background = 'none'
+ prismCodeElement.style.fontSize = '13px'
+ }
+ }, [])
+
+ return (
+
+
+
Copy Code}
+ >
+ setCopied(true)}>
+ {copied ? 'copied' : 'copy'}
+
+
+
+
+
+ {({className, style, tokens, getLineProps, getTokenProps}) => {
+ return (
+
+ {tokens.map((line, i) => (
+
+ {line.map((token, key) => (
+
+ ))}
+
+ ))}
+
+ )
+ }}
+
+
+
+
+ )
+}
+
+export {CodeBlock}
diff --git a/src/_metronic/partials/content/dropdown/Dropdown1.tsx b/src/_metronic/partials/content/dropdown/Dropdown1.tsx
new file mode 100644
index 0000000..34e16b9
--- /dev/null
+++ b/src/_metronic/partials/content/dropdown/Dropdown1.tsx
@@ -0,0 +1,79 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+export function Dropdown1() {
+ return (
+
+
+
+
+
+
+
+
Status:
+
+
+
+
+ Approved
+ Pending
+ In Process
+ Rejected
+
+
+
+
+
+
+
+
Notifications:
+
+
+
+ Enabled
+
+
+
+
+
+ Reset
+
+
+
+ Apply
+
+
+
+
+ )
+}
diff --git a/src/_metronic/partials/content/dropdown/Dropdown2.tsx b/src/_metronic/partials/content/dropdown/Dropdown2.tsx
new file mode 100644
index 0000000..3871d12
--- /dev/null
+++ b/src/_metronic/partials/content/dropdown/Dropdown2.tsx
@@ -0,0 +1,79 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+
+const Dropdown2: FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export {Dropdown2}
diff --git a/src/_metronic/partials/content/dropdown/Dropdown3.tsx b/src/_metronic/partials/content/dropdown/Dropdown3.tsx
new file mode 100644
index 0000000..b8c4894
--- /dev/null
+++ b/src/_metronic/partials/content/dropdown/Dropdown3.tsx
@@ -0,0 +1,96 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+
+const Dropdown3: FC = () => {
+ return (
+
+ )
+}
+
+export {Dropdown3}
diff --git a/src/_metronic/partials/content/editor/EditorToolbar.ts b/src/_metronic/partials/content/editor/EditorToolbar.ts
new file mode 100644
index 0000000..f656c1a
--- /dev/null
+++ b/src/_metronic/partials/content/editor/EditorToolbar.ts
@@ -0,0 +1,52 @@
+export const editorToolbarSettings = {
+ options: ['inline', 'fontSize', 'fontFamily', 'link', 'image'],
+ inline: {
+ inDropdown: false,
+ className: undefined,
+ component: undefined,
+ dropdownClassName: undefined,
+ options: ['bold', 'italic', 'underline', 'strikethrough'],
+ },
+ fontSize: {
+ options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
+ className: undefined,
+ component: undefined,
+ dropdownClassName: undefined,
+ },
+ fontFamily: {
+ options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
+ className: undefined,
+ component: undefined,
+ dropdownClassName: undefined,
+ },
+
+ link: {
+ inDropdown: false,
+ className: undefined,
+ component: undefined,
+ popupClassName: undefined,
+ dropdownClassName: undefined,
+ showOpenOptionOnHover: true,
+ defaultTargetOption: '_self',
+ options: ['link', 'unlink'],
+ link: {className: undefined},
+ unlink: {className: undefined},
+ linkCallback: undefined,
+ },
+ image: {
+ className: undefined,
+ component: undefined,
+ popupClassName: undefined,
+ urlEnabled: true,
+ uploadEnabled: true,
+ alignmentEnabled: true,
+ uploadCallback: undefined,
+ previewImage: false,
+ inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+ alt: {present: false, mandatory: false},
+ defaultSize: {
+ height: 'auto',
+ width: 'auto',
+ },
+ },
+}
diff --git a/src/_metronic/partials/content/portal/Portal.tsx b/src/_metronic/partials/content/portal/Portal.tsx
new file mode 100644
index 0000000..1117a49
--- /dev/null
+++ b/src/_metronic/partials/content/portal/Portal.tsx
@@ -0,0 +1,27 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {FC, useState, useEffect} from 'react'
+import {createPortal} from 'react-dom'
+import {WithChildren} from '../../../helpers'
+
+/**
+ * React portal based on https://stackoverflow.com/a/59154364
+ * @param children Child elements
+ * @param className CSS classname
+ * @param el HTML element to create. default: div
+ */
+const Portal: FC<{className?: string} & WithChildren> = ({children, className = ''}) => {
+ const [container] = useState(document.createElement('div'))
+
+ if (className) container.classList.add(className)
+
+ useEffect(() => {
+ document.body.appendChild(container)
+ return () => {
+ document.body.removeChild(container)
+ }
+ }, [])
+
+ return createPortal(children, container)
+}
+
+export {Portal}
diff --git a/src/_metronic/partials/index.ts b/src/_metronic/partials/index.ts
new file mode 100644
index 0000000..2c9e535
--- /dev/null
+++ b/src/_metronic/partials/index.ts
@@ -0,0 +1,33 @@
+export * from './layout/quick-links/QuicLinks'
+export * from './layout/search/Search'
+export * from './layout/search/SearchInner'
+export * from './layout/SearchModal'
+export * from './layout/InboxCompose'
+export * from './layout/header-menus/HeaderUserMenu'
+export * from './layout/header-menus/HeaderNotificationsMenu'
+export * from './layout/demos-drawer/DemosDrawer'
+export * from './layout/drawer-messenger/DrawerMessenger'
+export * from './layout/activity-drawer/ActivityDrawer'
+export * from './layout/create-app/CreateApp'
+export * from './layout/theme-mode/ThemeModeProvider'
+export * from './layout/theme-mode/ThemeModeSwitcher'
+
+// dropdpwns
+export * from './content/dropdown/Dropdown1'
+export * from './content/dropdown/Dropdown2'
+
+// editors
+export * from './content/editor/EditorToolbar'
+
+export * from './content/code-highlight/CodeBlock'
+
+export * from './content/portal/Portal'
+
+// modals
+export * from './modals/create-app-stepper/CreateAppModal'
+export * from './modals/select-location/SelectLocationModal'
+export * from './modals/invite-users/InviteUsers'
+export * from './modals/upgrade-plan/UpgradePlan'
+
+// chat
+export * from './chat/ChatInner'
diff --git a/src/_metronic/partials/layout/InboxCompose.tsx b/src/_metronic/partials/layout/InboxCompose.tsx
new file mode 100644
index 0000000..b172b8e
--- /dev/null
+++ b/src/_metronic/partials/layout/InboxCompose.tsx
@@ -0,0 +1,221 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useState, useRef} from 'react'
+import {Modal} from 'react-bootstrap'
+import {KTSVG} from '../../helpers'
+
+export type Props = {
+ show: boolean
+ handleClose: () => void
+}
+
+const InboxCompose: React.FC = ({show, handleClose}) => {
+ const composeToRef = useRef(null)
+ const formRef = useRef(null)
+ const [composeCC, setComposeCC] = useState('')
+ const [composeBCC, setComposeBCC] = useState('')
+ const [subject, setSubject] = useState('')
+
+ return (
+
+
+ {/* begin::Form */}
+
+ {/*end::Form*/}
+
+
+ )
+}
+
+export {InboxCompose}
diff --git a/src/_metronic/partials/layout/RightToolbar.tsx b/src/_metronic/partials/layout/RightToolbar.tsx
new file mode 100644
index 0000000..086438b
--- /dev/null
+++ b/src/_metronic/partials/layout/RightToolbar.tsx
@@ -0,0 +1,23 @@
+import {FC} from 'react'
+import {DemosToggleDrawer} from './demos-drawer/DemosToggleDrawer'
+import {ToggleHelpDrawer} from './help-drawer/ToggleHelpDrawer'
+import {DemosDrawer} from './demos-drawer/DemosDrawer'
+import {HelpDrawer} from './help-drawer/HelpDrawer'
+import {PurchaseButton} from './purchase/PurchaseButton'
+
+const RightToolbar: FC = () => {
+ return (
+ <>
+
+
+
+
+ >
+ )
+}
+
+export {RightToolbar}
diff --git a/src/_metronic/partials/layout/SearchModal.tsx b/src/_metronic/partials/layout/SearchModal.tsx
new file mode 100644
index 0000000..df5aff4
--- /dev/null
+++ b/src/_metronic/partials/layout/SearchModal.tsx
@@ -0,0 +1,152 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {Modal} from 'react-bootstrap'
+import {KTSVG, toAbsoluteUrl} from '../../helpers'
+// import {ListsWidget4, ListsWidget5} from '../widgets'
+
+type Props = {
+ show: boolean
+ handleClose: () => void
+}
+
+const SearchModal: React.FC = ({show, handleClose}) => {
+ return (
+
+ )
+}
+
+export {SearchModal}
diff --git a/src/_metronic/partials/layout/activity-drawer/ActivityDrawer.tsx b/src/_metronic/partials/layout/activity-drawer/ActivityDrawer.tsx
new file mode 100644
index 0000000..55792dd
--- /dev/null
+++ b/src/_metronic/partials/layout/activity-drawer/ActivityDrawer.tsx
@@ -0,0 +1,75 @@
+import React, {FC} from 'react'
+import {Link} from 'react-router-dom'
+import {KTSVG} from '../../../helpers'
+import {Item1} from '../../content/activity/Item1'
+import {Item2} from '../../content/activity/Item2'
+import {Item3} from '../../content/activity/Item3'
+import {Item4} from '../../content/activity/Item4'
+import {Item5} from '../../content/activity/Item5'
+import {Item6} from '../../content/activity/Item6'
+import {Item7} from '../../content/activity/Item7'
+import {Item8} from '../../content/activity/Item8'
+
+const ActivityDrawer: FC = () => (
+
+)
+
+export {ActivityDrawer}
diff --git a/src/_metronic/partials/layout/create-app/CreateApp.tsx b/src/_metronic/partials/layout/create-app/CreateApp.tsx
new file mode 100644
index 0000000..4859a1c
--- /dev/null
+++ b/src/_metronic/partials/layout/create-app/CreateApp.tsx
@@ -0,0 +1,7 @@
+import React, {FC} from 'react'
+
+const CreateApp: FC = () => {
+ return <>>
+}
+
+export {CreateApp}
diff --git a/src/_metronic/partials/layout/demos-drawer/Demos.tsx b/src/_metronic/partials/layout/demos-drawer/Demos.tsx
new file mode 100644
index 0000000..0099f55
--- /dev/null
+++ b/src/_metronic/partials/layout/demos-drawer/Demos.tsx
@@ -0,0 +1,97 @@
+import React, {FC} from 'react'
+import {toAbsoluteUrl} from '../../../helpers'
+
+const Demos: FC = () => {
+ const demos = [
+ {
+ name: 'demo1',
+ available: true,
+ },
+ {
+ name: 'demo2',
+ available: true,
+ },
+ {
+ name: 'demo3',
+ available: true,
+ },
+ {
+ name: 'demo4',
+ available: true,
+ },
+ {
+ name: 'demo5',
+ available: true,
+ },
+ {
+ name: 'demo6',
+ },
+ {
+ name: 'demo7',
+ },
+ {
+ name: 'demo8',
+ },
+ {
+ name: 'demo9',
+ },
+ {
+ name: 'demo10',
+ },
+ {
+ name: 'demo11',
+ },
+ {
+ name: 'demo12',
+ },
+ {
+ name: 'demo13',
+ },
+ ]
+
+ return (
+
+
{process.env.REACT_APP_THEME_NAME} React Demos
+
+
+ {demos.map((item, index) => (
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+ )
+}
+
+export {Demos}
diff --git a/src/_metronic/partials/layout/demos-drawer/DemosDrawer.tsx b/src/_metronic/partials/layout/demos-drawer/DemosDrawer.tsx
new file mode 100644
index 0000000..cd66e67
--- /dev/null
+++ b/src/_metronic/partials/layout/demos-drawer/DemosDrawer.tsx
@@ -0,0 +1,151 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {Demos} from './Demos'
+import {KTSVG} from '../../../helpers'
+
+export function DemosDrawer() {
+ return (
+ <>
+ {/* begin::Demos drawer */}
+
+ {/* begin::Card */}
+
+ {/* begin::Header */}
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Content */}
+
+ {/* end::Content */}
+
+ {/* end::Body */}
+
+ {/* begin::Card */}
+
+ {/* end::Demos drawer */}
+ >
+ )
+}
diff --git a/src/_metronic/partials/layout/demos-drawer/DemosToggleDrawer.tsx b/src/_metronic/partials/layout/demos-drawer/DemosToggleDrawer.tsx
new file mode 100644
index 0000000..456e895
--- /dev/null
+++ b/src/_metronic/partials/layout/demos-drawer/DemosToggleDrawer.tsx
@@ -0,0 +1,17 @@
+import React, {FC} from 'react'
+
+const DemosToggleDrawer: FC = () => (
+
+ Demos
+
+)
+
+export {DemosToggleDrawer}
diff --git a/src/_metronic/partials/layout/drawer-messenger/DrawerMessenger.tsx b/src/_metronic/partials/layout/drawer-messenger/DrawerMessenger.tsx
new file mode 100644
index 0000000..9ad9416
--- /dev/null
+++ b/src/_metronic/partials/layout/drawer-messenger/DrawerMessenger.tsx
@@ -0,0 +1,57 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {FC} from 'react'
+import {KTSVG} from '../../../helpers'
+import {ChatInner} from '../../chat/ChatInner'
+
+const DrawerMessenger: FC = () => (
+
+)
+
+export {DrawerMessenger}
diff --git a/src/_metronic/partials/layout/header-menus/HeaderNotificationsMenu.tsx b/src/_metronic/partials/layout/header-menus/HeaderNotificationsMenu.tsx
new file mode 100644
index 0000000..15787c1
--- /dev/null
+++ b/src/_metronic/partials/layout/header-menus/HeaderNotificationsMenu.tsx
@@ -0,0 +1,154 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+import {FC} from 'react'
+import {Link} from 'react-router-dom'
+import {KTSVG, toAbsoluteUrl, defaultAlerts, defaultLogs} from '../../../helpers'
+
+const HeaderNotificationsMenu: FC = () => (
+
+
+
+ Notifications 24 reports
+
+
+
+
+
+
+
+
+ {defaultAlerts.map((alert, index) => (
+
+ ))}
+
+
+
+
+ View All
+
+
+
+
+
+
+
+
Get Pro Access
+
+
+ Outlines keep you honest. They stoping you from amazing poorly about drive
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {defaultLogs.map((log, index) => (
+
+ ))}
+
+
+
+ View All
+
+
+
+
+
+)
+
+export {HeaderNotificationsMenu}
diff --git a/src/_metronic/partials/layout/header-menus/HeaderUserMenu.tsx b/src/_metronic/partials/layout/header-menus/HeaderUserMenu.tsx
new file mode 100644
index 0000000..b76c862
--- /dev/null
+++ b/src/_metronic/partials/layout/header-menus/HeaderUserMenu.tsx
@@ -0,0 +1,135 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {Link} from 'react-router-dom'
+import {useAuth} from '../../../../app/modules/auth'
+import {Languages} from './Languages'
+import {toAbsoluteUrl} from '../../../helpers'
+
+const HeaderUserMenu: FC = () => {
+ const {currentUser, logout} = useAuth()
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ My Profile
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Account Settings
+
+
+
+
+
+ )
+}
+
+export {HeaderUserMenu}
diff --git a/src/_metronic/partials/layout/header-menus/Languages.tsx b/src/_metronic/partials/layout/header-menus/Languages.tsx
new file mode 100644
index 0000000..e6c1bfe
--- /dev/null
+++ b/src/_metronic/partials/layout/header-menus/Languages.tsx
@@ -0,0 +1,89 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+import {FC} from 'react'
+import {toAbsoluteUrl} from '../../../helpers'
+import {useLang, setLanguage} from '../../../i18n/Metronici18n'
+
+const languages = [
+ {
+ lang: 'en',
+ name: 'English',
+ flag: toAbsoluteUrl('/media/flags/united-states.svg'),
+ },
+ {
+ lang: 'zh',
+ name: 'Mandarin',
+ flag: toAbsoluteUrl('/media/flags/china.svg'),
+ },
+ {
+ lang: 'es',
+ name: 'Spanish',
+ flag: toAbsoluteUrl('/media/flags/spain.svg'),
+ },
+ {
+ lang: 'ja',
+ name: 'Japanese',
+ flag: toAbsoluteUrl('/media/flags/japan.svg'),
+ },
+ {
+ lang: 'de',
+ name: 'German',
+ flag: toAbsoluteUrl('/media/flags/germany.svg'),
+ },
+ {
+ lang: 'fr',
+ name: 'French',
+ flag: toAbsoluteUrl('/media/flags/france.svg'),
+ },
+]
+
+const Languages: FC = () => {
+ const lang = useLang()
+ const currentLanguage = languages.find((x) => x.lang === lang)
+ return (
+
+ )
+}
+
+export {Languages}
diff --git a/src/_metronic/partials/layout/help-drawer/HelpDrawer.tsx b/src/_metronic/partials/layout/help-drawer/HelpDrawer.tsx
new file mode 100644
index 0000000..02d94f4
--- /dev/null
+++ b/src/_metronic/partials/layout/help-drawer/HelpDrawer.tsx
@@ -0,0 +1,242 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {Link} from 'react-router-dom'
+import {KTSVG} from '../../../helpers'
+
+const HelpDrawer = () => {
+ return (
+
+ {/* begin::Card */}
+
+ {/* begin::Header */}
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Content */}
+
+ {/* end::Content */}
+
+ {/* end::Body */}
+
+ {/* end::Card */}
+
+ )
+}
+
+export {HelpDrawer}
diff --git a/src/_metronic/partials/layout/help-drawer/ToggleHelpDrawer.tsx b/src/_metronic/partials/layout/help-drawer/ToggleHelpDrawer.tsx
new file mode 100644
index 0000000..86a0640
--- /dev/null
+++ b/src/_metronic/partials/layout/help-drawer/ToggleHelpDrawer.tsx
@@ -0,0 +1,17 @@
+import React, {FC} from 'react'
+
+const ToggleHelpDrawer: FC = () => (
+
+ Help
+
+)
+
+export {ToggleHelpDrawer}
diff --git a/src/_metronic/partials/layout/purchase/PurchaseButton.tsx b/src/_metronic/partials/layout/purchase/PurchaseButton.tsx
new file mode 100644
index 0000000..4c34d30
--- /dev/null
+++ b/src/_metronic/partials/layout/purchase/PurchaseButton.tsx
@@ -0,0 +1,12 @@
+import React, {FC} from 'react'
+
+const PurchaseButton: FC = () => (
+
+ Buy Now
+
+)
+
+export {PurchaseButton}
diff --git a/src/_metronic/partials/layout/quick-links/QuicLinks.tsx b/src/_metronic/partials/layout/quick-links/QuicLinks.tsx
new file mode 100644
index 0000000..14130ae
--- /dev/null
+++ b/src/_metronic/partials/layout/quick-links/QuicLinks.tsx
@@ -0,0 +1,80 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {FC} from 'react'
+import {Link} from 'react-router-dom'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+const QuickLinks: FC = () => (
+
+
+
Quick Links
+
+ 25 pending tasks
+
+
+
+
+
+
+ View All
+
+
+
+)
+
+export {QuickLinks}
diff --git a/src/_metronic/partials/layout/search/Search.tsx b/src/_metronic/partials/layout/search/Search.tsx
new file mode 100644
index 0000000..ff77f05
--- /dev/null
+++ b/src/_metronic/partials/layout/search/Search.tsx
@@ -0,0 +1,793 @@
+import React, {FC, useEffect, useRef, useState} from 'react'
+import {SearchComponent} from '../../../assets/ts/components'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+const Search: FC = () => {
+ const [menuState, setMenuState] = useState<'main' | 'advanced' | 'preferences'>('main')
+ const element = useRef(null)
+ const wrapperElement = useRef(null)
+ const resultsElement = useRef(null)
+ const suggestionsElement = useRef(null)
+ const emptyElement = useRef(null)
+
+ const processs = (search: SearchComponent) => {
+ setTimeout(function () {
+ const number = Math.floor(Math.random() * 6) + 1
+
+ // Hide recently viewed
+ suggestionsElement.current!.classList.add('d-none')
+
+ if (number === 3) {
+ // Hide results
+ resultsElement.current!.classList.add('d-none')
+ // Show empty message
+ emptyElement.current!.classList.remove('d-none')
+ } else {
+ // Show results
+ resultsElement.current!.classList.remove('d-none')
+ // Hide empty message
+ emptyElement.current!.classList.add('d-none')
+ }
+
+ // Complete search
+ search.complete()
+ }, 1500)
+ }
+
+ const clear = (search: SearchComponent) => {
+ // Show recently viewed
+ suggestionsElement.current!.classList.remove('d-none')
+ // Hide results
+ resultsElement.current!.classList.add('d-none')
+ // Hide empty message
+ emptyElement.current!.classList.add('d-none')
+ }
+
+ useEffect(() => {
+ // Initialize search handler
+ const searchObject = SearchComponent.createInsance('#kt_header_search')
+
+ // Search handler
+ searchObject!.on('kt.search.process', processs)
+
+ // Clear handler
+ searchObject!.on('kt.search.clear', clear)
+ }, [])
+
+ return (
+ <>
+
+ >
+ )
+}
+
+export {Search}
diff --git a/src/_metronic/partials/layout/search/SearchInner.tsx b/src/_metronic/partials/layout/search/SearchInner.tsx
new file mode 100644
index 0000000..c3f08ca
--- /dev/null
+++ b/src/_metronic/partials/layout/search/SearchInner.tsx
@@ -0,0 +1,37 @@
+import {useState} from 'react'
+import {KTSVG} from '../../../helpers'
+
+const SearchInner = () => {
+ const [search, setSearch] = useState('')
+ return (
+
+ )
+}
+
+export {SearchInner}
diff --git a/src/_metronic/partials/layout/theme-mode/ThemeModeProvider.tsx b/src/_metronic/partials/layout/theme-mode/ThemeModeProvider.tsx
new file mode 100644
index 0000000..4787f4b
--- /dev/null
+++ b/src/_metronic/partials/layout/theme-mode/ThemeModeProvider.tsx
@@ -0,0 +1,99 @@
+import React, {createContext, useContext, useEffect, useState} from 'react'
+import {ThemeModeComponent} from '../../../assets/ts/layout'
+import {toAbsoluteUrl} from '../../../helpers'
+
+export type ThemeModeType = 'dark' | 'light' | 'system'
+export const themeModelSKey = 'kt_theme_mode_value'
+export const themeMenuModeLSKey = 'kt_theme_mode_menu'
+
+const systemMode = ThemeModeComponent.getSystemMode() as 'light' | 'dark'
+
+type ThemeModeContextType = {
+ mode: ThemeModeType
+ menuMode: ThemeModeType
+ updateMode: (_mode: ThemeModeType) => void
+ updateMenuMode: (_mode: ThemeModeType) => void
+}
+
+const themeModeSwitchHelper = (_mode: ThemeModeType) => {
+ // change background image url
+ const mode = _mode !== 'system' ? _mode : systemMode
+ const imageUrl = '/media/patterns/header-bg' + (mode === 'light' ? '.jpg' : '-dark.png')
+ document.body.style.backgroundImage = `url("${toAbsoluteUrl(imageUrl)}")`
+}
+
+const getThemeModeFromLocalStorage = (lsKey: string): ThemeModeType => {
+ if (!localStorage) {
+ return 'light'
+ }
+
+ const data = localStorage.getItem(lsKey)
+ if (data === 'dark' || data === 'light' || data === 'system') {
+ return data
+ }
+
+ if (document.documentElement.hasAttribute('data-theme')) {
+ const dataTheme = document.documentElement.getAttribute('data-theme')
+ if (dataTheme && (dataTheme === 'dark' || dataTheme === 'light' || dataTheme === 'system')) {
+ return dataTheme
+ }
+ }
+
+ return 'system'
+}
+
+const defaultThemeMode: ThemeModeContextType = {
+ mode: getThemeModeFromLocalStorage(themeModelSKey),
+ menuMode: getThemeModeFromLocalStorage(themeMenuModeLSKey),
+ updateMode: (_mode: ThemeModeType) => {},
+ updateMenuMode: (_menuMode: ThemeModeType) => {},
+}
+
+const ThemeModeContext = createContext({
+ mode: defaultThemeMode.mode,
+ menuMode: defaultThemeMode.menuMode,
+ updateMode: (_mode: ThemeModeType) => {},
+ updateMenuMode: (_menuMode: ThemeModeType) => {},
+})
+
+const useThemeMode = () => useContext(ThemeModeContext)
+
+const ThemeModeProvider = ({children}: {children: React.ReactNode}) => {
+ const [mode, setMode] = useState(defaultThemeMode.mode)
+ const [menuMode, setMenuMode] = useState(defaultThemeMode.menuMode)
+
+ const updateMode = (_mode: ThemeModeType, saveInLocalStorage: boolean = true) => {
+ setMode(_mode)
+ // themeModeSwitchHelper(updatedMode)
+ if (saveInLocalStorage && localStorage) {
+ localStorage.setItem(themeModelSKey, _mode)
+ }
+
+ if (saveInLocalStorage) {
+ const updatedMode = _mode === 'system' ? systemMode : _mode
+ document.documentElement.setAttribute('data-theme', updatedMode)
+ }
+ ThemeModeComponent.init()
+ }
+
+ const updateMenuMode = (_menuMode: ThemeModeType, saveInLocalStorage: boolean = true) => {
+ setMenuMode(_menuMode)
+ if (saveInLocalStorage && localStorage) {
+ localStorage.setItem(themeMenuModeLSKey, _menuMode)
+ }
+ }
+
+ useEffect(() => {
+ updateMode(mode, false)
+ updateMenuMode(menuMode, false)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ return (
+
+ {children}
+
+ )
+}
+
+export {ThemeModeProvider, useThemeMode, systemMode, themeModeSwitchHelper}
diff --git a/src/_metronic/partials/layout/theme-mode/ThemeModeSwitcher.tsx b/src/_metronic/partials/layout/theme-mode/ThemeModeSwitcher.tsx
new file mode 100644
index 0000000..2031c76
--- /dev/null
+++ b/src/_metronic/partials/layout/theme-mode/ThemeModeSwitcher.tsx
@@ -0,0 +1,110 @@
+import clsx from 'clsx'
+import {KTSVG} from '../../../helpers'
+import {ThemeModeComponent} from '../../../assets/ts/layout'
+import {ThemeModeType, useThemeMode} from './ThemeModeProvider'
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
+type Props = {
+ toggleBtnClass?: string
+ toggleBtnIconClass?: string
+ menuPlacement?: string
+ menuTrigger?: string
+}
+
+const systemMode = ThemeModeComponent.getSystemMode() as 'light' | 'dark'
+
+const ThemeModeSwitcher = ({
+ toggleBtnClass = '',
+ toggleBtnIconClass = 'svg-icon-2',
+ menuPlacement = 'bottom-end',
+ menuTrigger = "{default: 'click', lg: 'hover'}",
+}: Props) => {
+ const {mode, menuMode, updateMode, updateMenuMode} = useThemeMode()
+ const calculatedMode = mode === 'system' ? systemMode : mode
+ const switchMode = (_mode: ThemeModeType) => {
+ updateMenuMode(_mode)
+ updateMode(_mode)
+ }
+
+ return (
+ <>
+ {/* begin::Menu toggle */}
+
+ {calculatedMode === 'dark' && (
+
+ )}
+
+ {calculatedMode === 'light' && (
+
+ )}
+
+ {/* begin::Menu toggle */}
+
+ {/* begin::Menu */}
+
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+
+ {/* end::Menu */}
+ >
+ )
+}
+
+export {ThemeModeSwitcher}
diff --git a/src/_metronic/partials/modals/create-app-stepper/CreateAppModal.tsx b/src/_metronic/partials/modals/create-app-stepper/CreateAppModal.tsx
new file mode 100644
index 0000000..45b4a5e
--- /dev/null
+++ b/src/_metronic/partials/modals/create-app-stepper/CreateAppModal.tsx
@@ -0,0 +1,320 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {useState, useRef} from 'react'
+import {createPortal} from 'react-dom'
+import {Modal} from 'react-bootstrap'
+import {defaultCreateAppData, ICreateAppData} from './IAppModels'
+import {StepperComponent} from '../../../assets/ts/components'
+import {KTSVG} from '../../../helpers'
+import {Step1} from './steps/Step1'
+import {Step2} from './steps/Step2'
+import {Step3} from './steps/Step3'
+import {Step4} from './steps/Step4'
+import {Step5} from './steps/Step5'
+
+type Props = {
+ show: boolean
+ handleClose: () => void
+}
+
+const modalsRoot = document.getElementById('root-modals') || document.body
+
+const CreateAppModal = ({show, handleClose}: Props) => {
+ const stepperRef = useRef(null)
+ const stepper = useRef(null)
+ const [data, setData] = useState(defaultCreateAppData)
+ const [hasError, setHasError] = useState(false)
+
+ const loadStepper = () => {
+ stepper.current = StepperComponent.createInsance(stepperRef.current as HTMLDivElement)
+ }
+
+ const updateData = (fieldsToUpdate: Partial) => {
+ const updatedData = {...data, ...fieldsToUpdate}
+ setData(updatedData)
+ }
+
+ const checkAppBasic = (): boolean => {
+ if (!data.appBasic.appName || !data.appBasic.appType) {
+ return false
+ }
+ return true
+ }
+
+ const checkAppDataBase = (): boolean => {
+ if (!data.appDatabase.databaseName || !data.appDatabase.databaseSolution) {
+ return false
+ }
+
+ return true
+ }
+
+ const prevStep = () => {
+ if (!stepper.current) {
+ return
+ }
+
+ stepper.current.goPrev()
+ }
+
+ const nextStep = () => {
+ setHasError(false)
+ if (!stepper.current) {
+ return
+ }
+
+ if (stepper.current.getCurrentStepIndex() === 1) {
+ if (!checkAppBasic()) {
+ setHasError(true)
+ return
+ }
+ }
+
+ if (stepper.current.getCurrentStepIndex() === 3) {
+ if (!checkAppDataBase()) {
+ setHasError(true)
+ return
+ }
+ }
+
+ stepper.current.goNext()
+ }
+
+ const submit = () => {
+ window.location.reload()
+ }
+
+ return createPortal(
+
+
+
Create App
+ {/* begin::Close */}
+
+
+
+ {/* end::Close */}
+
+
+
+ {/*begin::Stepper */}
+
+ {/* begin::Aside*/}
+
+ {/* begin::Nav*/}
+
+ {/* begin::Step 1*/}
+
+ {/* begin::Wrapper*/}
+
+ {/* begin::Icon*/}
+
+
+ 1
+
+ {/* end::Icon*/}
+
+ {/* begin::Label*/}
+
+
Details
+
+
Name your App
+
+ {/* end::Label*/}
+
+ {/* end::Wrapper*/}
+
+ {/* begin::Line*/}
+
+ {/* end::Line*/}
+
+ {/* end::Step 1*/}
+
+ {/* begin::Step 2*/}
+
+ {/* begin::Wrapper*/}
+
+ {/* begin::Icon*/}
+
+
+ 2
+
+ {/* begin::Icon*/}
+
+ {/* begin::Label*/}
+
+
Frameworks
+
+
Define your app framework
+
+ {/* begin::Label*/}
+
+ {/* end::Wrapper*/}
+
+ {/* begin::Line*/}
+
+ {/* end::Line*/}
+
+ {/* end::Step 2*/}
+
+ {/* begin::Step 3*/}
+
+ {/* begin::Wrapper*/}
+
+ {/* begin::Icon*/}
+
+
+ 3
+
+ {/* end::Icon*/}
+
+ {/* begin::Label*/}
+
+
Database
+
+
Select the app database type
+
+ {/* end::Label*/}
+
+ {/* end::Wrapper*/}
+
+ {/* begin::Line*/}
+
+ {/* end::Line*/}
+
+ {/* end::Step 3*/}
+
+ {/* begin::Step 4*/}
+
+ {/* begin::Wrapper*/}
+
+ {/* begin::Icon*/}
+
+
+ 4
+
+ {/* end::Icon*/}
+
+ {/* begin::Label*/}
+
+
Storage
+
+
Provide storage details
+
+ {/* end::Label*/}
+
+ {/* end::Wrapper*/}
+
+ {/* begin::Line*/}
+
+ {/* end::Line*/}
+
+ {/* end::Step 4*/}
+
+ {/* begin::Step 5*/}
+
+ {/* begin::Wrapper*/}
+
+ {/* begin::Icon*/}
+
+
+ 5
+
+ {/* end::Icon*/}
+
+ {/* begin::Label*/}
+
+
Completed
+
+
Review and Submit
+
+ {/* end::Label*/}
+
+ {/* end::Wrapper*/}
+
+ {/* end::Step 5*/}
+
+ {/* end::Nav*/}
+
+ {/* begin::Aside*/}
+
+ {/*begin::Content */}
+
+ {/*begin::Form */}
+
+ {/*end::Form */}
+
+ {/*end::Content */}
+
+ {/* end::Stepper */}
+
+ ,
+ modalsRoot
+ )
+}
+
+export {CreateAppModal}
diff --git a/src/_metronic/partials/modals/create-app-stepper/IAppModels.ts b/src/_metronic/partials/modals/create-app-stepper/IAppModels.ts
new file mode 100644
index 0000000..4c4486e
--- /dev/null
+++ b/src/_metronic/partials/modals/create-app-stepper/IAppModels.ts
@@ -0,0 +1,33 @@
+export interface IAppBasic {
+ appName: string
+ appType: 'Quick Online Courses' | 'Face to Face Discussions' | 'Full Intro Training'
+}
+
+export type TAppFramework = 'HTML5' | 'ReactJS' | 'Angular' | 'Vue'
+
+export interface IAppDatabase {
+ databaseName: string
+ databaseSolution: 'MySQL' | 'Firebase' | 'DynamoDB'
+}
+
+export type TAppStorage = 'Basic Server' | 'AWS' | 'Google'
+
+export interface ICreateAppData {
+ appBasic: IAppBasic
+ appFramework: TAppFramework
+ appDatabase: IAppDatabase
+ appStorage: TAppStorage
+}
+
+export const defaultCreateAppData: ICreateAppData = {
+ appBasic: {appName: '', appType: 'Quick Online Courses'},
+ appFramework: 'HTML5',
+ appDatabase: {databaseName: 'db_name', databaseSolution: 'MySQL'},
+ appStorage: 'Basic Server',
+}
+
+export type StepProps = {
+ data: ICreateAppData,
+ updateData: (fieldsToUpdate: Partial) => void,
+ hasError: boolean
+}
diff --git a/src/_metronic/partials/modals/create-app-stepper/steps/Step1.tsx b/src/_metronic/partials/modals/create-app-stepper/steps/Step1.tsx
new file mode 100644
index 0000000..545541a
--- /dev/null
+++ b/src/_metronic/partials/modals/create-app-stepper/steps/Step1.tsx
@@ -0,0 +1,185 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {KTSVG} from '../../../../../_metronic/helpers'
+import {StepProps} from '../IAppModels'
+
+const Step1 = ({data, updateData, hasError}: StepProps) => {
+ return (
+
+
+ {/*begin::Form Group */}
+
+
+ App Name
+
+
+
+ updateData({
+ appBasic: {
+ appName: e.target.value,
+ appType: data.appBasic.appType,
+ },
+ })
+ }
+ />
+ {!data.appBasic.appName && hasError && (
+
+
+ App name is required
+
+
+ )}
+
+ {/*end::Form Group */}
+
+ {/*begin::Form Group */}
+
+ {/*end::Form Group */}
+
+
+ )
+}
+
+export {Step1}
diff --git a/src/_metronic/partials/modals/create-app-stepper/steps/Step2.tsx b/src/_metronic/partials/modals/create-app-stepper/steps/Step2.tsx
new file mode 100644
index 0000000..da759f7
--- /dev/null
+++ b/src/_metronic/partials/modals/create-app-stepper/steps/Step2.tsx
@@ -0,0 +1,138 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {StepProps} from '../IAppModels'
+
+const Step2 = ({data, updateData}: StepProps) => {
+ return (
+
+ )
+}
+
+export {Step2}
diff --git a/src/_metronic/partials/modals/create-app-stepper/steps/Step3.tsx b/src/_metronic/partials/modals/create-app-stepper/steps/Step3.tsx
new file mode 100644
index 0000000..31e820e
--- /dev/null
+++ b/src/_metronic/partials/modals/create-app-stepper/steps/Step3.tsx
@@ -0,0 +1,164 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {StepProps} from '../IAppModels'
+
+const Step3 = ({data, updateData, hasError}: StepProps) => {
+ return (
+ <>
+ {/*begin::Step 3 */}
+
+
+ {/*begin::Form Group */}
+
+
+
Database Name
+
+
+ updateData({
+ appDatabase: {
+ databaseName: e.target.value,
+ databaseSolution: data.appDatabase.databaseSolution,
+ },
+ })
+ }
+ />
+ {!data.appDatabase.databaseName && hasError && (
+
+
+ Database name is required
+
+
+ )}
+
+ {/*end::Form Group */}
+
+ {/*begin::Form Group */}
+
+
+ Select Database Engine
+
+
+
+
+ {/*begin:Option */}
+
+
+
+
+
+
+
+
+
+ MySQL
+ Basic MySQL database
+
+
+
+
+
+ updateData({
+ appDatabase: {
+ databaseName: data.appDatabase.databaseName,
+ databaseSolution: 'MySQL',
+ },
+ })
+ }
+ />
+
+
+ {/*end::Option */}
+
+ {/*begin:Option */}
+
+
+
+
+
+
+
+
+
+ Firebase
+ Google based app data management
+
+
+
+
+
+ updateData({
+ appDatabase: {
+ databaseName: data.appDatabase.databaseName,
+ databaseSolution: 'Firebase',
+ },
+ })
+ }
+ />
+
+
+ {/*end::Option */}
+
+ {/*begin:Option */}
+
+
+
+
+
+
+
+
+
+ DynamoDB
+ Amazon Fast NoSQL Database
+
+
+
+
+
+ updateData({
+ appDatabase: {
+ databaseName: data.appDatabase.databaseName,
+ databaseSolution: 'DynamoDB',
+ },
+ })
+ }
+ />
+
+
+ {/*end::Option */}
+
+ {/*end::Form Group */}
+
+
+ {/*end::Step 3 */}
+ >
+ )
+}
+
+export {Step3}
diff --git a/src/_metronic/partials/modals/create-app-stepper/steps/Step4.tsx b/src/_metronic/partials/modals/create-app-stepper/steps/Step4.tsx
new file mode 100644
index 0000000..ce9c879
--- /dev/null
+++ b/src/_metronic/partials/modals/create-app-stepper/steps/Step4.tsx
@@ -0,0 +1,108 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {StepProps} from '../IAppModels'
+
+const Step4 = ({data, updateData}: StepProps) => {
+ return (
+ <>
+ {/*begin::Step 4 */}
+
+ {/*end::Step 4 */}
+ >
+ )
+}
+
+export {Step4}
diff --git a/src/_metronic/partials/modals/create-app-stepper/steps/Step5.tsx b/src/_metronic/partials/modals/create-app-stepper/steps/Step5.tsx
new file mode 100644
index 0000000..3758fee
--- /dev/null
+++ b/src/_metronic/partials/modals/create-app-stepper/steps/Step5.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {toAbsoluteUrl} from '../../../../helpers'
+
+const Step5 = () => {
+ return (
+ <>
+
+
+ {/* begin::Heading */}
+
Release!
+ {/* end::Heading */}
+
+ {/* begin::Description */}
+
+ Submit your app to kickstart your project.
+
+ {/* end::Description */}
+
+ {/* begin::Illustration */}
+
+
+
+ {/* end::Illustration */}
+
+
+ >
+ )
+}
+
+export {Step5}
diff --git a/src/_metronic/partials/modals/invite-users/InviteUsers.tsx b/src/_metronic/partials/modals/invite-users/InviteUsers.tsx
new file mode 100644
index 0000000..198044f
--- /dev/null
+++ b/src/_metronic/partials/modals/invite-users/InviteUsers.tsx
@@ -0,0 +1,228 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {FC} from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+const InviteUsers: FC = () => {
+ const users = [
+ {
+ avatar: '/media/avatars/300-6.jpg',
+ name: 'Emma Smith',
+ email: 'e.smith@kpmg.com.au',
+ access: '1',
+ },
+ {
+ state: 'danger',
+ name: 'Melody Macy',
+ email: 'melody@altbox.com',
+ access: '1',
+ },
+ {
+ avatar: '/media/avatars/300-1.jpg',
+ name: 'Max Smith',
+ email: 'max@kt.com',
+ access: '3',
+ },
+ {
+ avatar: '/media/avatars/300-1.jpg',
+ name: 'Sean Bean',
+ email: 'sean@dellito.com',
+ access: '2',
+ },
+ {
+ avatar: '/media/avatars/300-25.jpg',
+ name: 'Brian Cox',
+ email: 'brian@exchange.com',
+ access: '3',
+ },
+ {
+ state: 'warning',
+ name: 'Mikaela Collins',
+ email: 'mikaela@pexcom.com',
+ access: '2',
+ },
+ {
+ avatar: '/media/avatars/300-9.jpg',
+ name: 'Francis Mitcham',
+ email: 'f.mitcham@kpmg.com.au',
+ access: '3',
+ },
+ {
+ state: 'danger',
+ name: 'Olivia Wild',
+ email: 'olivia@corpmail.com',
+ access: '2',
+ },
+ {
+ state: 'info',
+ name: 'Neil Owen',
+ email: 'owen.neil@gmail.com',
+ access: '1',
+ },
+ {
+ avatar: '/media/avatars/300-23.jpg',
+ name: 'Dan Wilson',
+ email: 'dam@consilting.com',
+ access: '3',
+ },
+ {
+ state: 'danger',
+ name: 'Emma Bold',
+ email: 'emma@intenso.com',
+ access: '2',
+ },
+ {
+ avatar: '/media/avatars/300-12.jpg',
+ name: 'Ana Crown',
+ email: 'ana.cf@limtel.com',
+ access: '1',
+ },
+ {
+ state: 'primary',
+ name: 'Robert Doe',
+ email: 'robert@benko.com',
+ access: '3',
+ },
+ {
+ avatar: '/media/avatars/300-13.jpg',
+ name: 'John Miller',
+ email: 'miller@mapple.com',
+ access: '3',
+ },
+ {
+ state: 'success',
+ name: 'Lucy Kunic',
+ email: 'lucy.m@fentech.com',
+ access: '2',
+ },
+ {
+ avatar: '/media/avatars/300-21.jpg',
+ name: 'Ethan Wilder',
+ email: 'ethan@loop.com.au',
+ access: '1',
+ },
+ {
+ avatar: '/media/avatars/300-12.jpg',
+ name: 'Ana Crown',
+ email: 'ana.cf@limtel.com',
+ access: '3',
+ },
+ ]
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ Invite Gmail Contacts
+
+
+
+ or
+
+
+
+
+
+
Your Invitations
+
+
+ {users.map((user, i) => {
+ return (
+
+
+
+ {user.avatar &&
}
+ {user.state && (
+
+
+ {user.name.charAt(0)}
+
+
+ )}
+
+
+
+
+
+
+
+ Guest
+
+ Owner
+
+ Can Edit
+
+
+
+ )
+ })}
+
+
+
+
+
+
Adding Users by Team Members
+
+ If you need more info, please check budget planning
+
+
+
+
+
+
+ Allowed
+
+
+
+
+
+
+ )
+}
+
+export {InviteUsers}
diff --git a/src/_metronic/partials/modals/select-location/SelectLocationModal.tsx b/src/_metronic/partials/modals/select-location/SelectLocationModal.tsx
new file mode 100644
index 0000000..9e8b9cf
--- /dev/null
+++ b/src/_metronic/partials/modals/select-location/SelectLocationModal.tsx
@@ -0,0 +1,67 @@
+import React, {Dispatch, SetStateAction, useState, useEffect} from 'react'
+import {Modal} from 'react-bootstrap'
+import {KTSVG} from '../../../helpers'
+
+type Props = {
+ data: {location: string; setLocation: Dispatch>}
+ show: boolean
+ handleClose: () => void
+}
+
+const SelectLocationModal: React.FC = ({show, handleClose, data}) => {
+ useEffect(() => {
+ initMap()
+ }, [])
+
+ const [location, setLocation] = useState(data.location)
+ const dissmissLocation = () => {
+ setLocation(data.location)
+ handleClose()
+ }
+ const applyLocation = () => {
+ data.setLocation(location)
+ handleClose()
+ }
+ const initMap = () => {}
+
+ return (
+
+
+
+
Select Location
+
+
+
+
+
+
+
setLocation(e.target.value)} />
+
+
+
+
+ Cancel
+
+
+ Apply
+
+
+
+
+ )
+}
+
+export {SelectLocationModal}
diff --git a/src/_metronic/partials/modals/upgrade-plan/UpgradePlan.tsx b/src/_metronic/partials/modals/upgrade-plan/UpgradePlan.tsx
new file mode 100644
index 0000000..31f6c39
--- /dev/null
+++ b/src/_metronic/partials/modals/upgrade-plan/UpgradePlan.tsx
@@ -0,0 +1,343 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {FC, useState} from 'react'
+import {KTSVG} from '../../../helpers'
+
+const plans = [
+ {
+ title: 'Startup',
+ subTitle: 'Best for startups',
+ description: 'Optimal for 10+ team size and new startup',
+ priceMonth: '39',
+ priceAnnual: '399',
+ default: true,
+ custom: false,
+ features: [
+ {
+ title: 'Up to 10 Active Users',
+ supported: true,
+ },
+ {
+ title: 'Up to 30 Project Integrations',
+ supported: true,
+ },
+ {
+ title: 'Analytics Module',
+ supported: true,
+ },
+ {
+ title: 'Finance Module',
+ supported: false,
+ },
+ {
+ title: 'Accounting Module',
+ supported: false,
+ },
+ {
+ title: 'Network Platform',
+ supported: false,
+ },
+ {
+ title: 'Unlimited Cloud Space',
+ supported: false,
+ },
+ ],
+ },
+
+ {
+ title: 'Advanced',
+ subTitle: 'Best for 100+ team size',
+ description: 'Optimal for 100+ team size and grown company',
+ priceMonth: '339',
+ priceAnnual: '3399',
+ default: false,
+ custom: false,
+ features: [
+ {
+ title: 'Up to 10 Active Users',
+ supported: true,
+ },
+ {
+ title: 'Up to 30 Project Integrations',
+ supported: true,
+ },
+ {
+ title: 'Analytics Module',
+ supported: true,
+ },
+ {
+ title: 'Finance Module',
+ supported: true,
+ },
+ {
+ title: 'Accounting Module',
+ supported: true,
+ },
+ {
+ title: 'Network Platform',
+ supported: false,
+ },
+ {
+ title: 'Unlimited Cloud Space',
+ supported: false,
+ },
+ ],
+ },
+
+ {
+ title: 'Enterprise',
+ subTitle: 'Best value for 1000+ team',
+ description: 'Optimal for 1000+ team and enterpise',
+ priceMonth: '999',
+ priceAnnual: '9999',
+ label: 'Most popular',
+ default: false,
+ custom: false,
+ features: [
+ {
+ title: 'Up to 10 Active Users',
+ supported: true,
+ },
+ {
+ title: 'Up to 30 Project Integrations',
+ supported: true,
+ },
+ {
+ title: 'Analytics Module',
+ supported: true,
+ },
+ {
+ title: 'Finance Module',
+ supported: true,
+ },
+ {
+ title: 'Accounting Module',
+ supported: true,
+ },
+ {
+ title: 'Network Platform',
+ supported: true,
+ },
+ {
+ title: 'Unlimited Cloud Space',
+ supported: true,
+ },
+ ],
+ },
+
+ {
+ title: 'Custom',
+ subTitle: 'Requet a custom license',
+ default: false,
+ custom: true,
+ },
+]
+
+const UpgradePlan: FC = () => {
+ const [currentState, setCurrentState] = useState<'month' | 'annual'>('month')
+ const [selected, setSelected] = useState('Startup')
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {plans.map((plan, index) => {
+ return (
+
{
+ setSelected(plan.title)
+ }}
+ className={
+ `nav-link btn btn-outline btn-outline-dashed btn-color-dark d-flex flex-stack text-start p-6 ` +
+ (index !== plans.length - 1 && 'mb-6 ') +
+ (plan.default && 'active ') +
+ (!plan.custom && 'btn-active btn-active-primary ')
+ }
+ data-bs-toggle='tab'
+ data-bs-target={`#kt_upgrade_plan_${index}`}
+ key={index}
+ >
+
+
+ setSelected(e.target.value)}
+ />
+
+
+
+
+ {plan.title}
+
+ {plan.label && (
+
+ {plan.label}
+
+ )}
+
+
{plan.subTitle}
+
+
+
+
+ {plan.custom && (
+ Contact Us
+ )}
+ {!plan.custom && (
+ <>
+ $
+
+
+ {currentState === 'month' ? plan.priceMonth : plan.priceAnnual}
+
+
+
+ /Mon
+
+ >
+ )}
+
+
+ )
+ })}
+
+
+
+
+
+ {plans.map((plan, index) => {
+ return (
+
+ {!plan.custom && (
+ <>
+
+
+
What’s in Startup Plan?
+
+
{plan.description}
+
+
+
+ {plan.features!.map((feature, i) => {
+ return (
+
+ {feature.supported && (
+ <>
+
+ {feature.title}
+
+
+
+ >
+ )}
+ {!feature.supported && (
+ <>
+
+ {feature.title}
+
+
+ >
+ )}
+
+ )
+ })}
+
+
+ >
+ )}
+
+ )
+ })}
+
+
+
+
+
+
+
+ Cancel
+
+
+
+ Upgrade Plan
+
+
+
+
+
+
+ )
+}
+
+export {UpgradePlan}
diff --git a/src/_metronic/partials/widgets/_new/cards/CardsWidget17.tsx b/src/_metronic/partials/widgets/_new/cards/CardsWidget17.tsx
new file mode 100644
index 0000000..4212ee7
--- /dev/null
+++ b/src/_metronic/partials/widgets/_new/cards/CardsWidget17.tsx
@@ -0,0 +1,155 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC, useEffect, useRef} from 'react'
+import {KTSVG} from '../../../../helpers'
+import {getCSSVariableValue} from '../../../../assets/ts/_utils'
+import {useThemeMode} from '../../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ chartSize?: number
+ chartLine?: number
+ chartRotate?: number
+}
+
+const CardsWidget17: FC = ({
+ className,
+ chartSize = 70,
+ chartLine = 11,
+ chartRotate = 145,
+}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ useEffect(() => {
+ refreshChart()
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [mode])
+
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ setTimeout(() => {
+ initChart(chartSize, chartLine, chartRotate)
+ }, 10)
+ }
+
+ return (
+
+
+
+
+ $
+
+ 69,700
+
+
+ {' '}
+ 2.2%
+
+
+
Projects Earnings in April
+
+
+
+
+
+ )
+}
+
+const initChart = function (
+ chartSize: number = 70,
+ chartLine: number = 11,
+ chartRotate: number = 145
+) {
+ const el = document.getElementById('kt_card_widget_17_chart')
+ if (!el) {
+ return
+ }
+ el.innerHTML = ''
+
+ var options = {
+ size: chartSize,
+ lineWidth: chartLine,
+ rotate: chartRotate,
+ //percent: el.getAttribute('data-kt-percent') ,
+ }
+
+ const canvas = document.createElement('canvas')
+ const span = document.createElement('span')
+
+ // @ts-ignore
+ if (typeof G_vmlCanvasManager !== 'undefined') {
+ // @ts-ignore
+ G_vmlCanvasManager.initElement(canvas)
+ }
+
+ const ctx = canvas.getContext('2d')
+ canvas.width = canvas.height = options.size
+
+ el.appendChild(span)
+ el.appendChild(canvas)
+
+ // @ts-ignore
+ ctx.translate(options.size / 2, options.size / 2) // change center
+ // @ts-ignore
+ ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI) // rotate -90 deg
+
+ //imd = ctx.getImageData(0, 0, 240, 240);
+ const radius = (options.size - options.lineWidth) / 2
+
+ const drawCircle = function (color: string, lineWidth: number, percent: number) {
+ percent = Math.min(Math.max(0, percent || 1), 1)
+ if (!ctx) {
+ return
+ }
+
+ ctx.beginPath()
+ ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false)
+ ctx.strokeStyle = color
+ ctx.lineCap = 'round' // butt, round or square
+ ctx.lineWidth = lineWidth
+ ctx.stroke()
+ }
+
+ // Init 2
+ drawCircle('#E4E6EF', options.lineWidth, 100 / 100)
+ drawCircle(getCSSVariableValue('--kt-primary'), options.lineWidth, 100 / 150)
+ drawCircle(getCSSVariableValue('--kt-success'), options.lineWidth, 100 / 250)
+}
+
+export {CardsWidget17}
diff --git a/src/_metronic/partials/widgets/_new/cards/CardsWidget20.tsx b/src/_metronic/partials/widgets/_new/cards/CardsWidget20.tsx
new file mode 100644
index 0000000..0859f86
--- /dev/null
+++ b/src/_metronic/partials/widgets/_new/cards/CardsWidget20.tsx
@@ -0,0 +1,44 @@
+type Props = {
+ className: string
+ description: string
+ color: string
+ img: string
+}
+
+const CardsWidget20 = ({className, description, color, img}: Props) => (
+
+
+
+ 69
+
+ {description}
+
+
+
+
+
+ 43 Pending
+ 72%
+
+
+
+
+
+
+)
+export {CardsWidget20}
diff --git a/src/_metronic/partials/widgets/_new/cards/CardsWidget7.tsx b/src/_metronic/partials/widgets/_new/cards/CardsWidget7.tsx
new file mode 100644
index 0000000..3ddac3b
--- /dev/null
+++ b/src/_metronic/partials/widgets/_new/cards/CardsWidget7.tsx
@@ -0,0 +1,74 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+import {toAbsoluteUrl} from '../../../../helpers'
+
+type Props = {
+ className: string
+ description: string
+ icon: boolean
+ stats: number
+ labelColor: string
+ textColor: string
+}
+
+const items: Array<{
+ name: string
+ initials?: string
+ src?: string
+ state?: string
+}> = [
+ {name: 'Alan Warden', initials: 'A', state: 'warning'},
+ {name: 'Michael Eberon', src: toAbsoluteUrl('/media/avatars/300-11.jpg')},
+ {name: 'Susan Redwood', initials: 'S', state: 'primary'},
+ {name: 'Melody Macy', src: toAbsoluteUrl('/media/avatars/300-2.jpg')},
+ {name: 'Perry Matthew', initials: 'P', state: 'danger'},
+ {name: 'Barry Walter', src: toAbsoluteUrl('/media/avatars/300-12.jpg')},
+]
+
+const CardsWidget7 = ({className, description, icon, stats, labelColor, textColor}: Props) => (
+
+
+
+
+ {stats}
+ {description}
+
+
+
+
+
Today’s Heroes
+
+ {items.map((item, index) => (
+
+ {item.src &&
}
+ {item.state && item.initials && (
+
+ {item.initials}
+
+ )}
+
+ ))}
+
+
+
+ +42
+
+
+
+
+
+)
+export {CardsWidget7}
diff --git a/src/_metronic/partials/widgets/_new/engage/EngageWidget10.tsx b/src/_metronic/partials/widgets/_new/engage/EngageWidget10.tsx
new file mode 100644
index 0000000..b2a51eb
--- /dev/null
+++ b/src/_metronic/partials/widgets/_new/engage/EngageWidget10.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {Link} from 'react-router-dom'
+import {toAbsoluteUrl} from '../../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const EngageWidget10 = ({className}: Props) => (
+
+
+
+
+
+ Try our all new Enviroment with
+
+
+
+ Pro Plan
+
+
+
+
+
+ for Free
+
+
+
+
+
+
+
+
+)
+export {EngageWidget10}
diff --git a/src/_metronic/partials/widgets/_new/lists/ListsWidget26.tsx b/src/_metronic/partials/widgets/_new/lists/ListsWidget26.tsx
new file mode 100644
index 0000000..bc1eb3a
--- /dev/null
+++ b/src/_metronic/partials/widgets/_new/lists/ListsWidget26.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {Fragment} from 'react'
+import {KTSVG} from '../../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const rows: Array<{description: string}> = [
+ {description: 'Avg. Client Rating'},
+ {description: 'Instagram Followers'},
+ {description: 'Google Ads CPC'},
+]
+
+const ListsWidget26 = ({className}: Props) => (
+
+
+
+ {rows.map((row, index) => (
+
+
+ {rows.length - 1 > index &&
}
+
+ ))}
+
+
+)
+export {ListsWidget26}
diff --git a/src/_metronic/partials/widgets/charts/ChartsWidget1.tsx b/src/_metronic/partials/widgets/charts/ChartsWidget1.tsx
new file mode 100644
index 0000000..5ec25b0
--- /dev/null
+++ b/src/_metronic/partials/widgets/charts/ChartsWidget1.tsx
@@ -0,0 +1,197 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {KTSVG} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+}
+
+const ChartsWidget1: React.FC = ({className}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ }, [chartRef, mode])
+
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const height = parseInt(getCSS(chartRef.current, 'height'))
+
+ const chart = new ApexCharts(chartRef.current, getChartOptions(height))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ return (
+
+ {/* begin::Header */}
+
+ {/* begin::Title */}
+
+ Recent Statistics
+
+ More than 400 new members
+
+ {/* end::Title */}
+
+ {/* begin::Toolbar */}
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ChartsWidget1}
+
+function getChartOptions(height: number): ApexOptions {
+ const labelColor = getCSSVariableValue('--kt-gray-500')
+ const borderColor = getCSSVariableValue('--kt-gray-200')
+ const baseColor = getCSSVariableValue('--kt-primary')
+ const secondaryColor = getCSSVariableValue('--kt-gray-300')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [44, 55, 57, 56, 61, 58],
+ },
+ {
+ name: 'Revenue',
+ data: [76, 85, 101, 98, 87, 105],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'bar',
+ height: height,
+ toolbar: {
+ show: false,
+ },
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '30%',
+ borderRadius: 5,
+ },
+ },
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ['transparent'],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ fill: {
+ opacity: 1,
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [baseColor, secondaryColor],
+ grid: {
+ borderColor: borderColor,
+ strokeDashArray: 4,
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ },
+ }
+}
diff --git a/src/_metronic/partials/widgets/charts/ChartsWidget2.tsx b/src/_metronic/partials/widgets/charts/ChartsWidget2.tsx
new file mode 100644
index 0000000..8c13c61
--- /dev/null
+++ b/src/_metronic/partials/widgets/charts/ChartsWidget2.tsx
@@ -0,0 +1,200 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+}
+
+const ChartsWidget2: React.FC = ({className}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const height = parseInt(getCSS(chartRef.current, 'height'))
+
+ const chart = new ApexCharts(chartRef.current, getChartOptions(height))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Header */}
+
+
+ Recent Orders
+
+ More than 500 new orders
+
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ChartsWidget2}
+
+function getChartOptions(height: number): ApexOptions {
+ const labelColor = getCSSVariableValue('--kt-gray-500')
+ const borderColor = getCSSVariableValue('--kt-gray-200')
+ const baseColor = getCSSVariableValue('--kt-warning')
+ const secondaryColor = getCSSVariableValue('--kt-gray-300')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [44, 55, 57, 56, 61, 58],
+ },
+ {
+ name: 'Revenue',
+ data: [76, 85, 101, 98, 87, 105],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'bar',
+ height: height,
+ toolbar: {
+ show: false,
+ },
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '30%',
+ borderRadius: 5,
+ },
+ },
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ['transparent'],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ fill: {
+ opacity: 1,
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [baseColor, secondaryColor],
+ grid: {
+ borderColor: borderColor,
+ strokeDashArray: 4,
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ },
+ }
+}
diff --git a/src/_metronic/partials/widgets/charts/ChartsWidget3.tsx b/src/_metronic/partials/widgets/charts/ChartsWidget3.tsx
new file mode 100644
index 0000000..2363651
--- /dev/null
+++ b/src/_metronic/partials/widgets/charts/ChartsWidget3.tsx
@@ -0,0 +1,212 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+}
+
+const ChartsWidget3: React.FC = ({className}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshMode = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const height = parseInt(getCSS(chartRef.current, 'height'))
+
+ const chart = new ApexCharts(chartRef.current, getChartOptions(height))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshMode()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Header */}
+
+
+ Recent Transactions
+
+ More than 1000 new records
+
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ChartsWidget3}
+
+function getChartOptions(height: number): ApexOptions {
+ const labelColor = getCSSVariableValue('--kt-gray-500')
+ const borderColor = getCSSVariableValue('--kt-gray-200')
+ const baseColor = getCSSVariableValue('--kt-info')
+ const lightColor = getCSSVariableValue('--kt-info-light')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [30, 40, 40, 90, 90, 70, 70],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: 350,
+ toolbar: {
+ show: false,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'solid',
+ opacity: 1,
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 3,
+ colors: [baseColor],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ position: 'front',
+ stroke: {
+ color: baseColor,
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ tooltip: {
+ enabled: true,
+ formatter: undefined,
+ offsetY: 0,
+ style: {
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [lightColor],
+ grid: {
+ borderColor: borderColor,
+ strokeDashArray: 4,
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ },
+ markers: {
+ strokeColors: baseColor,
+ strokeWidth: 3,
+ },
+ }
+}
diff --git a/src/_metronic/partials/widgets/charts/ChartsWidget4.tsx b/src/_metronic/partials/widgets/charts/ChartsWidget4.tsx
new file mode 100644
index 0000000..f8fa921
--- /dev/null
+++ b/src/_metronic/partials/widgets/charts/ChartsWidget4.tsx
@@ -0,0 +1,218 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+}
+
+const ChartsWidget4: React.FC = ({className}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const height = parseInt(getCSS(chartRef.current, 'height'))
+
+ const chart = new ApexCharts(chartRef.current, getChartOptions(height))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Header */}
+
+
+ Recent Customers
+
+ More than 500 new customers
+
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ChartsWidget4}
+
+function getChartOptions(height: number): ApexOptions {
+ const labelColor = getCSSVariableValue('--kt-gray-500')
+ const borderColor = getCSSVariableValue('--kt-gray-200')
+
+ const baseColor = getCSSVariableValue('--kt-success')
+ const baseLightColor = getCSSVariableValue('--kt-success-light')
+ const secondaryColor = getCSSVariableValue('--kt-warning')
+ const secondaryLightColor = getCSSVariableValue('--kt-warning-light')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [60, 50, 80, 40, 100, 60],
+ },
+ {
+ name: 'Revenue',
+ data: [70, 60, 110, 40, 50, 70],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: 350,
+ toolbar: {
+ show: false,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'solid',
+ opacity: 1,
+ },
+ stroke: {
+ curve: 'smooth',
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ position: 'front',
+ stroke: {
+ color: labelColor,
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ tooltip: {
+ enabled: true,
+ formatter: undefined,
+ offsetY: 0,
+ style: {
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [baseColor, secondaryColor],
+ grid: {
+ borderColor: borderColor,
+ strokeDashArray: 4,
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ },
+ markers: {
+ colors: [baseLightColor, secondaryLightColor],
+ strokeColors: [baseLightColor, secondaryLightColor],
+ strokeWidth: 3,
+ },
+ }
+}
diff --git a/src/_metronic/partials/widgets/charts/ChartsWidget5.tsx b/src/_metronic/partials/widgets/charts/ChartsWidget5.tsx
new file mode 100644
index 0000000..004e425
--- /dev/null
+++ b/src/_metronic/partials/widgets/charts/ChartsWidget5.tsx
@@ -0,0 +1,204 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+}
+
+const ChartsWidget5: React.FC = ({className}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const height = parseInt(getCSS(chartRef.current, 'height'))
+
+ const chart = new ApexCharts(chartRef.current, getChartOptions(height))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Header */}
+
+
+ Recent Customers
+
+ More than 500 new customers
+
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ChartsWidget5}
+
+function getChartOptions(height: number): ApexOptions {
+ const labelColor = getCSSVariableValue('--kt-gray-500')
+ const borderColor = getCSSVariableValue('--kt-gray-200')
+
+ const baseColor = getCSSVariableValue('--kt-primary')
+ const secondaryColor = getCSSVariableValue('--kt-info')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [40, 50, 65, 70, 50, 30],
+ },
+ {
+ name: 'Revenue',
+ data: [-30, -40, -55, -60, -40, -20],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'bar',
+ stacked: true,
+ height: 350,
+ toolbar: {
+ show: false,
+ },
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '12%',
+ borderRadius: 5,
+ },
+ },
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ['transparent'],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ min: -80,
+ max: 80,
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ fill: {
+ opacity: 1,
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [baseColor, secondaryColor],
+ grid: {
+ borderColor: borderColor,
+ strokeDashArray: 4,
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ },
+ }
+}
diff --git a/src/_metronic/partials/widgets/charts/ChartsWidget6.tsx b/src/_metronic/partials/widgets/charts/ChartsWidget6.tsx
new file mode 100644
index 0000000..97f7b55
--- /dev/null
+++ b/src/_metronic/partials/widgets/charts/ChartsWidget6.tsx
@@ -0,0 +1,210 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+}
+
+const ChartsWidget6: React.FC = ({className}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const height = parseInt(getCSS(chartRef.current, 'height'))
+
+ const chart = new ApexCharts(chartRef.current, getChartOptions(height))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Header */}
+
+
+ Recent Orders
+
+ More than 500+ new orders
+
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ChartsWidget6}
+
+function getChartOptions(height: number): ApexOptions {
+ const labelColor = getCSSVariableValue('--kt-gray-500')
+ const borderColor = getCSSVariableValue('--kt-gray-200')
+
+ const baseColor = getCSSVariableValue('--kt-primary')
+ const baseLightColor = getCSSVariableValue('--kt-primary-light')
+ const secondaryColor = getCSSVariableValue('--kt-info')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ type: 'bar',
+ data: [40, 50, 65, 70, 50, 30],
+ },
+ {
+ name: 'Revenue',
+ type: 'bar',
+ data: [20, 20, 25, 30, 30, 20],
+ },
+ {
+ name: 'Expenses',
+ type: 'area',
+ data: [50, 80, 60, 90, 50, 70],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ stacked: true,
+ height: 350,
+ toolbar: {
+ show: false,
+ },
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ borderRadius: 5,
+ columnWidth: '12%',
+ },
+ },
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 2,
+ colors: ['transparent'],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ max: 120,
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ fill: {
+ opacity: 1,
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [baseColor, secondaryColor, baseLightColor],
+ grid: {
+ borderColor: borderColor,
+ strokeDashArray: 4,
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ padding: {
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ },
+ },
+ }
+}
diff --git a/src/_metronic/partials/widgets/charts/ChartsWidget7.tsx b/src/_metronic/partials/widgets/charts/ChartsWidget7.tsx
new file mode 100644
index 0000000..e02b34d
--- /dev/null
+++ b/src/_metronic/partials/widgets/charts/ChartsWidget7.tsx
@@ -0,0 +1,242 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+}
+
+const ChartsWidget7: React.FC = ({className}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const height = parseInt(getCSS(chartRef.current, 'height'))
+
+ const chart = new ApexCharts(chartRef.current, getChartOptions(height))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Header */}
+
+
+ Recent Users
+
+ More than 500 new users
+
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ChartsWidget7}
+
+function getChartOptions(height: number): ApexOptions {
+ const labelColor = getCSSVariableValue('--kt-gray-500')
+ const borderColor = getCSSVariableValue('--kt-gray-200')
+ const strokeColor = getCSSVariableValue('--kt-gray-300')
+
+ const color1 = getCSSVariableValue('--kt-warning')
+ const color1Light = getCSSVariableValue('--kt-warning-light')
+
+ const color2 = getCSSVariableValue('--kt-success')
+ const color2Light = getCSSVariableValue('--kt-success-light')
+
+ const color3 = getCSSVariableValue('--kt-primary')
+ const color3Light = getCSSVariableValue('--kt-primary-light')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [30, 30, 50, 50, 35, 35],
+ },
+ {
+ name: 'Revenue',
+ data: [55, 20, 20, 20, 70, 70],
+ },
+ {
+ name: 'Expenses',
+ data: [60, 60, 40, 40, 30, 30],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: height,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'solid',
+ opacity: 1,
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 2,
+ colors: [color1, 'transparent', 'transparent'],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ show: false,
+ position: 'front',
+ stroke: {
+ color: strokeColor,
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ tooltip: {
+ enabled: true,
+ formatter: undefined,
+ offsetY: 0,
+ style: {
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [color1, color2, color3],
+ grid: {
+ borderColor: borderColor,
+ strokeDashArray: 4,
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ },
+ markers: {
+ colors: [color1Light, color2Light, color3Light],
+ strokeColors: [color1, color2, color3],
+ strokeWidth: 3,
+ },
+ }
+}
diff --git a/src/_metronic/partials/widgets/charts/ChartsWidget8.tsx b/src/_metronic/partials/widgets/charts/ChartsWidget8.tsx
new file mode 100644
index 0000000..e029dc5
--- /dev/null
+++ b/src/_metronic/partials/widgets/charts/ChartsWidget8.tsx
@@ -0,0 +1,246 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+}
+
+const ChartsWidget8: React.FC = ({className}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const height = parseInt(getCSS(chartRef.current, 'height'))
+
+ const chart = new ApexCharts(chartRef.current, getChartOptions(height))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Header */}
+
+
+ Recent Orders
+
+ More than 500 new orders
+
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ChartsWidget8}
+
+function getChartOptions(height: number): ApexOptions {
+ const labelColor = getCSSVariableValue('--kt-gray-500')
+ const borderColor = getCSSVariableValue('--kt-gray-200')
+ const strokeColor = getCSSVariableValue('--kt-gray-300')
+
+ const color1 = getCSSVariableValue('--kt-warning')
+ const color1Light = getCSSVariableValue('--kt-warning-light')
+
+ const color2 = getCSSVariableValue('--kt-success')
+ const color2Light = getCSSVariableValue('--kt-success-light')
+
+ const color3 = getCSSVariableValue('--kt-primary')
+ const color3Light = getCSSVariableValue('--kt-primary-light')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [30, 30, 50, 50, 35, 35],
+ },
+ {
+ name: 'Revenue',
+ data: [55, 20, 20, 20, 70, 70],
+ },
+ {
+ name: 'Expenses',
+ data: [60, 60, 40, 40, 30, 30],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: height,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'solid',
+ opacity: 1,
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 2,
+ colors: [color1, color2, color3],
+ },
+ xaxis: {
+ offsetX: 0,
+ offsetY: 0,
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ show: false,
+ position: 'front',
+ stroke: {
+ color: strokeColor,
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ tooltip: {
+ enabled: true,
+ formatter: undefined,
+ offsetY: 0,
+ style: {
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [color1Light, color2Light, color3Light],
+ grid: {
+ borderColor: borderColor,
+ strokeDashArray: 4,
+ padding: {
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ },
+ },
+ markers: {
+ colors: [color1, color2, color3],
+ strokeColors: [color1, color2, color3],
+ strokeWidth: 3,
+ },
+ }
+}
diff --git a/src/_metronic/partials/widgets/engage/EngageWidget1.tsx b/src/_metronic/partials/widgets/engage/EngageWidget1.tsx
new file mode 100644
index 0000000..bc47d38
--- /dev/null
+++ b/src/_metronic/partials/widgets/engage/EngageWidget1.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+// import { toAbsoluteUrl } from "../../../helpers";
+// import { KTSVG } from "../../../helpers";
+
+type Props = {
+ className: string
+ bgColor?: string
+ bgImage?: string
+ innerPadding?: string
+ bgHex?: string
+ lg?: string
+}
+
+const EngageWidget1: React.FC = ({
+ className,
+ innerPadding = '',
+ bgHex = '',
+ bgColor = '',
+ lg = '',
+ bgImage = '',
+}) => {
+ let bgImagePath = bgImage ? toAbsoluteUrl(`/media/${bgImage}`) : ''
+ if (bgImagePath) {
+ bgImagePath = `url("${bgImagePath}")`
+ }
+
+ return (
+
+
+
+
Search Goods
+
Get Amazing Gadgets
+
+
+
+
+
+ )
+}
+
+export {EngageWidget1}
diff --git a/src/_metronic/partials/widgets/engage/EngageWidget2.tsx b/src/_metronic/partials/widgets/engage/EngageWidget2.tsx
new file mode 100644
index 0000000..e7a3257
--- /dev/null
+++ b/src/_metronic/partials/widgets/engage/EngageWidget2.tsx
@@ -0,0 +1,43 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+import React from 'react'
+
+type Props = {
+ className: string
+ imagePath?: string
+ innerPadding?: string
+ color?: string
+}
+
+const EngageWidget2: React.FC = ({
+ className,
+ imagePath = '',
+ innerPadding = '',
+ color = 'primary',
+}) => {
+ return (
+
+
+
+
+
Get Amazing Nike Sneakers
+
+ {imagePath && (
+
+ )}
+
+
+ )
+}
+
+export {EngageWidget2}
diff --git a/src/_metronic/partials/widgets/engage/EngageWidget3.tsx b/src/_metronic/partials/widgets/engage/EngageWidget3.tsx
new file mode 100644
index 0000000..874e7a2
--- /dev/null
+++ b/src/_metronic/partials/widgets/engage/EngageWidget3.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className: string
+ imagePath?: string
+ innerPadding?: string
+ color?: string
+}
+
+const EngageWidget3: React.FC = ({
+ className,
+ imagePath = '',
+ innerPadding = '',
+ color = 'primary',
+}) => {
+ return (
+
+ {/* begin::Card Body */}
+
+ {/*begin::Image*/}
+
+ {/*end::Image*/}
+
+ {/*begin::Card*/}
+
+ {/*begin::Card Body*/}
+
+
+
$ 399.99
+
+ Outlines keep you honest. They stop you from indulging in poorly ought out metaphorsy
+ about driving and keep you focused one the overall structure of your post
+
+ {/*begin::Info*/}
+
+
+
+ Shoes Brand
+ Nike
+
+
+ SKU
+ NF3535
+
+
+ Color
+ White
+
+
+ Collection
+ 2020 Spring
+
+
+ In Stock
+ 280
+
+
+
+ {/*end::Info*/}
+
+ {/*end::Card Body*/}
+
+ {/*end::Card*/}
+
+ {/*end::Card Body*/}
+
+ )
+}
+
+export {EngageWidget3}
diff --git a/src/_metronic/partials/widgets/feeds/FeedsWidget2.tsx b/src/_metronic/partials/widgets/feeds/FeedsWidget2.tsx
new file mode 100644
index 0000000..3e252fd
--- /dev/null
+++ b/src/_metronic/partials/widgets/feeds/FeedsWidget2.tsx
@@ -0,0 +1,117 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const FeedsWidget2: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Header */}
+
+ {/* begin::User */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+
+ {/* begin::Info */}
+
+ {/* end::Info */}
+
+ {/* end::User */}
+
+ {/* begin::Menu */}
+
+
+
+
+
+
+ {/* end::Menu */}
+
+ {/* end::Header */}
+
+ {/* begin::Post */}
+
+ {/* begin::Text */}
+
+ Outlines keep you honest. They stop you from indulging in poorly thought-out metaphors
+ about driving and keep you focused on the overall structure of your post
+
+ {/* end::Text */}
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Post */}
+
+ {/* begin::Separator */}
+
+ {/* end::Separator */}
+
+ {/* begin::Reply input */}
+
+ {/* edit::Reply input */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {FeedsWidget2}
diff --git a/src/_metronic/partials/widgets/feeds/FeedsWidget3.tsx b/src/_metronic/partials/widgets/feeds/FeedsWidget3.tsx
new file mode 100644
index 0000000..9239b4a
--- /dev/null
+++ b/src/_metronic/partials/widgets/feeds/FeedsWidget3.tsx
@@ -0,0 +1,190 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown2} from '../../content/dropdown/Dropdown2'
+
+type Props = {
+ className: string
+}
+
+const FeedsWidget3: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Header */}
+
+ {/* begin::User */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+
+ {/* begin::Info */}
+
+ {/* end::Info */}
+
+ {/* end::User */}
+
+ {/* begin::Menu */}
+
+
+
+
+
+
+ {/* end::Menu */}
+
+ {/* end::Header */}
+
+ {/* begin::Post */}
+
+ {/* begin::Text */}
+
+ Outlines keep you honest. They stop you from indulging in poorly thought-out metaphors
+ about driving and keep you focused on the overall structure of your post
+
+ {/* end::Text */}
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Post */}
+
+ {/* begin::Replies */}
+
+ {/* begin::Reply */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+
+ {/* begin::Info */}
+
+ {/* begin::Info */}
+
+ {/* end::Info */}
+
+ {/* begin::Post */}
+
+ Long before you sit dow to put digital pen to paper you need to make sure you have
+ to sit down and write.
+
+ {/* end::Post */}
+
+ {/* end::Info */}
+
+ {/* end::Reply */}
+
+ {/* begin::Reply */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+
+ {/* begin::Info */}
+
+ {/* begin::Info */}
+
+ {/* end::Info */}
+
+ {/* begin::Post */}
+
+ Outlines keep you honest. They stop you from indulging in poorly
+
+ {/* end::Post */}
+
+ {/* end::Info */}
+
+ {/* end::Reply */}
+
+ {/* end::Replies */}
+
+ {/* begin::Separator */}
+
+ {/* end::Separator */}
+
+ {/* begin::Reply input */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* edit::Reply input */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {FeedsWidget3}
diff --git a/src/_metronic/partials/widgets/feeds/FeedsWidget4.tsx b/src/_metronic/partials/widgets/feeds/FeedsWidget4.tsx
new file mode 100644
index 0000000..31cb91f
--- /dev/null
+++ b/src/_metronic/partials/widgets/feeds/FeedsWidget4.tsx
@@ -0,0 +1,116 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const FeedsWidget4: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Header */}
+
+ {/* begin::User */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+
+ {/* begin::Info */}
+
+ {/* end::Info */}
+
+ {/* end::User */}
+
+ {/* begin::Menu */}
+
+
+
+
+
+
+ {/* end::Menu */}
+
+ {/* end::Header */}
+
+ {/* begin::Post */}
+
+ {/* begin::Text */}
+
+ Outlines keep you honest. They stop you from indulging in poorly thought-out metaphors
+ about driving and keep you focused on the overall structure of your post
+
+ {/* end::Text */}
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Post */}
+
+ {/* begin::Separator */}
+
+ {/* end::Separator */}
+
+ {/* begin::Reply input */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* edit::Reply input */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {FeedsWidget4}
diff --git a/src/_metronic/partials/widgets/feeds/FeedsWidget5.tsx b/src/_metronic/partials/widgets/feeds/FeedsWidget5.tsx
new file mode 100644
index 0000000..e9d6274
--- /dev/null
+++ b/src/_metronic/partials/widgets/feeds/FeedsWidget5.tsx
@@ -0,0 +1,126 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const FeedsWidget5: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Header */}
+
+ {/* begin::User */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+
+ {/* begin::Info */}
+
+ {/* end::Info */}
+
+ {/* end::User */}
+
+ {/* begin::Menu */}
+
+
+
+
+
+
+ {/* end::Menu */}
+
+ {/* end::Header */}
+
+ {/* begin::Post */}
+
+ {/* begin::Image */}
+
+ {/* end::Image */}
+
+ {/* begin::Text */}
+
+ Outlines keep you honest. They stop you from indulging in poorly thought-out metaphors
+ about driving and keep you focused on the overall structure of your post
+
+ {/* end::Text */}
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Post */}
+
+ {/* begin::Separator */}
+
+ {/* end::Separator */}
+
+ {/* begin::Reply input */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* edit::Reply input */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {FeedsWidget5}
diff --git a/src/_metronic/partials/widgets/feeds/FeedsWidget6.tsx b/src/_metronic/partials/widgets/feeds/FeedsWidget6.tsx
new file mode 100644
index 0000000..3f3b80a
--- /dev/null
+++ b/src/_metronic/partials/widgets/feeds/FeedsWidget6.tsx
@@ -0,0 +1,127 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const FeedsWidget6: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Header */}
+
+ {/* begin::User */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+
+ {/* begin::Info */}
+
+ {/* end::Info */}
+
+ {/* end::User */}
+
+ {/* begin::Menu */}
+
+
+
+
+
+
+ {/* end::Menu */}
+
+ {/* end::Header */}
+
+ {/* begin::Post */}
+
+ {/* begin::Text */}
+
+ Outlines keep you honest. They stop you from indulging in poorly thought-out metaphors
+
+ {/* end::Text */}
+
+ {/* begin::Video */}
+
+ VIDEO
+
+ {/* end::Video */}
+
+ {/* begin::Toolbar */}
+
+ {/* end::Toolbar */}
+
+ {/* end::Bottom */}
+
+ {/* begin::Separator */}
+
+ {/* end::Separator */}
+
+ {/* begin::Reply input */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* edit::Reply input */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {FeedsWidget6}
diff --git a/src/_metronic/partials/widgets/index.ts b/src/_metronic/partials/widgets/index.ts
new file mode 100644
index 0000000..7c47e9a
--- /dev/null
+++ b/src/_metronic/partials/widgets/index.ts
@@ -0,0 +1,92 @@
+// charts
+export * from './feeds/FeedsWidget2'
+export * from './feeds/FeedsWidget3'
+export * from './feeds/FeedsWidget4'
+export * from './feeds/FeedsWidget5'
+export * from './feeds/FeedsWidget6'
+
+// mixed
+export * from './mixed/MixedWidget1'
+export * from './mixed/MixedWidget2'
+export * from './mixed/MixedWidget3'
+export * from './mixed/MixedWidget4'
+export * from './mixed/MixedWidget5'
+export * from './mixed/MixedWidget6'
+export * from './mixed/MixedWidget7'
+export * from './mixed/MixedWidget8'
+export * from './mixed/MixedWidget9'
+export * from './mixed/MixedWidget10'
+export * from './mixed/MixedWidget11'
+export * from './mixed/MixedWidget13'
+export * from './mixed/MixedWidget14'
+export * from './mixed/MixedWidget15'
+
+// lists
+export * from './lists/ListsWidget1'
+export * from './lists/ListsWidget2'
+export * from './lists/ListsWidget3'
+export * from './lists/ListsWidget4'
+export * from './lists/ListsWidget5'
+export * from './lists/ListsWidget6'
+export * from './lists/ListsWidget7'
+export * from './lists/ListsWidget8'
+export * from './lists/ListsWidget9'
+
+// statistics
+export * from './statistics/StatisticsWidget1'
+export * from './statistics/StatisticsWidget2'
+export * from './statistics/StatisticsWidget3'
+export * from './statistics/StatisticsWidget4'
+export * from './statistics/StatisticsWidget5'
+export * from './statistics/StatisticsWidget6'
+
+// charts
+export * from './charts/ChartsWidget1'
+export * from './charts/ChartsWidget2'
+export * from './charts/ChartsWidget3'
+export * from './charts/ChartsWidget4'
+export * from './charts/ChartsWidget5'
+export * from './charts/ChartsWidget6'
+export * from './charts/ChartsWidget7'
+export * from './charts/ChartsWidget8'
+
+// tables
+export * from './tables/TablesWidget1'
+export * from './tables/TablesWidget2'
+export * from './tables/TablesWidget3'
+export * from './tables/TablesWidget4'
+export * from './tables/TablesWidget5'
+export * from './tables/TablesWidget6'
+export * from './tables/TablesWidget7'
+export * from './tables/TablesWidget8'
+export * from './tables/TablesWidget9'
+export * from './tables/TablesWidget10'
+export * from './tables/TablesWidget11'
+export * from './tables/TablesWidget12'
+export * from './tables/TablesWidget13'
+
+// engage
+export * from './engage/EngageWidget1'
+export * from './engage/EngageWidget2'
+export * from './engage/EngageWidget3'
+
+// feeds
+export * from './feeds/FeedsWidget2'
+export * from './feeds/FeedsWidget3'
+export * from './feeds/FeedsWidget4'
+
+// tiles
+export * from './tiles/TilesWidget1'
+export * from './tiles/TilesWidget2'
+export * from './tiles/TilesWidget3'
+export * from './tiles/TilesWidget4'
+export * from './tiles/TilesWidget5'
+
+// new
+export * from './_new/cards/CardsWidget7'
+export * from './_new/cards/CardsWidget17'
+export * from './_new/cards/CardsWidget20'
+
+export * from './_new/lists/ListsWidget26'
+
+export * from './_new/engage/EngageWidget10'
diff --git a/src/_metronic/partials/widgets/lists/ListsWidget1.tsx b/src/_metronic/partials/widgets/lists/ListsWidget1.tsx
new file mode 100644
index 0000000..5d02e00
--- /dev/null
+++ b/src/_metronic/partials/widgets/lists/ListsWidget1.tsx
@@ -0,0 +1,155 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const ListsWidget1: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Tasks Overview
+ Pending 10 tasks
+
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Text */}
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Text */}
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Text */}
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Text */}
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Text */}
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ListsWidget1}
diff --git a/src/_metronic/partials/widgets/lists/ListsWidget2.tsx b/src/_metronic/partials/widgets/lists/ListsWidget2.tsx
new file mode 100644
index 0000000..6c95252
--- /dev/null
+++ b/src/_metronic/partials/widgets/lists/ListsWidget2.tsx
@@ -0,0 +1,125 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const ListsWidget2: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
Authors
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Item */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+ {/* begin::Text */}
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+ {/* begin::Text */}
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+ {/* begin::Text */}
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+ {/* begin::Text */}
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Avatar */}
+
+
+
+ {/* end::Avatar */}
+ {/* begin::Text */}
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ListsWidget2}
diff --git a/src/_metronic/partials/widgets/lists/ListsWidget3.tsx b/src/_metronic/partials/widgets/lists/ListsWidget3.tsx
new file mode 100644
index 0000000..89c8934
--- /dev/null
+++ b/src/_metronic/partials/widgets/lists/ListsWidget3.tsx
@@ -0,0 +1,166 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const ListsWidget3: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
Todo
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Item */}
+
+ {/* begin::Bullet */}
+
+ {/* end::Bullet */}
+ {/* begin::Checkbox */}
+
+
+
+ {/* end::Checkbox */}
+ {/* begin::Description */}
+
+ {/* end::Description */}
+
New
+
+ {/* end:Item */}
+ {/* begin::Item */}
+
+ {/* begin::Bullet */}
+
+ {/* end::Bullet */}
+ {/* begin::Checkbox */}
+
+
+
+ {/* end::Checkbox */}
+ {/* begin::Description */}
+
+ {/* end::Description */}
+
New
+
+ {/* end:Item */}
+ {/* begin::Item */}
+
+ {/* begin::Bullet */}
+
+ {/* end::Bullet */}
+ {/* begin::Checkbox */}
+
+
+
+ {/* end::Checkbox */}
+ {/* begin::Description */}
+
+ {/* end::Description */}
+
New
+
+ {/* end:Item */}
+ {/* begin::Item */}
+
+ {/* begin::Bullet */}
+
+ {/* end::Bullet */}
+ {/* begin::Checkbox */}
+
+
+
+ {/* end::Checkbox */}
+ {/* begin::Description */}
+
+ {/* end::Description */}
+
New
+
+ {/* end:Item */}
+ {/* begin::Item */}
+
+ {/* begin::Bullet */}
+
+ {/* end::Bullet */}
+ {/* begin::Checkbox */}
+
+
+
+ {/* end::Checkbox */}
+ {/* begin::Description */}
+
+ {/* end::Description */}
+
New
+
+ {/* end:Item */}
+ {/* begin::Item */}
+
+ {/* begin::Bullet */}
+
+ {/* end::Bullet */}
+ {/* begin::Checkbox */}
+
+
+
+ {/* end::Checkbox */}
+ {/* begin::Description */}
+
+ {/* end::Description */}
+
New
+
+ {/* end:Item */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ListsWidget3}
diff --git a/src/_metronic/partials/widgets/lists/ListsWidget4.tsx b/src/_metronic/partials/widgets/lists/ListsWidget4.tsx
new file mode 100644
index 0000000..bc0cc56
--- /dev/null
+++ b/src/_metronic/partials/widgets/lists/ListsWidget4.tsx
@@ -0,0 +1,202 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+ items?: number
+}
+
+const ListsWidget4: React.FC = ({className, items = 6}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Trends
+ Latest tech trends
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Section */}
+
+ {/* end::Section */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Section */}
+
+ {/* end::Section */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Section */}
+
+ {/* end::Section */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Section */}
+
+ {/* end::Section */}
+
+ {/* end::Item */}
+
+ {items > 4 && (
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Section */}
+
+ {/* end::Section */}
+
+ )}
+
+ {items > 5 && (
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Section */}
+
+ {/* end::Section */}
+
+ )}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ListsWidget4}
diff --git a/src/_metronic/partials/widgets/lists/ListsWidget5.tsx b/src/_metronic/partials/widgets/lists/ListsWidget5.tsx
new file mode 100644
index 0000000..ccbf55d
--- /dev/null
+++ b/src/_metronic/partials/widgets/lists/ListsWidget5.tsx
@@ -0,0 +1,195 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const ListsWidget5: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Activities
+ 890,344 Sales
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Timeline */}
+
+ {/* begin::Item */}
+
+ {/* begin::Label */}
+
08:42
+ {/* end::Label */}
+ {/* begin::Badge */}
+
+
+
+ {/* end::Badge */}
+ {/* begin::Text */}
+
+ Outlines keep you honest. And keep structure
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Label */}
+
10:00
+ {/* end::Label */}
+ {/* begin::Badge */}
+
+
+
+ {/* end::Badge */}
+ {/* begin::Content */}
+
+ AEOL meeting
+
+ {/* end::Content */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Label */}
+
14:37
+ {/* end::Label */}
+ {/* begin::Badge */}
+
+
+
+ {/* end::Badge */}
+ {/* begin::Desc */}
+
+ {/* end::Desc */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Label */}
+
16:50
+ {/* end::Label */}
+ {/* begin::Badge */}
+
+
+
+ {/* end::Badge */}
+ {/* begin::Text */}
+
+ Indulging in poorly driving and keep structure keep great
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Label */}
+
21:03
+ {/* end::Label */}
+ {/* begin::Badge */}
+
+
+
+ {/* end::Badge */}
+ {/* begin::Desc */}
+
+ {/* end::Desc */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Label */}
+
16:50
+ {/* end::Label */}
+ {/* begin::Badge */}
+
+
+
+ {/* end::Badge */}
+ {/* begin::Text */}
+
+ Indulging in poorly driving and keep structure keep great
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Label */}
+
21:03
+ {/* end::Label */}
+ {/* begin::Badge */}
+
+
+
+ {/* end::Badge */}
+ {/* begin::Desc */}
+
+ {/* end::Desc */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Label */}
+
10:30
+ {/* end::Label */}
+ {/* begin::Badge */}
+
+
+
+ {/* end::Badge */}
+ {/* begin::Text */}
+
+ Finance KPI Mobile app launch preparion meeting
+
+ {/* end::Text */}
+
+ {/* end::Item */}
+
+ {/* end::Timeline */}
+
+ {/* end: Card Body */}
+
+ )
+}
+
+export {ListsWidget5}
diff --git a/src/_metronic/partials/widgets/lists/ListsWidget6.tsx b/src/_metronic/partials/widgets/lists/ListsWidget6.tsx
new file mode 100644
index 0000000..3a9840c
--- /dev/null
+++ b/src/_metronic/partials/widgets/lists/ListsWidget6.tsx
@@ -0,0 +1,120 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const ListsWidget6: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
Notifications
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Item */}
+
+ {/* begin::Icon */}
+
+
+
+ {/* end::Icon */}
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Lable */}
+
+28%
+ {/* end::Lable */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Icon */}
+
+
+
+ {/* end::Icon */}
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Lable */}
+
+50%
+ {/* end::Lable */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Icon */}
+
+
+
+ {/* end::Icon */}
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Lable */}
+
-27%
+ {/* end::Lable */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Icon */}
+
+
+
+ {/* end::Icon */}
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Lable */}
+
+8%
+ {/* end::Lable */}
+
+ {/* end::Item */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ListsWidget6}
diff --git a/src/_metronic/partials/widgets/lists/ListsWidget7.tsx b/src/_metronic/partials/widgets/lists/ListsWidget7.tsx
new file mode 100644
index 0000000..8692169
--- /dev/null
+++ b/src/_metronic/partials/widgets/lists/ListsWidget7.tsx
@@ -0,0 +1,135 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const ListsWidget7: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Latest Media
+ Articles and publications
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+ {/* begin::Title */}
+
+ {/* end::Title */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+ {/* begin::Title */}
+
+ {/* end::Title */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+ {/* begin::Title */}
+
+ {/* end::Title */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+ {/* begin::Title */}
+
+ {/* end::Title */}
+
+ {/* end::Item */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ListsWidget7}
diff --git a/src/_metronic/partials/widgets/lists/ListsWidget8.tsx b/src/_metronic/partials/widgets/lists/ListsWidget8.tsx
new file mode 100644
index 0000000..5713082
--- /dev/null
+++ b/src/_metronic/partials/widgets/lists/ListsWidget8.tsx
@@ -0,0 +1,197 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const ListsWidget8: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Latest Products
+ Gifts and more
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+ {/* begin::Content */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Section */}
+
+ {/* end::Section */}
+
+ {/* end::Content */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+ {/* begin::Content */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Section */}
+
+ {/* end::Section */}
+
+ {/* end::Content */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+ {/* begin::Content */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Section */}
+
+ {/* end::Section */}
+
+ {/* end::Content */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+ {/* begin::Content */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Section */}
+
+ {/* end::Section */}
+
+ {/* end::Content */}
+
+ {/* end::Item */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ListsWidget8}
diff --git a/src/_metronic/partials/widgets/lists/ListsWidget9.tsx b/src/_metronic/partials/widgets/lists/ListsWidget9.tsx
new file mode 100644
index 0000000..c3b5fa4
--- /dev/null
+++ b/src/_metronic/partials/widgets/lists/ListsWidget9.tsx
@@ -0,0 +1,209 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const ListsWidget9: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ My Competitors
+ More than 400+ new members
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/*begin::Item*/}
+
+ {/*begin::Symbol*/}
+
+
+
+ {/*end::Symbol*/}
+ {/*begin::Section*/}
+
+ {/*begin::Title*/}
+
+ {/*end::Title*/}
+ {/*begin::Info*/}
+
+ 24,900
+ Sales
+
+ {/*end::Info*/}
+
+ {/*end::Section*/}
+
+ {/*end::Item*/}
+ {/*begin::Item*/}
+
+ {/*begin::Symbol*/}
+
+
+
+ {/*end::Symbol*/}
+ {/*begin::Section*/}
+
+ {/*begin::Title*/}
+
+ {/*end::Title*/}
+ {/*begin::Info*/}
+
+ 70,380
+ Sales
+
+ {/*end::Info*/}
+
+ {/*end::Section*/}
+
+ {/*end::Item*/}
+ {/*begin::Item*/}
+
+ {/*begin::Symbol*/}
+
+
+
+ {/*end::Symbol*/}
+ {/*begin::Section*/}
+
+ {/*begin::Title*/}
+
+ {/*end::Title*/}
+ {/*begin::Info*/}
+
+ 7,200
+ Sales
+
+ {/*end::Info*/}
+
+ {/*end::Section*/}
+
+ {/*end::Item*/}
+ {/*begin::Item*/}
+
+ {/*begin::Symbol*/}
+
+
+
+ {/*end::Symbol*/}
+ {/*begin::Section*/}
+
+ {/*begin::Title*/}
+
+ {/*end::Title*/}
+ {/*begin::Info*/}
+
+ 36,450
+ Sales
+
+ {/*end::Info*/}
+
+ {/*end::Section*/}
+
+ {/*end::Item*/}
+ {/*begin::Item*/}
+
+ {/*begin::Symbol*/}
+
+
+
+ {/*end::Symbol*/}
+ {/*begin::Section*/}
+
+ {/*begin::Title*/}
+
+ {/*end::Title*/}
+ {/*begin::Info*/}
+
+ 64,753
+ Sales
+
+ {/*end::Info*/}
+
+ {/*end::Section*/}
+
+ {/*end::Item*/}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {ListsWidget9}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget1.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget1.tsx
new file mode 100644
index 0000000..704e067
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget1.tsx
@@ -0,0 +1,186 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+import {KTSVG} from '../../../helpers'
+
+type Props = {
+ className: string
+ color: string
+}
+
+const MixedWidget1: React.FC = ({className, color}) => {
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Header */}
+
+ {/* begin::Heading */}
+
+
Sales Summary
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Heading */}
+ {/* begin::Balance */}
+
+ You Balance
+ $37,562.00
+
+ {/* end::Balance */}
+
+ {/* end::Header */}
+ {/* begin::Items */}
+
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Description */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Label */}
+
+ {/* end::Label */}
+
+ {/* end::Description */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Description */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Label */}
+
+ {/* end::Label */}
+
+ {/* end::Description */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Description */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Label */}
+
+ {/* end::Label */}
+
+ {/* end::Description */}
+
+ {/* end::Item */}
+ {/* begin::Item */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+ {/* begin::Description */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+ {/* begin::Label */}
+
+ {/* end::Label */}
+
+ {/* end::Description */}
+
+ {/* end::Item */}
+
+ {/* end::Items */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {MixedWidget1}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget10.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget10.tsx
new file mode 100644
index 0000000..8b9ed92
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget10.tsx
@@ -0,0 +1,192 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ chartColor: string
+ chartHeight: string
+}
+
+const MixedWidget10: React.FC = ({className, chartColor, chartHeight}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Stats */}
+
+ {/* end::Stats */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* end::Body */}
+
+ )
+}
+
+const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
+ const labelColor = getCSSVariableValue('--kt-gray-800')
+ const strokeColor = getCSSVariableValue('--kt-gray-300')
+ const baseColor = getCSSVariableValue('--kt-' + chartColor)
+ const lightColor = getCSSVariableValue('--kt-' + chartColor + '-light')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [15, 25, 15, 40, 20, 50],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: chartHeight,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'solid',
+ opacity: 1,
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 3,
+ colors: [baseColor],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ show: false,
+ position: 'front',
+ stroke: {
+ color: strokeColor,
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ tooltip: {
+ enabled: false,
+ },
+ },
+ yaxis: {
+ min: 0,
+ max: 60,
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [lightColor],
+ markers: {
+ colors: [lightColor],
+ strokeColors: [baseColor],
+ strokeWidth: 3,
+ },
+ }
+}
+
+export {MixedWidget10}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget11.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget11.tsx
new file mode 100644
index 0000000..f99a31b
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget11.tsx
@@ -0,0 +1,180 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ chartColor: string
+ chartHeight: string
+}
+
+const MixedWidget11: React.FC = ({className, chartColor, chartHeight}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Hidden */}
+
+
+ Sales
+
+ Oct 8 - Oct 26 2021
+
+
+
$15,300
+
+ {/* end::Hidden */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+
+ )
+}
+
+const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
+ const labelColor = getCSSVariableValue('--kt-gray-500')
+ const borderColor = getCSSVariableValue('--kt-gray-200')
+ const secondaryColor = getCSSVariableValue('--kt-gray-300')
+ const baseColor = getCSSVariableValue('--kt-' + chartColor)
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [50, 60, 70, 80, 60, 50, 70, 60],
+ },
+ {
+ name: 'Revenue',
+ data: [50, 60, 70, 80, 60, 50, 70, 60],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'bar',
+ height: chartHeight,
+ toolbar: {
+ show: false,
+ },
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '50%',
+ borderRadius: 5,
+ },
+ },
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ['transparent'],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ fill: {
+ type: 'solid',
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' revenue'
+ },
+ },
+ },
+ colors: [baseColor, secondaryColor],
+ grid: {
+ padding: {
+ top: 10,
+ },
+ borderColor: borderColor,
+ strokeDashArray: 4,
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ },
+ }
+}
+
+export {MixedWidget11}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget13.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget13.tsx
new file mode 100644
index 0000000..0e44fed
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget13.tsx
@@ -0,0 +1,221 @@
+// @ts-nocheck
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ chartHeight: string
+ backGroundColor: string
+}
+
+const MixedWidget13: React.FC = ({className, backGroundColor, chartHeight}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, mode])
+
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart;
+ }
+
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Wrapper */}
+
+ {/* begin::Title */}
+
+ Earnings
+
+ {/* end::Title */}
+
+
+
+ {/* end::Wrapper */}
+
+ {/* begin::Stats */}
+
+ {/* begin::Symbol */}
+ $
+ {/* end::Symbol */}
+
+ {/* begin::Number */}
+ 560
+ {/* end::Number */}
+
+ {/* begin::Text */}
+ + 28% this week
+ {/* end::Text */}
+
+ {/* end::Stats */}
+
+
+ )
+}
+
+const chartOptions = (chartHeight: string): ApexOptions => {
+ const labelColor = getCSSVariableValue('--kt-gray-800')
+ const strokeColor = getCSSVariableValue('--kt-gray-300') as string
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [15, 25, 15, 40, 20, 50],
+ },
+ ],
+ grid: {
+ show: false,
+ padding: {
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ },
+ },
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: chartHeight,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'gradient',
+ gradient: {
+ opacityFrom: 0.4,
+ opacityTo: 0,
+ stops: [20, 120, 120, 120],
+ },
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 3,
+ colors: ['#FFFFFF'],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ show: false,
+ position: 'front',
+ stroke: {
+ color: strokeColor,
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ tooltip: {
+ enabled: true,
+ formatter: undefined,
+ offsetY: 0,
+ style: {
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ min: 0,
+ max: 60,
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: ['#ffffff'],
+ markers: {
+ colors: [labelColor],
+ strokeColor: [strokeColor],
+ strokeWidth: 3,
+ },
+ }
+}
+
+export {MixedWidget13}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget14.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget14.tsx
new file mode 100644
index 0000000..456ed89
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget14.tsx
@@ -0,0 +1,185 @@
+// @ts-nocheck
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ chartHeight: string
+ backGroundColor: string
+}
+
+const MixedWidget14: React.FC = ({className, backGroundColor, chartHeight = '150px'}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Wrapper */}
+
+ {/* end::Wrapper */}
+
+ {/* begin::Stats */}
+
+ {/* begin::Symbol */}
+ $
+ {/* end::Symbol */}
+
+ {/* begin::Number */}
+ 47
+ {/* end::Number */}
+
+ {/* begin::Text */}
+ - 12% this week
+ {/* end::Text */}
+
+ {/* end::Stats */}
+
+
+ )
+}
+
+const chartOptions = (chartHeight: string): ApexOptions => {
+ const labelColor = getCSSVariableValue('--kt-gray-800')
+
+ return {
+ series: [
+ {
+ name: 'Inflation',
+ data: [1, 2.1, 1, 2.1, 4.1, 6.1, 4.1, 4.1, 2.1, 4.1, 2.1, 3.1, 1, 1, 2.1],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ height: chartHeight,
+ type: 'bar',
+ toolbar: {
+ show: false,
+ },
+ },
+ grid: {
+ show: false,
+ padding: {
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ },
+ },
+ colors: ['#ffffff'],
+ plotOptions: {
+ bar: {
+ borderRadius: 2.5,
+ dataLabels: {
+ position: 'top', // top, center, bottom
+ },
+ columnWidth: '20%',
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ formatter: function (val) {
+ return val + '%'
+ },
+ offsetY: -20,
+ style: {
+ fontSize: '12px',
+ colors: ['#304758'],
+ },
+ },
+ xaxis: {
+ labels: {
+ show: false,
+ },
+ categories: [
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ 'Apr',
+ 'May',
+ 'Jun',
+ 'Jul',
+ 'Aug',
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec',
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ ],
+ position: 'top',
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ crosshairs: {
+ show: false,
+ },
+ tooltip: {
+ enabled: false,
+ },
+ },
+ yaxis: {
+ show: false,
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ background: labelColor,
+ },
+ labels: {
+ show: false,
+ formatter: function (val) {
+ return val + '%'
+ },
+ },
+ },
+ }
+}
+
+export {MixedWidget14}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget15.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget15.tsx
new file mode 100644
index 0000000..45aa26b
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget15.tsx
@@ -0,0 +1,126 @@
+// @ts-nocheck
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {FC} from 'react'
+import {KTSVG} from '../../../helpers'
+
+type Props = {
+ className: string
+ backGroundColor: string
+}
+
+const MixedWidget15: FC = ({className, backGroundColor}) => (
+
+ {/* begin::Body */}
+
+ {/* begin::Wrapper */}
+
+ {/* begin::Title */}
+
+ Summary
+
+ {/* end::Title */}
+
+ {/* end::Wrapper */}
+
+
+ {/*begin::Col*/}
+
+
+ {/*begin::Symbol*/}
+
+ {/*end::Symbol*/}
+
+ {/*begin::Title*/}
+
+ {/*end::Title*/}
+
+
+ {/*end::Col*/}
+
+ {/*begin::Col*/}
+
+
+ {/*begin::Symbol*/}
+
+ {/*end::Symbol*/}
+
+ {/*begin::Title*/}
+
+ {/*end::Title*/}
+
+
+ {/*end::Col*/}
+
+ {/*begin::Col*/}
+
+
+ {/*begin::Symbol*/}
+
+ {/*end::Symbol*/}
+
+ {/*begin::Title*/}
+
+ {/*end::Title*/}
+
+
+ {/*end::Col*/}
+
+ {/*begin::Col*/}
+
+
+ {/*begin::Symbol*/}
+
+ {/*end::Symbol*/}
+
+ {/*begin::Title*/}
+
+ {/*end::Title*/}
+
+
+ {/*end::Col*/}
+
+
+
+)
+
+export {MixedWidget15}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget2.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget2.tsx
new file mode 100644
index 0000000..0837ef9
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget2.tsx
@@ -0,0 +1,271 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {KTSVG} from '../../../helpers'
+import {getCSSVariableValue} from '../../../assets/ts/_utils'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ chartColor: string
+ strokeColor: string
+ chartHeight: string
+}
+
+const MixedWidget2: React.FC = ({className, chartColor, chartHeight, strokeColor}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const chart = new ApexCharts(
+ chartRef.current,
+ chartOptions(chartHeight, chartColor, strokeColor)
+ )
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Header */}
+
+
Sales Statistics
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+ {/* begin::Stats */}
+
+ {/* begin::Row */}
+
+ {/* begin::Col */}
+
+ {/* end::Col */}
+ {/* begin::Col */}
+
+ {/* end::Col */}
+
+ {/* end::Row */}
+ {/* begin::Row */}
+
+ {/* begin::Col */}
+
+ {/* end::Col */}
+ {/* begin::Col */}
+
+ {/* end::Col */}
+
+ {/* end::Row */}
+
+ {/* end::Stats */}
+
+ {/* end::Body */}
+
+ )
+}
+
+const chartOptions = (
+ chartHeight: string,
+ chartColor: string,
+ strokeColor: string
+): ApexOptions => {
+ const labelColor = getCSSVariableValue('--kt-gray-500')
+ const borderColor = getCSSVariableValue('--kt-gray-200')
+ const color = getCSSVariableValue('--kt-' + chartColor)
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [30, 45, 32, 70, 40, 40, 40],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: chartHeight,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ dropShadow: {
+ enabled: true,
+ enabledOnSeries: undefined,
+ top: 5,
+ left: 0,
+ blur: 3,
+ color: strokeColor,
+ opacity: 0.5,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'solid',
+ opacity: 0,
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 3,
+ colors: [strokeColor],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ show: false,
+ position: 'front',
+ stroke: {
+ color: borderColor,
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ },
+ yaxis: {
+ min: 0,
+ max: 80,
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ marker: {
+ show: false,
+ },
+ },
+ colors: ['transparent'],
+ markers: {
+ colors: [color],
+ strokeColors: [strokeColor],
+ strokeWidth: 3,
+ },
+ }
+}
+
+export {MixedWidget2}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget3.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget3.tsx
new file mode 100644
index 0000000..b4f5336
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget3.tsx
@@ -0,0 +1,248 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {KTSVG} from '../../../helpers'
+import {getCSSVariableValue} from '../../../assets/ts/_utils'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+import clsx from 'clsx'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ chartColor: string
+ chartHeight: string
+}
+
+const MixedWidget3: React.FC = ({className, chartColor, chartHeight}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Header */}
+
+
Sales Progress
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* begin::Stats */}
+
+ {/* begin::Row */}
+
+ {/* begin::Col */}
+
+ {/* end::Col */}
+
+ {/* begin::Col */}
+
+ {/* end::Col */}
+
+ {/* end::Row */}
+
+ {/* begin::Row */}
+
+ {/* begin::Col */}
+
+ {/* end::Col */}
+
+ {/* begin::Col */}
+
+
Expenses
+
$1,130,600
+
+ {/* end::Col */}
+
+ {/* end::Row */}
+
+ {/* end::Stats */}
+
+ {/* end::Body */}
+
+ )
+}
+
+const chartOptions = (chartHeight: string): ApexOptions => {
+ const labelColor = getCSSVariableValue('--kt-gray-500')
+ const borderColor = getCSSVariableValue('--kt-gray-200')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [35, 65, 75, 55, 45, 60, 55],
+ },
+ {
+ name: 'Revenue',
+ data: [40, 70, 80, 60, 50, 65, 60],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'bar',
+ height: chartHeight,
+ toolbar: {
+ show: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '30%',
+ borderRadius: 5,
+ },
+ },
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ stroke: {
+ show: true,
+ width: 1,
+ colors: ['transparent'],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ min: 0,
+ max: 100,
+ labels: {
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ fill: {
+ type: ['solid', 'solid'],
+ opacity: [0.25, 1],
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ marker: {
+ show: false,
+ },
+ },
+ colors: ['#ffffff', '#ffffff'],
+ grid: {
+ borderColor: borderColor,
+ strokeDashArray: 4,
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ padding: {
+ left: 20,
+ right: 20,
+ },
+ },
+ }
+}
+
+export {MixedWidget3}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget4.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget4.tsx
new file mode 100644
index 0000000..8a80bec
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget4.tsx
@@ -0,0 +1,120 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+ color: string
+ image: string
+ title: string
+ date: string
+ progress: string
+}
+
+const MixedWidget4: React.FC = ({className, color, image, title, date, progress}) => {
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Heading */}
+
+ {/* begin:Info */}
+
+ {/* begin:Image */}
+
+
+
+
+
+ {/* end:Image */}
+
+ {/* begin:Title */}
+
+ {/* end:Title */}
+
+ {/* begin:Info */}
+
+ {/* begin:Menu */}
+
+
+
+
+
+
+ {/* end::Menu */}
+
+ {/* end::Heading */}
+
+ {/* begin:Stats */}
+
+ {/* end:Stats */}
+
+ {/* begin:Team */}
+
+ {/* end:Team */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {MixedWidget4}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget5.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget5.tsx
new file mode 100644
index 0000000..1b7a26d
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget5.tsx
@@ -0,0 +1,78 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className: string
+ time: string
+ image: string
+ title: string
+ description: string
+}
+
+const MixedWidget5: React.FC = ({className, time, image, title, description}) => {
+ return (
+
+ {/* begin::Body */}
+
+
+ {/* begin::Info */}
+
+
{time}
+
+
+
+
+
+
+
+ {/* end::Info */}
+
+ {/* begin::Link */}
+
+ {title}
+
+ {/* end::Link */}
+
+ {/* begin::Desc */}
+
+ {/* end::Desc */}
+
+
+ {/* begin::Team */}
+
+ {/* end::Team */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {MixedWidget5}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget6.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget6.tsx
new file mode 100644
index 0000000..8927be3
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget6.tsx
@@ -0,0 +1,275 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {KTSVG} from '../../../helpers'
+import {getCSSVariableValue} from '../../../assets/ts/_utils'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ chartHeight: string
+ chartColor: string
+}
+
+const MixedWidget6: React.FC = ({className, chartHeight, chartColor}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight, chartColor))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Beader */}
+
+
+ Sales Overview
+
+ Recent sales statistics
+
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Stats */}
+
+ {/* begin::Row */}
+
+ {/* begin::Col */}
+
+ {/* begin::Label */}
+
Average Sale
+ {/* end::Label */}
+
+ {/* begin::Stat */}
+
+ {/* end::Stat */}
+
+ {/* end::Col */}
+
+ {/* begin::Col */}
+
+ {/* begin::Label */}
+
Commission
+ {/* end::Label */}
+
+ {/* begin::Stat */}
+
$233,600
+ {/* end::Stat */}
+
+ {/* end::Col */}
+
+ {/* end::Row */}
+
+ {/* begin::Row */}
+
+ {/* begin::Col */}
+
+ {/* begin::Label */}
+
Annual Taxes 2019
+ {/* end::Label */}
+
+ {/* begin::Stat */}
+
$29,004
+ {/* end::Stat */}
+
+ {/* end::Col */}
+
+ {/* begin::Col */}
+
+ {/* begin::Label */}
+
Annual Income
+ {/* end::Label */}
+
+ {/* begin::Stat */}
+
+ {/* end::Stat */}
+
+ {/* end::Col */}
+
+ {/* end::Row */}
+
+ {/* end::Stats */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* end::Body */}
+
+ )
+}
+
+const chartOptions = (chartHeight: string, chartColor: string): ApexOptions => {
+ const labelColor = getCSSVariableValue('--kt-gray-800')
+ const strokeColor = getCSSVariableValue('--kt-gray-300')
+ const baseColor = getCSSVariableValue('--kt-' + chartColor)
+ const lightColor = getCSSVariableValue('--kt-' + chartColor + '-light')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [30, 25, 45, 30, 55, 55],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: chartHeight,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'solid',
+ opacity: 1,
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 3,
+ colors: [baseColor],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ show: false,
+ position: 'front',
+ stroke: {
+ color: strokeColor,
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ tooltip: {
+ enabled: false,
+ },
+ },
+ yaxis: {
+ min: 0,
+ max: 60,
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [lightColor],
+ markers: {
+ colors: [lightColor],
+ strokeColors: [baseColor],
+ strokeWidth: 3,
+ },
+ }
+}
+
+export {MixedWidget6}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget7.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget7.tsx
new file mode 100644
index 0000000..bebbd3b
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget7.tsx
@@ -0,0 +1,140 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {KTSVG} from '../../../helpers'
+import {getCSSVariableValue} from '../../../assets/ts/_utils'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ chartColor: string
+ chartHeight: string
+}
+
+const MixedWidget7: React.FC = ({className, chartColor, chartHeight}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Beader */}
+
+
+ Action Needed
+ Complete your profile setup
+
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+
+
+
+
+ Notes: Current sprint
+ requires stakeholders
+
+ to approve newly amended policies
+
+
+
+ Take Action
+
+
+
+ {/* end::Body */}
+
+ )
+}
+
+const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
+ const baseColor = getCSSVariableValue('--kt-' + chartColor)
+ const lightColor = getCSSVariableValue('--kt-' + chartColor + '-light')
+ const labelColor = getCSSVariableValue('--kt-gray-700')
+
+ return {
+ series: [74],
+ chart: {
+ fontFamily: 'inherit',
+ height: chartHeight,
+ type: 'radialBar',
+ },
+ plotOptions: {
+ radialBar: {
+ hollow: {
+ margin: 0,
+ size: '65%',
+ },
+ dataLabels: {
+ name: {
+ show: false,
+ fontWeight: '700',
+ },
+ value: {
+ color: labelColor,
+ fontSize: '30px',
+ fontWeight: '700',
+ offsetY: 12,
+ show: true,
+ formatter: function (val) {
+ return val + '%'
+ },
+ },
+ },
+ track: {
+ background: lightColor,
+ strokeWidth: '100%',
+ },
+ },
+ },
+ colors: [baseColor],
+ stroke: {
+ lineCap: 'round',
+ },
+ labels: ['Progress'],
+ }
+}
+
+export {MixedWidget7}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget8.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget8.tsx
new file mode 100644
index 0000000..19c88bd
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget8.tsx
@@ -0,0 +1,327 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {getCSSVariableValue} from '../../../assets/ts/_utils'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ chartColor: string
+ chartHeight: string
+}
+
+const MixedWidget8: React.FC = ({className, chartColor, chartHeight}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const chart1 = new ApexCharts(chartRef.current, chart1Options(chartColor, chartHeight))
+ if (chart1) {
+ chart1.render()
+ }
+
+ return chart1
+ }
+
+ useEffect(() => {
+ const chart1 = refreshChart()
+
+ return () => {
+ if (chart1) {
+ chart1.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Beader */}
+
+
+ Trends
+
+ Latest trends
+
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* begin::Items */}
+
+ {/* begin::Item */}
+
+ {/* begin::Section */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+
+ {/* end::Section */}
+
+ {/* begin::Label */}
+
+82$
+ {/* end::Label */}
+
+ {/* end::Item */}
+
+ {/* begin::Item */}
+
+ {/* begin::Section */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+
+ {/* end::Section */}
+
+ {/* begin::Label */}
+
+82$
+ {/* end::Label */}
+
+ {/* end::Item */}
+
+ {/* begin::Item */}
+
+ {/* begin::Section */}
+
+ {/* begin::Symbol */}
+
+
+
+
+
+ {/* end::Symbol */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+
+ {/* end::Section */}
+
+ {/* begin::Label */}
+
+82$
+ {/* end::Label */}
+
+ {/* end::Item */}
+
+ {/* end::Items */}
+
+ {/* end::Body */}
+
+ )
+}
+
+const chart1Options = (chartColor: string, chartHeight: string): ApexOptions => {
+ const labelColor = getCSSVariableValue('--kt-gray-800')
+ const strokeColor = getCSSVariableValue('--kt-gray-300')
+ const baseColor = getCSSVariableValue('--kt-' + chartColor) as string
+ const lightColor = getCSSVariableValue('--kt-' + chartColor + '-light')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [30, 30, 60, 25, 25, 40],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: chartHeight,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'solid',
+ opacity: 1,
+ },
+ fill1: {
+ type: 'gradient',
+ opacity: 1,
+ gradient: {
+ type: 'vertical',
+ shadeIntensity: 0.5,
+ gradientToColors: undefined,
+ inverseColors: true,
+ opacityFrom: 1,
+ opacityTo: 0.375,
+ stops: [25, 50, 100],
+ colorStops: [],
+ },
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 3,
+ colors: [baseColor],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ show: false,
+ position: 'front',
+ stroke: {
+ color: strokeColor,
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ tooltip: {
+ enabled: true,
+ formatter: undefined,
+ offsetY: 0,
+ style: {
+ fontSize: '12px',
+ },
+ },
+ },
+ yaxis: {
+ min: 0,
+ max: 65,
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [lightColor],
+ markers: {
+ colors: [lightColor],
+ // @ts-ignore
+ strokeColor: [baseColor],
+ strokeWidth: 3,
+ },
+ }
+}
+
+export {MixedWidget8}
diff --git a/src/_metronic/partials/widgets/mixed/MixedWidget9.tsx b/src/_metronic/partials/widgets/mixed/MixedWidget9.tsx
new file mode 100644
index 0000000..b970851
--- /dev/null
+++ b/src/_metronic/partials/widgets/mixed/MixedWidget9.tsx
@@ -0,0 +1,310 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {KTSVG} from '../../../helpers'
+import {getCSSVariableValue} from '../../../assets/ts/_utils'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ chartColor: string
+ chartHeight: string
+}
+
+const MixedWidget9: React.FC = ({className, chartColor, chartHeight}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Beader */}
+
+
+ Sales Statistics
+
+ Recent sales statistics
+
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+
+ {/* begin::Body */}
+
+ {/* begin::Stats */}
+
+ {/* begin::Row */}
+
+ {/* begin::Col */}
+
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+
+ {/* begin::Title */}
+
+
$2,034
+
Author Sales
+
+ {/* end::Title */}
+
+
+ {/* end::Col */}
+
+ {/* begin::Col */}
+
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+
+
+ {/* end::Col */}
+
+ {/* end::Row */}
+
+ {/* begin::Row */}
+
+ {/* begin::Col */}
+
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+
+ {/* begin::Title */}
+
+ {/* end::Title */}
+
+
+ {/* end::Col */}
+
+ {/* begin::Col */}
+
+
+ {/* begin::Symbol */}
+
+ {/* end::Symbol */}
+
+ {/* begin::Title */}
+
+
$5.8M
+
All Time Sales
+
+ {/* end::Title */}
+
+
+ {/* end::Col */}
+
+ {/* end::Row */}
+
+ {/* end::Stats */}
+
+ {/* begin::Chart */}
+
+ {/* end::Chart */}
+
+ {/* end::Body */}
+
+ )
+}
+
+const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
+ const labelColor = getCSSVariableValue('--kt-gray-800')
+ const strokeColor = getCSSVariableValue('--kt-gray-300')
+ const baseColor = getCSSVariableValue('--kt-' + chartColor)
+ const lightColor = getCSSVariableValue('--kt-' + chartColor + '-light')
+
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [30, 25, 45, 30, 55, 55],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: chartHeight,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'solid',
+ opacity: 1,
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 3,
+ colors: [baseColor],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ show: false,
+ position: 'front',
+ stroke: {
+ color: strokeColor,
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ tooltip: {
+ enabled: false,
+ },
+ },
+ yaxis: {
+ min: 0,
+ max: 60,
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [lightColor],
+ markers: {
+ colors: [lightColor],
+ strokeColors: [baseColor],
+ strokeWidth: 3,
+ },
+ }
+}
+
+export {MixedWidget9}
diff --git a/src/_metronic/partials/widgets/statistics/StatisticsWidget1.tsx b/src/_metronic/partials/widgets/statistics/StatisticsWidget1.tsx
new file mode 100644
index 0000000..5a6f89c
--- /dev/null
+++ b/src/_metronic/partials/widgets/statistics/StatisticsWidget1.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className: string
+ image: string
+ title: string
+ time: string
+ description: string
+}
+
+const StatisticsWidget1: React.FC = ({className, image, title, time, description}) => {
+ return (
+
+ {/* begin::Body */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {StatisticsWidget1}
diff --git a/src/_metronic/partials/widgets/statistics/StatisticsWidget2.tsx b/src/_metronic/partials/widgets/statistics/StatisticsWidget2.tsx
new file mode 100644
index 0000000..8f836a8
--- /dev/null
+++ b/src/_metronic/partials/widgets/statistics/StatisticsWidget2.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className: string
+ title: string
+ description: string
+ avatar: string
+}
+
+const StatisticsWidget2: React.FC = ({className, title, description, avatar}) => {
+ return (
+
+ {/* begin::Body */}
+
+
+
+
+
+ {/* end::Body */}
+
+ )
+}
+
+export {StatisticsWidget2}
diff --git a/src/_metronic/partials/widgets/statistics/StatisticsWidget3.tsx b/src/_metronic/partials/widgets/statistics/StatisticsWidget3.tsx
new file mode 100644
index 0000000..1ee3bbe
--- /dev/null
+++ b/src/_metronic/partials/widgets/statistics/StatisticsWidget3.tsx
@@ -0,0 +1,207 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ title: string
+ description: string
+ change: string
+ color: string
+}
+
+const StatisticsWidget3: React.FC = ({className, title, description, change, color}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const height = parseInt(getCSS(chartRef.current, 'height'))
+ const labelColor = getCSSVariableValue('--kt-gray-800')
+ const baseColor = getCSSVariableValue('--kt-' + color)
+ const lightColor = getCSSVariableValue('--kt-' + color + '-light')
+
+ const chart = new ApexCharts(
+ chartRef.current,
+ getChartOptions(height, labelColor, baseColor, lightColor)
+ )
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, mode])
+
+ return (
+
+ {/* begin::Body */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {StatisticsWidget3}
+
+function getChartOptions(
+ height: number,
+ labelColor: string,
+ baseColor: string,
+ lightColor: string
+): ApexOptions {
+ const options: ApexOptions = {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [30, 45, 32, 70, 40],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: height,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'solid',
+ opacity: 1,
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 3,
+ colors: [baseColor],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ show: false,
+ position: 'front',
+ stroke: {
+ color: '#E4E6EF',
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ tooltip: {
+ enabled: false,
+ },
+ },
+ yaxis: {
+ min: 0,
+ max: 80,
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [lightColor],
+ markers: {
+ colors: [lightColor],
+ strokeColors: [baseColor],
+ strokeWidth: 3,
+ },
+ }
+ return options
+}
diff --git a/src/_metronic/partials/widgets/statistics/StatisticsWidget4.tsx b/src/_metronic/partials/widgets/statistics/StatisticsWidget4.tsx
new file mode 100644
index 0000000..470556c
--- /dev/null
+++ b/src/_metronic/partials/widgets/statistics/StatisticsWidget4.tsx
@@ -0,0 +1,203 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, {useEffect, useRef} from 'react'
+import {KTSVG} from '../../../helpers'
+import ApexCharts, {ApexOptions} from 'apexcharts'
+import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
+import clsx from 'clsx'
+import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
+
+type Props = {
+ className: string
+ svgIcon: string
+ color: string
+ change: string
+ description: string
+}
+
+const StatisticsWidget4: React.FC = ({className, svgIcon, color, change, description}) => {
+ const chartRef = useRef(null)
+ const {mode} = useThemeMode()
+ const refreshChart = () => {
+ if (!chartRef.current) {
+ return
+ }
+
+ const height = parseInt(getCSS(chartRef.current, 'height'))
+ const labelColor = getCSSVariableValue('--kt-gray-800')
+ const baseColor = getCSSVariableValue('--kt-' + color)
+ const lightColor = getCSSVariableValue('--kt-' + color + '-light')
+
+ const chart = new ApexCharts(
+ chartRef.current,
+ getChartOptions(height, labelColor, baseColor, lightColor)
+ )
+ if (chart) {
+ chart.render()
+ }
+
+ return chart
+ }
+
+ useEffect(() => {
+ const chart = refreshChart()
+ return () => {
+ if (chart) {
+ chart.destroy()
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [chartRef, color, mode])
+
+ return (
+
+ {/* begin::Body */}
+
+
+
+
+
+
+
+
+
+ {change}
+
+ {description}
+
+
+
+
+
+ {/* end::Body */}
+
+ )
+}
+
+export {StatisticsWidget4}
+
+function getChartOptions(
+ height: number,
+ labelColor: string,
+ baseColor: string,
+ lightColor: string
+): ApexOptions {
+ return {
+ series: [
+ {
+ name: 'Net Profit',
+ data: [40, 40, 30, 30, 35, 35, 50],
+ },
+ ],
+ chart: {
+ fontFamily: 'inherit',
+ type: 'area',
+ height: height,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ },
+ plotOptions: {},
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'solid',
+ opacity: 1,
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 3,
+ colors: [baseColor],
+ },
+ xaxis: {
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ crosshairs: {
+ show: false,
+ position: 'front',
+ stroke: {
+ color: '#E4E6EF',
+ width: 1,
+ dashArray: 3,
+ },
+ },
+ tooltip: {
+ enabled: false,
+ },
+ },
+ yaxis: {
+ min: 0,
+ max: 60,
+ labels: {
+ show: false,
+ style: {
+ colors: labelColor,
+ fontSize: '12px',
+ },
+ },
+ },
+ states: {
+ normal: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ hover: {
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: {
+ type: 'none',
+ value: 0,
+ },
+ },
+ },
+ tooltip: {
+ style: {
+ fontSize: '12px',
+ },
+ y: {
+ formatter: function (val) {
+ return '$' + val + ' thousands'
+ },
+ },
+ },
+ colors: [lightColor],
+ markers: {
+ colors: [lightColor],
+ strokeColors: [baseColor],
+ strokeWidth: 3,
+ },
+ }
+}
diff --git a/src/_metronic/partials/widgets/statistics/StatisticsWidget5.tsx b/src/_metronic/partials/widgets/statistics/StatisticsWidget5.tsx
new file mode 100644
index 0000000..8021435
--- /dev/null
+++ b/src/_metronic/partials/widgets/statistics/StatisticsWidget5.tsx
@@ -0,0 +1,39 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG} from '../../../helpers'
+
+type Props = {
+ className: string
+ color: string
+ svgIcon: string
+ iconColor: string
+ title: string
+ titleColor?: string
+ description: string
+ descriptionColor?: string
+}
+
+const StatisticsWidget5: React.FC = ({
+ className,
+ color,
+ svgIcon,
+ iconColor,
+ title,
+ titleColor,
+ description,
+ descriptionColor,
+}) => {
+ return (
+
+
+
+
+
{title}
+
+
{description}
+
+
+ )
+}
+
+export {StatisticsWidget5}
diff --git a/src/_metronic/partials/widgets/statistics/StatisticsWidget6.tsx b/src/_metronic/partials/widgets/statistics/StatisticsWidget6.tsx
new file mode 100644
index 0000000..1c524e9
--- /dev/null
+++ b/src/_metronic/partials/widgets/statistics/StatisticsWidget6.tsx
@@ -0,0 +1,40 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+
+type Props = {
+ className: string
+ color: string
+ title: string
+ description: string
+ progress: string
+}
+
+const StatisticsWidget6: React.FC = ({className, color, title, description, progress}) => {
+ return (
+
+ {/* begin::Body */}
+
+ {/* end:: Body */}
+
+ )
+}
+
+export {StatisticsWidget6}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget1.tsx b/src/_metronic/partials/widgets/tables/TablesWidget1.tsx
new file mode 100644
index 0000000..762b4ae
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget1.tsx
@@ -0,0 +1,256 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget1: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Tasks Overview
+ Pending 10 tasks
+
+
+ {/* begin::Menu */}
+
+
+
+ {/* begin::Menu 1 */}
+
+ {/* end::Menu 1 */}
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Table container */}
+
+ {/* begin::Table */}
+
+ {/* begin::Table head */}
+
+
+
+
+
+
+
+
+ {/* end::Table head */}
+ {/* begin::Table body */}
+
+
+
+
+
+
+
+
+
+
+
+ Top Authors
+
+ Successful Fellas
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Popular Authors
+
+ Most Successful
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ New Users
+
+ Awesome Users
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Active Customers
+
+ Best Customers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bestseller Theme
+
+ Amazing Templates
+
+
+
+
+
+
+
+
+
+
+
+ {/* end::Table body */}
+
+ {/* end::Table */}
+
+ {/* end::Table container */}
+
+
+ )
+}
+
+export {TablesWidget1}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget10.tsx b/src/_metronic/partials/widgets/tables/TablesWidget10.tsx
new file mode 100644
index 0000000..eabb68d
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget10.tsx
@@ -0,0 +1,432 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget10: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Members Statistics
+ Over 500 members
+
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Table container */}
+
+ {/* begin::Table */}
+
+ {/* begin::Table head */}
+
+
+
+
+
+
+
+ Authors
+ Company
+ Progress
+ Actions
+
+
+ {/* end::Table head */}
+ {/* begin::Table body */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Intertico
+
+
+ Web, UI/UX Design
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Agoda
+
+
+ Houses & Hotels
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RoadGee
+
+ Transportation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The Hill
+
+ Insurance
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RoadGee
+
+ Art Director
+
+
+
+
+
+
+
+
+
+ {/* end::Table body */}
+
+ {/* end::Table */}
+
+ {/* end::Table container */}
+
+ {/* begin::Body */}
+
+ )
+}
+
+export {TablesWidget10}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget11.tsx b/src/_metronic/partials/widgets/tables/TablesWidget11.tsx
new file mode 100644
index 0000000..b808845
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget11.tsx
@@ -0,0 +1,353 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget11: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ New Arrivals
+ Over 500 new products
+
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Table container */}
+
+ {/* begin::Table */}
+
+ {/* end::Table */}
+
+ {/* end::Table container */}
+
+ {/* begin::Body */}
+
+ )
+}
+
+export {TablesWidget11}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget12.tsx b/src/_metronic/partials/widgets/tables/TablesWidget12.tsx
new file mode 100644
index 0000000..146735f
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget12.tsx
@@ -0,0 +1,542 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget12: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Member Statistics
+ Over 500 new members
+
+
+ {/* begin::Menu */}
+
+
+
+ {/* begin::Menu 2 */}
+
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu separator */}
+
+ {/* end::Menu separator */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu item */}
+
+ {/* begin::Menu item */}
+
+ New Group
+
+
+ {/* end::Menu item */}
+ {/* begin::Menu sub */}
+
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+
+ {/* end::Menu sub */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu separator */}
+
+ {/* end::Menu separator */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+
+ {/* end::Menu 2 */}
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Table container */}
+
+ {/* begin::Table */}
+
+ {/* begin::Table head */}
+
+
+ Agent
+ Earnings
+ Comission
+ Company
+ Rating
+
+
+
+ {/* end::Table head */}
+ {/* begin::Table body */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $8,000,000
+
+ Pending
+
+
+
+ $5,400
+
+ Paid
+
+
+
+ Intertico
+
+
+ Web, UI/UX Design
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Best Rated
+
+
+
+
+ View
+
+
+ Edit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $8,750,000
+
+ Paid
+
+
+
+ $7,400
+
+ Paid
+
+
+
+ Agoda
+
+
+ Houses & Hotels
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Above Avarage
+
+
+
+
+ View
+
+
+ Edit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $8,000,000
+
+ In Proccess
+
+
+
+ $2,500
+
+ Rejected
+
+
+
+ RoadGee
+
+ Paid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Best Rated
+
+
+
+
+ View
+
+
+ Edit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $700,000
+
+ Pending
+
+
+
+ $7,760
+
+ Paid
+
+
+
+ The Hill
+
+ Insurance
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Avarage
+
+
+
+ View
+
+
+ Edit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $1,320,000
+
+ Pending
+
+
+
+ $6,250
+
+ Paid
+
+
+
+ Intertico
+
+
+ Web, UI/UX Design
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Best Rated
+
+
+
+
+ View
+
+
+ Edit
+
+
+
+
+ {/* end::Table body */}
+
+ {/* end::Table */}
+
+ {/* end::Table container */}
+
+ {/* begin::Body */}
+
+ )
+}
+
+export {TablesWidget12}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget13.tsx b/src/_metronic/partials/widgets/tables/TablesWidget13.tsx
new file mode 100644
index 0000000..447f2a1
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget13.tsx
@@ -0,0 +1,424 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG} from '../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget13: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Recent Orders
+ Over 500 orders
+
+
+ {/* begin::Menu */}
+
+
+
+ {/* begin::Menu 2 */}
+
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu separator */}
+
+ {/* end::Menu separator */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu item */}
+
+ {/* begin::Menu item */}
+
+ New Group
+
+
+ {/* end::Menu item */}
+ {/* begin::Menu sub */}
+
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+
+ {/* end::Menu sub */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+ {/* begin::Menu separator */}
+
+ {/* end::Menu separator */}
+ {/* begin::Menu item */}
+
+ {/* end::Menu item */}
+
+ {/* end::Menu 2 */}
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Table container */}
+
+ {/* begin::Table */}
+
+ {/* end::Table */}
+
+ {/* end::Table container */}
+
+ {/* begin::Body */}
+
+ )
+}
+
+export {TablesWidget13}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget2.tsx b/src/_metronic/partials/widgets/tables/TablesWidget2.tsx
new file mode 100644
index 0000000..4bd2442
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget2.tsx
@@ -0,0 +1,222 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {toAbsoluteUrl} from '../../../helpers'
+import {KTSVG} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget2: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Latest Arrivals
+ More than 100 new products
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Table container */}
+
+ {/* begin::Table */}
+
+ {/* begin::Table head */}
+
+
+
+
+
+
+
+
+
+ {/* end::Table head */}
+ {/* begin::Table body */}
+
+
+
+
+
+
+
+
+
+
+
+ Top Authors
+
+ Successful Fellas
+
+
+ Angular
+ PHP
+
+
+ 4600 Users
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Popular Authors
+
+ Most Successful
+
+
+ HTML
+ CSS
+
+
+ 7200 Users
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ New Users
+
+ Awesome Users
+
+
+ React
+ SASS
+
+
+ 890 Users
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Active Customers
+
+ Best Customers
+
+
+ Java
+ PHP
+
+
+ 6370 Users
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bestseller Theme
+
+ Amazing Templates
+
+
+ Python
+ MySQL
+
+
+ 354 Users
+
+
+
+
+
+
+
+
+ {/* end::Table body */}
+
+ {/* end::Table */}
+
+ {/* end::Table container */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {TablesWidget2}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget3.tsx b/src/_metronic/partials/widgets/tables/TablesWidget3.tsx
new file mode 100644
index 0000000..1464e9d
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget3.tsx
@@ -0,0 +1,166 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG} from '../../../helpers'
+import {Dropdown1} from '../../content/dropdown/Dropdown1'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget3: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Files
+ Over 100 pending files
+
+
+ {/* begin::Menu */}
+
+
+
+
+ {/* end::Menu */}
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Table container */}
+
+ {/* begin::Table */}
+
+ {/* begin::Table head */}
+
+
+
+
+
+
+
+
+
+ {/* end::Table head */}
+ {/* begin::Table body */}
+
+
+
+
+
+
+
+
+
+
+
+ Top Authors
+
+
+ ReactJs, HTML
+ 4600 Users
+ 5.4MB
+
+
+
+
+
+
+
+
+
+
+
+ Popular Authors
+
+
+ Python, MySQL
+ 7200 Users
+ 2.8MB
+
+
+
+
+
+
+
+
+
+
+
+ New Users
+
+
+ Laravel, Metronic
+ 890 Users
+ 1.5MB
+
+
+
+
+
+
+
+
+
+
+
+ Active Customers
+
+
+ AngularJS, C#
+ 4600 Users
+ 5.4MB
+
+
+
+
+
+
+
+
+
+
+
+ Active Customers
+
+
+ ReactJS, Ruby
+ 354 Users
+ 500KB
+
+
+ {/* end::Table body */}
+
+ {/* end::Table */}
+
+ {/* end::Table container */}
+
+ {/* begin::Body */}
+
+ )
+}
+
+export {TablesWidget3}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget4.tsx b/src/_metronic/partials/widgets/tables/TablesWidget4.tsx
new file mode 100644
index 0000000..318ab59
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget4.tsx
@@ -0,0 +1,628 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget4: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ New Members
+ More than 400 new members
+
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+
+
+ {/* end::Body */}
+
+ )
+}
+
+export {TablesWidget4}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget5.tsx b/src/_metronic/partials/widgets/tables/TablesWidget5.tsx
new file mode 100644
index 0000000..9ba4006
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget5.tsx
@@ -0,0 +1,547 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget5: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Latest Products
+ More than 400 new products
+
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+
+
+ {/* end::Body */}
+
+ )
+}
+
+export {TablesWidget5}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget6.tsx b/src/_metronic/partials/widgets/tables/TablesWidget6.tsx
new file mode 100644
index 0000000..7f54b1c
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget6.tsx
@@ -0,0 +1,580 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget6: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Authors Earnings
+ More than 400 new authors
+
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+
+
+ {/* end::Body */}
+
+ )
+}
+
+export {TablesWidget6}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget7.tsx b/src/_metronic/partials/widgets/tables/TablesWidget7.tsx
new file mode 100644
index 0000000..2770902
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget7.tsx
@@ -0,0 +1,536 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG} from '../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget7: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Latest Orders
+ More than 100 new orders
+
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+
+
+ {/* end::Body */}
+
+ )
+}
+
+export {TablesWidget7}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget8.tsx b/src/_metronic/partials/widgets/tables/TablesWidget8.tsx
new file mode 100644
index 0000000..fff4187
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget8.tsx
@@ -0,0 +1,493 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG} from '../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget8: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Latest Products
+ More than 100 new orders
+
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+ {/* begin::Tap pane */}
+
+ {/* end::Tap pane */}
+
+
+ {/* end::Body */}
+
+ )
+}
+
+export {TablesWidget8}
diff --git a/src/_metronic/partials/widgets/tables/TablesWidget9.tsx b/src/_metronic/partials/widgets/tables/TablesWidget9.tsx
new file mode 100644
index 0000000..e2e3bd4
--- /dev/null
+++ b/src/_metronic/partials/widgets/tables/TablesWidget9.tsx
@@ -0,0 +1,432 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className: string
+}
+
+const TablesWidget9: React.FC = ({className}) => {
+ return (
+
+ {/* begin::Header */}
+
+
+ Members Statistics
+ Over 500 members
+
+
+
+ {/* end::Header */}
+ {/* begin::Body */}
+
+ {/* begin::Table container */}
+
+ {/* begin::Table */}
+
+ {/* begin::Table head */}
+
+
+
+
+
+
+
+ Authors
+ Company
+ Progress
+ Actions
+
+
+ {/* end::Table head */}
+ {/* begin::Table body */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Intertico
+
+
+ Web, UI/UX Design
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Agoda
+
+
+ Houses & Hotels
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RoadGee
+
+ Transportation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The Hill
+
+ Insurance
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RoadGee
+
+ Art Director
+
+
+
+
+
+
+
+
+
+ {/* end::Table body */}
+
+ {/* end::Table */}
+
+ {/* end::Table container */}
+
+ {/* begin::Body */}
+
+ )
+}
+
+export {TablesWidget9}
diff --git a/src/_metronic/partials/widgets/tiles/TilesWidget1.tsx b/src/_metronic/partials/widgets/tiles/TilesWidget1.tsx
new file mode 100644
index 0000000..6111c74
--- /dev/null
+++ b/src/_metronic/partials/widgets/tiles/TilesWidget1.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+import {toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className?: string
+ bgImage?: string
+ title?: string
+}
+const TilesWidget1 = ({
+ className,
+ bgImage = toAbsoluteUrl('/media/stock/600x400/img-75.jpg'),
+ title = 'Properties',
+}: Props) => {
+ return (
+
+ )
+}
+
+export {TilesWidget1}
diff --git a/src/_metronic/partials/widgets/tiles/TilesWidget2.tsx b/src/_metronic/partials/widgets/tiles/TilesWidget2.tsx
new file mode 100644
index 0000000..f2b390f
--- /dev/null
+++ b/src/_metronic/partials/widgets/tiles/TilesWidget2.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+import {toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className?: string
+ bgColor?: string
+ title?: string
+ title2?: string
+}
+const TilesWidget2 = ({
+ className,
+ bgColor = '#663259',
+ title = 'Create SaaS',
+ title2 = 'Based Reports',
+}: Props) => {
+ return (
+
+
+
+ {title} {title2}{' '}
+
+
+
+
+
+ )
+}
+
+export {TilesWidget2}
diff --git a/src/_metronic/partials/widgets/tiles/TilesWidget3.tsx b/src/_metronic/partials/widgets/tiles/TilesWidget3.tsx
new file mode 100644
index 0000000..a6401eb
--- /dev/null
+++ b/src/_metronic/partials/widgets/tiles/TilesWidget3.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+import {KTSVG, toAbsoluteUrl} from '../../../helpers'
+
+type Props = {
+ className?: string
+ bgColor?: string
+ title?: string
+ title2?: string
+}
+const TilesWidget3 = ({
+ className,
+ bgColor = '#663259',
+ title = 'Create SaaS',
+ title2 = 'Based Reports',
+}: Props) => {
+ return (
+
+ {/* begin::Body */}
+
+ {/* begin::Title */}
+
+
Create Reports
+ With App
+
+ {/* end::Title */}
+
+ {/* begin::Link */}
+
+ Create Report
+
+
+ {/* end::Link */}
+
+ {/* end::Body */}
+
+ )
+}
+
+export {TilesWidget3}
diff --git a/src/_metronic/partials/widgets/tiles/TilesWidget4.tsx b/src/_metronic/partials/widgets/tiles/TilesWidget4.tsx
new file mode 100644
index 0000000..6903659
--- /dev/null
+++ b/src/_metronic/partials/widgets/tiles/TilesWidget4.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+
+type Props = {
+ className?: string
+}
+const TilesWidget4 = ({className}: Props) => {
+ return (
+
+
+
+
Create CRM Reports
+
+
+ Generate the latest CRM report for company projects
+
+
+
+ Start Now
+
+
+
+ )
+}
+
+export {TilesWidget4}
diff --git a/src/_metronic/partials/widgets/tiles/TilesWidget5.tsx b/src/_metronic/partials/widgets/tiles/TilesWidget5.tsx
new file mode 100644
index 0000000..69b8b5d
--- /dev/null
+++ b/src/_metronic/partials/widgets/tiles/TilesWidget5.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import clsx from 'clsx'
+import {KTSVG} from '../../../helpers'
+
+type Props = {
+ className?: string
+ svgIcon?: string
+ titleClass?: string
+ descriptionClass?: string
+ iconClass?: string
+ title?: string
+ description?: string
+}
+const TilesWidget5 = (props: Props) => {
+ const {className, svgIcon, titleClass, descriptionClass, iconClass, title, description} = props
+ return (
+
+
+
+
+
{title}
+
{description}
+
+
+
+ )
+}
+
+export {TilesWidget5}
diff --git a/src/_res/assets/sass/_init.scss b/src/_res/assets/sass/_init.scss
new file mode 100644
index 0000000..7ac4710
--- /dev/null
+++ b/src/_res/assets/sass/_init.scss
@@ -0,0 +1,28 @@
+//
+// Main init file of global bootstrap and theme functions, mixins, variables and config
+//
+
+
+// Custom functions & mixins
+@import "./core/base/functions";
+@import "./core/base/mixins";
+@import "./core/components/mixins";
+@import "./core/vendors/plugins/mixins";
+
+// Custom variables
+@import "components/variables.custom";
+@import "./core/components/variables";
+
+// Bootstrap initializaton
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+// 3rd-Party plugins variables
+@import "./core/vendors/plugins/variables";
+
+// Custom layout variables
+@import "./core/layout/base/variables";
+@import "layout/variables.custom";
\ No newline at end of file
diff --git a/src/_res/assets/sass/components/_landing.scss b/src/_res/assets/sass/components/_landing.scss
new file mode 100644
index 0000000..34f3024
--- /dev/null
+++ b/src/_res/assets/sass/components/_landing.scss
@@ -0,0 +1,136 @@
+//
+// Landing elements
+//
+
+// Variables
+$landing-dark-color: #13263C;
+$landing-header-height: 100px;
+$landing-header-height-tablet-and-mobile: 70px;
+$landing-header-sticky-height: 70px;
+$landing-header-sticky-height-tablet-and-mobile: 70px;
+
+// Utility classes
+.landing-dark-bg {
+ background-color: $landing-dark-color;
+}
+
+.landing-dark-color {
+ color: $landing-dark-color;
+}
+
+.landing-dark-border {
+ border:1px dashed #2C3F5B;
+}
+
+.landing-dark-separator {
+ border-top:1px dashed #2C3F5B;
+}
+
+.landing-curve {
+ position: relative;
+
+ svg {
+ position: relative;
+ top: 0;
+ display: block;
+ }
+}
+
+// Landing header
+.landing-header {
+ display: flex;
+ align-items: center;
+ height: $landing-header-height;
+
+ // Logos
+ .logo-default {
+ display: block;
+ }
+
+ .logo-sticky {
+ display: none;
+ }
+
+ // Menu
+ .menu {
+ // Menu link
+ .menu-link {
+ &.active {
+ color: $white;
+ }
+ }
+
+ // Header menu sticky mode
+ [data-kt-sticky-landing-header="on"] & {
+ // Menu link
+ .menu-link {
+ &.active {
+ color: $primary;
+ background-color: rgba(#EFF2F5, 0.4);
+ }
+ }
+ }
+ }
+
+ // Sticky header modes
+ [data-kt-sticky-landing-header="on"] & {
+ padding: 0;
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 100;
+ background-color: $white;
+ box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
+ height: $landing-header-sticky-height;
+
+ // Logos
+ .logo-sticky {
+ display: block;
+ }
+
+ .logo-default {
+ display: none;
+ }
+ }
+}
+
+// Fix body padding top when Landing sticky header is on
+body[data-kt-sticky-landing-header="on"] {
+ padding-top: $landing-header-height;
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Landing header
+ .landing-header {
+ height: $landing-header-height-tablet-and-mobile;
+
+ // Menu wrapper
+ .landing-menu-wrapper {
+ position: relative;
+ overflow: auto;
+ }
+
+ // Sticky header modes
+ [data-kt-sticky-landing-header="on"] & {
+ height: $landing-header-sticky-height-tablet-and-mobile;
+ }
+
+ // Menu
+ .menu {
+ // Menu link
+ .menu-link {
+ &.active {
+ color: $primary;
+ background-color: rgba(#EFF2F5, 0.4);
+ }
+ }
+ }
+ }
+
+ // Fix body padding top when Landing sticky header is on
+ body[data-kt-sticky-landing-header="on"] {
+ padding-top: $landing-header-height-tablet-and-mobile;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/components/_variables.custom.scss b/src/_res/assets/sass/components/_variables.custom.scss
new file mode 100644
index 0000000..ae87b9f
--- /dev/null
+++ b/src/_res/assets/sass/components/_variables.custom.scss
@@ -0,0 +1,44 @@
+//
+// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.
+// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss
+// are not accessible in this file but you can override any global variable as shown below:
+//
+
+// Bootstrap color system
+$white: #ffffff;
+
+// Theme colors
+// Primary
+$primary: #009ef7;
+$primary-active: #0095e8;
+$primary-light: #f1faff;
+$primary-light-dark: #212e48;
+$primary-inverse: $white;
+
+// Success
+$success: #50cd89;
+$success-active: #47be7d;
+$success-light: #e8fff3;
+$success-light-dark: #1c3238;
+$success-inverse: $white;
+
+// Info
+$info: #7239ea;
+$info-active: #5014d0;
+$info-light: #f8f5ff;
+$info-light-dark: #2f264f;
+$info-inverse: $white;
+
+// Danger
+$danger: #f1416c;
+$danger-active: #d9214e;
+$danger-light: #fff5f8;
+$danger-light-dark: #3a2434;
+$danger-inverse: $white;
+
+// Warning
+$warning: #ffc700;
+$warning-active: #f1bc00;
+$warning-light: #fff8dd;
+$warning-light-dark: #392f28;
+$warning-inverse: $white;
\ No newline at end of file
diff --git a/src/_res/assets/sass/components/components.scss b/src/_res/assets/sass/components/components.scss
new file mode 100644
index 0000000..aaed781
--- /dev/null
+++ b/src/_res/assets/sass/components/components.scss
@@ -0,0 +1,7 @@
+//
+// Components
+//
+
+// Import Dependencies
+@import "stepper/multistep";
+@import "landing";
diff --git a/src/_res/assets/sass/components/stepper/_multistep.scss b/src/_res/assets/sass/components/stepper/_multistep.scss
new file mode 100644
index 0000000..0861c78
--- /dev/null
+++ b/src/_res/assets/sass/components/stepper/_multistep.scss
@@ -0,0 +1,42 @@
+//
+// Multistep stepper
+//
+
+// Custom
+.stepper.stepper-pills.stepper-multistep {
+ --kt-stepper-pills-size: 46px;
+ --kt-stepper-icon-border-radius: 9px;
+ --kt-stepper-icon-check-size: 1.25rem;
+
+ --kt-stepper-icon-bg-color: rgba(255, 255, 255, 0.03);
+ --kt-stepper-icon-bg-color-current: var(--kt-success);
+ --kt-stepper-icon-bg-color-completed: rgba(255, 255, 255, 0.03);
+
+ --kt-stepper-icon-border: 1px dashed rgba(255, 255, 255, 0.3);
+ --kt-stepper-icon-border-current: 0;
+ --kt-stepper-icon-border-completed: 1px dashed rgba(255, 255, 255, 0.3);
+
+ --kt-stepper-icon-number-color: var(--kt-white);
+ --kt-stepper-icon-number-color-current: var(--kt-white);
+ --kt-stepper-icon-number-color-completed: var(--kt-white);
+
+ --kt-stepper-icon-check-color-completed: var(--kt-success);
+
+ --kt-stepper-label-title-opacity: 0.7;
+ --kt-stepper-label-title-opacity-current: 1;
+ --kt-stepper-label-title-opacity-completed: 1;
+
+ --kt-stepper-label-title-color: var(--kt-white);
+ --kt-stepper-label-title-color-current: var(--kt-white);
+ --kt-stepper-label-title-color-completed: var(--kt-white);
+
+ --kt-stepper-label-desc-opacity: 0.7;
+ --kt-stepper-label-desc-opacity-current: 0.7;
+ --kt-stepper-label-desc-opacity-completed: 0.7;
+
+ --kt-stepper-label-desc-color: var(--kt-white);
+ --kt-stepper-label-desc-color-current: var(--kt-white);
+ --kt-stepper-label-desc-color-completed: var(--kt-white);
+
+ --kt-stepper-line-border: 1px dashed rgba(255, 255, 255, 0.3);
+}
diff --git a/src/_res/assets/sass/core/base/_functions.scss b/src/_res/assets/sass/core/base/_functions.scss
new file mode 100644
index 0000000..0551f4b
--- /dev/null
+++ b/src/_res/assets/sass/core/base/_functions.scss
@@ -0,0 +1,10 @@
+//
+// Functions
+//
+
+// Import Dependencies
+@import "functions/get";
+@import "functions/set";
+@import "functions/math";
+@import "functions/valueif";
+@import "functions/theme-colors";
diff --git a/src/_res/assets/sass/core/base/_mixins.scss b/src/_res/assets/sass/core/base/_mixins.scss
new file mode 100644
index 0000000..93acae0
--- /dev/null
+++ b/src/_res/assets/sass/core/base/_mixins.scss
@@ -0,0 +1,11 @@
+//
+// Mixins
+//
+
+// Import Dependencies
+@import "mixins/property";
+@import "mixins/browsers";
+@import "mixins/fixes";
+@import "mixins/reset";
+@import "mixins/placeholder";
+@import "mixins/breakpoints";
diff --git a/src/_res/assets/sass/core/base/functions/_get.scss b/src/_res/assets/sass/core/base/functions/_get.scss
new file mode 100644
index 0000000..775e4a1
--- /dev/null
+++ b/src/_res/assets/sass/core/base/functions/_get.scss
@@ -0,0 +1,82 @@
+//
+// Get
+//
+
+@function get($map, $keys...) {
+ @if length($keys) == 1 {
+ $keys: nth($keys, 1);
+ }
+
+ @if type-of($map) != 'map' or $map == null {
+ //@return false;
+ }
+
+ $warn: "#{nth($keys, 1)}";
+ $length: length($keys);
+ $get: map-get($map, nth($keys, 1));
+
+ @if $length > 1 {
+ @for $i from 2 through $length {
+ @if $get != null and type-of($get) == 'map' {
+ $warn: $warn + "->#{nth($keys, $i)}";
+ $get: map-get($get, nth($keys, $i));
+
+ @if $get == null {
+ @return null;
+ }
+ }
+ @else {
+ @return get-warning($warn, $get, nth($keys, $i));
+ }
+ }
+ }
+
+ @return $get;
+}
+
+@function has($map, $keys...) {
+ @if length($keys) == 1 {
+ $keys: nth($keys, 1);
+ }
+
+ @if type-of($map) != 'map' or $map == null {
+ //@return false;
+ }
+
+ $warn: "#{nth($keys, 1)}";
+ $length: length($keys);
+ $get: map-get($map, nth($keys, 1));
+
+ @if $length > 1 {
+ @for $i from 2 through $length {
+ @if $get != null and type-of($get) == 'map' {
+ $warn: $warn + "->#{nth($keys, $i)}";
+ $get: map-get($get, nth($keys, $i));
+
+ @if $get == null {
+ @return false;
+ }
+ }
+ @else {
+ @return false;
+ }
+ }
+ }
+
+ @if $get != null {
+ @return true;
+ }
+ @else {
+ @return false;
+ }
+}
+
+@function get-warning($warn, $get, $key) {
+ @if $get == null {
+ @warn "Map has no value for key search `#{$warn}`";
+ }
+ @else if type-of($get) != 'map' {
+ @warn "Non-map value found for key search `#{$warn}`, cannot search for key `#{$key}`";
+ }
+ @return null;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/base/functions/_math.scss b/src/_res/assets/sass/core/base/functions/_math.scss
new file mode 100644
index 0000000..e5766ff
--- /dev/null
+++ b/src/_res/assets/sass/core/base/functions/_math.scss
@@ -0,0 +1,15 @@
+//
+// Math
+//
+
+@function sqrt($r) {
+ $x0: 1;
+ $x1: $x0;
+
+ @for $i from 1 through 10 {
+ $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
+ $x0: $x1;
+ }
+
+ @return $x1;
+}
diff --git a/src/_res/assets/sass/core/base/functions/_set.scss b/src/_res/assets/sass/core/base/functions/_set.scss
new file mode 100644
index 0000000..91690a8
--- /dev/null
+++ b/src/_res/assets/sass/core/base/functions/_set.scss
@@ -0,0 +1,43 @@
+/// Deep set function to set a value in nested maps
+
+@function set($map, $keys, $value) {
+ $maps: ($map,);
+ $result: null;
+
+ // If the last key is a map already
+ // Warn the user we will be overriding it with $value
+ @if type-of(nth($keys, -1)) == "map" {
+ @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
+ }
+
+ // If $keys is a single key
+ // Just merge and return
+ @if length($keys) == 1 {
+ @return map-merge($map, ($keys: $value));
+ }
+
+ // Loop from the first to the second to last key from $keys
+ // Store the associated map to this key in the $maps list
+ // If the key doesn't exist, throw an error
+ @for $i from 1 through length($keys) - 1 {
+ $current-key: nth($keys, $i);
+ $current-map: nth($maps, -1);
+ $current-get: map-get($current-map, $current-key);
+ @if $current-get == null {
+ @error "Key `#{$key}` doesn't exist at current level in map.";
+ }
+ $maps: append($maps, $current-get);
+ }
+
+ // Loop from the last map to the first one
+ // Merge it with the previous one
+ @for $i from length($maps) through 1 {
+ $current-map: nth($maps, $i);
+ $current-key: nth($keys, $i);
+ $current-val: if($i == length($maps), $value, $result);
+ $result: map-merge($current-map, ($current-key: $current-val));
+ }
+
+ // Return result
+ @return $result;
+}
diff --git a/src/_res/assets/sass/core/base/functions/_theme-colors.scss b/src/_res/assets/sass/core/base/functions/_theme-colors.scss
new file mode 100644
index 0000000..6c9fd7f
--- /dev/null
+++ b/src/_res/assets/sass/core/base/functions/_theme-colors.scss
@@ -0,0 +1,15 @@
+//
+// Bootstrap extended functions
+//
+
+@function theme-inverse-color($key: "primary") {
+ @return get($theme-inverse-colors, $key);
+}
+
+@function theme-active-color($key: "primary") {
+ @return get($theme-active-colors, $key);
+}
+
+@function theme-light-color($key: "primary") {
+ @return get($theme-light-colors, $key);
+}
diff --git a/src/_res/assets/sass/core/base/functions/_valueif.scss b/src/_res/assets/sass/core/base/functions/_valueif.scss
new file mode 100644
index 0000000..ac3de28
--- /dev/null
+++ b/src/_res/assets/sass/core/base/functions/_valueif.scss
@@ -0,0 +1,13 @@
+//
+// valueif
+//
+
+@function valueif($check, $trueValue, $falseValue: null) {
+ @if $check {
+ @return $trueValue;
+ } @else if $falseValue != null {
+ @return $falseValue;
+ } @else {
+ @return null;
+ }
+}
diff --git a/src/_res/assets/sass/core/base/mixins/_breakpoints.scss b/src/_res/assets/sass/core/base/mixins/_breakpoints.scss
new file mode 100644
index 0000000..d335b9a
--- /dev/null
+++ b/src/_res/assets/sass/core/base/mixins/_breakpoints.scss
@@ -0,0 +1,25 @@
+// Media of at most the maximum and minimum breakpoint widths. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint.
+
+@mixin media-breakpoint-direction($direction, $name, $breakpoints: $grid-breakpoints) {
+ @if $direction == up {
+ $min: breakpoint-min($name, $breakpoints);
+
+ @if $min {
+ @media (min-width: $min) {
+ @content;
+ }
+ } @else {
+ @content;
+ }
+
+ } @else if $direction == down {
+ $max: breakpoint-max($name, $breakpoints);
+
+ @if $max {
+ @media (max-width: $max) {
+ @content;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/base/mixins/_browsers.scss b/src/_res/assets/sass/core/base/mixins/_browsers.scss
new file mode 100644
index 0000000..123ac81
--- /dev/null
+++ b/src/_res/assets/sass/core/base/mixins/_browsers.scss
@@ -0,0 +1,10 @@
+//
+// Browsers
+//
+
+@mixin for-edge {
+ // Microsoft Edge
+ @supports (-ms-ime-align:auto) {
+ @content;
+ }
+}
diff --git a/src/_res/assets/sass/core/base/mixins/_fixes.scss b/src/_res/assets/sass/core/base/mixins/_fixes.scss
new file mode 100644
index 0000000..5f07525
--- /dev/null
+++ b/src/_res/assets/sass/core/base/mixins/_fixes.scss
@@ -0,0 +1,15 @@
+//
+// Fixes
+//
+
+
+@mixin fix-fixed-position-lags() {
+ // webkit hack for smooth font view on fixed positioned elements
+ -webkit-backface-visibility:hidden;
+ backface-visibility:hidden;
+}
+
+@mixin fix-animation-lags() {
+ transform: translateZ(0);
+ -webkit-transform-style: preserve-3d;
+}
diff --git a/src/_res/assets/sass/core/base/mixins/_placeholder.scss b/src/_res/assets/sass/core/base/mixins/_placeholder.scss
new file mode 100644
index 0000000..2119683
--- /dev/null
+++ b/src/_res/assets/sass/core/base/mixins/_placeholder.scss
@@ -0,0 +1,16 @@
+//
+// Input placeholder color
+//
+
+@mixin placeholder($color) {
+ // Chrome, Firefox, Opera, Safari 10.1+
+ &::placeholder {
+ color: $color;
+ }
+
+ // Firefox
+ &::-moz-placeholder {
+ color: $color;
+ opacity: 1;
+ }
+}
diff --git a/src/_res/assets/sass/core/base/mixins/_property.scss b/src/_res/assets/sass/core/base/mixins/_property.scss
new file mode 100644
index 0000000..d93c3ec
--- /dev/null
+++ b/src/_res/assets/sass/core/base/mixins/_property.scss
@@ -0,0 +1,9 @@
+//
+// CSS Property
+//
+
+@mixin property($attr, $value, $important: '') {
+ @if $value != null and $value != false {
+ #{$attr}: #{$value} #{$important};
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/base/mixins/_reset.scss b/src/_res/assets/sass/core/base/mixins/_reset.scss
new file mode 100644
index 0000000..b796a6e
--- /dev/null
+++ b/src/_res/assets/sass/core/base/mixins/_reset.scss
@@ -0,0 +1,23 @@
+//
+// Reset
+//
+
+@mixin button-reset() {
+ appearance: none;
+ box-shadow: none;
+ border-radius: 0;
+ border: none;
+ cursor: pointer;
+ background-color: transparent;
+ outline: none !important;
+ margin: 0;
+ padding: 0;
+}
+
+@mixin input-reset() {
+ border: 0;
+ background-color: transparent;
+ outline: none !important;
+ box-shadow: none;
+ border-radius: 0;
+}
diff --git a/src/_res/assets/sass/core/components/_accordion.scss b/src/_res/assets/sass/core/components/_accordion.scss
new file mode 100644
index 0000000..c65a239
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_accordion.scss
@@ -0,0 +1,74 @@
+//
+// Accordion
+//
+
+// Base
+.accordion {
+ --#{$prefix}accordion-color: var(--kt-accordion-color);
+ --#{$prefix}accordion-bg: var(--kt-accordion-bg);
+ --#{$prefix}accordion-border-color: var(--kt-accordion-border-color);
+ --#{$prefix}accordion-btn-color: var(--kt-accordion-color);
+ --#{$prefix}accordion-btn-bg: var(--kt-accordion-button-bg);
+ --#{$prefix}accordion-btn-icon: var(--kt-accordion-button-icon);
+ --#{$prefix}accordion-btn-active-icon: var(--kt-accordion-button-active-icon);
+ --#{$prefix}accordion-btn-focus-border-color: var(--kt-accordion-button-focus-border-color);
+ --#{$prefix}accordion-btn-focus-box-shadow: var(--kt-accordion-button-focus-box-shadow);
+ --#{$prefix}accordion-active-color: var(--kt-accordion-button-active-color);
+ --#{$prefix}accordion-active-bg: var(--kt-accordion-button-active-bg);
+
+ // According heading
+ .accordion-header {
+ cursor: pointer;
+ }
+
+ // Icon toggle mode
+ &.accordion-icon-toggle {
+ // Accordion icon expaned mode
+ .accordion-icon {
+ display: flex;
+ flex-shrink: 0;
+ transition: $transition-base;
+ transform: rotate(90deg);
+ align-items: center;
+ justify-content: center;
+
+ i,
+ .svg-icon {
+ color: var(--kt-primary);
+ }
+ }
+
+ // Accordion icon collapsed mode
+ .collapsed {
+ .accordion-icon {
+ transition: $transition-base;
+ transform: rotate(0);
+
+ i,
+ .svg-icon {
+ color: var(--kt-text-muted);
+ }
+ }
+ }
+ }
+
+ // Reset accordion item border
+ &.accordion-borderless {
+ // According item
+ .accordion-item {
+ border: 0;
+ }
+ }
+
+ // Reset accordion item border, border radiues and background color
+ &.accordion-flush {
+ // According item
+ .accordion-item {
+ background-color: transparent;
+ border: 0;
+ border-radius: 0;
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_alert.scss b/src/_res/assets/sass/core/components/_alert.scss
new file mode 100644
index 0000000..8916c2b
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_alert.scss
@@ -0,0 +1,15 @@
+//
+// Alert
+//
+
+@each $name, $value in $theme-colors {
+ .alert-#{$name} {
+ color: var(--kt-#{$name});
+ border-color: var(--kt-#{$name});
+ background-color: var(--kt-#{$name}-light);
+
+ .alert-link {
+ color: var(--kt-#{$name});
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_anchor.scss b/src/_res/assets/sass/core/components/_anchor.scss
new file mode 100644
index 0000000..453d360
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_anchor.scss
@@ -0,0 +1,37 @@
+//
+// Anchor
+//
+
+.anchor {
+ display: flex;
+ align-items: center;
+
+ a {
+ position: relative;
+ display: none;
+ align-items: center;
+ justify-content:flex-start;
+ height: 1em;
+ width: 1.25em;
+ margin-left: -1.25em;
+ font-weight: 500;
+ font-size: 0.8em;
+ color: var(--kt-text-muted);
+ transition: $transition-base;
+
+ &:before {
+ content: '#';
+ }
+ }
+
+ &:hover {
+ a {
+ display: flex;
+
+ &:hover {
+ color: var(--kt-primary);
+ transition: $transition-base;
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_animation.scss b/src/_res/assets/sass/core/components/_animation.scss
new file mode 100644
index 0000000..c008782
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_animation.scss
@@ -0,0 +1,81 @@
+//
+// Animation
+//
+
+// Base
+.animation {
+ animation-duration: 1s;
+ animation-fill-mode: both;
+}
+
+// Slide In Down
+@keyframes animationSlideInDown {
+ from {
+ transform: translate3d(0, -100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.animation-slide-in-down {
+ animation-name: animationSlideInDown;
+}
+
+// Slide In Up
+@keyframes animationSlideInUp {
+ from {
+ transform: translate3d(0, 100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.animation-slide-in-up {
+ animation-name: animationSlideInUp;
+}
+
+// Fade In
+@keyframes animationFadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.animation-fade-in {
+ animation-name: animationFadeIn;
+}
+
+// Fade Out
+@keyframes animationFadeOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+.animation-fade-out {
+ animation-name: animationFadeOut;
+}
+
+// Blink
+.animation-blink {
+ animation: animationBlink 1s steps(5, start) infinite;
+}
+
+@keyframes animationBlink {
+ to {
+ visibility: hidden;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_badge.scss b/src/_res/assets/sass/core/components/_badge.scss
new file mode 100644
index 0000000..03ccd66
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_badge.scss
@@ -0,0 +1,77 @@
+//
+// Badge
+//
+
+.badge {
+ --#{$prefix}badge-color: var(--kt-badge-color);
+
+ display: inline-flex;
+ align-items: center;
+
+ // Fixed size
+ &.badge-circle,
+ &.badge-square {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: $badge-size;
+ min-width: $badge-size;
+ padding: 0 0.1rem;
+ line-height: 0;
+ }
+
+ // Circle
+ &.badge-circle {
+ border-radius: 50%;
+ padding: 0;
+ min-width: unset;
+ width: $badge-size;
+ }
+
+ // Sizes
+ &.badge-sm {
+ min-width: $badge-size-sm;
+ font-size: $badge-font-size-sm;
+
+ &.badge-square {
+ height: $badge-size-sm;
+ }
+
+ &.badge-circle {
+ width: $badge-size-sm;
+ height: $badge-size-sm;
+ }
+ }
+
+ &.badge-lg {
+ min-width: $badge-size-lg;
+ font-size: $badge-font-size-lg;
+
+ &.badge-square {
+ height: $badge-size-lg;
+ }
+
+ &.badge-circle {
+ width: $badge-size-lg;
+ height: $badge-size-lg;
+ }
+ }
+}
+
+@each $name, $value in $theme-colors {
+ .badge-#{$name} {
+ color: var(--kt-#{$name}-inverse);
+ background-color: var(--kt-#{$name});
+
+ &.badge-outline {
+ border: 1px solid var(--kt-#{$name});
+ color: var(--kt-#{$name});
+ background-color: transparent;
+ }
+ }
+
+ .badge-light-#{$name} {
+ color: var(--kt-#{$name});
+ background-color: var(--kt-#{$name}-light);
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_blockui.scss b/src/_res/assets/sass/core/components/_blockui.scss
new file mode 100644
index 0000000..879ce91
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_blockui.scss
@@ -0,0 +1,43 @@
+//
+// BlockUI
+//
+
+
+.blockui {
+ position: relative;
+
+ .blockui-overlay {
+ transition: all 0.3s ease;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--kt-blockui-overlay-bg);
+
+ .spinner-border {
+ height: 1.35rem;
+ width: 1.35rem;
+ }
+ }
+
+ .blockui-message {
+ display: flex;
+ align-items: center;
+ @include border-radius($border-radius);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ background-color: var(--kt-tooltip-bg);
+ color: var(--kt-gray-700);
+ font-weight: $font-weight-bold;
+ margin: 0 !important;
+ width: auto;
+ padding: 0.85rem 1.75rem !important;
+
+ .spinner-border {
+ margin-right: 0.65rem;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_breadcrumb.scss b/src/_res/assets/sass/core/components/_breadcrumb.scss
new file mode 100644
index 0000000..e2f16f3
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_breadcrumb.scss
@@ -0,0 +1,70 @@
+//
+// Breadcrumb
+//
+
+// Breadcrumb
+.breadcrumb {
+ --#{$prefix}breadcrumb-bg: var(--kt-breadcrumb-bg);
+ --#{$prefix}breadcrumb-divider-color: var(--kt-breadcrumb-divider-color);
+ --#{$prefix}breadcrumb-item-active-color: var(--kt-breadcrumb-item-active-color);
+
+ display: flex;
+ align-items: center;
+ background-color: transparent;
+ padding: 0;
+ margin: 0;
+
+ // Item breadcrumb
+ .breadcrumb-item {
+ display: flex;
+ align-items: center;
+ padding-left: 0;
+ padding-right: $breadcrumb-item-padding-x;
+
+ &:last-child {
+ padding-right: 0;
+ }
+
+ &:after {
+ content: "/";
+ //padding-left: $breadcrumb-item-padding-x;
+ }
+
+ &:before {
+ display: none;
+ }
+
+ &:last-child {
+ &:after {
+ display: none;
+ }
+ }
+ }
+}
+
+// Breadcrumb line style
+.breadcrumb-line {
+ .breadcrumb-item {
+ &:after {
+ content: "-";
+ }
+ }
+}
+
+// Breadcrumb dot style
+.breadcrumb-dot {
+ .breadcrumb-item {
+ &:after {
+ content: "\2022";
+ }
+ }
+}
+
+// Breadcrumb separatorless style
+.breadcrumb-separatorless {
+ .breadcrumb-item {
+ &:after {
+ display:none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_bullet.scss b/src/_res/assets/sass/core/components/_bullet.scss
new file mode 100644
index 0000000..57d4300
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_bullet.scss
@@ -0,0 +1,33 @@
+//
+// Bullet
+//
+
+// Base
+.bullet {
+ display: inline-block;
+ background-color: var(--kt-bullet-bg-color);
+ @include border-radius($bullet-bar-border-radius);
+ width: $bullet-bar-width;
+ height: $bullet-bar-height;
+ flex-shrink: 0;
+}
+
+// Dot bullet
+.bullet-dot {
+ width: $bullet-dot-size;
+ height: $bullet-dot-size;
+ border-radius: 100% !important;
+}
+
+// Vertical bullet
+.bullet-vertical {
+ width: $bullet-bar-height;
+ height: $bullet-bar-width;
+}
+
+// Vertical line
+.bullet-line {
+ width: $bullet-line-width;
+ height: $bullet-line-height;
+ border-radius: 0;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_button-group.scss b/src/_res/assets/sass/core/components/_button-group.scss
new file mode 100644
index 0000000..f5dae70
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_button-group.scss
@@ -0,0 +1,7 @@
+
+
+// The clickable button for toggling the menu
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
+ @include box-shadow(var(--kt-btn-active-box-shadow));
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_buttons.scss b/src/_res/assets/sass/core/components/_buttons.scss
new file mode 100644
index 0000000..9ca3257
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_buttons.scss
@@ -0,0 +1,7 @@
+//
+// Buttons
+//
+
+// Import Dependencies
+@import "buttons/base";
+@import "buttons/theme";
diff --git a/src/_res/assets/sass/core/components/_card.scss b/src/_res/assets/sass/core/components/_card.scss
new file mode 100644
index 0000000..1662e7e
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_card.scss
@@ -0,0 +1,291 @@
+//
+// Card
+//
+
+// Base
+.card {
+ @if ($card-border-enabled) {
+ border: $card-border-width $card-border-style var(--kt-card-border-color);
+ } @else {
+ border: 0;
+ }
+
+ box-shadow: var(--kt-card-box-shadow);
+ background-color: var(--kt-card-bg);
+
+ // Header
+ .card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ flex-wrap: wrap;
+ min-height: $card-header-height;
+ padding: 0 $card-px;
+ color: var(--kt-card-cap-color);
+ background-color: var(--kt-card-cap-bg);
+ border-bottom: $card-border-width $card-border-style var(--kt-card-border-color);
+
+ // Title
+ .card-title {
+ display: flex;
+ align-items: center;
+ margin: $card-header-py;
+ margin-left: 0;
+
+ &.flex-column {
+ align-items: flex-start;
+ justify-content: center;
+ }
+
+ .card-icon {
+ margin-right: 0.75rem;
+ line-height: 0;
+
+ i {
+ font-size: 1.25rem;
+ color: var(--kt-gray-600);
+ line-height: 0;
+
+ &:after,
+ &:before {
+ line-height: 0;
+ }
+ }
+
+ .svg-icon {
+ color: var(--kt-gray-600);
+ @include svg-icon-size(24px);
+ }
+ }
+
+ &,
+ .card-label {
+ font-weight: 500;
+ font-size: 1.275rem;
+ color: var(--kt-text-dark);
+ }
+
+ .card-label {
+ margin: 0 0.75rem 0 0;
+ flex-wrap: wrap;
+ }
+
+ // Description
+ small {
+ color: var(--kt-text-muted);
+ font-size: 1rem;
+ }
+
+ // Headings
+ h1, h2, h3, h4, h5, h6 {
+ margin-bottom: 0;
+ }
+ }
+
+ // Toolbar
+ .card-toolbar {
+ display: flex;
+ align-items: center;
+ margin: $card-header-py 0;
+ flex-wrap: wrap;
+ }
+ }
+
+ // Body
+ .card-body {
+ padding: $card-py $card-px;
+ color: var(--kt-card-color);
+ }
+
+ // Footer
+ .card-footer {
+ padding: $card-py $card-px;
+ color: var(--kt-card-cap-color);
+ background-color: var(--kt-card-cap-bg);
+ border-top: $card-border-width $card-border-style var(--kt-card-border-color);
+ }
+
+ // Scroll
+ .card-scroll {
+ position: relative;
+ overflow: auto;
+ }
+
+ // Reset padding x
+ &.card-px-0 {
+ .card-header,
+ .card-body,
+ .card-footer {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+
+ &.card-py-0 {
+ .card-header,
+ .card-body,
+ .card-footer {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ }
+
+ &.card-p-0 {
+ .card-header,
+ .card-body,
+ .card-footer {
+ padding: 0;
+ }
+ }
+
+ // Dashed style
+ &.card-dashed {
+ box-shadow: none;
+ border: $card-border-width dashed var(--kt-card-border-dashed-color);
+
+ > .card-header {
+ border-bottom: 1px dashed var(--kt-card-border-dashed-color);
+ }
+
+ > .card-footer {
+ border-top: 1px dashed var(--kt-card-border-dashed-color);
+ }
+ }
+
+ // Bordered style
+ &.card-bordered {
+ box-shadow: none;
+ border: $card-border-width $card-border-style var(--kt-card-border-color);
+ }
+
+ // Flush header and footer borders
+ &.card-flush {
+ > .card-header {
+ border-bottom: 0 !important;
+ }
+
+ > .card-footer {
+ border-top: 0 !important;
+ }
+ }
+
+ // Enable shadow
+ &.card-shadow {
+ box-shadow: var(--kt-card-box-shadow);
+ border: 0;
+ }
+
+ // Reset styles
+ &.card-reset {
+ border: 0 !important;
+ box-shadow: none !important;
+ background-color: transparent !important;
+
+ > .card-header {
+ border-bottom: 0 !important;
+ }
+
+ > .card-footer {
+ border-top: 0 !important;
+ }
+ }
+}
+
+// Responsive stretch heights
+.card {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ // Stretch
+ &.card#{$infix}-stretch {
+ height: calc(100% - var(--bs-gutter-y));
+ }
+
+ // Stretch 75
+ &.card#{$infix}-stretch-75 {
+ height: calc(75% - var(--bs-gutter-y));
+ }
+
+ // Stretch 50
+ &.card#{$infix}-stretch-50 {
+ height: calc(50% - var(--bs-gutter-y));
+ }
+
+ // Stretch 33
+ &.card#{$infix}-stretch-33 {
+ height: calc(33.333% - var(--bs-gutter-y));
+ }
+
+ // Stretch 25
+ &.card#{$infix}-stretch-25 {
+ height: calc(25% - var(--bs-gutter-y));
+ }
+
+ // Header stretch
+ .card-header#{$infix}-stretch {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ align-items: stretch;
+
+ .card-toolbar {
+ margin: 0;
+ align-items: stretch;
+ }
+ }
+ }
+ }
+}
+
+// Utilities
+.card-p {
+ padding: $card-py $card-px !important;
+}
+
+.card-px {
+ padding-left: $card-px !important;
+ padding-right: $card-px !important;
+}
+
+.card-shadow {
+ box-shadow: var(--kt-card-box-shadow);
+}
+
+.card-py {
+ padding-top: $card-py !important;
+ padding-bottom: $card-py !important;
+}
+
+.card-rounded {
+ border-radius: $card-border-radius;
+}
+
+.card-rounded-start {
+ border-top-left-radius: $card-border-radius;
+ border-bottom-left-radius: $card-border-radius;
+}
+
+.card-rounded-end {
+ border-top-right-radius: $card-border-radius;
+ border-bottom-right-radius: $card-border-radius;
+}
+
+.card-rounded-top {
+ border-top-left-radius: $card-border-radius;
+ border-top-right-radius: $card-border-radius;
+}
+
+.card-rounded-bottom {
+ border-bottom-left-radius: $card-border-radius;
+ border-bottom-right-radius: $card-border-radius;
+}
+
+// Mobile mode
+@include media-breakpoint-down(md) {
+ .card {
+ > .card-header:not(.flex-nowrap) {
+ padding-top: $card-header-py;
+ padding-bottom: $card-header-py;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_carousel.scss b/src/_res/assets/sass/core/components/_carousel.scss
new file mode 100644
index 0000000..a4b5beb
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_carousel.scss
@@ -0,0 +1,130 @@
+//
+// Carousel
+//
+
+
+.carousel-custom {
+ // Indicators
+ .carousel-indicators {
+ align-items: center;
+ position: static;
+ z-index: auto;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ li {
+ transform: none;
+ opacity: 1;
+
+ &.active {
+ transform: none;
+ opacity: 1;
+ }
+ }
+
+ // Dots style
+ &.carousel-indicators-dots {
+ li {
+ border-radius: 0;
+ background-color: transparent;
+ height: $carousel-custom-dots-indicator-active-size;
+ width: $carousel-custom-dots-indicator-active-size;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+
+ &:after {
+ display: inline-block;
+ content: " ";
+ @include border-radius(50%);
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ background-color: var(--kt-carousel-custom-indicator-default-bg-color);
+ height: $carousel-custom-dots-indicator-default-size;
+ width: $carousel-custom-dots-indicator-default-size;
+ }
+
+ &.active {
+ background-color: transparent;
+
+ &:after {
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ height: $carousel-custom-dots-indicator-active-size;
+ width: $carousel-custom-dots-indicator-active-size;
+ background-color: var(--kt-carousel-custom-indicator-active-bg-color);
+ }
+ }
+ }
+ }
+
+ // Bullet style
+ &.carousel-indicators-bullet {
+ li {
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ background-color: transparent;
+ border-radius: $carousel-custom-bullet-indicator-default-size;
+ height: $carousel-custom-bullet-indicator-default-size;
+ width: $carousel-custom-bullet-indicator-default-size;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+
+ &:after {
+ display: inline-block;
+ content: " ";
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ background-color: var(--kt-carousel-custom-bullet-indicator-default-bg-color);
+ border-radius: $carousel-custom-bullet-indicator-default-size;
+ height: $carousel-custom-bullet-indicator-default-size;
+ width: $carousel-custom-bullet-indicator-default-size;
+ }
+
+ &.active {
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ background-color: transparent;
+ height: $carousel-custom-bullet-indicator-default-size;
+ width: $carousel-custom-bullet-indicator-active-width;
+
+ &:after {
+ transition: all $carousel-custom-indicator-transition-speed ease;
+ height: $carousel-custom-bullet-indicator-default-size;
+ width: $carousel-custom-bullet-indicator-active-width;
+ background-color: var(--kt-carousel-custom-bullet-indicator-active-bg-color);
+ }
+ }
+ }
+ }
+ }
+
+ // Theme colors
+ @each $name, $value in $theme-colors {
+ .carousel-indicators-active-#{$name} {
+ li.active:after {
+ background-color: $value !important;
+ }
+ }
+ }
+
+ // Stretch mode
+ &.carousel-stretch {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .carousel-inner {
+ flex-grow: 1;
+ }
+
+ .carousel-item {
+ height: 100%;
+ }
+
+ .carousel-wrapper {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_close.scss b/src/_res/assets/sass/core/components/_close.scss
new file mode 100644
index 0000000..6c3e529
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_close.scss
@@ -0,0 +1,14 @@
+//
+// Close
+//
+
+.btn-close {
+ color: var(--kt-btn-close-color);
+ background-image: var(--kt-btn-close-bg);
+ background-position: center;
+
+
+ &:hover {
+ color: var(--kt-btn-close-color);
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_code.scss b/src/_res/assets/sass/core/components/_code.scss
new file mode 100644
index 0000000..b01d5a2
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_code.scss
@@ -0,0 +1,15 @@
+//
+// Code
+//
+
+code:not([class*="language-"]) {
+ font-weight: $code-font-weight;
+ color: var(--kt-code-color);
+ line-height: inherit;
+ font-size: inherit;
+ background-color: var(--kt-code-bg);
+ padding: $code-padding;
+ margin: $code-margin;
+ box-shadow: var(--kt-code-box-shadow);
+ @include border-radius($code-border-radius);
+}
diff --git a/src/_res/assets/sass/core/components/_cookiealert.scss b/src/_res/assets/sass/core/components/_cookiealert.scss
new file mode 100644
index 0000000..539756e
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_cookiealert.scss
@@ -0,0 +1,8 @@
+//
+// Cookie Alert
+//
+
+.cookiealert{
+ background: inherit;
+ color: inherit;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_drawer.scss b/src/_res/assets/sass/core/components/_drawer.scss
new file mode 100644
index 0000000..bfb97b8
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_drawer.scss
@@ -0,0 +1,62 @@
+//
+// Drawer
+//
+
+// Drawer
+.drawer {
+ display: flex !important;
+ overflow: auto;
+ z-index: $drawer-z-index;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ background-color: var(--kt-drawer-bg-color);
+ transition: transform $drawer-transition-speed ease-in-out !important;
+
+ &.drawer-start {
+ left: 0;
+ transform: translateX(-100%);
+ }
+
+ &.drawer-end {
+ right: 0;
+ transform: translateX(100%);
+ }
+
+ &.drawer-on {
+ transform: none;
+ box-shadow: var(--kt-drawer-box-shadow);
+ transition: transform $drawer-transition-speed ease-in-out !important;
+ }
+}
+
+// Drawer Overlay
+.drawer-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ overflow: hidden;
+ z-index: $drawer-z-index - 1;
+ background-color: var(--kt-drawer-overlay-bg-color);
+ animation: animation-drawer-fade-in $drawer-overlay-animation-speed ease-in-out 1;
+}
+
+// Initial state
+[data-kt-drawer="true"] {
+ display: none;
+}
+
+// Animation
+@keyframes animation-drawer-fade-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+// Tablet & Mobile Modes
+@include media-breakpoint-down(lg) {
+ body[data-kt-drawer="on"] {
+ overflow: hidden;
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_dropdown.scss b/src/_res/assets/sass/core/components/_dropdown.scss
new file mode 100644
index 0000000..0b307d8
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_dropdown.scss
@@ -0,0 +1,16 @@
+
+// The dropdown menu
+.dropdown-menu {
+ --#{$prefix}dropdown-color: var(--kt-dropdown-color);
+ --#{$prefix}dropdown-bg: var(--kt-dropdown-bg);
+ --#{$prefix}dropdown-border-color: var(--kt-dropdown-border-color);
+ --#{$prefix}dropdown-divider-bg: var(--kt-dropdown-divider-bg);
+ --#{$prefix}dropdown-box-shadow: var(--kt-dropdown-box-shadow);
+ --#{$prefix}dropdown-link-color: var(--kt-dropdown-link-color);
+ --#{$prefix}dropdown-link-hover-color: var(--kt-dropdown-link-hover-color);
+ --#{$prefix}dropdown-link-hover-bg: var(--kt-dropdown-link-hover-bg);
+ --#{$prefix}dropdown-link-active-color: var(--kt-dropdown-link-active-color);
+ --#{$prefix}dropdown-link-active-bg: var(--kt-dropdown-link-active-bg);
+ --#{$prefix}dropdown-link-disabled-color: var(--kt-dropdown-link-disabled-color);
+ --#{$prefix}dropdown-header-color: var(--kt-dropdown-header-color);
+}
diff --git a/src/_res/assets/sass/core/components/_engage.scss b/src/_res/assets/sass/core/components/_engage.scss
new file mode 100644
index 0000000..a0290dc
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_engage.scss
@@ -0,0 +1,20 @@
+//
+// Engage panel(used for demo product demo)
+//
+
+.engage-btn {
+ display: flex;
+ align-items: center;
+ height: 35px !important;
+
+ @include button-custom-variant(
+ $color: var(--kt-engage-btn-color),
+ $icon-color: var(--kt-engage-btn-color),
+ $border-color: var(--kt-engage-btn-bg),
+ $bg-color: var(--kt-engage-btn-bg),
+ $color-active: var(--kt-engage-btn-color-active),
+ $icon-color-active: var(--kt-engage-btn-color-active),
+ $border-color-active: var(--kt-engage-btn-bg),
+ $bg-color-active: var(--kt-engage-btn-bg)
+ );
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_explore.scss b/src/_res/assets/sass/core/components/_explore.scss
new file mode 100644
index 0000000..049ff4c
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_explore.scss
@@ -0,0 +1,104 @@
+//
+// Explore(used for demo product demo)
+//
+
+$explore-primary: #00B2FF;
+$explore-primary-light: #F1FAFF;
+$explore-primary-active: #0098DA;
+$explore-primary-inverse: $white;
+
+$explore-success: #50CD89;
+$explore-success-light: #E8FFF3;
+$explore-success-active: #47BE7D;
+$explore-success-inverse: $white;
+
+$explore-warning: #FFC700;
+$explore-warning-inverse: $white;
+
+$explore-danger: #F1416C;
+$explore-warning-inverse: $white;
+
+.explore-btn-toggle {
+ color: var(--kt-gray-600);
+ background-color: $white;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: $explore-primary-inverse;
+ background-color: $explore-primary;
+ }
+}
+
+.explore-btn-dismiss {
+ border: 0;
+
+ &:hover {
+ i,
+ .svg-icon {
+ color: $explore-primary;
+ }
+ }
+}
+
+.explore-btn-primary {
+ border: 0;
+ color: $explore-primary-inverse;
+ background-color: $explore-primary;
+
+ &:hover {
+ color: $explore-primary-inverse;
+ background-color: $explore-primary-active;
+ }
+}
+
+.explore-btn-secondary {
+ border: 0;
+ color: var(--kt-gray-600);
+ background-color: var(--kt-gray-100);
+
+ &:hover {
+ color: var(--kt-gray-800);
+ background-color: var(--kt-gray-200);
+ }
+}
+
+.explore-btn-outline {
+ border: 1px dashed var(--kt-gray-300) !important;
+
+ &:hover,
+ &.active {
+ border: 1px dashed $explore-success !important;
+ background-color: $explore-success-light;
+ }
+}
+
+.explore-link {
+ color: $explore-primary;
+
+ &:hover {
+ color: $explore-primary-active;
+ }
+}
+
+.explore-link-hover:hover {
+ color: $explore-primary !important;
+}
+
+.explore-icon-success {
+ color: $explore-success;
+}
+
+.explore-icon-danger {
+ color: $explore-danger;
+}
+
+.explore-label-free {
+ color: $explore-warning-inverse;
+ background-color: $explore-warning;
+}
+
+.explore-label-pro {
+ color: $explore-success-inverse;
+ background-color: $explore-success;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_feedback.scss b/src/_res/assets/sass/core/components/_feedback.scss
new file mode 100644
index 0000000..5b2844f
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_feedback.scss
@@ -0,0 +1,34 @@
+//
+// Loading
+//
+
+.feedback {
+ display: none;
+}
+
+.feedback-popup {
+ display: flex;
+ justify-content: center;
+ margin: 0 auto;
+ position: fixed;
+ z-index: $feedback-popup-z-index;
+ box-shadow: var(--kt-feedback-popup-box-shadow);
+ background-color: var(--kt-feedback-popup-background-color);
+ border-radius: $feedback-popup-border-radius;
+ padding: $feedback-popup-padding;
+}
+
+// Placement
+.feedback-top-center {
+ display: flex;
+ transition: top $feedback-popup-transition-speed ease;
+ left: 50%;
+ transform: translateX(-50%);
+ @include border-top-start-radius(0);
+ @include border-top-end-radius(0);
+
+ &.feedback-shown {
+ top: 0px;
+ transition: top $feedback-popup-transition-speed ease;
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_fixed.scss b/src/_res/assets/sass/core/components/_fixed.scss
new file mode 100644
index 0000000..c4935c4
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_fixed.scss
@@ -0,0 +1,18 @@
+//
+// Fixed
+//
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .fixed-top#{$infix} {
+ position: fixed;
+ z-index: $fixed-z-index;
+ top: 0;
+ left: 0;
+ right: 0;
+ }
+ }
+}
+
diff --git a/src/_res/assets/sass/core/components/_forms.scss b/src/_res/assets/sass/core/components/_forms.scss
new file mode 100644
index 0000000..7e5f3ae
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_forms.scss
@@ -0,0 +1,19 @@
+//
+// Forms
+//
+
+// Import Dependencies
+@import "forms/labels";
+@import "forms/form-text";
+@import "forms/form-control";
+@import "forms/form-select";
+@import "forms/form-check";
+@import "forms/floating-labels";
+@import "forms/input-group";
+
+@import "forms/form-control-solid";
+@import "forms/form-select-solid";
+@import "forms/form-check-solid";
+@import "forms/input-group-solid";
+@import "forms/floating-labels";
+@import "forms/required";
diff --git a/src/_res/assets/sass/core/components/_helpers.scss b/src/_res/assets/sass/core/components/_helpers.scss
new file mode 100644
index 0000000..803a272
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_helpers.scss
@@ -0,0 +1,12 @@
+//
+// Helpers
+//
+
+// Import Dependencies
+@import "helpers/background";
+@import "helpers/borders";
+@import "helpers/flex";
+@import "helpers/shadow";
+@import "helpers/text";
+@import "helpers/opacity";
+@import "helpers/transform";
diff --git a/src/_res/assets/sass/core/components/_hover.scss b/src/_res/assets/sass/core/components/_hover.scss
new file mode 100644
index 0000000..66650db
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_hover.scss
@@ -0,0 +1,48 @@
+//
+// Hover effects
+//
+
+.hover-elevate-up {
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: translateY(-5%);
+ transition: transform 0.3s ease;
+ }
+}
+
+.hover-elevate-down {
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: translateY(5%);
+ transition: transform 0.3s ease;
+ }
+}
+
+.hover-scale {
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: scale(1.1);
+ transition: transform 0.3s ease;
+ }
+}
+
+.hover-rotate-end {
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: rotate(4deg);
+ transition: transform 0.3s ease;
+ }
+}
+
+.hover-rotate-start {
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: rotate(-4deg);
+ transition: transform 0.3s ease;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_image-input.scss b/src/_res/assets/sass/core/components/_image-input.scss
new file mode 100644
index 0000000..c08f0ae
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_image-input.scss
@@ -0,0 +1,111 @@
+//
+// Avatar
+//
+
+
+// Base
+.image-input {
+ position: relative;
+ display: inline-block;
+ @include border-radius($border-radius);
+ background-repeat: no-repeat;
+ background-size: cover;
+
+ // Empty state
+ &:not(.image-input-empty) {
+ background-image: none !important;
+ }
+
+ // Wrapper
+ .image-input-wrapper {
+ width: 120px;
+ height: 120px;
+ @include border-radius($border-radius);
+ background-repeat: no-repeat;
+ background-size: cover;
+ }
+
+ // Actions
+ [data-kt-image-input-action] {
+ cursor: pointer;
+ position: absolute;
+ transform: translate(-50%,-50%);
+ }
+
+ // Change Button
+ [data-kt-image-input-action="change"] {
+ left: 100%;
+ top: 0;
+
+ input {
+ width: 0 !important;
+ height: 0 !important;
+ overflow: hidden;
+ opacity: 0;
+ }
+ }
+
+ // Cancel & Remove Buttons
+ [data-kt-image-input-action="cancel"],
+ [data-kt-image-input-action="remove"] {
+ position: absolute;
+ left: 100%;
+ top: 100%;
+ }
+
+ [data-kt-image-input-action="cancel"] {
+ display: none;
+ }
+
+ // Input Changed State
+ &.image-input-changed {
+ [data-kt-image-input-action="cancel"] {
+ display: flex;
+ }
+
+ [data-kt-image-input-action="remove"] {
+ display: none;
+ }
+ }
+
+ // Input Empty State
+ &.image-input-empty {
+ [data-kt-image-input-action="remove"],
+ [data-kt-image-input-action="cancel"] {
+ display: none;
+ }
+ }
+
+ // Circle style
+ &.image-input-circle {
+ border-radius: 50%;
+
+ // Wrapper
+ .image-input-wrapper {
+ border-radius: 50%;
+ }
+
+ // Change Control
+ [data-kt-image-input-action="change"] {
+ left: 100%;
+ top: 0;
+ transform: translate(-100%, 0%);
+ }
+
+ // Cancel & Remove Buttons
+ [data-kt-image-input-action="cancel"],
+ [data-kt-image-input-action="remove"] {
+ left: 100%;
+ top: 100%;
+ transform: translate(-100%,-100%);
+ }
+ }
+
+ // Bordered style
+ &.image-input-outline {
+ .image-input-wrapper {
+ border: 3px solid var(--kt-body-bg);
+ box-shadow: var(--kt-box-shadow);
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_images.scss b/src/_res/assets/sass/core/components/_images.scss
new file mode 100644
index 0000000..b0317f8
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_images.scss
@@ -0,0 +1,12 @@
+
+
+// Image thumbnails
+.img-thumbnail {
+ background-color: var(--kt-thumbnail-bg);
+ border: $thumbnail-border-width solid var(--kt-thumbnail-border-color);
+ @include box-shadow(var(--kt-thumbnail-box-shadow));
+}
+
+.figure-caption {
+ color: var(--kt-figure-caption-color);
+}
diff --git a/src/_res/assets/sass/core/components/_indicator.scss b/src/_res/assets/sass/core/components/_indicator.scss
new file mode 100644
index 0000000..d74a923
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_indicator.scss
@@ -0,0 +1,17 @@
+//
+// Indicator
+//
+
+.indicator-progress {
+ display: none;
+
+ [data-kt-indicator="on"] > & {
+ display: inline-block;
+ }
+}
+
+.indicator-label {
+ [data-kt-indicator="on"] > & {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_list-group.scss b/src/_res/assets/sass/core/components/_list-group.scss
new file mode 100644
index 0000000..5562fbd
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_list-group.scss
@@ -0,0 +1,19 @@
+//
+// List group
+//
+
+.list-group {
+ --#{$prefix}list-group-color: var(--kt-list-group-color);
+ --#{$prefix}list-group-bg: var(--kt-list-group-bg);
+ --#{$prefix}list-group-border-color: var(--kt-list-group-border-color);
+ --#{$prefix}list-group-action-color: var(--kt-list-group-action-color);
+ --#{$prefix}list-group-action-hover-color: var(--kt-list-group-action-hover-color);
+ --#{$prefix}list-group-action-hover-bg: var(--kt-list-group-hover-bg);
+ --#{$prefix}list-group-action-active-color: var(--kt-list-group-action-active-color);
+ --#{$prefix}list-group-action-active-bg: var(--kt-list-group-action-active-bg);
+ --#{$prefix}list-group-disabled-color: var(--kt-list-group-disabled-color);
+ --#{$prefix}list-group-disabled-bg: var(--kt-list-group-disabled-bg);
+ --#{$prefix}list-group-active-color: var(--kt-list-group-active-color);
+ --#{$prefix}list-group-active-bg: var(--kt-list-group-active-bg);
+ --#{$prefix}list-group-active-border-color: var(--kt-list-group-active-border-color);
+}
diff --git a/src/_res/assets/sass/core/components/_menu.scss b/src/_res/assets/sass/core/components/_menu.scss
new file mode 100644
index 0000000..8564e7c
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_menu.scss
@@ -0,0 +1,7 @@
+//
+// Menu
+//
+
+// Import Dependencies
+@import "menu/base";
+@import "menu/theme";
diff --git a/src/_res/assets/sass/core/components/_mixins.scss b/src/_res/assets/sass/core/components/_mixins.scss
new file mode 100644
index 0000000..522cbf0
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_mixins.scss
@@ -0,0 +1,16 @@
+//
+// Mixins
+//
+
+// Import Dependencies
+@import "mixins/theme-mode";
+@import "mixins/menu";
+@import "mixins/tooltip";
+@import "mixins/popover";
+@import "mixins/buttons";
+@import "mixins/ki";
+@import "mixins/symbol";
+@import "mixins/svg-icon";
+@import "mixins/svg-bg-icon";
+@import "mixins/scroll";
+@import "mixins/shape";
diff --git a/src/_res/assets/sass/core/components/_modal.scss b/src/_res/assets/sass/core/components/_modal.scss
new file mode 100644
index 0000000..547fcb5
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_modal.scss
@@ -0,0 +1,65 @@
+//
+// Modal
+//
+
+.modal {
+ --#{$prefix}modal-color: var(--kt-modal-content-color);
+ --#{$prefix}modal-bg: var(--kt-modal-content-bg);
+ --#{$prefix}modal-border-color: var(--kt-modal-content-border-color);
+ --#{$prefix}modal-box-shadow: var(--kt-modal-content-box-shadow-xs);
+ --#{$prefix}modal-header-border-color: var(--kt-modal-header-border-color);
+ --#{$prefix}modal-footer-bg: var(--kt-modal-footer-bg);
+ --#{$prefix}modal-footer-border-color: var(--kt-modal-footer-border-color);
+}
+
+ // Mobile dialog
+.modal-dialog {
+ outline: none !important;
+}
+
+// Modal header
+.modal-header {
+ align-items: center;
+ justify-content: space-between;
+ @include border-top-radius($modal-content-border-radius);
+ border-bottom: $modal-header-border-width solid var(--kt-modal-header-border-color);
+
+ // Headings
+ h1,h2,h3,h4,h5,h6 {
+ margin-bottom: 0;
+ }
+}
+
+// Modal content
+.modal-content {
+ color: var(--kt-modal-color);
+ background-color: var(--kt-modal-bg);
+ border: $modal-content-border-width solid var(--kt-modal-border-color);
+ @include box-shadow(var(--kt-modal-box-shadow));
+}
+
+// Modal footer
+.modal-footer {
+ background-color: var(--kt-modal-footer-bg);
+ border-top: $modal-footer-border-width solid var(--#{$prefix}modal-footer-border-color);
+}
+
+// Modal background
+.modal-backdrop {
+ --#{$prefix}backdrop-bg: var(--kt-modal-backdrop-bg);
+ --#{$prefix}backdrop-opacity: var(--kt-modal-backdrop-opacity);
+}
+
+// Scale up the modal
+@include media-breakpoint-up(sm) {
+ .modal-content {
+ @include box-shadow(var(--kt-modal-box-shadow-sm-up));
+ }
+}
+
+// Utilities
+.modal-rounded {
+ @if $enable-rounded {
+ border-radius: $modal-content-border-radius !important;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_nav-line-tabs.scss b/src/_res/assets/sass/core/components/_nav-line-tabs.scss
new file mode 100644
index 0000000..e821c67
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_nav-line-tabs.scss
@@ -0,0 +1,68 @@
+//
+// Nav
+//
+
+// Line tabs
+.nav-line-tabs {
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: var(--kt-border-color);
+
+ .nav-item {
+ margin-bottom: -1px;
+
+ // Base link
+ .nav-link {
+ color: var(--kt-gray-500);
+ border: 0;
+ border-bottom: 1px solid transparent;
+ transition: $transition-link;
+ padding: 0.5rem 0;
+ margin: 0 1rem;
+ }
+
+ // First Item
+ &:first-child {
+ .nav-link {
+ margin-left: 0;
+ }
+ }
+
+ // Last Item
+ &:last-child {
+ .nav-link {
+ margin-right: 0;
+ }
+ }
+ }
+
+ // Active & Hover States
+ .nav-item .nav-link.active,
+ .nav-item.show .nav-link,
+ .nav-item .nav-link:hover:not(.disabled) {
+ background-color: transparent;
+ border: 0;
+ border-bottom: 1px solid var(--kt-primary);
+ transition: $transition-link;
+ }
+
+ // 2x Line
+ &.nav-line-tabs-2x {
+ border-bottom-width: 2px;
+
+ .nav-item {
+ margin-bottom: -2px;
+
+ .nav-link {
+ border-bottom-width: 2px;
+ }
+ }
+
+ // Active & Hover States
+ .nav-item .nav-link.active,
+ .nav-item.show .nav-link,
+ .nav-item .nav-link:hover:not(.disabled) {
+ border-bottom-width: 2px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_nav-pills-custom.scss b/src/_res/assets/sass/core/components/_nav-pills-custom.scss
new file mode 100644
index 0000000..f9821f5
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_nav-pills-custom.scss
@@ -0,0 +1,91 @@
+//
+// Custom Nav Pills
+//
+
+.nav.nav-pills.nav-pills-custom {
+ // States
+ .show > .nav-link,
+ .nav-link{
+ border: 1px dashed var(--kt-border-dashed-color);
+ @include border-radius($border-radius-lg);
+
+ &.nav-link-border-solid {
+ border: 3px solid var(--kt-border-dashed-color);
+
+ &.active {
+ border: 3px solid var(--kt-primary);
+ }
+ }
+
+ .nav-icon {
+ img {
+ width: 30px;
+ transition: $transition-link;
+
+ &.default {
+ display: inline-block;
+ }
+
+ &.active {
+ display: none;
+ }
+ }
+ }
+
+ &.active {
+ background-color: transparent;
+ border: 1px solid var(--kt-border-dashed-color);
+ transition-duration: 1ms;
+ position: relative;
+
+ .nav-text {
+ color: var(--kt-gray-800) !important;
+ transition: $transition-link;
+ }
+
+ .bullet-custom {
+ display: block;
+ }
+ }
+
+ .bullet-custom {
+ display: none;
+ }
+ }
+
+ &.nav-pills-active-custom {
+ .nav-item {
+ .nav-link {
+ &:not(:active) {
+ span:nth-child(1) {
+ color: #B5B5C3;
+ }
+
+ span:nth-child(2) {
+ color: #3F4254;
+ }
+ }
+
+ &:hover {
+ span:nth-child(1) {
+ color: $white !important;
+ }
+
+ span:nth-child(2) {
+ color: $white !important;
+ }
+ }
+
+ &.active {
+ span:nth-child(1) {
+ color: $white !important;
+ }
+
+ span:nth-child(2) {
+ color: $white !important;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_nav.scss b/src/_res/assets/sass/core/components/_nav.scss
new file mode 100644
index 0000000..5a0fe51
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_nav.scss
@@ -0,0 +1,93 @@
+//
+// Nav
+//
+
+// Basic
+.nav {
+ --#{$prefix}nav-link-color: var(--kt-nav-link-color);
+ --#{$prefix}nav-link-hover-color: var(--kt-nav-link-hover-color);
+ --#{$prefix}nav-link-disabled-color: var(--kt-nav-link-disabled-color);
+}
+
+// Tabs
+.nav-tabs {
+ --#{$prefix}nav-tabs-border-color: var(--kt-nav-tabs-border-color);
+ --#{$prefix}nav-tabs-link-hover-border-color: var(--kt-nav-tabs-link-hover-border-color);
+ --#{$prefix}nav-tabs-link-active-color: var(--kt-nav-tabs-link-active-color);
+ --#{$prefix}nav-tabs-link-active-bg: var(--kt-nav-tabs-link-active-bg);
+ --#{$prefix}nav-tabs-link-active-border-color: var(--kt-nav-tabs-link-active-border-color);
+}
+
+// Pills
+.nav-pills {
+ --#{$prefix}nav-pills-link-active-color: var(--kt-nav-pills-link-active-color);
+ --#{$prefix}nav-pills-link-active-bg: var(--kt-nav-pills-link-active-bg);
+}
+
+// Nav pills
+.nav-pills {
+ .nav-item {
+ margin-right: 0.5rem;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+}
+
+// Stretch items
+.nav-stretch {
+ align-items: stretch;
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+
+ .nav-item {
+ display: flex;
+ align-items: stretch;
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ }
+
+ .nav-link {
+ display: flex;
+ align-items: center;
+ }
+}
+
+// Nav group
+.nav-group {
+ padding: 0.35rem;
+ @include border-radius($border-radius);
+ background-color: var(--kt-gray-100);
+
+ // Outline nav group
+ &.nav-group-outline {
+ background-color: transparent;
+ border: 1px solid var(--kt-border-color);
+ }
+
+ // Fluid option
+ &.nav-group-fluid {
+ display: flex;
+
+ > label,
+ > .btn {
+ position: relative;
+ flex-shrink: 0;
+ flex-grow: 1;
+ flex-basis: 0;
+ }
+
+ > label {
+ margin-right: 0.1rem;
+
+ > .btn {
+ width: 100%;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_offcanvas.scss b/src/_res/assets/sass/core/components/_offcanvas.scss
new file mode 100644
index 0000000..1da1c90
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_offcanvas.scss
@@ -0,0 +1,6 @@
+%offcanvas-css-vars {
+ --#{$prefix}offcanvas-color: var(--kt-offcanvas-color);
+ --#{$prefix}offcanvas-bg: var(--kt-offcanvas-bg-color);
+ --#{$prefix}offcanvas-border-color: var(--kt-offcanvas-border-color);
+ --#{$prefix}offcanvas-box-shadow: var(--kt-offcanvas-box-shadow);
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_overlay.scss b/src/_res/assets/sass/core/components/_overlay.scss
new file mode 100644
index 0000000..75ffa69
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_overlay.scss
@@ -0,0 +1,35 @@
+//
+// Demo
+//
+
+
+.overlay {
+ position: relative;
+
+ .overlay-layer {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--kt-overlay-bg);
+ transition: all 0.3s ease;
+ opacity: 0;
+ }
+
+ &.overlay-show,
+ &.overlay-block,
+ &:hover {
+ .overlay-layer {
+ transition: all 0.3s ease;
+ opacity: 1;
+ }
+ }
+
+ &.overlay-block {
+ cursor: wait;
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_page-loader.scss b/src/_res/assets/sass/core/components/_page-loader.scss
new file mode 100644
index 0000000..5497dd8
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_page-loader.scss
@@ -0,0 +1,28 @@
+//
+// Page loader(used by the previous layout system)
+//
+
+// CSS3 Transitions only after page load(.page-loading class added to body tag and remove with JS on page load)
+[data-kt-app-page-loading="on"] *,
+.page-loading * {
+ transition: none !important;
+}
+
+// Base
+.page-loader {
+ background: var(--kt-body-bg);
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ display: none;
+
+ [data-kt-app-page-loading="on"] &,
+ .page-loading & {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_pagination.scss b/src/_res/assets/sass/core/components/_pagination.scss
new file mode 100644
index 0000000..7aa3538
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_pagination.scss
@@ -0,0 +1,193 @@
+//
+// Pagination
+//
+
+.pagination {
+ --#{$prefix}pagination-color: var(--kt-pagination-color);
+ --#{$prefix}pagination-bg: var(--kt-pagination-bg);
+ --#{$prefix}pagination-border-color: var(--kt-pagination-border-color);
+ --#{$prefix}pagination-hover-color: var(--kt-pagination-hover-color);
+ --#{$prefix}pagination-hover-bg: var(--kt-pagination-hover-bg);
+ --#{$prefix}pagination-hover-border-color: var(--kt-pagination-hover-border-color);
+ --#{$prefix}pagination-focus-color: var(--kt-pagination-focus-color);
+ --#{$prefix}pagination-focus-bg: var(--kt-pagination-focus-bg);
+ --#{$prefix}pagination-focus-box-shadow: var(--kt-pagination-focus-box-shadow);
+ --#{$prefix}pagination-active-color: var(--kt-pagination-active-color);
+ --#{$prefix}pagination-active-bg: var(--kt-pagination-active-bg);
+ --#{$prefix}pagination-active-border-color: var(--kt-pagination-active-border-color);
+ --#{$prefix}pagination-disabled-color: var(--kt-pagination-disabled-color);
+ --#{$prefix}pagination-disabled-bg: var(--kt-pagination-disabled-bg);
+ --#{$prefix}pagination-disabled-border-color: var(--kt-pagination-disabled-border-color);
+
+ display:flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin: 0;
+
+ // Pagination circle
+ &.pagination-circle {
+ .page-link {
+ border-radius: 50%;
+ }
+ }
+
+ // Pagination outline
+ &.pagination-outline {
+ .page-link {
+ border: 1px solid var(--kt-border-color);
+ }
+
+ .page-item {
+ &:hover:not(.disabled),
+ &.active {
+ .page-link {
+ border-color: var(--kt-primary-light);
+ }
+ }
+ }
+ }
+}
+
+.page-item {
+ margin-right: $pagination-item-space;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .page-link {
+ display:flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: $btn-border-radius;
+ height: $pagination-item-height;
+ min-width: $pagination-item-height;
+ font-weight: $pagination-font-weight;
+ font-size: $pagination-font-size;
+
+ i {
+ font-size: $pagination-icon-font-size;
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .previous,
+ .next {
+ display: block;
+ height: $pagination-icon-height;
+ width: $pagination-icon-height;
+
+ /*rtl:raw:transform: rotateZ(-180deg);*/
+ }
+ /*rtl:end:ignore*/
+
+ .previous {
+ @include svg-bg-icon(arrow-start, $pagination-color);
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .next {
+ @include svg-bg-icon(arrow-end, $pagination-color);
+ }
+ }
+
+ &:focus {
+ .page-link {
+ color: var(--kt-pagination-focus-color);
+
+ .svg-icon,
+ i {
+ color: var(--kt-pagination-focus-color);
+ }
+
+ .previous {
+ @include svg-bg-icon(arrow-start, var(--kt-pagination-focus-color));
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .next {
+ @include svg-bg-icon(arrow-end, var(--kt-pagination-focus-color));
+ }
+ }
+ }
+
+ &:hover:not(.active):not(.offset):not(.disabled) {
+ .page-link {
+ color: var(--kt-pagination-hover-color);
+
+ &.page-text {
+ background-color: transparent;
+ }
+
+ .svg-icon,
+ i {
+ color: var(--kt-pagination-hover-color);
+ }
+
+ .previous {
+ @include svg-bg-icon(arrow-start, var(--kt-pagination-hover-color));
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .next {
+ @include svg-bg-icon(arrow-end, var(--kt-pagination-hover-color));
+ }
+ }
+ }
+
+ &.active {
+ .page-link {
+ color: var(--kt-pagination-active-color);
+
+ &.page-text {
+ background-color: transparent;
+ }
+
+ .svg-icon,
+ i {
+ color: var(--kt-pagination-active-color);;
+ }
+
+ .previous {
+ @include svg-bg-icon(arrow-start, var(--kt-pagination-active-color));
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .next {
+ @include svg-bg-icon(arrow-end, var(--kt-pagination-active-color));
+ }
+ }
+ }
+
+ &.disabled {
+ .page-link {
+ color: var(--kt-pagination-disabled-color);
+
+ .svg-icon,
+ i {
+ color: var(--kt-pagination-disabled-color);
+ }
+
+ .previous {
+ @include svg-bg-icon(arrow-start, var(--kt-pagination-disabled-color));
+ }
+
+ /*rtl:options:{"autoRename":false}*/
+ .next {
+ @include svg-bg-icon(arrow-end, var(--kt-pagination-disabled-color));
+ }
+ }
+ }
+ /*rtl:end:ignore*/
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .page-item {
+ margin-right: $pagination-item-space-tablet-and-mobile;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+}
+
diff --git a/src/_res/assets/sass/core/components/_popover.scss b/src/_res/assets/sass/core/components/_popover.scss
new file mode 100644
index 0000000..c7de66e
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_popover.scss
@@ -0,0 +1,53 @@
+//
+// Popover
+//
+
+
+// Base
+.popover {
+ --#{$prefix}popover-bg: var(--kt-popover-bg);
+ --#{$prefix}popover-border-color: var(--kt-popover-border-color);
+ --#{$prefix}popover-box-shadow: var(--kt-popover-box-shadow);
+ --#{$prefix}popover-header-color: var(--kt-popover-header-color);
+ --#{$prefix}popover-header-bg: var(--kt-popover-header-bg);
+ --#{$prefix}popover-body-color: var(--kt-popover-body-color);
+ --#{$prefix}popover-arrow-border: var(--kt-popover-bg);
+
+ .popover-header {
+ font-size: $popover-header-font-size;
+ font-weight: $popover-header-font-weight;
+ border-bottom: 1px solid var(--kt-popover-header-border-color);
+ }
+
+ .popover-dismiss {
+ position: absolute;
+ top: $popover-dissmis-btn-top;
+ right: $popover-dissmis-btn-end;
+ height: $popover-dissmis-btn-height;
+ width: $popover-dissmis-btn-height;
+ @include svg-bg-icon(close, var(--kt-gray-500)); // todo: revise
+ mask-size: 50%;
+ -webkit-mask-size: 50%;
+
+ &:hover {
+ background-color: var(--kt-primary);
+ }
+
+ & + .popover-header {
+ padding-right: $popover-body-padding-x + $popover-dissmis-btn-height;
+ }
+ }
+}
+
+// Inverse
+.popover-inverse {
+ @include popover-theme(
+ $bg-color: var(--kt-gray-900),
+ $border-color: var(--kt-gray-800),
+ $header-bg-color: var(--kt-gray-900),
+ $header-color: var(--kt-gray-200),
+ $body-color: var(--kt-gray-400),
+ $arrow-outer-color: var(--kt-gray-100),
+ $arrow-color: var(--kt-gray-900)
+ );
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_print.scss b/src/_res/assets/sass/core/components/_print.scss
new file mode 100644
index 0000000..ab7854b
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_print.scss
@@ -0,0 +1,34 @@
+//
+// Print Mode
+//
+
+// Add .print-content-only class to body element in order to allow printing only the content area
+@media print {
+ .print-content-only {
+ padding: 0 !important;
+ background: none !important;
+
+ .wrapper,
+ .page,
+ .page-title
+ .content,
+ .container,
+ .container-xxl,
+ .container-fluid {
+ background: none !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+
+ .aside,
+ .sidebar,
+ .scrolltop,
+ .header,
+ .footer,
+ .toolbar,
+ .drawer,
+ .btn {
+ display: none !important;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_progress.scss b/src/_res/assets/sass/core/components/_progress.scss
new file mode 100644
index 0000000..e085f1f
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_progress.scss
@@ -0,0 +1,35 @@
+//
+// Progress
+//
+
+// Base
+.progress {
+ --#{$prefix}progress-bg: var(--kt-progress-bg);
+ --#{$prefix}progress-box-shadow: var(--kt-progress-box-shadow);
+ --#{$prefix}progress-bar-color: var(--kt-progress-bar-color);
+ --#{$prefix}progress-bar-bg: var(--kt-progress-bar-bg);
+}
+
+// Vertical Position
+.progress-vertical {
+ display: flex;
+ align-items: stretch;
+ justify-content: space-between;
+
+ .progress {
+ height: 100%;
+ @include border-radius($border-radius);
+ display: flex;
+ align-items: flex-end;
+ margin-right: 1rem;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .progress-bar {
+ width: 8px;
+ @include border-radius($border-radius);
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_pulse.scss b/src/_res/assets/sass/core/components/_pulse.scss
new file mode 100644
index 0000000..24b612c
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_pulse.scss
@@ -0,0 +1,39 @@
+//
+// Pulse
+//
+
+
+// Base
+.pulse {
+ position: relative;
+
+ // Theme Colors
+ @each $name, $color in $theme-colors {
+ &.pulse-#{$name} {
+ .pulse-ring {
+ border-color: $color;
+ }
+ }
+ }
+}
+
+.pulse-ring {
+ display: block;
+ border-radius: 40px;
+ height: 40px;
+ width: 40px;
+ position: absolute;
+ animation: animation-pulse 3.5s ease-out;
+ animation-iteration-count: infinite;
+ opacity: 0;
+ border-width: 3px;
+ border-style: solid;
+ border-color: var(--kt-gray-500);
+}
+
+@keyframes animation-pulse {
+ 0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
+ 60% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
+ 65% {opacity: 1;}
+ 100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
+}
diff --git a/src/_res/assets/sass/core/components/_rating.scss b/src/_res/assets/sass/core/components/_rating.scss
new file mode 100644
index 0000000..b24eb76
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_rating.scss
@@ -0,0 +1,62 @@
+//
+// Rating
+//
+
+.rating {
+ display: flex;
+ align-items: center;
+}
+
+.rating-input {
+ position: absolute !important;
+ left: -9999px !important;
+
+ &[disabled] {
+ display: none;
+ }
+}
+
+.rating-label {
+ padding: 0;
+ margin: 0;
+
+ & > i,
+ & > .svg-icon {
+ line-height: 1;
+ color: var(--kt-rating-color-default);
+ }
+}
+
+label.rating-label {
+ cursor: pointer;
+}
+
+div.rating-label.checked,
+label.rating-label {
+ & > i,
+ & > .svg-icon {
+ color: var(--kt-rating-color-active);
+ }
+}
+
+.rating-input:checked ~ .rating-label {
+ & > i,
+ & > .svg-icon {
+ color: var(--kt-rating-color-default);
+ }
+}
+
+.rating:hover label.rating-label {
+ & > i,
+ & > .svg-icon {
+ color: var(--kt-rating-color-active);
+ }
+}
+
+label.rating-label:hover ~ .rating-label {
+ & > i,
+ & > .svg-icon {
+ color: var(--kt-rating-color-default);
+ }
+ color: var(--kt-rating-color-default);
+}
diff --git a/src/_res/assets/sass/core/components/_reboot.scss b/src/_res/assets/sass/core/components/_reboot.scss
new file mode 100644
index 0000000..9f94268
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_reboot.scss
@@ -0,0 +1,8 @@
+//
+// Reboot
+//
+
+h1, h2, h3, h4, h5, h6 {
+ color: var(--kt-headings-color);
+ outline: 0;
+}
diff --git a/src/_res/assets/sass/core/components/_ribbon.scss b/src/_res/assets/sass/core/components/_ribbon.scss
new file mode 100644
index 0000000..c9bf53a
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_ribbon.scss
@@ -0,0 +1,195 @@
+//
+// Ribbon
+//
+
+// Base
+.ribbon {
+ position: relative;
+
+ // Ribbon target
+ .ribbon-label {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 5px 10px;
+ position: absolute;
+ z-index: 1;
+ background-color: var(--kt-ribbon-label-bg);
+ box-shadow: var(--kt-ribbon-label-box-shadow);
+ color: var(--kt-primary-inverse);
+ top: 50%;
+ right: 0;
+ transform: translateX(5px) translateY(-50%);
+
+ > .ribbon-inner {
+ z-index: -1;
+ position: absolute;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+
+ &:after {
+ border-color: var(--kt-ribbon-label-border-color);
+ }
+ }
+
+ // Vertical aligment
+ &-vertical {
+ .ribbon-label {
+ padding: 5px 10px;
+ min-width: 36px;
+ min-height: 46px;
+ text-align: center;
+ }
+ }
+
+ &.ribbon-top {
+ .ribbon-label {
+ top: 0;
+ transform: translateX(-15px) translateY(-4px);
+ border-bottom-right-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+ }
+ }
+
+ &.ribbon-bottom {
+ .ribbon-label {
+ border-top-right-radius: $border-radius;
+ border-top-left-radius: $border-radius;
+ }
+ }
+
+ &.ribbon-start {
+ .ribbon-label {
+ top: 50%;
+ left: 0;
+ right: auto;
+ transform: translateX(-5px) translateY(-50%);
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+ }
+ }
+
+ &.ribbon-end {
+ .ribbon-label {
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+ }
+ }
+}
+
+// Clip style
+.ribbon.ribbon-clip {
+ &.ribbon-start {
+ .ribbon-label {
+ left: -5px;
+
+ .ribbon-inner {
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ border-style: solid;
+ border-color: transparent !important;
+ bottom: -10px;
+ }
+
+ &:before {
+ border-width: 0 10px 10px 0;
+ border-right-color: var(--kt-ribbon-clip-bg) !important;
+ left: 0;
+ }
+ }
+ }
+ }
+
+ &.ribbon-end {
+ .ribbon-label {
+ right: -5px;
+
+ .ribbon-inner {
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ border-style: solid;
+ border-color: transparent !important;
+ bottom: -10px;
+ }
+
+ &:before {
+ border-width: 0 0 10px 10px;
+ border-left-color: var(--kt-ribbon-clip-bg) !important;
+ right: 0;
+ }
+ }
+ }
+ }
+}
+
+// Triangle style
+.ribbon.ribbon-triangle {
+ position: absolute;
+ z-index: 1;
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+
+ // Top start position
+ &.ribbon-top-start {
+ top: 0;
+ left: 0;
+ width: 4rem;
+ height: 4rem;
+ border-bottom: solid 2rem transparent !important;
+ border-left: solid 2rem transparent;
+ border-right: solid 2rem transparent !important;
+ border-top: solid 2rem transparent;
+ }
+
+ // Top end position
+ &.ribbon-top-end {
+ top: 0;
+ right: 0;
+ width: 4rem;
+ height: 4rem;
+ border-bottom: solid 2rem transparent !important;
+ border-left: solid 2rem transparent !important;
+ border-right: solid 2rem transparent;
+ border-top: solid 2rem transparent;
+ }
+
+ // Botton start position
+ &.ribbon-bottom-start {
+ bottom: 0;
+ left: 0;
+ width: 4rem;
+ height: 4rem;
+ border-bottom: solid 2rem transparent;
+ border-left: solid 2rem transparent;
+ border-right: solid 2rem transparent !important;
+ border-top: solid 2rem transparent !important;
+ }
+
+ // Botton end position
+ &.ribbon-bottom-end {
+ bottom: 0;
+ right: 0;
+ width: 4rem;
+ height: 4rem;
+ border-bottom: solid 2rem transparent;
+ border-right: solid 2rem transparent;
+ border-left: solid 2rem transparent !important;
+ border-top: solid 2rem transparent !important;
+ }
+}
+
diff --git a/src/_res/assets/sass/core/components/_root-bs.scss b/src/_res/assets/sass/core/components/_root-bs.scss
new file mode 100644
index 0000000..eb43e43
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_root-bs.scss
@@ -0,0 +1,27 @@
+//
+// CSS Variables
+//
+
+[data-theme="dark"] {
+ @each $color, $value in $grays-dark {
+ --#{$prefix}gray-#{$color}: #{$value};
+ }
+
+ @each $color, $value in $theme-colors-dark {
+ --#{$prefix}#{$color}: #{$value};
+ }
+
+ --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+ --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+ --#{$prefix}body-color: #{$body-color-dark};
+ --#{$prefix}body-bg: #{$body-bg-dark};
+
+ --#{$prefix}border-color: #{$border-color-dark};
+
+ --#{$prefix}heading-color: #{$headings-color-dark};
+ --#{$prefix}link-color: #{$link-color-dark};
+ --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+
+ --#{$prefix}code-color: #{$code-color-dark};
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_root.scss b/src/_res/assets/sass/core/components/_root.scss
new file mode 100644
index 0000000..a7d3b2a
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_root.scss
@@ -0,0 +1,868 @@
+//
+// CSS Variables
+//
+
+:root,
+[data-theme="light"] {
+ // Breakpoints
+ @each $breakpoint, $value in $grid-breakpoints {
+ --kt-#{$breakpoint}:#{$value};
+ }
+
+ // Bootstrap color system
+ --kt-white: #{$white};
+ --kt-white-bg-rgb: #{to-rgb($white)};
+ --kt-black: #{$black};
+ --kt-black-bg-rgb: #{to-rgb($black)};
+
+ // Bootstrap muted color
+ --kt-text-muted: #{$text-muted};
+
+ // Grey colors
+ @each $name, $value in $grays {
+ --kt-gray-#{$name}: #{$value};
+ }
+
+ // Grey rgba colors
+ @each $name, $value in $grays {
+ --kt-gray-#{$name}-rgb: #{to-rgb($value)};
+ }
+
+ // Contextual colors
+ @each $name, $value in $theme-colors {
+ --kt-#{$name}: #{$value};
+ }
+
+ // Contextual active state colors
+ @each $name, $value in $theme-active-colors {
+ --kt-#{$name}-active: #{$value};
+ }
+
+ // Contextual light state colors
+ @each $name, $value in $theme-light-colors {
+ --kt-#{$name}-light: #{$value};
+ }
+
+ // Contextual inverse state colors
+ @each $name, $value in $theme-inverse-colors {
+ --kt-#{$name}-inverse: #{$value};
+ }
+
+ // Contextual rbg colors
+ @each $name, $value in $theme-colors {
+ --kt-#{$name}-rgb: #{to-rgb($value)};
+ }
+
+ // Text colors
+ @each $name, $value in $theme-text-colors {
+ --kt-text-#{$name}: #{$value};
+ }
+
+ // Body
+ --kt-body-bg: #{$body-bg};
+ --kt-body-bg-rgb: #{to-rgb($body-bg)};
+ --kt-body-color: #{$body-color};
+
+ // Links
+ --kt-link-color: #{$link-color};
+ --kt-link-hover-color: #{$link-hover-color};
+
+ // Components
+ --kt-border-color: #{$border-color};
+ --kt-border-dashed-color: #{$border-dashed-color};
+
+ --kt-component-active-color: #{$component-active-color};
+ --kt-component-active-bg: #{$component-active-bg};
+ --kt-component-hover-color: #{$component-hover-color};
+ --kt-component-hover-bg: #{$component-hover-bg};
+ --kt-component-checked-color: #{$component-checked-color};
+ --kt-component-checked-bg: #{$component-checked-bg};
+
+ // Box shadow
+ --kt-box-shadow-xs: #{$box-shadow-xs};
+ --kt-box-shadow-sm: #{$box-shadow-sm};
+ --kt-box-shadow: #{$box-shadow};
+ --kt-box-shadow-lg: #{$box-shadow-lg};
+
+ // Typography
+ --kt-headings-color: #{$headings-color};
+
+ // Tables
+ --kt-table-color: #{$table-color};
+ --kt-table-bg: #{$table-bg};
+ --kt-table-striped-color: #{$table-striped-color};
+ --kt-table-striped-bg: #{$table-striped-bg};
+ --kt-table-accent-bg: #{$table-accent-bg};
+ --kt-table-active-color: #{$table-active-color};
+ --kt-table-active-bg: #{$table-active-bg};
+ --kt-table-hover-colorr: #{$table-hover-color};
+ --kt-table-hover-bg: #{$table-hover-bg};
+ --kt-table-border-color: #{$table-border-color};
+ --kt-table-caption-color: #{$table-caption-color};
+
+ --kt-table-loading-message-box-shadow: #{$table-loading-message-box-shadow};
+ --kt-table-loading-message-bg: #{$table-loading-message-bg};
+ --kt-table-loading-message-color: #{$table-loading-message-color};
+
+ // Buttons + Forms
+ --kt-input-btn-focus-color: #{$input-btn-focus-color};
+ --kt-input-btn-focus-box-shadow: #{$input-btn-focus-box-shadow};
+ --kt-input-btn-focus-color-opacity: #{$input-btn-focus-color-opacity};
+
+ --kt-input-color: #{$input-color};
+ --kt-input-placeholder-color: #{$input-placeholder-color};
+ --kt-input-plaintext-color: #{$input-plaintext-color};
+
+ // Buttons
+ --kt-btn-box-shadow: #{$btn-box-shadow};
+ --kt-btn-focus-box-shadow: #{$btn-focus-box-shadow};
+ --kt-btn-active-box-shadow: #{$btn-active-box-shadow};
+ --kt-btn-disabled-opacity: #{$btn-disabled-opacity};
+
+ --kt-btn-link-color: #{$btn-link-color};
+ --kt-btn-link-hover-color: #{$btn-link-hover-color};
+ --kt-btn-link-disabled-color: #{$btn-link-disabled-color};
+
+ // Forms
+ --kt-form-label-color: #{$form-label-color};
+ --kt-form-text-color: #{$form-text-color};
+
+ --kt-input-bg: #{$input-bg};
+ --kt-input-disabled-bg: #{$input-disabled-bg};
+ --kt-input-disabled-color: #{$input-disabled-color};
+ --kt-input-disabled-border-color: #{$input-disabled-border-color};
+
+ --kt-input-color: #{$input-color};
+ --kt-input-border-color: #{$input-border-color};
+
+ --kt-input-focus-bg: #{$input-focus-bg};
+ --kt-input-focus-border-color: #{$input-focus-border-color};
+ --kt-input-focus-color: #{$input-focus-color};
+
+ // Keenthemes solid input style
+ --kt-input-solid-bg: #{$input-solid-bg};
+ --kt-input-solid-bg-focus: #{$input-solid-bg-focus};
+ --kt-input-solid-placeholder-color: #{$input-solid-placeholder-color};
+ --kt-input-solid-color: #{$input-solid-color};
+
+ // Form checks
+ --kt-form-check-label-color: #{$form-check-label-color};
+ --kt-form-check-label-color-checked: #{$form-check-label-color-checked};
+ --kt-form-check-input-active-filter: #{$form-check-input-active-filter};
+
+ --kt-form-check-input-bg: #{$form-check-input-bg};
+ --kt-form-check-input-bg-solid: #{$form-check-input-bg-solid};
+ --kt-form-check-input-border: #{$form-check-input-border};
+ --kt-form-check-input-focus-border: #{$form-check-input-focus-border};
+ --kt-form-check-input-focus-box-shadow: #{$form-check-input-focus-box-shadow};
+
+ --kt-form-check-input-checked-color: #{$form-check-input-checked-color};
+ --kt-form-check-input-checked-bg-color: #{$form-check-input-checked-bg-color};
+ --kt-form-check-input-checked-bg-color-solid: #{$form-check-input-checked-bg-color-solid};
+ --kt-form-check-input-checked-border-color: #{$form-check-input-checked-border-color};
+ --kt-form-check-input-checked-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
+ --kt-form-check-radio-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
+
+ --kt-form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color};
+ --kt-form-check-input-indeterminate-bg-color: #{$form-check-input-indeterminate-bg-color};
+ --kt-form-check-input-indeterminate-border-color: #{$form-check-input-indeterminate-border-color};
+ --kt-form-check-input-indeterminate-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
+
+ --kt-form-check-input-disabled-opacity: #{$form-check-input-disabled-opacity};
+ --kt-form-check-label-disabled-opacity: #{$form-check-label-disabled-opacity};
+ --kt-form-check-btn-check-disabled-opacity: #{$form-check-btn-check-disabled-opacity};
+
+ --kt-form-switch-color: #{$form-switch-color};
+ --kt-form-switch-color-solid: #{$form-switch-color-solid};
+ --kt-form-switch-bg-image: #{escape-svg($form-switch-bg-image)};
+ --kt-form-switch-bg-image-solid: #{escape-svg($form-switch-bg-image-solid)};
+ --kt-form-switch-focus-color: #{$form-switch-focus-color};
+ --kt-form-switch-focus-bg-image: #{escape-svg($form-switch-focus-bg-image)};
+ --kt-form-switch-checked-color: #{$form-switch-checked-color};
+ --kt-form-switch-checked-bg-image: #{escape-svg($form-switch-checked-bg-image)};
+
+ // Input groups
+ --kt-input-group-addon-color: #{$input-group-addon-color};
+ --kt-input-group-addon-bg: #{$input-group-addon-bg};
+ --kt-input-group-addon-border-color: #{$input-group-addon-border-color};
+
+ // Form select
+ --kt-form-select-color: #{$form-select-color};
+ --kt-form-select-bg: #{$form-select-bg};
+ --kt-form-select-disabled-color: #{$form-select-disabled-color};
+ --kt-form-select-disabled-bg: #{$form-select-disabled-bg};
+ --kt-form-select-disabled-border-color: #{$form-select-disabled-border-color};
+ --kt-form-select-indicator-color: #{$form-select-indicator-color};
+ --kt-form-select-indicator: #{escape-svg($form-select-indicator)};
+ --kt-form-select-border-color: #{$form-select-border-color};
+ --kt-form-select-box-shadow: #{$form-select-box-shadow};
+ --kt-form-select-focus-border-color: #{$form-select-focus-border-color};
+ --kt-form-select-focus-box-shadow: #{$form-select-focus-box-shadow};
+
+ // Form file button
+ --kt-form-file-button-color: #{$form-file-button-color};
+ --kt-form-file-button-bg: #{$form-file-button-bg};
+ --kt-form-file-button-hover-bg: #{$form-file-button-hover-bg};
+
+ // Navs
+ --kt-nav-tabs-border-color: #{$nav-tabs-border-color};
+ --kt-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+ --kt-nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+ --kt-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+ --kt-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+
+ --kt-nav-pills-link-active-color: #{$nav-pills-link-active-color};
+ --kt-nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
+
+ // Dropdowns
+ --kt-dropdown-color: #{$dropdown-color};
+ --kt-dropdown-bg: #{$dropdown-bg};
+ --kt-dropdown-divider-bg: #{$dropdown-divider-bg};
+ --kt-dropdown-box-shadow: #{$dropdown-box-shadow};
+ --kt-dropdown-link-color: #{$dropdown-link-color};
+ --kt-dropdown-link-hover-color: #{$dropdown-link-hover-color};
+ --kt-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+ --kt-dropdown-link-active-color: #{$dropdown-link-active-color};
+ --kt-dropdown-link-active-bg: #{$dropdown-link-active-bg};
+ --kt-dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+ --kt-dropdown-header-color: #{$dropdown-header-color};
+
+ // Pagination
+ --kt-pagination-item-bg: #{$pagination-item-bg};
+ --kt-pagination-color: #{$pagination-color};
+ --kt-pagination-bg: #{$pagination-bg};
+ --kt-pagination-border-color: #{$pagination-border-color};
+ --kt-pagination-focus-color: #{$pagination-focus-color};
+ --kt-pagination-focus-bg: #{$pagination-focus-bg};
+ --kt-pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
+ --kt-pagination-focus-outline: #{$pagination-focus-outline};
+ --kt-pagination-hover-color: #{$pagination-hover-color};
+ --kt-pagination-hover-bg: #{$pagination-hover-bg};
+ --kt-pagination-hover-border-color: #{$pagination-hover-border-color};
+ --kt-pagination-active-color: #{$pagination-active-color};
+ --kt-pagination-active-bg: #{$pagination-active-bg};
+ --kt-pagination-active-border-color: #{$pagination-active-border-color};
+ --kt-pagination-disabled-color: #{$pagination-disabled-color};
+ --kt-pagination-disabled-bg: #{$pagination-disabled-bg};
+
+ // Card
+ --kt-card-color: #{$card-color-dark};
+ --kt-card-bg: #{$card-bg};
+ --kt-card-box-shadow: #{$card-box-shadow};
+ --kt-card-border-color: #{$card-border-color};
+ --kt-card-border-dashed-color: #{$card-border-dashed-color};
+ --kt-card-cap-bg: #{$card-cap-bg};
+
+ // Accordion
+ --kt-accordion-color: #{$accordion-color};
+ --kt-accordion-bg: #{$accordion-bg};
+ --kt-accordion-border-color: #{$accordion-border-color};
+ --kt-accordion-button-bg: #{$accordion-button-bg};
+ --kt-accordion-button-color: #{$accordion-button-color};
+ --kt-accordion-button-active-bg: #{$accordion-button-active-bg};
+ --kt-accordion-button-active-color: #{$accordion-button-active-color};
+ --kt-accordion-button-focus-border-color: #{$accordion-button-focus-border-color};
+ --kt-accordion-button-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+
+ --kt-accordion-icon-color: #{$accordion-icon-color};
+ --kt-accordion-icon-active-color: #{$accordion-icon-active-color};
+ --kt-accordion-button-icon: #{escape-svg($accordion-button-icon)};
+ --kt-accordion-button-active-icon: #{escape-svg($accordion-button-active-icon)};
+
+ // Tooltips
+ --kt-tooltip-color: #{$tooltip-color};
+ --kt-tooltip-bg: #{$tooltip-bg};
+ --kt-tooltip-opacity: #{$tooltip-opacity};
+ --kt-tooltip-box-shadow: #{$tooltip-box-shadow};
+
+ // Popovers
+ --kt-popover-bg: #{$popover-bg};
+ --kt-popover-border-color: #{$popover-border-color};
+ --kt-popover-box-shadow: #{$popover-box-shadow};
+ --kt-popover-header-bg: #{$popover-header-bg};
+ --kt-popover-header-color: #{$popover-header-color};
+ --kt-popover-header-border-color: #{$popover-header-border-color};
+ --kt-popover-body-color: #{$popover-body-color};
+
+ // Dropdowns
+ --kt-dropdown-box-shadow: #{$dropdown-box-shadow};
+ --kt-dropdown-bg: #{$dropdown-bg};
+
+ // Toasts
+ --kt-toast-color: #{$toast-color};
+ --kt-toast-background-color: #{$toast-background-color};
+ --kt-toast-box-shadow: #{$toast-box-shadow};
+ --kt-toast-header-color: #{$toast-header-color};
+ --kt-toast-header-background-color: #{$toast-header-background-color};
+ --kt-toast-header-border-color: #{$toast-header-border-color};
+
+ // Badges
+ --kt-badge-color: #{$badge-color};
+
+ // Modals
+ --kt-modal-bg: #{$modal-content-bg};
+ --kt-modal-color: #{$modal-content-color};
+ --kt-modal-border-color: #{$modal-content-border-color};
+ --kt-modal-box-shadow: #{$modal-content-box-shadow};
+ --kt-modal-content-color: #{$modal-content-color};
+ --kt-modal-content-bg: #{$modal-content-bg};
+ --kt-modal-content-border-color: #{$modal-content-border-color};
+ --kt-modal-content-box-shadow: #{$modal-content-box-shadow};
+ --kt-modal-content-box-shadow-xs: #{$modal-content-box-shadow-xs};
+ --kt-modal-content-box-shadow-sm-up: #{$modal-content-box-shadow-sm-up};
+ --kt-modal-header-border-color: #{$modal-header-border-color};
+ --kt-modal-footer-border-color: #{$modal-footer-border-color};
+ --kt-modal-backdrop-bg: #{$modal-backdrop-bg};
+ --kt-modal-backdrop-opacity: #{$modal-backdrop-opacity};
+
+ // Progress bars
+ --kt-progress-bg: #{$progress-bg};
+ --kt-progress-box-shadow: #{$progress-box-shadow};
+
+ // List group
+ --kt-list-group-color: #{$list-group-color};
+ --kt-list-group-bg: #{$list-group-bg};
+ --kt-list-group-border-color: #{$list-group-border-color};
+ --kt-list-group-hover-bg: #{$list-group-hover-bg};
+ --kt-list-group-active-color: #{$list-group-active-color};
+ --kt-list-group-active-bg: #{$list-group-active-bg};
+ --kt-list-group-active-border-colorg: #{$list-group-active-border-color};
+ --kt-list-group-disabled-color: #{$list-group-disabled-color};
+ --kt-list-group-disabled-bg: #{$list-group-disabled-bg};
+ --kt-list-group-action-colorg: #{$list-group-action-color};
+ --kt-list-group-action-hover-color: #{$list-group-action-hover-color};
+ --kt-list-group-action-active-color: #{$list-group-action-active-color};
+ --kt-list-group-action-active-bg: #{$list-group-action-active-bg};
+
+ // Image thumbnails
+ --kt-thumbnail-bg: #{$thumbnail-bg};
+ --kt-thumbnail-border-color: #{$thumbnail-border-color};
+ --kt-thumbnail-box-shadow: #{$thumbnail-box-shadow};
+
+ // Figures
+ --kt-figure-caption-color: #{$figure-caption-color};
+
+ // Breadcrumbs
+ --kt-breadcrumb-bg: #{$breadcrumb-bg};
+ --kt-breadcrumb-divider-color: #{$breadcrumb-divider-color};
+ --kt-breadcrumb-active-color: #{$breadcrumb-active-color};
+
+ // Carousel
+ --kt-carousel-custom-indicator-default-bg-color: #{$carousel-custom-indicator-default-bg-color};
+ --kt-carousel-custom-indicator-active-bg-color: #{$carousel-custom-indicator-active-bg-color};
+ --kt-carousel-custom-bullet-indicator-default-bg-color: #{$carousel-custom-bullet-indicator-default-bg-color};
+ --kt-carousel-custom-bullet-indicator-active-bg-color: #{$carousel-custom-bullet-indicator-active-bg-color};
+
+ // Code
+ --kt-code-bg: #{$code-bg};
+ --kt-code-box-shadow: #{$code-box-shadow};
+ --kt-code-color: #{$code-color};
+
+ // Close
+ --kt-btn-close-color: #{$btn-close-color};
+ --kt-btn-close-bg: #{escape-svg($btn-close-bg)};
+
+ // Offcanvas
+ --kt-offcanvas-border-color: #{$offcanvas-border-color};
+ --kt-offcanvas-bg-color: #{$offcanvas-bg-color};
+ --kt-offcanvas-color: #{$offcanvas-color};
+ --kt-offcanvas-box-shadow: #{$offcanvas-box-shadow};
+ --kt-offcanvas-backdrop-bg: #{$offcanvas-backdrop-bg};
+ --kt-offcanvas-backdrop-opacity: #{$offcanvas-backdrop-opacity};
+
+ // Symbol
+ --kt-symbol-label-color: #{$symbol-label-color};
+ --kt-symbol-label-bg: #{$symbol-label-bg};
+ --kt-symbol-border-color: #{$symbol-border-color};
+
+ // Bullet
+ --kt-bullet-bg-color: #{$bullet-bg-color};
+
+ // Scrolltop
+ --kt-scrolltop-opacity: #{$scrolltop-opacity};
+ --kt-scrolltop-opacity-on: #{$scrolltop-opacity-on};
+ --kt-scrolltop-opacity-hover: #{$scrolltop-opacity-hover};
+ --kt-scrolltop-box-shadow: #{$scrolltop-box-shadow};
+ --kt-scrolltop-bg-color: #{$scrolltop-bg-color};
+ --kt-scrolltop-bg-color-hover: #{$scrolltop-bg-color-hover};
+ --kt-scrolltop-icon-color: #{$scrolltop-icon-color};
+ --kt-scrolltop-icon-color-hover: #{$scrolltop-icon-color-hover};
+
+ // Keenthemes drawer component
+ --kt-drawer-box-shadow: #{$drawer-box-shadow};
+ --kt-drawer-bg-color: #{$drawer-bg-color};
+ --kt-drawer-overlay-bg-color: #{$drawer-overlay-bg-color};
+
+ // Keenthemes menu component
+ --kt-menu-dropdown-box-shadow: #{$menu-dropdown-box-shadow};
+ --kt-menu-dropdown-bg-color: #{$menu-dropdown-bg-color};
+ --kt-menu-heading-color: #{$menu-heading-color};
+ --kt-menu-link-color-hover: #{$menu-link-color-hover};
+ --kt-menu-link-color-show: #{$menu-link-color-show};
+ --kt-menu-link-color-here: #{$menu-link-color-here};
+ --kt-menu-link-color-active: #{$menu-link-color-active};
+ --kt-menu-link-bg-color-hover: #{$menu-link-bg-color-hover};
+ --kt-menu-link-bg-color-show: #{$menu-link-bg-color-show};
+ --kt-menu-link-bg-color-here: #{$menu-link-bg-color-here};
+ --kt-menu-link-bg-color-active: #{$menu-link-bg-color-active};
+
+ // Keenthemes feedback component
+ --kt-feedback-popup-box-shadow: #{$feedback-popup-box-shadow};
+ --kt-feedback-popup-background-color: #{$feedback-popup-background-color};
+
+ // Keenthemes scrollbar component
+ --kt-scrollbar-color: #{$scrollbar-color};
+ --kt-scrollbar-hover-color: #{$scrollbar-hover-color};
+ --kt-scrollbar-width: #{$scrollbar-width};
+ --kt-scrollbar-height: #{$scrollbar-height};
+ --kt-scrollbar-space: #{$scrollbar-space};
+
+ // Keenthemes overlay component
+ --kt-overlay-bg: #{$overlay-bg};
+
+ // Keenthemes blockui component
+ --kt-blockui-overlay-bg: #{$blockui-overlay-bg};
+
+ // Keenthemes rating component
+ --kt-rating-color-default: #{$rating-color-default};
+ --kt-rating-color-active: #{$rating-color-active};
+
+ // Keenthemes ribbon component
+ --kt-ribbon-label-box-shadow: #{$ribbon-label-box-shadow};
+ --kt-ribbon-label-bg: #{$ribbon-label-bg};
+ --kt-ribbon-label-border-color: #{$ribbon-label-border-color};
+ --kt-ribbon-clip-bg: #{$ribbon-clip-bg};
+
+ // Engage panel
+ --kt-engage-btn-bg: #{$engage-btn-bg};
+ --kt-engage-btn-color: #{$engage-btn-color};
+ --kt-engage-btn-color-active: #{$engage-btn-color-active};
+}
+
+[data-theme="dark"] {
+ // Bootstrap muted color
+ --kt-text-muted: #{$text-muted-dark};
+
+ // Grey colors
+ @each $name, $value in $grays-dark {
+ --kt-gray-#{$name}: #{$value};
+ }
+
+ // Grey rgba colors
+ @each $name, $value in $grays-dark {
+ --kt-gray-#{$name}-rgb: #{to-rgb($value)};
+ }
+
+ // Contextual colors
+ @each $name, $value in $theme-colors-dark {
+ --kt-#{$name}: #{$value};
+ }
+
+ // Contextual active state colors
+ @each $name, $value in $theme-active-colors-dark {
+ --kt-#{$name}-active: #{$value};
+ }
+
+ // Contextual light state colors
+ @each $name, $value in $theme-light-colors-dark {
+ --kt-#{$name}-light: #{$value};
+ }
+
+ // Contextual inverse state colors
+ @each $name, $value in $theme-inverse-colors-dark {
+ --kt-#{$name}-inverse: #{$value};
+ }
+
+ // Contextual rbg colors
+ @each $name, $value in $theme-colors-dark {
+ --kt-#{$name}-rgb: #{to-rgb($value)};
+ }
+
+ // Text colors
+ @each $name, $value in $theme-text-colors-dark {
+ --kt-text-#{$name}: #{$value};
+ }
+
+ // Body
+ --kt-body-bg: #{$body-bg-dark};
+ --kt-body-bg-rgb: #{to-rgb($body-bg-dark)};
+ --kt-body-color: #{$body-color-dark};
+
+ // Links
+ --kt-link-color: #{$link-color-dark};
+ --kt-link-hover-color: #{$link-hover-color-dark};
+
+ // Components
+ --kt-border-color: #{$border-color-dark};
+ --kt-border-dashed-color: #{$border-dashed-color-dark};
+
+ --kt-component-active-color: #{$component-active-color-dark};
+ --kt-component-active-bg: #{$component-active-bg-dark};
+ --kt-component-hover-color: #{$component-hover-color-dark};
+ --kt-component-hover-bg: #{$component-hover-bg-dark};
+ --kt-component-checked-color: #{$component-checked-color-dark};
+ --kt-component-checked-bg: #{$component-checked-bg-dark};
+
+ // Box shadow
+ --kt-box-shadow-xs: #{$box-shadow-xs-dark};
+ --kt-box-shadow-sm: #{$box-shadow-sm-dark};
+ --kt-box-shadow: #{$box-shadow-dark};
+ --kt-box-shadow-lg: #{$box-shadow-lg-dark};
+
+ // Typography
+ --kt-headings-color: #{$headings-color-dark};
+
+ // Tables
+ --kt-table-color: #{$table-color-dark};
+ --kt-table-bg: #{$table-bg-dark};
+ --kt-table-striped-color: #{$table-striped-color-dark};
+ --kt-table-striped-bg: #{$table-striped-bg-dark};
+ --kt-table-accent-bg: #{$table-accent-bg-dark};
+ --kt-table-active-color: #{$table-active-color-dark};
+ --kt-table-active-bg: #{$table-active-bg-dark};
+ --kt-table-hover-colorr: #{$table-hover-color-dark};
+ --kt-table-hover-bg: #{$table-hover-bg-dark};
+ --kt-table-border-color: #{$table-border-color-dark};
+ --kt-table-caption-color: #{$table-caption-color-dark};
+
+ --kt-table-loading-message-box-shadow: #{$table-loading-message-box-shadow-dark};
+ --kt-table-loading-message-bg: #{$table-loading-message-bg-dark};
+ --kt-table-loading-message-color: #{$table-loading-message-color-dark};
+
+ // Buttons + Forms
+ --kt-input-btn-focus-color: #{$input-btn-focus-color-dark};
+ --kt-input-btn-focus-box-shadow: #{$input-btn-focus-box-shadow-dark};
+ --kt-input-btn-focus-color-opacity: #{$input-btn-focus-color-opacity-dark};
+
+ --kt-input-color: #{$input-color-dark};
+ --kt-input-placeholder-color: #{$input-placeholder-color-dark};
+ --kt-input-plaintext-color: #{$input-plaintext-color-dark};
+
+ // Buttons
+ --kt-btn-box-shadow: #{$btn-box-shadow-dark};
+ --kt-btn-focus-box-shadow: #{$btn-focus-box-shadow-dark};
+ --kt-btn-active-box-shadow: #{$btn-active-box-shadow-dark};
+ --kt-btn-disabled-opacity: #{$btn-disabled-opacity-dark};
+
+ --kt-btn-link-color: #{$btn-link-color-dark};
+ --kt-btn-link-hover-color: #{$btn-link-hover-color-dark};
+ --kt-btn-link-disabled-color: #{$btn-link-disabled-color-dark};
+
+ // Forms
+ --kt-form-label-color: #{$form-label-color-dark};
+ --kt-form-text-color: #{$form-text-color-dark};
+
+ --kt-input-bg: #{$input-bg-dark};
+ --kt-input-disabled-bg: #{$input-disabled-bg-dark};
+ --kt-input-disabled-color: #{$input-disabled-color-dark};
+ --kt-input-disabled-border-color: #{$input-disabled-border-color-dark};
+
+ --kt-input-color: #{$input-color-dark};
+ --kt-input-border-color: #{$input-border-color-dark};
+
+ --kt-input-focus-bg: #{$input-focus-bg-dark};
+ --kt-input-focus-border-color: #{$input-focus-border-color-dark};
+ --kt-input-focus-color: #{$input-focus-color-dark};
+
+ // Keenthemes solid input style
+ --kt-input-solid-bg: #{$input-solid-bg-dark};
+ --kt-input-solid-bg-focus: #{$input-solid-bg-focus-dark};
+ --kt-input-solid-placeholder-color: #{$input-solid-placeholder-color-dark};
+ --kt-input-solid-color: #{$input-solid-color-dark};
+
+ // Form checks
+ --kt-form-check-label-color: #{$form-check-label-color-dark};
+ --kt-form-check-label-color-checked: #{$form-check-label-color-checked-dark};
+ --kt-form-check-input-active-filter: #{$form-check-input-active-filter-dark};
+
+ --kt-form-check-input-bg: #{$form-check-input-bg-dark};
+ --kt-form-check-input-bg-solid: #{$form-check-input-bg-solid-dark};
+ --kt-form-check-input-border: #{$form-check-input-border-dark};
+ --kt-form-check-input-focus-border: #{$form-check-input-focus-border-dark};
+ --kt-form-check-input-focus-box-shadow: #{$form-check-input-focus-box-shadow-dark};
+
+ --kt-form-check-input-checked-color: #{$form-check-input-checked-color-dark};
+ --kt-form-check-input-checked-bg-color: #{$form-check-input-checked-bg-color-dark};
+ --kt-form-check-input-checked-border-color: #{$form-check-input-checked-border-color-dark};
+ --kt-form-check-input-checked-bg-image: #{escape-svg($form-check-input-checked-bg-image-dark)};
+ --kt-form-check-radio-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image-dark)};
+
+ --kt-form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color-dark};
+ --kt-form-check-input-indeterminate-bg-color: #{$form-check-input-indeterminate-bg-color-dark};
+ --kt-form-check-input-indeterminate-border-color: #{$form-check-input-indeterminate-border-color-dark};
+ --kt-form-check-input-indeterminate-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image-dark)};
+
+ --kt-form-check-input-disabled-opacity: #{$form-check-input-disabled-opacity-dark};
+ --kt-form-check-label-disabled-opacity: #{$form-check-label-disabled-opacity-dark};
+ --kt-form-check-btn-check-disabled-opacity: #{$form-check-btn-check-disabled-opacity-dark};
+
+ --kt-form-switch-color: #{$form-switch-color-dark};
+ --kt-form-switch-color-solid: #{$form-switch-color-solid-dark};
+ --kt-form-switch-bg-image: #{escape-svg($form-switch-bg-image-dark)};
+ --kt-form-switch-bg-image-solid: #{escape-svg($form-switch-bg-image-solid-dark)};
+ --kt-form-switch-focus-color: #{$form-switch-focus-color-dark};
+ --kt-form-switch-focus-bg-image: #{escape-svg($form-switch-focus-bg-image-dark)};
+ --kt-form-switch-checked-color: #{$form-switch-checked-color-dark};
+ --kt-form-switch-checked-bg-image: #{escape-svg($form-switch-checked-bg-image-dark)};
+
+ // Input groups
+ --kt-input-group-addon-color: #{$input-group-addon-color-dark};
+ --kt-input-group-addon-bg: #{$input-group-addon-bg-dark};
+ --kt-input-group-addon-border-color: #{$input-group-addon-border-color-dark};
+
+ // Form select
+ --kt-form-select-color: #{$form-select-color-dark};
+ --kt-form-select-bg: #{$form-select-bg-dark};
+ --kt-form-select-disabled-color: #{$form-select-disabled-color-dark};
+ --kt-form-select-disabled-bg: #{$form-select-disabled-bg-dark};
+ --kt-form-select-disabled-border-color: #{$form-select-disabled-border-color-dark};
+ --kt-form-select-indicator-color: #{$form-select-indicator-color-dark};
+ --kt-form-select-indicator: #{escape-svg($form-select-indicator-dark)};
+ --kt-form-select-border-color: #{$form-select-border-color-dark};
+ --kt-form-select-box-shadow: #{$form-select-box-shadow-dark};
+ --kt-form-select-focus-border-color: #{$form-select-focus-border-color-dark};
+ --kt-form-select-focus-box-shadow: #{$form-select-focus-box-shadow-dark};
+
+ // Form file button
+ --kt-form-file-button-color: #{$form-file-button-color-dark};
+ --kt-form-file-button-bg: #{$form-file-button-bg-dark};
+ --kt-form-file-button-hover-bg: #{$form-file-button-hover-bg-dark};
+
+ // Navs
+ --kt-nav-tabs-border-color: #{$nav-tabs-border-color-dark};
+ --kt-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color-dark};
+ --kt-nav-tabs-link-active-color: #{$nav-tabs-link-active-color-dark};
+ --kt-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg-dark};
+ --kt-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color-dark};
+
+ --kt-nav-pills-link-active-color: #{$nav-pills-link-active-color-dark};
+ --kt-nav-pills-link-active-bg: #{$nav-pills-link-active-bg-dark};
+
+ // Dropdowns
+ --kt-dropdown-color: #{$dropdown-color-dark};
+ --kt-dropdown-bg: #{$dropdown-bg-dark};
+ --kt-dropdown-divider-bg: #{$dropdown-divider-bg-dark};
+ --kt-dropdown-box-shadow: #{$dropdown-box-shadow-dark};
+ --kt-dropdown-link-color: #{$dropdown-link-color-dark};
+ --kt-dropdown-link-hover-color: #{$dropdown-link-hover-color-dark};
+ --kt-dropdown-link-hover-bg: #{$dropdown-link-hover-bg-dark};
+ --kt-dropdown-link-active-color: #{$dropdown-link-active-color-dark};
+ --kt-dropdown-link-active-bg: #{$dropdown-link-active-bg-dark};
+ --kt-dropdown-link-disabled-color: #{$dropdown-link-disabled-color-dark};
+ --kt-dropdown-header-color: #{$dropdown-header-color-dark};
+
+ // Pagination
+ --kt-pagination-item-bg: #{$pagination-item-bg-dark};
+ --kt-pagination-color: #{$pagination-color-dark};
+ --kt-pagination-bg: #{$pagination-bg-dark};
+ --kt-pagination-border-color: #{$pagination-border-color-dark};
+ --kt-pagination-focus-color: #{$pagination-focus-color-dark};
+ --kt-pagination-focus-bg: #{$pagination-focus-bg-dark};
+ --kt-pagination-focus-box-shadow: #{$pagination-focus-box-shadow-dark};
+ --kt-pagination-focus-outline: #{$pagination-focus-outline-dark};
+ --kt-pagination-hover-color: #{$pagination-hover-color-dark};
+ --kt-pagination-hover-bg: #{$pagination-hover-bg-dark};
+ --kt-pagination-hover-border-color: #{$pagination-hover-border-color-dark};
+ --kt-pagination-active-color: #{$pagination-active-color-dark};
+ --kt-pagination-active-bg: #{$pagination-active-bg-dark};
+ --kt-pagination-active-border-color: #{$pagination-active-border-color-dark};
+ --kt-pagination-disabled-color: #{$pagination-disabled-color-dark};
+ --kt-pagination-disabled-bg: #{$pagination-disabled-bg-dark};
+
+ // Card
+ --kt-card-bg: #{$card-bg-dark};
+ --kt-card-color: #{$card-color-dark};
+ --kt-card-box-shadow: #{$card-box-shadow-dark};
+ --kt-card-border-color: #{$card-border-color-dark};
+ --kt-card-border-dashed-color: #{$card-border-dashed-color-dark};
+ --kt-card-cap-bg: #{$card-cap-bg-dark};
+
+ // Accordion
+ --kt-accordion-color: #{$accordion-color-dark};
+ --kt-accordion-bg: #{$accordion-bg-dark};
+ --kt-accordion-border-color: #{$accordion-border-color-dark};
+ --kt-accordion-button-color: #{$accordion-button-color-dark};
+ --kt-accordion-button-bg: #{$accordion-button-bg-dark};
+ --kt-accordion-button-active-bg: #{$accordion-button-active-bg-dark};
+ --kt-accordion-button-active-color: #{$accordion-button-active-color-dark};
+ --kt-accordion-button-focus-border-color: #{$accordion-button-focus-border-color-dark};
+ --kt-accordion-button-focus-box-shadow: #{$accordion-button-focus-box-shadow-dark};
+
+ --kt-accordion-icon-color: #{$accordion-icon-color-dark};
+ --kt-accordion-icon-active-color: #{$accordion-icon-active-color-dark};
+ --kt-accordion-button-icon: #{escape-svg($accordion-button-icon-dark)};
+ --kt-accordion-button-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+
+ // Tooltips
+ --kt-tooltip-color: #{$tooltip-color-dark};
+ --kt-tooltip-bg: #{$tooltip-bg-dark};
+ --kt-tooltip-opacity: #{$tooltip-opacity-dark};
+ --kt-tooltip-box-shadow: #{$tooltip-box-shadow-dark};
+
+ // Popovers
+ --kt-popover-bg: #{$popover-bg-dark};
+ --kt-popover-border-color: #{$popover-border-color-dark};
+ --kt-popover-box-shadow: #{$popover-box-shadow-dark};
+ --kt-popover-header-bg: #{$popover-header-bg-dark};
+ --kt-popover-header-color: #{$popover-header-color-dark};
+ --kt-popover-header-border-color: #{$popover-header-border-color-dark};
+ --kt-popover-body-color: #{$popover-body-color-dark};
+
+ // Dropdowns
+ --kt-dropdown-box-shadow: #{$dropdown-box-shadow-dark};
+ --kt-dropdown-bg: #{$dropdown-bg-dark};
+
+ // Toasts
+ --kt-toast-color: #{$toast-color-dark};
+ --kt-toast-background-color: #{$toast-background-color-dark};
+ --kt-toast-box-shadow: #{$toast-box-shadow-dark};
+ --kt-toast-header-color: #{$toast-header-color-dark};
+ --kt-toast-header-background-color: #{$toast-header-background-color-dark};
+ --kt-toast-header-border-color: #{$toast-header-border-color-dark};
+
+ // Badges
+ --kt-badge-color: #{$badge-color-dark};
+
+ // Modals
+ --kt-modal-bg: #{$modal-content-bg-dark};
+ --kt-modal-color: #{$modal-content-color-dark};
+ --kt-modal-border-color: #{$modal-content-border-color-dark};
+ --kt-modal-box-shadow: #{$modal-content-box-shadow-dark};
+ --kt-modal-content-color: #{$modal-content-color-dark};
+ --kt-modal-content-bg: #{$modal-content-bg-dark};
+ --kt-modal-content-border-color: #{$modal-content-border-color-dark};
+ --kt-modal-content-box-shadow: #{$modal-content-box-shadow-dark};
+ --kt-modal-content-box-shadow-xs: #{$modal-content-box-shadow-xs-dark};
+ --kt-modal-content-box-shadow-sm-up: #{$modal-content-box-shadow-sm-up-dark};
+ --kt-modal-header-border-color: #{$modal-header-border-color-dark};
+ --kt-modal-footer-border-color: #{$modal-footer-border-color-dark};
+ --kt-modal-backdrop-bg: #{$modal-backdrop-bg-dark};
+ --kt-modal-backdrop-opacity: #{$modal-backdrop-opacity-dark};
+
+ // Progress bars
+ --kt-progress-bg: #{$progress-bg-dark};
+ --kt-progress-box-shadow: #{$progress-box-shadow-dark};
+
+ // List group
+ --kt-list-group-color: #{$list-group-color-dark};
+ --kt-list-group-bg: #{$list-group-bg-dark};
+ --kt-list-group-border-color: #{$list-group-border-color-dark};
+ --kt-list-group-hover-bg: #{$list-group-hover-bg-dark};
+ --kt-list-group-active-color: #{$list-group-active-color-dark};
+ --kt-list-group-active-bg: #{$list-group-active-bg-dark};
+ --kt-list-group-active-border-colorg: #{$list-group-active-border-color-dark};
+ --kt-list-group-disabled-color: #{$list-group-disabled-color-dark};
+ --kt-list-group-disabled-bg: #{$list-group-disabled-bg-dark};
+ --kt-list-group-action-colorg: #{$list-group-action-color-dark};
+ --kt-list-group-action-hover-color: #{$list-group-action-hover-color-dark};
+ --kt-list-group-action-active-color: #{$list-group-action-active-color-dark};
+ --kt-list-group-action-active-bg: #{$list-group-action-active-bg-dark};
+
+ // Image thumbnails
+ --kt-thumbnail-bg: #{$thumbnail-bg-dark};
+ --kt-thumbnail-border-color: #{$thumbnail-border-color-dark};
+ --kt-thumbnail-box-shadow: #{$thumbnail-box-shadow-dark};
+
+ // Figures
+ --kt-figure-caption-color: #{$figure-caption-color-dark};
+
+ // Breadcrumbs
+ --kt-breadcrumb-bg: #{$breadcrumb-bg-dark};
+ --kt-breadcrumb-divider-color: #{$breadcrumb-divider-color-dark};
+ --kt-breadcrumb-active-color: #{$breadcrumb-active-color-dark};
+
+ // Carousel
+ --kt-carousel-custom-indicator-default-bg-color: #{$carousel-custom-indicator-default-bg-color-dark};
+ --kt-carousel-custom-indicator-active-bg-color: #{$carousel-custom-indicator-active-bg-color-dark};
+ --kt-arousel-custom-bullet-indicator-default-bg-color: #{$carousel-custom-bullet-indicator-default-bg-color-dark};
+ --kt-carousel-custom-bullet-indicator-active-bg-color: #{$carousel-custom-bullet-indicator-active-bg-color-dark};
+
+ // Close
+ --kt-btn-close-color: #{$btn-close-color-dark};
+ --kt-btn-close-bg: #{escape-svg($btn-close-bg-dark)};
+
+ // Offcanvas
+ --kt-code-bg: #{$code-bg-dark};
+ --kt-code-box-shadow: #{$code-box-shadow-dark};
+ --kt-code-color: #{$code-color-dark};
+
+ // Offcanvas
+ --kt-offcanvas-border-color: #{$offcanvas-border-color-dark};
+ --kt-offcanvas-bg-color: #{$offcanvas-bg-color-dark};
+ --kt-offcanvas-color: #{$offcanvas-color-dark};
+ --kt-offcanvas-box-shadow: #{$offcanvas-box-shadow-dark};
+ --kt-offcanvas-backdrop-bg: #{$offcanvas-backdrop-bg-dark};
+ --kt-offcanvas-backdrop-opacity: #{$offcanvas-backdrop-opacity-dark};
+
+ // Code
+ --kt-code-bg: #{$code-bg-dark};
+ --kt-code-box-shadow: #{$code-box-shadow-dark};
+ --kt-code-color: #{$code-color-dark};
+
+ // Symbol
+ --kt-symbol-label-color: #{$symbol-label-color-dark};
+ --kt-symbol-label-bg: #{$symbol-label-bg-dark};
+ --kt-symbol-border-color: #{$symbol-border-color-dark};
+
+ // Bullet
+ --kt-bullet-bg-color: #{$bullet-bg-color-dark};
+
+ // Scrolltop
+ --kt-scrolltop-opacity: #{$scrolltop-opacity-dark};
+ --kt-scrolltop-opacity-on: #{$scrolltop-opacity-on-dark};
+ --kt-scrolltop-opacity-hover: #{$scrolltop-opacity-hover-dark};
+ --kt-scrolltop-box-shadow: #{$scrolltop-box-shadow-dark};
+ --kt-scrolltop-bg-color: #{$scrolltop-bg-color-dark};
+ --kt-scrolltop-bg-color-hover: #{$scrolltop-bg-color-hover-dark};
+ --kt-scrolltop-icon-color: #{$scrolltop-icon-color-dark};
+ --kt-scrolltop-icon-color-hover: #{$scrolltop-icon-color-hover-dark};
+
+ // Keenthemes drawer component
+ --kt-drawer-box-shadow: #{$drawer-box-shadow-dark};
+ --kt-drawer-bg-color: #{$drawer-bg-color-dark};
+ --kt-drawer-overlay-bg-color: #{$drawer-overlay-bg-color-dark};
+
+ // Keenthemes menu component
+ --kt-menu-dropdown-box-shadow: #{$menu-dropdown-box-shadow-dark};
+ --kt-menu-dropdown-bg-color: #{$menu-dropdown-bg-color-dark};
+ --kt-menu-heading-color: #{$menu-heading-color-dark};
+
+ --kt-menu-link-color-hover: #{$menu-link-color-hover-dark};
+ --kt-menu-link-color-show: #{$menu-link-color-show-dark};
+ --kt-menu-link-color-here: #{$menu-link-color-here-dark};
+ --kt-menu-link-color-active: #{$menu-link-color-active-dark};
+ --kt-menu-link-bg-color-hover: #{$menu-link-bg-color-hover-dark};
+ --kt-menu-link-bg-color-show: #{$menu-link-bg-color-show-dark};
+ --kt-menu-link-bg-color-here: #{$menu-link-bg-color-here-dark};
+ --kt-menu-link-bg-color-active: #{$menu-link-bg-color-active-dark};
+
+
+ // Keenthemes feedback component
+ --kt-feedback-popup-box-shadow: #{$feedback-popup-box-shadow-dark};
+ --kt-feedback-popup-background-color: #{$feedback-popup-background-color-dark};
+
+ // Keenthemes scrollbar component
+ --kt-scrollbar-color: #{$scrollbar-color-dark};
+ --kt-scrollbar-hover-color: #{$scrollbar-hover-color-dark};
+
+ // Keenthemes overlay component
+ --kt-overlay-bg: #{$overlay-bg-dark};
+
+ // Keenthemes blockui component
+ --kt-blockui-overlay-bg: #{$blockui-overlay-bg-dark};
+
+ // Keenthemes rating component
+ --kt-rating-color-default: #{$rating-color-default-dark};
+ --kt-rating-color-active: #{$rating-color-active-dark};
+
+ // Keenthemes ribbon component
+ --kt-ribbon-label-box-shadow: #{$ribbon-label-box-shadow-dark};
+ --kt-ribbon-label-bg: #{$ribbon-label-bg-dark};
+ --kt-ribbon-label-border-color: #{$ribbon-label-border-color-dark};
+ --kt-ribbon-clip-bg: #{$ribbon-clip-bg-dark};
+
+ // Engage panel
+ --kt-engage-btn-bg: #{$engage-btn-bg-dark};
+ --kt-engage-btn-color: #{$engage-btn-color-dark};
+ --kt-engage-btn-color-active: #{$engage-btn-color-active-dark};
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_rotate.scss b/src/_res/assets/sass/core/components/_rotate.scss
new file mode 100644
index 0000000..80ece20
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_rotate.scss
@@ -0,0 +1,47 @@
+//
+// Rotate
+//
+
+
+$rotate-transition: transform 0.3s ease;
+
+.rotate {
+ display: inline-flex;
+ align-items: center;
+}
+
+@each $value in (90, 180, 270) {
+ .rotate-#{$value} {
+ transition: $rotate-transition;
+ backface-visibility: hidden;
+ will-change: transform;
+
+ .collapsible:not(.collapsed)> & ,
+ .show > &,
+ .active > & {
+ transform: rotateZ(#{$value}deg);
+ transition: $rotate-transition;
+
+ [direction="rtl"] & {
+ transform: rotateZ(-#{$value}deg);
+ }
+ }
+ }
+
+ .rotate-n#{$value} {
+ transition: $rotate-transition;
+ backface-visibility: hidden;
+ will-change: transform;
+
+ .collapsible:not(.collapsed)> &,
+ .show > &,
+ .active > & {
+ transform: rotateZ(-#{$value}deg);
+ transition: $rotate-transition;
+
+ [direction="rtl"] & {
+ transform: rotateZ(#{$value}deg);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_scroll.scss b/src/_res/assets/sass/core/components/_scroll.scss
new file mode 100644
index 0000000..e61ca0b
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_scroll.scss
@@ -0,0 +1,309 @@
+//
+// Scroll
+//
+
+
+// Customize native scrollbars only for desktop mode
+@include media-breakpoint-up(lg) {
+ main,
+ span,
+ ol,
+ ul,
+ pre,
+ div {
+ // Firefox
+ scrollbar-width: thin;
+
+ // Webkit
+ &::-webkit-scrollbar {
+ width: var(--kt-scrollbar-width);
+ height: var(--kt-scrollbar-height);
+ }
+
+ ::-webkit-scrollbar-track {
+ @include border-radius($scrollbar-border-radius);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ @include border-radius($scrollbar-border-radius);
+ }
+
+ // Default color
+ @include scrollbar-color(var(--kt-scrollbar-color), var(--kt-scrollbar-hover-color));
+ }
+}
+
+// Overflow scroll
+.scroll {
+ overflow: scroll;
+ position: relative;
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow: auto;
+ }
+}
+
+.scroll-x {
+ overflow-x: scroll;
+ position: relative;
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-x: auto;
+ }
+}
+
+.scroll-y {
+ overflow-y: scroll;
+ position: relative;
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-y: auto;
+ }
+}
+
+// Hover overflow scroll
+.hover-scroll {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow: hidden;
+
+ border-right: var(--kt-scrollbar-width) solid transparent;
+ border-bottom: var(--kt-scrollbar-height) transparent;
+ margin-right: calc( -1 * var(--kt-scrollbar-width));
+ margin-bottom: calc( -1 * var(--kt-scrollbar-height));
+
+ &:hover {
+ overflow: scroll;
+ border-right: 0;
+ border-bottom: 0;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow: scroll;
+ position: relative;
+ border-right: 0;
+ border-bottom: 0;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow: auto;
+ }
+}
+
+// Hover overflow scroll y
+.hover-scroll-y {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow-y: hidden;
+ border-right: var(--kt-scrollbar-width) solid transparent;
+ margin-right: calc( -1 * var(--kt-scrollbar-width));
+
+ &:hover {
+ overflow-y: scroll;
+ border-right: 0;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow-y: scroll;
+ position: relative;
+ border-right: 0;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-y: auto;
+ }
+}
+
+// Hover overflow scroll x
+.hover-scroll-x {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow-x: hidden;
+ border-bottom: var(--kt-scrollbar-height) solid transparent;
+
+ &:hover {
+ overflow-x: scroll;
+ border-bottom: 0;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow-x: scroll;
+ position: relative;
+ border-bottom: 0;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-x: auto;
+ }
+}
+
+// Hover overflow overlay
+.hover-scroll-overlay {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow: hidden;
+
+ // Webkit
+ &::-webkit-scrollbar {
+ width: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-width) );
+ height: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-width) );
+ }
+
+ &::-webkit-scrollbar-track {
+ border-radius: 0;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 0;
+ background-clip: content-box;
+ border-right: var(--kt-scrollbar-space) solid transparent;
+ border-bottom: var(--kt-scrollbar-space) solid transparent;
+ }
+
+ &:hover {
+ overflow: overlay;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow: scroll;
+ position: relative;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow: auto;
+ }
+}
+
+// Hover overflow overlay y
+.hover-scroll-overlay-y {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow-y: hidden;
+
+ // Webkit
+ &::-webkit-scrollbar {
+ width: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-space));
+ }
+
+ &::-webkit-scrollbar-track {
+ border-radius: 0;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 0;
+ background-clip: content-box;
+ border-right: var(--kt-scrollbar-space) solid transparent;
+ }
+
+ &:hover {
+ overflow-y: overlay;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow-y: scroll;
+ position: relative;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-y: auto;
+ }
+}
+
+// Hover overflow overlay x
+.hover-scroll-overlay-x {
+ position: relative;
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ overflow-x: hidden;
+
+ // Webkit
+ &::-webkit-scrollbar {
+ height: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-space) );
+ }
+
+ &::-webkit-scrollbar-track {
+ border-radius: 0;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 0;
+ background-clip: content-box;
+ border-bottom: var(--kt-scrollbar-space) solid transparent;
+ }
+
+ &:hover {
+ overflow-x: overlay;
+ }
+
+ // Firefox hack
+ @-moz-document url-prefix() {
+ overflow-x: scroll;
+ position: relative;
+ }
+ }
+
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ overflow-x: auto;
+ }
+}
+
+// Utility classes
+.scroll-ps {
+ padding-left: var(--kt-scrollbar-width) !important;
+}
+
+.scroll-ms {
+ margin-left: var(--kt-scrollbar-width) !important;
+}
+
+.scroll-mb {
+ margin-bottom: var(--kt-scrollbar-height) !important;
+}
+
+.scroll-pe {
+ padding-right: var(--kt-scrollbar-width) !important;
+}
+
+.scroll-me {
+ margin-right: var(--kt-scrollbar-width) !important;
+}
+
+.scroll-px {
+ padding-left: var(--kt-scrollbar-width) !important;
+ padding-right: var(--kt-scrollbar-width) !important;
+}
+
+.scroll-mx {
+ margin-left: var(--kt-scrollbar-width) !important;
+ margin-right: var(--kt-scrollbar-width) !important;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_scrolltop.scss b/src/_res/assets/sass/core/components/_scrolltop.scss
new file mode 100644
index 0000000..b4571bf
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_scrolltop.scss
@@ -0,0 +1,69 @@
+//
+// Scrolltop
+//
+
+.scrolltop {
+ position: fixed;
+ display: none;
+ cursor: pointer;
+ z-index: $scrolltop-z-index;
+ justify-content: center;
+ align-items: center;
+ width: $scrolltop-size;
+ height: $scrolltop-size;
+ bottom: $scrolltop-bottom;
+ right: $scrolltop-end;
+ background-color: var(--kt-scrolltop-bg-color);
+ box-shadow: var(--kt-scrolltop-box-shadow);
+ opacity: $scrolltop-opacity;
+ transition: $transition-link;
+ @include border-radius($border-radius);
+
+ .svg-icon {
+ @include svg-icon-size(24px);
+ color: var(--kt-scrolltop-icon-color);
+ }
+
+ > i {
+ font-size: 1.3rem;
+ color: var(--kt-scrolltop-icon-color);
+ }
+
+ &:hover {
+ background-color: var(--kt-scrolltop-bg-color-hover);
+
+ .svg-icon,
+ i {
+ color: var(--kt-scrolltop-icon-color-hover);
+ }
+ }
+
+ [data-kt-scrolltop="on"] & {
+ opacity: var(--kt-scrolltop-opacity-on);
+ animation: animation-scrolltop .4s ease-out 1;
+ display: flex;
+
+ &:hover {
+ transition: $transition-link;
+ opacity: var(--kt-scrolltop-opacity-hover);
+ }
+ }
+
+
+}
+
+// Tablet & Mobile Modess
+@include media-breakpoint-down(lg) {
+ .scrolltop {
+ bottom: $scrolltop-bottom-mobile;
+ right: $scrolltop-end-mobile;
+ width: $scrolltop-size-mobile;
+ height: $scrolltop-size-mobile;
+ }
+}
+
+// Animations
+@keyframes animation-scrolltop {
+ from { margin-bottom: -15px; }
+ to { margin-bottom: 0; }
+}
diff --git a/src/_res/assets/sass/core/components/_separator.scss b/src/_res/assets/sass/core/components/_separator.scss
new file mode 100644
index 0000000..4417e1d
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_separator.scss
@@ -0,0 +1,66 @@
+//
+// Separator
+//
+
+.separator {
+ display: block;
+ height: 0;
+ border-bottom: 1px solid var(--kt-border-color);
+
+ &.separator-dotted {
+ border-bottom-style: dotted;
+ border-bottom-color: var(--kt-border-dashed-color);
+ }
+
+ &.separator-dashed {
+ border-bottom-style: dashed;
+ border-bottom-color: var(--kt-border-dashed-color);
+ }
+
+ &.separator-content {
+ display: flex;
+ align-items: center;
+ border-bottom: 0;
+ text-align: center;
+
+ &::before,
+ &::after {
+ content: " ";
+ width: 50%;
+ border-bottom: 1px solid var(--kt-border-color);
+ }
+
+ &::before{
+ margin-right: 1.25rem;
+ }
+
+ &::after{
+ margin-left: 1.25rem;
+ }
+
+ &.separator-dotted {
+ &::before,
+ &::after {
+ border-bottom-style: dotted;
+ border-bottom-color: var(--kt-border-dashed-color);
+ }
+ }
+
+ &.separator-dashed {
+ &::before,
+ &::after {
+ border-bottom-style: dashed;
+ border-bottom-color: var(--kt-border-dashed-color);
+ }
+ }
+
+ @each $color, $value in $theme-colors {
+ &.border-#{$color}{
+ &::before,
+ &::after {
+ border-color: $value !important;
+ }
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_shape.scss b/src/_res/assets/sass/core/components/_shape.scss
new file mode 100644
index 0000000..e540908
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_shape.scss
@@ -0,0 +1,13 @@
+//
+// Shape
+//
+
+.xehagon {
+ //$edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20
+ @include shape(6);
+}
+
+.octagon {
+ //$edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20
+ @include shape(8);
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_stepper.scss b/src/_res/assets/sass/core/components/_stepper.scss
new file mode 100644
index 0000000..eff128c
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_stepper.scss
@@ -0,0 +1,8 @@
+//
+// Stepper
+//
+
+// Import Dependencies
+@import "stepper/base";
+@import "stepper/pills";
+@import "stepper/links";
diff --git a/src/_res/assets/sass/core/components/_svg-icon.scss b/src/_res/assets/sass/core/components/_svg-icon.scss
new file mode 100644
index 0000000..7147ab8
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_svg-icon.scss
@@ -0,0 +1,30 @@
+//
+// SVG Icon
+//
+
+.svg-icon {
+ line-height: 1;
+ color: var(--kt-text-muted);
+ @include svg-icon-size(get($font-sizes, 5));
+
+ // Theme colors
+ @each $name, $color in $theme-text-colors {
+ &.svg-icon-#{$name} {
+ color: var(--kt-text-#{$name});
+ }
+ }
+
+ // Responsive icon sizes
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ // Sizes
+ @each $name, $value in $font-sizes {
+ &.svg-icon#{$infix}-#{$name} {
+ @include svg-icon-size($value, true);
+ }
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_symbol.scss b/src/_res/assets/sass/core/components/_symbol.scss
new file mode 100644
index 0000000..5b49557
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_symbol.scss
@@ -0,0 +1,133 @@
+//
+// symbol
+//
+
+// Base
+.symbol {
+ display: inline-block;;
+ flex-shrink: 0;
+ position: relative;
+ @include border-radius($border-radius);
+
+ // Label
+ .symbol-label {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 500;
+ color: var(--kt-symbol-label-color);
+ background-color: var(--kt-symbol-label-bg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: cover;
+ @include border-radius($border-radius);
+
+ &:after {
+ @include border-radius($border-radius);
+ }
+ }
+
+ // Badge
+ .symbol-badge {
+ position: absolute;
+ border-radius: 100%;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%) !important;
+ }
+
+ // Image
+ > img {
+ width: 100%;
+ flex-shrink: 0;
+ display: inline-block;
+ @include border-radius($border-radius);
+ }
+
+ // Square
+ &.symbol-square {
+ &,
+ > img,
+ .symbol-label {
+ border-radius: 0 !important;
+ }
+ }
+
+ // Circle
+ &.symbol-circle {
+ &,
+ > img,
+ .symbol-label {
+ border-radius: 50%;
+
+ &:after {
+ border-radius: 50%;
+ }
+ }
+ }
+
+ // Sizes
+ @include symbol-size(get($symbol-sizes, default));
+
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @each $name, $value in $symbol-sizes {
+ @if ($name != 'default') {
+ &.symbol#{$infix}-#{$name} {
+ @include symbol-size($value);
+ }
+ }
+ }
+ }
+ }
+}
+
+// Group
+.symbol-group {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin-left: 10px;
+
+ .symbol {
+ position: relative;
+ z-index: 0;
+ margin-left: -10px;
+ transition: all 0.3s ease;
+
+ &:hover {
+ transition: all 0.3s ease;
+ z-index: 1;
+ }
+ }
+
+ .symbol-badge {
+ border: 2px solid var(--kt-body-bg);
+ }
+
+ .symbol-label {
+ position: relative;
+
+ &:after {
+ display: block;
+ content: " ";
+ border-radius: inherit;
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ border: 2px solid var(--kt-symbol-border-color);
+ -webkit-background-clip: padding-box; /* for Safari */
+ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+ }
+ }
+
+ &.symbol-hover {
+ .symbol {
+ cursor: pointer;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_tables.scss b/src/_res/assets/sass/core/components/_tables.scss
new file mode 100644
index 0000000..1ff0772
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_tables.scss
@@ -0,0 +1,243 @@
+//
+// Table
+//
+
+// Table
+.table {
+ --#{$prefix}table-color: var(--kt-table-color);
+ --#{$prefix}table-bg: var(--kt-table-bg);
+ --#{$prefix}table-border-color: var(--kt-table-border-color);
+ --#{$prefix}table-accent-bg: var(--kt-table-accent-bg);
+ --#{$prefix}table-striped-color: var(--kt-table-striped-color);
+ --#{$prefix}table-striped-bg: var(--kt-table-striped-bg);
+ --#{$prefix}table-active-color: var(--kt-table-active-color);
+ --#{$prefix}table-active-bg: var(--kt-table-active-bg);
+ --#{$prefix}table-hover-color: var(--kt-table-hover-color);
+ --#{$prefix}table-hover-bg: var(--kt-table-hover-bg);
+
+ // Fix for BS 5.1.2 update
+ & > :not(:first-child) {
+ border-color: transparent;
+ border-width: 0;
+ border-style: none;
+ }
+
+ >:not(:last-child)>:last-child>* {
+ border-bottom-color: inherit;
+ }
+
+ tr, th, td {
+ border-color: inherit;
+ border-width: inherit;
+ border-style: inherit;
+ text-transform: inherit;
+ font-weight: inherit;
+ font-size: inherit;
+ color: inherit;
+ height: inherit;
+ min-height: inherit;
+
+ &:first-child {
+ padding-left: 0;
+ }
+
+ &:last-child {
+ padding-right: 0;
+ }
+ }
+
+ tfoot,
+ tbody {
+ tr:last-child {
+ border-bottom: 0 !important;
+
+ th, td {
+ border-bottom: 0 !important;
+ }
+ }
+ }
+
+ tfoot {
+ th, td {
+ border-top: inherit;
+ }
+ }
+
+ // Rounded
+ &.table-rounded {
+ border-radius: $border-radius;
+ border-spacing: 0;
+ border-collapse: separate;
+ }
+
+ // Flush
+ &.table-flush {
+ tr, th, td {
+ padding: inherit;
+ }
+ }
+
+ // Row bordered
+ &.table-row-bordered {
+ tr {
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: var(--kt-border-color);
+ }
+
+ tfoot {
+ th, td {
+ border-top-width: 1px !important;
+ }
+ }
+ }
+
+ // Row dashed
+ &.table-row-dashed {
+ tr {
+ border-bottom-width: 1px;
+ border-bottom-style: dashed;
+ border-bottom-color: var(--kt-border-color);
+ }
+
+ tfoot {
+ th, td {
+ border-top-width: 1px !important;
+ }
+ }
+ }
+
+ // Row border colors
+ @each $name, $value in $grays {
+ &.table-row-gray-#{$name} {
+ tr {
+ border-bottom-color: var(--kt-gray-#{$name});
+ }
+ }
+ }
+}
+
+// Layout fixed
+.table-layout-fixed {
+ table-layout: fixed;
+}
+
+// Sorting
+.table-sort {
+ &:after {
+ opacity: 0;
+ }
+}
+
+.table-sort,
+.table-sort-asc,
+.table-sort-desc {
+ vertical-align: middle;
+
+ &:after {
+ position: relative;
+ display: inline-block;
+ width: 0.75rem;
+ height: 0.75rem;
+ content: " ";
+ bottom: auto;
+ right: auto;
+ left: auto;
+ margin-left: 0.5rem;
+ }
+}
+
+.table-sort-asc {
+ &:after {
+ opacity: 1;
+ @include svg-bg-icon(arrow-top, var(--kt-text-muted));
+ }
+}
+
+.table-sort-desc {
+ &:after {
+ opacity: 1;
+ @include svg-bg-icon(arrow-bottom, var(--kt-text-muted));
+ }
+}
+
+// Loading
+.table-loading-message {
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ @include border-radius($border-radius);
+ box-shadow: var(--kt-table-loading-message-box-shadow);
+ background-color: var(--kt-table-loading-message-bg);
+ color: var(--kt-table-loading-message-color);
+ font-weight: $font-weight-bold;
+ margin: 0 !important;
+ width: auto;
+ padding: 0.85rem 2rem !important;
+ transform: translateX(-50%) translateY(-50%);
+}
+
+.table-loading {
+ position: relative;
+
+ .table-loading-message {
+ display: block;
+ }
+}
+
+// Cell gutters
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @each $name, $value in $gutters {
+ .table.g#{$infix}-#{$name} {
+ th, td {
+ padding: $value;
+
+ // Datatables responsive mode fix
+ &.dtr-control {
+ padding-left: $value !important;
+ }
+ }
+ }
+
+ .table.gy#{$infix}-#{$name} {
+ th, td {
+ padding-top: $value;
+ padding-bottom: $value;
+ }
+ }
+
+ .table.gx#{$infix}-#{$name} {
+ th, td {
+ padding-left: $value;
+ padding-right: $value;
+
+ // Datatables responsive mode fix
+ &.dtr-control {
+ padding-left: $value !important;
+ }
+ }
+ }
+
+ .table.gs#{$infix}-#{$name} {
+ th, td {
+ &:first-child {
+ padding-left: $value;
+ }
+
+ &:last-child {
+ padding-right: $value;
+ }
+
+ // Datatables responsive mode fix
+ &.dtr-control:first-child {
+ padding-left: $value !important;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_theme-mode.scss b/src/_res/assets/sass/core/components/_theme-mode.scss
new file mode 100644
index 0000000..40e99ee
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_theme-mode.scss
@@ -0,0 +1,38 @@
+//
+// Theme Modes
+//
+
+// Used for theme mode switching via JS
+[data-kt-theme-mode-switching="true"] * {
+ transition: none !important;
+}
+
+// Light mode
+@include theme-light() {
+ .theme-dark-show {
+ display: none !important;
+ }
+
+ .theme-light-bg-transparent {
+ background-color: transparent !important;
+ }
+
+ .theme-light-bg-body {
+ background-color: var(--kt-body-bg) !important;
+ }
+}
+
+// Dark mode
+@include theme-dark() {
+ .theme-light-show {
+ display: none !important;
+ }
+
+ .theme-dark-bg-transparent {
+ background-color: transparent !important;
+ }
+
+ .theme-dark-bg-body {
+ background-color: var(--kt-body-bg) !important;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_timeline-label.scss b/src/_res/assets/sass/core/components/_timeline-label.scss
new file mode 100644
index 0000000..edbcab7
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_timeline-label.scss
@@ -0,0 +1,68 @@
+//
+// Timeline Label
+//
+
+
+.timeline-label {
+ position: relative;
+
+ $label-width: 50px;
+
+ &:before {
+ content: '';
+ position: absolute;
+ left: $label-width + 1px;
+ width: 3px;
+ top: 0;
+ bottom: 0;
+ background-color: var(--kt-gray-200);
+ }
+
+ //
+ .timeline-item {
+ display: flex;
+ align-items: flex-start;
+ position: relative;
+ margin-bottom: 1.7rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .timeline-label {
+ width: $label-width;
+ flex-shrink: 0;
+ position: relative;
+ color: var(--kt-gray-800);
+ }
+
+ .timeline-badge {
+ flex-shrink: 0;
+ background-color: var(--kt-body-bg);
+ width: 1rem;
+ height: 1rem;
+ border-radius: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1;
+ position: relative;
+ margin-top: 1px;
+ margin-left: -0.5rem;
+ padding: 3px !important;
+ border: 6px solid var(--kt-body-bg) !important;
+
+ span {
+ display: block;
+ border-radius: 100%;
+ width: 6px;
+ height: 6px;
+ background-color: var(--kt-gray-200);
+ }
+ }
+
+ .timeline-content {
+ flex-grow: 1;
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_timeline.scss b/src/_res/assets/sass/core/components/_timeline.scss
new file mode 100644
index 0000000..4813245
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_timeline.scss
@@ -0,0 +1,70 @@
+//
+// Timeline
+//
+
+// Base
+.timeline {
+ // Item
+ .timeline-item {
+ position: relative;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ align-items: flex-start;
+
+ &:last-child {
+ .timeline-line {
+ bottom: 100%;
+ }
+ }
+ }
+
+ // Line
+ .timeline-line {
+ display: block;
+ content: " ";
+ justify-content: center;
+ position: absolute;
+ z-index: 0;
+ left: 0;
+ top:0;
+ bottom: 0;
+ transform: translate(50%);
+ border-left-width: 1px;
+ border-left-style: dashed;
+ border-left-color: var(--kt-gray-300);
+ }
+
+ // Icon
+ .timeline-icon {
+ z-index: 1;
+ flex-shrink: 0;
+ margin-right: 1rem;
+ }
+
+ // Content
+ .timeline-content {
+ width: 100%;
+ overflow: auto;
+ margin-bottom: 1.5rem;
+ }
+
+ // Vertical center
+ &.timeline-center {
+ .timeline-item {
+ align-items: center;
+
+ &:first-child {
+ .timeline-line {
+ top: 50%;
+ }
+ }
+
+ &:last-child {
+ .timeline-line {
+ bottom: 50%;
+ }
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_toasts.scss b/src/_res/assets/sass/core/components/_toasts.scss
new file mode 100644
index 0000000..4612c77
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_toasts.scss
@@ -0,0 +1,15 @@
+.toast {
+ --#{$prefix}toast-color: var(--kt-toast-color);
+ --#{$prefix}toast-bg: var(--kt-toast-background-color);
+ --#{$prefix}toast-border-color: var(--kt-toast-border-color);
+ --#{$prefix}toast-box-shadow: var(--kt-toast-box-shadow);
+ --#{$prefix}toast-header-color: var(--kt-toast-header-color);
+ --#{$prefix}toast-header-bg: var(--kt-toast-header-background-color);
+ --#{$prefix}toast-header-border-color: var(--kt-toast-header-border-color);
+
+ .toast-header {
+ .btn-close {
+ margin-right: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_toggle.scss b/src/_res/assets/sass/core/components/_toggle.scss
new file mode 100644
index 0000000..9f97ee2
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_toggle.scss
@@ -0,0 +1,19 @@
+//
+// Toggle
+//
+
+.toggle {
+ &.collapsible:not(.collapsed), // Integration with Bootstrap Collapse
+ &.active {
+ .toggle-off {
+ display: none;
+ }
+ }
+
+ &.collapsible.collapsed, // Integration with Bootstrap Collapse
+ &:not(.collapsible):not(.active) {
+ .toggle-on {
+ display: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/_tooltip.scss b/src/_res/assets/sass/core/components/_tooltip.scss
new file mode 100644
index 0000000..94725b4
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_tooltip.scss
@@ -0,0 +1,31 @@
+//
+// Tooltip
+//
+
+
+// Base
+.tooltip {
+ --#{$prefix}tooltip-color: var(--kt-tooltip-color);
+ --#{$prefix}tooltip-bg: var(--kt-tooltip-bg);
+ --#{$prefix}tooltip-opacity: var(--kt-tooltip-opacity);
+
+ .tooltip-inner {
+ box-shadow: var(--kt-tooltip-box-shadow);
+ }
+
+ &.tooltop-auto-width {
+ .tooltip-inner {
+ white-space: nowrap;
+ max-width: none;
+ }
+ }
+
+ // Inverse
+ &.tooltip-inverse {
+ @include tooltip-theme(
+ $bg-color: var(--kt-dark),
+ $color: var(--kt-dark-inverse),
+ $arrow-color: var(--kt-dark),
+ );
+ }
+}
diff --git a/src/_res/assets/sass/core/components/_type.scss b/src/_res/assets/sass/core/components/_type.scss
new file mode 100644
index 0000000..01819b7
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_type.scss
@@ -0,0 +1,5 @@
+
+
+.blockquote-footer {
+ color: var(--kt-blockquote-footer-color);
+}
diff --git a/src/_res/assets/sass/core/components/_utilities.scss b/src/_res/assets/sass/core/components/_utilities.scss
new file mode 100644
index 0000000..0874a6c
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_utilities.scss
@@ -0,0 +1,125 @@
+//
+// Custom utilities
+//
+
+$utilities: map-merge(
+ $utilities,
+ (
+ "position": (
+ property: position,
+ responsive: true,
+ values: static relative absolute fixed sticky
+ ),
+ "opacity": (
+ property: opacity,
+ class: opacity,
+ values: $opacity-values
+ ),
+ "opacity-hover": (
+ property: opacity,
+ state: hover,
+ class: opacity,
+ values: $opacity-values
+ ),
+ "font-size": (
+ rfs: true,
+ responsive: true,
+ property: font-size,
+ class: fs,
+ values: $font-sizes
+ ),
+ "width": (
+ responsive: true,
+ property: width,
+ class: w,
+ values: $custom-sizes
+ ),
+ "max-width": (
+ responsive: true,
+ property: max-width,
+ class: mw,
+ values: $custom-sizes
+ ),
+ "min-width": (
+ responsive: true,
+ property: min-width,
+ class: min-w,
+ values: $custom-sizes
+ ),
+ "height": (
+ responsive: true,
+ property: height,
+ class: h,
+ values: $custom-sizes
+ ),
+ "max-height": (
+ responsive: true,
+ property: max-height,
+ class: mh,
+ values: $custom-sizes
+ ),
+ "min-height": (
+ responsive: true,
+ property: min-height,
+ class: min-h,
+ values: $custom-sizes
+ ),
+ "z-index": (
+ property: z-index,
+ class: z-index,
+ values: $zindex-values
+ ),
+ "border-top-width": (
+ property: border-top-width,
+ class: border-top,
+ values: $border-widths
+ ),
+ "border-bottom-width": (
+ property: border-bottom-width,
+ class: border-bottom,
+ values: $border-widths
+ ),
+ "border-right-width": (
+ property: border-right-width,
+ class: border-right,
+ values: $border-widths
+ ),
+ "border-left-width": (
+ property: border-left-width,
+ class: border-left,
+ values: $border-widths
+ ),
+ "line-height": (
+ property: line-height,
+ class: lh,
+ values: (
+ 0: 0,
+ 1: 1,
+ sm: $line-height-sm,
+ base: $line-height-base,
+ lg: $line-height-lg,
+ xl: $line-height-xl,
+ xxl: $line-height-xxl
+ )
+ ),
+ "letter-spacing": (
+ property: letter-spacing,
+ class: ls,
+ values: $letter-spacing-values
+ ),
+ "rounded": (
+ property: border-radius,
+ class: rounded,
+ values: (
+ null: $border-radius,
+ 0: 0,
+ 1: $border-radius-sm,
+ 2: $border-radius,
+ 3: $border-radius-lg,
+ 4: $border-radius-xl,
+ circle: 50%,
+ pill: $border-radius-pill
+ )
+ )
+ )
+);
diff --git a/src/_res/assets/sass/core/components/_variables.scss b/src/_res/assets/sass/core/components/_variables.scss
new file mode 100644
index 0000000..e20e542
--- /dev/null
+++ b/src/_res/assets/sass/core/components/_variables.scss
@@ -0,0 +1,1587 @@
+//
+// Bootstrap & Custom Variables
+// Safely override any variable in _variables.custom.scss
+//
+
+
+// Bootstrap color system
+$white: #ffffff !default;
+$black:#000000 !default;
+
+// Bootstrap grey colors
+$gray-100: #f5f8fa !default;
+$gray-200: #eff2f5 !default;
+$gray-300: #E4E6EF !default;
+$gray-400: #B5B5C3 !default;
+$gray-500: #A1A5B7 !default;
+$gray-600: #7E8299 !default;
+$gray-700: #5E6278 !default;
+$gray-800: #3F4254 !default;
+$gray-900: #181C32 !default;
+
+$gray-100-dark: #1b1b29 !default;
+$gray-200-dark: #2B2B40 !default;
+$gray-300-dark: #323248 !default;
+$gray-400-dark: #474761 !default;
+$gray-500-dark: #565674 !default;
+$gray-600-dark: #6D6D80 !default;
+$gray-700-dark: #92929F !default;
+$gray-800-dark: #CDCDDE !default;
+$gray-900-dark: #FFFFFF !default;
+
+// Bootstrap muted color
+$text-muted: $gray-500 !default;
+$text-muted-dark: $gray-500-dark !default;
+
+// Bootstrap gray colors map
+$grays: (
+ "100": $gray-100,
+ "200": $gray-200,
+ "300": $gray-300,
+ "400": $gray-400,
+ "500": $gray-500,
+ "600": $gray-600,
+ "700": $gray-700,
+ "800": $gray-800,
+ "900": $gray-900
+) !default;
+
+$grays-dark: (
+ "100": $gray-100-dark,
+ "200": $gray-200-dark,
+ "300": $gray-300-dark,
+ "400": $gray-400-dark,
+ "500": $gray-500-dark,
+ "600": $gray-600-dark,
+ "700": $gray-700-dark,
+ "800": $gray-800-dark,
+ "900": $gray-900-dark
+) !default;
+
+// Bootstrap contextual colors
+// Primary colors
+$primary: #3699FF !default;
+$primary-active: #187DE4 !default;
+$primary-light: #F1FAFF !default;
+$primary-light-dark: #212E48 !default;
+$primary-inverse: $white !default;
+
+// Secondary colors
+$secondary: $gray-300 !default;
+$secondary-dark: $gray-300-dark !default;
+$secondary-active: $gray-400 !default;
+$secondary-active-dark: $gray-400-dark !default;
+$secondary-light: $gray-100 !default;
+$secondary-light-dark: $gray-100-dark !default;
+$secondary-inverse: $gray-800 !default;
+$secondary-inverse-dark: $gray-800-dark !default;
+
+// Light colors
+$light: $gray-100 !default;
+$light-dark: $gray-200-dark !default;
+$light-active: $gray-200 !default;
+$light-active-dark: $gray-300-dark !default;
+$light-light: gba($gray-100, 0.75) !default;
+$light-inverse: $gray-600 !default;
+$light-inverse-dark: $gray-600-dark !default;
+
+// Success colors
+$success: #1BC5BD !default;
+$success-active: #0BB7AF !default;
+$success-light: #C9F7F5 !default;
+$success-light-dark: #1C3833 !default;
+$success-inverse: $white !default;
+
+// Info colors
+$info: #8950FC !default;
+$info-active: #7337EE !default;
+$info-light: #EEE5FF !default;
+$info-light-dark: #2F264F !default;
+$info-inverse: $white !default;
+
+// Warning colors
+$warning: #FFA800 !default;
+$warning-active: #EE9D01 !default;
+$warning-light: #FFF4DE !default;
+$warning-light-dark: #392F28 !default;
+$warning-inverse: $white !default;
+
+// Danger colors
+$danger: #F64E60 !default;
+$danger-active: #EE2D41 !default;
+$danger-light: #FFE2E5 !default;
+$danger-light-dark: #3A2434 !default;
+$danger-inverse: $white !default;
+
+// Dark colors
+$dark: $gray-900 !default;
+$dark-dark: $gray-900-dark !default;
+$dark-active: darken($gray-900, 3%) !default;
+$dark-active-dark: lighten($gray-900-dark, 3%) !default;
+$dark-light: $gray-200 !default;
+$dark-light-dark: $gray-200-dark !default;
+$dark-inverse: $white !default;
+$dark-inverse-dark: $gray-100-dark !default;
+
+// Contextual colors
+$theme-colors: (
+ "white": $white, // custom color type
+ "light": $light,
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "dark": $dark
+) !default;
+
+$theme-colors-dark: (
+ "dark": $dark-dark,
+ "light": $light-dark,
+ "secondary": $secondary-dark,
+) !default;
+
+// Contextual active state colors
+$theme-active-colors: (
+ "primary": $primary-active,
+ "secondary": $secondary-active,
+ "light": $light-active,
+ "success": $success-active,
+ "info": $info-active,
+ "warning": $warning-active,
+ "danger": $danger-active,
+ "dark": $dark-active
+) !default;
+
+$theme-active-colors-dark: (
+ "dark": $dark-active-dark,
+ "light": $light-active-dark,
+ "secondary": $secondary-active-dark,
+) !default;
+
+// Contextual inverse state colors
+$theme-inverse-colors: (
+ "primary": $primary-inverse,
+ "secondary": $secondary-inverse,
+ "light": $light-inverse,
+ "success": $success-inverse,
+ "info": $info-inverse,
+ "warning": $warning-inverse,
+ "danger": $danger-inverse,
+ "dark": $dark-inverse
+) !default;
+
+$theme-inverse-colors-dark: (
+ "dark": $dark-inverse-dark,
+ "light": $light-inverse-dark,
+ "secondary": $secondary-inverse-dark,
+) !default;
+
+// Contextual light state colors
+$theme-light-colors: (
+ "primary": $primary-light,
+ "secondary": $secondary-light,
+ "success": $success-light,
+ "info": $info-light,
+ "warning": $warning-light,
+ "danger": $danger-light,
+ "dark": $dark-light
+) !default;
+
+$theme-light-colors-dark: (
+ "primary": $primary-light-dark,
+ "success": $success-light-dark,
+ "info": $info-light-dark,
+ "warning": $warning-light-dark,
+ "danger": $danger-light-dark,
+ "dark": $dark-light-dark,
+ "secondary": $secondary-light-dark
+) !default;
+
+// Text colors
+$theme-text-colors: (
+ "white": $white,
+ "primary": $primary,
+ "secondary": $secondary,
+ "light": $light,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "dark": $dark,
+ "muted": $text-muted,
+ "gray-100": $gray-100,
+ "gray-200": $gray-200,
+ "gray-300": $gray-300,
+ "gray-400": $gray-400,
+ "gray-500": $gray-500,
+ "gray-600": $gray-600,
+ "gray-700": $gray-700,
+ "gray-800": $gray-800,
+ "gray-900": $gray-900
+) !default;
+
+$theme-text-colors-dark: (
+ "dark": $dark-dark,
+ "muted": $text-muted-dark,
+ "secondary": $secondary-dark,
+ "gray-100": $gray-100-dark,
+ "gray-200": $gray-200-dark,
+ "gray-300": $gray-300-dark,
+ "gray-400": $gray-400-dark,
+ "gray-500": $gray-500-dark,
+ "gray-600": $gray-600-dark,
+ "gray-700": $gray-700-dark,
+ "gray-800": $gray-800-dark,
+ "gray-900": $gray-900-dark
+) !default;
+
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+$enable-rounded: true !default;
+$enable-shadows: true !default;
+$enable-negative-margins: true !default;
+$enable-smooth-scroll: false !default;
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+$spacer: 1rem !default;
+
+$spacers: (
+ 0: 0,
+ 1: ($spacer * .25), // 3.5px
+ 2: ($spacer * .5), // 7px;
+ 3: ($spacer * .75), // 10.5px
+ 4: ($spacer * 1), // 14px
+ 5: ($spacer * 1.25), // 17.5px
+ 6: ($spacer * 1.5), // 21px
+ 7: ($spacer * 1.75), // 24.5px
+ 8: ($spacer * 2), // 28px
+ 9: ($spacer * 2.25), // 31.5px
+ 10: ($spacer * 2.5), // 35px
+ 11: ($spacer * 2.75), // 38.5px
+ 12: ($spacer * 3), // 42px
+ 13: ($spacer * 3.25), // 45.5px
+ 14: ($spacer * 3.5), // 49px
+ 15: ($spacer * 3.75), // 52.5px
+ 16: ($spacer * 4), // 55px
+ 17: ($spacer * 4.25), // 58.5px
+ 18: ($spacer * 4.5), // 62px
+ 19: ($spacer * 4.75), // 65.5px
+ 20: ($spacer * 5), // 69px
+);
+
+
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+$position-values: (
+ 0: 0,
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%
+) !default;
+
+
+// Body
+//
+// Settings for the `` element.
+$body-bg: $white !default;
+$body-bg-rgb: to-rgb($body-bg) !default;
+$body-bg-dark: #1e1e2d !default;
+$body-bg-rgb-dark: to-rgb($body-bg-dark) !default;
+$body-color: $gray-900 !default;
+$body-color-dark: $gray-900-dark !default;
+$body-text-align: null !default;
+
+
+// Links
+//
+// Style anchor elements.
+$link-color: $primary !default;
+$link-color-dark: $primary !default;
+$link-decoration: none !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: $primary-active !default;
+$link-hover-color-dark: $primary-active !default;
+$link-hover-decoration: none !default;
+
+
+// Paragraphs
+//
+// Style p element.
+$paragraph-margin-bottom: 1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ xxl: 1400px
+) !default;
+// scss-docs-end grid-breakpoints
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ xxl: 1320px
+) !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+$border-width: 1px !default;
+$border-color: $gray-200 !default;
+$border-color-dark: $gray-200-dark !default;
+$border-dashed-color: $gray-300 !default;
+$border-dashed-color-dark: $gray-300-dark !default;
+
+$border-widths: (
+ 0: 0,
+ 1: 1px,
+ 2: 2px,
+ 3: 3px,
+ 4: 4px,
+ 5: 5px
+) !default;
+
+// Border Radiues
+$border-radius: .475rem !default;
+$border-radius-sm: .425rem !default;
+$border-radius-lg: .625rem !default;
+$border-radius-xl: 1rem !default;
+$border-radius-2xl: 2rem !default;
+$border-radius-pill: 50rem !default;
+
+// Keenthemes hover states
+$component-hover-color: $primary !default;
+$component-hover-color-dark: $primary !default;
+$component-hover-bg: #F4F6FA !default;
+$component-hover-bg-dark: $gray-200-dark !default;
+
+// Keenthemes active states
+$component-active-color: $primary-inverse !default;
+$component-active-color-dark: $primary-inverse !default;
+$component-active-bg: $primary !default;
+$component-active-bg-dark: $primary !default;
+
+// Keenthemes checked states
+$component-checked-color: $primary-inverse !default;
+$component-checked-color-dark: $primary-inverse !default;
+$component-checked-bg: $primary !default;
+$component-checked-bg-dark: $primary !default;
+
+// Keenthemes custom transition settings
+$transition-link: color .2s ease !default;
+$transition-input: color .2s ease !default;
+
+// Box shadow
+$box-shadow-xs: 0 .1rem 0.75rem 0.25rem rgba($black, 0.05) !default;
+$box-shadow-xs-dark: 0 .1rem 0.75rem 0.25rem rgba($black, 0.05) !default;
+$box-shadow-sm: 0 .1rem 1rem 0.25rem rgba($black, .05) !default;
+$box-shadow-sm-dark: 0 .1rem 1rem 0.25rem rgba($black, .05) !default;
+$box-shadow: 0 .5rem 1.5rem 0.5rem rgba($black, .075) !default;
+$box-shadow-dark: 0 .5rem 1.5rem 0.5rem rgba($black, .075) !default;
+$box-shadow-lg: 0 1rem 2rem 1rem rgba($black, .1) !default;
+$box-shadow-lg-dark: 0 1rem 2rem 1rem rgba($black, .1) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
+$box-shadow-inset-dark: inset 0 1px 2px rgba($black, .075) !default;
+
+// Keenthemes custom gutter sizes
+$gutters: (
+ 0: 0rem,
+ 1: ($spacer * .25), // 3.5px
+ 2: ($spacer * .5), // 7px;
+ 3: ($spacer * .75), // 10.5px
+ 4: ($spacer * 1), // 14px
+ 5: ($spacer * 1.25), // 17.5px
+ 6: ($spacer * 1.5), // 21px
+ 7: ($spacer * 1.75), // 24.5px
+ 8: ($spacer * 2), // 28px
+ 9: ($spacer * 2.25), // 31.5px
+ 10: ($spacer * 2.5), // 35px
+) !default;
+
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+// Font family
+$font-family-sans-serif: Inter, Helvetica, "sans-serif" !default;
+
+$font-size-base: 1rem !default; // Assumes the browser default, typically `13px`
+$font-size-lg: $font-size-base * 1.075 !default; // 14.04px
+$font-size-sm: $font-size-base * .925 !default; // 12.025px
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-semibold: 500 !default;
+$font-weight-bold: 600 !default;
+$font-weight-bolder: 700 !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+// Line heights
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 1.75 !default;
+
+// Keenthemes custom line heights
+$line-height-xl: 2 !default;
+$line-height-xxl: 2.25 !default;
+
+// Heading sizes
+$h1-font-size: $font-size-base * 1.75 !default; // 22.75px
+$h2-font-size: $font-size-base * 1.5 !default; // 19.50px
+$h3-font-size: $font-size-base * 1.35 !default; // 17.55px
+$h4-font-size: $font-size-base * 1.25 !default; // 16.25px
+$h5-font-size: $font-size-base * 1.15 !default; // 14.95px
+$h6-font-size: $font-size-base * 1.075 !default; // 13.97px
+
+// Font Sizes
+$font-sizes: (
+ 1: $h1-font-size, // 22.75px
+ 2: $h2-font-size, // 19.50px
+ 3: $h3-font-size, // 17.55px
+ 4: $h4-font-size, // 16.25px
+ 5: $h5-font-size, // 14.95px
+ 6: $h6-font-size, // 13.95px
+
+ 7: $font-size-base * 0.95, // 12.35px
+ 8: $font-size-base * 0.85, // 11.05px
+ 9: $font-size-base * 0.75, // 9.75px
+ 10: $font-size-base * 0.5, // 6.50px
+
+ base: $font-size-base, // 13px
+ fluid: 100%, // 100%
+
+ 2x: $font-size-base * 2, // 26px
+ 2qx: $font-size-base * 2.25, // 29.25px
+ 2hx: $font-size-base * 2.5, // 32.5px
+ 2tx: $font-size-base * 2.75, // 35.75px
+
+ 3x: $font-size-base * 3, // 39px
+ 3qx: $font-size-base * 3.25, // 42.25px
+ 3hx: $font-size-base * 3.5, // 45.5px
+ 3tx: $font-size-base * 3.75, // 48.75px
+
+ 4x: $font-size-base * 4, // 52px
+ 4qx: $font-size-base * 4.25, // 55.25px
+ 4hx: $font-size-base * 4.5, // 58.5px
+ 4tx: $font-size-base * 4.75, // 61.75px
+
+ 5x: $font-size-base * 5, // 65px
+ 5qx: $font-size-base * 5.25, // 68.25px
+ 5hx: $font-size-base * 5.5, // 71.5px
+ 5tx: $font-size-base * 5.75 // 74.75px
+) !default;
+
+$headings-font-weight: 600 !default;
+$headings-color: $gray-900 !default;
+$headings-color-dark: $gray-900-dark !default;
+$headings-line-height: 1.2 !default;
+
+$display-font-sizes: (
+ 1: 5rem,
+ 2: 4.5rem,
+ 3: 4rem,
+ 4: 3.5rem,
+ 5: 3rem,
+ 6: 2.5rem
+) !default;
+
+$display-font-weight: $font-weight-bolder !default;
+$display-line-height: $headings-line-height !default;
+
+$blockquote-footer-color: $gray-600 !default;
+$blockquote-footer-color: $gray-600-dark !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding-y: .75rem !default;
+$table-cell-padding-x: .75rem !default;
+$table-cell-padding-y-sm: .5rem !default;
+$table-cell-padding-x-sm: .5rem !default;
+
+$table-color: $body-color !default;
+$table-color-dark: $body-color-dark !default;
+$table-bg: transparent !default;
+$table-bg-dark: transparent !default;
+$table-accent-bg: transparent !default;
+$table-accent-bg-dark: transparent !default;
+$table-striped-color: $table-color !default;
+$table-striped-color-dark: $table-color-dark !default;
+$table-striped-bg: rgba($gray-100, 0.75) !default;
+$table-striped-bg-dark: rgba($gray-100-dark, 0.75) !default;
+
+$table-active-color: $table-color !default;
+$table-active-color-dark: $table-color-dark !default;
+$table-active-bg: $gray-100 !default;
+$table-active-bg-dark: $gray-100-dark !default;
+
+$table-hover-color: $table-color !default;
+$table-hover-color-dark: $table-color-dark !default;
+$table-hover-bg: $gray-100 !default;
+$table-hover-bg-dark: $gray-100-dark !default;
+
+$table-border-factor: .1 !default;
+$table-border-width: $border-width !default;
+$table-border-color: $border-color !default;
+$table-border-color-dark: $border-color-dark !default;
+
+$table-caption-color: $text-muted !default;
+$table-caption-color-dark: $text-muted-dark !default;
+
+$table-loading-message-box-shadow: 0px 0px 50px 0px rgba(82,63,105, 0.15) !default;
+$table-loading-message-box-shadow-dark: 0px 0px 30px rgba(0, 0, 0, 0.3) !default;
+$table-loading-message-bg: $body-bg !default;
+$table-loading-message-bg-dark: $gray-200-dark !default;
+$table-loading-message-color: $gray-700 !default;
+$table-loading-message-color-dark: $gray-700-dark !default;
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+$input-btn-padding-y: .775rem !default;
+$input-btn-padding-x: 1rem !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base * 1.1 !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: .25rem !default;
+$input-btn-focus-color-opacity: .25 !default;
+$input-btn-focus-color-opacity-dark: .25 !default;
+$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
+$input-btn-focus-color-dark: rgba($component-active-bg-dark, $input-btn-focus-color-opacity-dark) !default;
+$input-btn-focus-box-shadow: null !default;
+$input-btn-focus-box-shadow-dark: null !default;
+
+$input-btn-padding-y-sm: .55rem !default;
+$input-btn-padding-x-sm: .75rem !default;
+$input-btn-font-size-sm: $font-size-sm !default;
+
+$input-btn-padding-y-lg: .825rem !default;
+$input-btn-padding-x-lg: 1.5rem !default;
+$input-btn-font-size-lg: $font-size-base * 1.15 !default;
+
+$input-btn-border-width: $border-width !default;
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: 1.5rem !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: 1.25rem !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: 1.75rem !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-semibold !default;
+$btn-box-shadow: null !default;
+$btn-box-shadow-dark: null !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: null !default;
+$btn-focus-box-shadow-dark: null !default;
+$btn-disabled-opacity: .65 !default;
+$btn-disabled-opacity-dark: .65 !default;
+$btn-active-box-shadow: null !default;
+$btn-active-box-shadow-dark: null !default;
+
+$btn-link-color: $link-color !default;
+$btn-link-color-dark: $link-color !default;
+$btn-link-hover-color: $link-hover-color !default;
+$btn-link-hover-color-dark: $link-hover-color !default;
+$btn-link-disabled-color: $gray-600 !default;
+$btn-link-disabled-color-dark: $gray-600-dark !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+
+
+// Forms
+$form-text-margin-top: .5rem !default;
+$form-text-font-size: $font-size-sm !default;
+$form-text-color: $text-muted !default;
+$form-text-color-dark: $text-muted-dark !default;
+
+$form-label-margin-bottom: .5rem !default;
+$form-label-font-size: 1.05rem !default;
+$form-label-font-weight: 500 !default;
+$form-label-color: $gray-800 !default;
+$form-label-color-dark: $gray-800-dark !default;
+
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-font-family: $input-btn-font-family !default;
+$input-font-size: $input-btn-font-size !default;
+$input-font-weight: $font-weight-semibold !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-bg: $body-bg !default;
+$input-bg-dark: $body-bg-dark !default;
+
+$input-border-width: $input-btn-border-width !default;
+$input-color: $gray-700 !default;
+$input-color-dark: $gray-700-dark !default;
+$input-border-color: $gray-300 !default;
+$input-border-color-dark: $gray-300-dark !default;
+//$input-box-shadow: none !default;
+//$input-box-shadow-dark: none !default;
+
+$input-border-radius: $btn-border-radius !default;
+$input-border-radius-sm: $btn-border-radius-sm !default;
+$input-border-radius-lg: $btn-border-radius-lg !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-bg-dark: $input-bg-dark !default;
+$input-focus-border-color: $gray-400 !default;
+$input-focus-border-color-dark: $gray-400-dark !default;
+$input-btn-focus-width: .25rem !default;
+$input-focus-color: $input-color !default;
+$input-focus-color-dark: $input-color-dark !default;
+$input-focus-width: $input-btn-focus-width !default;
+//$input-focus-box-shadow: none !default;
+//$input-focus-box-shadow-dark: none !default;
+
+$input-disabled-color: null !default;
+$input-disabled-color-dark: null !default;
+$input-disabled-bg: $gray-200 !default;
+$input-disabled-bg-dark: $gray-200-dark !default;
+$input-disabled-border-color: $input-border-color !default;
+$input-disabled-border-color-dark: $input-border-color-dark !default;
+
+$input-placeholder-color: $gray-500 !default;
+$input-placeholder-color-dark: $gray-500-dark !default;
+$input-plaintext-color: $gray-700 !default;
+$input-plaintext-color-dark: $gray-700-dark !default;
+
+// Keenthemes solid input style
+$input-solid-bg: $gray-100 !default;
+$input-solid-bg-dark: $gray-100-dark !default;
+$input-solid-bg-focus: darken($gray-100, 2%) !default;
+$input-solid-bg-focus-dark: lighten($gray-100-dark, 2%) !default;
+$input-solid-placeholder-color: $input-placeholder-color !default;
+$input-solid-placeholder-color-dark: $input-placeholder-color-dark !default;
+$input-solid-color: $gray-700 !default;
+$input-solid-color-dark: $gray-700-dark !default;
+
+// Form checks
+$form-check-input-width: 1.75rem !default;
+$form-check-input-width-sm: 1.55rem !default;
+$form-check-input-width-lg: 2.25rem !default;
+$form-check-input-bg-size: 60% 60% !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-padding-start: $form-check-input-width + .5rem !default;
+$form-check-padding-left: $form-check-input-width + .5rem !default;
+$form-check-margin-bottom: .125rem !default;
+$form-check-label-color: $gray-500 !default;
+$form-check-label-color-dark: $gray-500-dark !default;
+$form-check-label-color-checked: $gray-700 !default;
+$form-check-label-color-checked-dark: $gray-700-dark !default;
+$form-check-label-cursor: null !default;
+$form-check-transition: null !default;
+$form-check-inline-margin-right: 1rem !default;
+
+$form-check-input-active-filter: brightness(90%) !default;
+$form-check-input-active-filter-dark: brightness(90%) !default;
+
+$form-check-input-bg: transparent !default;
+$form-check-input-bg-dark: transparent !default;
+$form-check-input-bg-solid: $gray-200 !default;
+$form-check-input-bg-solid-dark: $gray-200-dark !default;
+$form-check-input-bg-solid: $gray-200 !default;
+$form-check-input-bg-solid-dark: $gray-200-dark !default;
+$form-check-input-border: 1px solid $input-border-color !default;
+$form-check-input-border-dark: 1px solid $input-border-color-dark !default;
+$form-check-input-border-radius: .45em !default;
+$form-check-radio-border-radius: 50% !default;
+$form-check-input-focus-border: $input-focus-border-color !default;
+$form-check-input-focus-border-dark: $input-focus-border-color-dark !default;
+$form-check-input-focus-box-shadow: none !default;
+$form-check-input-focus-box-shadow-dark: none !default;
+
+$form-check-input-checked-color: $component-checked-color !default;
+$form-check-input-checked-color-dark: $component-checked-color-dark !default;
+$form-check-input-checked-bg-color: $component-checked-bg !default;
+$form-check-input-checked-bg-color-solid: $component-checked-bg !default;
+$form-check-input-checked-bg-color-dark: $component-checked-bg-dark !default;
+$form-check-input-checked-bg-color-solid-dark: $component-checked-bg-dark !default;
+$form-check-input-checked-border-color: $component-checked-bg !default;
+$form-check-input-checked-border-color-dark: $component-checked-bg-dark !default;
+$form-check-input-checked-bg-image: url("data:image/svg+xml, ") !default;
+$form-check-input-checked-bg-image-dark: url("data:image/svg+xml, ") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml, ") !default;
+$form-check-radio-checked-bg-image-dark: url("data:image/svg+xml, ") !default;
+
+$form-check-input-indeterminate-color: $component-checked-color !default;
+$form-check-input-indeterminate-color-dark: $component-checked-color-dark !default;
+$form-check-input-indeterminate-bg-color: $component-checked-bg !default;
+$form-check-input-indeterminate-bg-color-dark: $component-checked-bg-dark !default;
+$form-check-input-indeterminate-border-color: $component-checked-bg !default;
+$form-check-input-indeterminate-border-color-dark: $component-checked-bg-dark !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml, ") !default;
+$form-check-input-indeterminate-bg-image-dark: url("data:image/svg+xml, ") !default;
+
+$form-check-input-disabled-opacity: .5 !default;
+$form-check-input-disabled-opacity-dark: .5 !default;
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
+$form-check-label-disabled-opacity-dark: $form-check-input-disabled-opacity-dark !default;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+$form-check-btn-check-disabled-opacity-dark: $btn-disabled-opacity-dark !default;
+
+$form-switch-color: rgba(0, 0, 0, .25) !default;
+$form-switch-color-dark: rgba(255, 255, 255, .25) !default;
+$form-switch-color-solid: $white !default;
+$form-switch-color-solid-dark: $gray-500 !default;
+$form-switch-width: 3.25rem !default;
+$form-switch-height: 2.25rem !default;
+$form-switch-width-sm: 2.5rem !default;
+$form-switch-height-sm: 1.5rem !default;
+$form-switch-width-lg: 3.75rem !default;
+$form-switch-height-lg: 2.75rem !default;
+
+$form-switch-padding-start: $form-switch-width + .5rem !default;
+$form-switch-padding-left: $form-switch-width + .5rem !default;
+$form-switch-bg-image: url("data:image/svg+xml, ") !default;
+$form-switch-bg-image-dark: url("data:image/svg+xml, ") !default;
+$form-switch-bg-image-solid: url("data:image/svg+xml, ") !default;
+$form-switch-bg-image-solid-dark: url("data:image/svg+xml, ") !default;
+$form-switch-border-radius: $form-switch-width !default;
+
+$form-switch-focus-color: $input-focus-border-color !default;
+$form-switch-focus-color-dark: $input-focus-border-color-dark !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml, ") !default;
+$form-switch-focus-bg-image-dark: url("data:image/svg+xml, ") !default;
+
+$form-switch-checked-color: $component-checked-color !default;
+$form-switch-checked-color-dark: $component-checked-color-dark !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml, ") !default;
+$form-switch-checked-bg-image-dark: url("data:image/svg+xml, ") !default;
+$form-switch-checked-bg-position: right center !default;
+
+
+// Input groups
+$input-group-addon-bg: $gray-100 !default;
+$input-group-addon-bg-dark: $gray-100-dark !default;
+$input-group-addon-color: $gray-700 !default;
+$input-group-addon-color-dark: $gray-700-dark !default;
+$input-group-addon-border-color: $input-border-color !default;
+$input-group-addon-border-color-dark: $input-border-color-dark !default;
+
+
+// Form select
+$form-select-color: $input-color !default;
+$form-select-color-dark: $input-color-dark !default;
+$form-select-bg: $input-bg !default;
+$form-select-bg-dark: $input-bg-dark !default;
+$form-select-disabled-color: null !default;
+$form-select-disabled-color-dark: null !default;
+$form-select-disabled-bg: $gray-200 !default;
+$form-select-disabled-bg-dark: $gray-200-dark !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-disabled-border-color-dark: $input-disabled-border-color-dark !default;
+$form-select-indicator-color: $gray-600 !default;
+$form-select-indicator-color-dark: $gray-600-dark !default;
+$form-select-indicator: url("data:image/svg+xml, ") !default;
+$form-select-indicator-dark: url("data:image/svg+xml, ") !default;
+$form-select-border-color: $input-border-color !default;
+$form-select-border-color-dark: $input-border-color-dark !default;
+$form-select-box-shadow: $box-shadow-inset !default;
+$form-select-box-shadow-dark: $box-shadow-inset-dark !default;
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-border-color-dark: $input-focus-border-color-dark !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+$form-select-focus-box-shadow-dark: 0 0 0 $form-select-focus-width $input-btn-focus-color-dark !default;
+
+
+// Form range
+$form-range-track-border-radius: $border-radius !default;
+$form-range-track-bg: var(--kt-gray-300) !default;
+$form-range-thumb-disabled-bg: var(--kt-gray-500) !default;
+
+
+// Form file button
+$form-file-button-color: $input-color !default;
+$form-file-button-color-dark: $input-color-dark !default;
+$form-file-button-bg: $input-group-addon-bg !default;
+$form-file-button-bg-dark: $input-group-addon-bg-dark !default;
+$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
+$form-file-button-hover-bg-dark: shade-color($form-file-button-bg-dark, 5%) !default;
+
+
+// Form floating
+$input-height-border: $input-border-width * 2 !default;
+$form-floating-height: calc(3.75rem + #{$input-height-border}) !default;
+$form-floating-input-padding-t: 1.85rem !default;
+
+
+// Navs
+$nav-link-transition: color .15s ease-in-out !default;
+
+$nav-tabs-border-color: $border-color !default;
+$nav-tabs-border-color-dark: $border-color-dark !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-hover-border-color-dark: $gray-200-dark $gray-200-dark $nav-tabs-border-color-dark !default;
+$nav-tabs-link-active-color: $gray-700 !default;
+$nav-tabs-link-active-color-dark: $gray-700-dark !default;
+$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-bg-dark: $body-bg-dark !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+$nav-tabs-link-active-border-color-dark: $gray-300-dark $gray-300-dark $nav-tabs-link-active-bg-dark !default;
+
+$nav-pills-link-active-color: $component-active-color !default;
+$nav-pills-link-active-color-dark: $component-active-color-dark !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
+$nav-pills-link-active-bg-dark: $component-active-bg-dark !default;
+
+
+// Dropdowns
+// Dropdown menu container and contents.
+$dropdown-color: $body-color !default;
+$dropdown-color-dark: $body-color-dark !default;
+$dropdown-bg: $body-bg !default;
+$dropdown-bg-dark: $body-bg-dark !default;
+$dropdown-divider-bg: $gray-100 !default;
+$dropdown-divider-bg-dark: $gray-100-dark !default;
+$dropdown-box-shadow: 0px 0px 50px 0px rgba(82,63,105, 0.15) !default;
+$dropdown-box-shadow-dark: 0px 0px 30px rgba(0, 0, 0, 0.3) !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: 0 !default;
+$dropdown-link-color: $gray-900 !default;
+$dropdown-link-color-dark: $gray-900-dark !default;
+$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
+$dropdown-link-hover-color-dark: shade-color($dropdown-link-color-dark, 10%) !default;
+$dropdown-link-hover-bg: $gray-200 !default;
+$dropdown-link-hover-bg-dark: $gray-200-dark !default;
+$dropdown-link-active-color: $component-active-color !default;
+$dropdown-link-active-color-dark: $component-active-color-dark !default;
+$dropdown-link-active-bg: $component-active-bg !default;
+$dropdown-link-active-bg-dark: $component-active-bg-dark !default;
+$dropdown-link-disabled-color: $gray-500 !default;
+$dropdown-link-disabled-color-dark: $gray-500-dark !default;
+$dropdown-header-color: $gray-600 !default;
+$dropdown-header-color-dark: $gray-600-dark !default;
+
+
+// Pagination
+$pagination-item-height: 2.5rem !default;
+$pagination-item-bg: $body-bg !default;
+$pagination-item-bg-dark: $body-bg-dark !default;
+$pagination-item-space: 0.5rem !default;
+$pagination-item-space-tablet-and-mobile: 0.25rem !default;
+$pagination-font-weight: $font-weight-semibold !default;
+$pagination-font-size: $font-size-lg !default;
+$pagination-icon-font-size: 0.85rem !default;
+$pagination-icon-height: $pagination-item-height * 0.35 !default;
+
+$pagination-padding-y: .375rem !default;
+$pagination-padding-x: .75rem !default;
+$pagination-padding-y-sm: .25rem !default;
+$pagination-padding-x-sm: .5rem !default;
+$pagination-padding-y-lg: .75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-color: $gray-700 !default;
+$pagination-color-dark: $gray-700-dark !default;
+$pagination-bg: transparent !default;
+$pagination-bg-dark: transparent !default;
+$pagination-border-width: 0 !default;
+$pagination-border-radius: $btn-border-radius !default;
+$pagination-margin-left: 0 !default;
+$pagination-border-color: transparent !default;
+$pagination-border-color-dark: transparent !default;
+
+$pagination-focus-color: $component-hover-color !default;
+$pagination-focus-color-dark: $component-hover-color-dark !default;
+$pagination-focus-bg: $component-hover-bg !default;
+$pagination-focus-bg-dark: $component-hover-bg-dark !default;
+$pagination-focus-box-shadow: none !default;
+$pagination-focus-box-shadow-dark: none !default;
+$pagination-focus-outline: 0 !default;
+$pagination-focus-outline-dark: 0 !default;
+
+$pagination-hover-color: $component-hover-color !default;
+$pagination-hover-color-dark: $component-hover-color-dark !default;
+$pagination-hover-bg: $component-hover-bg !default;
+$pagination-hover-bg-dark: $component-hover-bg-dark !default;
+$pagination-hover-border-color: transparent !default;
+$pagination-hover-border-color-dark: transparent !default;
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-color-dark: $component-active-color-dark !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-bg-dark: $component-active-bg-dark !default;
+$pagination-active-border-color: transparent !default;
+$pagination-active-border-color-dark: transparent !default;
+
+$pagination-disabled-color: $gray-400 !default;
+$pagination-disabled-color-dark: $gray-400-dark !default;
+$pagination-disabled-bg: transparent !default;
+$pagination-disabled-bg-dark: transparent !default;
+$pagination-disabled-border-color: transparent !default;
+$pagination-disabled-border-color-dark: transparent !default;
+
+
+// Card
+$card-bg: $body-bg !default;
+$card-bg-dark: $body-bg-dark !default;
+$card-box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.02) !default;
+$card-box-shadow-dark: none !default;
+$card-border-color: $border-color !default;
+$card-border-color-dark: $border-color-dark !default;
+$card-border-style: solid !default;
+$card-border-dashed-color: $border-dashed-color !default;
+$card-border-dashed-color-dark: $border-dashed-color-dark !default;
+$card-color: null !default;
+$card-color-dark: null !default;
+$card-cap-bg: transparent !default;
+$card-cap-bg-dark: transparent !default;
+$card-py: 2rem !default;
+$card-px: 2.25rem !default;
+$card-border-radius: $border-radius-lg !default;
+$card-header-py: 0.5rem !default;
+$card-header-height: 70px !default;
+$card-border-enabled: false !default;
+
+
+// Accordion
+$accordion-color: $body-color !default;
+$accordion-color-dark: $body-color-dark !default;
+$accordion-bg: $body-bg !default;
+$accordion-bg-dark: $body-bg-dark !default;
+$accordion-padding-y: 1.5rem !default;
+$accordion-padding-x: 1.5rem !default;
+$accordion-border-color: $border-color !default;
+$accordion-border-color-dark: $border-color-dark !default;
+$accordion-border-radius: $border-radius !default;
+$accordion-button-color: $accordion-color !default;
+$accordion-button-color-dark: $accordion-color-dark !default;
+$accordion-button-bg: $accordion-bg !default;
+$accordion-button-bg-dark: $accordion-bg-dark !default;
+$accordion-button-active-bg: $gray-100 !default;
+$accordion-button-active-bg-dark: $gray-100-dark !default;
+$accordion-button-active-color: $primary !default;
+$accordion-button-active-color-dark: $primary !default;
+
+$accordion-button-focus-border-color: $border-color !default;
+$accordion-button-focus-border-color-dark: $border-color-dark !default;
+$accordion-button-focus-box-shadow: none !default;
+$accordion-button-focus-box-shadow-dark: none !default;
+
+$accordion-icon-width: 1.15rem !default;
+$accordion-icon-color: $accordion-button-color !default;
+$accordion-icon-color-dark: $accordion-button-color-dark !default;
+$accordion-icon-active-color: $accordion-button-active-color !default;
+$accordion-icon-active-color-dark: $accordion-button-active-color-dark !default;
+$accordion-button-icon: url("data:image/svg+xml, ") !default;
+$accordion-button-icon-dark: url("data:image/svg+xml, ") !default;
+$accordion-button-active-icon: url("data:image/svg+xml, ") !default;
+$accordion-button-active-icon-dark: url("data:image/svg+xml, ") !default;
+
+
+// Tooltips
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: $gray-800 !default;
+$tooltip-color-dark: $gray-800-dark !default;
+$tooltip-bg: $body-bg !default;
+$tooltip-bg-dark: $gray-200-dark !default;
+$tooltip-border-radius: $btn-border-radius !default;
+$tooltip-opacity: 1 !default;
+$tooltip-opacity-dark: 1 !default;
+$tooltip-box-shadow: $dropdown-box-shadow !default;
+$tooltip-box-shadow-dark: $dropdown-box-shadow-dark !default;
+$tooltip-padding-y: .75rem !default;
+$tooltip-padding-x: 1rem !default;
+$tooltip-margin: 0 !default;
+
+
+// Popovers
+$popover-bg: $body-bg !default;
+$popover-bg-dark: $gray-200-dark !default;
+$popover-font-size: $font-size-base !default;
+$popover-border-color: $popover-bg !default;
+$popover-border-color-dark: $popover-bg-dark !default;
+$popover-border-radius: $border-radius !default;
+$popover-box-shadow: $dropdown-box-shadow !default;
+$popover-box-shadow-dark: $dropdown-box-shadow-dark !default;
+$popover-header-bg: $popover-bg !default;
+$popover-header-bg-dark: $popover-bg-dark !default;
+$popover-header-color: $gray-800 !default;
+$popover-header-color-dark: $gray-800-dark !default;
+$popover-header-font-weight: 500 !default;
+$popover-header-font-size: 1rem !default;
+$popover-header-padding-y: 1rem !default;
+$popover-header-padding-x: 1.25rem !default;
+$popover-header-border-color: $gray-200 !default;
+$popover-header-border-color-dark: $gray-300-dark !default;
+$popover-body-color: $gray-800 !default;
+$popover-body-color-dark: $gray-800-dark !default;
+$popover-body-padding-y: 1.25rem !default;
+$popover-body-padding-x: 1.25rem !default;
+
+$popover-dissmis-btn-height: 1.5rem !default;
+$popover-dissmis-btn-top: 0.85rem !default;
+$popover-dissmis-btn-end: 0.85rem !default;
+
+
+// Toasts
+$toast-color: null !default;
+$toast-color-dark: null !default;
+$toast-background-color: rgba($white, .85) !default;
+$toast-background-color-dark: rgba($black, .85) !default;
+$toast-box-shadow: $box-shadow !default;
+$toast-box-shadow-dark: $box-shadow-dark !default;
+$toast-header-color: $gray-600 !default;
+$toast-header-color-dark: $gray-600-dark !default;
+$toast-header-background-color: rgba($white, .85) !default;
+$toast-header-background-color-dark: rgba($black, .85) !default;
+$toast-header-border-color: rgba($black, .05) !default;
+$toast-header-border-color-dark: rgba($white, .05) !default;
+
+
+// Badges
+$badge-font-size: 0.85rem !default;
+$badge-font-size-sm: 0.8rem !default;
+$badge-font-size-lg: 1rem !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-color: $body-bg !default;
+$badge-color-dark: $body-bg-dark !default;
+$badge-padding-y: .325rem !default;
+$badge-padding-x: .5rem !default;
+$badge-border-radius: $border-radius-sm !default;
+$badge-size: 1.75rem !default;
+$badge-size-sm: 1.5rem !default;
+$badge-size-lg: 2rem !default;
+
+
+// Modals
+// Padding applied to the modal body
+$modal-inner-padding: 1.75rem !default;
+
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between: .5rem !default;
+
+$modal-dialog-margin: .5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-content-color: null !default;
+$modal-content-color-dark: null !default;
+$modal-content-bg: $body-bg !default;
+$modal-content-bg-dark: $body-bg-dark !default;
+$modal-content-border-color: null !default;
+$modal-content-border-color-dark: null !default;
+$modal-content-border-width: 0 !default;
+$modal-content-border-radius: $border-radius !default;
+$modal-content-inner-border-radius: $border-radius !default;
+$modal-content-box-shadow: 0 .25rem .5rem rgba($black, .05) !default;
+$modal-content-box-shadow-dark: 0 .25rem .5rem rgba($white, .05) !default;
+$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .1) !default;
+$modal-content-box-shadow-xs-dark: 0 .25rem .5rem rgba($white, .1) !default;
+$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .1) !default;
+$modal-content-box-shadow-sm-up-dark: 0 .5rem 1rem rgba($white, .1) !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-bg-dark: $black !default;
+$modal-backdrop-opacity: 0.3 !default;
+$modal-backdrop-opacity-dark: 0.4 !default;
+
+$modal-header-border-color: $border-color !default;
+$modal-header-border-color-dark: $border-color-dark !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-footer-border-color-dark: $modal-header-border-color-dark !default;
+$modal-header-border-width: 1px !default;
+
+
+// Progress bars
+$progress-height: 1rem !default;
+$progress-font-size: $font-size-base * .75 !default;
+$progress-bg: $gray-100 !default;
+$progress-bg-dark: $gray-100-dark !default;
+$progress-border-radius: 6px !default;
+$progress-box-shadow: none !default;
+$progress-box-shadow-dark: none !default;
+
+
+// List group
+$list-group-color: $gray-900 !default;
+$list-group-color-dark: $gray-900-dark !default;
+$list-group-bg: $white !default;
+$list-group-bg-dark: $black !default;
+$list-group-border-color: rgba($black, .125) !default;
+$list-group-border-color-dark: rgba($white, .125) !default;
+
+$list-group-hover-bg: $gray-100 !default;
+$list-group-hover-bg-dark: $gray-100 !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-color-dark: $component-active-color-dark !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-bg-dark: $component-active-bg-dark !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+$list-group-active-border-color-dark: $list-group-active-bg-dark !default;
+
+$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-color-dark: $gray-600-dark !default;
+$list-group-disabled-bg: $list-group-bg !default;
+$list-group-disabled-bg-dark: $list-group-bg-dark !default;
+
+$list-group-action-color: $gray-700 !default;
+$list-group-action-color-dark: $gray-700-dark !default;
+$list-group-action-hover-color: $list-group-action-color !default;
+$list-group-action-hover-color-dark: $list-group-action-color-dark !default;
+
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-color-dark: $body-color-dark !default;
+$list-group-action-active-bg: $gray-200 !default;
+$list-group-action-active-bg-dark: $gray-200-dark !default;
+
+
+// Image thumbnails
+$thumbnail-bg: $body-bg !default;
+$thumbnail-bg-dark: $body-bg-dark !default;
+$thumbnail-border-color: $border-color !default;
+$thumbnail-border-color-dark: $border-color-dark !default;
+$thumbnail-box-shadow: $box-shadow-sm !default;
+$thumbnail-box-shadow-dark: $box-shadow-sm-dark !default;
+
+
+// Figures
+$figure-caption-color: $gray-600 !default;
+$figure-caption-color-dark: $gray-600-dark !default;
+
+
+// Breadcrumbs
+$breadcrumb-bg: null !default;
+$breadcrumb-bg-dark: null !default;
+$breadcrumb-divider-color: $gray-600 !default;
+$breadcrumb-divider-color-dark: $gray-600-dark !default;
+$breadcrumb-active-color: $primary !default;
+$breadcrumb-active-color-dark: $primary !default;
+$breadcrumb-item-padding-x: .5rem !default;
+
+
+// Carousel
+$carousel-custom-indicator-transition-speed: 0.3s !default;
+$carousel-custom-indicator-default-bg-color: $gray-200 !default;
+$carousel-custom-indicator-default-bg-color-dark: $gray-200-dark !default;
+$carousel-custom-indicator-active-bg-color: $gray-400 !default;
+$carousel-custom-indicator-active-bg-color-dark: $gray-400-dark !default;
+
+$carousel-custom-dots-indicator-default-size: 9px !default;
+$carousel-custom-dots-indicator-active-size: 13px !default;
+
+$carousel-custom-bullet-indicator-default-size: 6px !default;
+$carousel-custom-bullet-indicator-active-width: 16px !default;
+$carousel-custom-bullet-indicator-default-bg-color: $gray-400 !default;
+$carousel-custom-bullet-indicator-default-bg-color-dark: $gray-400-dark !default;
+$carousel-custom-bullet-indicator-active-bg-color: $gray-600 !default;
+$carousel-custom-bullet-indicator-active-bg-color-dark: $gray-600-dark !default;
+
+
+// Spinners
+$spinner-border-width: .185rem !default;
+$spinner-animation-speed: .65s !default;
+$spinner-border-width-sm: .145em !default;
+
+
+// Close
+$btn-close-width: 0.75rem !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-color: $black !default;
+$btn-close-color-dark: $white !default;
+$btn-close-bg: url("data:image/svg+xml, ") !default;
+$btn-close-bg-dark: url("data:image/svg+xml, ") !default;
+$btn-close-focus-shadow: none !default;
+
+
+// Offcanvas
+$offcanvas-border-color: $modal-content-border-color !default;
+$offcanvas-border-color-dark: $modal-content-border-color-dark !default;
+$offcanvas-bg-color: $modal-content-bg !default;
+$offcanvas-bg-color-dark: $modal-content-bg-dark !default;
+$offcanvas-color: $modal-content-color !default;
+$offcanvas-color-dark: $modal-content-color-dark !default;
+$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-box-shadow-dark: $modal-content-box-shadow-xs-dark !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-bg-dark: $modal-backdrop-bg-dark !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
+$offcanvas-backdrop-opacity-dark: $modal-backdrop-opacity-dark !default;
+
+
+// Code
+$code-bg: #F1F3F8 !default;
+$code-bg-dark: $gray-200-dark !default;
+$code-box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08) !default;
+$code-box-shadow-dark: 0px 3px 9px rgba(0, 0, 0, 0.08) !default;
+$code-padding: 0.1rem 0.4rem !default;
+$code-margin: 0 0.5rem !default;
+$code-font-weight: 400 !default;
+$code-border-radius: 0.3rem !default;
+$code-color: #b93993 !default;
+$code-color-dark: #b93993 !default;
+$code-space: 0.25rem !default;
+
+// Opacity
+$opacity-values: (
+ 0: 0,
+ 5: .05,
+ 10: .1,
+ 15: .15,
+ 20: .20,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1,
+ ) !default;
+
+// Zindex
+$zindex-values: (
+ n1: -1,
+ n2: -2,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3
+) !default;
+
+// Letter spacing
+$letter-spacing-values: (
+ 1: 0.1rem,
+ 2: 0.115rem,
+ 3: 0.125rem,
+ 4: 0.25rem,
+ 5: 0.5rem,
+ n1: -0.1rem,
+ n2: -0.115rem,
+ n3: -0.125rem,
+ n4: -0.25rem,
+ n5: -0.5rem,
+) !default;
+
+// Keenthemes hight and width sizes
+$custom-sizes: (
+ unset: unset,
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%,
+ auto: auto,
+ 1px: 1px,
+ 2px: 2px,
+ 3px: 3px,
+ 4px: 4px,
+ 5px: 5px,
+ 6px: 6px,
+ 7px: 7px,
+ 8px: 8px,
+ 9px: 9px,
+ 10px: 10px,
+ 15px: 15px,
+ 20px: 20px,
+ 25px: 25px,
+ 30px: 30px,
+ 35px: 35px,
+ 40px: 40px,
+ 45px: 45px,
+ 50px: 50px,
+ 55px: 55px,
+ 60px: 60px,
+ 65px: 65px,
+ 70px: 70px,
+ 75px: 75px,
+ 80px: 80px,
+ 85px: 85px,
+ 90px: 90px,
+ 95px: 95px,
+ 100px: 100px,
+ 125px: 125px,
+ 150px: 150px,
+ 175px: 175px,
+ 200px: 200px,
+ 225px: 225px,
+ 250px: 250px,
+ 275px: 275px,
+ 300px: 300px,
+ 325px: 325px,
+ 350px: 350px,
+ 375px: 375px,
+ 400px: 400px,
+ 425px: 425px,
+ 450px: 450px,
+ 475px: 475px,
+ 500px: 500px,
+ 550px: 550px,
+ 600px: 600px,
+ 650px: 650px,
+ 700px: 700px,
+ 750px: 750px,
+ 800px: 800px,
+ 850px: 850px,
+ 900px: 900px,
+ 950px: 950px,
+ 1000px: 1000px
+) !default;
+
+
+// Keenthemes symbol component
+$symbol-sizes: (
+ 20px: 20px,
+ 25px: 25px,
+ 30px: 30px,
+ 35px: 35px,
+ 40px: 40px,
+ 45px: 45px,
+ default: 50px,
+ 50px: 50px,
+ 55px: 55px,
+ 60px: 60px,
+ 65px: 65px,
+ 70px: 70px,
+ 75px: 75px,
+ 90px: 90px,
+ 100px:100px,
+ 125px:125px,
+ 150px:150px,
+ 160px:160px,
+ 175px:175px,
+ 200px:200px
+) !default;
+
+$symbol-border-color: rgba($body-bg, 0.5);
+$symbol-border-color-dark: rgba($body-bg, 0.5);
+$symbol-label-color: $gray-800;
+$symbol-label-color-dark: $gray-800-dark;
+$symbol-label-bg: $gray-100;
+$symbol-label-bg-dark: $gray-100-dark;
+
+
+// Keenthemes bullet component
+$bullet-bg-color: $gray-400 !default;
+$bullet-bg-color-dark: $gray-400-dark !default;
+$bullet-dot-size: 4px !default;
+$bullet-bar-height: 4px !default;
+$bullet-bar-width: 8px !default;
+$bullet-bar-border-radius: 6px !default;
+$bullet-line-height: 1px !default;
+$bullet-line-width: 5px !default;
+
+
+// Keenthemes scrolltop component
+$scrolltop-z-index: 105 !default;
+$scrolltop-opacity: 0 !default;
+$scrolltop-opacity-dark: 0 !default;
+$scrolltop-opacity-on: 0.3 !default;
+$scrolltop-opacity-on-dark: 0.3 !default;
+$scrolltop-opacity-hover: 1 !default;
+$scrolltop-opacity-hover-dark: 1 !default;
+$scrolltop-bottom: 40px !default;
+$scrolltop-bottom-mobile: 30px !default;
+$scrolltop-end: 20px !default;
+$scrolltop-end-mobile: 15px !default;
+$scrolltop-size: 36px !default;
+$scrolltop-size-mobile: 30px !default;
+$scrolltop-box-shadow: $box-shadow !default;
+$scrolltop-box-shadow-dark: $box-shadow-dark !default;
+$scrolltop-bg-color: $primary !default;
+$scrolltop-bg-color-dark: $primary !default;
+$scrolltop-bg-color-hover: $primary !default;
+$scrolltop-bg-color-hover-dark: $primary !default;
+$scrolltop-icon-color: $primary-inverse !default;
+$scrolltop-icon-color-dark: $primary-inverse !default;
+$scrolltop-icon-color-hover: $primary-inverse !default;
+$scrolltop-icon-color-hover-dark: $primary-inverse !default;
+
+
+// Keenthemes sticky toolbar component
+$sticky-toolbar-z-index: 95 !default;
+
+
+// Keenthemes drawer component
+$drawer-z-index: 110 !default;
+$drawer-box-shadow: 0px 1px 9px -3px rgba(0,0,0, 0.05) !default;
+$drawer-box-shadow-dark: 0px 0px 30px rgba(0, 0, 0, 0.1) !default;
+$drawer-bg-color: $body-bg !default;
+$drawer-bg-color-dark: $body-bg-dark !default;
+$drawer-transition-speed: 0.3s !default;
+$drawer-overlay-bg-color: rgba($black, 0.2) !default;
+$drawer-overlay-bg-color-dark: rgba($black, 0.4) !default;
+$drawer-overlay-animation-speed: 0.3s !default;
+
+// Keenthemes menu component
+$menu-dropdown-box-shadow: $dropdown-box-shadow !default;
+$menu-dropdown-box-shadow-dark: $dropdown-box-shadow-dark !default;
+$menu-dropdown-z-index: 107 !default;
+$menu-dropdown-bg-color: $dropdown-bg !default;
+$menu-dropdown-bg-color-dark: $dropdown-bg-dark !default;
+$menu-dropdown-border-radius: $dropdown-border-radius !default;
+$menu-dropdown-animation: true !default;
+$menu-dropdown-animation-speed: 0.3s !default;
+$menu-dropdown-animation-move-offset: 0.75rem !default;
+$menu-accordion-indention: 1rem !default;
+$menu-accordion-arrow-transition: transform 0.3s ease !default;
+$menu-item-padding-y: 0.15rem !default;
+$menu-item-padding-x: 0 !default;
+$menu-link-padding-y: 0.65rem !default;
+$menu-link-padding-x: 1rem !default;
+$menu-link-border-radius: $border-radius !default;
+$menu-link-color-hover: $component-hover-color !default;
+$menu-link-color-hover-dark: $component-hover-color-dark !default;
+$menu-link-color-show: $component-hover-color !default;
+$menu-link-color-show-dark: $component-hover-color-dark !default;
+$menu-link-color-here: $component-hover-color !default;
+$menu-link-color-here-dark: $component-hover-color-dark !default;
+$menu-link-color-active: $component-hover-color !default;
+$menu-link-color-active-dark: $component-hover-color-dark !default;
+$menu-link-bg-color-hover: $component-hover-bg !default;
+$menu-link-bg-color-hover-dark: $component-hover-bg-dark !default;
+$menu-link-bg-color-show: $component-hover-bg !default;
+$menu-link-bg-color-show-dark: $component-hover-bg-dark !default;
+$menu-link-bg-color-here: $component-hover-bg !default;
+$menu-link-bg-color-here-dark: $component-hover-bg-dark !default;
+$menu-link-bg-color-active: $component-hover-bg !default;
+$menu-link-bg-color-active-dark: $component-hover-bg-dark !default;
+$menu-icon-size: 2rem !default;
+$menu-icon-space: 0.5rem !default;
+$menu-bullet-size: 1.25rem !default;
+$menu-bullet-space: 0.5rem !default;
+$menu-badge-space: 0.5rem !default;
+$menu-arrow-size: 9px !default;
+$menu-arrow-space: 5px !default;
+$menu-heading-color: $text-muted !default;
+$menu-heading-color-dark: $text-muted-dark !default;
+
+// Keenthemes feedback component
+$feedback-popup-z-index: 1000 !default;
+$feedback-popup-box-shadow: $dropdown-box-shadow !default;
+$feedback-popup-box-shadow-dark: $dropdown-box-shadow-dark !default;
+$feedback-popup-background-color: $body-bg !default;
+$feedback-popup-background-color-dark: $body-bg-dark !default;
+$feedback-popup-border-radius: $border-radius !default;
+$feedback-popup-transition-speed: 0.6s !default;
+$feedback-popup-padding: 1rem 1.25rem !default;
+
+// Keenthemes scrollbar component
+$scrollbar-space: 0.5rem !default;
+$scrollbar-border-radius: 0.5rem !default;
+$scrollbar-width: 0.4rem !default;
+$scrollbar-height: 0.4rem !default;
+$scrollbar-color: $gray-200 !default;
+$scrollbar-color-dark: $gray-200-dark !default;
+$scrollbar-hover-color: darken($gray-200, 2%) !default;
+$scrollbar-hover-color-dark: darken($gray-200-dark, 2%) !default;
+
+// Keenthemes overlay component
+$overlay-bg: rgba($black, 0.05) !default;
+$overlay-bg-dark: rgba($white, 0.05) !default;
+
+// Keenthemes blockui component
+$blockui-overlay-bg: rgba($black, 0.05) !default;
+$blockui-overlay-bg-dark: rgba($white, 0.05) !default;
+
+// Keenthemes rating component
+$rating-color-default: $gray-400 !default;
+$rating-color-default-dark: $gray-400-dark !default;
+$rating-color-active: #FFAD0F !default;
+$rating-color-active-dark: #FFAD0F !default;
+
+// Keenthemes ribbon component
+$ribbon-label-box-shadow: 0px -1px 5px 0px rgba($dark, 0.1) !default;
+$ribbon-label-box-shadow-dark: 0px -1px 5px 0px rgba($white, 0.1) !default;
+$ribbon-label-bg: $primary !default;
+$ribbon-label-bg-dark: $primary !default;
+$ribbon-label-border-color: darken($primary, 20%) !default;
+$ribbon-label-border-color-dark: darken($primary, 20%) !default;
+$ribbon-clip-bg: $dark !default;
+$ribbon-clip-bg-dark: $light !default;
+
+// Keenthemes fixed component
+$fixed-z-index: 101 !default;
+
+// Engage panel
+$engage-btn-bg: $body-bg;
+$engage-btn-bg-dark: $gray-200-dark;
+$engage-btn-color: $gray-600;
+$engage-btn-color-dark: $gray-600-dark;
+$engage-btn-color-active: $gray-800;
+$engage-btn-color-active-dark: $gray-800-dark;
+
+// Social Network Colors Used With Boostrap Buttons(see: https://brandcolors.net)
+$social-colors: (
+ facebook: (
+ base: #3b5998,
+ inverse: #ffffff,
+ light: rgba(#3b5998, 0.1),
+ active: darken(#3b5998, 7.5%)
+ ),
+ google: (
+ base: #dd4b39,
+ inverse: #ffffff,
+ light: rgba(#dd4b39, 0.1),
+ active: darken(#dd4b39, 7.5%)
+ ),
+ twitter: (
+ base: #1da1f2,
+ inverse: #ffffff,
+ light: rgba(#1da1f2, 0.1),
+ active: darken(#1da1f2, 7.5%)
+ ),
+ instagram: (
+ base: #e1306c,
+ inverse: #ffffff,
+ light: rgba(#e1306c, 0.1),
+ active: darken(#e1306c, 7.5%)
+ ),
+ youtube: (
+ base: #ff0000,
+ inverse: #ffffff,
+ light: rgba(#ff0000, 0.1),
+ active: darken(#ff0000, 7.5%)
+ ),
+ linkedin: (
+ base: #0077b5,
+ inverse: #ffffff,
+ light: rgba(#0077b5, 0.1),
+ active: darken(#0077b5, 7.5%)
+ )
+) !default;
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/buttons/_base.scss b/src/_res/assets/sass/core/components/buttons/_base.scss
new file mode 100644
index 0000000..30479d7
--- /dev/null
+++ b/src/_res/assets/sass/core/components/buttons/_base.scss
@@ -0,0 +1,132 @@
+//
+// Buttons Base
+//
+
+// Button
+.btn {
+ --#{$prefix}btn-color: var(--kt-body-color);
+ --#{$prefix}btn-bg: transparent;
+ --#{$prefix}btn-border-color: transparent;
+
+ // Reset outline
+ outline: none !important;
+
+ // Reset focus shadow
+ &:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):not(.shadow-xs) {
+ box-shadow: none !important;
+ }
+
+ // Remove border
+ &:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
+ border: 0;
+ padding: calc(#{$btn-padding-y} + #{$btn-border-width}) calc(#{$btn-padding-x} + #{$btn-border-width});
+
+ &.btn-lg {
+ padding: calc(#{$btn-padding-y-lg} + #{$btn-border-width}) calc(#{$btn-padding-x-lg} + #{$btn-border-width});
+ }
+
+ &.btn-sm {
+ padding: calc(#{$btn-padding-y-sm} + #{$btn-border-width}) calc(#{$btn-padding-x-sm} + #{$btn-border-width});
+ }
+ }
+
+ // Link
+ &.btn-link {
+ border: 0;
+ border-radius: 0;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ text-decoration: none;
+ font-weight: $btn-font-weight;
+ }
+
+ // Outline
+ &.btn-outline:not(.btn-outline-dashed) {
+ border: 1px solid var(--kt-input-border-color);
+ }
+
+ // Outline dashed
+ &.btn-outline-dashed {
+ border: 1px dashed var(--kt-input-border-color);
+ }
+
+ // Flush
+ &.btn-flush {
+ @include button-reset();
+ }
+
+ // Flex
+ &.btn-flex {
+ display: inline-flex;
+ align-items: center;
+ }
+
+ // Align start
+ &.btn-trim-start {
+ justify-content: flex-start !important;
+ padding-left: 0 !important;
+ }
+
+ // Align start
+ &.btn-trim-end {
+ justify-content: flex-end !important;
+ padding-right: 0 !important;
+ }
+}
+
+// Icons
+.btn {
+ // Font icon
+ i {
+ display: inline-flex;
+ font-size: $font-size-base;
+ padding-right: 0.35rem;
+ vertical-align: middle;
+ line-height: 0;
+ }
+
+ // Svg icon
+ .svg-icon {
+ flex-shrink: 0;
+ line-height: 0;
+ margin-right: 0.5rem;
+ }
+
+ // Icon only button
+ &.btn-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ height: $input-height;
+ width: $input-height;
+
+ // Remove border
+ &:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush) {
+ border: 0;
+ }
+
+ // Sizes
+ &.btn-sm {
+ height: $input-height-sm;
+ width: $input-height-sm;
+
+ }
+
+ &.btn-lg {
+ height: $input-height-lg;
+ width: $input-height-lg;
+ }
+
+ &.btn-circle {
+ border-radius: 50%;
+ }
+
+ i,
+ .svg-icon {
+ padding: 0;
+ margin: 0;
+ line-height: 1;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/buttons/_theme.scss b/src/_res/assets/sass/core/components/buttons/_theme.scss
new file mode 100644
index 0000000..3f1d75a
--- /dev/null
+++ b/src/_res/assets/sass/core/components/buttons/_theme.scss
@@ -0,0 +1,244 @@
+//
+// Buttons Theme
+//
+
+// Outline dashed basic style
+.btn.btn-outline.btn-outline-dashed {
+ border-width: 1px;
+ border-style: dashed;
+
+ $color: null;
+ $icon-color: null;
+ $border-color: null;
+ $bg-color: null;;
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: var(--kt-primary);
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+}
+
+// Theme colors
+@each $name, $value in $theme-colors {
+ // Base
+ .btn.btn-#{$name} {
+ $color: var(--kt-#{$name}-inverse);
+ $icon-color: var(--kt-#{$name}-inverse);
+ $border-color: var(--kt-#{$name});
+ $bg-color: var(--kt-#{$name});
+
+ $color-active: var(--kt-#{$name}-inverse);
+ $icon-color-active: var(--kt-#{$name}-inverse);
+ $border-color-active: var(--kt-#{$name}-active);
+ $bg-color-active: var(--kt-#{$name}-active);
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Light
+ @if ( theme-light-color($name) ) {
+ .btn.btn-light-#{$name} {
+ $color: var(--kt-#{$name});
+ $icon-color: var(--kt-#{$name});
+ $border-color: var(--kt-#{$name}-light);
+ $bg-color: var(--kt-#{$name}-light);
+
+ $color-active: var(--kt-#{$name}-inverse);
+ $icon-color-active: var(--kt-#{$name}-inverse);
+ $border-color-active: var(--kt-#{$name});
+ $bg-color-active: var(--kt-#{$name});
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+ }
+
+ // Background
+ .btn.btn-bg-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $border-color: var(--kt-#{$name});
+ $bg-color: var(--kt-#{$name});
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Active
+ .btn.btn-active-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $border-color: null;
+ $bg-color: null;
+
+ $color-active: var(--kt-#{$name}-inverse);
+ $icon-color-active: var(--kt-#{$name}-inverse);
+ $border-color-active: var(--kt-#{$name});
+ $bg-color-active: var(--kt-#{$name});
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Light
+ @if ( theme-light-color($name) ) {
+ .btn.btn-active-light-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $border-color: null;
+ $bg-color: null;
+
+ $color-active: var(--kt-#{$name});
+ $icon-color-active: var(--kt-#{$name});
+ $border-color-active: var(--kt-#{$name}-light);
+ $bg-color-active: var(--kt-#{$name}-light);
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+ }
+
+ // Outline
+ .btn.btn-outline.btn-outline-#{$name} {
+ $color: var(--kt-#{$name});
+ $icon-color: var(--kt-#{$name});
+ $border-color: var(--kt-#{$name});
+ $bg-color: transparent;
+
+ $color-active: var(--kt-#{$name}-active);
+ $icon-color-active: var(--kt-#{$name}-active);
+ $border-color-active: var(--kt-#{$name});
+ $bg-color-active: var(--kt-#{$name}-light);
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+}
+
+// Theme text colors
+@each $name, $value in $theme-text-colors {
+ // Text and icon colors
+ .btn.btn-color-#{$name} {
+ $color: var(--kt-text-#{$name});
+ $icon-color: var(--kt-text-#{$name});
+ $bg-color: null;
+ $border-color: null;
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Text and icon colors active state
+ .btn.btn-active-color-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $border-color: null;
+ $bg-color: null;
+
+ $color-active: var(--kt-text-#{$name});
+ $icon-color-active: var(--kt-text-#{$name});
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Icon colors
+ .btn.btn-icon-#{$name} {
+ $color: null;
+ $icon-color: var(--kt-text-#{$name});
+ $bg-color: null;
+ $border-color: null;
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Icon colors active state
+ .btn.btn-active-icon-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $bg-color: null;
+ $border-color: null;
+
+ $color-active: null;
+ $icon-color-active: var(--kt-text-#{$name});
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Text colors
+ .btn.btn-text-#{$name} {
+ $color: var(--kt-text-#{$name});
+ $icon-color: null;
+ $bg-color: null;
+ $border-color: null;
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Text colors active state
+ .btn.btn-active-text-#{$name} {
+ $color: null;
+ $icon-color: null;
+ $bg-color: null;
+ $border-color: null;
+
+ $color-active: var(--kt-text-#{$name});
+ $icon-color-active: null;
+ $border-color-active: null;
+ $bg-color-active: null;
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+}
+
+// Social colors
+@each $name, $value in $social-colors {
+ // Base
+ .btn.btn-#{$name} {
+ $color: get($value, inverse);
+ $icon-color: get($value, inverse);
+ $border-color: get($value, base);
+ $bg-color: get($value, base);
+
+ $color-active: null;
+ $icon-color-active: null;
+ $border-color-active: get($value, active);
+ $bg-color-active: get($value, active);
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+
+ // Light
+ .btn.btn-light-#{$name} {
+ $color: get($value, base);
+ $icon-color: get($value, base);
+ $bg-color: get($value, light);
+ $border-color: get($value, light);
+
+ $color-active: get($value, inverse);
+ $icon-color-active: get($value, inverse);
+ $bg-color-active: get($value, base);
+ $border-color-active: get($value, base);
+
+ @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/components.scss b/src/_res/assets/sass/core/components/components.scss
new file mode 100644
index 0000000..64e382f
--- /dev/null
+++ b/src/_res/assets/sass/core/components/components.scss
@@ -0,0 +1,107 @@
+//
+// Components
+//
+
+// Bootstrap components
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/accordion";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/offcanvas";
+@import "~bootstrap/scss/placeholders";
+
+// Bootstrap helpers
+@import "~bootstrap/scss/helpers";
+
+// Bootstrap utilities
+@import "utilities";
+@import "~bootstrap/scss/utilities/api";
+
+// Custom components
+@import "root";
+@import "root-bs";
+@import "reboot";
+@import "type";
+@import "theme-mode";
+@import "animation";
+@import "alert";
+@import "list-group";
+@import "images";
+@import "button-group";
+@import "dropdown";
+@import "toasts";
+@import "close";
+@import "offcanvas";
+@import "nav";
+@import "nav-line-tabs";
+@import "nav-pills-custom";
+@import "pagination";
+@import "separator";
+@import "carousel";
+@import "menu";
+@import "anchor";
+@import "card";
+@import "breadcrumb";
+@import "buttons";
+@import "code";
+@import "forms";
+@import "modal";
+@import "progress";
+@import "tables";
+@import "popover";
+@import "tooltip";
+@import "accordion";
+@import "feedback";
+@import "image-input";
+@import "symbol";
+@import "pulse";
+@import "page-loader";
+@import "scrolltop";
+@import "svg-icon";
+@import "fixed";
+@import "timeline";
+@import "timeline-label";
+@import "overlay";
+@import "bullet";
+@import "drawer";
+@import "badge";
+@import "indicator";
+@import "hover";
+@import "rotate";
+@import "scroll";
+@import "rating";
+@import "stepper";
+@import "toggle";
+@import "shape";
+@import "ribbon";
+@import "blockui";
+@import "explore";
+@import "engage";
+@import "cookiealert";
+@import "print";
+@import "helpers";
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/forms/_floating-labels.scss b/src/_res/assets/sass/core/components/forms/_floating-labels.scss
new file mode 100644
index 0000000..3c9d596
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_floating-labels.scss
@@ -0,0 +1,12 @@
+//
+// Floating label
+//
+
+.form-floating {
+ .form-control.form-control-solid {
+ &::placeholder {
+ color: transparent;
+ }
+ }
+}
+
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/forms/_form-check-solid.scss b/src/_res/assets/sass/core/components/forms/_form-check-solid.scss
new file mode 100644
index 0000000..c5d7088
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_form-check-solid.scss
@@ -0,0 +1,239 @@
+//
+// Form Check
+//
+
+// Check input
+.form-check:not(.form-switch) {
+ .form-check-input {
+ &[type="checkbox"] {
+ background-size: $form-check-input-bg-size;
+ }
+ }
+}
+
+// Custom checkbox and radio
+.form-check-custom {
+ display: flex;
+ align-items: center;
+ padding-left: 0;
+ margin: 0;
+
+ // Input
+ .form-check-input {
+ margin: 0;
+ float: none;
+ flex-shrink: 0;
+ }
+
+ // Label
+ .form-check-label {
+ margin-left: 0.55rem;
+ }
+
+ // Sizing
+ &.form-check-sm {
+ .form-check-input {
+ height: $form-check-input-width-sm;
+ width: $form-check-input-width-sm;
+ }
+ }
+
+ &.form-check-lg {
+ .form-check-input {
+ height: $form-check-input-width-lg;
+ width: $form-check-input-width-lg;
+ }
+ }
+
+ // Solid
+ &.form-check-solid {
+ .form-check-input {
+ border: 0;
+ background-color: var(--kt-form-check-input-bg-solid);
+
+ &:active,
+ &:focus {
+ filter: none;
+ background-color: var(--kt-form-check-input-bg-solid);
+ }
+
+ &:checked {
+ background-color: var(--kt-form-check-input-checked-bg-color-solid);
+ }
+ }
+ }
+
+ // States
+ // Success state
+ &.form-check-success {
+ .form-check-input {
+ &:checked {
+ background-color: var(--kt-success);
+ }
+ }
+ }
+
+ // Danger state
+ &.form-check-danger {
+ .form-check-input {
+ &:checked {
+ background-color: var(--kt-danger);
+ }
+ }
+ }
+
+ // Warning state
+ &.form-check-warning {
+ .form-check-input {
+ &:checked {
+ background-color: var(--kt-warning);
+ }
+ }
+ }
+}
+
+// Custom switch
+.form-switch.form-check-solid {
+ .form-check-input {
+ height: $form-switch-height;
+ background-image: var(--kt-form-switch-bg-image-solid);
+ border-radius: $form-switch-border-radius;
+
+ &:checked {
+ filter: none;
+ background-image: var(--kt-form-switch-checked-bg-image);
+ }
+ }
+
+ &.form-switch-sm {
+ .form-check-input {
+ height: $form-switch-height-sm;
+ width: $form-switch-width-sm;
+ }
+ }
+
+ &.form-switch-lg {
+ .form-check-input {
+ height: $form-switch-height-lg;
+ width: $form-switch-width-lg;
+ }
+ }
+}
+
+// Clip
+.form-check-clip {
+ position: relative;
+ overflow: hidden;
+
+ .form-check-label {
+ padding-top: 0.5rem;
+ font-size: $form-label-font-size;
+ color: var(--kt-form-label-color);
+ font-weight: $form-label-font-weight;
+ }
+
+ .form-check-wrapper {
+ @include border-radius($border-radius-lg);
+ border: 2px solid transparent;
+ transition: $transition-base;
+ cursor: pointer;
+ overflow: hidden;
+ }
+
+ .form-check-indicator {
+ transition: $transition-base;
+ position: absolute;
+ top: 0;
+ right: 0;
+ opacity: 0;
+ width: $form-check-input-width;
+ height: $form-check-input-width;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ background-size: 50%;
+ background-image: var(--kt-form-check-input-checked-bg-image);
+ background-color: var(--kt-component-checked-bg);
+ @include border-bottom-start-radius($border-radius-lg);
+ @include border-top-end-radius($border-radius-lg);
+
+ &.form-check-indicator-sm {
+ width: $form-check-input-width-sm;
+ height: $form-check-input-width-sm;
+ }
+
+ &.form-check-indicator-lg {
+ width: $form-check-input-width-lg;
+ height: $form-check-input-width-lg;
+ }
+ }
+
+ .form-check-content {
+ width: 100%;
+ }
+
+ .btn-check:checked + div {
+ border: 2px solid var(--kt-component-checked-bg);
+ transition: $transition-base;
+
+ .form-check-indicator {
+ transition: $transition-base;
+ opacity: 1;
+ }
+ }
+
+ .btn-check:disabled + div {
+ transition: $transition-base;
+ opacity: var(--kt-form-check-btn-check-disabled-opacity);
+ }
+}
+
+// Image
+.form-check-image {
+ position: relative;
+ overflow: hidden;
+
+ img {
+ max-width: 100%;
+ }
+
+ .form-check-wrapper {
+ @include border-radius($border-radius-lg);
+ border: 2px solid transparent;
+ transition: $transition-base;
+ cursor: pointer;
+ overflow: hidden;
+ margin-bottom: 0.75rem;
+ }
+
+ .form-check-rounded {
+ @include border-radius($border-radius-lg);
+ }
+
+ .form-check-label {
+ font-weight: $font-weight-bold;
+ margin-left: 0.5rem;
+ }
+
+ &.active {
+ .form-check-wrapper {
+ border-color: var(--kt-primary);
+ }
+ }
+
+ &.form-check-success.active {
+ .form-check-wrapper {
+ border-color: var(--kt-success);
+ }
+ }
+
+ &.form-check-danger.active {
+ .form-check-wrapper {
+ border-color: var(--kt-danger);
+ }
+ }
+
+ &.disabled {
+ opacity: var(--kt-form-check-btn-check-disabled-opacity);
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/forms/_form-check.scss b/src/_res/assets/sass/core/components/forms/_form-check.scss
new file mode 100644
index 0000000..191fbd7
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_form-check.scss
@@ -0,0 +1,106 @@
+//
+// Check/radio
+//
+
+.form-check-input {
+ background-color: var(--kt-form-check-input-bg);
+ border: var(--kt-form-check-input-border);
+
+ &:active {
+ filter: var(--kt-form-check-input-active-filter);
+ }
+
+ &:focus {
+ border-color: var(--kt-form-check-input-focus-border);
+ box-shadow: var(--kt-form-check-input-focus-box-shadow);
+ }
+
+ &:checked {
+ background-color: var(--kt-form-check-input-checked-bg-color);
+ border-color: var(--kt-form-check-input-checked-border-color);
+
+ &[type="checkbox"] {
+ @if $enable-gradients {
+ background-image: var(--kt-form-check-input-checked-bg-image), var(--#{$prefix}gradient);
+ } @else {
+ background-image: var(--kt-form-check-input-checked-bg-image);
+ }
+ }
+
+ &[type="radio"] {
+ @if $enable-gradients {
+ background-image: var(--kt-form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
+ } @else {
+ background-image: var(--kt-form-check-radio-checked-bg-image);
+ }
+ }
+ }
+
+ &[type="checkbox"]:indeterminate {
+ background-color: var(--kt-form-check-input-indeterminate-bg-color);
+ border-color: var(--kt-form-check-input-indeterminate-border-color);
+
+ @if $enable-gradients {
+ background-image: var(--kt-form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
+ } @else {
+ background-image:var(--kt-form-check-input-indeterminate-bg-image);
+ }
+ }
+
+ &:disabled {
+ opacity: var(--kt-form-check-input-disabled-opacity);
+ }
+
+ // Use disabled attribute in addition of :disabled pseudo-class
+ // See: https://github.com/twbs/bootstrap/issues/28247
+ &[disabled],
+ &:disabled {
+ ~ .form-check-label {
+ opacity: var(--kt-form-check-label-disabled-opacity);
+ }
+ }
+}
+
+.form-check-label {
+ color: var(--kt-form-check-label-color);
+}
+
+.form-check-input {
+ &:checked {
+ & + span,
+ & + label {
+ color: var(--kt-form-check-label-color-checked);
+ }
+ }
+}
+
+//
+// Switch
+//
+
+.form-switch {
+ .form-check-input {
+ background-image: var(--kt-form-switch-bg-image);
+
+ &:focus {
+ background-image: var(--kt-form-switch-focus-bg-image);
+ }
+
+ &:checked {
+ @if $enable-gradients {
+ background-image: var(--kt-form-switch-checked-bg-image), var(--#{$prefix}gradient);
+ } @else {
+ background-image: var(--kt-form-switch-checked-bg-image);
+ }
+ }
+ }
+}
+
+.btn-check {
+ &[disabled],
+ &:disabled {
+ + .btn {
+ opacity: var(--kt-form-check-btn-check-disabled-opacity);
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/forms/_form-control-solid.scss b/src/_res/assets/sass/core/components/forms/_form-control-solid.scss
new file mode 100644
index 0000000..84b021a
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_form-control-solid.scss
@@ -0,0 +1,78 @@
+//
+// Form Control
+//
+
+
+// Form control
+.form-control {
+ // Dropdown shown state
+ .dropdown.show > & {
+ color: var(--kt-input-focus-color);
+ background-color: var(--kt-input-focus-bg);
+ border-color: var(--kt-input-focus-border-color);
+ }
+
+ // Readonly state
+ &[readonly] {
+ background-color: var(--kt-input-readonly-bg);
+ }
+
+ // Solid style
+ &.form-control-solid {
+ background-color: var(--kt-input-solid-bg);
+ border-color: var(--kt-input-solid-bg);
+ color: var(--kt-input-solid-color);
+ @include placeholder(var(--kt-input-solid-placeholder-color));
+ transition: $transition-input;
+
+ .dropdown.show > &,
+ &:active,
+ &.active,
+ &:focus,
+ &.focus {
+ background-color: var(--kt-input-solid-bg-focus);
+ border-color: var(--kt-input-solid-bg-focus);
+ color: var(--kt-input-solid-color);
+ transition: $transition-input;
+ }
+ }
+
+ // Transparent style
+ &.form-control-transparent {
+ background-color: transparent;
+ border-color: transparent;
+
+ .dropdown.show > &,
+ &:active,
+ &.active,
+ &:focus,
+ &.focus {
+ background-color: transparent;
+ border-color: transparent;
+ }
+ }
+
+ // Flush
+ &.form-control-flush {
+ @include input-reset();
+ }
+}
+
+// Placeholder colors
+.placeholder-gray-500 {
+ @include placeholder(var(--kt-gray-500));
+}
+
+.placeholder-white {
+ @include placeholder($white);
+}
+
+// Textarea reset resize
+.resize-none {
+ resize: none;
+}
+
+// Form control solid bg
+.form-control-solid-bg {
+ background-color: var(--kt-input-solid-bg);
+}
diff --git a/src/_res/assets/sass/core/components/forms/_form-control.scss b/src/_res/assets/sass/core/components/forms/_form-control.scss
new file mode 100644
index 0000000..9ae50d4
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_form-control.scss
@@ -0,0 +1,46 @@
+//
+// Form controls
+//
+
+.form-control {
+ color: var(--kt-input-color);
+ background-color: var(--kt-input-bg);
+ border: $input-border-width solid var(--kt-input-border-color);
+ box-shadow: none !important;
+ //@include box-shadow(var(--kt-input-box-shadow));
+
+ &:focus {
+ color: var(--kt-input-focus-color);
+ background-color: var(--kt-input-focus-bg);
+ border-color: var(--kt-input-focus-border-color);
+ //box-shadow: var(--kt-input-focus-box-shadow);
+ }
+
+ // Placeholder
+ &::placeholder {
+ color: var(--kt-input-placeholder-color);
+ }
+
+ // Disabled and read-only inputs
+ &:disabled,
+ &[readonly] {
+ color: var(--kt-input-disabled-color);
+ background-color: var(--kt-input-disabled-bg);
+ border-color: var(--kt-input-disabled-border-color);
+ }
+
+ // File input buttons theming
+ &::file-selector-button {
+ color: var(--kt-form-file-button-color);
+ @include gradient-bg(var(--kt-form-file-button-bg));
+ }
+
+ &:hover:not(:disabled):not([readonly])::file-selector-button {
+ background-color: var(--kt-form-file-button-hover-bg);
+ }
+}
+
+// Readonly controls as plain text
+.form-control-plaintext {
+ color: var(--kt-input-plaintext-color);
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/forms/_form-select-solid.scss b/src/_res/assets/sass/core/components/forms/_form-select-solid.scss
new file mode 100644
index 0000000..f53bb93
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_form-select-solid.scss
@@ -0,0 +1,45 @@
+//
+// Form Select
+//
+
+.form-select {
+ box-shadow: none !important;
+
+ // Solid style
+ &.form-select-solid {
+ @include placeholder(var(--kt-input-solid-placeholder-color));
+ background-color: var(--kt-input-solid-bg);
+ border-color: var(--kt-input-solid-bg);
+ color: var(--kt-input-solid-color);
+ transition: $transition-input;
+
+ .dropdown.show > &,
+ &:active,
+ &.active,
+ &:focus,
+ &.focus {
+ background-color: var(--kt-input-solid-bg-focus);
+ border-color: var(--kt-input-solid-bg-focus) !important;
+ color: var(--kt-input-solid-color);
+ transition: $transition-input;
+ }
+ }
+
+ // Transparent style
+ &.form-select-transparent {
+ @include placeholder(var(--kt-input-placeholder-color));
+ background-color: transparent;
+ border-color: transparent;
+ color: $input-color;
+
+ .dropdown.show > &,
+ &:active,
+ &.active,
+ &:focus,
+ &.focus {
+ background-color: transparent;
+ border-color: transparent !important;
+ color: $input-color;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/forms/_form-select.scss b/src/_res/assets/sass/core/components/forms/_form-select.scss
new file mode 100644
index 0000000..07a2e10
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_form-select.scss
@@ -0,0 +1,35 @@
+// Select
+//
+// Replaces the browser default select with a custom one, mostly pulled from
+// https://primer.github.io/.
+
+.form-select {
+ color: var(--kt-form-select-color);
+ background-color: var(--kt-form-select-bg);
+ background-image: var(--kt-form-select-indicator);
+ border: $form-select-border-width solid var(--kt-form-select-border-color);
+ @include box-shadow(var(--kt-form-select-box-shadow));
+ appearance: none;
+
+ &:focus {
+ border-color: var(--kt-form-select-focus-border-color);
+ @if $enable-shadows {
+ @include box-shadow(var(--kt-form-select-box-shadow), var(--kt-form-select-focus-box-shadow));
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: var(--kt-form-select-focus-box-shadow);
+ }
+ }
+
+
+ &:disabled {
+ color: var(--kt-form-select-disabled-color);
+ background-color: var(--kt-form-select-disabled-bg);
+ border-color: var(--kt-form-select-disabled-border-color);
+ }
+
+ // Remove outline from select box in FF
+ &:-moz-focusring {
+ text-shadow: 0 0 0 var(--kt-form-select-color);
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/forms/_form-text.scss b/src/_res/assets/sass/core/components/forms/_form-text.scss
new file mode 100644
index 0000000..94cd819
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_form-text.scss
@@ -0,0 +1,7 @@
+//
+// Form text
+//
+
+.form-text {
+ color: var(--kt-form-text-color);
+}
diff --git a/src/_res/assets/sass/core/components/forms/_input-group-solid.scss b/src/_res/assets/sass/core/components/forms/_input-group-solid.scss
new file mode 100644
index 0000000..46d6e32
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_input-group-solid.scss
@@ -0,0 +1,36 @@
+//
+// Input Group
+//
+
+// Form control
+.input-group {
+ &.input-group-solid {
+ @include border-radius($input-border-radius);
+
+ &.input-group-sm {
+ @include border-radius($input-border-radius-sm);
+ }
+
+ &.input-group-lg {
+ @include border-radius($input-border-radius-lg);
+ }
+
+ .input-group-text {
+ background-color: var(--kt-input-solid-bg);
+ border-color: var(--kt-input-solid-bg);
+
+ & + .form-control {
+ border-left-color: var(--kt-input-border-color);
+ }
+ }
+
+ .form-control {
+ background-color: var(--kt-input-solid-bg);
+ border-color: var(--kt-input-solid-bg);
+
+ & + .input-group-text {
+ border-left-color: var(--kt-input-border-color);
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/forms/_input-group.scss b/src/_res/assets/sass/core/components/forms/_input-group.scss
new file mode 100644
index 0000000..ee05d35
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_input-group.scss
@@ -0,0 +1,9 @@
+//
+// Input group
+//
+
+.input-group-text {
+ color: var(--kt-input-group-addon-color);
+ background-color: var(--kt-input-group-addon-bg);
+ border: $input-border-width solid var(--kt-input-group-addon-border-color);
+}
diff --git a/src/_res/assets/sass/core/components/forms/_labels.scss b/src/_res/assets/sass/core/components/forms/_labels.scss
new file mode 100644
index 0000000..c6091c6
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_labels.scss
@@ -0,0 +1,13 @@
+//
+// Labels
+//
+
+.form-label {
+ color: var(--kt-form-label-color);
+}
+
+// For use with horizontal and inline forms, when you need the label (or legend)
+// text to align with the form controls.
+.col-form-label {
+ color: var(--kt-form-label-color);
+}
diff --git a/src/_res/assets/sass/core/components/forms/_required.scss b/src/_res/assets/sass/core/components/forms/_required.scss
new file mode 100644
index 0000000..effaf53
--- /dev/null
+++ b/src/_res/assets/sass/core/components/forms/_required.scss
@@ -0,0 +1,14 @@
+//
+// Required Label
+//
+
+.required {
+ &:after {
+ content: "*";
+ position: relative;
+ font-size: inherit;
+ color: var(--kt-danger);
+ padding-left: 0.25rem;
+ font-weight: $font-weight-bold;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/helpers/_background.scss b/src/_res/assets/sass/core/components/helpers/_background.scss
new file mode 100644
index 0000000..c526de6
--- /dev/null
+++ b/src/_res/assets/sass/core/components/helpers/_background.scss
@@ -0,0 +1,208 @@
+//
+// Custom background helpers
+//
+
+// Background white color
+.bg-white {
+ --kt-bg-rgb-color: var(--kt-white-bg-rgb);
+ background-color: $black !important;
+}
+
+// Background black color
+.bg-black {
+ --kt-bg-rgb-color: var(--kt-black-bg-rgb);
+ background-color: $black !important;
+}
+
+// Background body color
+.bg-body {
+ --kt-bg-rgb-color: var(--kt-body-bg-rgb);
+ background-color: var(--kt-body-bg) !important;
+}
+
+.bg-hover-body {
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--kt-body-bg) !important;
+ }
+}
+
+.bg-active-body {
+ &.active {
+ background-color: var(--kt-body-bg) !important;
+ }
+}
+
+.bg-state-body {
+ cursor: pointer;
+
+ &.active,
+ &:hover {
+ background-color: var(--kt-body-bg) !important;
+ }
+}
+
+// Background theme light colors
+@each $name, $value in $theme-colors {
+ @if (theme-light-color($name)) {
+ .bg-light-#{$name} {
+ background-color: var(--kt-#{$name}-light) !important;
+ }
+ }
+
+ .bg-#{$name} {
+ --kt-bg-rgb-color: var(--kt-#{$name}-rgb);
+ background-color: var(--kt-#{$name}) !important;
+ }
+
+ @if (theme-light-color($name)) {
+ .bg-hover-light-#{$name} {
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--kt-#{$name}-light) !important;
+ }
+ }
+
+ .bg-state-light-#{$name} {
+ cursor: pointer;
+
+ &.active,
+ &:hover {
+ background-color: var(--kt-#{$name}-light) !important;
+ }
+ }
+ }
+
+ .bg-hover-#{$name} {
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--kt-#{$name}) !important;
+ }
+ }
+
+ .bg-active-#{$name} {
+ &.active {
+ background-color: var(--kt-#{$name}) !important;
+ }
+ }
+
+ .bg-state-#{$name} {
+ cursor: pointer;
+
+ &.active,
+ &:hover {
+ background-color: var(--kt-#{$name}) !important;
+ }
+ }
+}
+
+// Background gray colors
+@each $name, $value in $grays {
+ .bg-gray-#{$name} {
+ background-color: var(--kt-gray-#{$name});
+ }
+
+ .bg-gray-#{$name}i {
+ background-color: var(--kt-gray-#{$name}) !important;
+ }
+}
+
+// Opacity
+@each $name, $value in $opacity-values {
+ .bg-opacity-#{$name} {
+ background-color: rgba(var(--kt-bg-rgb-color), #{$value}) !important;
+ }
+
+ .bg-hover-opacity-#{$name}:hover {
+ background-color: rgba(var(--kt-bg-rgb-color), #{$value}) !important;
+ }
+
+ .bg-active-opacity-#{$name}.active {
+ background-color: rgba(var(--kt-bg-rgb-color), #{$value}) !important;
+ }
+
+ .bg-state-opacity-#{$name} {
+ .active,
+ &:hover {
+ background-color: rgba(var(--kt-bg-rgb-color), #{$value}) !important;
+ }
+ }
+}
+
+// Background image helpers
+// Background repeat
+.bgi-no-repeat {
+ background-repeat: no-repeat;
+}
+
+// Background positions
+.bgi-position-y-top {
+ background-position-y: top;
+}
+
+.bgi-position-y-bottom {
+ background-position-y: bottom;
+}
+
+.bgi-position-y-center {
+ background-position-y: center;
+}
+
+.bgi-position-x-start {
+ background-position-x: left;
+}
+
+.bgi-position-x-end {
+ background-position-x: right;
+}
+
+.bgi-position-x-center {
+ background-position-x: center;
+}
+
+.bgi-position-top {
+ background-position: 0 top;
+}
+
+.bgi-position-bottom {
+ background-position: 0 bottom;
+}
+
+.bgi-position-center {
+ background-position: center;
+}
+
+// Responsive helpers
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ // Background sizes
+ .bgi-size#{$infix}-auto {
+ background-size: auto;
+ }
+
+ .bgi-size#{$infix}-cover {
+ background-size: cover;
+ }
+
+ .bgi-size#{$infix}-contain {
+ background-size: contain;
+ }
+
+ // Background attachment
+ .bgi-attachment#{$infix}-fixed {
+ background-attachment: fixed;
+ }
+
+ .bgi-attachment#{$infix}-scroll {
+ background-attachment: scroll;
+ }
+ }
+}
+
+
+
diff --git a/src/_res/assets/sass/core/components/helpers/_borders.scss b/src/_res/assets/sass/core/components/helpers/_borders.scss
new file mode 100644
index 0000000..892c1fe
--- /dev/null
+++ b/src/_res/assets/sass/core/components/helpers/_borders.scss
@@ -0,0 +1,114 @@
+//
+// Border
+//
+
+.border-active:not(.active):not(:active):not(:hover):not(:focus) {
+ border-color: transparent !important;
+}
+
+.border-hover:not(:hover):not(:focus):not(.active):not(:active) {
+ cursor: pointer;
+ border-color: transparent !important;
+}
+
+// Gray border colors
+@each $name, $value in $grays {
+ // Initial
+ .border-gray-#{$name} {
+ border-color: var(--kt-gray-#{$name}) !important;
+ }
+}
+
+// Hover border colors
+@each $name, $value in $theme-colors {
+ .border-hover-#{$name}:hover {
+ border-color: var(--kt-#{$name}) !important;
+ }
+
+ .border-active-#{$name}.active {
+ border-color: var(--kt-#{$name}) !important;
+ }
+}
+
+// Hover transparent
+.border-hover-transparent:hover {
+ border-color: transparent !important;
+}
+
+// Dashed style
+.border-dashed {
+ border-style: dashed !important;
+ border-color: var(--kt-border-dashed-color);
+}
+
+.border-top-dashed {
+ border-top-style: dashed !important;
+}
+
+.border-bottom-dashed {
+ border-bottom-style: dashed !important;
+}
+
+.border-start-dashed {
+ border-left-style: dashed !important;
+}
+
+.border-end-dashed {
+ border-right-style: dashed !important;
+}
+
+// Dotted style
+.border-dotted {
+ border-style: dotted !important;
+}
+
+.border-top-dotted {
+ border-top-style: dotted !important;
+}
+
+.border-bottom-dotted {
+ border-bottom-style: dotted !important;
+}
+
+.border-start-dotted {
+ border-left-style: dotted !important;
+}
+
+.border-end-dotted {
+ border-right-style: dotted !important;
+}
+
+// Border transparent
+.border-transparent {
+ border-color: transparent !important;
+}
+
+// Border body
+.border-body {
+ border-color: var(--kt-body-bg) !important;
+}
+
+// Border radiuses
+.rounded-top-0 {
+ border-top-left-radius: 0 !important;
+ border-top-right-radius: 0 !important;
+}
+
+.rounded-bottom-0 {
+ border-bottom-left-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+}
+
+.rounded-start-0 {
+ border-top-left-radius: 0 !important;
+ border-bottom-left-radius: 0 !important;
+}
+
+.rounded-end-0 {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+}
+
+.rounded-circle {
+ border-radius: 50% !important;
+}
diff --git a/src/_res/assets/sass/core/components/helpers/_flex.scss b/src/_res/assets/sass/core/components/helpers/_flex.scss
new file mode 100644
index 0000000..d3f2b31
--- /dev/null
+++ b/src/_res/assets/sass/core/components/helpers/_flex.scss
@@ -0,0 +1,57 @@
+//
+// Flex Utilities
+//
+
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .flex#{$infix}-root {
+ flex: 1;
+ }
+
+ .flex#{$infix}-column-auto {
+ flex: none;
+ }
+
+ .flex#{$infix}-column-fluid {
+ flex: 1 0 auto;
+ }
+
+ .flex#{$infix}-row-auto {
+ flex: 0 0 auto;
+ }
+
+ .flex#{$infix}-row-fluid {
+ flex: 1 auto;
+ min-width: 0;
+ }
+
+ .flex#{$infix}-center {
+ justify-content: center;
+ align-items: center;
+ }
+
+ .flex#{$infix}-start {
+ justify-content: start;
+ align-items: start;
+ }
+
+ .flex#{$infix}-end {
+ justify-content: end;
+ align-items: end;
+ }
+
+ .flex#{$infix}-stack {
+ justify-content: space-between;
+ align-items: center;
+ }
+ }
+}
+
+.flex-equal {
+ flex-grow: 1;
+ flex-basis: 0;
+ flex-shrink: 0;
+}
diff --git a/src/_res/assets/sass/core/components/helpers/_opacity.scss b/src/_res/assets/sass/core/components/helpers/_opacity.scss
new file mode 100644
index 0000000..80e26c8
--- /dev/null
+++ b/src/_res/assets/sass/core/components/helpers/_opacity.scss
@@ -0,0 +1,18 @@
+//
+// Opacity
+//
+
+@each $name, $value in $opacity-values {
+ // Active state
+ .opacity-active-#{$name}.active {
+ opacity: #{$value} !important;
+ }
+
+ // Active and hover states
+ .opacity-state-#{$name} {
+ &:hover,
+ &.active {
+ opacity: #{$value} !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/helpers/_shadow.scss b/src/_res/assets/sass/core/components/helpers/_shadow.scss
new file mode 100644
index 0000000..ff50ae1
--- /dev/null
+++ b/src/_res/assets/sass/core/components/helpers/_shadow.scss
@@ -0,0 +1,19 @@
+//
+// Shadow
+//
+
+.shadow-xs {
+ box-shadow: var(--kt-box-shadow-xs);
+}
+
+.shadow-sm {
+ box-shadow: var(--kt-box-shadow-sm);
+}
+
+.shadow {
+ box-shadow: var(--kt-box-shadow);
+}
+
+.shadow-lg {
+ box-shadow: var(--kt-box-shadow-lg);
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/helpers/_text.scss b/src/_res/assets/sass/core/components/helpers/_text.scss
new file mode 100644
index 0000000..f147cae
--- /dev/null
+++ b/src/_res/assets/sass/core/components/helpers/_text.scss
@@ -0,0 +1,114 @@
+//
+// Text
+//
+
+// Text colors
+@each $name, $color in $theme-text-colors {
+ // Base color
+ .text-#{$name} {
+ color: var(--kt-text-#{$name}) !important;
+ }
+
+ // Inverse color
+ @if (theme-inverse-color($name)) {
+ .text-inverse-#{$name} {
+ color: var(--kt-#{$name}-inverse) !important;
+ }
+ }
+
+ @if (theme-light-color($name)) {
+ // Light colors
+ .text-light-#{$name} {
+ color: var(--kt-#{$name}-light) !important;
+ }
+ }
+
+ // Hover
+ .text-hover-#{$name} {
+ transition: $transition-link;
+
+ i {
+ transition: $transition-link;
+ }
+
+ &:hover {
+ transition: $transition-link;
+ color: var(--kt-text-#{$name}) !important;
+
+ i {
+ transition: $transition-link;
+ color: var(--kt-text-#{$name}) !important;
+ }
+
+ .svg-icon {
+ color: var(--kt-text-#{$name}) !important;
+ }
+ }
+ }
+
+ // Active
+ .text-active-#{$name} {
+ transition: $transition-link;
+
+ i {
+ transition: $transition-link;
+ }
+
+ &.active {
+ transition: $transition-link;
+ color: var(--kt-text-#{$name}) !important;
+
+ i {
+ transition: $transition-link;
+ color: var(--kt-text-#{$name}) !important;
+ }
+
+ .svg-icon {
+ color: var(--kt-text-#{$name}) !important;
+ }
+ }
+ }
+}
+
+// Text transparent
+.text-transparent {
+ color: transparent;
+}
+
+// Cursor pointer
+.cursor-pointer {
+ cursor: pointer;
+}
+
+// Cursor default
+.cursor-default {
+ cursor: default;
+}
+// Cursor move
+.cursor-move {
+ cursor: move;
+}
+
+// Icons
+i {
+ &.bi,
+ &[class^="fonticon-"],
+ &[class*=" fonticon-"],
+ &[class^="fa-"],
+ &[class*=" fa-"],
+ &[class^="la-"],
+ &[class*=" la-"] {
+ line-height: 1;
+ font-size: 1rem;
+ color: var(--kt-text-muted);
+ }
+}
+
+// Link transition
+a {
+ transition: $transition-link;
+
+ &:hover {
+ transition:$transition-link;
+ }
+}
diff --git a/src/_res/assets/sass/core/components/helpers/_transform.scss b/src/_res/assets/sass/core/components/helpers/_transform.scss
new file mode 100644
index 0000000..0c8616f
--- /dev/null
+++ b/src/_res/assets/sass/core/components/helpers/_transform.scss
@@ -0,0 +1,8 @@
+//
+// Transform
+//
+
+.transform-90 {
+ transform: rotate(90deg);
+ transform-origin: right top;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/menu/_base.scss b/src/_res/assets/sass/core/components/menu/_base.scss
new file mode 100644
index 0000000..dc50228
--- /dev/null
+++ b/src/_res/assets/sass/core/components/menu/_base.scss
@@ -0,0 +1,306 @@
+//
+// Menu Base
+//
+
+// Menu group
+.menu-group {
+ display: flex;
+}
+
+// Menu & wrapper
+.menu,
+.menu-wrapper {
+ display: flex;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+
+// Sub inner
+.menu-inner {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+
+// Sub menu
+.menu-sub {
+ display: none;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ flex-direction: column;
+}
+
+// Menu item
+.menu-item {
+ display: block;
+ padding: $menu-item-padding-y $menu-item-padding-x;
+
+ // Menu Link
+ .menu-link {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ padding: 0;
+ flex: 0 0 100%;
+ padding: $menu-link-padding-y $menu-link-padding-x;
+ transition: none;
+ outline: none !important;
+
+ .menu-icon {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: $menu-icon-size;
+ margin-right: $menu-icon-space;
+
+ .svg-icon {
+ line-height: 1;
+ }
+ }
+
+ .menu-bullet {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: $menu-bullet-size;
+ margin-right: $menu-bullet-space;
+ }
+
+ .menu-title {
+ display: flex;
+ align-items: center;
+ flex-grow: 1;
+ }
+
+ .menu-badge {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ margin-left: $menu-badge-space;
+ }
+
+ .menu-arrow {
+ display: flex;
+ align-items: stretch;
+ position: relative;
+ overflow: hidden;
+ flex-shrink: 0;
+ margin-left: $menu-arrow-space;
+ width: $menu-arrow-size;
+ height: $menu-arrow-size;
+
+ &:after {
+ display: block;
+ width: 100%;
+ content: " ";
+ will-change: transform;
+ background-size: 100% 100%;
+ @include svg-bg-icon(arrow-start, var(--kt-text-muted));
+ /*rtl:begin:remove*/
+ @include svg-bg-icon(arrow-end, var(--kt-text-muted));
+ /*rtl:end:remove*/
+ }
+ }
+ }
+
+ // Menu Content
+ .menu-content {
+ padding: $menu-link-padding-y $menu-link-padding-x;
+ }
+}
+
+// Accordion arrows
+.menu-item {
+ &.show {
+ .menu-link {
+ .menu-arrow:after {
+ backface-visibility: hidden;
+ transition: $menu-accordion-arrow-transition;
+ }
+ }
+ }
+}
+
+// Center alignment
+.menu-center {
+ justify-content: center;
+}
+
+// Heading
+.menu-heading {
+ color: var(--kt-menu-heading-color);
+}
+
+// Responsive
+@each $direction in (up, down) {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @if $infix and $direction == down {
+ $infix: $infix + "-" + $direction;
+ }
+
+ @include media-breakpoint-direction($direction, $breakpoint) {
+ // Accordion arrow
+ .menu-item.menu#{$infix}-accordion {
+ .menu-arrow:after {
+ @include menu-link-arrow-rotate(90deg, -90deg);
+ }
+
+ &.showing:not(.menu-dropdown),
+ &.show:not(.hiding):not(.menu-dropdown) {
+ > .menu-link {
+ .menu-arrow:after {
+ @include menu-link-arrow-rotate(-90deg, 90deg);
+ }
+ }
+ }
+ }
+
+ // Sub dropdown
+ .menu-sub#{$infix}-dropdown {
+ display: none;
+ border-radius: $menu-dropdown-border-radius;
+ background-color: var(--kt-menu-dropdown-bg-color);
+ box-shadow: var(--kt-menu-dropdown-box-shadow);
+ z-index: $menu-dropdown-z-index;
+
+ // Dropdown show
+ .show.menu-dropdown > &,
+ &.menu.show,
+ &.show[data-popper-placement] {
+ display: flex;
+ will-change: transform;
+
+ // Animation
+ @if ($menu-dropdown-animation == true) {
+ // Move up
+ animation: menu-sub-dropdown-animation-fade-in #{$menu-dropdown-animation-speed} ease 1, menu-sub-dropdown-animation-move-up #{$menu-dropdown-animation-speed} ease 1;
+ }
+ }
+ }
+
+ // Sub accordion
+ .menu-sub#{$infix}-accordion {
+ display: none;
+
+ .show:not(.menu-dropdown) > &,
+ &.show {
+ display: flex;
+ }
+ }
+
+ // Sub indention
+ .menu-sub#{$infix}-indention {
+ @include menu-sub-indention($menu-accordion-indention);
+
+ // Active link
+ .menu-item .menu-item .menu-link.active {
+ margin-right: $menu-link-padding-x;
+ }
+ }
+
+ // Inline
+ .menu#{$infix}-inline {
+ display: flex;
+ }
+
+ // Reset link left & right paddings of level 1 menu links
+ .menu#{$infix}-fit {
+ > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+ }
+ }
+
+ .menu#{$infix}-column {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .menu#{$infix}-row {
+ flex-direction: row;
+
+ > .menu-item {
+ display: flex;
+ align-items: center;
+
+ > .menu-link {
+ .menu-arrow:after {
+ @include menu-link-arrow-rotate(90deg, -90deg);
+ }
+ }
+ }
+ }
+
+ // Border radiuses
+ .menu#{$infix}-rounded {
+ .menu-link {
+ @include border-radius($menu-link-border-radius);
+ }
+ }
+
+ // Border radiuses
+ .menu#{$infix}-pill {
+ .menu-link {
+ border-radius: 50px;
+ }
+ }
+
+ // Reset border radiuses
+ .menu#{$infix}-rounded-0 {
+ .menu-link {
+ border-radius: 0 !important;
+ }
+ }
+ }
+ }
+}
+
+// Link indention
+.menu-link-indention {
+ .menu-item {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ @include menu-link-indention($menu-accordion-indention, $menu-link-padding-x);
+}
+
+// Menu animations
+@keyframes menu-sub-dropdown-animation-fade-in {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes menu-sub-dropdown-animation-move-up {
+ from {
+ margin-top: #{$menu-dropdown-animation-move-offset};
+ }
+
+ to {
+ margin-top: 0;
+ }
+}
+
+@keyframes menu-sub-dropdown-animation-move-down {
+ from {
+ margin-bottom: #{$menu-dropdown-animation-move-offset};
+ }
+
+ to {
+ margin-bottom: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/menu/_theme.scss b/src/_res/assets/sass/core/components/menu/_theme.scss
new file mode 100644
index 0000000..f8e4730
--- /dev/null
+++ b/src/_res/assets/sass/core/components/menu/_theme.scss
@@ -0,0 +1,510 @@
+//
+// Menu Theme
+//
+
+// Theme text colors
+@each $name, $color in $theme-text-colors {
+ .menu-#{$name} {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-default-state( var(--kt-#{$name}), var(--kt-#{$name}), var(--kt-#{$name}), var(--kt-#{$name}), null );
+ }
+ }
+
+ .menu-title-#{$name} {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-default-state( var(--kt-text-#{$name}), null, null, null, null );
+ }
+ }
+
+ .menu-icon-#{$name} {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-default-state( null, var(--kt-text-#{$name}), null, null, null );
+ }
+ }
+
+ .menu-bullet-#{$name} {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-default-state( null, null, var(--kt-text-#{$name}), null, null );
+ }
+ }
+
+ .menu-arrow-#{$name} {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-default-state( null, null, null, var(--kt-text-#{$name}), null );
+ }
+ }
+}
+
+// Default background states
+.menu-hover-bg {
+ .menu-item {
+ @include menu-link-hover-state(
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-bg-color-hover)
+ );
+ }
+}
+
+.menu-here-bg {
+ .menu-item {
+ @include menu-link-here-state(
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-bg-color-here)
+ );
+ }
+}
+
+.menu-root-here-bg {
+ > .menu-item {
+ @include menu-link-here-state(
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-bg-color-here)
+ );
+ }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .menu-root-here-bg-desktop {
+ > .menu-item {
+ @include menu-link-here-state(
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-bg-color-here)
+ );
+ }
+ }
+}
+
+.menu-show-bg {
+ .menu-item {
+ @include menu-link-show-state(
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-bg-color-show)
+ );
+ }
+}
+
+.menu-active-bg {
+ .menu-item {
+ @include menu-link-active-state(
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-bg-color-active)
+ );
+ }
+}
+
+.menu-state-bg {
+ .menu-item {
+ @include menu-link-hover-state(
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-bg-color-hover)
+ );
+
+ @include menu-link-here-state(
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-bg-color-here)
+ );
+
+ @include menu-link-show-state(
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-bg-color-show)
+ );
+
+ @include menu-link-active-state(
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-bg-color-active)
+ );
+ }
+}
+
+.menu-state-color {
+ .menu-item {
+ @include menu-link-hover-state(
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ var(--kt-menu-link-color-hover),
+ null
+ );
+
+ @include menu-link-here-state(
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ var(--kt-menu-link-color-here),
+ null
+ );
+
+ @include menu-link-show-state(
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ var(--kt-menu-link-color-show),
+ null
+ );
+
+ @include menu-link-active-state(
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ var(--kt-menu-link-color-active),
+ null
+ );
+ }
+}
+
+// Primary background states
+.menu-hover-bg-primary {
+ .menu-item {
+ @include menu-link-hover-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+ }
+}
+
+.menu-show-bg-primary {
+ .menu-item {
+ @include menu-link-show-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+ }
+}
+
+.menu-here-bg-primary {
+ .menu-item {
+ @include menu-link-here-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+ }
+}
+
+.menu-active-bg-primary {
+ .menu-item {
+ @include menu-link-active-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+ }
+}
+
+.menu-state-bg-primary {
+ .menu-item {
+ @include menu-link-hover-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+
+ @include menu-link-show-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+
+ @include menu-link-here-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+
+ @include menu-link-active-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+
+ @include menu-link-show-state(
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary-inverse),
+ var(--kt-primary)
+ );
+ }
+}
+
+// Light primary background states
+.menu-show-bg-light-primary {
+ .menu-item {
+ @include menu-link-show-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ }
+}
+
+.menu-here-bg-light-primary {
+ .menu-item {
+ @include menu-link-here-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ }
+}
+
+.menu-hover-bg-light-primary {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ }
+}
+
+.menu-active-bg-light-primary {
+ .menu-item {
+ @include menu-link-active-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ }
+}
+
+.menu-state-bg-light-primary {
+ .menu-item {
+ @include menu-link-show-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ @include menu-link-here-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ @include menu-link-hover-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ @include menu-link-active-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary-light) );
+ }
+}
+
+// Primary color states
+.menu-hover-primary {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ }
+}
+
+.menu-show-primary {
+ .menu-item {
+ @include menu-link-show-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ }
+}
+
+.menu-here-primary {
+ .menu-item {
+ @include menu-link-here-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ }
+}
+
+.menu-active-primary {
+ .menu-item {
+ @include menu-link-active-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ }
+}
+
+.menu-state-primary {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ @include menu-link-show-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ @include menu-link-here-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ @include menu-link-active-state( var(--kt-primary), var(--kt-primary), var(--kt-primary), var(--kt-primary), null );
+ }
+}
+
+.menu-state-dark {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-dark), var(--kt-dark), var(--kt-dark), var(--kt-dark), null );
+ @include menu-link-show-state( var(--kt-dark), var(--kt-dark), var(--kt-dark), var(--kt-dark), null );
+ @include menu-link-here-state( var(--kt-dark), var(--kt-dark), var(--kt-dark), var(--kt-dark), null );
+ @include menu-link-active-state( var(--kt-dark), var(--kt-dark), var(--kt-dark), var(--kt-dark), null );
+ }
+}
+
+// Primary title color states
+.menu-hover-title-primary {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-primary), null, null, null, null );
+ }
+}
+
+.menu-here-title-primary {
+ .menu-item {
+ @include menu-link-here-state( var(--kt-primary), null, null, null, null );
+ }
+}
+
+.menu-show-title-primary {
+ .menu-item {
+ @include menu-link-show-state( var(--kt-primary), null, null, null, null );
+ }
+}
+
+.menu-active-title-primary {
+ .menu-item {
+ @include menu-link-active-state( var(--kt-primary), null, null, null, null );
+ }
+}
+
+.menu-state-title-primary {
+ .menu-item {
+ @include menu-link-hover-state( var(--kt-primary), null, null, null, null );
+ @include menu-link-here-state( var(--kt-primary), null, null, null, null );
+ @include menu-link-show-state( var(--kt-primary), null, null, null, null );
+ @include menu-link-active-state( var(--kt-primary), null, null, null, null );
+ }
+}
+
+// Primary icon color states
+.menu-hover-icon-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, var(--kt-primary), null, null, null );
+ }
+}
+
+.menu-here-icon-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-here-state( null, var(--kt-primary), null, null, null );
+ }
+}
+
+.menu-show-icon-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-show-state( null, var(--kt-primary), null, null, null );
+ }
+}
+
+.menu-active-icon-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-active-state( null, var(--kt-primary), null, null, null );
+ }
+}
+
+.menu-state-icon-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, var(--kt-primary), null, null, null );
+ @include menu-link-here-state( null, var(--kt-primary), null, null, null );
+ @include menu-link-show-state( null, var(--kt-primary), null, null, null );
+ @include menu-link-active-state( null, var(--kt-primary), null, null, null );
+ }
+}
+
+// Primary bullet color states
+.menu-hover-bullet-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, null, var(--kt-primary), null, null );
+ }
+}
+
+.menu-show-bullet-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-show-state( null, null, var(--kt-primary), null, null );
+ }
+}
+
+.menu-here-bullet-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-here-state( null, null, var(--kt-primary), null, null );
+ }
+}
+
+.menu-active-bullet-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-active-state( null, null, var(--kt-primary), null, null );
+ }
+}
+
+.menu-state-bullet-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, null, var(--kt-primary), null, null );
+ @include menu-link-here-state( null, null, var(--kt-primary), null, null );
+ @include menu-link-show-state( null, null, var(--kt-primary), null, null );
+ @include menu-link-active-state( null, null, var(--kt-primary), null, null );
+ }
+}
+
+// Primary arrow color states
+.menu-hover-arrow-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, null, null, var(--kt-primary), null );
+ }
+}
+
+.menu-here-arrow-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-here-state( null, null, null, var(--kt-primary), null );
+ }
+}
+
+.menu-show-arrow-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-show-state( null, null, null, var(--kt-primary), null );
+ }
+}
+
+.menu-active-arrow-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-active-state( null, null, null, var(--kt-primary), null );
+ }
+}
+
+.menu-state-arrow-primary {
+ .menu-item {
+ //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+ @include menu-link-hover-state( null, null, null, var(--kt-primary), null );
+ @include menu-link-here-state( null, null, null, var(--kt-primary), null );
+ @include menu-link-show-state( null, null, null, var(--kt-primary), null );
+ @include menu-link-active-state( null, null, null, var(--kt-primary), null );
+ }
+}
diff --git a/src/_res/assets/sass/core/components/mixins/_buttons.scss b/src/_res/assets/sass/core/components/mixins/_buttons.scss
new file mode 100644
index 0000000..fd8ee49
--- /dev/null
+++ b/src/_res/assets/sass/core/components/mixins/_buttons.scss
@@ -0,0 +1,84 @@
+//
+// Button Mixins
+//
+
+// Custom variant
+@mixin button-custom-variant(
+ $color,
+ $icon-color,
+ $border-color,
+ $bg-color,
+ $color-active,
+ $icon-color-active,
+ $border-color-active,
+ $bg-color-active
+) {
+
+ @if ( $color != null ) {
+ color: $color;
+ }
+
+ @if ( $icon-color != null ) {
+ i,
+ .svg-icon {
+ color: $icon-color;
+ }
+
+ &.dropdown-toggle:after {
+ color: $icon-color;
+ }
+ }
+
+ @if ( $border-color != null ) {
+ border-color: $border-color;
+ }
+
+ @if ( $bg-color != null ) {
+ background-color: $bg-color;
+ }
+
+ .btn-check:checked + &,
+ .btn-check:active + &,
+ &:focus:not(.btn-active),
+ &:hover:not(.btn-active),
+ &:active:not(.btn-active),
+ &.active,
+ &.show,
+ .show > & {
+ @if ( $color-active != null ) {
+ color: $color-active;
+ }
+
+ @if ( $icon-color-active != null ) {
+ i,
+ .svg-icon {
+ color: $icon-color-active;
+ }
+
+ &.dropdown-toggle:after {
+ color: $icon-color-active;
+ }
+ }
+
+ @if ( $border-color-active != null ) {
+ border-color: $border-color-active;
+ }
+
+ @if ( $bg-color-active != null ) {
+ background-color: $bg-color-active !important;
+ }
+ }
+}
+
+@mixin button-active-state() {
+ .btn-check:checked + &,
+ .btn-check:active + &,
+ &:focus:not(.btn-active),
+ &:hover:not(.btn-active),
+ &:active:not(.btn-active),
+ &.active,
+ &.show,
+ .show > & {
+ @content;
+ }
+}
diff --git a/src/_res/assets/sass/core/components/mixins/_ki.scss b/src/_res/assets/sass/core/components/mixins/_ki.scss
new file mode 100644
index 0000000..c83273a
--- /dev/null
+++ b/src/_res/assets/sass/core/components/mixins/_ki.scss
@@ -0,0 +1,18 @@
+//
+// Keenthemes Icons
+//
+
+@mixin ki($icon) {
+ font-family: Ki;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ line-height: 1;
+ text-decoration: inherit;
+ text-rendering: optimizeLegibility;
+ text-transform: none;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+ content: "#{$icon}";
+}
diff --git a/src/_res/assets/sass/core/components/mixins/_menu.scss b/src/_res/assets/sass/core/components/mixins/_menu.scss
new file mode 100644
index 0000000..f407618
--- /dev/null
+++ b/src/_res/assets/sass/core/components/mixins/_menu.scss
@@ -0,0 +1,301 @@
+//
+// Label
+//
+
+// Set arrow direction
+@mixin menu-link-arrow-rotate($angle, $angleRtl) {
+ /*rtl:ignore*/
+ transform: rotateZ($angleRtl);
+ /*rtl:remove*/
+ transform: rotateZ($angle);
+ transition: $menu-accordion-arrow-transition;
+}
+
+// Set menu link padding x
+@mixin menu-link-padding-x($value) {
+ // Menu item
+ .menu-item {
+ .menu-link,
+ .menu-content {
+ padding-left: $value;
+ padding-right: $value;
+ }
+ }
+}
+
+// Set menu link padding y
+@mixin menu-link-padding-y($value) {
+ // Menu item
+ .menu-item {
+ .menu-link,
+ .menu-content {
+ padding-top: $value;
+ padding-bottom: $value;
+ }
+ }
+}
+
+// Set link indention
+@mixin menu-link-indention($value, $offset) {
+ .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{1 * $value} + #{$offset});
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{2 * $value} + #{$offset});
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{3 * $value} + #{$offset});
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{4 * $value} + #{$offset});
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ &.menu-fit {
+ .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: #{$value};
+ padding-right: 0;
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{2 * $value});
+ padding-right: 0;
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{3 * $value});
+ padding-right: 0;
+ }
+
+ > .menu-sub:not([data-popper-placement]) {
+ > .menu-item,
+ > .menu-inner > .menu-item {
+ > .menu-content,
+ > .menu-link {
+ padding-left: calc(#{4 * $value});
+ padding-right: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+// Set sub indention
+@mixin menu-sub-indention($value) {
+ .menu-sub:not([data-popper-placement]) {
+ margin-left: $value;
+ }
+}
+
+// Set menu link theme
+@mixin menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null) {
+ @if ( $bg-color != null ) {
+ background-color: $bg-color;
+ }
+
+ @if ( $title-color != null ) {
+ color: $title-color;
+
+ .menu-title {
+ color: $title-color;
+ }
+ }
+
+ @if ( $icon-color != null ) {
+ .menu-icon {
+ &,
+ .svg-icon,
+ i {
+ color: $icon-color;
+ }
+ }
+ }
+
+ @if ( $bullet-color != null ) {
+ .menu-bullet {
+ .bullet {
+ background-color: $bullet-color;
+ }
+ }
+ }
+
+ @if ( $arrow-color != null ) {
+ // Arrow
+ .menu-arrow:after {
+ @include svg-bg-icon(arrow-start, $arrow-color);
+ /*rtl:begin:remove*/
+ @include svg-bg-icon(arrow-end, $arrow-color);
+ /*rtl:end:remove*/
+ }
+ }
+}
+
+// Set menu link default state
+@mixin menu-link-default-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
+ $sel: '';
+
+ @if ($all-links == false) {
+ $sel: '& > ';
+ }
+
+ #{$sel}.menu-link {
+ @include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
+ }
+}
+
+// Set menu link hover state
+@mixin menu-link-hover-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
+ $sel: '&:not(.here) ';
+
+ @if ($all-links == false) {
+ $sel: '&:not(.here) > ';
+ }
+
+ &.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
+ #{$sel}.menu-link:hover:not(.disabled):not(.active):not(.here) {
+ transition: $transition-link;
+
+ @include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
+ }
+}
+
+// Set menu link active state
+@mixin menu-link-active-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
+ $sel: '';
+
+ @if ($all-links == false) {
+ $sel: '& > ';
+ }
+
+ #{$sel}.menu-link.active {
+ transition: $transition-link;
+
+ @include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
+ }
+}
+
+// Set menu link show state
+@mixin menu-link-show-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
+ //&.here > .menu-link,
+ &.show > .menu-link {
+ transition: $transition-link;
+
+ @include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
+ }
+}
+
+// Set menu link here state
+@mixin menu-link-here-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
+ &.here > .menu-link {
+ transition: $transition-link;
+
+ @include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
+ }
+}
+
+// Set menu link default
+@mixin menu-link-default($all-links: true) {
+ $sel: '';
+
+ @if ($all-links == false) {
+ $sel: '& > ';
+ }
+
+ #{$sel}.menu-link {
+ @content;
+ }
+}
+
+// Set menu link hover
+@mixin menu-link-hover($all-links: true) {
+ $sel: '&:not(.here) ';
+
+ @if ($all-links == false) {
+ $sel: '&:not(.here) > ';
+ }
+
+ &.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
+ #{$sel}.menu-link:hover:not(.disabled):not(.active):not(.here) {
+ transition: $transition-link;
+
+ @content;
+ }
+}
+
+// Set menu link active
+@mixin menu-link-active($all-links: true) {
+ $sel: '';
+
+ @if ($all-links == false) {
+ $sel: '& > ';
+ }
+
+ #{$sel}.menu-link.active {
+ transition: $transition-link;
+
+ @content;
+ }
+}
+
+// Set menu link show
+@mixin menu-link-show($all-links: true) {
+ //&.here > .menu-link,
+ &.show > .menu-link {
+ transition: $transition-link;
+
+ @content;
+ }
+}
+
+// Set menu link here
+@mixin menu-link-here($all-links: true) {
+ &.here > .menu-link {
+ transition: $transition-link;
+
+ @content;
+ }
+}
diff --git a/src/_res/assets/sass/core/components/mixins/_popover.scss b/src/_res/assets/sass/core/components/mixins/_popover.scss
new file mode 100644
index 0000000..d9f9b0d
--- /dev/null
+++ b/src/_res/assets/sass/core/components/mixins/_popover.scss
@@ -0,0 +1,74 @@
+//
+// Popover Mixin
+//
+
+@mixin popover-theme($bg-color, $border-color, $header-bg-color, $header-color, $body-color, $arrow-outer-color, $arrow-color) {
+ background-color: $bg-color;
+ border: 0;
+
+ // Header
+ .popover-header {
+ background-color: $header-bg-color;
+ color: $header-color;
+ border-bottom-color: $border-color;
+ }
+
+ // Body
+ .popover-body {
+ color: $body-color;
+ }
+
+ // Arrows
+ &.bs-popover-top {
+ > .popover-arrow {
+ &::before {
+ border-top-color: $arrow-outer-color;
+ }
+
+ &::after {
+ border-top-color: $arrow-color;
+ }
+ }
+ }
+
+ &.bs-popover-end {
+ > .popover-arrow {
+ &::before {
+ border-right-color: $arrow-outer-color;
+ }
+
+ &::after {
+ border-right-color: $arrow-color;
+ }
+ }
+ }
+
+ &.bs-popover-bottom {
+ > .popover-arrow {
+ &::before {
+ border-bottom-color: $arrow-outer-color;
+ }
+
+ &::after {
+ border-bottom-color: $arrow-color;
+ }
+ }
+
+ // This will remove the popover-header's border just below the arrow
+ .popover-header::before {
+ border-bottom-color: $header-bg-color;
+ }
+ }
+
+ &.bs-popover-start {
+ > .popover-arrow {
+ &::before {
+ border-left-color: $arrow-outer-color;
+ }
+
+ &::after {
+ border-left-color: $arrow-color;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/mixins/_scroll.scss b/src/_res/assets/sass/core/components/mixins/_scroll.scss
new file mode 100644
index 0000000..e1bd6f7
--- /dev/null
+++ b/src/_res/assets/sass/core/components/mixins/_scroll.scss
@@ -0,0 +1,34 @@
+//
+// Scroll mixins
+//
+
+@mixin scrollbar-color($color, $hover-color: null) {
+ // Firefox
+ scrollbar-color: $color transparent;
+
+ // Webkit
+ &::-webkit-scrollbar-thumb {
+ background-color: $color;
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: transparent;
+ }
+
+ @if ($hover-color != null) {
+ // Hover state
+ &:hover {
+ // Firefox
+ scrollbar-color: $hover-color transparent;
+
+ // Webkit
+ &::-webkit-scrollbar-thumb {
+ background-color: $hover-color;
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: transparent;
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/mixins/_shape.scss b/src/_res/assets/sass/core/components/mixins/_shape.scss
new file mode 100644
index 0000000..3395df0
--- /dev/null
+++ b/src/_res/assets/sass/core/components/mixins/_shape.scss
@@ -0,0 +1,29 @@
+
+@use 'sass:math';
+
+@mixin shape($edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20) {
+ $central-angle: divide(360deg, $edges-number);
+ $angle: ($edges-number - 2) * divide(180deg, $edges-number);
+ $max-var-angle: 2 * (90deg - divide($angle, 2));
+ $precision: 6;
+ $unit-var-angle: divide($max-var-angle, $precision);
+ $r-diff: $main-radius + $rounding-radius;
+
+ $points: ();
+
+ @for $i from 0 to $edges-number {
+ $vertex-angle: $i * $central-angle + if($rotated, -90deg, 0deg);
+ $vertex-x: 50% + $r-diff * math.cos($vertex-angle);
+ $vertex-y: 50% + $r-diff * math.sin($vertex-angle);
+
+ @for $j from 0 through $precision {
+ $curr-angle: $vertex-angle + ($j - 0.5 * $precision) * $unit-var-angle;
+ $x: $vertex-x + $rounding-radius * math.cos($curr-angle);
+ $y: $vertex-y + $rounding-radius * math.sin($curr-angle);
+
+ $points: $points, $x $y;
+ }
+ }
+
+ clip-path: polygon($points);
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/mixins/_svg-bg-icon.scss b/src/_res/assets/sass/core/components/mixins/_svg-bg-icon.scss
new file mode 100644
index 0000000..48ee125
--- /dev/null
+++ b/src/_res/assets/sass/core/components/mixins/_svg-bg-icon.scss
@@ -0,0 +1,68 @@
+//
+// SVG Bg Icons
+//
+
+@mixin svg-bg-icon($type, $color: none, $update: false) {
+ $bg-image: '';
+
+ // Icon type;
+ @if ($type == close) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == check) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == arrow-top) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == arrow-bottom) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == arrow-start) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == arrow-end) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == sort) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == sort-asc) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == sort-desc) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == expand) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ @if ($type == collapse) {
+ $bg-image: url("data:image/svg+xml, ");
+ }
+
+ // Icon style
+ @if $update == false {
+ mask-repeat: no-repeat;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ }
+
+ @if $color != none {
+ background-color: $color;
+ }
+
+ -webkit-mask-image: escape-svg($bg-image);
+ mask-image: escape-svg($bg-image);
+}
+
diff --git a/src/_res/assets/sass/core/components/mixins/_svg-icon.scss b/src/_res/assets/sass/core/components/mixins/_svg-icon.scss
new file mode 100644
index 0000000..35da08c
--- /dev/null
+++ b/src/_res/assets/sass/core/components/mixins/_svg-icon.scss
@@ -0,0 +1,11 @@
+//
+// SVG Icon
+//
+
+
+@mixin svg-icon-size($size, $important: false) {
+ svg {
+ height: $size valueif($important, !important, null);
+ width: $size valueif($important, !important, null);
+ }
+}
diff --git a/src/_res/assets/sass/core/components/mixins/_symbol.scss b/src/_res/assets/sass/core/components/mixins/_symbol.scss
new file mode 100644
index 0000000..904f394
--- /dev/null
+++ b/src/_res/assets/sass/core/components/mixins/_symbol.scss
@@ -0,0 +1,42 @@
+//
+// Symbol
+//
+
+@mixin symbol-size($size) {
+ > img {
+ width: $size;
+ height: $size;
+ }
+
+ .symbol-label {
+ width: $size;
+ height: $size;
+ }
+
+ &.symbol-fixed {
+ .symbol-label {
+ width: $size;
+ height: $size;
+ }
+
+ > img {
+ width: $size;
+ height: $size;
+ max-width: none;
+ }
+ }
+
+ // Ratios
+ &.symbol-2by3 {
+ .symbol-label {
+ height: $size;
+ width: $size * divide(3, 2);
+ }
+
+ > img {
+ height: $size;
+ width: $size * divide(3, 2);
+ max-width: none;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/mixins/_theme-mode.scss b/src/_res/assets/sass/core/components/mixins/_theme-mode.scss
new file mode 100644
index 0000000..02eee57
--- /dev/null
+++ b/src/_res/assets/sass/core/components/mixins/_theme-mode.scss
@@ -0,0 +1,15 @@
+//
+// Theme Mode
+//
+
+@mixin theme-light() {
+ html:not([data-theme="dark"]) {
+ @content;
+ }
+}
+
+@mixin theme-dark() {
+ [data-theme="dark"] {
+ @content;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/mixins/_tooltip.scss b/src/_res/assets/sass/core/components/mixins/_tooltip.scss
new file mode 100644
index 0000000..63269a2
--- /dev/null
+++ b/src/_res/assets/sass/core/components/mixins/_tooltip.scss
@@ -0,0 +1,43 @@
+//
+// Tooltip Mixin
+//
+
+@mixin tooltip-theme($bg-color, $color, $arrow-color) {
+ .tooltip-inner {
+ color: $color;
+ background-color: $bg-color;
+ }
+
+ // Arrows
+ &.bs-tooltip-top {
+ .tooltip-arrow {
+ &::before {
+ border-top-color: $arrow-color;
+ }
+ }
+ }
+
+ &.bs-tooltip-end {
+ .tooltip-arrow {
+ &::before {
+ border-right-color: $arrow-color;
+ }
+ }
+ }
+
+ &.bs-tooltip-bottom {
+ .tooltip-arrow {
+ &::before {
+ border-bottom-color: $arrow-color;
+ }
+ }
+ }
+
+ &.bs-tooltip-start {
+ .tooltip-arrow {
+ &::before {
+ border-left-color: $arrow-color;
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/components/stepper/_base.scss b/src/_res/assets/sass/core/components/stepper/_base.scss
new file mode 100644
index 0000000..9e23710
--- /dev/null
+++ b/src/_res/assets/sass/core/components/stepper/_base.scss
@@ -0,0 +1,102 @@
+//
+// Stepper
+//
+
+// Base
+.stepper {
+ // Content
+ [data-kt-stepper-element="info"],
+ [data-kt-stepper-element="content"] {
+ display: none;
+
+ &.current {
+ display: flex;
+ }
+ }
+
+ // Enable cursor pointer on clickable steppers
+ .stepper-item[data-kt-stepper-action="step"] {
+ cursor: pointer;
+ }
+
+ // States
+ & {
+ [data-kt-stepper-action="final"] {
+ display: none;
+ }
+
+ [data-kt-stepper-action="previous"] {
+ display: none;
+ }
+
+ [data-kt-stepper-action="next"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="submit"] {
+ display: none;
+ }
+ }
+
+ &.first {
+ [data-kt-stepper-action="previous"] {
+ display: none;
+ }
+
+ [data-kt-stepper-action="next"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="submit"] {
+ display: none;
+ }
+ }
+
+ &.between {
+ [data-kt-stepper-action="previous"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="next"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="submit"] {
+ display: none;
+ }
+ }
+
+ &.last {
+ [data-kt-stepper-action="final"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="final"].btn-flex {
+ display: flex;
+ }
+
+ [data-kt-stepper-action="previous"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="previous"].btn-flex {
+ display: flex;
+ }
+
+ [data-kt-stepper-action="next"] {
+ display: none;
+ }
+
+ [data-kt-stepper-action="next"].btn-flex {
+ display: flex;
+ }
+
+ [data-kt-stepper-action="submit"] {
+ display: inline-block;
+ }
+
+ [data-kt-stepper-action="submit"].btn-flex {
+ display: flex;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/stepper/_links.scss b/src/_res/assets/sass/core/components/stepper/_links.scss
new file mode 100644
index 0000000..048ec51
--- /dev/null
+++ b/src/_res/assets/sass/core/components/stepper/_links.scss
@@ -0,0 +1,57 @@
+//
+// Stepper Links
+//
+
+// Base
+.stepper.stepper-links {
+ .stepper-nav {
+ display: flex;
+ margin: 0 auto;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+
+ .stepper-item {
+ position: relative;
+ flex-shrink: 0;
+ margin: 1rem 1.5rem;
+
+ &:after {
+ content: " ";
+ position: absolute;
+ top: 2.3rem;
+ left: 0;
+ height: 2px;
+ width: 100%;
+ background-color: transparent;
+ transition: $transition-link;
+ }
+
+ .stepper-title {
+ color: var(--kt-dark);
+ font-weight: 600;
+ font-size: 1.25rem;
+ }
+
+ // Current
+ &.current {
+ transition: $transition-link;
+
+ .stepper-title {
+ color: var(--kt-primary);
+ }
+
+ &:after {
+ background-color: var(--kt-primary);
+ }
+ }
+
+ &.current.mark-completed:last-child,
+ &.completed {
+ .stepper-title {
+ color: var(--kt-gray-400);
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/components/stepper/_pills.scss b/src/_res/assets/sass/core/components/stepper/_pills.scss
new file mode 100644
index 0000000..9f1c222
--- /dev/null
+++ b/src/_res/assets/sass/core/components/stepper/_pills.scss
@@ -0,0 +1,201 @@
+//
+// Stepper Pills
+//
+
+// Base
+.stepper.stepper-pills {
+ --kt-stepper-pills-size: 40px;
+ --kt-stepper-icon-border-radius: 9px;
+ --kt-stepper-icon-check-size: 1rem;
+
+ --kt-stepper-icon-bg-color: var(--kt-primary-light);
+ --kt-stepper-icon-bg-color-current: var(--kt-primary);
+ --kt-stepper-icon-bg-color-completed: var(--kt-primary-light);
+
+ --kt-stepper-icon-border: 0;
+ --kt-stepper-icon-border-current: 0;
+ --kt-stepper-icon-border-completed: 0;
+
+ --kt-stepper-icon-number-color: var(--kt-primary);
+ --kt-stepper-icon-number-color-current: var(--kt-white);
+
+ --kt-stepper-icon-check-color-completed: var(--kt-primary);
+
+ --kt-stepper-label-title-opacity: 1;
+ --kt-stepper-label-title-opacity-current: 1;
+ --kt-stepper-label-title-opacity-completed: 1;
+
+ --kt-stepper-label-title-color: var(--kt-gray-800);
+ --kt-stepper-label-title-color-current: var(--kt-gray-600);
+ --kt-stepper-label-title-color-completed: var(--kt-text-muted);
+
+ --kt-stepper-label-desc-opacity: 1;
+ --kt-stepper-label-desc-opacity-current: 1;
+ --kt-stepper-label-desc-opacity-completed: 1;
+
+ --kt-stepper-label-desc-color: var(--kt-text-muted);
+ --kt-stepper-label-desc-color-current: var(--kt-text-400);
+ --kt-stepper-label-desc-color-completed: var(--kt-gray-400);
+
+ --kt-stepper-line-border: 1px dashed var(--kt-gray-300);
+
+ // Nav
+ .stepper-nav {
+ display: flex;
+ }
+
+ // Item
+ .stepper-item {
+ display: flex;
+ align-items: center;
+ transition: $transition-link;
+
+ // Icon
+ .stepper-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ transition: $transition-link;
+ width: var(--kt-stepper-pills-size);
+ height: var(--kt-stepper-pills-size);
+ border-radius: var(--kt-stepper-icon-border-radius);
+ background-color: var(--kt-stepper-icon-bg-color);
+ border: var(--kt-stepper-icon-border);
+ margin-right: 1.5rem;
+
+ .stepper-check {
+ display: none;
+ font-size: var(--kt-stepper-icon-check-size);
+ }
+
+ .stepper-number {
+ font-weight: $font-weight-bold;
+ color: var(--kt-stepper-icon-number-color);
+ font-size: 1.25rem;
+ }
+ }
+
+ // Label
+ .stepper-label {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .stepper-title {
+ color: var(--kt-stepper-label-title-color);
+ opacity: var(--kt-stepper-label-title-opacity);
+ font-weight: 600;
+ font-size: 1.25rem;
+ margin-bottom: .3rem;
+ }
+
+ .stepper-desc {
+ opacity: var(--kt-stepper-label-desc-opacity);
+ color: var(--kt-stepper-label-desc-color);
+ }
+ }
+
+ // Current
+ &.current {
+ transition: $transition-link;
+
+ .stepper-icon {
+ transition: $transition-link;
+ background-color: var(--kt-stepper-icon-bg-color-current);
+ border: var(--kt-stepper-icon-border-current);
+
+ .stepper-check {
+ display: none;
+ }
+
+ .stepper-number {
+ color: var(--kt-stepper-icon-number-color-current);
+ font-size: 1.35rem;
+ }
+ }
+
+ .stepper-label {
+ .stepper-title {
+ opacity: var(--kt-stepper-label-title-opacity-current);
+ color: var(--kt-stepper-label-title-color-current);
+ }
+
+ .stepper-desc {
+ opacity: var(--kt-stepper-label-desc-opacity-current);
+ color: var(--kt-stepper-label-desc-color-current);
+ }
+ }
+ }
+
+ // Completed
+ &.current.mark-completed:last-child,
+ &.completed {
+ .stepper-icon {
+ transition: $transition-link;
+ background-color: var(--kt-stepper-icon-bg-color-completed);
+ border: var(--kt-stepper-icon-border-completed);
+
+ .stepper-check {
+ color: var(--kt-stepper-icon-check-color-completed);
+ display: inline-block;
+ }
+
+ .stepper-number {
+ display: none;
+ }
+ }
+
+ .stepper-label {
+ .stepper-title {
+ opacity: var(--kt-stepper-label-title-opacity-completed);
+ color: var(--kt-stepper-label-title-color-completed);
+ }
+
+ .stepper-desc {
+ opacity: var(--kt-stepper-label-desc-opacity-completed);
+ color: var(--kt-stepper-label-desc-color-completed);
+ }
+ }
+ }
+ }
+
+ // Column
+ &.stepper-column {
+ // Nav
+ .stepper-nav {
+ flex-direction: column;
+ align-items: start;
+ }
+
+ // Item
+ .stepper-item {
+ flex-direction: column;
+ justify-content: start;
+ align-items: stretch;
+ padding: 0;
+ margin: 0;
+ }
+
+ // Wrapper
+ .stepper-wrapper {
+ display: flex;
+ align-items: center;
+ }
+
+ // Icon
+ .stepper-icon {
+ z-index: 1;
+ }
+
+ // Line
+ .stepper-line {
+ display: block;
+ flex-grow: 1;
+ margin-left: calc(var(--kt-stepper-pills-size) / 2);
+ border-left: var(--kt-stepper-line-border);
+ margin-top: 2px;
+ margin-bottom: 2px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/_base.scss b/src/_res/assets/sass/core/layout/_base.scss
new file mode 100644
index 0000000..a2d8e61
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/_base.scss
@@ -0,0 +1,50 @@
+//
+// Root
+//
+
+html {
+ font-family: sans-serif;
+ text-size-adjust: 100%;
+}
+
+html,
+body {
+ height: 100%;
+ margin: 0px;
+ padding: 0px;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size: $root-font-size !important;
+ font-weight: $font-weight-base;
+ font-family: $font-family-sans-serif;
+
+ // Tablet mode
+ @include media-breakpoint-down(lg) {
+ font-size: $root-font-size-lg !important;
+ }
+
+ // Mobile mode
+ @include media-breakpoint-down(md) {
+ font-size: $root-font-size-md !important;
+ }
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+
+ a:hover,
+ a:active,
+ a:focus {
+ text-decoration: none !important;
+ }
+}
+
+canvas {
+ user-select: none;
+}
+
+// Angular integration
+router-outlet {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_container.scss b/src/_res/assets/sass/core/layout/base/_container.scss
new file mode 100644
index 0000000..8e19b06
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_container.scss
@@ -0,0 +1,30 @@
+//
+// Container
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-container {
+ padding-left: $app-container-padding-x !important;
+ padding-right: $app-container-padding-x !important;
+ }
+
+ .app-container-fit-desktop {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-container {
+ max-width: none;
+ padding-left: $app-container-padding-x-mobile !important;
+ padding-right: $app-container-padding-x-mobile !important;
+ }
+
+ .app-container-fit-mobile {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+}
diff --git a/src/_res/assets/sass/core/layout/base/_content.scss b/src/_res/assets/sass/core/layout/base/_content.scss
new file mode 100644
index 0000000..6f9992e
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_content.scss
@@ -0,0 +1,24 @@
+//
+// Content
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-content {
+ padding-top: $app-content-padding-y;
+ padding-bottom: $app-content-padding-y;
+ padding-left: $app-content-padding-x;
+ padding-right: $app-content-padding-x;
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-content {
+ max-width: none;
+ padding-top: $app-content-padding-y-mobile;
+ padding-bottom: $app-content-padding-y-mobile;
+ padding-left: $app-content-padding-x-mobile;
+ padding-right: $app-content-padding-x-mobile;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_footer.scss b/src/_res/assets/sass/core/layout/base/_footer.scss
new file mode 100644
index 0000000..015a185
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_footer.scss
@@ -0,0 +1,103 @@
+//
+// Footer
+//
+
+// General mode
+.app-footer {
+ transition: $app-footer-transition;
+ display: flex;
+ align-items: stretch;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-footer {
+ @include property( z-index, $app-footer-z-index);
+
+ background-color: var(--kt-app-footer-bg-color);
+ box-shadow: var(--kt-app-footer-box-shadow);
+ border-top: var(--kt-app-footer-border-top);
+ }
+
+ // Vars
+ :root {
+ --kt-app-footer-height: #{$app-footer-height};
+ }
+
+ // States
+ .app-footer {
+ height: var(--kt-app-footer-height);
+
+ [data-kt-app-footer-fixed="true"] & {
+ @include property( z-index, $app-footer-fixed-z-index);
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+ }
+
+ // Integration
+ .app-footer {
+ // Sidebar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-footer="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-footer="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ // Aside
+ [data-kt-app-aside-fixed="true"][data-kt-app-aside-push-footer="true"] & {
+ right: calc(
+ var(--kt-app-aside-width) +
+ var(--kt-app-aside-gap-start, 0px) +
+ var(--kt-app-aside-gap-end, 0px)
+ );
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-footer {
+ @include property( z-index, $app-footer-z-index-mobile);
+
+ background-color: var(--kt-app-footer-bg-color-mobile);
+ box-shadow: var(--kt-app-footer-box-shadow-mobile);
+ border-top: var(--kt-app-footer-border-top-mobile);
+ }
+
+ // Vars
+ body {
+ --kt-app-footer-height: #{$app-footer-height-mobile};
+ }
+
+ // States
+ .app-footer {
+ height: var(--kt-app-footer-height);
+
+ [data-kt-app-footer-fixed-mobile="true"] & {
+ @include property( z-index, $app-footer-fixed-z-index-mobile);
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_hero.scss b/src/_res/assets/sass/core/layout/base/_hero.scss
new file mode 100644
index 0000000..7f843f2
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_hero.scss
@@ -0,0 +1,13 @@
+//
+// Hero
+//
+
+// General mode
+.app-hero {
+ display: flex;
+ align-items: stretch;
+ background-color: var(--kt-app-hero-bg-color);
+ box-shadow: var(--kt-app-hero-box-shadow);
+ border-top: var(--kt-app-hero-border-top);
+ border-bottom: var(--kt-app-hero-border-bottom);
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_layout-builder.scss b/src/_res/assets/sass/core/layout/base/_layout-builder.scss
new file mode 100644
index 0000000..513db2a
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_layout-builder.scss
@@ -0,0 +1,19 @@
+//
+// Layout builder
+//
+
+// General mode
+.app-layout-builder-toggle {
+ position: fixed;
+ z-index: $app-layout-builder-toggle-z-index;
+ bottom: $app-layout-builder-toggle-bottom;
+ right: $app-layout-builder-toggle-end;
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-layout-builder-toggle {
+ bottom: $app-layout-builder-toggle-bottom-mobile;
+ right: $app-layout-builder-toggle-end-mobile;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_layout.scss b/src/_res/assets/sass/core/layout/base/_layout.scss
new file mode 100644
index 0000000..e5e3c96
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_layout.scss
@@ -0,0 +1,28 @@
+//
+// App Layout
+//
+
+@import "mixins/layout-minimize";
+@import "mixins/layout-transition";
+@import "root";
+@import "reboot";
+@import "page";
+@import "page-loader";
+@import "container";
+@import "print";
+@import "navbar";
+@import "header/header";
+@import "header/header-primary";
+@import "header/header-secondary";
+@import "toolbar";
+@import "hero";
+@import "sidebar/sidebar";
+@import "sidebar/sidebar-primary";
+@import "sidebar/sidebar-secondary";
+@import "sidebar/sidebar-panel";
+@import "aside/aside";
+@import "wrapper";
+@import "main";
+@import "content";
+@import "footer";
+@import "layout-builder";
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_main.scss b/src/_res/assets/sass/core/layout/base/_main.scss
new file mode 100644
index 0000000..1d25756
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_main.scss
@@ -0,0 +1,75 @@
+//
+// Main
+//
+
+// General mode
+.app-main {
+ display: flex;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-main {
+ transition: $app-main-transition;
+
+ @include property( padding-left, $app-main-padding-x );
+ @include property( padding-right, $app-main-padding-x );
+ @include property( padding-top, $app-main-padding-y );
+ @include property( padding-bottom, $app-main-padding-y );
+
+ @include property( margin-left, $app-main-margin-x );
+ @include property( margin-right, $app-main-margin-x );
+ @include property( margin-top, $app-main-margin-y );
+ @include property( margin-bottom, $app-main-margin-y );
+ }
+
+ // Integration
+ .app-main {
+ // Sidebar
+ [data-kt-app-sidebar-sticky="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-sidebar-panel-sticky="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ // Aside
+ [data-kt-app-aside-sticky="true"] & {
+ margin-right: calc(
+ var(--kt-app-aside-width) +
+ var(--kt-app-aside-gap-start, 0px) +
+ var(--kt-app-aside-gap-end, 0px)
+ );
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-main {
+ @include property( padding-left, $app-main-padding-x-mobile );
+ @include property( padding-right, $app-main-padding-x-mobile );
+ @include property( padding-top, $app-main-padding-y-mobile );
+ @include property( padding-bottom, $app-main-padding-y-mobile );
+
+ @include property( margin-left, $app-main-margin-x-mobile );
+ @include property( margin-right, $app-main-margin-x-mobile );
+ @include property( margin-top, $app-main-margin-y-mobile );
+ @include property( margin-bottom, $app-main-margin-y-mobile );
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_navbar.scss b/src/_res/assets/sass/core/layout/base/_navbar.scss
new file mode 100644
index 0000000..a6d329c
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_navbar.scss
@@ -0,0 +1,19 @@
+//
+// App Navbar
+//
+
+.app-navbar {
+ display: flex;
+ align-items: stretch;
+
+ .app-navbar-item {
+ display: flex;
+ align-items: center;
+ }
+
+ &.app-navbar-stretch {
+ .app-navbar-item {
+ align-items: stretch;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_page-loader.scss b/src/_res/assets/sass/core/layout/base/_page-loader.scss
new file mode 100644
index 0000000..8ed8bfd
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_page-loader.scss
@@ -0,0 +1,31 @@
+//
+// Page loader
+//
+
+// CSS3 Transitions only after page load(data-kt-app-page-loading="on" attribute added to body tag and removed with JS on page loaded)
+[data-kt-app-page-loading="on"] {
+ overflow: hidden;
+}
+
+[data-kt-app-page-loading="on"] * {
+ transition: none !important;
+}
+
+// Base
+.app-page-loader {
+ background: var(--kt-body-bg);
+ color: var(--kt-body-color);
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 10000;
+ display: none;
+
+ [data-kt-app-page-loading="on"] & {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+}
diff --git a/src/_res/assets/sass/core/layout/base/_page.scss b/src/_res/assets/sass/core/layout/base/_page.scss
new file mode 100644
index 0000000..78ec216
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_page.scss
@@ -0,0 +1,7 @@
+//
+// Page
+//
+
+.app-page {
+ display: flex;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_print.scss b/src/_res/assets/sass/core/layout/base/_print.scss
new file mode 100644
index 0000000..c4c76cb
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_print.scss
@@ -0,0 +1,34 @@
+//
+// Print
+//
+
+// Add .app-print-content-only class to body element in order to allow printing only the content area
+@media print {
+ .app-print-content-only {
+ padding: 0 !important;
+ background: none !important;
+
+ .app-wrapper,
+ .app-page,
+ .app-page-title,
+ .app-content,
+ .app-container {
+ background: none !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+
+ .app-aside,
+ .app-aside-panel,
+ .app-sidebar,
+ .app-sidebar-panel,
+ .app-header,
+ .app-footer,
+ .app-toolbar,
+ .drawer,
+ .scrolltop,
+ .btn {
+ display: none !important;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/layout/base/_reboot.scss b/src/_res/assets/sass/core/layout/base/_reboot.scss
new file mode 100644
index 0000000..eaa8c5f
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_reboot.scss
@@ -0,0 +1,65 @@
+//
+// Reboot
+//
+
+html {
+ font-family: sans-serif;
+ text-size-adjust: 100%;
+}
+
+html,
+body {
+ height: 100%;
+ margin: 0px;
+ padding: 0px;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size: $app-general-root-font-size-desktop !important;
+ font-weight: $font-weight-base;
+ font-family: $font-family-sans-serif;
+
+ // Tablet mode
+ @include media-breakpoint-down(lg) {
+ font-size: $app-general-root-font-size-tablet !important;
+ }
+
+ // Mobile mode
+ @include media-breakpoint-down(md) {
+ font-size: $app-general-root-font-size-mobile !important;
+ }
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+
+ a:hover,
+ a:active,
+ a:focus {
+ text-decoration: none !important;
+ }
+}
+
+canvas {
+ user-select: none;
+}
+
+// Angular integration
+router-outlet {
+ display: none;
+}
+
+// Layouts
+body,
+.app-default {
+ background-color: var(--kt-app-bg-color);
+}
+
+.app-blank {
+ background-color: var(--kt-app-blank-bg-color);
+}
+
+// Reset CSS3 Transitions for child elements
+[data-kt-app-reset-transition="true"] * {
+ transition: none !important;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_root.scss b/src/_res/assets/sass/core/layout/base/_root.scss
new file mode 100644
index 0000000..f1c7ccd
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_root.scss
@@ -0,0 +1,496 @@
+//
+// Root
+//
+
+:root,
+[data-theme="light"] {
+ // Layouts
+ @include property(--kt-app-bg-color, $app-bg-color);
+ @include property(--kt-app-blank-bg-color, $app-blank-bg-color);
+
+ // Header base
+ @include property(--kt-app-header-base-bg-color, $app-header-base-bg-color);
+ @include property(--kt-app-header-base-bg-color-mobile, $app-header-base-bg-color-mobile);
+ @include property(--kt-app-header-base-box-shadow, $app-header-base-box-shadow);
+ @include property(--kt-app-header-base-box-shadow-mobile, $app-header-base-box-shadow-mobile);
+ @include property(--kt-app-header-base-border-bottom, $app-header-base-border-bottom);
+ @include property(--kt-app-header-base-border-bottom-mobile, $app-header-base-border-bottom-mobile);
+
+ // Header minimize
+ @include property(--kt-app-header-minimize-bg-color, $app-header-minimize-bg-color);
+ @include property(--kt-app-header-minimize-bg-color-mobile, $app-header-minimize-bg-color-mobile);
+ @include property(--kt-app-header-minimize-box-shadow, $app-header-minimize-box-shadow);
+ @include property(--kt-app-header-minimize-box-shadow-mobile, $app-header-minimize-box-shadow-mobile);
+ @include property(--kt-app-header-minimize-border-bottom, $app-header-minimize-border-bottom);
+ @include property(--kt-app-header-minimize-border-bottom-mobile, $app-header-minimize-border-bottom-mobile);
+
+ // Header sticky
+ @include property(--kt-app-header-sticky-bg-color, $app-header-sticky-bg-color);
+ @include property(--kt-app-header-sticky-bg-color-mobile, $app-header-sticky-bg-color-mobile);
+ @include property(--kt-app-header-sticky-box-shadow, $app-header-sticky-box-shadow);
+ @include property(--kt-app-header-sticky-box-shadow-mobile, $app-header-sticky-box-shadow-mobile);
+ @include property(--kt-app-header-sticky-border-bottom, $app-header-sticky-border-bottom);
+ @include property(--kt-app-header-sticky-border-bottom-mobile, $app-header-sticky-border-bottom-mobile);
+
+ // Header primary
+ @include property(--kt-app-header-primary-base-bg-color, $app-header-primary-base-bg-color);
+ @include property(--kt-app-header-primary-base-bg-color-mobile, $app-header-primary-base-bg-color-mobile);
+ @include property(--kt-app-header-primary-base-box-shadow, $app-header-primary-base-box-shadow);
+ @include property(--kt-app-header-primary-base-box-shadow-mobile, $app-header-primary-base-box-shadow-mobile);
+ @include property(--kt-app-header-primary-base-border-bottom, $app-header-primary-base-border-bottom);
+ @include property(--kt-app-header-primary-base-border-bottom-mobile, $app-header-primary-base-border-bottom-mobile);
+
+ @include property(--kt-app-header-primary-minimize-bg-color, $app-header-primary-minimize-bg-color);
+ @include property(--kt-app-header-primary-minimize-box-shadow, $app-header-primary-minimize-box-shadow);
+ @include property(--kt-app-header-primary-minimize-border-top, $app-header-primary-minimize-border-top);
+ @include property(--kt-app-header-primary-minimize-border-bottom, $app-header-primary-minimize-border-bottom);
+
+ @include property(--kt-app-header-primary-sticky-bg-color, $app-header-primary-sticky-bg-color);
+ @include property(--kt-app-header-primary-sticky-box-shadow, $app-header-primary-sticky-box-shadow);
+ @include property(--kt-app-header-primary-sticky-border-top, $app-header-primary-sticky-border-top);
+ @include property(--kt-app-header-primary-sticky-border-bottom, $app-header-primary-sticky-border-bottom);
+
+ // Header secondary
+ @include property(--kt-app-header-secondary-base-bg-color, $app-header-secondary-base-bg-color);
+ @include property(--kt-app-header-secondary-base-bg-color-mobile, $app-header-secondary-base-bg-color-mobile);
+ @include property(--kt-app-header-secondary-base-box-shadow, $app-header-secondary-base-box-shadow);
+ @include property(--kt-app-header-secondary-base-box-shadow-mobile, $app-header-secondary-base-box-shadow-mobile);
+ @include property(--kt-app-header-secondary-base-border-top, $app-header-secondary-base-border-top);
+ @include property(--kt-app-header-secondary-base-border-bottom, $app-header-secondary-base-border-bottom);
+ @include property(--kt-app-header-secondary-base-border-start-mobile, $app-header-secondary-base-border-bottom);
+ @include property(--kt-app-header-secondary-base-border-end-mobile, $app-header-secondary-base-border-end-mobile);
+
+ // Header secondary minimize
+ @include property(--kt-app-header-secondary-minimize-bg-color, $app-header-secondary-minimize-bg-color);
+ @include property(--kt-app-header-secondary-minimize-box-shadow, $app-header-secondary-minimize-box-shadow);
+ @include property(--kt-app-header-secondary-minimize-border-top, $app-header-secondary-minimize-border-top);
+ @include property(--kt-app-header-secondary-minimize-border-bottom, $app-header-secondary-minimize-border-bottom);
+
+ // Header secondary sticky
+ @include property(--kt-app-header-secondary-sticky-bg-color, $app-header-secondary-sticky-bg-color);
+ @include property(--kt-app-header-secondary-sticky-box-shadow, $app-header-secondary-sticky-box-shadow);
+ @include property(--kt-app-header-secondary-sticky-border-top, $app-header-secondary-sticky-border-top);
+ @include property(--kt-app-header-secondary-sticky-border-bottom, $app-header-secondary-sticky-border-bottom);
+
+ // Toolbar base
+ @include property(--kt-app-toolbar-base-bg-color, $app-toolbar-base-bg-color);
+ @include property(--kt-app-toolbar-base-bg-color-mobile, $app-toolbar-base-bg-color-mobile);
+ @include property(--kt-app-toolbar-base-box-shadow, $app-toolbar-base-box-shadow);
+ @include property(--kt-app-toolbar-base-box-shadow-mobile, $app-toolbar-base-box-shadow-mobile);
+ @include property(--kt-app-toolbar-base-border-top, $app-toolbar-base-border-top);
+ @include property(--kt-app-toolbar-base-border-top-mobile, $app-toolbar-base-border-top-mobile);
+ @include property(--kt-app-toolbar-base-border-bottom, $app-toolbar-base-border-bottom);
+ @include property(--kt-app-toolbar-base-border-bottom-mobile, $app-toolbar-base-border-bottom);
+
+ // Toolbar minimize
+ @include property(--kt-app-toolbar-minimize-bg-color, $app-toolbar-minimize-bg-color);
+ @include property(--kt-app-toolbar-minimize-bg-color-mobile, $app-toolbar-minimize-bg-color-mobile);
+ @include property(--kt-app-toolbar-minimize-box-shadow, $app-toolbar-minimize-box-shadow);
+ @include property(--kt-app-toolbar-minimize-box-shadow-mobile, $app-toolbar-minimize-box-shadow-mobile);
+ @include property(--kt-app-toolbar-minimize-border-top, $app-toolbar-minimize-border-top);
+ @include property(--kt-app-toolbar-minimize-border-top-mobile, $app-toolbar-minimize-border-top-mobile);
+ @include property(--kt-app-toolbar-minimize-border-bottom, $app-toolbar-minimize-border-bottom);
+ @include property(--kt-app-toolbar-minimize-border-bottom-mobile, $app-toolbar-minimize-border-bottom-mobile);
+
+ // Toolbar sticky
+ @include property(--kt-app-toolbar-sticky-bg-color, $app-toolbar-sticky-bg-color);
+ @include property(--kt-app-toolbar-sticky-bg-color-mobile, $app-toolbar-sticky-bg-color-mobile);
+ @include property(--kt-app-toolbar-sticky-box-shadow, $app-toolbar-sticky-box-shadow);
+ @include property(--kt-app-toolbar-sticky-box-shadow-mobile, $app-toolbar-sticky-box-shadow-mobile);
+ @include property(--kt-app-toolbar-sticky-border-top, $app-toolbar-sticky-border-top);
+ @include property(--kt-app-toolbar-sticky-border-top-mobile, $app-toolbar-sticky-border-top-mobile);
+ @include property(--kt-app-toolbar-sticky-border-bottom, $app-toolbar-sticky-border-bottom);
+ @include property(--kt-app-toolbar-sticky-border-bottom-mobile, $app-toolbar-sticky-border-bottom-mobile);
+
+ // Sidebar base
+ @include property(--kt-app-sidebar-base-bg-color, $app-sidebar-base-bg-color);
+ @include property(--kt-app-sidebar-base-bg-color-mobile, $app-sidebar-base-bg-color-mobile);
+ @include property(--kt-app-sidebar-base-box-shadow, $app-sidebar-base-box-shadow);
+ @include property(--kt-app-sidebar-base-box-shadow-mobile, $app-sidebar-base-box-shadow-mobile);
+ @include property(--kt-app-sidebar-base-border-start, $app-sidebar-base-border-start);
+ @include property(--kt-app-sidebar-base-border-start-mobile, $app-sidebar-base-border-start-mobile);
+ @include property(--kt-app-sidebar-base-border-end, $app-sidebar-base-border-end);
+ @include property(--kt-app-sidebar-base-border-end-mobile, $app-sidebar-base-border-end-mobile);
+
+ // Hero
+ @include property(--kt-app-hero-bg-color, $app-hero-bg-color);
+ @include property(--kt-app-hero-box-shadow, $app-hero-box-shadow);
+ @include property(--kt-app-hero-border-top, $app-hero-border-top);
+ @include property(--kt-app-hero-border-bottom, $app-hero-border-bottom);
+
+ // Sidebar sticky
+ @include property(--kt-app-sidebar-sticky-bg-color, $app-sidebar-sticky-bg-color);
+ @include property(--kt-app-sidebar-sticky-box-shadow, $app-sidebar-sticky-box-shadow);
+ @include property(--kt-app-sidebar-sticky-border-start, $app-sidebar-sticky-border-start);
+ @include property(--kt-app-sidebar-sticky-border-end, $app-sidebar-sticky-border-end);
+
+ // Sidebar minimize
+ @include property(--kt-app-sidebar-minimize-bg-color, $app-sidebar-minimize-bg-color);
+ @include property(--kt-app-sidebar-minimize-bg-color-mobile, $app-sidebar-minimize-bg-color-mobile);
+ @include property(--kt-app-sidebar-minimize-box-shadow, $app-sidebar-minimize-box-shadow);
+ @include property(--kt-app-sidebar-minimize-box-shadow-mobile, $app-sidebar-minimize-box-shadow-mobile);
+ @include property(--kt-app-sidebar-minimize-hover-box-shadow, $app-sidebar-minimize-hover-box-shadow);
+ @include property(--kt-app-sidebar-minimize-hover-box-shadow-mobile, $app-sidebar-minimize-hover-box-shadow-mobile);
+ @include property(--kt-app-sidebar-minimize-border-start, $app-sidebar-minimize-border-start);
+ @include property(--kt-app-sidebar-minimize-border-start-mobile, $app-sidebar-minimize-border-start-mobile);
+ @include property(--kt-app-sidebar-minimize-border-end, $app-sidebar-minimize-border-end);
+ @include property(--kt-app-sidebar-minimize-border-end-mobile, $app-sidebar-minimize-border-end-mobile);
+
+ // Sidebar primary
+ @include property(--kt-app-sidebar-primary-base-bg-color, $app-sidebar-primary-base-bg-color);
+ @include property(--kt-app-sidebar-primary-base-bg-color-mobile, $app-sidebar-primary-base-bg-color-mobile);
+ @include property(--kt-app-sidebar-primary-base-box-shadow, $app-sidebar-primary-base-box-shadow);
+ @include property(--kt-app-sidebar-primary-base-box-shadow-mobile, $app-sidebar-primary-base-box-shadow-mobile);
+ @include property(--kt-app-sidebar-primary-base-border-start, $app-sidebar-primary-base-border-start);
+ @include property(--kt-app-sidebar-primary-base-border-start-mobile, $app-sidebar-primary-base-border-start-mobile);
+ @include property(--kt-app-sidebar-primary-base-border-end, $app-sidebar-primary-base-border-end);
+ @include property(--kt-app-sidebar-primary-base-border-end-mobile, $app-sidebar-primary-base-border-end-mobile);
+
+ // Sidebar primary minimize
+ @include property(--kt-app-sidebar-primary-minimize-bg-color, $app-sidebar-primary-base-border-end-mobile);
+ @include property(--kt-app-sidebar-primary-minimize-bg-color-mobile, $app-sidebar-primary-minimize-bg-color-mobile);
+ @include property(--kt-app-sidebar-primary-minimize-box-shadow, $app-sidebar-primary-minimize-box-shadow);
+ @include property(--kt-app-sidebar-primary-minimize-box-shadow-mobile, $app-sidebar-primary-minimize-box-shadow-mobile);
+ @include property(--kt-app-sidebar-primary-minimize-hover-box-shadow, $app-sidebar-primary-minimize-hover-box-shadow);
+ @include property(--kt-app-sidebar-primary-minimize-hover-box-shadow-mobile, $app-sidebar-primary-minimize-hover-box-shadow-mobile);
+ @include property(--kt-app-sidebar-primary-minimize-border-start, $app-sidebar-primary-minimize-border-start);
+ @include property(--kt-app-sidebar-primary-minimize-border-start-mobile, $app-sidebar-primary-minimize-border-start-mobile);
+ @include property(--kt-app-sidebar-primary-minimize-border-end, $app-sidebar-primary-minimize-border-end);
+ @include property(--kt-app-sidebar-primary-minimize-border-end-mobile, $app-sidebar-primary-minimize-border-end-mobile);
+
+ // Sidebar secondary base
+ @include property(--kt-app-sidebar-secondary-base-bg-color, $app-sidebar-secondary-base-bg-color);
+ @include property(--kt-app-sidebar-secondary-base-bg-color-mobile, $app-sidebar-secondary-base-bg-color-mobile);
+ @include property(--kt-app-sidebar-secondary-base-box-shadow, $app-sidebar-secondary-base-box-shadow);
+ @include property(--kt-app-sidebar-secondary-base-box-shadow-mobile, $app-sidebar-secondary-base-box-shadow-mobile);
+ @include property(--kt-app-sidebar-secondary-base-border-start, $app-sidebar-secondary-base-border-start);
+ @include property(--kt-app-sidebar-secondary-base-border-start-mobile, $app-sidebar-secondary-base-border-start-mobile);
+ @include property(--kt-app-sidebar-secondary-base-border-end, $app-sidebar-secondary-base-border-end);
+ @include property(--kt-app-sidebar-secondary-base-border-end-mobile, $app-sidebar-secondary-base-border-end-mobile);
+
+ // Sidebar secondary minimize
+ @include property(--kt-app-sidebar-secondary-minimize-bg-color, $app-sidebar-secondary-minimize-bg-color);
+ @include property(--kt-app-sidebar-secondary-minimize-bg-color-mobile, $app-sidebar-secondary-minimize-bg-color-mobile);
+ @include property(--kt-app-sidebar-secondary-minimize-box-shadow, $app-sidebar-secondary-minimize-box-shadow);
+ @include property(--kt-app-sidebar-secondary-minimize-box-shadow-mobile, $app-sidebar-secondary-minimize-box-shadow-mobile);
+ @include property(--kt-app-sidebar-secondary-minimize-hover-box-shadow, $app-sidebar-secondary-minimize-hover-box-shadow);
+ @include property(--kt-app-sidebar-secondary-minimize-hover-box-shadow-mobile, $app-sidebar-secondary-minimize-hover-box-shadow-mobile);
+ @include property(--kt-app-sidebar-secondary-minimize-border-start, $app-sidebar-secondary-minimize-border-start);
+ @include property(--kt-app-sidebar-secondary-minimize-border-start-mobile, $app-sidebar-secondary-minimize-border-start-mobile);
+ @include property(--kt-app-sidebar-secondary-minimize-border-end, $app-sidebar-secondary-minimize-border-end);
+ @include property(--kt-app-sidebar-secondary-minimize-border-end-mobile, $app-sidebar-secondary-minimize-border-end-mobile);
+
+ // Sidebar panel base
+ @include property(--kt-app-sidebar-panel-base-bg-color, $app-sidebar-panel-base-bg-color);
+ @include property(--kt-app-sidebar-panel-base-bg-color-mobile, $app-sidebar-panel-base-bg-color-mobile);
+ @include property(--kt-app-sidebar-panel-base-box-shadow, $app-sidebar-panel-base-box-shadow);
+ @include property(--kt-app-sidebar-panel-base-box-shadow-mobile, $app-sidebar-panel-base-box-shadow-mobile);
+ @include property(--kt-app-sidebar-panel-base-border-start, $app-sidebar-panel-base-border-start);
+ @include property(--kt-app-sidebar-panel-base-border-start-mobile, $app-sidebar-panel-base-border-start-mobile);
+ @include property(--kt-app-sidebar-panel-base-border-end, $app-sidebar-panel-base-border-end);
+ @include property(--kt-app-sidebar-panel-base-border-end-mobile, $app-sidebar-panel-base-border-end-mobile);
+
+ // Sidebar panel sticky
+ @include property(--kt-app-sidebar-panel-sticky-bg-color, $app-sidebar-panel-sticky-bg-color);
+ @include property(--kt-app-sidebar-panel-sticky-box-shadow, $app-sidebar-panel-sticky-box-shadow);
+ @include property(--kt-app-sidebar-panel-sticky-border-start, $app-sidebar-panel-sticky-border-start);
+ @include property(--kt-app-sidebar-panel-sticky-border-end, $app-sidebar-panel-sticky-border-end);
+
+ // Sidebar panel minimize
+ @include property(--kt-app-sidebar-panel-minimize-bg-color, $app-sidebar-panel-minimize-bg-color);
+ @include property(--kt-app-sidebar-panel-minimize-bg-color-mobile, $app-sidebar-panel-minimize-bg-color-mobile);
+ @include property(--kt-app-sidebar-panel-minimize-box-shadow, $app-sidebar-panel-minimize-box-shadow);
+ @include property(--kt-app-sidebar-panel-minimize-box-shadow-mobile, $app-sidebar-panel-minimize-box-shadow-mobile);
+ @include property(--kt-app-sidebar-panel-minimize-hover-box-shadow, $app-sidebar-panel-minimize-hover-box-shadow);
+ @include property(--kt-app-sidebar-panel-minimize-hover-box-shadow-mobile, $app-sidebar-panel-minimize-hover-box-shadow-mobile);
+ @include property(--kt-app-sidebar-panel-minimize-border-start, $app-sidebar-panel-minimize-border-start);
+ @include property(--kt-app-sidebar-panel-minimize-border-start-mobile, $app-sidebar-panel-minimize-border-start-mobile);
+ @include property(--kt-app-sidebar-panel-minimize-border-end, $app-sidebar-panel-minimize-border-end);
+ @include property(--kt-app-sidebar-panel-minimize-border-end-mobile, $app-sidebar-panel-minimize-border-end-mobile);
+
+ // Aside base
+ @include property(--kt-app-aside-base-bg-color, $app-aside-base-bg-color);
+ @include property(--kt-app-aside-base-bg-color-mobile, $app-aside-base-bg-color-mobile);
+ @include property(--kt-app-aside-base-box-shadow, $app-aside-base-box-shadow);
+ @include property(--kt-app-aside-base-box-shadow-mobile, $app-aside-base-box-shadow-mobile);
+ @include property(--kt-app-aside-base-border-start, $app-aside-base-border-start);
+ @include property(--kt-app-aside-base-border-start-mobile, $app-aside-base-border-start-mobile);
+ @include property(--kt-app-aside-base-border-end, $app-aside-base-border-end);
+ @include property(--kt-app-aside-base-border-end-mobile, $app-aside-base-border-end-mobile);
+
+ // Aside sticky
+ @include property(--kt-app-aside-sticky-bg-color, $app-aside-sticky-bg-color);
+ @include property(--kt-app-aside-sticky-box-shadow, $app-aside-sticky-box-shadow);
+ @include property(--kt-app-aside-sticky-border-start, $app-aside-sticky-border-start);
+ @include property(--kt-app-aside-sticky-border-end, $app-aside-sticky-border-end);
+
+ // Aside minimize
+ @include property(--kt-app-aside-minimize-bg-color, $app-aside-minimize-bg-color);
+ @include property(--kt-app-aside-minimize-bg-color-mobile, $app-aside-minimize-bg-color-mobile);
+ @include property(--kt-app-aside-minimize-box-shadow, $app-aside-minimize-box-shadow);
+ @include property(--kt-app-aside-minimize-box-shadow-mobile, $app-aside-minimize-box-shadow-mobile);
+ @include property(--kt-app-aside-minimize-hover-box-shadow, $app-aside-minimize-hover-box-shadow);
+ @include property(--kt-app-aside-minimize-hover-box-shadow-mobile, $app-aside-minimize-hover-box-shadow-mobile);
+ @include property(--kt-app-aside-minimize-border-start, $app-aside-minimize-border-start);
+ @include property(--kt-app-aside-minimize-border-start-mobile, $app-aside-minimize-border-start-mobile);
+ @include property(--kt-app-aside-minimize-border-end, $app-aside-minimize-border-end);
+ @include property(--kt-app-aside-minimize-border-end-mobile, $app-aside-minimize-border-end-mobile);
+
+ // Page
+ @include property(--kt-app-page-bg-color, $app-page-bg-color);
+
+ // Wrapper
+ @include property(--kt-app-wrapper-bg-color, $app-wrapper-bg-color);
+
+ // Footer
+ @include property(--kt-app-footer-bg-color, $app-footer-bg-color);
+ @include property(--kt-app-footer-bg-color-mobile, $app-footer-bg-color-mobile);
+ @include property(--kt-app-footer-box-shadow, $app-footer-box-shadow);
+ @include property(--kt-app-footer-box-shadow-mobile, $app-footer-box-shadow-mobile);
+ @include property(--kt-app-footer-border-top, $app-footer-border-top);
+ @include property(--kt-app-footer-border-top-mobile, $app-footer-border-top-mobile);
+}
+
+[data-theme="dark"] {
+ // Layouts
+ @include property(--kt-app-bg-color, $app-bg-color-dark);
+ @include property(--kt-app-blank-bg-color, $app-blank-bg-color-dark);
+
+ // Header base
+ @include property(--kt-app-header-base-bg-color, $app-header-base-bg-color-dark);
+ @include property(--kt-app-header-base-bg-color-mobile, $app-header-base-bg-color-mobile-dark);
+ @include property(--kt-app-header-base-box-shadow, $app-header-base-box-shadow-dark);
+ @include property(--kt-app-header-base-box-shadow-mobile, $app-header-base-box-shadow-mobile-dark);
+ @include property(--kt-app-header-base-border-bottom, $app-header-base-border-bottom-dark);
+ @include property(--kt-app-header-base-border-bottom-mobile, $app-header-base-border-bottom-mobile-dark);
+
+ // Header minimize
+ @include property(--kt-app-header-minimize-bg-color, $app-header-minimize-bg-color-dark);
+ @include property(--kt-app-header-minimize-bg-color-mobile, $app-header-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-header-minimize-box-shadow, $app-header-minimize-box-shadow-dark);
+ @include property(--kt-app-header-minimize-box-shadow-mobile, $app-header-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-header-minimize-border-bottom, $app-header-minimize-border-bottom-dark);
+ @include property(--kt-app-header-minimize-border-bottom-mobile, $app-header-minimize-border-bottom-mobile-dark);
+
+ // Header sticky
+ @include property(--kt-app-header-sticky-bg-color, $app-header-sticky-bg-color-dark);
+ @include property(--kt-app-header-sticky-bg-color-mobile, $app-header-sticky-bg-color-mobile-dark);
+ @include property(--kt-app-header-sticky-box-shadow, $app-header-sticky-box-shadow-dark);
+ @include property(--kt-app-header-sticky-box-shadow-mobile, $app-header-sticky-box-shadow-mobile-dark);
+ @include property(--kt-app-header-sticky-border-bottom, $app-header-sticky-border-bottom-dark);
+ @include property(--kt-app-header-sticky-border-bottom-mobile, $app-header-sticky-border-bottom-mobile-dark);
+
+ // Header primary
+ @include property(--kt-app-header-primary-base-bg-color, $app-header-primary-base-bg-color-dark);
+ @include property(--kt-app-header-primary-base-bg-color-mobile, $app-header-primary-base-bg-color-mobile-dark);
+ @include property(--kt-app-header-primary-base-box-shadow, $app-header-primary-base-box-shadow-dark);
+ @include property(--kt-app-header-primary-base-box-shadow-mobile, $app-header-primary-base-box-shadow-mobile-dark);
+ @include property(--kt-app-header-primary-base-border-bottom, $app-header-primary-base-border-bottom-dark);
+ @include property(--kt-app-header-primary-base-border-bottom-mobile, $app-header-primary-base-border-bottom-mobile-dark);
+
+ @include property(--kt-app-header-primary-minimize-bg-color, $app-header-primary-minimize-bg-color-dark);
+ @include property(--kt-app-header-primary-minimize-box-shadow, $app-header-primary-minimize-box-shadow-dark);
+ @include property(--kt-app-header-primary-minimize-border-top, $app-header-primary-minimize-border-top-dark);
+ @include property(--kt-app-header-primary-minimize-border-bottom, $app-header-primary-minimize-border-bottom-dark);
+
+ @include property(--kt-app-header-primary-sticky-bg-color, $app-header-primary-sticky-bg-color-dark);
+ @include property(--kt-app-header-primary-sticky-box-shadow, $app-header-primary-sticky-box-shadow-dark);
+ @include property(--kt-app-header-primary-sticky-border-top, $app-header-primary-sticky-border-top-dark);
+ @include property(--kt-app-header-primary-sticky-border-bottom, $app-header-primary-sticky-border-bottom-dark);
+
+ // Header secondary
+ @include property(--kt-app-header-secondary-base-bg-color, $app-header-secondary-base-bg-color-dark);
+ @include property(--kt-app-header-secondary-base-bg-color-mobile, $app-header-secondary-base-bg-color-mobile-dark);
+ @include property(--kt-app-header-secondary-base-box-shadow, $app-header-secondary-base-box-shadow-dark);
+ @include property(--kt-app-header-secondary-base-box-shadow-mobile, $app-header-secondary-base-box-shadow-mobile-dark);
+ @include property(--kt-app-header-secondary-base-border-top, $app-header-secondary-base-border-top-dark);
+ @include property(--kt-app-header-secondary-base-border-bottom, $app-header-secondary-base-border-bottom-dark);
+ @include property(--kt-app-header-secondary-base-border-start-mobile, $app-header-secondary-base-border-bottom-dark);
+ @include property(--kt-app-header-secondary-base-border-end-mobile, $app-header-secondary-base-border-end-mobile-dark);
+
+ @include property(--kt-app-header-secondary-minimize-bg-color, $app-header-secondary-minimize-bg-color-dark);
+ @include property(--kt-app-header-secondary-minimize-box-shadow, $app-header-secondary-minimize-box-shadow-dark);
+ @include property(--kt-app-header-secondary-minimize-border-top, $app-header-secondary-minimize-border-top-dark);
+ @include property(--kt-app-header-secondary-minimize-border-bottom, $app-header-secondary-minimize-border-bottom-dark);
+
+ @include property(--kt-app-header-secondary-sticky-bg-color, $app-header-secondary-sticky-bg-color-dark);
+ @include property(--kt-app-header-secondary-sticky-box-shadow, $app-header-secondary-sticky-box-shadow-dark);
+ @include property(--kt-app-header-secondary-sticky-border-top, $app-header-secondary-sticky-border-top-dark);
+ @include property(--kt-app-header-secondary-sticky-border-bottom, $app-header-secondary-sticky-border-bottom-dark);
+
+ // Toolbar base
+ @include property(--kt-app-toolbar-base-bg-color, $app-toolbar-base-bg-color-dark);
+ @include property(--kt-app-toolbar-base-bg-color-mobile, $app-toolbar-base-bg-color-mobile-dark);
+ @include property(--kt-app-toolbar-base-box-shadow, $app-toolbar-base-box-shadow-dark);
+ @include property(--kt-app-toolbar-base-box-shadow-mobile, $app-toolbar-base-box-shadow-mobile-dark);
+ @include property(--kt-app-toolbar-base-border-top, $app-toolbar-base-border-top-dark);
+ @include property(--kt-app-toolbar-base-border-top-mobile, $app-toolbar-base-border-top-mobile-dark);
+ @include property(--kt-app-toolbar-base-border-bottom, $app-toolbar-base-border-bottom-dark);
+ @include property(--kt-app-toolbar-base-border-bottom-mobile, $app-toolbar-base-border-bottom-dark);
+
+ // Toolbar minimize
+ @include property(--kt-app-toolbar-minimize-bg-color, $app-toolbar-minimize-bg-color-dark);
+ @include property(--kt-app-toolbar-minimize-bg-color-mobile, $app-toolbar-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-toolbar-minimize-box-shadow, $app-toolbar-minimize-box-shadow-dark);
+ @include property(--kt-app-toolbar-minimize-box-shadow-mobile, $app-toolbar-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-toolbar-minimize-border-top, $app-toolbar-minimize-border-top-dark);
+ @include property(--kt-app-toolbar-minimize-border-top-mobile, $app-toolbar-minimize-border-top-mobile-dark);
+ @include property(--kt-app-toolbar-minimize-border-bottom, $app-toolbar-minimize-border-bottom-dark);
+ @include property(--kt-app-toolbar-minimize-border-bottom-mobile, $app-toolbar-minimize-border-bottom-mobile-dark);
+
+ // Toolbar sticky
+ @include property(--kt-app-toolbar-sticky-bg-color, $app-toolbar-sticky-bg-color-dark);
+ @include property(--kt-app-toolbar-sticky-bg-color-mobile, $app-toolbar-sticky-bg-color-mobile-dark);
+ @include property(--kt-app-toolbar-sticky-box-shadow, $app-toolbar-sticky-box-shadow-dark);
+ @include property(--kt-app-toolbar-sticky-box-shadow-mobile, $app-toolbar-sticky-box-shadow-mobile-dark);
+ @include property(--kt-app-toolbar-sticky-border-top, $app-toolbar-sticky-border-top-dark);
+ @include property(--kt-app-toolbar-sticky-border-top-mobile, $app-toolbar-sticky-border-top-mobile-dark);
+ @include property(--kt-app-toolbar-sticky-border-bottom, $app-toolbar-sticky-border-bottom-dark);
+ @include property(--kt-app-toolbar-sticky-border-bottom-mobile, $app-toolbar-sticky-border-bottom-mobile-dark);
+
+ // Hero
+ @include property(--kt-app-hero-bg-color, $app-hero-bg-color-dark);
+ @include property(--kt-app-hero-box-shadow, $app-hero-box-shadow-dark);
+ @include property(--kt-app-hero-border-top, $app-hero-border-top-dark);
+ @include property(--kt-app-hero-border-bottom, $app-hero-border-bottom-dark);
+
+ // Sidebar base
+ @include property(--kt-app-sidebar-base-bg-color, $app-sidebar-base-bg-color-dark);
+ @include property(--kt-app-sidebar-base-bg-color-mobile, $app-sidebar-base-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-base-box-shadow, $app-sidebar-base-box-shadow-dark);
+ @include property(--kt-app-sidebar-base-box-shadow-mobile, $app-sidebar-base-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-base-border-start, $app-sidebar-base-border-start-dark);
+ @include property(--kt-app-sidebar-base-border-start-mobile, $app-sidebar-base-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-base-border-end, $app-sidebar-base-border-end-dark);
+ @include property(--kt-app-sidebar-base-border-end-mobile, $app-sidebar-base-border-end-mobile-dark);
+
+ // Sidebar sticky
+ @include property(--kt-app-sidebar-sticky-bg-color, $app-sidebar-sticky-bg-color-dark);
+ @include property(--kt-app-sidebar-sticky-box-shadow, $app-sidebar-sticky-box-shadow-dark);
+ @include property(--kt-app-sidebar-sticky-border-start, $app-sidebar-sticky-border-start-dark);
+ @include property(--kt-app-sidebar-sticky-border-end, $app-sidebar-sticky-border-end-dark);
+
+ // Sidebar minimize
+ @include property(--kt-app-sidebar-minimize-bg-color, $app-sidebar-minimize-bg-color-dark);
+ @include property(--kt-app-sidebar-minimize-bg-color-mobile, $app-sidebar-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-minimize-box-shadow, $app-sidebar-minimize-box-shadow-dark);
+ @include property(--kt-app-sidebar-minimize-box-shadow-mobile, $app-sidebar-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-minimize-hover-box-shadow, $app-sidebar-minimize-hover-box-shadow-dark);
+ @include property(--kt-app-sidebar-minimize-hover-box-shadow-mobile, $app-sidebar-minimize-hover-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-minimize-border-start, $app-sidebar-minimize-border-start-dark);
+ @include property(--kt-app-sidebar-minimize-border-start-mobile, $app-sidebar-minimize-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-minimize-border-end, $app-sidebar-minimize-border-end-dark);
+ @include property(--kt-app-sidebar-minimize-border-end-mobile, $app-sidebar-minimize-border-end-mobile-dark);
+
+ // Sidebar primary
+ @include property(--kt-app-sidebar-primary-base-bg-color, $app-sidebar-primary-base-bg-color-dark);
+ @include property(--kt-app-sidebar-primary-base-bg-color-mobile, $app-sidebar-primary-base-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-primary-base-box-shadow, $app-sidebar-primary-base-box-shadow-dark);
+ @include property(--kt-app-sidebar-primary-base-box-shadow-mobile, $app-sidebar-primary-base-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-primary-base-border-start, $app-sidebar-primary-base-border-start-dark);
+ @include property(--kt-app-sidebar-primary-base-border-start-mobile, $app-sidebar-primary-base-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-primary-base-border-end, $app-sidebar-primary-base-border-end-dark);
+ @include property(--kt-app-sidebar-primary-base-border-end-mobile, $app-sidebar-primary-base-border-end-mobile-dark);
+
+ @include property(--kt-app-sidebar-primary-minimize-bg-color, $app-sidebar-primary-base-border-end-mobile-dark);
+ @include property(--kt-app-sidebar-primary-minimize-bg-color-mobile, $app-sidebar-primary-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-primary-minimize-box-shadow, $app-sidebar-primary-minimize-box-shadow-dark);
+ @include property(--kt-app-sidebar-primary-minimize-box-shadow-mobile, $app-sidebar-primary-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-primary-minimize-hover-box-shadow, $app-sidebar-primary-minimize-hover-box-shadow-dark);
+ @include property(--kt-app-sidebar-primary-minimize-hover-box-shadow-mobile, $app-sidebar-primary-minimize-hover-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-primary-minimize-border-start, $app-sidebar-primary-minimize-border-start-dark);
+ @include property(--kt-app-sidebar-primary-minimize-border-start-mobile, $app-sidebar-primary-minimize-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-primary-minimize-border-end, $app-sidebar-primary-minimize-border-end-dark);
+ @include property(--kt-app-sidebar-primary-minimize-border-end-mobile, $app-sidebar-primary-minimize-border-end-mobile-dark);
+
+ // Sidebar secondary
+ @include property(--kt-app-sidebar-secondary-base-bg-color, $app-sidebar-secondary-base-bg-color-dark);
+ @include property(--kt-app-sidebar-secondary-base-bg-color-mobile, $app-sidebar-secondary-base-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-base-box-shadow, $app-sidebar-secondary-base-box-shadow-dark);
+ @include property(--kt-app-sidebar-secondary-base-box-shadow-mobile, $app-sidebar-secondary-base-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-base-border-start, $app-sidebar-secondary-base-border-start-dark);
+ @include property(--kt-app-sidebar-secondary-base-border-start-mobile, $app-sidebar-secondary-base-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-base-border-end, $app-sidebar-secondary-base-border-end-dark);
+ @include property(--kt-app-sidebar-secondary-base-border-end-mobile, $app-sidebar-secondary-base-border-end-mobile-dark);
+
+ @include property(--kt-app-sidebar-secondary-minimize-bg-color, $app-sidebar-secondary-minimize-bg-color-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-bg-color-mobile, $app-sidebar-secondary-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-box-shadow, $app-sidebar-secondary-minimize-box-shadow-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-box-shadow-mobile, $app-sidebar-secondary-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-hover-box-shadow, $app-sidebar-secondary-minimize-hover-box-shadow-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-hover-box-shadow-mobile, $app-sidebar-secondary-minimize-hover-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-border-start, $app-sidebar-secondary-minimize-border-start-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-border-start-mobile, $app-sidebar-secondary-minimize-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-border-end, $app-sidebar-secondary-minimize-border-end-dark);
+ @include property(--kt-app-sidebar-secondary-minimize-border-end-mobile, $app-sidebar-secondary-minimize-border-end-mobile-dark);
+
+ // Sidebar panel base
+ @include property(--kt-app-sidebar-panel-base-bg-color, $app-sidebar-panel-base-bg-color-dark);
+ @include property(--kt-app-sidebar-panel-base-bg-color-mobile, $app-sidebar-panel-base-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-panel-base-box-shadow, $app-sidebar-panel-base-box-shadow-dark);
+ @include property(--kt-app-sidebar-panel-base-box-shadow-mobile, $app-sidebar-panel-base-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-panel-base-border-start, $app-sidebar-panel-base-border-start-dark);
+ @include property(--kt-app-sidebar-panel-base-border-start-mobile, $app-sidebar-panel-base-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-panel-base-border-end, $app-sidebar-panel-base-border-end-dark);
+ @include property(--kt-app-sidebar-panel-base-border-end-mobile, $app-sidebar-panel-base-border-end-mobile-dark);
+
+ // Sidebar panel sticky
+ @include property(--kt-app-sidebar-panel-sticky-bg-color, $app-sidebar-panel-sticky-bg-color-dark);
+ @include property(--kt-app-sidebar-panel-sticky-box-shadow, $app-sidebar-panel-sticky-box-shadow-dark);
+ @include property(--kt-app-sidebar-panel-sticky-border-start, $app-sidebar-panel-sticky-border-start-dark);
+ @include property(--kt-app-sidebar-panel-sticky-border-end, $app-sidebar-panel-sticky-border-end-dark);
+
+ // Sidebar panel minimize
+ @include property(--kt-app-sidebar-panel-minimize-bg-color, $app-sidebar-panel-minimize-bg-color-dark);
+ @include property(--kt-app-sidebar-panel-minimize-bg-color-mobile, $app-sidebar-panel-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-sidebar-panel-minimize-box-shadow, $app-sidebar-panel-minimize-box-shadow-dark);
+ @include property(--kt-app-sidebar-panel-minimize-box-shadow-mobile, $app-sidebar-panel-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-panel-minimize-hover-box-shadow, $app-sidebar-panel-minimize-hover-box-shadow-dark);
+ @include property(--kt-app-sidebar-panel-minimize-hover-box-shadow-mobile, $app-sidebar-panel-minimize-hover-box-shadow-mobile-dark);
+ @include property(--kt-app-sidebar-panel-minimize-border-start, $app-sidebar-panel-minimize-border-start-dark);
+ @include property(--kt-app-sidebar-panel-minimize-border-start-mobile, $app-sidebar-panel-minimize-border-start-mobile-dark);
+ @include property(--kt-app-sidebar-panel-minimize-border-end, $app-sidebar-panel-minimize-border-end-dark);
+ @include property(--kt-app-sidebar-panel-minimize-border-end-mobile, $app-sidebar-panel-minimize-border-end-mobile-dark);
+
+ // Aside base
+ @include property(--kt-app-aside-base-bg-color, $app-aside-base-bg-color-dark);
+ @include property(--kt-app-aside-base-bg-color-mobile, $app-aside-base-bg-color-mobile-dark);
+ @include property(--kt-app-aside-base-box-shadow, $app-aside-base-box-shadow-dark);
+ @include property(--kt-app-aside-base-box-shadow-mobile, $app-aside-base-box-shadow-mobile-dark);
+ @include property(--kt-app-aside-base-border-start, $app-aside-base-border-start-dark);
+ @include property(--kt-app-aside-base-border-start-mobile, $app-aside-base-border-start-mobile-dark);
+ @include property(--kt-app-aside-base-border-end, $app-aside-base-border-end-dark);
+ @include property(--kt-app-aside-base-border-end-mobile, $app-aside-base-border-end-mobile-dark);
+
+ // Aside sticky
+ @include property(--kt-app-aside-sticky-bg-color, $app-aside-sticky-bg-color-dark);
+ @include property(--kt-app-aside-sticky-box-shadow, $app-aside-sticky-box-shadow-dark);
+ @include property(--kt-app-aside-sticky-border-start, $app-aside-sticky-border-start-dark);
+ @include property(--kt-app-aside-sticky-border-end, $app-aside-sticky-border-end-dark);
+
+ // Aside minimize
+ @include property(--kt-app-aside-minimize-bg-color, $app-aside-minimize-bg-color-dark);
+ @include property(--kt-app-aside-minimize-bg-color-mobile, $app-aside-minimize-bg-color-mobile-dark);
+ @include property(--kt-app-aside-minimize-box-shadow, $app-aside-minimize-box-shadow-dark);
+ @include property(--kt-app-aside-minimize-box-shadow-mobile, $app-aside-minimize-box-shadow-mobile-dark);
+ @include property(--kt-app-aside-minimize-hover-box-shadow, $app-aside-minimize-hover-box-shadow-dark);
+ @include property(--kt-app-aside-minimize-hover-box-shadow-mobile, $app-aside-minimize-hover-box-shadow-mobile-dark);
+ @include property(--kt-app-aside-minimize-border-start, $app-aside-minimize-border-start-dark);
+ @include property(--kt-app-aside-minimize-border-start-mobile, $app-aside-minimize-border-start-mobile-dark);
+ @include property(--kt-app-aside-minimize-border-end, $app-aside-minimize-border-end-dark);
+ @include property(--kt-app-aside-minimize-border-end-mobile, $app-aside-minimize-border-end-mobile-dark);
+
+ // Page
+ @include property(--kt-app-page-bg-color, $app-page-bg-color-dark);
+
+ // Wrapper
+ @include property(--kt-app-wrapper-bg-color, $app-wrapper-bg-color-dark);
+
+ // Footer
+ @include property(--kt-app-footer-bg-color, $app-footer-bg-color-dark);
+ @include property(--kt-app-footer-bg-color-mobile, $app-footer-bg-color-mobile-dark);
+ @include property(--kt-app-footer-box-shadow, $app-footer-box-shadow-dark);
+ @include property(--kt-app-footer-box-shadow-mobile, $app-footer-box-shadow-mobile-dark);
+ @include property(--kt-app-footer-border-top, $app-footer-border-top-dark);
+ @include property(--kt-app-footer-border-top-mobile, $app-footer-border-top-mobile-dark);
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_toolbar.scss b/src/_res/assets/sass/core/layout/base/_toolbar.scss
new file mode 100644
index 0000000..e80f74c
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_toolbar.scss
@@ -0,0 +1,183 @@
+//
+// Toolbar
+//
+
+// General mode
+.app-toolbar {
+ display: flex;
+ align-items: stretch;
+
+ &.app-toolbar-minimize {
+ transition: $app-toolbar-base-transition;
+ }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-toolbar {
+ background-color: var(--kt-app-toolbar-base-bg-color);
+ box-shadow: var(--kt-app-toolbar-base-box-shadow);
+ border-top: var(--kt-app-toolbar-base-border-top);
+ border-bottom: var(--kt-app-toolbar-base-border-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-toolbar-height: #{$app-toolbar-base-height};
+ --kt-app-toolbar-height-actual: #{$app-toolbar-base-height};
+ }
+
+ [data-kt-app-toolbar-sticky="on"] {
+ --kt-app-toolbar-height: #{$app-toolbar-sticky-height};
+ }
+
+ [data-kt-app-toolbar-minimize="on"] {
+ --kt-app-toolbar-height: #{$app-toolbar-minimize-height};
+ }
+
+ // States
+ .app-toolbar {
+ height: var(--kt-app-toolbar-height);
+
+ [data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"] & {
+ @include property( z-index, $app-toolbar-base-z-index);
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ [data-kt-app-toolbar-sticky="on"] & {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ @include property( z-index, $app-toolbar-sticky-z-index);
+ @include property( backdrop-filter, $app-toolbar-sticky-backdrop-filter);
+
+ box-shadow: var(--kt-app-toolbar-sticky-box-shadow);
+ background-color: var(--kt-app-toolbar-sticky-bg-color);
+ border-top: var(--kt-app-toolbar-sticky-border-top);
+ border-bottom: var(--kt-app-toolbar-sticky-border-bottom);
+ }
+
+ [data-kt-app-toolbar-minimize="on"] & {
+ transition: $app-toolbar-base-transition;
+ @include property( z-index, $app-toolbar-minimize-z-index);
+ @include property( backdrop-filter, $app-toolbar-minimize-backdrop-filter);
+
+ box-shadow: var(--kt-app-toolbar-minimize-box-shadow);
+ background-color: var(--kt-app-toolbar-minimize-bg-color);
+ border-top: var(--kt-app-toolbar-minimize-border-top);
+ border-bottom: var(--kt-app-toolbar-minimize-border-bottom);
+ }
+ }
+
+ // Integration
+ .app-toolbar {
+ // Header
+ [data-kt-app-toolbar-fixed="true"][data-kt-app-header-fixed="true"] & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Sidebar
+ [data-kt-app-toolbar-sticky="on"][data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-toolbar="true"] &,
+ [data-kt-app-toolbar-fixed="true"][data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-toolbar="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar panel
+ [data-kt-app-toolbar-sticky="on"][data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-toolbar="true"] &,
+ [data-kt-app-toolbar-fixed="true"][data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-toolbar="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ // Aside
+ [data-kt-app-toolbar-sticky="on"][data-kt-app-aside-fixed="true"][data-kt-app-aside-push-toolbar="true"] &,
+ [data-kt-app-toolbar-fixed="true"][data-kt-app-aside-fixed="true"][data-kt-app-aside-push-toolbar="true"] & {
+ right: calc(
+ var(--kt-app-aside-width) +
+ var(--kt-app-aside-gap-start, 0px) +
+ var(--kt-app-aside-gap-end, 0px)
+ );
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-toolbar {
+ @include property( z-index, $app-toolbar-base-z-index-mobile);
+
+ box-shadow: var(--kt-app-toolbar-base-box-shadow-mobile);
+ background-color: var(--kt-app-toolbar-base-bg-color-mobile);
+ border-top: var(--kt-app-toolbar-base-border-top-mobile);
+ border-bottom: var(--kt-app-toolbar-base-border-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-toolbar-height: #{$app-toolbar-base-height-mobile};
+ }
+
+ [data-kt-app-toolbar-sticky="on"] {
+ --kt-app-toolbar-height: #{$app-toolbar-sticky-height-mobile};
+ }
+
+ [data-kt-app-toolbar-minimize="on"] {
+ --kt-app-toolbar-height: #{$app-toolbar-minimize-height-mobile};
+ }
+
+ // States
+ .app-toolbar {
+ height: var(--kt-app-toolbar-height);
+
+ [data-kt-app-header-fixed-mobile="true"][data-kt-app-toolbar-fixed-mobile="true"] & {
+ @include property( z-index, $app-toolbar-base-z-index-mobile);
+ position: fixed;
+ top: calc(var(--kt-app-header-height, 0px) + var(--kt-app-header-mobile-height, 0px));
+ left: 0;
+ right: 0;
+ }
+
+ [data-kt-app-toolbar-sticky="on"] & {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: var(--kt-app-header-height, 0px);
+
+ box-shadow: var(--kt-app-toolbar-sticky-box-shadow-mobile);
+ background-color: var(--kt-app-toolbar-sticky-bg-color-mobile);
+ border-top: var(--kt-app-toolbar-sticky-border-top-mobile);
+ border-bottom: var(--kt-app-toolbar-sticky-border-bottom-mobile);
+
+ @include property( z-index, $app-toolbar-sticky-z-index-mobile);
+ @include property( backdrop-filter, $app-toolbar-sticky-backdrop-filter-mobile);
+ }
+
+ [data-kt-app-toolbar-minimize="on"] & {
+ transition: $app-toolbar-base-transition;
+
+ box-shadow: var(--kt-app-toolbar-minimize-box-shadow-mobile);
+ background-color: var(--kt-app-toolbar-minimize-bg-color-mobile);
+ border-top: var(--kt-app-toolbar-minimize-border-top-mobile);
+ border-bottom: var(--kt-app-toolbar-minimize-border-bottom-mobile);
+
+ @include property( z-index, $app-toolbar-minimize-z-index-mobile);
+ @include property( backdrop-filter, $app-toolbar-minimize-backdrop-filter-mobile);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_variables.scss b/src/_res/assets/sass/core/layout/base/_variables.scss
new file mode 100644
index 0000000..2a95a9f
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_variables.scss
@@ -0,0 +1,696 @@
+//
+// Variables
+//
+
+// Reboot
+$app-bg-color: #f5f8fa !default;
+$app-bg-color-dark: #151521 !default;
+$app-blank-bg-color: $white;
+$app-blank-bg-color-dark: $app-bg-color-dark;
+
+// General
+$app-general-transition-duration: .3s !default;
+$app-general-transition-timing: ease !default;
+$app-general-root-font-size-desktop: 13px !default;
+$app-general-root-font-size-tablet: 12px !default;
+$app-general-root-font-size-mobile: 12px !default;
+
+// Container
+$app-container-padding-x: 30px !default;
+$app-container-padding-x-mobile: 20px !default;
+
+// Page
+$app-page-bg-color: null !default;
+$app-page-bg-color-dark: null !default;
+
+// Main
+$app-main-transition: margin $app-general-transition-duration $app-general-transition-timing;
+$app-main-padding-y: null !default;
+$app-main-padding-y-mobile: null !default;
+$app-main-padding-x: null !default;
+$app-main-padding-x-mobile: 0 !default;
+$app-main-margin-y: null !default;
+$app-main-margin-y-mobile: null !default;
+$app-main-margin-x: null !default;
+$app-main-margin-x-mobile: null !default;
+
+// Wrapper
+$app-wrapper-transition: margin-left $app-general-transition-duration $app-general-transition-timing, margin-right $app-general-transition-duration $app-general-transition-timing;
+$app-wrapper-bg-color: null !default;
+$app-wrapper-bg-color-dark: null !default;
+
+// Content
+$app-content-padding-y: 30px !default;
+$app-content-padding-y-mobile: 20px !default;
+$app-content-padding-x: 0 !default;
+$app-content-padding-x-mobile: 0 !default;
+
+// Header base
+$app-header-base-transition: none !default;
+$app-header-base-height: 70px !default;
+$app-header-base-height-mobile: 70px !default;
+$app-header-base-z-index: null !default;
+$app-header-base-z-index-mobile: null !default;
+$app-header-base-bg-color: null !default;
+$app-header-base-bg-color-dark: null !default;
+$app-header-base-bg-color-mobile: null !default;
+$app-header-base-bg-color-mobile-dark: null !default;
+$app-header-base-box-shadow: null !default;
+$app-header-base-box-shadow-dark: null !default;
+$app-header-base-box-shadow-mobile: null !default;
+$app-header-base-box-shadow-mobile-dark: null !default;
+$app-header-base-border-bottom: null !default;
+$app-header-base-border-bottom-dark: null !default;
+$app-header-base-border-bottom-mobile: null !default;
+$app-header-base-border-bottom-mobile-dark: null !default;
+
+// Header fixed
+$app-header-fixed-z-index: 100 !default;
+$app-header-fixed-z-index-mobile: 100 !default;
+
+// Header minimize
+$app-header-minimize-height: 70px !default;
+$app-header-minimize-height-mobile: 70px !default;
+$app-header-minimize-z-index: 100 !default;
+$app-header-minimize-z-index-mobile: 100 !default;
+$app-header-minimize-backdrop-filter: null !default;
+$app-header-minimize-backdrop-filter-mobile: null !default;
+$app-header-minimize-bg-color: null !default;
+$app-header-minimize-bg-color-dark: null !default;
+$app-header-minimize-bg-color-mobile: null !default;
+$app-header-minimize-bg-color-mobile-dark: null !default;
+$app-header-minimize-box-shadow: null !default;
+$app-header-minimize-box-shadow-dark: null !default;
+$app-header-minimize-box-shadow-mobile: null !default;
+$app-header-minimize-box-shadow-mobile-dark: null !default;
+$app-header-minimize-border-bottom: null !default;
+$app-header-minimize-border-bottom-dark: null !default;
+$app-header-minimize-border-bottom-mobile: null !default;
+$app-header-minimize-border-bottom-mobile-dark: null !default;
+
+// Header sticky
+$app-header-sticky-height: 70px !default;
+$app-header-sticky-height-mobile: 70px !default;
+$app-header-sticky-z-index: 100 !default;
+$app-header-sticky-z-index-mobile: 100 !default;
+$app-header-sticky-backdrop-filter: null !default;
+$app-header-sticky-backdrop-filter-mobile: null !default;
+$app-header-sticky-bg-color: null !default;
+$app-header-sticky-bg-color-dark: null !default;
+$app-header-sticky-bg-color-mobile: null !default;
+$app-header-sticky-bg-color-mobile-dark: null !default;
+$app-header-sticky-box-shadow: null !default;
+$app-header-sticky-box-shadow-dark: null !default;
+$app-header-sticky-box-shadow-mobile: null !default;
+$app-header-sticky-box-shadow-mobile-dark: null !default;
+$app-header-sticky-border-bottom: null !default;
+$app-header-sticky-border-bottom-dark: null !default;
+$app-header-sticky-border-bottom-mobile: null !default;
+$app-header-sticky-border-bottom-mobile-dark: null !default;
+
+// Header primary
+$app-header-primary-base-transition: none !default;
+$app-header-primary-base-height: 70px !default;
+$app-header-primary-base-z-index: null !default;
+$app-header-primary-base-z-index-mobile: null !default;
+$app-header-primary-base-bg-color: null !default;
+$app-header-primary-base-bg-color-dark: null !default;
+$app-header-primary-base-bg-color-mobile: null !default;
+$app-header-primary-base-bg-color-mobile-dark: null !default;
+$app-header-primary-base-box-shadow: null !default;
+$app-header-primary-base-box-shadow-dark: null !default;
+$app-header-primary-base-box-shadow-mobile: null !default;
+$app-header-primary-base-box-shadow-mobile-dark: null !default;
+$app-header-primary-base-border-bottom: null !default;
+$app-header-primary-base-border-bottom-dark: null !default;
+$app-header-primary-base-border-bottom-mobile: null !default;
+$app-header-primary-base-border-bottom-mobile-dark: null !default;
+
+$app-header-primary-fixed-z-index: 100 !default;
+
+$app-header-primary-minimize-height: 70px !default;
+$app-header-primary-minimize-z-index: 100 !default;
+$app-header-primary-minimize-bg-color: null !default;
+$app-header-primary-minimize-bg-color-dark: null !default;
+$app-header-primary-minimize-box-shadow: null !default;
+$app-header-primary-minimize-box-shadow-dark: null !default;
+$app-header-primary-minimize-border-top: null !default;
+$app-header-primary-minimize-border-top-dark: null !default;
+$app-header-primary-minimize-border-bottom: null !default;
+$app-header-primary-minimize-border-bottom-dark: null !default;
+
+$app-header-primary-sticky-height: 70px !default;
+$app-header-primary-sticky-z-index: 100 !default;
+$app-header-primary-sticky-bg-color: null !default;
+$app-header-primary-sticky-bg-color-dark: null !default;
+$app-header-primary-sticky-box-shadow: null !default;
+$app-header-primary-sticky-box-shadow-dark: null !default;
+$app-header-primary-sticky-border-top: null !default;
+$app-header-primary-sticky-border-top-dark: null !default;
+$app-header-primary-sticky-border-bottom: null !default;
+$app-header-primary-sticky-border-bottom-dark: null !default;
+
+// Header secondary
+$app-header-secondary-base-transition: none !default;
+$app-header-secondary-base-height: 70px !default;
+$app-header-secondary-base-z-index: null !default;
+$app-header-secondary-base-bg-color: null !default;
+$app-header-secondary-base-bg-color-dark: null !default;
+$app-header-secondary-base-bg-color-mobile: null !default;
+$app-header-secondary-base-bg-color-mobile-dark: null !default;
+$app-header-secondary-base-box-shadow: null !default;
+$app-header-secondary-base-box-shadow-dark: null !default;
+$app-header-secondary-base-box-shadow-mobile: null !default;
+$app-header-secondary-base-box-shadow-mobile-dark: null !default;
+$app-header-secondary-base-border-top: null !default;
+$app-header-secondary-base-border-top-dark: null !default;
+$app-header-secondary-base-border-bottom: null !default;
+$app-header-secondary-base-border-bottom-dark: null !default;
+$app-header-secondary-base-border-start-mobile: null !default;
+$app-header-secondary-base-border-start-mobile-dark: null !default;
+$app-header-secondary-base-border-end-mobile: null !default;
+$app-header-secondary-base-border-end-mobile-dark: null !default;
+
+$app-header-secondary-fixed-z-index: 100 !default;
+
+$app-header-secondary-minimize-height: 70px !default;
+$app-header-secondary-minimize-z-index: 100 !default;
+$app-header-secondary-minimize-bg-color: null !default;
+$app-header-secondary-minimize-bg-color-dark: null !default;
+$app-header-secondary-minimize-box-shadow: null !default;
+$app-header-secondary-minimize-box-shadow-dark: null !default;
+$app-header-secondary-minimize-border-top: null !default;
+$app-header-secondary-minimize-border-top-dark: null !default;
+$app-header-secondary-minimize-border-bottom: null !default;
+$app-header-secondary-minimize-border-bottom-dark: null !default;
+
+$app-header-secondary-sticky-height: 70px !default;
+$app-header-secondary-sticky-z-index: 100 !default;
+$app-header-secondary-sticky-bg-color: null !default;
+$app-header-secondary-sticky-bg-color-dark: null !default;
+$app-header-secondary-sticky-box-shadow: null !default;
+$app-header-secondary-sticky-box-shadow-dark: null !default;
+$app-header-secondary-sticky-border-top: null !default;
+$app-header-secondary-sticky-border-top-dark: null !default;
+$app-header-secondary-sticky-border-bottom: null !default;
+$app-header-secondary-sticky-border-bottom-dark: null !default;
+
+// Toolbar base
+$app-toolbar-base-transition: none !default;
+$app-toolbar-base-height: null !default;
+$app-toolbar-base-height-mobile: null !default;
+$app-toolbar-base-z-index: 99 !default;
+$app-toolbar-base-z-index-mobile: 99 !default;
+$app-toolbar-base-bg-color: null !default;
+$app-toolbar-base-bg-color-dark: null !default;
+$app-toolbar-base-bg-color-mobile: null !default;
+$app-toolbar-base-bg-color-mobile-dark: null !default;
+$app-toolbar-base-box-shadow: null !default;
+$app-toolbar-base-box-shadow-dark: null !default;
+$app-toolbar-base-box-shadow-mobile: null !default;
+$app-toolbar-base-box-shadow-mobile-dark: null !default;
+$app-toolbar-base-border-top: null !default;
+$app-toolbar-base-border-top-dark: null !default;
+$app-toolbar-base-border-top-mobile: null !default;
+$app-toolbar-base-border-top-mobile-dark: null !default;
+$app-toolbar-base-border-bottom: null !default;
+$app-toolbar-base-border-bottom-dark: null !default;
+$app-toolbar-base-border-bottom-mobile: null !default;
+$app-toolbar-base-border-bottom-mobile-dark: null !default;
+
+// Toolbar minimize
+$app-toolbar-minimize-height: 70px !default;
+$app-toolbar-minimize-height-mobile: 70px !default;
+$app-toolbar-minimize-z-index: 99 !default;
+$app-toolbar-minimize-z-index-mobile: 99 !default;
+$app-toolbar-minimize-backdrop-filter: null !default;
+$app-toolbar-minimize-backdrop-filter-mobile: null !default;
+$app-toolbar-minimize-bg-color: null !default;
+$app-toolbar-minimize-bg-color-dark: null !default;
+$app-toolbar-minimize-bg-color-mobile: null !default;
+$app-toolbar-minimize-bg-color-mobile-dark: null !default;
+$app-toolbar-minimize-box-shadow: null !default;
+$app-toolbar-minimize-box-shadow-dark: null !default;
+$app-toolbar-minimize-box-shadow-mobile: null !default;
+$app-toolbar-minimize-box-shadow-mobile-dark: null !default;
+$app-toolbar-minimize-border-top: null !default;
+$app-toolbar-minimize-border-top-dark: null !default;
+$app-toolbar-minimize-border-top-mobile: null !default;
+$app-toolbar-minimize-border-top-mobile-dark: null !default;
+$app-toolbar-minimize-border-bottom: null !default;
+$app-toolbar-minimize-border-bottom-dark: null !default;
+$app-toolbar-minimize-border-bottom-mobile: null !default;
+$app-toolbar-minimize-border-bottom-mobile-dark: null !default;
+
+// Toolbar sticky
+$app-toolbar-sticky-height: 70px !default;
+$app-toolbar-sticky-height-mobile: 70px !default;
+$app-toolbar-sticky-z-index: 99 !default;
+$app-toolbar-sticky-z-index-mobile: 99 !default;
+$app-toolbar-sticky-backdrop-filter: null !default;
+$app-toolbar-sticky-backdrop-filter-mobile: null !default;
+$app-toolbar-sticky-bg-color: null !default;
+$app-toolbar-sticky-bg-color-dark: null !default;
+$app-toolbar-sticky-bg-color-mobile: null !default;
+$app-toolbar-sticky-bg-color-mobile-dark: null !default;
+$app-toolbar-sticky-box-shadow: null !default;
+$app-toolbar-sticky-box-shadow-dark: null !default;
+$app-toolbar-sticky-box-shadow-mobile: null !default;
+$app-toolbar-sticky-box-shadow-mobile-dark: null !default;
+$app-toolbar-sticky-border-top: null !default;
+$app-toolbar-sticky-border-top-dark: null !default;
+$app-toolbar-sticky-border-top-mobile: null !default;
+$app-toolbar-sticky-border-top-mobile-dark: null !default;
+$app-toolbar-sticky-border-bottom: null !default;
+$app-toolbar-sticky-border-bottom-dark: null !default;
+$app-toolbar-sticky-border-bottom-mobile: null !default;
+$app-toolbar-sticky-border-bottom-mobile-dark: null !default;
+
+// Hero
+$app-hero-bg-color: null !default;
+$app-hero-bg-color-dark: null !default;
+$app-hero-box-shadow: null !default;
+$app-hero-box-shadow-dark: null !default;
+$app-hero-border-top: null !default;
+$app-hero-border-top-dark: null !default;
+$app-hero-border-bottom: null !default;
+$app-hero-border-bottom-dark: null !default;
+
+// Sidebar base
+$app-sidebar-base-transition: width $app-general-transition-duration $app-general-transition-timing !default;
+$app-sidebar-base-width: 300px !default;
+$app-sidebar-base-width-mobile: 275px !default;
+$app-sidebar-base-z-index: null !default;
+$app-sidebar-base-z-index-mobile: 106 !default;
+$app-sidebar-base-bg-color: null !default;
+$app-sidebar-base-bg-color-dark: null !default;
+$app-sidebar-base-bg-color-mobile: null !default;
+$app-sidebar-base-bg-color-mobile-dark: null !default;
+$app-sidebar-base-box-shadow: null !default;
+$app-sidebar-base-box-shadow-dark: null !default;
+$app-sidebar-base-box-shadow-mobile: null !default;
+$app-sidebar-base-box-shadow-mobile-dark: null !default;
+$app-sidebar-base-border-start: null !default;
+$app-sidebar-base-border-start-dark: null !default;
+$app-sidebar-base-border-start-mobile: null !default;
+$app-sidebar-base-border-start-mobile-dark: null !default;
+$app-sidebar-base-border-end: null !default;
+$app-sidebar-base-border-end-dark: null !default;
+$app-sidebar-base-border-end-mobile: null !default;
+$app-sidebar-base-border-end-mobile-dark: null !default;
+$app-sidebar-base-gap-start: 0px !default;
+$app-sidebar-base-gap-start-mobile: 0px !default;
+$app-sidebar-base-gap-end: 0px !default;
+$app-sidebar-base-gap-end-mobile: 0px !default;
+$app-sidebar-base-gap-top: 0px !default;
+$app-sidebar-base-gap-top-mobile: 0px !default;
+$app-sidebar-base-gap-bottom: 0px !default;
+$app-sidebar-base-gap-bottom-mobile: 0px !default;
+
+// Sidebar fixed
+$app-sidebar-fixed-z-index: 105 !default;
+$app-sidebar-fixed-left: 0 !default;
+$app-sidebar-fixed-top: 0 !default;
+$app-sidebar-fixed-bottom: 0 !default;
+
+// Sidebar sticky
+$app-sidebar-sticky-top: auto !default;
+$app-sidebar-sticky-bottom: auto !default;
+$app-sidebar-sticky-left: auto !default;
+$app-sidebar-sticky-width: 300px !default;
+$app-sidebar-sticky-z-index: 105 !default;
+$app-sidebar-sticky-bg-color: null !default;
+$app-sidebar-sticky-bg-color-dark: null !default;
+$app-sidebar-sticky-box-shadow: null !default;
+$app-sidebar-sticky-box-shadow-dark: null !default;
+$app-sidebar-sticky-border-start: null !default;
+$app-sidebar-sticky-border-start-dark: null !default;
+$app-sidebar-sticky-border-end: null !default;
+$app-sidebar-sticky-border-end-dark: null !default;
+$app-sidebar-sticky-gap-start: 0px !default;
+$app-sidebar-sticky-gap-end: 0px !default;
+$app-sidebar-sticky-gap-top: 0px !default;
+$app-sidebar-sticky-gap-bottom: 0px !default;
+
+// Sidebar minimize
+$app-sidebar-minimize-width: 75px !default;
+$app-sidebar-minimize-width-mobile: 75px !default;
+$app-sidebar-minimize-bg-color: null !default;
+$app-sidebar-minimize-bg-color-dark: null !default;
+$app-sidebar-minimize-bg-color-mobile: null !default;
+$app-sidebar-minimize-bg-color-mobile-dark: null !default;
+$app-sidebar-minimize-box-shadow: null !default;
+$app-sidebar-minimize-box-shadow-dark: null !default;
+$app-sidebar-minimize-box-shadow-mobile: null !default;
+$app-sidebar-minimize-box-shadow-mobile-dark: null !default;
+$app-sidebar-minimize-hover-box-shadow: null !default;
+$app-sidebar-minimize-hover-box-shadow-dark: null !default;
+$app-sidebar-minimize-hover-box-shadow-mobile: null !default;
+$app-sidebar-minimize-hover-box-shadow-mobile-dark: null !default;
+$app-sidebar-minimize-border-start: null !default;
+$app-sidebar-minimize-border-start-dark: null !default;
+$app-sidebar-minimize-border-start-mobile: null !default;
+$app-sidebar-minimize-border-start-mobile-dark: null !default;
+$app-sidebar-minimize-border-end: null !default;
+$app-sidebar-minimize-border-end-dark: null !default;
+$app-sidebar-minimize-border-end-mobile: null !default;
+$app-sidebar-minimize-border-end-mobile-dark: null !default;
+$app-sidebar-minimize-gap-start: 0px !default;
+$app-sidebar-minimize-gap-start-mobile: 0px !default;
+$app-sidebar-minimize-gap-end: 0px !default;
+$app-sidebar-minimize-gap-end-mobile: 0px !default;
+$app-sidebar-minimize-gap-top: 0px !default;
+$app-sidebar-minimize-gap-top-mobile: 0px !default;
+$app-sidebar-minimize-gap-bottom: 0px !default;
+$app-sidebar-minimize-gap-bottom-mobile: 0px !default;
+
+// Sidebar primary
+$app-sidebar-primary-base-transition: none !default;
+$app-sidebar-primary-base-width: 100px !default;
+$app-sidebar-primary-base-width-mobile: 100px !default;
+$app-sidebar-primary-base-z-index: 1 !default;
+$app-sidebar-primary-base-z-index-mobile: 1 !default;
+$app-sidebar-primary-base-bg-color: null !default;
+$app-sidebar-primary-base-bg-color-dark: null !default;
+$app-sidebar-primary-base-bg-color-mobile: null !default;
+$app-sidebar-primary-base-bg-color-mobile-dark: null !default;
+$app-sidebar-primary-base-box-shadow: null !default;
+$app-sidebar-primary-base-box-shadow-dark: null !default;
+$app-sidebar-primary-base-box-shadow-mobile: null !default;
+$app-sidebar-primary-base-box-shadow-mobile-dark: null !default;
+$app-sidebar-primary-base-border-start: null !default;
+$app-sidebar-primary-base-border-start-dark: null !default;
+$app-sidebar-primary-base-border-start-mobile: null !default;
+$app-sidebar-primary-base-border-start-mobile-dark: null !default;
+$app-sidebar-primary-base-border-end: null !default;
+$app-sidebar-primary-base-border-end-dark: null !default;
+$app-sidebar-primary-base-border-end-mobile: null !default;
+$app-sidebar-primary-base-border-end-mobile-dark: null !default;
+$app-sidebar-primary-base-gap-start: 0px !default;
+$app-sidebar-primary-base-gap-start-mobile: 0px !default;
+$app-sidebar-primary-base-gap-end: 0px !default;
+$app-sidebar-primary-base-gap-end-mobile: 0px !default;
+$app-sidebar-primary-base-gap-top: 0px !default;
+$app-sidebar-primary-base-gap-top-mobile: 0px !default;
+$app-sidebar-primary-base-gap-bottom: 0px !default;
+$app-sidebar-primary-base-gap-bottom-mobile: 0px !default;
+
+$app-sidebar-primary-minimize-width: 75px !default;
+$app-sidebar-primary-minimize-width-mobile: 75px !default;
+$app-sidebar-primary-minimize-z-index: null !default;
+$app-sidebar-primary-minimize-bg-color: null !default;
+$app-sidebar-primary-minimize-bg-color-dark: null !default;
+$app-sidebar-primary-minimize-bg-color-mobile: null !default;
+$app-sidebar-primary-minimize-bg-color-mobile-dark: null !default;
+$app-sidebar-primary-minimize-box-shadow: null !default;
+$app-sidebar-primary-minimize-box-shadow-dark: null !default;
+$app-sidebar-primary-minimize-box-shadow-mobile: null !default;
+$app-sidebar-primary-minimize-box-shadow-mobile-dark: null !default;
+$app-sidebar-primary-minimize-hover-box-shadow: null !default;
+$app-sidebar-primary-minimize-hover-box-shadow-dark: null !default;
+$app-sidebar-primary-minimize-hover-box-shadow-mobile: null !default;
+$app-sidebar-primary-minimize-hover-box-shadow-mobile-dark: null !default;
+$app-sidebar-primary-minimize-border-start: null !default;
+$app-sidebar-primary-minimize-border-start-dark: null !default;
+$app-sidebar-primary-minimize-border-start-mobile: null !default;
+$app-sidebar-primary-minimize-border-start-mobile-dark: null !default;
+$app-sidebar-primary-minimize-border-end: null !default;
+$app-sidebar-primary-minimize-border-end-dark: null !default;
+$app-sidebar-primary-minimize-border-end-mobile: null !default;
+$app-sidebar-primary-minimize-border-end-mobile-dark: null !default;
+$app-sidebar-primary-minimize-gap-start: 0px !default;
+$app-sidebar-primary-minimize-gap-start-mobile: 0px !default;
+$app-sidebar-primary-minimize-gap-end: 0px !default;
+$app-sidebar-primary-minimize-gap-end-mobile: 0px !default;
+$app-sidebar-primary-minimize-gap-top: 0px !default;
+$app-sidebar-primary-minimize-gap-top-mobile: 0px !default;
+$app-sidebar-primary-minimize-gap-bottom: 0px !default;
+$app-sidebar-primary-minimize-gap-bottom-mobile: 0px !default;
+
+// Sidebar secondary
+$app-sidebar-secondary-base-transition: none !default;
+$app-sidebar-secondary-base-z-index: null !default;
+$app-sidebar-secondary-base-z-index-mobile: null !default;
+$app-sidebar-secondary-base-bg-color: null !default;
+$app-sidebar-secondary-base-bg-color-dark: null !default;
+$app-sidebar-secondary-base-bg-color-mobile: null !default;
+$app-sidebar-secondary-base-bg-color-mobile-dark: null !default;
+$app-sidebar-secondary-base-box-shadow: null !default;
+$app-sidebar-secondary-base-box-shadow-dark: null !default;
+$app-sidebar-secondary-base-box-shadow-mobile: null !default;
+$app-sidebar-secondary-base-box-shadow-mobile-dark: null !default;
+$app-sidebar-secondary-base-border-start: null !default;
+$app-sidebar-secondary-base-border-start-dark: null !default;
+$app-sidebar-secondary-base-border-start-mobile: null !default;
+$app-sidebar-secondary-base-border-start-mobile-dark: null !default;
+$app-sidebar-secondary-base-border-end: null !default;
+$app-sidebar-secondary-base-border-end-dark: null !default;
+$app-sidebar-secondary-base-border-end-mobile: null !default;
+$app-sidebar-secondary-base-border-end-mobile-dark: null !default;
+$app-sidebar-secondary-base-gap-start: 0px !default;
+$app-sidebar-secondary-base-gap-start-mobile: 0px !default;
+$app-sidebar-secondary-base-gap-end: 0px !default;
+$app-sidebar-secondary-base-gap-end-mobile: 0px !default;
+$app-sidebar-secondary-base-gap-top: 0px !default;
+$app-sidebar-secondary-base-gap-top-mobile: 0px !default;
+$app-sidebar-secondary-base-gap-bottom: 0px !default;
+$app-sidebar-secondary-base-gap-bottom-mobile: 0px !default;
+
+$app-sidebar-secondary-minimize-width: 75px !default;
+$app-sidebar-secondary-minimize-width-mobile: 75px !default;
+$app-sidebar-secondary-minimize-z-index: null !default;
+$app-sidebar-secondary-minimize-bg-color: null !default;
+$app-sidebar-secondary-minimize-bg-color-dark: null !default;
+$app-sidebar-secondary-minimize-bg-color-mobile: null !default;
+$app-sidebar-secondary-minimize-bg-color-mobile-dark: null !default;
+$app-sidebar-secondary-minimize-box-shadow: null !default;
+$app-sidebar-secondary-minimize-box-shadow-dark: null !default;
+$app-sidebar-secondary-minimize-box-shadow-mobile: null !default;
+$app-sidebar-secondary-minimize-box-shadow-mobile-dark: null !default;
+$app-sidebar-secondary-minimize-hover-box-shadow: null !default;
+$app-sidebar-secondary-minimize-hover-box-shadow-dark: null !default;
+$app-sidebar-secondary-minimize-hover-box-shadow-mobile: null !default;
+$app-sidebar-secondary-minimize-hover-box-shadow-mobile-dark: null !default;
+$app-sidebar-secondary-minimize-border-start: null !default;
+$app-sidebar-secondary-minimize-border-start-dark: null !default;
+$app-sidebar-secondary-minimize-border-start-mobile: null !default;
+$app-sidebar-secondary-minimize-border-start-mobile-dark: null !default;
+$app-sidebar-secondary-minimize-border-end: null !default;
+$app-sidebar-secondary-minimize-border-end-dark: null !default;
+$app-sidebar-secondary-minimize-border-end-mobile: null !default;
+$app-sidebar-secondary-minimize-border-end-mobile-dark: null !default;
+$app-sidebar-secondary-minimize-gap-start: 0px !default;
+$app-sidebar-secondary-minimize-gap-start-mobile: 0px !default;
+$app-sidebar-secondary-minimize-gap-end: 0px !default;
+$app-sidebar-secondary-minimize-gap-end-mobile: 0px !default;
+$app-sidebar-secondary-minimize-gap-top: 0px !default;
+$app-sidebar-secondary-minimize-gap-top-mobile: 0px !default;
+$app-sidebar-secondary-minimize-gap-bottom: 0px !default;
+$app-sidebar-secondary-minimize-gap-bottom-mobile: 0px !default;
+
+// Sidebar panel base
+$app-sidebar-panel-base-transition: none !default;
+$app-sidebar-panel-base-width: 300px !default;
+$app-sidebar-panel-base-width-mobile: 300px !default;
+$app-sidebar-panel-base-z-index: null !default;
+$app-sidebar-panel-base-z-index-mobile: null !default;
+$app-sidebar-panel-base-bg-color: null !default;
+$app-sidebar-panel-base-bg-color-dark: null !default;
+$app-sidebar-panel-base-bg-color-mobile: null !default;
+$app-sidebar-panel-base-bg-color-mobile-dark: null !default;
+$app-sidebar-panel-base-box-shadow: null !default;
+$app-sidebar-panel-base-box-shadow-dark: null !default;
+$app-sidebar-panel-base-box-shadow-mobile: null !default;
+$app-sidebar-panel-base-box-shadow-mobile-dark: null !default;
+$app-sidebar-panel-base-border-start: null !default;
+$app-sidebar-panel-base-border-start-dark: null !default;
+$app-sidebar-panel-base-border-start-mobile: null !default;
+$app-sidebar-panel-base-border-start-mobile-dark: null !default;
+$app-sidebar-panel-base-border-end: null !default;
+$app-sidebar-panel-base-border-end-dark: null !default;
+$app-sidebar-panel-base-border-end-mobile: null !default;
+$app-sidebar-panel-base-border-end-mobile-dark: null !default;
+$app-sidebar-panel-base-gap-start: 0px !default;
+$app-sidebar-panel-base-gap-start-mobile: 0px !default;
+$app-sidebar-panel-base-gap-end: 0px !default;
+$app-sidebar-panel-base-gap-end-mobile: 0px !default;
+$app-sidebar-panel-base-gap-top: 0px !default;
+$app-sidebar-panel-base-gap-top-mobile: 0px !default;
+$app-sidebar-panel-base-gap-bottom: 0px !default;
+$app-sidebar-panel-base-gap-bottom-mobile: 0px !default;
+
+// Sidebar panel fixed
+$app-sidebar-panel-fixed-z-index: 104 !default;
+$app-sidebar-panel-fixed-z-index-mobile: 105 !default;
+
+// Sidebar panel sticky
+$app-sidebar-panel-sticky-top: auto !default;
+$app-sidebar-panel-sticky-bottom: auto !default;
+$app-sidebar-panel-sticky-width: 300px !default;
+$app-sidebar-panel-sticky-z-index: 104 !default;
+$app-sidebar-panel-sticky-bg-color: null !default;
+$app-sidebar-panel-sticky-bg-color-dark: null !default;
+$app-sidebar-panel-sticky-box-shadow: null !default;
+$app-sidebar-panel-sticky-box-shadow-dark: null !default;
+$app-sidebar-panel-sticky-border-start: null !default;
+$app-sidebar-panel-sticky-border-start-dark: null !default;
+$app-sidebar-panel-sticky-border-end: null !default;
+$app-sidebar-panel-sticky-border-end-dark: null !default;
+$app-sidebar-panel-sticky-gap-start: 0px !default;
+$app-sidebar-panel-sticky-gap-start-mobile: 0px !default;
+$app-sidebar-panel-sticky-gap-end: 0px !default;
+$app-sidebar-panel-sticky-gap-end-mobile: 0px !default;
+$app-sidebar-panel-sticky-gap-top: 0px !default;
+$app-sidebar-panel-sticky-gap-top-mobile: 0px !default;
+$app-sidebar-panel-sticky-gap-bottom: 0px !default;
+$app-sidebar-panel-sticky-gap-bottom-mobile: 0px !default;
+
+// Sidebar panel minimize
+$app-sidebar-panel-minimize-width: 75px !default;
+$app-sidebar-panel-minimize-width-mobile: 75px !default;
+$app-sidebar-panel-minimize-bg-color: null !default;
+$app-sidebar-panel-minimize-bg-color-dark: null !default;
+$app-sidebar-panel-minimize-bg-color-mobile: null !default;
+$app-sidebar-panel-minimize-bg-color-mobile-dark: null !default;
+$app-sidebar-panel-minimize-box-shadow: null !default;
+$app-sidebar-panel-minimize-box-shadow-dark: null !default;
+$app-sidebar-panel-minimize-box-shadow-mobile: null !default;
+$app-sidebar-panel-minimize-box-shadow-mobile-dark: null !default;
+$app-sidebar-panel-minimize-hover-box-shadow: null !default;
+$app-sidebar-panel-minimize-hover-box-shadow-dark: null !default;
+$app-sidebar-panel-minimize-hover-box-shadow-mobile: null !default;
+$app-sidebar-panel-minimize-hover-box-shadow-mobile-dark: null !default;
+$app-sidebar-panel-minimize-border-start: null !default;
+$app-sidebar-panel-minimize-border-start-dark: null !default;
+$app-sidebar-panel-minimize-border-start-mobile: null !default;
+$app-sidebar-panel-minimize-border-start-mobile-dark: null !default;
+$app-sidebar-panel-minimize-border-end: null !default;
+$app-sidebar-panel-minimize-border-end-dark: null !default;
+$app-sidebar-panel-minimize-border-end-mobile: null !default;
+$app-sidebar-panel-minimize-border-end-mobile-dark: null !default;
+$app-sidebar-panel-minimize-gap-start: 0px !default;
+$app-sidebar-panel-minimize-gap-start-mobile: 0px !default;
+$app-sidebar-panel-minimize-gap-end: 0px !default;
+$app-sidebar-panel-minimize-gap-end-mobile: 0px !default;
+$app-sidebar-panel-minimize-gap-top: 0px !default;
+$app-sidebar-panel-minimize-gap-top-mobile: 0px !default;
+$app-sidebar-panel-minimize-gap-bottom: 0px !default;
+$app-sidebar-panel-minimize-gap-bottom-mobile: 0px !default;
+
+// Aside base
+$app-aside-base-transition: none;
+$app-aside-base-width: 300px !default;
+$app-aside-base-width-mobile: 275px !default;
+$app-aside-base-z-index: null !default;
+$app-aside-base-z-index-mobile: 106 !default;
+$app-aside-base-bg-color: null !default;
+$app-aside-base-bg-color-dark: null !default;
+$app-aside-base-bg-color-mobile: null !default;
+$app-aside-base-bg-color-mobile-dark: null !default;
+$app-aside-base-box-shadow: null !default;
+$app-aside-base-box-shadow-dark: null !default;
+$app-aside-base-box-shadow-mobile: null !default;
+$app-aside-base-box-shadow-mobile-dark: null !default;
+$app-aside-base-border-start: null !default;
+$app-aside-base-border-start-dark: null !default;
+$app-aside-base-border-start-mobile: null !default;
+$app-aside-base-border-start-mobile-dark: null !default;
+$app-aside-base-border-end: null !default;
+$app-aside-base-border-end-dark: null !default;
+$app-aside-base-border-end-mobile: null !default;
+$app-aside-base-border-end-mobile-dark: null !default;
+$app-aside-base-gap-start: 0px !default;
+$app-aside-base-gap-start-mobile: 0px !default;
+$app-aside-base-gap-end: 0px !default;
+$app-aside-base-gap-end-mobile: 0px !default;
+$app-aside-base-gap-top: 0px !default;
+$app-aside-base-gap-top-mobile: 0px !default;
+$app-aside-base-gap-bottom: 0px !default;
+$app-aside-base-gap-bottom-mobile: 0px !default;
+
+// Aside fixed
+$app-aside-fixed-z-index: 105 !default;
+$app-aside-fixed-right: 0 !default;
+$app-aside-fixed-top: 0 !default;
+$app-aside-fixed-bottom: 0 !default;
+
+// Aside sticky
+$app-aside-sticky-top: auto !default;
+$app-aside-sticky-bottom: auto !default;
+$app-aside-sticky-left: auto !default;
+$app-aside-sticky-width: 300px !default;
+$app-aside-sticky-z-index: 105 !default;
+$app-aside-sticky-bg-color: null !default;
+$app-aside-sticky-bg-color-dark: null !default;
+$app-aside-sticky-box-shadow: null !default;
+$app-aside-sticky-box-shadow-dark: null !default;
+$app-aside-sticky-border-start: null !default;
+$app-aside-sticky-border-start-dark: null !default;
+$app-aside-sticky-border-end: null !default;
+$app-aside-sticky-border-end-dark: null !default;
+$app-aside-sticky-gap-start: 0px !default;
+$app-aside-sticky-gap-end: 0px !default;
+$app-aside-sticky-gap-top: 0px !default;
+$app-aside-sticky-gap-bottom: 0px !default;
+
+// Aside minimize
+$app-aside-minimize-width: 75px !default;
+$app-aside-minimize-width-mobile: 75px !default;
+$app-aside-minimize-bg-color: null !default;
+$app-aside-minimize-bg-color-dark: null !default;
+$app-aside-minimize-bg-color-mobile: null !default;
+$app-aside-minimize-bg-color-mobile-dark: null !default;
+$app-aside-minimize-box-shadow: null !default;
+$app-aside-minimize-box-shadow-dark: null !default;
+$app-aside-minimize-box-shadow-mobile: null !default;
+$app-aside-minimize-box-shadow-mobile-dark: null !default;
+$app-aside-minimize-hover-box-shadow: null !default;
+$app-aside-minimize-hover-box-shadow-dark: null !default;
+$app-aside-minimize-hover-box-shadow-mobile: null !default;
+$app-aside-minimize-hover-box-shadow-mobile-dark: null !default;
+$app-aside-minimize-border-start: null !default;
+$app-aside-minimize-border-start-dark: null !default;
+$app-aside-minimize-border-start-mobile: null !default;
+$app-aside-minimize-border-start-mobile-dark: null !default;
+$app-aside-minimize-border-end: null !default;
+$app-aside-minimize-border-end-dark: null !default;
+$app-aside-minimize-border-end-mobile: null !default;
+$app-aside-minimize-border-end-mobile-dark: null !default;
+$app-aside-minimize-gap-start: 0px !default;
+$app-aside-minimize-gap-start-mobile: 0px !default;
+$app-aside-minimize-gap-end: 0px !default;
+$app-aside-minimize-gap-end-mobile: 0px !default;
+$app-aside-minimize-gap-top: 0px !default;
+$app-aside-minimize-gap-top-mobile: 0px !default;
+$app-aside-minimize-gap-bottom: 0px !default;
+$app-aside-minimize-gap-bottom-mobile: 0px !default;
+
+// Footer
+$app-footer-transition: left $app-general-transition-duration $app-general-transition-timing, right $app-general-transition-duration $app-general-transition-timing;
+$app-footer-height: 70px !default;
+$app-footer-height-mobile: 70px !default;
+$app-footer-z-index: null !default;
+$app-footer-z-index-mobile: null !default;
+$app-footer-bg-color: null !default;
+$app-footer-bg-color-dark: null !default;
+$app-footer-bg-color-mobile: null !default;
+$app-footer-bg-color-mobile-dark: null !default;
+$app-footer-box-shadow: null !default;
+$app-footer-box-shadow-dark: null !default;
+$app-footer-box-shadow-mobile: null !default;
+$app-footer-box-shadow-mobile-dark: null !default;
+$app-footer-border-top: null !default;
+$app-footer-border-top-dark: null !default;
+$app-footer-border-top-mobile: null !default;
+$app-footer-border-top-mobile-dark: null !default;
+
+// Footer fixed
+$app-footer-fixed-z-index: 100 !default;
+$app-footer-fixed-z-index-mobile: 100 !default;
+
+// Layout Builder
+$app-layout-builder-toggle-z-index: 105 !default;
+$app-layout-builder-toggle-bottom: 40px !default;
+$app-layout-builder-toggle-bottom-mobile: 15px !default;
+$app-layout-builder-toggle-end: 40px !default;
+$app-layout-builder-toggle-end-mobile: 15px !default;
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/_wrapper.scss b/src/_res/assets/sass/core/layout/base/_wrapper.scss
new file mode 100644
index 0000000..a8734b1
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/_wrapper.scss
@@ -0,0 +1,100 @@
+//
+// Wrapper
+//
+
+// General mode
+.app-wrapper {
+ display: flex;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Integration
+ .app-wrapper {
+ transition: $app-wrapper-transition;
+
+ // Header
+ [data-kt-app-header-sticky="on"] & {
+ margin-top: var(--kt-app-header-height-actual);
+ }
+
+ [data-kt-app-header-fixed="true"] & {
+ margin-top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-toolbar-sticky="on"] & {
+ margin-top: var(--kt-app-toolbar-height);
+ }
+
+ [data-kt-app-header-fixed="true"][data-kt-app-toolbar-sticky="on"] & {
+ margin-top: calc(var(--kt-app-header-height-actual) + var(--kt-app-toolbar-height-actual));
+ }
+
+ [data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"] & {
+ margin-top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height));
+ }
+
+ // Sidebar
+ [data-kt-app-sidebar-fixed="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-sidebar-panel-fixed="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ // Aside
+ [data-kt-app-aside-fixed="true"] & {
+ margin-right: calc(
+ var(--kt-app-aside-width) +
+ var(--kt-app-aside-gap-start, 0px) +
+ var(--kt-app-aside-gap-end, 0px)
+ );
+ }
+
+ // Footer
+ [data-kt-app-footer-fixed="true"] & {
+ margin-bottom: var(--kt-app-footer-height);
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Integration
+ .app-wrapper {
+ transition: $app-wrapper-transition;
+
+ // Header
+ [data-kt-app-header-sticky="on"] & {
+ margin-top: var(--kt-app-header-height-actual);
+ }
+
+ [data-kt-app-header-fixed-mobile="true"] & {
+ margin-top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-header-fixed-mobile="true"][data-kt-app-toolbar-sticky="on"] & {
+ margin-top: calc(var(--kt-app-header-height-actual) + var(--kt-app-toolbar-height-actual));
+ }
+
+ // Footer
+ [data-kt-app-footer-fixed-mobile="true"] & {
+ margin-bottom: var(--kt-app-footer-height);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/aside/_aside.scss b/src/_res/assets/sass/core/layout/base/aside/_aside.scss
new file mode 100644
index 0000000..71f38c3
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/aside/_aside.scss
@@ -0,0 +1,294 @@
+//
+// Aside
+//
+
+// General mode
+.app-aside {
+ transition: $app-aside-base-transition;
+}
+
+// Utilities
+.app-aside-minimize-d-flex,
+.app-aside-sticky-d-flex,
+.app-aside-collapse-d-flex,
+.app-aside-minimize-mobile-d-flex,
+.app-aside-collapse-mobile-d-flex {
+ display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-aside {
+ display: flex;
+ flex-shrink: 0;
+ width: var(--kt-app-aside-width);
+ background-color: var(--kt-app-aside-base-bg-color);
+ box-shadow: var(--kt-app-aside-base-box-shadow);
+ border-left: var(--kt-app-aside-base-border-left);
+ border-right: var(--kt-app-aside-base-border-right);
+
+ @include property( margin-left, $app-aside-base-gap-start);
+ @include property( margin-right, $app-aside-base-gap-end);
+ @include property( margin-top, $app-aside-base-gap-top);
+ @include property( margin-bottom, $app-aside-base-gap-bottom);
+ @include property( z-index, $app-aside-base-z-index);
+ }
+
+ // Vars
+ :root {
+ --kt-app-aside-width: #{$app-aside-base-width};
+ --kt-app-aside-width-actual: #{$app-aside-base-width};
+
+ --kt-app-aside-gap-start: #{$app-aside-base-gap-start};
+ --kt-app-aside-gap-end: #{$app-aside-base-gap-end};
+ --kt-app-aside-gap-top: #{$app-aside-base-gap-top};
+ --kt-app-aside-gap-bottom: #{$app-aside-base-gap-bottom};
+ }
+
+ [data-kt-app-aside-stacked="true"] {
+ --kt-app-aside-width: calc(var(--kt-app-aside-primary-width) + var(--kt-app-aside-secondary-width));
+ }
+
+ [data-kt-app-aside-minimize="on"] {
+ --kt-app-aside-width: #{$app-aside-minimize-width};
+
+ --kt-app-aside-gap-start: #{$app-aside-minimize-gap-start};
+ --kt-app-aside-gap-end: #{$app-aside-minimize-gap-end};
+ --kt-app-aside-gap-top: #{$app-aside-minimize-gap-top};
+ --kt-app-aside-gap-bottom: #{$app-aside-minimize-gap-bottom};
+ }
+
+ [data-kt-app-aside-sticky="on"] {
+ --kt-app-aside-width: #{$app-aside-sticky-width};
+
+ --kt-app-aside-gap-start: #{$app-aside-sticky-gap-start};
+ --kt-app-aside-gap-end: #{$app-aside-sticky-gap-end};
+ --kt-app-aside-gap-top: #{$app-aside-sticky-gap-top};
+ --kt-app-aside-gap-bottom: #{$app-aside-sticky-gap-bottom};
+ }
+
+ [data-kt-app-aside-collapse="on"] {
+ --kt-app-aside-width: 0px;
+ }
+
+ // States
+ .app-aside {
+ [data-kt-app-aside-static="true"] & {
+ position: relative;
+ }
+
+ [data-kt-app-aside-offcanvas="true"] & {
+ display: none;
+ }
+
+ [data-kt-app-aside-fixed="true"] & {
+ position: fixed;
+ @include property( z-index, $app-aside-fixed-z-index);
+ @include property( top, $app-aside-fixed-top);
+ @include property( bottom, $app-aside-fixed-bottom);
+ @include property( right, $app-aside-fixed-right);
+ }
+
+ [data-kt-app-aside-stacked="true"] & {
+ align-items: stretch;
+ }
+
+ [data-kt-app-aside-sticky="on"] & {
+ position: fixed;
+ transition: $app-aside-base-transition;
+
+ box-shadow: var(--kt-app-aside-sticky-box-shadow);
+ border-left: var(--kt-aside-sticky-border-start);
+ border-right: var(--kt-app-aside-sticky-border-end);
+
+ @include property( top, $app-aside-sticky-top);
+ @include property( bottom, $app-aside-sticky-bottom);
+ @include property( left, $app-aside-sticky-left);
+ @include property( z-index, $app-aside-sticky-z-index);
+ @include property( margin-left, $app-aside-sticky-gap-start);
+ @include property( margin-right, $app-aside-sticky-gap-end);
+ @include property( margin-top, $app-aside-sticky-gap-top);
+ @include property( margin-bottom, $app-aside-sticky-gap-bottom);
+ }
+
+ [data-kt-app-aside-minimize="on"] & {
+ transition: $app-aside-base-transition;
+
+ background-color: var(--kt-app-aside-minimize-bg-color);
+ box-shadow: var(--kt-app-aside-minimize-box-shadow);
+ border-start: var(--kt-app-aside-minimize-border-start);
+ border-end: var(--kt-app-aside-minimize-border-end);
+
+ @include property( margin-left, $app-aside-minimize-gap-start);
+ @include property( margin-right, $app-aside-minimize-gap-end);
+ @include property( margin-top, $app-aside-minimize-gap-top);
+ @include property( margin-bottom, $app-aside-minimize-gap-bottom);
+ }
+
+ [data-kt-app-aside-hoverable="true"] & {
+ .app-aside-wrapper {
+ width: var(--kt-app-aside-width-actual);
+ }
+ }
+
+ [data-kt-app-aside-hoverable="true"][data-kt-app-aside-minimize="on"] &:hover:not(.animating) {
+ transition: $app-aside-base-transition;
+ width: var(--kt-app-aside-width-actual);
+ box-shadow: var(--kt-app-aside-minimize-hover-box-shadow);
+ }
+
+ [data-kt-app-aside-collapse="on"] & {
+ transition: $app-aside-base-transition;
+ width: var(--kt-app-aside-width-actual);
+ margin-right: calc( -1 * var(--kt-app-aside-width-actual));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-aside-minimize="on"] {
+ .app-aside-minimize-d-none {
+ display: none !important;
+ }
+
+ .app-aside-minimize-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-aside-sticky="on"] {
+ .app-aside-sticky-d-none {
+ display: none !important;
+ }
+
+ .app-aside-sticky-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-aside-collapse="on"] {
+ .app-aside-collapse-d-none {
+ display: none !important;
+ }
+
+ .app-aside-collapse-d-flex {
+ display: flex !important;
+ }
+ }
+
+ // Integration
+ .app-aside {
+ // Header
+ [data-kt-app-aside-fixed="true"][data-kt-app-header-fixed="true"]:not([data-kt-app-aside-push-header="true"]) & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-aside-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"]:not([data-kt-app-aside-push-toolbar="true"]) & {
+ top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height, 0px));
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-aside {
+ display: none;
+ width: var(--kt-app-aside-width);
+ @include property( z-index, $app-aside-base-z-index-mobile);
+
+ background-color: var(--kt-app-aside-base-bg-color-mobile);
+ box-shadow: var(--kt-app-aside-base-box-shadow-mobile);
+ border-left: var(--kt-app-aside-base-border-start-mobile);
+ order-right: var(--kt-app-aside-base-border-end-mobile);
+
+ @include property( margin-left, $app-aside-base-gap-start-mobile);
+ @include property( margin-right, $app-aside-base-gap-end-mobile);
+ @include property( margin-top, $app-aside-base-gap-top-mobile);
+ @include property( margin-bottom, $app-aside-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-aside-width: #{$app-aside-base-width-mobile};
+ --kt-app-aside-width-actual: #{$app-aside-base-width-mobile};
+
+ --kt-app-aside-gap-start: #{$app-aside-base-gap-start-mobile};
+ --kt-app-aside-gap-end: #{$app-aside-base-gap-end-mobile};
+ --kt-app-aside-gap-top: #{$app-aside-base-gap-top-mobile};
+ --kt-app-aside-gap-bottom: #{$app-aside-base-gap-bottom-mobile};
+ }
+
+ [data-kt-app-aside-minimize-mobile="on"] {
+ --kt-app-aside-width: #{$app-aside-minimize-width-mobile};
+
+ --kt-app-aside-gap-start: #{$app-aside-minimize-gap-start-mobile};
+ --kt-app-aside-gap-end: #{$app-aside-minimize-gap-end-mobile};
+ --kt-app-aside-gap-top: #{$app-aside-minimize-gap-top-mobile};
+ --kt-app-aside-gap-bottom: #{$app-aside-minimize-gap-bottom-mobile};
+ }
+
+ [data-kt-app-aside-collapse-mobile="on"] {
+ --kt-app-aside-width: 0px;
+ }
+
+ // States
+ .app-aside {
+ [data-kt-app-aside-stacked="true"] & {
+ align-items: stretch;
+ }
+
+ [data-kt-app-aside-minimize-mobile="on"] & {
+ transition: $app-aside-base-transition;
+ background-color: var(--kt-app-aside-minimize-bg-color-mobile);
+ box-shadow: var(--kt-app-aside-minimize-box-shadow-mobile);
+ border-left: var(--kt-app-aside-minimize-border-start-mobile);
+ border-right: var(--kt-app-aside-minimize-border-end-mobile);
+
+ @include property( margin-left, $app-aside-minimize-gap-start-mobile);
+ @include property( margin-right, $app-aside-minimize-gap-end-mobile);
+ @include property( margin-top, $app-aside-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-aside-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-aside-hoverable-mobile="true"] & {
+ .app-aside-wrapper {
+ width: var(--kt-app-aside-width-actual);
+ }
+ }
+
+ [data-kt-app-aside-hoverable-mobile="true"][data-kt-app-aside-minimize-mobile="on"] &:hover:not(.animating) {
+ transition: $app-aside-base-transition;
+ width: var(--kt-app-aside-width-actual);
+ box-shadow: var(--kt-app-aside-minimize-hover-box-shadow-mobile);
+ }
+
+ [data-kt-app-aside-collapse-mobile="on"] & {
+ transition: $app-aside-base-transition;
+ width: var(--kt-app-aside-width-actual);
+ margin-right: calc( -1 * var(--kt-app-aside-width-actual));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-aside-minimize-mobile="on"] {
+ .app-aside-minimize-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-aside-minimize-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-aside-collapse-mobile="on"] {
+ .app-aside-collapse-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-aside-collapse-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/header/_header-primary.scss b/src/_res/assets/sass/core/layout/base/header/_header-primary.scss
new file mode 100644
index 0000000..4456c2a
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/header/_header-primary.scss
@@ -0,0 +1,120 @@
+//
+// Header primary
+//
+
+// General mode
+.app-header-primary {
+ transition: $app-header-primary-base-transition;
+ display: flex;
+ align-items: stretch;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-header-primary {
+ @include property( z-index, $app-header-primary-base-z-index);
+
+ background-color: var(--kt-app-header-primary-base-bg-color);
+ box-shadow: var(--kt-app-header-primary-base-box-shadow);
+ border-bottom: var(--kt-app-header-primary-base-border-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-header-primary-height: #{$app-header-primary-base-height};
+ }
+
+ [data-kt-app-header-sticky="on"] {
+ --kt-app-header-primary-height: #{$app-header-primary-sticky-height};
+ }
+
+ [data-kt-app-header-minimize="on"] {
+ --kt-app-header-primary-height: #{$app-header-primary-minimize-height};
+ }
+
+ [data-kt-app-header-sticky="on"][data-kt-app-header-primary-sticky-hide="true"] {
+ --kt-app-header-primary-height: 0;
+ }
+
+ // States
+ .app-header-primary {
+ height: var(--kt-app-header-primary-height);
+
+ [data-kt-app-header-primary-fixed="true"] & {
+ @include property( z-index, $app-header-primary-fixed-z-index);
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ [data-kt-app-header-primary-static="true"] & {
+ position: relative;
+ }
+
+ [data-kt-app-header-primary-sticky="on"] & {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ @include property( height, $app-header-primary-sticky-height);
+ @include property( z-index, $app-header-primary-sticky-z-index);
+
+ background-color: var(--kt-app-header-primary-sticky-bg-color);
+ box-shadow: var(--kt-app-header-primary-sticky-box-shadow);
+ border-bottom: var(--kt-app-header-primary-sticky-border-bottom);
+ }
+
+ [data-kt-app-header-primary-minimize="on"] & {
+ transition: $app-header-primary-base-transition;
+ @include property( height, $app-header-primary-minimize-height);
+ @include property( z-index, $app-header-primary-minimize-z-index);
+
+ background-color: var(--kt-app-header-primary-minimize-bg-color);
+ box-shadow: var(--kt-app-header-primary-minimize-box-shadow);
+ border-bottom: var(--kt-app-header-primary-minimize-border-bottom);
+ }
+
+ [data-kt-app-header-sticky="on"][data-kt-app-header-primary-sticky-hide="true"] & {
+ display: none !important;
+ }
+ }
+
+ // Integration
+ .app-header-primary {
+ // Sidebar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-header-primary {
+ flex-grow: 1;
+ @include property( z-index, $app-header-primary-base-z-index-mobile);
+
+ background-color: var(--kt-app-header-primary-base-bg-color-mobile);
+ box-shadow: var(--kt-app-header-primary-base-box-shadow-mobile);
+ border-bottom: var(--kt-app-header-primary-base-border-bottom-mobile);
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/header/_header-secondary.scss b/src/_res/assets/sass/core/layout/base/header/_header-secondary.scss
new file mode 100644
index 0000000..8549f76
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/header/_header-secondary.scss
@@ -0,0 +1,120 @@
+//
+// Header secondary
+//
+
+// General mode
+.app-header-secondary {
+ transition: $app-header-secondary-base-transition;
+ display: flex;
+ align-items: stretch;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-header-secondary {
+ @include property( z-index, $app-header-secondary-base-z-index);
+
+ background-color: var(--kt-app-header-secondary-base-bg-color);
+ box-shadow: var(--kt-app-header-secondary-base-box-shadow);
+ border-bottom: var(--kt-app-header-secondary-base-border-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-header-secondary-height: #{$app-header-secondary-base-height};
+ }
+
+ [data-kt-app-header-sticky="on"] {
+ --kt-app-header-secondary-height: #{$app-header-secondary-sticky-height};
+ }
+
+ [data-kt-app-header-minimize="on"] {
+ --kt-app-header-secondary-height: #{$app-header-secondary-minimize-height};
+ }
+
+ [data-kt-app-header-sticky="on"][data-kt-app-header-secondary-sticky-hide="true"] {
+ --kt-app-header-secondary-height: 0;
+ }
+
+ // States
+ .app-header-secondary {
+ height: var(--kt-app-header-secondary-height);
+
+ [data-kt-app-header-secondary-fixed="true"] & {
+ @include property( z-index, $app-header-secondary-fixed-z-index);
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ [data-kt-app-header-secondary-static="true"] & {
+ position: static;
+ }
+
+ [data-kt-app-header-secondary-sticky="on"] & {
+ transition: $app-header-secondary-base-transition;
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ @include property( height, $app-header-secondary-sticky-height);
+ @include property( z-index, $app-header-secondary-sticky-z-index);
+
+ background-color: var(--kt-app-header-secondary-sticky-bg-color);
+ box-shadow: var(--kt-app-header-secondary-sticky-box-shadow);
+ border-bottom: var(--kt-app-header-secondary-sticky-border-bottom);
+ }
+
+ [data-kt-app-header-secondary-minimize="on"] & {
+ transition: $app-header-secondary-base-transition;
+ @include property( height, $app-header-secondary-minimize-height);
+ @include property( z-index, $app-header-secondary-minimize-z-index);
+
+ background-color: var(--kt-app-header-secondary-minimize-bg-color);
+ box-shadow: var(--kt-app-header-secondary-minimize-box-shadow);
+ border-bottom: var(--kt-app-header-secondary-minimize-border-bottom);
+ }
+
+ [data-kt-app-header-sticky="on"][data-kt-app-header-secondary-sticky-hide="true"] & {
+ display: none !important;
+ }
+ }
+
+ // Integration
+ .app-header-secondary {
+ // Sidebar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-header-secondary {
+ flex-grow: 1;
+ background-color: var(--kt-app-header-secondary-base-bg-color-mobile);
+ box-shadow: var(--kt-app-header-secondary-base-box-shadow-mobile);
+ border-left: var(--kt-app-header-secondary-base-border-start-mobile);
+ border-right: var(--kt-app-header-secondary-base-border-end-mobile);
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/header/_header.scss b/src/_res/assets/sass/core/layout/base/header/_header.scss
new file mode 100644
index 0000000..5283b2c
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/header/_header.scss
@@ -0,0 +1,228 @@
+//
+// sidebar
+//
+
+// General mode
+.app-header {
+ transition: $app-header-base-transition;
+ display: flex;
+ align-items: stretch;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-header {
+ @include property( z-index, $app-header-base-z-index);
+
+ background-color: var(--kt-app-header-base-bg-color);
+ box-shadow: var(--kt-app-header-base-box-shadow);
+ border-bottom: var(--kt-app-header-base-border-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-header-height: #{$app-header-base-height};
+ --kt-app-header-height-actual: #{$app-header-base-height};
+ }
+
+ [data-kt-app-header-sticky="on"] {
+ --kt-app-header-height: #{$app-header-sticky-height};
+ --kt-app-header-height-actual: #{$app-header-base-height};
+ }
+
+ [data-kt-app-header-sticky="on"][data-kt-app-header-stacked="true"] {
+ --kt-app-header-height: calc(var(--kt-app-header-primary-height, 0px) + var(--kt-app-header-secondary-height, 0px));
+ --kt-app-header-height-actual: calc(#{$app-header-primary-base-height} + #{$app-header-secondary-base-height});
+ }
+
+ [data-kt-app-header-minimize="on"] {
+ --kt-app-header-height: #{$app-header-minimize-height};
+ }
+
+ // States
+ .app-header {
+ height: var(--kt-app-header-height);
+
+ [data-kt-app-header-fixed="true"] & {
+ @include property( z-index, $app-header-fixed-z-index);
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ [data-kt-app-header-static="true"] & {
+ position: relative;
+ }
+
+ [data-kt-app-header-stacked="true"] & {
+ flex-direction: column;
+ height: calc(var(--kt-app-header-primary-height) + var(--kt-app-header-secondary-height, 0px));
+ }
+
+ [data-kt-app-header-sticky="on"] & {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ @include property( z-index, $app-header-sticky-z-index);
+ @include property( backdrop-filter, $app-header-sticky-backdrop-filter);
+
+ background-color: var(--kt-app-header-sticky-bg-color);
+ box-shadow: var(--kt-app-header-sticky-box-shadow);
+ border-bottom: var(--kt-app-header-sticky-border-bottom);
+ }
+
+ [data-kt-app-header-minimize="on"] & {
+ transition: $app-header-base-transition;
+ @include property( z-index, $app-header-minimize-z-index);
+ @include property( backdrop-filter, $app-header-minimize-backdrop-filter);
+
+ background-color: var(--kt-app-header-minimize-bg-color);
+ box-shadow: var(--kt-app-header-minimize-box-shadow);
+ border-bottom: var(--kt-app-header-minimize-border-bottom);
+ }
+
+ .app-header-mobile-drawer {
+ display: flex;
+ }
+ }
+
+ // Integration
+ .app-header {
+ // Sidebar
+ [data-kt-app-header-fixed="true"][data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] &,
+ [data-kt-app-header-fixed="true"][data-kt-app-sidebar-sticky="on"][data-kt-app-sidebar-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ body:not([data-kt-app-header-fixed="true"])[data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] &,
+ body:not([data-kt-app-header-fixed="true"])[data-kt-app-sidebar-sticky="on"][data-kt-app-sidebar-push-header="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px)
+ );
+ }
+
+ // Sidebar Panel
+ [data-kt-app-header-fixed="true"][data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-header="true"] &,
+ [data-kt-app-header-fixed="true"][data-kt-app-sidebar-panel-sticky="on"][data-kt-app-sidebar-panel-push-header="true"] & {
+ left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ body:not([data-kt-app-header-fixed="true"])[data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-header="true"] &,
+ body:not([data-kt-app-header-fixed="true"])[data-kt-app-sidebar-panel-sticky="on"][data-kt-app-sidebar-panel-push-header="true"] & {
+ margin-left: calc(
+ var(--kt-app-sidebar-width) +
+ var(--kt-app-sidebar-gap-start, 0px) +
+ var(--kt-app-sidebar-gap-end, 0px) +
+ var(--kt-app-sidebar-panel-width) +
+ var(--kt-app-sidebar-panel-gap-start, 0px) +
+ var(--kt-app-sidebar-panel-gap-end, 0px)
+ );
+ }
+
+ // Toolbar
+ [data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"] & {
+ box-shadow: none;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-header {
+ @include property( z-index, $app-header-base-z-index-mobile);
+
+ background-color: var(--kt-app-header-base-bg-color-mobile);
+ box-shadow: var(--kt-app-header-base-box-shadow-mobile);
+ border-bottom: var(--kt-app-header-base-border-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-header-height: #{$app-header-base-height-mobile};
+ }
+
+ [data-kt-app-header-sticky="on"] {
+ --kt-app-header-height: #{$app-header-sticky-height-mobile};
+ --kt-app-header-height-actual: #{$app-header-sticky-height-mobile};
+ }
+
+ [data-kt-app-header-minimize="on"] {
+ --kt-app-header-height: #{$app-header-minimize-height-mobile};
+ --kt-app-header-height-actual: #{$app-header-minimize-height-mobile};
+ }
+
+ // States
+ .app-header {
+ height: var(--kt-app-header-height);
+ align-items: stretch;
+
+ .app-header-mobile-drawer {
+ display: none;
+ }
+
+ [data-kt-app-header-stacked="true"] & {
+ flex-direction: column;
+ }
+
+ [data-kt-app-header-fixed-mobile="true"] & {
+ @include property( z-index, $app-header-fixed-z-index-mobile);
+ transition: $app-header-base-transition;
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ [data-kt-app-header-sticky="on"] & {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ @include property( z-index, $app-header-sticky-z-index-mobile);
+ @include property( backdrop-filter, $app-header-sticky-backdrop-filter-mobile);
+
+ background-color: var(--kt-app-header-sticky-bg-color-mobile);
+ box-shadow: var(--kt-app-header-sticky-box-shadow-mobile);
+ border-bottom: var(--kt-app-header-sticky-border-bottom-mobile);
+ }
+
+ [data-kt-app-header-minimize="on"] & {
+ @include property( z-index, $app-header-minimize-z-index-mobile);
+ @include property( backdrop-filter, $app-header-minimize-backdrop-filter-mobile);
+
+ transition: $app-header-base-transition;
+ background-color: var(--kt-app-header-minimize-bg-color-mobile);
+ box-shadow: var(--kt-app-header-minimize-box-shadow-mobile);
+ border-bottom: var(--kt-app-header-minimize-border-bottom-mobile);
+ }
+ }
+
+ // Integration
+ .app-header {
+ // Toolbar
+ [data-kt-app-header-fixed-mobile="true"][data-kt-app-toolbar-fixed-mobile="true"] & {
+ box-shadow: none;
+ }
+
+ [data-kt-app-header-fixed-mobile="true"][data-kt-app-toolbar-sticky="on"] & {
+ box-shadow: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/mixins/_layout-minimize.scss b/src/_res/assets/sass/core/layout/base/mixins/_layout-minimize.scss
new file mode 100644
index 0000000..31b88d0
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/mixins/_layout-minimize.scss
@@ -0,0 +1,41 @@
+//
+// Hoverable
+//
+
+@mixin app-layout-minimize($class) {
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ [data-kt-#{$class}-minimize="on"]:not([data-kt-#{$class}-hoverable="true"]) {
+ .#{$class} {
+ @content;
+ }
+ }
+
+ [data-kt-#{$class}-minimize="on"][data-kt-#{$class}-hoverable="true"] {
+ .#{$class} {
+ &:not(:hover) {
+ @content;
+ }
+ }
+ }
+ }
+}
+
+@mixin app-layout-minimize-mobile($class) {
+ // Tablet & mobile modes
+ @include media-breakpoint-down(lg) {
+ [data-kt-#{$class}-minimize-mobile="on"]:not[data-kt-#{$class}-hoverable-mobile="true"] {
+ .#{$class} {
+ @content;
+ }
+ }
+
+ [data-kt-#{$class}-minimize-mobile="on"][data-kt-#{$class}-hoverable-mobile="true"] {
+ .#{$class} {
+ &:not(:hover) {
+ @content;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/mixins/_layout-transition.scss b/src/_res/assets/sass/core/layout/base/mixins/_layout-transition.scss
new file mode 100644
index 0000000..4e0a84d
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/mixins/_layout-transition.scss
@@ -0,0 +1,7 @@
+//
+// Layout Transition Mixin
+//
+
+@mixin app-layout-transition($properties: all) {
+ transition: $properties $app-general-transition-duration $app-general-transition-timing !important;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/sidebar/_sidebar-panel.scss b/src/_res/assets/sass/core/layout/base/sidebar/_sidebar-panel.scss
new file mode 100644
index 0000000..9f2735b
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/sidebar/_sidebar-panel.scss
@@ -0,0 +1,283 @@
+//
+// sidebar
+//
+
+// General mode
+.app-sidebar-panel {
+ transition: $app-sidebar-panel-base-transition;
+}
+
+// Utilities
+.app-sidebar-panel-minimize-d-flex,
+.app-sidebar-panel-sticky-d-flex,
+.app-sidebar-panel-collapse-d-flex,
+.app-sidebar-panel-minimize-mobile-d-flex,
+.app-sidebar-panel-collapse-mobile-d-flex {
+ display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-sidebar-panel {
+ display: flex;
+ flex-shrink: 0;
+ width: var(--kt-app-sidebar-panel-width);
+ background-color: var(--kt-app-sidebar-panel-base-bg-color);
+ box-shadow: var(--kt-app-sidebar-panel-base-box-shadow);
+ border-left: var(--kt-app-sidebar-panel-base-border-start);
+ border-right: var(--kt-app-sidebar-panel-base-border-end);
+
+ @include property( z-index, $app-sidebar-panel-base-z-index);
+ @include property( margin-left, $app-sidebar-panel-base-gap-start);
+ @include property( margin-right, $app-sidebar-panel-base-gap-end);
+ @include property( margin-top, $app-sidebar-panel-base-gap-top);
+ @include property( margin-bottom, $app-sidebar-panel-base-gap-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-panel-width: #{$app-sidebar-panel-base-width};
+ --kt-app-sidebar-panel-width-actual: #{$app-sidebar-panel-base-width};
+
+ --kt-app-sidebar-panel-gap-start: #{$app-sidebar-panel-base-gap-start};
+ --kt-app-sidebar-panel-gap-end: #{$app-sidebar-panel-base-gap-end};
+ --kt-app-sidebar-panel-gap-top: #{$app-sidebar-panel-base-gap-top};
+ --kt-app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-base-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-panel-minimize="on"] {
+ --kt-app-sidebar-panel-width: #{$app-sidebar-panel-minimize-width};
+
+ --kt-app-sidebar-panel-gap-start: #{$app-sidebar-panel-minimize-gap-start};
+ --kt-app-sidebar-panel-gap-end: #{$app-sidebar-panel-minimize-gap-end};
+ --kt-app-sidebar-panel-gap-top: #{$app-sidebar-panel-minimize-gap-top};
+ --kt-app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-minimize-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-panel-sticky="on"] {
+ --kt-app-sidebar-panel-width: #{$app-sidebar-panel-sticky-width};
+
+ --kt-app-sidebar-panel-gap-start: #{$app-sidebar-panel-sticky-gap-start};
+ --kt-app-sidebar-panel-gap-end: #{$app-sidebar-panel-sticky-gap-end};
+ --kt-app-sidebar-panel-gap-top: #{$app-sidebar-panel-sticky-gap-top};
+ --kt-app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-sticky-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-panel-collapse="on"] {
+ --kt-app-sidebar-panel-width-actual: #{$app-sidebar-panel-base-width};
+ --kt-app-sidebar-panel-width: 0px;
+ }
+
+ // States
+ .app-sidebar-panel {
+ [data-kt-app-sidebar-panel-static="true"] & {
+ position: relative;
+ }
+
+ [data-kt-app-sidebar-panel-offcanvas="true"] & {
+ display: none;
+ }
+
+ [data-kt-app-sidebar-panel-fixed="true"] & {
+ @include property( z-index, $app-sidebar-panel-fixed-z-index);
+ position: fixed;
+ left: calc(var(--kt-app-sidebar-width) + var(--kt-app-sidebar-gap-start, 0px) + var(--kt-app-sidebar-gap-end, 0px));
+ top: 0;
+ bottom: 0;
+ }
+
+ [data-kt-app-sidebar-panel-sticky="on"] & {
+ position: fixed;
+ left: calc(var(--kt-app-sidebar-width) + var(--kt-app-sidebar-gap-start, 0px) + var(--kt-app-sidebar-gap-end, 0px));
+ top: 0;
+ bottom: 0;
+ transition: $app-sidebar-panel-base-transition;
+
+ box-shadow: var(--kt-app-sidebar-panel-sticky-box-shadow);
+ border-left: var(--kt-app-sidebar-panel-sticky-border-start);
+ border-right: var(--kt-app-sidebar-panel-sticky-border-end);
+
+ @include property( z-index, $app-sidebar-panel-sticky-z-index);
+ @include property( margin-left, $app-sidebar-panel-sticky-gap-start);
+ @include property( margin-right, $app-sidebar-panel-sticky-gap-end);
+ @include property( margin-top, $app-sidebar-panel-sticky-gap-top);
+ @include property( margin-bottom, $app-sidebar-panel-sticky-gap-bottom);
+ }
+
+ [data-kt-app-sidebar-panel-minimize="on"] & {
+ transition: $app-sidebar-panel-base-transition;
+ background-color: var(--kt-app-sidebar-panel-minimize-bg-color);
+ box-shadow: var(--kt-app-sidebar-panel-minimize-box-shadow);
+ border-left: var(--kt-app-sidebar-panel-minimize-border-start);
+ border-right: var(--kt-app-sidebar-panel-minimize-border-end);
+
+
+ @include property( margin-left, $app-sidebar-panel-minimize-gap-start);
+ @include property( margin-right, $app-sidebar-panel-minimize-gap-end);
+ @include property( margin-top, $app-sidebar-panel-minimize-gap-top);
+ @include property( margin-bottom, $app-sidebar-panel-minimize-gap-bottom);
+ }
+
+ [data-kt-app-sidebar-panel-hoverable="true"] & {
+ .app-sidebar-panel-hoverable {
+ width: var(--kt-app-sidebar-panel-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-panel-hoverable="true"][data-kt-app-sidebar-panel-minimize="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-panel-base-transition;
+ width: var(--kt-app-sidebar-panel-width-actual);
+ box-shadow: var(--kt-app-sidebar-panel-minimize-hover-box-shadow);
+ }
+
+ [data-kt-app-sidebar-panel-collapse="on"] & {
+ transition: $app-sidebar-panel-base-transition;
+ width: var(--kt-app-sidebar-panel-width-actual);
+ margin-left: calc( -1 * (var(--kt-app-sidebar-panel-width-actual) + var(--kt-app-sidebar-gap-start, 0px) + var(--kt-app-sidebar-gap-end, 0px)));
+ }
+ }
+
+ // Integration
+ .app-sidebar-panel {
+ // Header
+ [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-header-fixed="true"]:not([data-kt-app-sidebar-panel-push-header="true"]) & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"]:not([data-kt-app-sidebar-panel-push-toolbar="true"]) & {
+ top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height, 0));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-panel-minimize="on"] {
+ .app-sidebar-panel-minimize-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-panel-minimize-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-panel-sticky="on"] {
+ .app-sidebar-panel-sticky-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-panel-sticky-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-panel-collapse="on"] {
+ .app-sidebar-panel-collapse-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-panel-collapse-d-flex {
+ display: flex !important;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-sidebar-panel {
+ display: none;
+ width: var(--kt-app-sidebar-panel-width);
+
+ background-color: var(--kt-app-sidebar-panel-base-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-panel-base-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-panel-base-border-start-mobile);
+ border-right: var(--kt-app-sidebar-panel-base-border-end-mobile);
+
+ @include property( z-index, $app-sidebar-panel-base-z-index-mobile);
+ @include property( margin-left, $app-sidebar-panel-base-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-panel-base-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-panel-base-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-panel-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-panel-gap-start: #{$app-sidebar-panel-base-gap-start-mobile};
+ --kt-app-sidebar-panel-gap-end: #{$app-sidebar-panel-base-gap-end-mobile};
+ --kt-app-sidebar-panel-gap-top: #{$app-sidebar-panel-base-gap-top-mobile};
+ --kt-app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-base-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-panel-minimize-mobile="on"] {
+ --kt-app-sidebar-panel-width: #{$app-sidebar-panel-minimize-width-mobile};
+
+ --kt-app-sidebar-panel-gap-start: #{$app-sidebar-panel-minimize-gap-start-mobile};
+ --kt-app-sidebar-panel-gap-end: #{$app-sidebar-panel-minimize-gap-end-mobile};
+ --kt-app-sidebar-panel-gap-top: #{$app-sidebar-panel-minimize-gap-top-mobile};
+ --kt-app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-minimize-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-panel-collapse-mobile="on"] {
+ --kt-app-sidebar-panel-width-actual: #{$app-sidebar-panel-base-width-mobile};
+ --kt-app-sidebar-panel-width: 0px;
+ }
+
+ // States
+ .app-sidebar-panel {
+ [data-kt-app-sidebar-panel-minimize-mobile="on"] & {
+ transition: $app-sidebar-panel-base-transition;
+
+ background-color: var(--kt-app-sidebar-panel-minimize-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-panel-minimize-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-panel-minimize-border-start-mobile);
+ border-right: var(--kt-app-sidebar-panel-minimize-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-panel-minimize-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-panel-minimize-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-panel-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-panel-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-sidebar-panel-hoverable-mobile="true"] & {
+ .app-sidebar-panel-hoverable {
+ width: var(--kt-app-sidebar-panel-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-panel-hoverable-mobile="true"][data-kt-app-sidebar-panel-minimize-mobile="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-panel-base-transition;
+ width: var(--kt-app-sidebar-panel-width-actual);
+
+ box-shadow: var(--kt-app-sidebar-panel-minimize-hover-box-shadow-mobile);
+ }
+
+ [data-kt-app-sidebar-panel-collapse-mobile="on"] & {
+ transition: $app-sidebar-panel-base-transition;
+ width: var(--kt-app-sidebar-panel-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-panel-width-actual));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-panel-minimize-mobile="on"] {
+ .app-sidebar-panel-minimize-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-panel-minimize-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-panel-collapse-mobile="on"] {
+ .app-sidebar-panel-collapse-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-panel-collapse-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/sidebar/_sidebar-primary.scss b/src/_res/assets/sass/core/layout/base/sidebar/_sidebar-primary.scss
new file mode 100644
index 0000000..9db9167
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/sidebar/_sidebar-primary.scss
@@ -0,0 +1,236 @@
+//
+// sidebar Primary
+//
+
+// General mode
+.app-sidebar-primary {
+ transition: $app-sidebar-primary-base-transition;
+ position: relative;
+ flex-shrink: 0;
+}
+
+// Utilities
+.app-sidebar-primary-collapse-d-flex,
+.app-sidebar-primary-minimize-d-flex,
+.app-sidebar-primary-collapse-mobile-d-flex,
+.app-sidebar-primary-minimize-mobile-d-flex {
+ display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-sidebar-primary {
+ background-color: var(--kt-app-sidebar-primary-base-bg-color);
+ box-shadow: var(--kt-app-sidebar-primary-base-box-shadow);
+ border-left: var(--kt-app-sidebar-primary-base-border-start);
+ border-right: var(--kt-app-sidebar-primary-base-border-end);
+
+ @include property( z-index, $app-sidebar-primary-base-z-index);
+ @include property( margin-left, $app-sidebar-primary-base-gap-start);
+ @include property( margin-right, $app-sidebar-primary-base-gap-end);
+ @include property( margin-top, $app-sidebar-primary-base-gap-top);
+ @include property( margin-bottom, $app-sidebar-primary-base-gap-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-primary-width-actual: #{$app-sidebar-primary-base-width};
+ }
+
+ [data-kt-app-sidebar-stacked="true"] {
+ --kt-app-sidebar-primary-width: #{$app-sidebar-primary-base-width};
+
+ --kt-app-sidebar-primary-gap-start: #{$app-sidebar-primary-base-gap-start};
+ --kt-app-sidebar-primary-gap-end: #{$app-sidebar-primary-base-gap-end};
+ --kt-app-sidebar-primary-gap-top: #{$app-sidebar-primary-base-gap-top};
+ --kt-app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-base-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-primary-minimize="on"] {
+ --kt-app-sidebar-primary-width: #{$app-sidebar-primary-minimize-width};
+
+ --kt-app-sidebar-primary-gap-start: #{$app-sidebar-primary-minimize-gap-start};
+ --kt-app-sidebar-primary-gap-end: #{$app-sidebar-primary-minimize-gap-end};
+ --kt-app-sidebar-primary-gap-top: #{$app-sidebar-primary-minimize-gap-top};
+ --kt-app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-minimize-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-primary-collapse="on"] {
+ --kt-app-sidebar-primary-width: 0px;
+ }
+
+ // States
+ .app-sidebar-primary {
+ width: var(--kt-app-sidebar-primary-width);
+
+ [data-kt-app-sidebar-primary-collapse="on"] & {
+ transition: $app-sidebar-primary-base-transition;
+ width: var(--kt-app-sidebar-primary-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-primary-width-actual));
+ }
+
+ [data-kt-app-sidebar-primary-minimize="on"] & {
+ transition: $app-sidebar-primary-base-transition;
+
+ background-color: var(--kt-app-sidebar-primary-minimize-bg-color);
+ box-shadow: var(--kt-app-sidebar-primary-minimize-box-shadow);
+ border-left: var(--kt-app-sidebar-primary-minimize-border-start);
+ border-right: var(--kt-app-sidebar-primary-minimize-border-end);
+
+ @include property( margin-left, $app-sidebar-primary-minimize-gap-start);
+ @include property( margin-right, $app-sidebar-primary-minimize-gap-end);
+ @include property( margin-top, $app-sidebar-primary-minimize-gap-top);
+ @include property( margin-bottom, $app-sidebar-primary-minimize-gap-bottom);
+ }
+
+ [data-kt-app-sidebar-primary-hoverable="true"] & {
+ .app-sidebar-primary-hoverable {
+ width: var(--kt-app-sidebar-primary-width-actual);
+ }
+ }
+
+ // Hover minimized
+ [data-kt-app-sidebar-primary-hoverable="true"][data-kt-app-sidebar-primary-minimize="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-primary-base-transition;
+ width: var(--kt-app-sidebar-primary-width-actual);
+ box-shadow: var(--kt-app-sidebar-primary-minimize-hover-box-shadow);
+ }
+ }
+
+ // Integration
+ .app-sidebar-primary {
+ // Header
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-sidebar-primary-below-header="true"] & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"][data-kt-app-sidebar-primary-below-toolbar="true"] & {
+ top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height, 0));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-primary-minimize="on"] {
+ .app-sidebar-primary-minimize-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-primary-minimize-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-primary-collapse="on"] {
+ .app-sidebar-primary-collapse-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-primary-collapse-d-flex {
+ display: flex !important;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-sidebar-primary {
+ @include property( z-index, $app-sidebar-primary-base-z-index-mobile);
+
+ background-color: var(--kt-app-sidebar-primary-base-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-primary-base-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-primary-base-border-start-mobile);
+ border-right: var(--kt-app-sidebar-primary-base-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-primary-base-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-primary-base-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-primary-base-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-primary-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-primary-width-actual: #{$app-sidebar-primary-base-width-mobile};
+ }
+
+ [data-kt-app-sidebar-stacked="true"] {
+ --kt-app-sidebar-primary-width: #{$app-sidebar-primary-base-width-mobile};
+
+ --kt-app-sidebar-primary-gap-start: #{$app-sidebar-primary-base-gap-start-mobile};
+ --kt-app-sidebar-primary-gap-end: #{$app-sidebar-primary-base-gap-end-mobile};
+ --kt-app-sidebar-primary-gap-top: #{$app-sidebar-primary-base-gap-top-mobile};
+ --kt-app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-base-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-primary-minimize-mobile="on"] {
+ --kt-app-sidebar-primary-width: #{$app-sidebar-primary-minimize-width-mobile};
+
+ --kt-app-sidebar-primary-gap-start: #{$app-sidebar-primary-minimize-gap-start-mobile};
+ --kt-app-sidebar-primary-gap-end: #{$app-sidebar-primary-minimize-gap-end-mobile};
+ --kt-app-sidebar-primary-gap-top: #{$app-sidebar-primary-minimize-gap-top-mobile};
+ --kt-app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-minimize-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-primary-collapse-mobile="on"] {
+ --kt-app-sidebar-primary-width: 0px;
+ }
+
+ // States
+ .app-sidebar-primary {
+ width: var(--kt-app-sidebar-primary-width);
+
+ [data-kt-app-sidebar-primary-collapse-mobile="on"] & {
+ transition: $app-sidebar-primary-base-transition;
+ width: var(--kt-app-sidebar-primary-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-primary-width-actual));
+ }
+
+ [data-kt-app-sidebar-primary-minimize-mobile="on"] & {
+ transition: $app-sidebar-primary-base-transition;
+ background-color: var(--kt-app-sidebar-primary-minimize-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-primary-base-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-primary-minimize-border-start-mobile);
+ border-left: var(--kt-app-sidebar-primary-minimize-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-primary-minimize-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-primary-minimize-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-primary-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-primary-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-sidebar-primary-hoverable-mobile="true"] & {
+ .app-sidebar-primary-hoverable {
+ width: var(--kt-app-sidebar-primary-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-primary-hoverable-mobile="true"][data-kt-app-sidebar-primary-minimize-mobile="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-primary-base-transition;
+ width: var(--kt-app-sidebar-primary-width-actual);
+ box-shadow: var(--kt-app-sidebar-primary-minimize-hover-box-shadow-mobile);
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-primary-minimize-mobile="on"] {
+ .app-sidebar-primary-minimize-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-primary-minimize-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-primary-collapse-mobile="on"] {
+ .app-sidebar-primary-collapse-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-primary-collapse-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/sidebar/_sidebar-secondary.scss b/src/_res/assets/sass/core/layout/base/sidebar/_sidebar-secondary.scss
new file mode 100644
index 0000000..0641268
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/sidebar/_sidebar-secondary.scss
@@ -0,0 +1,282 @@
+//
+// sidebar Secondary
+//
+
+// General mode
+.app-sidebar-secondary {
+ transition: $app-sidebar-secondary-base-transition;
+ position: relative;
+ flex-shrink: 0;
+}
+
+// Utilities
+.app-sidebar-secondary-collapse-d-flex,
+.app-sidebar-secondary-minimize-d-flex,
+.app-sidebar-secondary-collapse-mobile-d-flex,
+.app-sidebar-secondary-minimize-mobile-d-flex {
+ display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-sidebar-secondary {
+ @include property( z-index, $app-sidebar-secondary-base-z-index);
+
+ background-color: var(--kt-app-sidebar-secondary-base-bg-color);
+ box-shadow: var(--kt-app-sidebar-secondary-base-box-shadow);
+ border-left: var(--kt-app-sidebar-secondary-base-border-start);
+ border-right: var(--kt-app-sidebar-secondary-base-border-end);
+
+ @include property( margin-left, $app-sidebar-secondary-base-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-secondary-base-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-secondary-base-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-secondary-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-secondary-width-actual: calc(
+ #{$app-sidebar-base-width} -
+ #{$app-sidebar-primary-base-width} -
+ #{$app-sidebar-primary-base-gap-start} -
+ #{$app-sidebar-primary-base-gap-end} -
+ #{$app-sidebar-secondary-base-gap-start} -
+ #{$app-sidebar-secondary-base-gap-end}
+ );
+ }
+
+ [data-kt-app-sidebar-stacked="true"] {
+ --kt-app-sidebar-secondary-width: calc(
+ #{$app-sidebar-base-width} -
+ #{$app-sidebar-primary-base-width} -
+ #{$app-sidebar-primary-base-gap-start} -
+ #{$app-sidebar-primary-base-gap-end} -
+ #{$app-sidebar-secondary-base-gap-start} -
+ #{$app-sidebar-secondary-base-gap-end}
+ );
+
+ --kt-app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-base-gap-start};
+ --kt-app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-base-gap-end};
+ --kt-app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-base-gap-top};
+ --kt-app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-base-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-secondary-minimize="on"] {
+ --kt-app-sidebar-secondary-width: #{$app-sidebar-secondary-minimize-width};
+
+ --kt-app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-minimize-gap-start};
+ --kt-app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-minimize-gap-end};
+ --kt-app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-minimize-gap-top};
+ --kt-app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-minimize-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-secondary-collapse="on"] {
+ --kt-app-sidebar-secondary-width-actual: calc(
+ #{$app-sidebar-base-width} -
+ #{$app-sidebar-primary-base-width} -
+ #{$app-sidebar-primary-base-gap-start} -
+ #{$app-sidebar-primary-base-gap-end} -
+ #{$app-sidebar-secondary-base-gap-start} -
+ #{$app-sidebar-secondary-base-gap-end}
+ );
+
+ --kt-app-sidebar-secondary-width: 0px;
+ }
+
+ // States
+ .app-sidebar-secondary {
+ width: var(--kt-app-sidebar-secondary-width);
+
+ [data-kt-app-sidebar-secondary-collapse="on"] & {
+ transition: $app-sidebar-secondary-base-transition;
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-secondary-width-actual));
+ }
+
+ [data-kt-app-sidebar-secondary-minimize="on"] & {
+ transition: $app-sidebar-secondary-base-transition;
+
+ background-color: var(--kt-app-sidebar-secondary-minimize-bg-color);
+ box-shadow: var(--kt-app-sidebar-secondary-minimize-box-shadow);
+ border-left: var(--kt-app-sidebar-secondary-minimize-border-start);
+ border-right: var(--kt-app-sidebar-secondary-minimize-border-end);
+
+ @include property( margin-left, $app-sidebar-secondary-minimize-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-secondary-minimize-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-secondary-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-secondary-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-sidebar-secondary-hoverable="true"] & {
+ .app-sidebar-secondary-hoverable {
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-secondary-hoverable="true"][data-kt-app-sidebar-secondary-minimize="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-secondary-base-transition;
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ box-shadow: var(--kt-app-sidebar-secondary-minimize-hover-box-shadow);
+ }
+ }
+
+ // Integration
+ .app-sidebar-secondary {
+ // Header
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-sidebar-secondary-below-header="true"] & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"][data-kt-app-sidebar-secondary-below-toolbar="true"] & {
+ top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height, 0));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-secondary-minimize="on"] {
+ .app-sidebar-secondary-minimize-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-secondary-minimize-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-secondary-collapse="on"] {
+ .app-sidebar-secondary-collapse-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-secondary-collapse-d-flex {
+ display: flex !important;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-sidebar-secondary {
+ @include property( z-index, $app-sidebar-secondary-base-z-index-mobile);
+
+ background-color: var(--kt-app-sidebar-secondary-base-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-secondary-base-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-secondary-base-border-start-mobile);
+ border-right: var(--kt-app-sidebar-secondary-base-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-secondary-base-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-secondary-base-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-secondary-base-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-secondary-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-secondary-width-actual: calc(
+ #{$app-sidebar-base-width-mobile} -
+ #{$app-sidebar-primary-base-width-mobile} -
+ #{$app-sidebar-primary-base-gap-start-mobile} -
+ #{$app-sidebar-primary-base-gap-end-mobile} -
+ #{$app-sidebar-secondary-base-gap-start-mobile} -
+ #{$app-sidebar-secondary-base-gap-end-mobile}
+ );
+ }
+
+ [data-kt-app-sidebar-stacked="true"] {
+ --kt-app-sidebar-secondary-width: calc(
+ #{$app-sidebar-base-width-mobile} -
+ #{$app-sidebar-primary-base-width-mobile} -
+ #{$app-sidebar-primary-base-gap-start-mobile} -
+ #{$app-sidebar-primary-base-gap-end-mobile} -
+ #{$app-sidebar-secondary-base-gap-start-mobile} -
+ #{$app-sidebar-secondary-base-gap-end-mobile}
+ );
+
+ --kt-app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-base-gap-start-mobile};
+ --kt-app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-base-gap-end-mobile};
+ --kt-app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-base-gap-top-mobile};
+ --kt-app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-base-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-secondary-minimize-mobile="on"] {
+ --kt-app-sidebar-secondary-width: #{$app-sidebar-secondary-minimize-width-mobile};
+
+ --kt-app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-minimize-gap-start-mobile};
+ --kt-app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-minimize-gap-end-mobile};
+ --kt-app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-minimize-gap-top-mobile};
+ --kt-app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-minimize-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-secondary-collapse-mobile="on"] {
+ --kt-app-sidebar-secondary-width-actual: calc(
+ #{$app-sidebar-base-width-mobile} -
+ #{$app-sidebar-primary-base-width-mobile} -
+ #{$app-sidebar-primary-base-gap-start-mobile} -
+ #{$app-sidebar-primary-base-gap-end-mobile} -
+ #{$app-sidebar-secondary-base-gap-start-mobile} -
+ #{$app-sidebar-secondary-base-gap-end-mobile}
+ );
+
+ --kt-app-sidebar-secondary-width: 0px;
+ }
+
+ // States
+ .app-sidebar-secondary {
+ width: var(--kt-app-sidebar-secondary-width);
+
+ [data-kt-app-sidebar-secondary-collapse-mobile="on"] & {
+ transition: $app-sidebar-secondary-base-transition;
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-secondary-width-actual));
+ }
+
+ [data-kt-app-sidebar-secondary-minimize-mobile="on"] & {
+ transition: $app-sidebar-secondary-base-transition;
+ background-color: var(--kt-app-sidebar-secondary-minimize-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-secondary-minimize-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-secondary-minimize-border-start-mobile);
+ border-right: var(--kt-app-sidebar-secondary-minimize-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-secondary-minimize-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-secondary-minimize-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-secondary-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-secondary-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-sidebar-secondary-hoverable-mobile="true"] & {
+ .app-sidebar-secondary-hoverable {
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-secondary-hoverable-mobile="true"][data-kt-app-sidebar-secondary-minimize-mobile="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-secondary-base-transition;
+ width: var(--kt-app-sidebar-secondary-width-actual);
+ box-shadow: var(--kt-app-sidebar-secondary-minimize-hover-box-shadow-mobile);
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-secondary-minimize-mobile="on"] {
+ .app-sidebar-secondary-minimize-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-secondary-minimize-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-secondary-collapse="on"] {
+ .app-sidebar-secondary-collapse-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-secondary-collapse-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/layout/base/sidebar/_sidebar.scss b/src/_res/assets/sass/core/layout/base/sidebar/_sidebar.scss
new file mode 100644
index 0000000..097b6b3
--- /dev/null
+++ b/src/_res/assets/sass/core/layout/base/sidebar/_sidebar.scss
@@ -0,0 +1,296 @@
+//
+// sidebar
+//
+
+// General mode
+.app-sidebar {
+ transition: $app-sidebar-base-transition;
+}
+
+// Utilities
+.app-sidebar-minimize-d-flex,
+.app-sidebar-sticky-d-flex,
+.app-sidebar-collapse-d-flex,
+.app-sidebar-minimize-mobile-d-flex,
+.app-sidebar-collapse-mobile-d-flex {
+ display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ // Base
+ .app-sidebar {
+ display: flex;
+ flex-shrink: 0;
+ width: var(--kt-app-sidebar-width);
+
+ background-color: var(--kt-app-sidebar-base-bg-color);
+ box-shadow: var(--kt-app-sidebar-base-box-shadow);
+ border-left: var(--kt-app-sidebar-base-border-start);
+ border-right: var(--kt-app-sidebar-base-border-end);
+
+ @include property( z-index, $app-sidebar-base-z-index);
+ @include property( margin-left, $app-sidebar-base-gap-start);
+ @include property( margin-right, $app-sidebar-base-gap-end);
+ @include property( margin-top, $app-sidebar-base-gap-top);
+ @include property( margin-bottom, $app-sidebar-base-gap-bottom);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-width: #{$app-sidebar-base-width};
+ --kt-app-sidebar-width-actual: #{$app-sidebar-base-width};
+
+ --kt-app-sidebar-gap-start: #{$app-sidebar-base-gap-start};
+ --kt-app-sidebar-gap-end: #{$app-sidebar-base-gap-end};
+ --kt-app-sidebar-gap-top: #{$app-sidebar-base-gap-top};
+ --kt-app-sidebar-gap-bottom: #{$app-sidebar-base-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-stacked="true"] {
+ --kt-app-sidebar-width: calc(var(--kt-app-sidebar-primary-width) + var(--kt-app-sidebar-secondary-width));
+ }
+
+ [data-kt-app-sidebar-minimize="on"] {
+ --kt-app-sidebar-width: #{$app-sidebar-minimize-width};
+
+ --kt-app-sidebar-gap-start: #{$app-sidebar-minimize-gap-start};
+ --kt-app-sidebar-gap-end: #{$app-sidebar-minimize-gap-end};
+ --kt-app-sidebar-gap-top: #{$app-sidebar-minimize-gap-top};
+ --kt-app-sidebar-gap-bottom: #{$app-sidebar-minimize-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-sticky="on"] {
+ --kt-app-sidebar-width: #{$app-sidebar-sticky-width};
+
+ --kt-app-sidebar-gap-start: #{$app-sidebar-sticky-gap-start};
+ --kt-app-sidebar-gap-end: #{$app-sidebar-sticky-gap-end};
+ --kt-app-sidebar-gap-top: #{$app-sidebar-sticky-gap-top};
+ --kt-app-sidebar-gap-bottom: #{$app-sidebar-sticky-gap-bottom};
+ }
+
+ [data-kt-app-sidebar-collapse="on"] {
+ --kt-app-sidebar-width: 0px;
+ }
+
+ // States
+ .app-sidebar {
+ [data-kt-app-sidebar-static="true"] & {
+ position: relative;
+ }
+
+ [data-kt-app-sidebar-offcanvas="true"] & {
+ display: none;
+ }
+
+ [data-kt-app-sidebar-fixed="true"] & {
+ position: fixed;
+ @include property( z-index, $app-sidebar-fixed-z-index);
+ @include property( top, $app-sidebar-fixed-top);
+ @include property( bottom, $app-sidebar-fixed-bottom);
+ @include property( left, $app-sidebar-fixed-left);
+ }
+
+ [data-kt-app-sidebar-stacked="true"] & {
+ align-items: stretch;
+ }
+
+ [data-kt-app-sidebar-sticky="on"] & {
+ position: fixed;
+ transition: $app-sidebar-base-transition;
+ @include property( top, $app-sidebar-sticky-top);
+ @include property( bottom, $app-sidebar-sticky-bottom);
+ @include property( left, $app-sidebar-sticky-left);
+ @include property( z-index, $app-sidebar-sticky-z-index);
+
+ box-shadow: var(--kt-app-sidebar-sticky-box-shadow);
+ border-left: var(--kt-app-sidebar-sticky-border-start);
+ border-right: var(--kt-app-sidebar-sticky-border-end);
+
+ @include property( margin-left, $app-sidebar-sticky-gap-start);
+ @include property( margin-right, $app-sidebar-sticky-gap-end);
+ @include property( margin-top, $app-sidebar-sticky-gap-top);
+ @include property( margin-bottom, $app-sidebar-sticky-gap-bottom);
+ }
+
+ [data-kt-app-sidebar-minimize="on"] & {
+ transition: $app-sidebar-base-transition;
+
+ background-color: var(--kt-app-sidebar-minimize-bg-color);
+ box-shadow: var(--kt-app-sidebar-minimize-box-shadow);
+ border-left: var(--kt-app-sidebar-minimize-border-start);
+ border-right: var(--kt-app-sidebar-minimize-border-end);
+
+ @include property( margin-left, $app-sidebar-minimize-gap-start);
+ @include property( margin-right, $app-sidebar-minimize-gap-end);
+ @include property( margin-top, $app-sidebar-minimize-gap-top);
+ @include property( margin-bottom, $app-sidebar-minimize-gap-bottom);
+ }
+
+ [data-kt-app-sidebar-hoverable="true"] & {
+ .app-sidebar-wrapper {
+ width: var(--kt-app-sidebar-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-base-transition;
+ width: var(--kt-app-sidebar-width-actual);
+ @include property( box-shadow, $app-sidebar-minimize-hover-box-shadow);
+ }
+
+ [data-kt-app-sidebar-collapse="on"] & {
+ transition: $app-sidebar-base-transition;
+ width: var(--kt-app-sidebar-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-width-actual));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-minimize="on"] {
+ .app-sidebar-minimize-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-minimize-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-sticky="on"] {
+ .app-sidebar-sticky-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-sticky-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-collapse="on"] {
+ .app-sidebar-collapse-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-collapse-d-flex {
+ display: flex !important;
+ }
+ }
+
+ // Integration
+ .app-sidebar {
+ // Header
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"]:not([data-kt-app-sidebar-push-header="true"]) & {
+ top: var(--kt-app-header-height);
+ }
+
+ // Toolbar
+ [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"]:not([data-kt-app-sidebar-push-toolbar="true"]) & {
+ top: calc(var(--kt-app-header-height) + var(--kt-app-toolbar-height, 0px));
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ // Base
+ .app-sidebar {
+ display: none;
+ width: var(--kt-app-sidebar-width);
+
+ background-color: var(--kt-app-sidebar-base-bg-color-mobile);
+ box-shadow: var(--kt-app-sidebar-base-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-base-border-start-mobile);
+ border-right: var(--kt-app-sidebar-base-border-end-mobile);
+
+ @include property( z-index, $app-sidebar-base-z-index-mobile);
+ @include property( margin-left, $app-sidebar-base-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-base-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-base-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-base-gap-bottom-mobile);
+ }
+
+ // Vars
+ :root {
+ --kt-app-sidebar-width: #{$app-sidebar-base-width-mobile};
+ --kt-app-sidebar-width-actual: #{$app-sidebar-base-width-mobile};
+
+ --kt-app-sidebar-gap-start: #{$app-sidebar-base-gap-start-mobile};
+ --kt-app-sidebar-gap-end: #{$app-sidebar-base-gap-end-mobile};
+ --kt-app-sidebar-gap-top: #{$app-sidebar-base-gap-top-mobile};
+ --kt-app-sidebar-gap-bottom: #{$app-sidebar-base-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-minimize-mobile="on"] {
+ --kt-app-sidebar-width: #{$app-sidebar-minimize-width-mobile};
+
+ --kt-app-sidebar-gap-start: #{$app-sidebar-minimize-gap-start-mobile};
+ --kt-app-sidebar-gap-end: #{$app-sidebar-minimize-gap-end-mobile};
+ --kt-app-sidebar-gap-top: #{$app-sidebar-minimize-gap-top-mobile};
+ --kt-app-sidebar-gap-bottom: #{$app-sidebar-minimize-gap-bottom-mobile};
+ }
+
+ [data-kt-app-sidebar-collapse-mobile="on"] {
+ --kt-app-sidebar-width: 0px;
+ }
+
+ // States
+ .app-sidebar {
+ [data-kt-app-sidebar-stacked="true"] & {
+ align-items: stretch;
+ }
+
+ [data-kt-app-sidebar-minimize-mobile="on"] & {
+ transition: $app-sidebar-base-transition;
+
+ background-color: var(--kt-app-sidebar-minimize-bg-color-mobilee);
+ box-shadow: var(--kt-app-sidebar-minimize-box-shadow-mobile);
+ border-left: var(--kt-app-sidebar-minimize-border-start-mobile);
+ border-right: var(--kt-app-sidebar-minimize-border-end-mobile);
+
+ @include property( margin-left, $app-sidebar-minimize-gap-start-mobile);
+ @include property( margin-right, $app-sidebar-minimize-gap-end-mobile);
+ @include property( margin-top, $app-sidebar-minimize-gap-top-mobile);
+ @include property( margin-bottom, $app-sidebar-minimize-gap-bottom-mobile);
+ }
+
+ [data-kt-app-sidebar-hoverable-mobile="true"] & {
+ .app-sidebar-wrapper {
+ width: var(--kt-app-sidebar-width-actual);
+ }
+ }
+
+ [data-kt-app-sidebar-hoverable-mobile="true"][data-kt-app-sidebar-minimize-mobile="on"] &:hover:not(.animating) {
+ transition: $app-sidebar-base-transition;
+ width: var(--kt-app-sidebar-width-actual);
+ box-shadow: var(--kt-app-sidebar-minimize-hover-box-shadow-mobile);
+ }
+
+ [data-kt-app-sidebar-collapse-mobile="on"] & {
+ transition: $app-sidebar-base-transition;
+ width: var(--kt-app-sidebar-width-actual);
+ margin-left: calc( -1 * var(--kt-app-sidebar-width-actual));
+ }
+ }
+
+ // Utilities
+ [data-kt-app-sidebar-minimize-mobile="on"] {
+ .app-sidebar-minimize-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-minimize-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+
+ [data-kt-app-sidebar-collapse-mobile="on"] {
+ .app-sidebar-collapse-mobile-d-none {
+ display: none !important;
+ }
+
+ .app-sidebar-collapse-mobile-d-flex {
+ display: flex !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_apexcharts.scss b/src/_res/assets/sass/core/vendors/plugins/_apexcharts.scss
new file mode 100644
index 0000000..87b14f2
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_apexcharts.scss
@@ -0,0 +1,129 @@
+//
+// Apexcharts
+//
+
+// Text
+.apexcharts-text,
+.apexcharts-title-text,
+.apexcharts-legend-text {
+ font-family: $font-family-sans-serif !important;
+}
+
+.apexcharts-title-text {
+ font-weight: $font-weight-normal;
+}
+
+.apexcharts-pie-label {
+ font-weight: $font-weight-normal;
+ font-size: $font-size-sm;
+}
+
+// Dropdown
+.apexcharts-toolbar{
+ text-align: left !important;
+}
+
+.apexcharts-menu {
+ background-color: var(--kt-body-bg);
+ border: 0 !important;
+ padding: 0.5rem 0 !important;
+ box-shadow: var(--kt-dropdown-box-shadow);
+ border-radius: $border-radius !important;
+ overflow: hidden;
+ min-width: 10rem !important;
+
+ .apexcharts-menu-item {
+ padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+ transition: $transition-base;
+
+ &:hover{
+ background-color: var(--kt-hover-bg) !important;
+ }
+ }
+}
+
+// Tooltips
+.apexcharts-tooltip {
+ &.apexcharts-theme-light {
+ @include border-radius($border-radius);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ border: 0 !important;
+ background: var(--kt-body-bg) !important;
+ color: var(--kt-gray-800);
+
+ .apexcharts-tooltip-title {
+ background: var(--kt-body-bg) !important;
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-800);
+ border-bottom: 1px solid var(--kt-gray-100) !important;
+ }
+ }
+
+ .apexcharts-tooltip-title {
+ padding: 0.5rem 1rem;
+ }
+
+ .apexcharts-tooltip-series-group {
+ }
+}
+
+.apexcharts-xaxistooltip {
+ &.apexcharts-theme-light {
+ @include border-radius($border-radius !important);
+ box-shadow: var(--kt-dropdown-box-shadow) !important;
+ border: 0 !important;
+ background: var(--kt-dropdown-box-shadow) !important;
+ color: var(--kt-gray-800);
+
+ &:before {
+ border-bottom: 0 !important;
+ }
+
+ &:after {
+ border-bottom-color: var(--kt-dropdown-box-shadow) !important;
+ }
+ }
+}
+
+// Border radius integration
+.card-rounded-bottom {
+ .apexcharts-canvas {
+ svg {
+ border-bottom-left-radius: $card-border-radius;
+ border-bottom-right-radius: $card-border-radius;
+ }
+ }
+}
+
+// Border radius options
+.rounded {
+ .apexcharts-canvas {
+ svg {
+ border-radius: $border-radius !important;
+ }
+ }
+}
+
+.rounded-sm {
+ .apexcharts-canvas {
+ svg {
+ border-radius: $border-radius-sm !important;
+ }
+ }
+}
+
+.rounded-lg {
+ .apexcharts-canvas {
+ svg {
+ border-radius: $border-radius-lg !important;
+ }
+ }
+}
+
+.rounded-xl {
+ .apexcharts-canvas {
+ svg {
+ border-radius: $border-radius-xl !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_bootstrap-maxlength.scss b/src/_res/assets/sass/core/vendors/plugins/_bootstrap-maxlength.scss
new file mode 100644
index 0000000..a450979
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_bootstrap-maxlength.scss
@@ -0,0 +1,16 @@
+//
+// Bootstrap Maxlength
+//
+
+.bootstrap-maxlength {
+ z-index: $bootstrap-maxlength-z-index !important;
+
+ // In modal
+ .modal-open & {
+ z-index: #{$zindex-modal + 5} !important;
+ }
+
+ &.badge {
+ display: inline-flex !important;
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_ckeditor.scss b/src/_res/assets/sass/core/vendors/plugins/_ckeditor.scss
new file mode 100644
index 0000000..9d9c4e6
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_ckeditor.scss
@@ -0,0 +1,54 @@
+//
+// CKEditor
+//
+
+
+// Base
+.ck-target{
+ display: none;
+}
+
+.ck-toolbar{
+ @include border-radius($border-radius !important);
+}
+
+.ck-content{
+ min-height: 200px;
+ @include border-radius($border-radius !important);
+
+ &.ck-focused{
+ border-color: var(--kt-primary) !important;
+ box-shadow: none !important;
+ }
+}
+
+// CKEditor Classic & Document
+.ck-editor{
+ .ck-toolbar{
+ @include border-top-radius($border-radius !important);
+ @include border-bottom-radius(0 !important);
+ }
+ .ck-content{
+ @include border-bottom-radius($border-radius !important);
+ @include border-top-radius(0 !important);
+ }
+}
+
+// CKEditor Inline / Balloon / Balloon Block
+.ck-body {
+ .ck-balloon-panel{
+ .ck-content{
+ min-height: 200px;
+ border-color: transparent !important;
+
+ &.ck-focused{
+ border-color: var(--kt-primary) !important;
+ }
+ }
+
+ &.ck-toolbar-container,
+ .ck-toolbar {
+ @include border-radius($border-radius !important);
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_datatables.scss b/src/_res/assets/sass/core/vendors/plugins/_datatables.scss
new file mode 100644
index 0000000..41d0dbc
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_datatables.scss
@@ -0,0 +1,233 @@
+//
+// DataTables
+//
+
+$toolbar-spacing: 1rem 0;
+
+// Base
+table.dataTable {
+ width: 100% !important;
+ margin: 0 !important;
+
+ th {
+ border-bottom-color: var(--kt-table-border-color);
+ }
+}
+
+// Toolbar
+div.dataTables_wrapper div.dataTables_length {
+ padding: $toolbar-spacing;
+}
+
+div.dataTables_wrapper div.dataTables_filter {
+ padding: $toolbar-spacing;
+}
+
+div.dataTables_wrapper div.dataTables_info {
+ display: flex;
+ flex-direction: column;
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-700);
+ padding: $toolbar-spacing;
+
+ .select-info,
+ .select-item {
+ margin-left: 0;
+ font-size: 0.9rem;
+ color: var(--kt-text-muted);
+ }
+}
+
+div.dataTables_length + div.dataTables_info {
+ margin-left: 1rem;
+}
+
+// Pagination
+div.dataTables_wrapper div.dataTables_paginate {
+ padding: $toolbar-spacing;
+ margin-left: 0.5rem;
+
+ .pagination {
+ margin: 0;
+ }
+}
+
+// Head
+table.dataTable>thead>tr> {
+ td, th {
+ &:not(.sorting_disabled) {
+ padding-right: 0;
+ }
+ }
+}
+
+// Sorting
+table.dataTable > thead {
+ .sorting {
+ &:after,
+ &:before {
+ display: none !important;
+ }
+ }
+
+ .sorting_asc,
+ .sorting_desc {
+ vertical-align: middle;
+
+ &:before,
+ &:after {
+ position: relative !important;
+ opacity: 1 !important;
+ display: inline-block !important;
+ width: 0.75rem;
+ height: 0.75rem;
+ content: " " !important;
+ //top: 50%;
+ bottom: auto;
+ right: auto !important;
+ left: auto;
+ margin-left: 0.5rem;
+ }
+
+ &:before {
+ display: none !important;
+ }
+ }
+}
+
+table.dataTable > thead .sorting_asc:after {
+ opacity: 1;
+ @include svg-bg-icon(arrow-top, var(--kt-text-muted));
+}
+
+table.dataTable > thead .sorting_desc:after {
+ opacity: 1;
+ @include svg-bg-icon(arrow-bottom, var(--kt-text-muted));
+}
+
+// Processing
+div.dataTables_wrapper {
+ .table-responsive {
+ position: relative;
+ }
+
+ div.dataTables_processing {
+ @include border-radius($border-radius);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ background-color: var(--kt-tooltip-bg);
+ color: var(--kt-gray-700);
+ font-weight: $font-weight-semibold;
+ margin: 0 !important;
+ width: auto;
+ padding: 1rem 2rem !important;
+ transform: translateX(-50%) translateY(-50%);
+
+ > div {
+ display: none;
+ }
+ }
+}
+
+// Responsive
+table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
+table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
+ $icon-size: 1.35rem;
+
+ &:before {
+ top: 50%;
+ left: 0;
+ height: $icon-size;
+ width: $icon-size;
+ line-height: 1.5;
+ text-indent: -999px !important;
+ margin-top: -(divide($icon-size, 2));
+ margin-right: divide($icon-size, 2);
+ display: inline-block;
+ position: relative;
+ font-size: 1.05rem;
+ border: 0;
+ box-shadow: none;
+ mask-size: 85%;
+ -webkit-mask-size: 85%;
+ content: ".";
+
+ :root &,
+ [data-theme="light"] & {
+ @include svg-bg-icon(expand, $gray-600);
+ }
+
+ [data-theme="dark"] & {
+ @include svg-bg-icon(expand, $gray-600-dark);
+ }
+ }
+}
+
+table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
+table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
+ @include svg-bg-icon(collapse, $primary);
+}
+
+table.dataTable > tbody > tr.child span.dtr-title {
+ display: inline-block;
+ min-width: 100px;
+ font-weight: $font-weight-semibold;
+}
+
+table.dataTable > tbody > tr.child span.dtr-data {
+ font-weight: $font-weight-normal;
+}
+
+// Striped
+table.dataTable.table-striped > tbody > tr.odd > * {
+ box-shadow: inset 0 0 0 9999px var(--bs-table-striped-bg);
+}
+
+table.dataTable > tbody > tr.selected > * {
+ box-shadow: inset 0 0 0 9999px var(--kt-primary);
+ color: var(--kt-primary-inverse);
+
+ a:not([class="btn"]) {
+ color: var(--kt-primary-light);
+ font-weight: $font-weight-semibold;
+ text-decoration: underline;
+ text-decoration-style: dotted;
+
+ &:hover {
+ color: var(--kt-primary-inverse);
+ }
+ }
+}
+
+// Scroll
+div.dataTables_scrollBody {
+ border-left: 0 !important;
+}
+
+.dataTables_scroll .dataTables_scrollBody .table {
+ thead {
+ line-height: 0;
+
+ .sorting {
+ &:after,
+ &:before {
+ display: none !important;
+ }
+ }
+ }
+}
+
+div.dtfc-right-top-blocker,
+div.dtfc-left-top-blocker {
+ background-color: var(--kt-body-bg);
+}
+
+// Fixed column
+table.dataTable thead tr > .dtfc-fixed-left,
+table.dataTable thead tr > .dtfc-fixed-right {
+ background-color: var(--kt-body-bg);
+}
+
+table.dataTable tbody tr > .dtfc-fixed-left,
+table.dataTable tbody tr > .dtfc-fixed-right {
+ background-color: var(--kt-body-bg);
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_daterangepicker.scss b/src/_res/assets/sass/core/vendors/plugins/_daterangepicker.scss
new file mode 100644
index 0000000..546af4b
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_daterangepicker.scss
@@ -0,0 +1,272 @@
+//
+// Bootstrap Daterangepicker plugin customization: https://www.daterangepicker.com
+//
+
+
+// Base
+.daterangepicker {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: auto;
+ background-color: var(--kt-body-bg);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ font-family: $font-family-sans-serif;
+ z-index: $zindex-dropdown;
+ @include border-radius($dropdown-border-radius);
+
+ &:after,
+ &:before {
+ display: none;
+ }
+
+ td {
+ &.off,
+ &.off.in-range,
+ &.off.start-date,
+ &.off.end-date {
+ background-color: transparent;
+ }
+ }
+
+ .modal-open & {
+ z-index: $zindex-modal + 1;
+ }
+
+ .calendar-table {
+ background-color: var(--kt-body-bg);
+ border: 0;
+ }
+
+ .ranges {
+ @include border-radius($dropdown-border-radius);
+ background-color: var(--kt-body-bg);
+ position: relative;
+ overflow: hidden;
+
+ ul {
+ padding: 1rem 0;
+ width: $daterangepicker-ranges-list-width;
+ overflow: auto;
+ max-height: $daterangepicker-ranges-list-height;
+ }
+
+ li {
+ padding: 0.7rem 1.75rem;
+ font-weight: 500;
+ font-size: 1rem;
+ color: var(--kt-gray-600);
+ transition: $transition-link;
+
+ &:hover {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ transition: $transition-link;
+ }
+
+ &.active {
+ background-color: var(--kt-component-active-bg);
+ color: var(--kt-component-active-color);
+ transition: $transition-link;
+ }
+ }
+ }
+
+ &.show-calendar {
+ .ranges {
+ @include border-radius(0);
+ @include border-top-start-radius($dropdown-border-radius);
+ margin-top: 0;
+ height: 297px;
+ }
+ }
+
+ &.show-ranges {
+ &.show-calendar {
+ .ranges {
+ border-right: 1px solid var(--kt-gray-200);
+ }
+ }
+
+ .drp-calendar.left {
+ border-left: 0;
+ }
+ }
+
+ .drp-buttons {
+ padding: 1rem 1.75rem;
+ border-top: 1px solid var(--kt-gray-200);
+
+ .btn {
+ font-size: 1rem;
+ font-weight: $font-weight-semibold;
+ padding: 0.5rem 1rem;
+ }
+
+ .cancelBtn {
+ @include button-custom-variant(
+ $color: var(--kt-light-inverse),
+ $icon-color: var(--kt-light-inverse),
+ $border-color: var(--kt-light),
+ $bg-color: var(--kt-light),
+ $color-active: var(--kt-light-inverse),
+ $icon-color-active: var(--kt-light-inverse),
+ $border-color-active: var(--kt-light-active),
+ $bg-color-active: var(--kt-light-active)
+ );
+ }
+ }
+
+ .drp-selected {
+ font-size: 0.9rem;
+ }
+
+ .drp-calendar {
+ &.left,
+ &.right {
+ padding: 1rem 1rem;
+ }
+
+ &.left {
+ border-left: 0 !important;
+ }
+
+ th,
+ td {
+ font-size: 1rem;
+ font-weight: $font-weight-normal;
+ width: 33px;
+ height: 33px;
+
+ &.available:hover {
+ @include border-radius($border-radius);
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ }
+ }
+
+ th {
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-800);
+
+ &.month {
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-800);
+ }
+
+ &.next,
+ &.prev {
+ span {
+ border-width: 0 1px 1px 0;
+ border-color: var(--kt-gray-600);
+ }
+
+ &.available:hover {
+ span {
+ border-color: var(--kt-component-hover-color);
+ }
+ }
+ }
+
+ &.next {
+ span {
+ margin-right: 1px;
+ }
+ }
+
+ &.prev {
+ span {
+ margin-left: 1px;
+ }
+ }
+ }
+
+ td {
+ color: var(--kt-gray-700);
+
+ &.available.off {
+ color: var(--kt-gray-400);
+ }
+
+ &.active {
+ background-color: var(--kt-component-active-bg) !important;
+ color: var(--kt-component-active-color) !important;
+ @include border-radius($border-radius);
+
+ &.start-date {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ &.end-date {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+ &.start-date.end-date {
+ @include border-radius($border-radius);
+ }
+ }
+
+ &.today,
+ &.today.active {
+ background: var(--kt-component-hover-bg) !important;
+ color: var(--kt-component-hover-color) !important;
+ @include border-radius($border-radius);
+ }
+
+ &.in-range.available:not(.active):not(.off):not(.today) {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ }
+
+ &:hover {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ }
+ }
+ }
+
+ select.ampmselect,
+ select.minuteselect,
+ select.hourselect,
+ select.monthselect,
+ select.yearselect {
+ padding-top: 0.35rem;
+ padding-bottom: 0.35rem;
+ @include border-radius($border-radius);
+ background-color: var(--kt-body-bg) !important;
+ border-color: transparent;
+ color: var(--kt-input-color);
+ font-weight: $font-weight-semibold;
+ outline: 0 !important;
+
+ &:focus {
+ background-color: var(--kt-gray-100);
+ }
+ }
+}
+
+// Tablet mode
+@include media-breakpoint-down(md) {
+ .daterangepicker {
+ &.show-calendar {
+ .ranges {
+ float: none !important;
+ height: auto !important;
+
+ ul {
+ width: 100%;
+ }
+ }
+
+ .drp-calendar {
+ float: none !important;
+ max-width: unset !important;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_draggable.scss b/src/_res/assets/sass/core/vendors/plugins/_draggable.scss
new file mode 100644
index 0000000..f542f34
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_draggable.scss
@@ -0,0 +1,28 @@
+//
+// Draggable plugin customization: https://shopify.github.io/draggable
+//
+
+.draggable {
+ transition: opacity 0.3s ease;
+ outline: none !important;
+
+ &.draggable-mirror {
+ opacity: 0.8;
+ transition: opacity 0.3s ease;
+ border: 2px dashed var(--kt-gray-300) !important;
+ @include border-radius($border-radius);
+ }
+
+ &.draggable--original {
+ opacity: 0 !important;
+ }
+
+ &.draggable-source--is-dragging.draggable--over {
+ opacity: 0 !important;
+ }
+
+ // Handle
+ .draggable-handle {
+ cursor: move;
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_dropzone.scss b/src/_res/assets/sass/core/vendors/plugins/_dropzone.scss
new file mode 100644
index 0000000..f0b4bb8
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_dropzone.scss
@@ -0,0 +1,188 @@
+//
+// Dropzone plugin customization: https://www.dropzonejs.com
+//
+
+// Basic
+.dropzone {
+ min-height: auto;
+ padding: 1.5rem 1.75rem;
+ text-align: center;
+ cursor: pointer;
+ border: 1px dashed var(--kt-primary);
+ background-color: var(--kt-primary-light);
+ border-radius: $border-radius !important;
+
+ .dz-message{
+ margin: 0;
+ display: flex;
+ text-align: left;
+ }
+
+ .dz-preview {
+ border-radius: $border-radius !important;
+ margin: 0.75rem;
+
+ .dz-image {
+ border-radius: $border-radius !important;
+ z-index: 1;
+ }
+
+ &.dz-file-preview {
+ .dz-image {
+ background: var(--kt-gray-200);
+ }
+ }
+ }
+
+ .dz-success-mark,
+ .dz-error-mark {
+ $size: 40px;
+
+ margin-left: -(divide($size, 2)) !important;
+ margin-top: -(divide($size, 2)) !important;
+
+ svg {
+ height: $size !important;
+ width: $size !important;
+ }
+ }
+
+ .dz-remove {
+ $size: 1.65rem;
+ display:flex;
+ justify-content: center;
+ align-items: center;
+ height: $size;
+ width: $size;
+ font-size: 1rem;
+ text-indent: -9999px;
+ white-space: nowrap;
+ position: absolute;
+ z-index: 2;
+ background-color: var(--kt-body-bg) !important;
+ box-shadow: var(--kt-box-shadow);
+ border-radius: 100%;
+ top: -(divide($size,2));
+ right: -(divide($size,2));
+
+ &:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ display: block;
+ content: "";
+ mask-size: 40%;
+ -webkit-mask-size: 40%;
+ @include svg-bg-icon(close, var(--kt-gray-600));
+ }
+
+ &:hover {
+ &:after {
+ @include svg-bg-icon(close, var(--kt-primary));
+ }
+ }
+ }
+
+ .dz-error-message {
+ color: var(--kt-danger-inverse);
+ background: var(--kt-danger);
+ }
+}
+
+// Queue upload
+.dropzone.dropzone-queue {
+ border: 0;
+ padding: 0;
+ background-color: transparent;
+ text-align: left;
+
+ .dz-message{
+ display: none;
+ }
+
+ .dropzone-panel {
+ .dropzone-upload,
+ .dropzone-remove-all{
+ display: none;
+ }
+ }
+
+ .dropzone-item {
+ display: flex;
+ align-items: center;
+ margin-top: 0.75rem;
+ @include border-radius($border-radius);
+ padding: 0.5rem 1rem;
+ background-color: var(--kt-gray-100);
+
+ .dropzone-file {
+ flex-grow: 1;
+
+ .dropzone-filename {
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: var(--kt-gray-600);
+ text-overflow: ellipsis;
+ margin-right: 0.5rem;
+
+ &:hover {
+ color: var(--kt-primary);
+ }
+ }
+
+ .dropzone-error {
+ margin-top: 0.25rem;
+ font-size: 0.9rem;
+ font-weight: 400;
+ color: var(--kt-danger);
+ text-overflow: ellipsis;
+ }
+ }
+
+ .dropzone-progress {
+ width: 15%;
+
+ .progress {
+ height: 5px;
+ @include transition;
+ }
+ }
+
+ .dropzone-toolbar {
+ margin-left: 1rem;
+ display: flex;
+ flex-wrap: nowrap;
+
+ .dropzone-start,
+ .dropzone-cancel,
+ .dropzone-delete {
+ height: 25px;
+ width: 25px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: $transition-link;
+
+ i {
+ transition: $transition-link;
+ font-size: 0.8rem;
+ color: var(--kt-gray-600);
+ }
+
+ &:hover {
+ transition: $transition-link;
+ i {
+ color: var(--kt-primary);
+ }
+ }
+ }
+
+ .dropzone-start{
+ transition: $transition-link;
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_flatpickr.scss b/src/_res/assets/sass/core/vendors/plugins/_flatpickr.scss
new file mode 100644
index 0000000..8892ae6
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_flatpickr.scss
@@ -0,0 +1,407 @@
+//
+// Flatpickr
+//
+
+$flatpickr-padding-y: 0.5rem;
+$flatpickr-padding-x: 1rem;
+$flatpickr-width: 280px;
+$flatpickr-width-week-numbers: 325px;
+$flatpickr-day-height: 36px;
+$flatpickr-day-width: 100%;
+$flatpickr-time-height: 46px;
+
+// Container
+.flatpickr-calendar {
+ width: $flatpickr-width !important;
+ font-family: inherit;
+ border: 0;
+ border-radius: 0;
+ box-shadow: var(--kt-dropdown-box-shadow);
+ background-color: var(--kt-body-bg);
+ @include border-radius($dropdown-border-radius);
+
+ // Remow arrows
+ &:before,
+ &:after {
+ display: none;
+ }
+
+ // Week numbers
+ &.hasWeeks {
+ width: $flatpickr-width-week-numbers !important;
+ }
+}
+
+// Months container
+.flatpickr-months {
+ padding: 0 $flatpickr-padding-x;
+ padding-top: $flatpickr-padding-y;
+}
+
+// Inner container
+.flatpickr-innerContainer {
+ padding: $flatpickr-padding-y $flatpickr-padding-x;
+}
+
+// Day containers
+.flatpickr-days,
+.dayContainer {
+ width: 100% !important;
+ min-width: 100% !important;
+ max-width: 100% !important;
+}
+
+// Months
+.flatpickr-months {
+ .flatpickr-month {
+ background: transparent;
+ color: var(--kt-gray-600);
+ fill: var(--kt-gray-600);
+ height: 46px;
+ }
+
+ .flatpickr-prev-month,
+ .flatpickr-next-month {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ @include border-radius($border-radius);
+ top: 1rem;
+
+ svg {
+ fill: var(--kt-gray-500);
+ height: 13px;
+ width: 13px;
+ }
+
+ &:hover {
+ background: var(--kt-gray-100);
+
+ svg {
+ fill: var(--kt-gray-700);
+ }
+ }
+ }
+
+ .flatpickr-prev-month.flatpickr-prev-month,
+ .flatpickr-next-month.flatpickr-prev-month {
+ /*rtl:begin:ignore*/
+ left: $flatpickr-padding-x;
+ /*rtl:end:ignore*/
+ }
+
+ .flatpickr-prev-month.flatpickr-next-month,
+ .flatpickr-next-month.flatpickr-next-month {
+ /*rtl:begin:ignore*/
+ right: $flatpickr-padding-x;
+ /*rtl:end:ignore*/
+ }
+}
+
+// Month selector
+.flatpickr-current-month {
+ font-weight: $font-weight-semibold;
+ color: inherit;
+
+ .numInputWrapper {
+ @include border-radius($border-radius);
+ width: 65px;
+
+ span {
+ &.arrowUp {
+ @include border-top-end-radius($border-radius);
+ }
+
+ &.arrowDown {
+ @include border-bottom-end-radius($border-radius);
+ }
+ }
+ }
+
+ .flatpickr-monthDropdown-months {
+ border: 0 !important;
+ background-color: var(--kt-body-bg);
+ font-size: 1rem;
+ color: var(--kt-gray-700);
+ font-weight: $font-weight-semibold;
+ padding: 0.5rem 0.75rem;
+ margin-right: 0.5rem;
+ outline: none !important;
+ @include border-radius($border-radius);
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+
+ &:hover {
+ background: var(--kt-gray-100);
+ }
+
+ .flatpickr-monthDropdown-month {
+ font-size: 1rem;
+ color: var(--kt-gray-700);
+ font-weight: $font-weight-semibold;
+ background-color: transparent;
+ outline: none;
+ padding: 0;
+ }
+ }
+
+ span.cur-month {
+ color: var(--kt-gray-700);
+ font-size: 1rem;
+ font-weight: $font-weight-semibold;
+
+ &:hover {
+ background: var(--kt-gray-100);
+ }
+ }
+
+ input.cur-year {
+ color: var(--kt-gray-700);
+ font-size: 1.1rem;
+ padding: 0.5rem 0.75rem;
+ font-weight: $font-weight-semibold;
+ outline: 0 !important;
+ }
+}
+
+// Week days
+span.flatpickr-weekday {
+ color: var(--kt-gray-800);
+ font-size: 1rem;
+ font-weight: $font-weight-bold;
+}
+
+// Time
+.flatpickr-time {
+ @include border-bottom-radius($border-radius);
+
+ .flatpickr-calendar.hasTime & {
+ height: height;
+ line-height: height;
+ max-height: height;
+ border-top: 1px solid var(--kt-gray-100);
+ }
+
+ .numInputWrapper {
+ height: height;
+ }
+
+ .flatpickr-am-pm {
+ color: var(--kt-gray-700);
+ font-size: 1rem;
+ font-weight: $font-weight-semibold;
+ }
+
+ input {
+ &.flatpickr-hour,
+ &.flatpickr-minute {
+ color: var(--kt-gray-700);
+ font-size: 1rem;
+ font-weight: $font-weight-semibold;
+ }
+ }
+
+ input:hover,
+ .flatpickr-am-pm:hover,
+ input:focus,
+ .flatpickr-am-pm:focus {
+ background: transparent;
+ }
+}
+
+// Number input
+.numInputWrapper {
+ span {
+ border-left: 0 !important;
+ border-top: 0 !important;
+ border-bottom: 0 !important;
+ border-right: 0 !important;
+
+ &:hover {
+ background: transparent !important;
+ }
+
+ &:after {
+ top: 50% !important;
+ transform: translateY(-50%);
+ }
+
+ &.arrowUp {
+ &:after {
+ border-bottom-color: var(--kt-gray-500) !important;
+ }
+
+ &:hover {
+ &:after {
+ border-bottom-color: var(--kt-gray-700) !important;
+ }
+ }
+ }
+
+ &.arrowDown {
+ &:after {
+ border-top-color: var(--kt-gray-500) !important;
+ }
+
+ &:hover {
+ &:after {
+ border-top-color: var(--kt-gray-700) !important;
+ }
+ }
+ }
+ }
+
+ &:hover {
+ background: transparent;
+ }
+}
+
+// Day
+.flatpickr-day {
+ font-size: 1rem;
+ @include border-radius($border-radius);
+ box-shadow: none !important;
+ height: $flatpickr-day-height;
+ width: $flatpickr-day-width;
+ max-width: 100% !important;
+ margin: 0;
+ line-height: $flatpickr-day-height;
+ color: var(--kt-gray-600);
+ margin-top: 0 !important;
+
+ &.inRange,
+ &.prevMonthDay.inRange,
+ &.nextMonthDay.inRange,
+ &.today.inRange,
+ &.prevMonthDay.today.inRange,
+ &.nextMonthDay.today.inRange,
+ &:hover,
+ &.prevMonthDay:hover,
+ &.nextMonthDay:hover,
+ &:focus,
+ &.prevMonthDay:focus,
+ &.nextMonthDay:focus {
+ cursor: pointer;
+ outline: 0;
+ background: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ border-color: transparent;
+ }
+
+ // Today
+ &.today {
+ background: var(--kt-gray-100);
+ color: var(--kt-gray-600);
+ border-color: transparent;
+
+ &:hover,
+ &:focus {
+ border-color: transparent;
+ background: var(--kt-gray-200);
+ color: var(--kt-gray-700);
+ }
+ }
+
+ // Selected
+ &.selected,
+ &.startRange,
+ &.endRange,
+ &.selected.inRange,
+ &.startRange.inRange,
+ &.endRange.inRange,
+ &.selected:focus,
+ &.startRange:focus,
+ &.endRange:focus,
+ &.selected:hover,
+ &.startRange:hover,
+ &.endRange:hover,
+ &.selected.prevMonthDay,
+ &.startRange.prevMonthDay,
+ &.endRange.prevMonthDay,
+ &.selected.nextMonthDay,
+ &.startRange.nextMonthDay,
+ &.endRange.nextMonthDay {
+ background: var(--kt-component-active-bg);
+ color: var(--kt-component-active-color);;
+ border-color: transparent;
+ }
+
+ &.inRange,
+ &.prevMonthDay.inRange,
+ &.nextMonthDay.inRange,
+ &.today.inRange,
+ &.prevMonthDay.today.inRange,
+ &.nextMonthDay.today.inRange,
+ &:hover,
+ &.prevMonthDay:hover,
+ &.nextMonthDay:hover,
+ &:focus,
+ &.prevMonthDay:focus,
+ &.nextMonthDay:focus {
+ cursor: pointer;
+ outline: 0;
+ background: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ border-color: transparent;
+ }
+
+ // Today
+ &.today {
+ border-color: transparent;
+ }
+
+ &.today:hover,
+ &.today:focus {
+ border-color: transparent;
+ background: var(--kt-gray-100);
+ color: var(--kt-gray-600);
+ }
+
+ // Selected
+ &.selected,
+ &.startRange,
+ &.endRange,
+ &.selected.inRange,
+ &.startRange.inRange,
+ &.endRange.inRange,
+ &.selected:focus,
+ &.startRange:focus,
+ &.endRange:focus,
+ &.selected:hover,
+ &.startRange:hover,
+ &.endRange:hover,
+ &.selected.prevMonthDay,
+ &.startRange.prevMonthDay,
+ &.endRange.prevMonthDay,
+ &.selected.nextMonthDay,
+ &.startRange.nextMonthDay,
+ &.endRange.nextMonthDay {
+ background: var(--kt-component-active-bg);
+ color: var(--kt-component-active-color);;
+ border-color: transparent;
+ }
+
+ // Disabled
+ &.flatpickr-disabled,
+ &.flatpickr-disabled:hover,
+ &.prevMonthDay,
+ &.nextMonthDay,
+ &.notAllowed,
+ &.notAllowed.prevMonthDay,
+ &.notAllowed.nextMonthDay {
+ color: var(--kt-gray-400);
+ background: transparent;
+ border-color: transparent;
+ }
+ &.flatpickr-disabled,
+ &.flatpickr-disabled:hover {
+ cursor: not-allowed;
+ color: var(--kt-gray-400);
+ }
+}
+
+// Week numbers
+.flatpickr-weekwrapper {
+ margin-right: 5px;
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_formvalidation.scss b/src/_res/assets/sass/core/vendors/plugins/_formvalidation.scss
new file mode 100644
index 0000000..dd853e4
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_formvalidation.scss
@@ -0,0 +1,19 @@
+//
+// FormValidation Customization. More info: https://formvalidation.io/
+//
+
+.fv-plugins-message-container {
+ margin-top: 0.3rem;
+
+ .fv-help-block {
+ color: var(--kt-danger);
+ font-size: 1rem;
+ font-weight: $font-weight-normal;
+ }
+
+ &.valid-feedback,
+ &.invalid-feedback {
+ display: block;
+ font-weight: $font-weight-normal;
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_fslightbox.scss b/src/_res/assets/sass/core/vendors/plugins/_fslightbox.scss
new file mode 100644
index 0000000..a9390cf
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_fslightbox.scss
@@ -0,0 +1,11 @@
+//
+// fslightbox
+//
+
+.fslightbox-slide-btn {
+ border-radius: $border-radius;
+}
+
+.fslightbox-toolbar {
+ border-bottom-left-radius: $border-radius;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_fullcalendar.scss b/src/_res/assets/sass/core/vendors/plugins/_fullcalendar.scss
new file mode 100644
index 0000000..2923198
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_fullcalendar.scss
@@ -0,0 +1,297 @@
+//
+// Fullcalendar plugin customization: https://fullcalendar.io/
+//
+
+body {
+ --fc-event-border-color: var(--kt-primary);
+ --fc-event-bg-color: var(--kt-primary);
+ --fc-event-text-color: var(--kt-primary-inverse);
+}
+
+// Base
+.fc {
+ // Border color
+ --fc-border-color: #{var(--kt-gray-200)};
+ --fc-page-bg-color: #{$white};
+ --fc-small-font-size: 0.95rem;
+
+ // General
+ --fc-highlight-color: var(--kt-light);
+ //--fc-non-business-color:
+ //--fc-bg-event-color:
+ --fc-bg-event-opacity: 0.3;
+ --fc-neutral-bg-color: var(--kt-light);
+ //--fc-event-selected-overlay-color:
+ --fc-today-bg-color: var(--kt--success-light);
+ //--fc-neutral-bg-color:
+ //--fc-neutral-text-color:
+ //--fc-more-link-text-color:
+ //--fc-more-link-bg-color:
+ --fc-now-indicator-color: var(--kt-danger);
+ --fc-list-event-hover-bg-color: var(--kt-light);
+
+ // Buttons
+ --fc-button-text-color: var(--kt-gray-600);
+ --fc-button-bg-color: var(--kt-gray-100);
+ --fc-button-border-color: var(--kt-gray-100);
+
+ --fc-button-hover-bg-color: var(--kt-gray-100);
+ --fc-button-hover-border-color: var(--kt-gray-100);
+
+ --fc-button-active-bg-color: var(--kt-gray-200);
+ --fc-button-active-border-color: var(--kt-gray-200);
+
+ // Table
+ table {
+ font-size: 1rem;
+ }
+
+ // Button
+ .fc-button {
+ padding: 0.75rem 1.25rem;
+ box-shadow: none !important;
+ border: 0 !important;
+ border-radius: $btn-border-radius;
+ vertical-align: middle;
+ font-weight: $font-weight-semibold;
+ text-transform: capitalize;
+ }
+
+ // Primary button
+ .fc-button-primary {
+ margin: 0;
+
+ // Icon
+ .fc-icon {
+ font-size: 1.35rem;
+ margin-bottom: 0.15rem;
+ }
+
+ &:not(:disabled):not(.fc-button-active) {
+ &:focus,
+ &:hover,
+ &:active {
+ color: var(--kt-gray-900);
+
+ .fc-icon {
+ color: var(--kt-gray-900);
+ }
+ }
+ }
+
+ &:not(:disabled).fc-button-active {
+ color: var(--kt-gray-900);
+
+ .fc-icon {
+ color: var(--kt-gray-900);
+ }
+ }
+ }
+
+ // Button group
+ .fc-button-group {
+ .fc-button {
+ margin: 0 !important;
+ }
+ }
+
+ // Toolbar title
+ .fc-toolbar-title {
+ font-size: 1.5rem;
+ font-weight: $font-weight-bold;
+ color: var(--kt-gray-800);
+ }
+
+ // Header cell
+ .fc-col-header-cell {
+ padding: 0.75rem 0.5rem;
+
+ .fc-col-header-cell-cushion {
+ font-size: 1.1rem;
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-800);
+ }
+ }
+
+ // Border radius
+ .fc-scrollgrid {
+ @include border-radius($border-radius);
+
+ thead > tr {
+ td:first-child {
+ @include border-top-start-radius($border-radius);
+ }
+
+ td:last-child {
+ @include border-top-end-radius($border-radius);
+ }
+ }
+
+ tbody > tr:last-child {
+ td:first-child {
+ @include border-bottom-start-radius($border-radius);
+ }
+
+ td:last-child {
+ @include border-bottom-end-radius($border-radius);
+ }
+ }
+ }
+
+ // Event
+ .fc-daygrid-event {
+ margin-top: 3px;
+ }
+
+ // Event title
+ .fc-daygrid-dot-event,
+ .fc-daygrid-block-event {
+ .fc-event-title,
+ .fc-event-time {
+ padding: 0.25rem 0.25rem;
+ }
+ }
+
+ // Day number
+ .fc-daygrid-day-number {
+ color: var(--kt-gray-800);
+ }
+
+ // Dot event
+ .fc-daygrid-dot-event {
+ background-color: var(--kt-light);
+ color: var(--kt-gray-600);
+
+ .fc-event-title {
+ font-weight: $font-weight-semibold;
+ }
+
+ &:hover,
+ &.fc-event-mirror {
+ background-color: var(--kt-light);
+ color: var(--kt-primary);
+ }
+ }
+
+ // Event dot
+ .fc-daygrid-event-dot {
+ margin-left: 0.5rem;
+ margin-right: 0.1rem;
+ }
+
+ // Popover
+ .fc-popover {
+ border: 0 !important;
+ background-color: var(--kt-tooltip-bg);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ @include border-radius($dropdown-border-radius);
+
+ .fc-popover-header {
+ @include border-top-radius($dropdown-border-radius);
+ padding: 0.65rem 0.75rem;
+ background-color: var(--kt-tooltip-bg);
+
+ .fc-popover-title {
+ color: var(--kt-gray-800);
+ font-size: 1rem;
+ font-weight: $font-weight-semibold;
+ }
+
+ .fc-popover-close {
+ font-size: 1rem;
+ color: var(--kt-gray-600);
+
+ &:hover {
+ color: var(--kt-primary);
+ }
+ }
+ }
+
+ .fc-popover-body {
+ padding: 0.5rem 0.75rem 0.75rem 0.75rem;
+ }
+ }
+
+ // More link
+ .fc-daygrid-more-link {
+ font-weight: $font-weight-semibold;
+ }
+
+ // Slot
+ .fc-timegrid-slot {
+ height: 2rem;
+ font-size: 0.95rem;
+ }
+
+ // List
+ .fc-list-day-cushion,
+ .fc-list-table td {
+ padding: 0.85rem 1.15rem;
+ }
+
+ .fc-list-day-text,
+ .fc-list-day-side-text {
+ font-size: 1.1rem;
+ color: var(--kt-gray-900);
+ font-weight: $font-weight-bold;
+ }
+
+ .fc-list,
+ //.fc-scroller,
+ .fc-list-table {
+ @include border-radius($border-radius);
+ }
+
+ .fc-list {
+ overflow: hidden;
+ position: relative;
+ }
+
+ // Week
+ .fc-timegrid-axis {
+ padding-left: 0rem;
+ padding-right: 0;
+ }
+
+ // Main
+ .fc-timegrid-event .fc-event-main {
+ padding: 0.25rem 0.25rem;
+ }
+
+ // Indicator arrow
+ .fc-timegrid-now-indicator-arrow {
+ margin-top: -1px;
+ }
+}
+
+// Event
+.fc-h-event {
+ font-weight: $font-weight-normal;
+}
+
+// Mobile mode
+@include media-breakpoint-down(md) {
+ .fc {
+ // Header toolbar
+ .fc-header-toolbar {
+ flex-direction: column;
+ align-items: flex-start;
+
+ .fc-toolbar-chunk {
+ &:nth-child(1),
+ &:nth-child(3) {
+ order: 2;
+ }
+
+ &:nth-child(2) {
+ order: 1;
+ }
+
+ &:nth-child(2),
+ &:nth-child(1) {
+ margin-bottom: 1rem;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_gmaps.scss b/src/_res/assets/sass/core/vendors/plugins/_gmaps.scss
new file mode 100644
index 0000000..0f9dd4c
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_gmaps.scss
@@ -0,0 +1,18 @@
+//
+// Gmaps Plugin
+//
+
+.gmaps {
+ /* important! bootstrap sets max-width on img to 100% which conflicts with google map canvas*/
+ img {
+ max-width: none;
+ }
+
+ &.gmaps-static {
+ > div {
+ background-repeat: no-repeat ;
+ background-position: 50% 50% ;
+ display:block;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_jkanban.scss b/src/_res/assets/sass/core/vendors/plugins/_jkanban.scss
new file mode 100644
index 0000000..d889064
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_jkanban.scss
@@ -0,0 +1,94 @@
+//
+// Kanban Board
+//
+
+// Variables
+$kanban-spacer-y: 1.25rem;
+$kanban-spacer-x: 1.25rem;
+
+.kanban-container {
+ width: 100% !important;
+ display: flex;
+ flex-wrap: wrap;
+
+ .kanban-board {
+ float: none;
+ flex-shrink: 0;
+ margin-bottom: $kanban-spacer-y;
+ margin-right: $kanban-spacer-x !important;
+ background-color: var(--kt-gray-100);
+ @include border-radius($border-radius);
+
+ &:last-child {
+ margin-right: 0 !important;
+ }
+
+ .kanban-board-header {
+ @include border-top-start-radius($border-radius);
+ @include border-top-end-radius($border-radius);
+
+ .kanban-title-board {
+ font-size: 1.2rem;
+ font-weight: 500;
+ color: var(--kt-gray-900);
+ }
+
+ @each $name, $color in $theme-colors {
+ &.#{$name} {
+ background-color: var(--kt-#{$name});
+ box-shadow: none;
+
+ .kanban-title-board {
+ color: var(--kt-#{$name}-inverse);
+ }
+ }
+
+ &.light-#{$name} {
+ color: rgba(var(--kt-#{$name}), 0.1);
+ box-shadow: none;
+
+ .kanban-title-board {
+ color: var(--kt-#{$name});
+ }
+ }
+ }
+ }
+
+ .kanban-drag {
+ .kanban-item {
+ @include border-radius($border-radius);
+ box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.05);
+ background: var(--kt-body-bg);
+
+ @each $name, $color in $theme-colors {
+ &[data-class="#{$name}"] {
+ background-color: var(--kt-#{$name});
+ color: var(--kt-#{$name}-inverse);
+ box-shadow: none;
+ }
+
+ &[data-class="light-#{$name}"] {
+ background-color: var(--kt-#{$name}-light);
+ color: var(--kt-#{$name});
+ box-shadow: none;
+ }
+ }
+ }
+ }
+
+ footer {
+ }
+ }
+}
+
+// Fixed height
+.kanban-fixed-height {
+ .kanban-container {
+ .kanban-board {
+ .kanban-drag {
+ position: relative;
+ overflow-y: auto;
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_jstree.scss b/src/_res/assets/sass/core/vendors/plugins/_jstree.scss
new file mode 100644
index 0000000..412d142
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_jstree.scss
@@ -0,0 +1,150 @@
+//
+// jsTree
+//
+
+.jstree-default {
+ .jstree-anchor {
+ color: var(--kt-gray-700);
+ padding: 0 8px 0 4px;
+ }
+
+ .jstree-icon {
+ color: var(--kt-gray-700);
+
+ font-size: 1.3rem;
+
+ &.la {
+ font-size: 1.5rem;
+ }
+ &.fa {
+ font-size: 1.2rem;
+ }
+ }
+
+ .jstree-disabled {
+ cursor: not-allowed;
+ line-height: auto;
+ height: auto;
+ opacity: 0.7;
+
+ .jstree-icon {
+ color: var(--kt-gray-700);
+ }
+ }
+
+ .jstree-clicked {
+ border: 0;
+ background: var(--kt-gray-100);
+ box-shadow: none;
+ }
+
+ .jstree-hovered {
+ border: 0;
+ background-color: var(--kt-gray-100);
+ box-shadow: none;
+ }
+
+ .jstree-wholerow-clicked,
+ .jstree-wholerow-clicked {
+ background: var(--kt-gray-200);
+ box-shadow: none;
+ }
+
+ .jstree-wholerow-hovered,
+ &.jstree-wholerow .jstree-wholerow-hovered {
+ border: 0;
+ background-color: var(--kt-gray-100);
+ box-shadow: none;
+ }
+}
+
+.jstree-open>.jstree-anchor>.fa-folder:before {
+ margin-left: 2px;
+ content: "\f07c";
+}
+
+.jstree-open>.jstree-anchor>.la-folder:before {
+ margin-left: 2px;
+ content: "\f200";
+}
+
+.jstree-default.jstree-rtl .jstree-node {
+ background-position: 100% 1px#{'/*rtl:ignore*/'} !important;
+}
+
+.jstree-default.jstree-rtl .jstree-last {
+ background: transparent #{'/*rtl:ignore*/'};
+ background-repeat: no-repeat;
+}
+
+.jstree-rtl .jstree-anchor {
+ padding: 0 4px 0 8px#{'/*rtl:ignore*/'};
+}
+
+// context menu
+.vakata-context,
+.vakata-context ul {
+ padding: 0.5rem 0;
+ min-width: 150px;
+ font-size: 1rem;
+ font-family: $font-family-base;
+ background: var(--kt-body-bg);
+ box-shadow: var(--kt-dropdown-box-shadow);
+ border: 0;
+ @include border-radius($border-radius);
+
+ li {
+ padding: 0;
+ border: 0;
+
+ a {
+ padding: 0rem 1.2rem;
+ border: 0;
+ //line-height: 2.2em;
+
+ i {
+ display: none;
+ }
+
+ .vakata-contextmenu-sep {
+ display: none;
+ }
+
+ span,
+ ins {
+ display: none;
+ border: 0 !important;
+ }
+ }
+ }
+
+ .vakata-context-hover>a,
+ li a:hover {
+ margin: 0;
+ background-color: var(--kt-gray-100);
+ color: var(--kt-primary);
+ box-shadow: none;
+
+ .span,
+ .ins {
+ border: 0 !important;
+ }
+ }
+}
+
+.vakata-context .vakata-context-separator a,
+.vakata-context-rtl .vakata-context-separator a {
+ margin: 0;
+ border: 0;
+ height: 2px;
+ background-color: var(--kt-gray-200);
+}
+
+.jstree-rename-input {
+ outline: none !important;
+ padding: 2px 6px !important;
+ margin-right: -4px !important;
+ background-color: var(--kt-gray-100) !important;
+ border: 1px solid var(--kt-gray-100) !important;
+ @include border-radius($border-radius);
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_leaflet.scss b/src/_res/assets/sass/core/vendors/plugins/_leaflet.scss
new file mode 100644
index 0000000..3cc6f34
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_leaflet.scss
@@ -0,0 +1,23 @@
+//
+// leaflet
+//
+
+.leaflet-container {
+ .leaflet-pane,
+ .leaflet-top,
+ .leaflet-bottom,
+ .leaflet-control {
+ z-index: 1 !important;
+ }
+
+ .leaflet-popup-content-wrapper {
+ border-radius: $border-radius !important;
+ text-align: center;
+ box-shadow: var(--kt-box-shadow) !important;
+
+ .leaflet-popup-content {
+ font-family: $font-family-sans-serif;
+ font-size: $font-size-base;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_mixins.scss b/src/_res/assets/sass/core/vendors/plugins/_mixins.scss
new file mode 100644
index 0000000..c22460e
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_mixins.scss
@@ -0,0 +1,5 @@
+//
+// Mixins
+//
+
+@import "mixins/nouislider";
diff --git a/src/_res/assets/sass/core/vendors/plugins/_nouislider.scss b/src/_res/assets/sass/core/vendors/plugins/_nouislider.scss
new file mode 100644
index 0000000..e61522d
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_nouislider.scss
@@ -0,0 +1,103 @@
+//
+// NoUiSlider
+//
+
+
+// Base
+.noUi-target {
+ border: 0;
+ background: var(--kt-gray-100);
+ box-shadow:none;
+
+ &.noUi-horizontal {
+ height: 15px;
+
+ .noUi-handle {
+ width: 24px;
+ height: 24px;
+ top: -4.5px;
+ border-radius: 50%;
+ outline: none;
+
+ &::before {
+ display: none;
+ }
+
+ &::after {
+ display: none;
+ }
+ }
+ }
+
+ &.noUi-vertical {
+ height: 150px;
+ width: 15px;
+
+ .noUi-handle {
+ width: 24px;
+ height: 24px;
+ right: -4.5px;
+ border-radius: 50%;
+ outline: none;
+
+ &::before {
+ display: none;
+ }
+
+ &::after {
+ display: none;
+ }
+ }
+ }
+
+ .noUi-connect {
+ background: var(--kt-component-active-bg);
+ }
+
+ .noUi-handle {
+ background-color: $white; //var(--kt-body-bg);
+ border: 1px solid var(--kt-gray-200);
+ box-shadow:var(--kt-box-shadow-sm)
+ }
+
+ // Small size
+ &.noUi-sm {
+ @include nouislider-size(6px, 20px, 20px, 7px);
+ }
+
+ // Large size
+ &.noUi-lg {
+ @include nouislider-size(18px, 30px, 30px, 6px);
+ }
+}
+
+// Theme colors
+@each $name, $value in $theme-colors {
+ // NoUiSlider success color option
+ .noUi-target.noUi-target-#{$name} {
+ .noUi-connects {
+ background-color: var(--kt-#{$name}-light);
+
+ .noUi-connect {
+ background-color: var(--kt-#{$name});
+ }
+ }
+
+ .noUi-handle {
+ border: 1px solid var(--kt-#{$name});
+ box-shadow: 0 3px 6px -3px rgba(var(--kt-#{$name}), 0.7);
+ background-color: var(--kt-#{$name});
+ }
+ }
+}
+
+// Tooltip
+.noUi-tooltip {
+ box-shadow: var(--kt-tooltip-box-shadow);
+ background: var(--kt-tooltip-bg);
+ color: var(--kt-tooltip-color);
+ font-size: $tooltip-font-size;
+ border: 0;
+ padding: 0.5rem 0.75rem;
+ @include border-radius($tooltip-border-radius);
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_plugins.angular.scss b/src/_res/assets/sass/core/vendors/plugins/_plugins.angular.scss
new file mode 100644
index 0000000..0242e13
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_plugins.angular.scss
@@ -0,0 +1,12 @@
+//
+// Plugins
+//
+
+// Import Dependencies
+@import "root";
+@import "prismjs";
+@import "nouislider";
+@import "apexcharts";
+@import "fslightbox";
+@import "tiny-slider";
+@import "fullcalendar";
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_plugins.react.scss b/src/_res/assets/sass/core/vendors/plugins/_plugins.react.scss
new file mode 100644
index 0000000..0242e13
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_plugins.react.scss
@@ -0,0 +1,12 @@
+//
+// Plugins
+//
+
+// Import Dependencies
+@import "root";
+@import "prismjs";
+@import "nouislider";
+@import "apexcharts";
+@import "fslightbox";
+@import "tiny-slider";
+@import "fullcalendar";
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_plugins.scss b/src/_res/assets/sass/core/vendors/plugins/_plugins.scss
new file mode 100644
index 0000000..c2df238
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_plugins.scss
@@ -0,0 +1,32 @@
+//
+// Plugins
+//
+
+// Import Dependencies
+@import "root";
+@import "prismjs";
+@import "fslightbox";
+@import "select2";
+@import "formvalidation";
+@import "daterangepicker";
+@import "flatpickr";
+@import "tagify";
+@import "bootstrap-maxlength";
+@import "ckeditor";
+@import "datatables";
+@import "dropzone";
+@import "gmaps";
+@import "nouislider";
+@import "quill";
+@import "recaptcha";
+@import "sweetalert2";
+@import "tinymce";
+@import "toastr";
+@import "draggable";
+@import "apexcharts";
+@import "leaflet";
+@import "tiny-slider";
+@import "fullcalendar";
+@import "jkanban";
+@import "jstree";
+@import "vis-timeline";
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_plugins.vue.scss b/src/_res/assets/sass/core/vendors/plugins/_plugins.vue.scss
new file mode 100644
index 0000000..0242e13
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_plugins.vue.scss
@@ -0,0 +1,12 @@
+//
+// Plugins
+//
+
+// Import Dependencies
+@import "root";
+@import "prismjs";
+@import "nouislider";
+@import "apexcharts";
+@import "fslightbox";
+@import "tiny-slider";
+@import "fullcalendar";
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_prismjs.scss b/src/_res/assets/sass/core/vendors/plugins/_prismjs.scss
new file mode 100644
index 0000000..fa95a54
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_prismjs.scss
@@ -0,0 +1,84 @@
+//
+// Prismjs
+//
+
+// Highlight
+.highlight {
+ position: relative;
+ background: var(--kt-highlight-bg);
+ border-radius: $border-radius;
+ padding: 1.75rem 1.5rem 1.75rem 1.5rem;
+
+ // Tabs
+ .nav {
+ border-bottom: 1px solid var(--kt-highlight-border);
+ padding-bottom: 1rem;
+ margin-bottom: 1rem;
+ margin-top: -0.25rem;
+
+ .nav-item {
+ margin-right: 0.75rem;
+ }
+
+ .nav-link {
+ font-size: 0.9rem;
+ font-weight: 500;
+ padding: 0.35rem 1rem;
+ border-radius: $border-radius;
+ color: var(--kt-highlight-btn-color);
+ transition: $transition-base;
+ background-color: transparent;
+
+ &:focus,
+ &.active {
+ transition: $transition-base;
+ background-color: var(--kt-highlight-btn-bg-hover);
+ color: var(--kt-highlight-btn-color-hover);
+ }
+ }
+ }
+
+ .highlight-copy {
+ display: none;
+ position: absolute;
+ right: 1.75rem;
+ top: 1.5rem;
+ font-size: 0.85rem;
+ font-weight: 500;
+ padding: 0.35rem 1rem !important;
+ transition: $transition-base;
+ background-color: var(--kt-highlight-btn-bg);
+ color: var(--kt-highlight-btn-color);
+
+ &:focus,
+ &:hover {
+ transition: $transition-base;
+ background-color: var(--kt-highlight-btn-bg-hover);
+ color: var(--kt-highlight-btn-color-hover);
+ }
+ }
+
+ &:hover {
+ .highlight-copy {
+ display: flex;
+ }
+ }
+
+ // Code
+ .highlight-code {
+ pre {
+ background-color: transparent;
+ overflow: auto;
+ padding: 0;
+ margin: 0;
+
+ @include scrollbar-color( var(--kt-highlight-scrollbar-color), var(--kt-highlight-scrollbar-color-hover));
+
+ code[class*="language-"] {
+ padding: 0;
+ margin: 0;
+ font-size: 1rem !important;
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_quill.scss b/src/_res/assets/sass/core/vendors/plugins/_quill.scss
new file mode 100644
index 0000000..5f52679
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_quill.scss
@@ -0,0 +1,185 @@
+//
+// Quill
+//
+
+// Base
+.ql-toolbar {
+ font-family: $font-family-sans-serif;
+
+ &.ql-snow {
+ border: 1px solid var(--kt-border-color);
+ @include border-top-radius($border-radius);
+
+ .ql-picker,
+ button {
+ .ql-fill,
+ .ql-stroke {
+ stroke: var(--kt-gray-500);
+ }
+
+ .ql-fill {
+ fill: var(--kt-gray-500);
+ }
+
+ &.ql-expanded,
+ &.ql-active,
+ &:focus,
+ &:hover {
+ .ql-fill,
+ .ql-stroke {
+ stroke: var(--kt-primary);
+ }
+
+ .ql-fill {
+ fill: var(--kt-primary);
+ }
+ }
+ }
+ }
+}
+
+.ql-editor {
+ color: var(--kt-input-color);
+
+ &.ql-blank {
+ &:before {
+ left: auto !important;
+ right: auto !important;
+ color: var(--kt-text-muted) !important;
+ font-style: normal !important;
+ }
+ }
+}
+
+.ql-container {
+ &.ql-snow {
+ background-color: var(--kt-input-bg);
+ border: 1px solid var(--kt-gray-200);
+ border-top: 0;
+ @include border-bottom-radius($border-radius);
+ }
+}
+
+.ql-snow {
+ .ql-picker {
+ .ql-picker-label {
+ color: var(--kt-gray-500);
+
+ &.ql-active,
+ &:hover {
+ color: var(--kt-primary);
+ }
+ }
+
+ &.ql-expanded {
+ outline: none !important;
+ border-color: transparent !important;
+
+ .ql-picker-label {
+ border-color: transparent !important;
+ color: var(--kt-primary);
+ outline: none !important;
+
+ &.ql-active,
+ &:hover {
+ color: var(--kt-primary);
+ }
+ }
+
+ .ql-picker-options {
+ border: 0;
+ padding: 0.5rem 1rem;
+ box-shadow: var(--kt-dropdown-box-shadow);
+ background-color: var(--kt-body-bg);
+ @include border-radius($border-radius);
+
+ .ql-picker-item {
+ color: var(--kt-gray-600);
+ outline: none;
+
+ &.ql-selected,
+ &.ql-active,
+ &:hover {
+ color: var(--kt-primary);
+ }
+ }
+ }
+ }
+ }
+
+ .ql-tooltip {
+ border: 0;
+ padding: 0.5rem 1rem;
+ box-shadow: var(--kt-dropdown-box-shadow);
+ @include border-radius($border-radius);
+
+ input[type=text] {
+ @include input-reset();
+ border: 1px solid var(--kt-border-color);
+ color: $input-plaintext-color;
+ outline: none !important;
+ @include border-radius($border-radius);
+
+ &:active,
+ &:focus {
+ border-color: var(--kt-input-focus-border-color) !important;
+ }
+ }
+
+ .ql-preview {
+ color: var(--kt-gray-600);
+ }
+
+ .ql-action {
+ transition: color 0.3s ease;
+ color: var(--kt-gray-600);
+
+ &:hover {
+ transition: color 0.3s ease;
+ color: var(--kt-primary);
+ }
+ }
+
+ // Tooltip adjustment in modal
+ .modal & {
+ &.ql-editing {
+ left: 20px !important;
+ }
+ }
+ }
+
+ .ql-editor {
+ pre.ql-syntax {
+ background-color: var(--kt-gray-900);
+ color: var(--kt-text-muted);
+ overflow: visible;
+ @include border-radius($border-radius);
+ }
+ }
+}
+
+// Plain Style
+.ql-quil.ql-quil-plain {
+ .ql-toolbar {
+ padding: 0;
+ margin: 0;
+ border: 0;
+
+ &:after {
+ display: none;
+ }
+
+ .ql-picker-label {
+ padding-left: 0;
+ }
+ }
+
+ .ql-container {
+ border: 0;
+ }
+
+ .ql-editor {
+ border: 0;
+ padding: 0;
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_recaptcha.scss b/src/_res/assets/sass/core/vendors/plugins/_recaptcha.scss
new file mode 100644
index 0000000..4c0d42e
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_recaptcha.scss
@@ -0,0 +1,32 @@
+//
+// Recaptcha
+//
+
+
+// Base
+.recaptcha {
+ padding: 15px;
+ border: 1px solid var(--kt-gray-200);
+ @include border-radius($border-radius);
+
+ .recaptcha-img {
+ margin-bottom: 10px;
+ }
+
+ .recaptcha_only_if_incorrect_sol {
+ color: var(--kt-danger);
+ }
+
+ .input-group {
+ .btn {
+ i {
+ padding-right: 0;
+ }
+ }
+
+ .form-control {
+ @include border-top-start-radius($border-radius !important);
+ @include border-bottom-start-radius($border-radius !important);
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_root.scss b/src/_res/assets/sass/core/vendors/plugins/_root.scss
new file mode 100644
index 0000000..afab66f
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_root.scss
@@ -0,0 +1,36 @@
+//
+// CSS Variables
+//
+
+:root,
+[data-theme="light"] {
+ // Select2
+
+ // Prismjs
+ --kt-highlight-bg: #{$highlight-bg};
+
+ --kt-highlight-border: #{$highlight-border};
+
+ --kt-highlight-btn-bg: #{$highlight-btn-bg};
+ --kt-highlight-btn-bg-hover: #{$highlight-btn-bg-hover};
+ --kt-highlight-btn-color: #{$highlight-btn-color};
+ --kt-highlight-btn-color-hover: #{$highlight-btn-color-hover};
+
+ --kt-highlight-scrollbar-color: #{$highlight-scrollbar-color};
+ --kt-highlight-scrollbar-color: #{$highlight-scrollbar-hover-color};
+}
+
+[data-theme="dark"] {
+ // Prismjs
+ --kt-highlight-bg: #{$highlight-bg-dark};
+
+ --kt-highlight-border: #{$highlight-border-dark};
+
+ --kt-highlight-btn-bg: #{$highlight-btn-bg-dark};
+ --kt-highlight-btn-bg-hover: #{$highlight-btn-bg-hover-dark};
+ --kt-highlight-btn-color: #{$highlight-btn-color-dark};
+ --kt-highlight-btn-color-hover: #{$highlight-btn-color-hover-dark};
+
+ --kt-highlight-scrollbar-color: #{$highlight-scrollbar-color-dark};
+ --kt-highlight-scrollbar-color-hover: #{$highlight-scrollbar-hover-color-dark};
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_select2.scss b/src/_res/assets/sass/core/vendors/plugins/_select2.scss
new file mode 100644
index 0000000..20fc962
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_select2.scss
@@ -0,0 +1,399 @@
+//
+// Select2 plugin customization: https://select2.org
+//
+
+$select2-dropdown-padding: 1rem 0;
+$select2-dropdown-option-padding: 0.75rem 1.25rem;
+$select2-dropdown-option-margin: 0 0;
+$select2-dropdown-option-check-padding: 1.25rem;
+
+$select2-dropdown-group-padding: 0 1.25rem 0 1.25rem;
+$select2-dropdown-group-margin: 0 0 0.25rem 0;
+
+$select2-search-padding: 0.5rem 1.25rem;
+$select2-search-margin: 0 0 0.5rem 0;
+
+$select2-clear-size: 0.7rem;
+$select2-clear-color: var(--kt-gray-700);
+$select2-clear-color-dark: var(--kt-gray-700);
+$select2-clear-color-hover: var(--kt-primary);
+$select2-clear-right: $form-select-indicator-padding; //$form-select-padding-x +
+
+
+// Bootstrap .form-control sizing integration
+$select2-tag-clear-size: 0.6rem;
+
+$select2-tag-padding-y-sm: 0.1rem;
+$select2-tag-padding-x-sm: 0.35rem;
+$select2-input-padding-y-sm: $input-padding-y-sm - $select2-tag-padding-y-sm * 2;
+
+$select2-tag-padding-y: 0.1rem;
+$select2-tag-padding-x: 0.5rem;
+$select2-input-padding-y: $input-padding-y - $select2-tag-padding-y * 2;
+
+$select2-tag-padding-y-lg: 0.15rem;
+$select2-tag-padding-x-lg: 0.65rem;
+$select2-input-padding-y-lg: $input-padding-y-lg - $select2-tag-padding-y-lg * 2;
+
+// Bootstrapa 5 Theme
+.select2-container--bootstrap5 {
+ // Selection
+ .select2-selection {
+ box-shadow: none !important;
+ height: auto;
+ outline: none !important;
+ }
+
+ // Selection focus & open states
+ &.select2-container--focus,
+ &.select2-container--open {
+ .form-select-solid {
+ background-color: var(--kt-input-solid-bg-focus);
+ }
+
+ .form-select:not(.form-select-solid):not(.form-select-transparent) {
+ border-color: var(--kt-input-focus-border-color);
+ }
+ }
+
+ // Search
+ .select2-search.select2-search--inline {
+ .select2-search__field {
+ color: var(--kt-input-color);
+ @include placeholder($input-placeholder-color);
+ font-weight: $input-font-weight;
+ font-family: inherit !important;
+ background-color: transparent;
+ border: 0;
+ box-shadow: none;
+ outline: none;
+ line-height: 1;
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ .form-select-solid .select2-search.select2-search--inline {
+ .select2-search__field {
+ color: var(--kt-input-solid-color);
+ font-family: inherit !important;
+ @include placeholder(var(--kt-input-solid-placeholder-color));
+ }
+ }
+
+ // Single mode
+ .select2-selection--single {
+ display: flex;
+ align-items: center;
+
+ // Selected
+ .select2-selection__rendered {
+ display: block;
+ padding-left: 0;
+ padding-right: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--kt-input-color);
+ }
+
+ // Placeholder
+ .select2-selection__placeholder {
+ color: $input-placeholder-color;
+ }
+
+ // Form select solid
+ &.form-select-solid {
+ // Selected
+ .select2-selection__rendered {
+ color: var(--kt-input-solid-color);
+ }
+
+ // Placeholder
+ .select2-selection__placeholder {
+ color: var(--kt-input-solid-placeholder-color);
+ }
+ }
+
+ // Form select transparent
+ &.form-select-transparent {
+ // Selected
+ .select2-selection__rendered {
+ color: var(--kt-gray-800);
+ }
+
+ // Placeholder
+ .select2-selection__placeholder {
+ color: var(--kt-gray-800);
+ }
+ }
+
+ // Form select dark color
+ &.form-select-dark {
+ // Selected
+ .select2-selection__rendered {
+ color: var(--kt-gray-900);
+ }
+ }
+ }
+
+ // Multiple mode
+ .select2-selection--multiple {
+ display: flex;
+ align-items: center;
+
+ // Search
+ .select2-search.select2-search--inline {
+ display: inline-flex;
+ }
+
+ // Selected
+ .select2-selection__rendered {
+ display: inline;
+ margin: 0;
+ padding: 0;
+
+ .select2-selection__choice {
+ display: inline-flex;
+ align-items: center;
+ position: relative;
+ background-color: var(--kt-gray-300);
+
+ .select2-selection__choice__remove {
+ @include svg-bg-icon(close, var(--kt-gray-700));
+ display: block;
+ position: absolute;
+ transform: translateY(-50%);
+ opacity: 0.5;
+ border: 0;
+ transition: $transition-link;
+ top: 50%;
+
+ span {
+ display: none;
+ }
+
+ &:hover {
+ opacity: 1;
+ @include svg-bg-icon(close, var(--kt-primary));
+ transition: $transition-link;
+ }
+ }
+
+ .select2-selection__choice__display {
+ font-weight: $font-weight-semibold;
+ }
+ }
+ }
+
+ // Choice
+ .select2-selection__choice {
+ .select2-selection__choice__remove {
+ height: $select2-tag-clear-size;
+ width: $select2-tag-clear-size;
+ }
+ }
+
+ // Sizes
+ &.form-select-sm {
+ min-height: $input-height-sm;
+ padding-top: $select2-input-padding-y-sm;
+ padding-bottom: $select2-input-padding-y-sm;
+
+ .select2-selection__choice {
+ border-radius: $btn-border-radius-sm;
+ padding: $select2-tag-padding-y-sm $select2-tag-padding-x-sm;
+ margin-right: $select2-tag-padding-x-sm;
+ margin-top: $select2-tag-padding-y-sm;
+ margin-bottom: $select2-tag-padding-y-sm;
+
+ .select2-selection__choice__display {
+ margin-left: $select2-tag-padding-x-sm + $select2-tag-clear-size;
+ font-size: $input-btn-font-size-sm;
+ }
+ }
+
+ .select2-search__field {
+ height: 14px;
+ }
+ }
+
+ &:not(.form-select-sm):not(.form-select-lg) {
+ min-height: $input-height;
+ padding-top: $select2-input-padding-y;
+ padding-bottom: $select2-input-padding-y;
+
+ .select2-selection__choice {
+ border-radius: $btn-border-radius;
+ padding: $select2-tag-padding-y $select2-tag-padding-x;
+ margin-right: $select2-tag-padding-x;
+ margin-top: $select2-tag-padding-y;
+ margin-bottom: $select2-tag-padding-y;
+
+ .select2-selection__choice__display {
+ margin-left: $select2-tag-padding-x + $select2-tag-clear-size;
+ font-size: $input-btn-font-size;
+ }
+ }
+
+ .select2-search__field {
+ height: 16px;
+ }
+ }
+
+ &.form-select-lg {
+ min-height: $input-height-lg;
+ padding-top: $select2-input-padding-y-lg;
+ padding-bottom: $select2-input-padding-y-lg;
+
+ .select2-selection__choice {
+ border-radius: $btn-border-radius-lg;
+ padding: $select2-tag-padding-y-lg $select2-tag-padding-x-lg;
+ margin-right: $select2-tag-padding-x-lg;
+ margin-top: $select2-tag-padding-y-lg;
+ margin-bottom: $select2-tag-padding-y-lg;
+
+ .select2-selection__choice__display {
+ margin-left: $select2-tag-padding-x-lg + $select2-tag-clear-size;
+ font-size: $input-btn-font-size-lg;
+ }
+ }
+
+ .select2-search__field {
+ height: 18px;
+ }
+ }
+ }
+
+ // Dropdown
+ .select2-dropdown {
+ border: 0;
+ box-shadow: var(--kt-dropdown-box-shadow);
+ border-radius: $dropdown-border-radius;
+ padding: $select2-dropdown-padding;
+ background-color: var(--kt-dropdown-bg);
+
+ // In modal
+ .modal-open & {
+ z-index: $zindex-modal + 1;
+ }
+
+ // Search
+ .select2-search {
+ padding: $select2-search-padding;
+ margin: $select2-search-margin;
+
+ .select2-search__field {
+ background-color: var(--kt-body-bg);
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ color: var(--kt-input-color);
+ font-size: $input-font-size-sm;
+ border: 1px solid var(--kt-input-border-color);
+ border-radius: $input-border-radius-sm;
+ outline: 0 !important;
+
+ &:focus,
+ &:active {
+ border: 1px solid var(--kt-input-focus-border-color);
+ }
+ }
+ }
+
+ // Options
+ .select2-results__options {
+ max-height: 250px;
+ overflow-y: auto;
+ }
+
+ // Option
+ .select2-results__option {
+ color: var(--kt-gray-700);
+ transition: $transition-link;
+ padding: $select2-dropdown-option-padding;
+ margin: $select2-dropdown-option-margin;
+
+ &.select2-results__option--highlighted {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ transition: $transition-link;
+ }
+
+ &.select2-results__option--selected {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ transition: $transition-link;
+ position: relative;
+
+ &:after {
+ top: 50%;
+ display: block;
+ position: absolute;
+ transform: translateY(-50%);
+ height: 0.75rem;
+ width: 0.75rem;
+ content: "";
+ @include svg-bg-icon(check, var(--kt-component-hover-color));
+ mask-position: center;
+ -webkit-mask-position: center;
+ right: $select2-dropdown-option-check-padding;
+ }
+ }
+
+ &.select2-results__option--disabled {
+ color: var(--kt-gray-400);
+ }
+
+ &.select2-results__message {
+ color: var(--kt-gray-600);
+ }
+
+ &.select2-results__option--group {
+ padding-left: 0;
+ padding-right: 0;
+
+ .select2-results__group {
+ display: block;
+ color: var(--kt-gray-800);
+ font-weight: $font-weight-semibold;
+ font-size: $h5-font-size;
+ padding: $select2-dropdown-group-padding;
+ margin: $select2-dropdown-group-margin;
+ }
+
+ .select2-results__option {
+ padding: $select2-dropdown-option-padding;
+ margin: $select2-dropdown-option-margin;
+ }
+ }
+ }
+ }
+
+ // Clear
+ .select2-selection__clear {
+ display: block;
+ height: $select2-clear-size;
+ width: $select2-clear-size;
+ top: 50%;
+ right: $select2-clear-right;
+ position: absolute;
+ transform: translateY(-50%);
+ background-color: var(--kt-gray-700) !important;
+ @include svg-bg-icon(close, var(--kt-gray-700));
+
+ span {
+ display: none;
+ }
+
+ &:hover {
+ background-color: var(--kt-primary) !important;
+ @include svg-bg-icon(close, var(--kt-primary));
+ }
+ }
+}
+
+// Floating label integration
+.form-floating {
+ .form-select {
+ padding-top: $form-floating-input-padding-t !important;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_sweetalert2.scss b/src/_res/assets/sass/core/vendors/plugins/_sweetalert2.scss
new file mode 100644
index 0000000..4dbe6ab
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_sweetalert2.scss
@@ -0,0 +1,112 @@
+//
+// SweetAlert2
+//
+
+// Base
+html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
+body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown):not(.modal-open) {
+ overflow-y: initial !important;
+
+ &:not(.sweetalert2-nopadding) {
+ padding-right: 0 !important;
+ }
+}
+
+// Popup
+.swal2-popup {
+ background-color: var(--kt-body-bg);
+ padding: 2rem;
+ @include border-radius($border-radius);
+
+ .swal2-title {
+ font-weight: 500;
+ font-size: 1.3rem;
+ color: var(--kt-dark);
+ }
+
+ .swal2-html-container,
+ .swal2-content {
+ font-weight: normal;
+ font-size: 1.1rem;
+ margin-top: 1.5rem;
+ color: var(--kt-gray-800);
+ }
+
+ .btn {
+ margin: 15px 5px 0;
+ }
+
+ .swal2-styled {
+ &:focus {
+ box-shadow: none;
+ }
+ }
+
+ .swal2-actions {
+ margin: 1.5rem auto 1rem auto;
+ }
+}
+
+// Container
+.swal2-container {
+ overflow-y: hidden !important;
+
+ &.swal2-shown {
+ background-color: rgba($black, 0.2);
+ }
+
+ // Content
+ .swal2-html-container {
+ max-height: 200px;
+ overflow: auto;
+ }
+}
+
+body.swal2-height-auto {
+ height: 100% !important;
+}
+
+// State Colors
+.swal2-icon {
+ // Warning
+ &.swal2-warning {
+ border-color: var(--kt-warning);
+ color: var(--kt-warning);
+ }
+
+ // Error
+ &.swal2-error {
+ border-color: var(--kt-danger);
+ color: var(--kt-danger);
+
+ [class^=swal2-x-mark-line] {
+ background-color: rgba(var(--kt-danger-rgb), 0.75);
+ }
+ }
+
+ // Success
+ &.swal2-success {
+ border-color: var(--kt-success);
+ color: var(--kt-success);
+
+ [class^=swal2-success-line] {
+ background-color: var(--kt-success);
+ }
+
+ .swal2-success-ring {
+ border-color: rgba(var(--kt-success-rgb), 0.3);
+ }
+ }
+
+ // Info
+ &.swal2-info {
+ border-color: var(--kt-info);
+ color: var(--kt-info);
+ }
+
+ // Question
+ &.swal2-question {
+ border-color: var(--kt-primary);
+ color: var(--kt-primary);
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_tagify.scss b/src/_res/assets/sass/core/vendors/plugins/_tagify.scss
new file mode 100644
index 0000000..3be65c6
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_tagify.scss
@@ -0,0 +1,221 @@
+//
+// Tagify
+//
+
+// Bootstrap .form-control sizing integration
+$tagify-tag-padding-y-sm: 0.3rem;
+$tagify-tag-padding-x-sm: 0.3rem;
+$tagify-input-padding-y-sm: #{$input-padding-y-sm - $tagify-tag-padding-y-sm};
+
+$tagify-tag-padding-y: 0.4rem;
+$tagify-tag-padding-x: 0.4rem;
+$tagify-input-padding-y: $input-padding-y - $tagify-tag-padding-y;
+
+$tagify-tag-padding-y-lg: 0.5rem;
+$tagify-tag-padding-x-lg: 0.5rem;
+$tagify-input-padding-y-lg: $input-padding-y-lg - $tagify-tag-padding-y-lg;
+
+// Base
+.tagify {
+ --tagify-dd-bg-color : var(--kt-body-bg);
+ --tags-border-color : var(--kt-input-border-color);
+ --tags-hover-border-color : var(--kt-input-border-color);
+ --tags-focus-border-color : var(--kt-input-focus-border-color);
+ --tag-bg : var(--kt-gray-200);
+ --tag-hover : var(--kt-gray-200);
+ --tag-text-color : var(--kt-gray-700);
+ --tag-text-color--edit : var(--kt-gray-700);
+ --tag-pad : 0 0.5rem;
+ --tag-inset-shadow-size : 1rem;
+ --tag-invalid-color : var(--kt-danger);
+ --tag-invalid-bg : var(--kt-danger-light);
+ --tag-remove-bg : var(--kt-gray-200);
+ --tag-remove-btn-color : transparent;
+ --tag-remove-btn-bg : transparent;
+ --tag-remove-btn-bg--hover : transparent;
+ --input-color : var(--kt-gray-700);
+ --placeholder-color : var(--kt-gray-400);
+ --placeholder-color-focus : var(--kt-gray-500);
+ --loader-size : .8rem;
+
+ .tagify__tag {
+ background-color: var(--tag-bg);
+ margin: 0;
+ line-height: 1;
+
+ div {
+ border-radius: inherit;
+ }
+
+ .tagify__tag-text {
+ overflow: visible;
+ }
+
+ .tagify__tag__removeBtn {
+ width: 0.6rem;
+ height: 0.6rem;
+ margin: 0 0.5rem 0 0;
+ border-radius: 0;
+ content: " ";
+ @include svg-bg-icon(close, var(--kt-gray-500));
+
+ &:after {
+ display: none;
+ }
+
+ &:hover {
+ @include svg-bg-icon(close, var(--kt-primary));
+ }
+ }
+
+ // Not allowed state
+ &.tagify--notAllowed {
+ div {
+ .tagify__tag-text {
+ color: var(--kt-danger);
+ opacity: .5;
+ }
+ }
+
+ .tagify__tag__removeBtn {
+ opacity: .5;
+ @include svg-bg-icon(close, var(--kt-danger));
+
+ &:hover {
+ background: transparent;
+ opacity: .75;
+ }
+ }
+ }
+ }
+
+ .tagify__input {
+ margin: 0;
+
+ &:before {
+ font-size: inherit;
+ line-height: inherit;
+ font-weight: inherit;
+ }
+ }
+
+ // Sizing
+ &.form-control {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+ }
+
+ &.form-control-sm {
+ border-radius: $btn-border-radius-sm;
+ min-height: $input-height-sm;
+ padding-top: $tagify-input-padding-y-sm;
+ padding-bottom: $tagify-input-padding-y-sm;
+
+ .tagify__tag {
+ padding: $tagify-tag-padding-y-sm $tagify-tag-padding-x-sm;
+ border-radius: $btn-border-radius-sm;
+
+ .tagify__tag-text {
+ font-size: $input-btn-font-size-sm;
+ }
+ }
+ }
+
+ &:not(.form-control-sm):not(.form-control-lg) {
+ border-radius: $btn-border-radius;
+ min-height: $input-height;
+ padding-top: $tagify-input-padding-y;
+ padding-bottom: $tagify-input-padding-y;
+
+ .tagify__tag {
+ padding: $tagify-tag-padding-y $tagify-tag-padding-x;
+ border-radius: $btn-border-radius;
+
+ .tagify__tag-text {
+ font-size: $input-btn-font-size;
+ }
+ }
+ }
+
+ &.form-control-lg {
+ border-radius: $btn-border-radius-lg;
+ min-height: $input-height-lg;
+ padding-top: $tagify-input-padding-y-lg;
+ padding-bottom: $tagify-input-padding-y-lg;
+
+ .tagify__tag {
+ padding: $tagify-tag-padding-y-lg $tagify-tag-padding-x-lg;
+ border-radius: $btn-border-radius-lg;
+
+ .tagify__tag-text {
+ font-size: $input-btn-font-size-lg;
+ }
+ }
+ }
+}
+
+// Dropdown
+.tagify__dropdown {
+ box-shadow: var(--kt-dropdown-box-shadow);
+ border: 0 !important;
+ outline: none !important;
+ padding: 0.75rem 0;
+ z-index: $zindex-dropdown;
+ background-color: var(--kt-body-bg);
+ @include border-radius($border-radius);
+
+ // Wrapper
+ ._wrapper {
+ max-height: none;
+ @include border-radius($border-radius);
+ }
+
+ // In modal
+ .modal-open & {
+ z-index: $zindex-modal + 1;
+ }
+
+ .tagify__dropdown__wrapper {
+ background-color: var(--kt-body-bg);
+ border: 0 !important;
+ outline: none !important;
+ box-shadow: none;
+ }
+
+ .tagify__dropdown__item {
+ color: var(--kt-gray-700);
+ border-radius: 0;
+ padding: 0.75rem 1.5rem;
+ margin: 0;
+ box-shadow: none;
+ font-weight: $font-weight-semibold;
+
+ &:hover,
+ &.tagify__dropdown__item--active {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ }
+ }
+
+ // Suggestions
+ &.tagify__inline__suggestions {
+ padding: $input-padding-y $input-padding-x;
+
+ .tagify__dropdown__item {
+ display: inline-block;
+ font-size: $font-size-sm;
+ padding: 0.35rem 0.5rem;
+ margin: 0.25rem 0.5rem 0.25rem 0;
+ background-color: var(--kt-gray-200);
+ color: var(--kt-gray-700);
+ @include border-radius($border-radius);
+
+ &:hover,
+ &.tagify__dropdown__item--active {
+ background-color: var(--kt-component-hover-bg);
+ color: var(--kt-component-hover-color);
+ }
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_tiny-slider.scss b/src/_res/assets/sass/core/vendors/plugins/_tiny-slider.scss
new file mode 100644
index 0000000..c8a6872
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_tiny-slider.scss
@@ -0,0 +1,109 @@
+//
+// Slider
+//
+
+// Base
+.tns {
+ position: relative;
+ overflow: hidden;
+
+ [data-tns="true"] {
+ display: none;
+ }
+
+ .tns-item {
+ opacity: 0;
+ transition: all 0.3s ease;
+ }
+
+ .tns-controls {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ button {
+ outline: none;
+ border: 0;
+ margin: 0 0.25rem;
+ @include border-radius($btn-border-radius);
+ padding: 0.5rem 0.75rem;
+ background-color: var(--kt-primary);
+ color: var(--kt-primary-inverse);
+
+ &:hover {
+ background-color: var(--kt-primary-active);
+ }
+ }
+ }
+
+ .tns-nav {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+
+ button {
+ display: block;
+ outline: none;
+ width: 1.25rem;
+ height: 0.75rem;
+ background-color: var(--kt-gray-200);
+ margin: 0 0.25rem;
+ border: 0;
+ @include border-radius(0.35rem);
+
+ &.tns-nav-active{
+ background-color: var(--kt-primary);
+ }
+ }
+ }
+
+ &.tns-initiazlied {
+ [data-tns="true"] {
+ display: flex;
+ }
+
+ .tns-item {
+ opacity: 1;
+ transition: all 0.3s ease;
+ }
+ }
+
+ // Default
+ &.tns-default {
+ position: relative;
+
+ // Navs
+ [data-controls="prev"],
+ [data-controls="next"] {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ [data-controls="prev"] {
+ left: 0;
+ }
+
+ [data-controls="next"] {
+ right: 0;
+ }
+
+ .tns-outer {
+ margin: 0 4rem;
+
+ // Tablet mode
+ @include media-breakpoint-down(md) {
+ margin: 0 2rem;
+ }
+ }
+ }
+}
+
+// Utils
+.tns-hide-disabled-nav {
+ [disabled] {
+ display: none !important;
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/_tinymce.scss b/src/_res/assets/sass/core/vendors/plugins/_tinymce.scss
new file mode 100644
index 0000000..bc9f624
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_tinymce.scss
@@ -0,0 +1,13 @@
+//
+// TinyMCE
+//
+
+
+// Base
+.tox-target{
+ display: none;
+}
+
+.tox-tinymce{
+ @include border-radius($border-radius !important);
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_toastr.scss b/src/_res/assets/sass/core/vendors/plugins/_toastr.scss
new file mode 100644
index 0000000..62d9fc4
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_toastr.scss
@@ -0,0 +1,87 @@
+//
+// Toastr
+//
+
+// Base
+.toastr {
+ // this is for RTL
+ background-position: calc(100% - 1.5rem) center !important;
+ /*rtl:ignore*/
+ background-position: 1.5rem center !important;
+ box-shadow: var(--kt-dropdown-box-shadow) !important;
+ border-radius: $dropdown-border-radius !important;
+ border: 0 !important;
+ background-color: var(--kt-gray-100);
+ color: var(--kt-gray-700);
+ padding: 1.25rem 1.25rem 1.25rem 4.5rem !important;
+
+ .toastr-close-button {
+ outline: none !important;
+ font-size: 0;
+ width: 0.85rem;
+ height: 0.85rem;
+ }
+
+ // Title
+ .toastr-title {
+ font-size: 1.15rem;
+ font-weight: $font-weight-semibold;
+
+ & + .toastr-message {
+ margin-top: 0.25rem;
+ }
+ }
+
+ // Message
+ .toastr-message {
+ font-size: 1rem;
+ font-weight: $font-weight-normal;
+ }
+
+ // States
+ &.toastr-success {
+ background-color: var(--kt-success);
+ color: var(--kt-success-inverse);
+
+ .toastr-close-button {
+ @include svg-bg-icon(close, var(--kt-success-inverse));
+ }
+ }
+
+ &.toastr-info {
+ background-color: var(--kt-info);
+ color: var(--kt-info-inverse);
+
+ .toastr-close-button {
+ @include svg-bg-icon(close, var(--kt-info-inverse));
+ }
+ }
+
+ &.toastr-warning {
+ background-color: var(--kt-warning);
+ color: var(--kt-warning-inverse);
+
+ .toastr-close-button {
+ @include svg-bg-icon(close, var(--kt-warning-inverse));
+ }
+ }
+
+ &.toastr-error {
+ background-color: var(--kt-danger);
+ color: var(--kt-danger-inverse);
+
+ .toastr-close-button {
+ @include svg-bg-icon(close, var(--kt-danger-inverse));
+ }
+ }
+}
+
+
+// Placements
+.toastr-top-center {
+ top: 12px;
+}
+
+.toastr-bottom-center {
+ bottom: 12px;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/core/vendors/plugins/_variables.scss b/src/_res/assets/sass/core/vendors/plugins/_variables.scss
new file mode 100644
index 0000000..6918d84
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_variables.scss
@@ -0,0 +1,35 @@
+//
+// 3rd-party config
+//
+
+
+// Prismjs
+$highlight-bg: #1e1e3f;
+$highlight-bg-dark: #151521;
+
+$highlight-border: rgba($white, 0.1);
+$highlight-border-dark: rgba($white, 0.1);
+
+$highlight-btn-bg: lighten($highlight-bg, 9%);
+$highlight-btn-bg-dark: lighten($highlight-bg-dark, 9%);
+$highlight-btn-bg-hover: lighten($highlight-bg, 9%);
+$highlight-btn-bg-hover-dark: lighten($highlight-bg-dark, 9%);
+
+$highlight-btn-color: rgba($white, 0.75);
+$highlight-btn-color-dark: rgba($white, 0.75);
+$highlight-btn-color-hover: $primary;
+$highlight-btn-color-hover-dark: $primary;
+
+$highlight-scrollbar-color: lighten($highlight-bg, 12%);
+$highlight-scrollbar-color-dark: lighten($highlight-bg-dark, 12%);
+$highlight-scrollbar-hover-color: lighten($highlight-bg, 15%);
+$highlight-scrollbar-hover-color-dark: lighten($highlight-bg-dark, 15%);
+
+// Bootstrap Maxlength
+$bootstrap-maxlength-z-index: 1040;
+
+// Daterangepicker
+$daterangepicker-ranges-list-height: 260px;
+$daterangepicker-ranges-list-width: 150px;
+
+
diff --git a/src/_res/assets/sass/core/vendors/plugins/_vis-timeline.scss b/src/_res/assets/sass/core/vendors/plugins/_vis-timeline.scss
new file mode 100644
index 0000000..1f8e01c
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/_vis-timeline.scss
@@ -0,0 +1,131 @@
+//
+// Vis Timeline
+//
+
+// Variables
+$vis-border-color: var(--kt-border-color);
+$vis-border-dashed-color: var(--kt-border-dashed-color);
+
+// General
+.vis-timeline {
+ border: 1px solid $vis-border-color !important;
+
+ @if ($enable-rounded) {
+ border-radius: $border-radius !important;
+ }
+
+ .vis-labelset {
+ .vis-label {
+ display: flex;
+ align-items: center;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ border-bottom: none;
+ font-size: $h4-font-size;
+ font-weight: $font-weight-semibold;
+ color: var(--kt-gray-900);
+ }
+ }
+
+ .vis-itemset {
+ }
+
+ .vis-foreground {
+ .vis-group {
+ border-bottom: none;
+ }
+ }
+
+ .vis-item {
+ position: absolute;
+ color: var(--kt-gray-700);
+ border-color: var(--kt-primary);
+ border-width: 1px;
+ background-color: var(--kt-gray-100);
+
+ @if ($enable-rounded) {
+ border-radius: $border-radius !important;
+ }
+
+ &.vis-selected {
+ background-color: var(--kt-warning-light);
+ color: var(--kt-gray-700);
+ border-color: var(--kt-warning);
+ }
+
+ .vis-item-content {
+ padding: 0.75rem 1rem;
+ width: 100%;
+ transform: none !important;
+ }
+ }
+
+ .vis-time-axis {
+ font-size: $font-size-sm;
+ text-transform: uppercase;
+ font-weight: $font-weight-semibold;
+
+ .vis-text {
+ color: var(--kt-gray-400);
+ }
+
+ .vis-grid.vis-minor {
+ border-left-color: $vis-border-dashed-color !important;
+ }
+
+ .vis-grid.vis-vertical {
+ border-left-style: dashed !important;
+ }
+ }
+
+ .vis-panel {
+ .vis-shadow {
+ box-shadow: none !important;
+ }
+ }
+
+ .vis-panel {
+ &.vis-bottom,
+ &.vis-center,
+ &.vis-left,
+ &.vis-right,
+ &.vis-top {
+ border-color: $vis-border-color !important;
+ }
+ }
+
+ .vis-current-time {
+ background-color: var(--kt-success);
+ }
+}
+
+// Custom style
+.vis-timeline-custom {
+ .vis-timeline {
+ border: 0 !important;
+
+ .vis-label {
+ padding-left: 0 !important;
+ }
+ }
+
+ .vis-panel {
+ &.vis-bottom,
+ &.vis-center,
+ &.vis-left,
+ &.vis-right,
+ &.vis-top {
+ border: 0 !important;
+ }
+ }
+
+ .vis-item {
+ background-color: transparent;
+ border: 0 !important;
+ border-radius: 0 !important;
+
+ .vis-item-content {
+ padding: 0 !important;
+ }
+ }
+}
diff --git a/src/_res/assets/sass/core/vendors/plugins/mixins/_nouislider.scss b/src/_res/assets/sass/core/vendors/plugins/mixins/_nouislider.scss
new file mode 100644
index 0000000..455a2b2
--- /dev/null
+++ b/src/_res/assets/sass/core/vendors/plugins/mixins/_nouislider.scss
@@ -0,0 +1,13 @@
+//
+// noUiSlider Mixins
+//
+
+@mixin nouislider-size($height, $handle-width, $handle-height, $handle-pos-top) {
+ height: $height;
+
+ .noUi-handle {
+ width: $handle-width;
+ height: $handle-height;
+ top: -#{$handle-pos-top};
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/layout/_content.scss b/src/_res/assets/sass/layout/_content.scss
new file mode 100644
index 0000000..0aebeaa
--- /dev/null
+++ b/src/_res/assets/sass/layout/_content.scss
@@ -0,0 +1,21 @@
+//
+// Content
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-content {
+ [data-kt-app-toolbar-enabled="true"]:not([data-kt-app-toolbar-fixed="true"]) & {
+ padding-top: 0;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-content {
+ [data-kt-app-toolbar-enabled="true"]:not([data-kt-app-toolbar-fixed-mobile="true"]) & {
+ padding-top: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/layout/_layout.scss b/src/_res/assets/sass/layout/_layout.scss
new file mode 100644
index 0000000..1ee48df
--- /dev/null
+++ b/src/_res/assets/sass/layout/_layout.scss
@@ -0,0 +1,15 @@
+//
+// Layout
+//
+
+@import "root";
+@import "sidebar/sidebar";
+@import "sidebar/sidebar-minimize";
+@import "sidebar/sidebar-dark";
+@import "sidebar/sidebar-light";
+@import "header/header";
+@import "header/header-dark";
+@import "header/header-sidebar-light";
+@import "content";
+@import "toolbar";
+@import "page-title";
\ No newline at end of file
diff --git a/src/_res/assets/sass/layout/_page-title.scss b/src/_res/assets/sass/layout/_page-title.scss
new file mode 100644
index 0000000..f345706
--- /dev/null
+++ b/src/_res/assets/sass/layout/_page-title.scss
@@ -0,0 +1,14 @@
+//
+// Page Title(used by Dark Header layout only)
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ [data-kt-app-layout="dark-header"] {
+ .app-header {
+ .page-heading {
+ color: $white !important;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/layout/_root.scss b/src/_res/assets/sass/layout/_root.scss
new file mode 100644
index 0000000..8eab1bd
--- /dev/null
+++ b/src/_res/assets/sass/layout/_root.scss
@@ -0,0 +1,89 @@
+//
+// Root
+//
+
+// Light mode
+@include theme-light() {
+ // Reboot
+ --kt-app-bg-color: #{$app-bg-color};
+ --kt-app-blank-bg-color: #{$app-blank-bg-color};
+
+ // Header base
+ --kt-app-header-base-bg-color: #{$app-header-base-bg-color};
+ --kt-app-header-base-bg-color-mobile: #{$app-header-base-bg-color-mobile};
+ --kt-app-header-base-box-shadow: #{$app-header-base-box-shadow};
+ --kt-app-header-base-box-shadow-mobile: #{$app-header-base-box-shadow-mobile};
+ --kt-app-header-base-menu-link-bg-color-active: #{$app-header-base-menu-link-bg-color-active};
+
+ // Header light
+ --kt-app-header-light-separator-color: #{$app-header-light-separator-color};
+
+ // Sidebar base
+ --kt-app-sidebar-base-toggle-btn-box-shadow: #{$app-sidebar-base-toggle-btn-box-shadow};
+ --kt-app-sidebar-base-toggle-btn-bg-color: #{$app-sidebar-base-toggle-btn-bg-color};
+
+ // Sidebar light
+ --kt-app-sidebar-light-bg-color: #{$app-sidebar-light-bg-color};
+ --kt-app-sidebar-light-box-shadow: #{$app-sidebar-light-box-shadow};
+ --kt-app-sidebar-light-separator-color: #{$app-sidebar-light-separator-color};
+ --kt-app-sidebar-light-scrollbar-color: #{$app-sidebar-light-scrollbar-color};
+ --kt-app-sidebar-light-scrollbar-color-hover: #{$app-sidebar-light-scrollbar-color-hover};
+ --kt-app-sidebar-light-menu-heading-color: #{$app-sidebar-light-menu-heading-color};
+ --kt-app-sidebar-light-menu-link-bg-color-active: #{$app-sidebar-light-menu-link-bg-color-active};
+ --kt-app-sidebar-light-header-menu-link-bg-color-active: #{$app-sidebar-light-header-menu-link-bg-color-active};
+
+ // Toolbar base
+ --kt-app-toolbar-base-bg-color: #{$app-toolbar-base-bg-color};
+ --kt-app-toolbar-base-bg-color-mobile: #{$app-toolbar-base-bg-color-mobile};
+ --kt-app-toolbar-base-box-shadow: #{$app-toolbar-base-box-shadow};
+ --kt-app-toolbar-base-box-shadow-mobile: #{$app-toolbar-base-box-shadow-mobile};
+ --kt-app-toolbar-base-border-top: #{$app-toolbar-base-border-top};
+ --kt-app-toolbar-base-border-top-mobile: #{$app-toolbar-base-border-top-mobile};
+
+ // Footer
+ --kt-app-footer-bg-color: #{$app-footer-bg-color};
+ --kt-app-footer-bg-color-mobile: #{$app-footer-bg-color-mobile};
+}
+
+// Dark mode
+@include theme-dark() {
+ // Reboot
+ --kt-app-bg-color: #{$app-bg-color-dark};
+ --kt-app-blank-bg-color: #{$app-blank-bg-color-dark};
+
+ // Header base
+ --kt-app-header-base-bg-color: #{$app-header-base-bg-color-dark};
+ --kt-app-header-base-bg-color-mobile: #{$app-header-base-bg-color-mobile-dark};
+ --kt-app-header-base-box-shadow: #{$app-header-base-box-shadow-dark};
+ --kt-app-header-base-box-shadow-mobile: #{$app-header-base-box-shadow-mobile-dark};
+ --kt-app-header-base-menu-link-bg-color-active: #{$app-header-base-menu-link-bg-color-active-dark};
+
+ // Header light
+ --kt-app-header-light-separator-color: #{$app-header-light-separator-color-dark};
+
+ // Sidebar base
+ --kt-app-sidebar-base-toggle-btn-box-shadow: #{$app-sidebar-base-toggle-btn-box-shadow-dark};
+ --kt-app-sidebar-base-toggle-btn-bg-color: #{$app-sidebar-base-toggle-btn-bg-color-dark};
+
+ // Sidebar light
+ --kt-app-sidebar-light-bg-color: #{$app-sidebar-light-bg-color-dark};
+ --kt-app-sidebar-light-box-shadow: #{$app-sidebar-light-box-shadow-dark};
+ --kt-app-sidebar-light-separator-color: #{$app-sidebar-light-separator-color-dark};
+ --kt-app-sidebar-light-scrollbar-color: #{$app-sidebar-light-scrollbar-color-dark};
+ --kt-app-sidebar-light-scrollbar-color-hover: #{$app-sidebar-light-scrollbar-color-hover-dark};
+ --kt-app-sidebar-light-menu-heading-color: #{$app-sidebar-light-menu-heading-color-dark};
+ --kt-app-sidebar-light-menu-link-bg-color-active: #{$app-sidebar-light-menu-link-bg-color-active-dark};
+ --kt-app-sidebar-light-header-menu-link-bg-color-active: #{$app-sidebar-light-header-menu-link-bg-color-active-dark};
+
+ // Toolbar base
+ --kt-app-toolbar-base-bg-color: #{$app-toolbar-base-bg-color-dark};
+ --kt-app-toolbar-base-bg-color-mobile: #{$app-toolbar-base-bg-color-mobile-dark};
+ --kt-app-toolbar-base-box-shadow: #{$app-toolbar-base-box-shadow-dark};
+ --kt-app-toolbar-base-box-shadow-mobile: #{$app-toolbar-base-box-shadow-mobile-dark};
+ --kt-app-toolbar-base-border-top: #{$app-toolbar-base-border-top-dark};
+ --kt-app-toolbar-base-border-top-mobile: #{$app-toolbar-base-border-top-mobile-dark};
+
+ // Footer
+ --kt-app-footer-bg-color: #{$app-footer-bg-color-dark};
+ --kt-app-footer-bg-color-mobile: #{$app-footer-bg-color-mobile-dark};
+}
diff --git a/src/_res/assets/sass/layout/_toolbar.scss b/src/_res/assets/sass/layout/_toolbar.scss
new file mode 100644
index 0000000..6b6dd12
--- /dev/null
+++ b/src/_res/assets/sass/layout/_toolbar.scss
@@ -0,0 +1,38 @@
+//
+// Toolbar
+//
+
+// Form controls
+:is([data-kt-app-layout="light-sidebar"], [data-kt-app-layout="light-header"], [data-kt-app-layout="dark-header"]) {
+ .app-toolbar {
+ .form-select.form-select {
+ background-color: var(--kt-body-bg) !important;
+ }
+ }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-toolbar {
+ body:not([data-kt-app-toolbar-fixed="true"]) & {
+ height: auto;
+ background-color: transparent;
+ border-top: 0;
+ border-bottom: 0;
+ box-shadow: none;
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-toolbar {
+ body:not([data-kt-app-toolbar-fixed-mobile="true"]) & {
+ height: auto;
+ background-color: transparent;
+ border-top: 0;
+ border-bottom: 0;
+ box-shadow: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/layout/_variables.custom.scss b/src/_res/assets/sass/layout/_variables.custom.scss
new file mode 100644
index 0000000..ab486ed
--- /dev/null
+++ b/src/_res/assets/sass/layout/_variables.custom.scss
@@ -0,0 +1,111 @@
+//
+// Variables
+//
+
+// Reboot
+$app-bg-color: #f5f8fa;
+$app-bg-color-dark: #151521;
+$app-blank-bg-color: $white;
+$app-blank-bg-color-dark: $app-bg-color-dark;
+
+// Header base
+$app-header-base-height: 70px;
+$app-header-base-height-mobile: 60px;
+$app-header-base-bg-color: $body-bg;
+$app-header-base-bg-color-dark: #1e1e2d;
+$app-header-base-bg-color-mobile: $app-header-base-bg-color;
+$app-header-base-bg-color-mobile-dark: $app-header-base-bg-color-dark;
+$app-header-base-box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
+$app-header-base-box-shadow-dark: none;
+$app-header-base-box-shadow-mobile: $app-header-base-box-shadow;
+$app-header-base-box-shadow-mobile-dark: $app-header-base-box-shadow-dark;
+$app-header-base-menu-link-bg-color-active: $menu-link-bg-color-active;
+$app-header-base-menu-link-bg-color-active-dark: #2A2A3C;
+
+// Header light
+$app-header-light-separator-color: #E4E6EF;
+$app-header-light-separator-color-dark: $border-color-dark;
+
+// Header dark
+$app-header-dark-bg-color: #1e1e2d;
+$app-header-dark-separator-color: #282a3d;
+$app-header-dark-scrollbar-color: #3b3b64;
+$app-header-dark-scrollbar-color-hover: lighten($app-header-dark-scrollbar-color, 3%);
+
+// Sidebar base
+$app-sidebar-base-width: 265px;
+$app-sidebar-base-width-mobile: 250px;
+
+$app-sidebar-base-toggle-btn-box-shadow: 0px 0px 10px rgba(113, 121, 136, 0.1);
+$app-sidebar-base-toggle-btn-box-shadow-dark: none;
+$app-sidebar-base-toggle-btn-bg-color: $body-bg;
+$app-sidebar-base-toggle-btn-bg-color-dark: $app-header-base-menu-link-bg-color-active-dark;
+
+// Sidebar minimize
+$app-sidebar-minimize-width: 75px;
+
+// Sidebar light
+$app-sidebar-light-bg-color: $body-bg;
+$app-sidebar-light-bg-color-dark: #1e1e2d;
+
+$app-sidebar-light-box-shadow: 0 0 28px 0 rgba(82,63,105,.05);
+$app-sidebar-light-box-shadow-dark: none;
+
+$app-sidebar-light-separator-color: $app-header-light-separator-color;
+$app-sidebar-light-separator-color-dark: $app-header-light-separator-color-dark;
+
+$app-sidebar-light-scrollbar-color: $gray-200;
+$app-sidebar-light-scrollbar-color-dark: $gray-200-dark;
+$app-sidebar-light-scrollbar-color-hover: $gray-200;
+$app-sidebar-light-scrollbar-color-hover-dark: $gray-200-dark;
+$app-sidebar-light-menu-heading-color: #B5B5C3;
+$app-sidebar-light-menu-heading-color-dark: $gray-500-dark;
+$app-sidebar-light-menu-link-bg-color-active: #F4F6FA;
+$app-sidebar-light-menu-link-bg-color-active-dark: #2A2A3C;
+$app-sidebar-light-header-menu-link-bg-color-active: #EAEEF2;
+$app-sidebar-light-header-menu-link-bg-color-active-dark: $gray-100-dark;
+
+// Sidebar dark
+$app-sidebar-dark-bg-color: #1e1e2d;
+$app-sidebar-dark-separator-color: #393945;
+$app-sidebar-dark-scrollbar-color: $gray-300-dark;
+$app-sidebar-dark-scrollbar-color-hover: $gray-300-dark;
+$app-sidebar-dark-menu-heading-color: #646477;
+$app-sidebar-dark-menu-link-bg-color-active: #2A2A3C;
+
+// Toolbar base
+$app-toolbar-base-height: 55px;
+$app-toolbar-base-bg-color:$body-bg;
+$app-toolbar-base-bg-color-dark: darken(#1e1e2d, 2%);
+$app-toolbar-base-bg-color-mobile: $app-toolbar-base-bg-color;
+$app-toolbar-base-bg-color-mobile-dark: $app-toolbar-base-bg-color-dark;
+$app-toolbar-base-box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
+$app-toolbar-base-box-shadow-dark: none;
+$app-toolbar-base-box-shadow-mobile: $app-toolbar-base-box-shadow;
+$app-toolbar-base-box-shadow-mobile-dark: $app-toolbar-base-box-shadow-mobile;
+$app-toolbar-base-border-top: 1px solid $border-color;
+$app-toolbar-base-border-top-dark: 0;
+$app-toolbar-base-border-top-mobile: $app-toolbar-base-border-top;
+$app-toolbar-base-border-top-mobile-dark: $app-toolbar-base-border-top-mobile;
+
+// Footer
+$app-footer-height: 60px;
+$app-footer-height-mobile: auto;
+$app-footer-bg-color: $body-bg;
+$app-footer-bg-color-dark: #1e1e2d;
+$app-footer-bg-color-mobile: $app-footer-bg-color;
+$app-footer-bg-color-mobile-dark: $app-footer-bg-color-dark;
+
+// Scrolltop
+$scrolltop-bottom: 43px;
+$scrolltop-bottom-mobile: 23px;
+$scrolltop-end: 7px;
+$scrolltop-end-mobile: 5px;
+
+// Layout builder toggle(used for Demo purposes only)
+$app-layout-builder-toggle-end: 50px;
+$app-layout-builder-toggle-end-mobile: 40px;
+$app-layout-builder-toggle-bottom: 40px;
+$app-layout-builder-toggle-bottom-mobile: 20px;
+
+
diff --git a/src/_res/assets/sass/layout/header/_header-dark.scss b/src/_res/assets/sass/layout/header/_header-dark.scss
new file mode 100644
index 0000000..3fd8699
--- /dev/null
+++ b/src/_res/assets/sass/layout/header/_header-dark.scss
@@ -0,0 +1,80 @@
+//
+// Dark Header(used by Dark Header layout only)
+//
+
+[data-kt-app-layout="dark-header"] {
+ .app-header {
+ background-color: $app-header-dark-bg-color;
+ border-bottom: 0 !important;
+
+ .btn-custom {
+ @include button-custom-variant(
+ $color:#B5B5C3,
+ $icon-color: #B5B5C3,
+ $border-color: null,
+ $bg-color: null,
+ $color-active: #B5B5C3,
+ $icon-color-active: var(--kt-primary),
+ $border-color-active: null,
+ $bg-color-active: rgba(63, 66, 84, 0.35)
+ );
+ }
+ }
+
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ // General mode
+ .app-header-menu {
+ .menu {
+ // Menu root links
+ > .menu-item {
+ @include menu-link-default-state(
+ $title-color: #9D9DA6,
+ $icon-color:#C5C5D8,
+ $bullet-color:#787887,
+ $arrow-color: #787887,
+ $bg-color: null,
+ $all-links: false
+ );
+
+ @include menu-link-hover-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: $app-sidebar-dark-menu-link-bg-color-active,
+ $all-links: false
+ );
+
+ @include menu-link-show-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: null,
+ $all-links: false
+ );
+
+ @include menu-link-here-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: $app-sidebar-dark-menu-link-bg-color-active,
+ $all-links: false
+ );
+
+ @include menu-link-active-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: $app-sidebar-dark-menu-link-bg-color-active,
+ $all-links: false
+ );
+ }
+ }
+ }
+ }
+}
+
diff --git a/src/_res/assets/sass/layout/header/_header-sidebar-light.scss b/src/_res/assets/sass/layout/header/_header-sidebar-light.scss
new file mode 100644
index 0000000..db38db8
--- /dev/null
+++ b/src/_res/assets/sass/layout/header/_header-sidebar-light.scss
@@ -0,0 +1,55 @@
+//
+// Custom Header(used by Light Sidebar layout only)
+//
+
+[data-kt-app-layout="light-sidebar"] {
+ // Desktop mode
+ @include media-breakpoint-up(lg) {
+ .app-header-menu {
+ .menu {
+ // Menu root item
+ > .menu-item {
+ @include menu-link-here-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-app-sidebar-light-header-menu-link-bg-color-active),
+ $all-links: false
+ );
+
+ @include menu-link-active-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-app-sidebar-light-header-menu-link-bg-color-active),
+ $all-links: false
+ );
+ }
+ }
+ }
+ }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ [data-kt-app-layout="light-sidebar"]:not([data-kt-app-header-fixed="true"]) {
+ .app-header {
+ background-color: transparent;
+ box-shadow: none;
+ border-bottom: 1px solid var(--kt-app-sidebar-light-separator-color);
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ [data-kt-app-layout="light-sidebar"]:not([data-kt-app-header-fixed-mobile="true"]) {
+ .app-header {
+ background-color: transparent;
+ box-shadow: none;
+ border-bottom: 1px solid var(--kt-app-sidebar-light-separator-color);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/layout/header/_header.scss b/src/_res/assets/sass/layout/header/_header.scss
new file mode 100644
index 0000000..693134d
--- /dev/null
+++ b/src/_res/assets/sass/layout/header/_header.scss
@@ -0,0 +1,104 @@
+//
+// Header
+//
+
+// General mode
+.app-header-menu {
+ .menu {
+ .menu-item {
+ @include menu-link-default-state(
+ $title-color: var(--kt-gray-700),
+ $icon-color: var(--kt-gray-500),
+ $bullet-color: var(--kt-gray-500),
+ $arrow-color: var(--kt-gray-500),
+ $bg-color: null,
+ );
+
+ @include menu-link-hover-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-menu-link-bg-color-active)
+ );
+
+ @include menu-link-show-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: null,
+ );
+
+ @include menu-link-here-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-menu-link-bg-color-active)
+ );
+
+ @include menu-link-active-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-menu-link-bg-color-active)
+ );
+ }
+ }
+
+ .menu-extended {
+ --kt-menu-link-bg-color-active: rgba(var(--kt-gray-100-rgb), 0.7);
+ --kt-menu-link-bg-color-hover: rgba(var(--kt-gray-100-rgb), 0.7);
+
+
+ .menu-custom-icon {
+ background-color: var(--kt-gray-100);
+ }
+
+ .menu-link {
+ &.active,
+ &:hover {
+ .menu-custom-icon {
+ background-color: var(--kt-gray-200);
+ }
+ }
+ }
+ }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-header-menu {
+ .menu {
+ // Menu root item
+ > .menu-item {
+ margin-right: 0.5rem;
+
+ > .menu-link {
+ padding-top: 0.775rem;
+ padding-bottom: 0.775rem;
+ font-weight: $font-weight-semibold;
+ }
+
+ @include menu-link-here-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-app-header-base-menu-link-bg-color-active)
+ );
+ }
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-header {
+ .page-title {
+ display: none !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/layout/sidebar/_sidebar-dark.scss b/src/_res/assets/sass/layout/sidebar/_sidebar-dark.scss
new file mode 100644
index 0000000..360a232
--- /dev/null
+++ b/src/_res/assets/sass/layout/sidebar/_sidebar-dark.scss
@@ -0,0 +1,79 @@
+//
+// Dark Sidebar(used by Dark Sidebar layout only)
+//
+
+[data-kt-app-layout="dark-sidebar"] {
+ .app-sidebar {
+ background-color: $app-sidebar-dark-bg-color;
+ border-right: 0 !important;
+
+ .hover-scroll-overlay-y {
+ @include scrollbar-color($app-sidebar-dark-scrollbar-color, $app-sidebar-dark-scrollbar-color-hover);
+ }
+
+ .app-sidebar-logo {
+ border-bottom: 1px dashed $app-sidebar-dark-separator-color;
+ }
+
+ .btn-custom {
+ @include button-custom-variant(
+ $color:#B5B5C3,
+ $icon-color: #B5B5C3,
+ $border-color: null,
+ $bg-color: rgba(63, 66, 84, 0.35),
+ $color-active: #B5B5C3,
+ $icon-color-active: null,
+ $border-color-active: null,
+ $bg-color-active: rgba(63, 66, 84, 0.35)
+ );
+ }
+
+ .menu {
+ .menu-item {
+ .menu-heading {
+ color: $app-sidebar-dark-menu-heading-color !important;
+ }
+
+ @include menu-link-default-state(
+ $title-color: #9D9DA6,
+ $icon-color:#C5C5D8,
+ $bullet-color:#787887,
+ $arrow-color: #787887,
+ $bg-color: null
+ );
+
+ @include menu-link-hover-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: null
+ );
+
+ @include menu-link-here-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: null
+ );
+
+ @include menu-link-show-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: null
+ );
+
+ @include menu-link-active-state(
+ $title-color: var(--kt-primary-inverse),
+ $icon-color: var(--kt-primary-inverse),
+ $bullet-color: var(--kt-primary-inverse),
+ $arrow-color: var(--kt-primary-inverse),
+ $bg-color: $app-sidebar-dark-menu-link-bg-color-active
+ );
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/layout/sidebar/_sidebar-light.scss b/src/_res/assets/sass/layout/sidebar/_sidebar-light.scss
new file mode 100644
index 0000000..ab0bd0e
--- /dev/null
+++ b/src/_res/assets/sass/layout/sidebar/_sidebar-light.scss
@@ -0,0 +1,76 @@
+//
+// Light Sidebar(used by Light Sidebar layout only)
+//
+
+[data-kt-app-layout="light-sidebar"] {
+ .app-sidebar {
+ background-color: var(--kt-app-sidebar-light-bg-color);
+ border-right: 0 !important;
+
+ .hover-scroll-overlay-y {
+ @include scrollbar-color(var(--kt-app-sidebar-light-scrollbar-color), var(--kt-app-sidebar-light-scrollbar-color-hover));
+ }
+
+ .app-sidebar-logo {
+ border-bottom: 1px solid var(--kt-app-sidebar-light-separator-color);
+ }
+
+ .menu {
+ font-weight: $font-weight-semibold;
+
+ .menu-item {
+ .menu-heading {
+ color: var(--kt-app-sidebar-light-menu-heading-color) !important;
+ }
+
+ @include menu-link-default-state(
+ $title-color: var(--kt-gray-700),
+ $icon-color: var(--kt-gray-500),
+ $bullet-color: var(--kt-gray-500),
+ $arrow-color: var(--kt-gray-500),
+ $bg-color: null
+ );
+
+ @include menu-link-hover-state(
+ $title-color: var(--kt-gray-900),
+ $icon-color: var(--kt-gray-700),
+ $bullet-color: var(--kt-gray-700),
+ $arrow-color: var(--kt-gray-700),
+ $bg-color: null
+ );
+
+ @include menu-link-show-state(
+ $title-color: var(--kt-gray-900),
+ $icon-color: var(--kt-gray-700),
+ $bullet-color: var(--kt-gray-700),
+ $arrow-color: var(--kt-gray-700),
+ $bg-color: null
+ );
+
+ @include menu-link-here-state(
+ $title-color: var(--kt-gray-900),
+ $icon-color: var(--kt-gray-700),
+ $bullet-color: var(--kt-gray-700),
+ $arrow-color: var(--kt-gray-700),
+ $bg-color: null
+ );
+
+ @include menu-link-active-state(
+ $title-color: var(--kt-primary),
+ $icon-color: var(--kt-primary),
+ $bullet-color: var(--kt-primary),
+ $arrow-color: var(--kt-primary),
+ $bg-color: var(--kt-app-sidebar-light-menu-link-bg-color-active)
+ );
+ }
+ }
+ }
+}
+
+[data-kt-app-layout="light-sidebar"][data-kt-app-header-fixed="true"] {
+ .app-sidebar {
+ .app-sidebar-logo {
+ border-bottom: 1px dashed var(--kt-app-sidebar-light-separator-color);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/layout/sidebar/_sidebar-minimize.scss b/src/_res/assets/sass/layout/sidebar/_sidebar-minimize.scss
new file mode 100644
index 0000000..99d3481
--- /dev/null
+++ b/src/_res/assets/sass/layout/sidebar/_sidebar-minimize.scss
@@ -0,0 +1,64 @@
+//
+// Sidebar Minimize
+//
+
+.app-sidebar-logo-minimize {
+ display: none;
+}
+
+// Sidebar footer
+.app-sidebar-footer {
+ .btn-custom {
+ .btn-icon {
+ display: none;
+ }
+ }
+}
+
+// Desktop sidebar minimize mode
+@include app-layout-minimize(app-sidebar) {
+ .app-sidebar-logo {
+ .app-sidebar-logo-default {
+ display: none;
+ }
+
+ .app-sidebar-logo-minimize {
+ display: inline-block;
+ }
+ }
+
+ .app-sidebar-wrapper {
+ width: var(--kt-app-sidebar-width-actual);
+ }
+
+ .app-sidebar-menu {
+ .menu-content,
+ .menu-title {
+ opacity: 0;
+ @include app-layout-transition(opacity);
+ }
+
+ .menu-item.show > .menu-sub {
+ height: 0;
+ overflow: hidden;
+ @include app-layout-transition(height);
+ }
+ }
+
+ .app-sidebar-footer {
+ .btn-custom {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+
+ .btn-label {
+ width: 0;
+ display: none;
+ }
+
+ .btn-icon {
+ width: auto;
+ display: block;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/layout/sidebar/_sidebar.scss b/src/_res/assets/sass/layout/sidebar/_sidebar.scss
new file mode 100644
index 0000000..481890e
--- /dev/null
+++ b/src/_res/assets/sass/layout/sidebar/_sidebar.scss
@@ -0,0 +1,51 @@
+//
+// Sidebar
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+ .app-sidebar-toggle {
+ box-shadow: var(--kt-app-sidebar-base-toggle-btn-box-shadow) !important;
+ background-color: var(--kt-app-sidebar-base-toggle-btn-bg-color) !important;
+
+ .active .svg-icon {
+ transform: rotateZ(0deg) !important;
+ }
+ }
+
+ [dir="rtl"] {
+ .app-sidebar-toggle {
+ .svg-icon {
+ transform: rotateZ(180deg);
+ }
+
+ &.active .svg-icon {
+ transform: rotateZ(0deg) !important;
+ }
+ }
+ }
+
+ .app-sidebar-logo {
+ height: var(--kt-app-header-height);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ flex-shrink: 0;
+ }
+
+ .app-sidebar-menu {
+ .menu {
+ & > .menu-item {
+ margin-left: 0.115rem;
+ }
+ }
+ }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+ .app-sidebar-logo {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/plugins.scss b/src/_res/assets/sass/plugins.scss
new file mode 100644
index 0000000..e25c213
--- /dev/null
+++ b/src/_res/assets/sass/plugins.scss
@@ -0,0 +1,13 @@
+//
+// Vendors customization
+//
+
+////////////////////////////////////////////////////////////////
+///////////// DO NOT MODIFY BELOW INCLUDE ORDER ////////////////
+////////////////////////////////////////////////////////////////
+
+// Initialize
+@import "init";
+
+// Plugins
+@import "./core/vendors/plugins/plugins";
diff --git a/src/_res/assets/sass/style.react.scss b/src/_res/assets/sass/style.react.scss
new file mode 100644
index 0000000..67306fc
--- /dev/null
+++ b/src/_res/assets/sass/style.react.scss
@@ -0,0 +1,7 @@
+// React vendors
+@import '~socicon/css/socicon.css';
+@import '~@fortawesome/fontawesome-free/css/all.min.css';
+@import '~line-awesome/dist/line-awesome/css/line-awesome.css';
+@import '~prism-themes/themes/prism-shades-of-purple.css';
+@import '~bootstrap-icons/font/bootstrap-icons.css';
+@import '~animate.css/animate.css';
diff --git a/src/_res/assets/sass/style.scss b/src/_res/assets/sass/style.scss
new file mode 100644
index 0000000..ae464dd
--- /dev/null
+++ b/src/_res/assets/sass/style.scss
@@ -0,0 +1,14 @@
+//
+// Theme style
+//
+
+// Initialize
+@import "init";
+
+// Components
+@import "./core/components/components";
+@import "components/components";
+
+// Layout
+@import "./core/layout/base/layout";
+@import "layout/layout";
\ No newline at end of file
diff --git a/src/_res/assets/ts/_utils/DomHelpers.ts b/src/_res/assets/ts/_utils/DomHelpers.ts
new file mode 100644
index 0000000..a98a203
--- /dev/null
+++ b/src/_res/assets/ts/_utils/DomHelpers.ts
@@ -0,0 +1,478 @@
+import {OffsetModel} from './models/OffsetModel'
+import {ViewPortModel} from './models/ViewPortModel'
+import {ElementStyleUtil} from './_ElementStyleUtil'
+import {DataUtil} from './_DataUtil'
+import {ElementAnimateUtil} from './ElementAnimateUtil'
+import {getObjectPropertyValueByKey, toJSON} from './_TypesHelpers'
+
+function getCSS(el: HTMLElement, styleProp: string) {
+ const defaultView = (el.ownerDocument || document).defaultView
+
+ if (!defaultView) {
+ return ''
+ }
+
+ // sanitize property name to css notation
+ // (hyphen separated words eg. font-Size)
+ styleProp = styleProp.replace(/([A-Z])/g, '-$1').toLowerCase()
+
+ return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp)
+}
+
+function getCSSVariableValue(variableName: string) {
+ let hex = getComputedStyle(document.documentElement).getPropertyValue(variableName)
+ if (hex && hex.length > 0) {
+ hex = hex.trim()
+ }
+
+ return hex
+}
+
+function getElementActualCss(el: HTMLElement, prop: any, cache: boolean) {
+ let css = ''
+
+ if (!el.getAttribute('kt-hidden-' + prop) || cache === false) {
+ let value
+
+ // the element is hidden so:
+ // making the el block so we can meassure its height but still be hidden
+ css = el.style.cssText
+ el.style.cssText = 'position: absolute; visibility: hidden; display: block;'
+
+ if (prop === 'width') {
+ value = el.offsetWidth
+ } else if (prop === 'height') {
+ value = el.offsetHeight
+ }
+
+ el.style.cssText = css
+
+ // store it in cache
+ if (value !== undefined) {
+ el.setAttribute('kt-hidden-' + prop, value.toString())
+ return parseFloat(value.toString())
+ }
+ return 0
+ } else {
+ // store it in cache
+ const attributeValue = el.getAttribute('kt-hidden-' + prop)
+ if (attributeValue || attributeValue === '0') {
+ return parseFloat(attributeValue)
+ }
+ }
+}
+
+function getElementActualHeight(el: HTMLElement) {
+ return getElementActualCss(el, 'height', false)
+}
+
+function getElementActualWidth(el: HTMLElement, cache?: boolean) {
+ return getElementActualCss(el, 'width', false)
+}
+
+function getElementIndex(element: HTMLElement) {
+ if (element.parentNode) {
+ const c = element.parentNode.children
+ for (let i = 0; i < c.length; i++) {
+ if (c[i] === element) return i
+ }
+ }
+ return -1
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+function getElementMatches(element: HTMLElement, selector: string) {
+ const p = Element.prototype
+ const f = p.matches || p.webkitMatchesSelector
+
+ if (element && element.tagName) {
+ return f.call(element, selector)
+ } else {
+ return false
+ }
+}
+
+function getElementOffset(el: HTMLElement): OffsetModel {
+ // Return zeros for disconnected and hidden (display: none) elements (gh-2310)
+ // Support: IE <=11 only
+ // Running getBoundingClientRect on a
+ // disconnected node in IE throws an error
+ if (!el.getClientRects().length) {
+ return {top: 0, left: 0}
+ }
+
+ // Get document-relative position by adding viewport scroll to viewport-relative gBCR
+ const rect = el.getBoundingClientRect()
+ const win = el.ownerDocument.defaultView
+ if (win) {
+ return {
+ top: rect.top + win.pageYOffset,
+ left: rect.left + win.pageXOffset,
+ }
+ }
+
+ return rect
+}
+
+function getElementParents(element: Element, selector: string) {
+ // Element.matches() polyfill
+ if (!Element.prototype.matches) {
+ Element.prototype.matches = function (s) {
+ const matches = (document || this.ownerDocument).querySelectorAll(s)
+ let i = matches.length
+ while (--i >= 0 && matches.item(i) !== this) {}
+ return i > -1
+ }
+ }
+
+ // Set up a parent array
+ const parents: Array = []
+
+ let el: Element | null = element
+
+ // Push each parent element to the array
+ for (; el && el !== document.body; el = el.parentElement) {
+ if (selector) {
+ if (el.matches(selector)) {
+ parents.push(el)
+ }
+ continue
+ }
+ parents.push(el)
+ }
+
+ // Return our parent array
+ return parents
+}
+
+function getHighestZindex(el: HTMLElement) {
+ let bufferNode: Node | null = el as Node
+ let buffer = el
+ while (bufferNode && bufferNode !== document) {
+ // Ignore z-index if position is set to a value where z-index is ignored by the browser
+ // This makes behavior of this function consistent across browsers
+ // WebKit always returns auto if the element is positioned
+ const position = buffer.style.getPropertyValue('position')
+ if (position === 'absolute' || position === 'relative' || position === 'fixed') {
+ // IE returns 0 when zIndex is not specified
+ // other browsers return a string
+ // we ignore the case of nested elements with an explicit value of 0
+ //
+ const value = parseInt(buffer.style.getPropertyValue('z-index'))
+ if (!isNaN(value) && value !== 0) {
+ return value
+ }
+ }
+
+ bufferNode = bufferNode.parentNode
+ buffer = bufferNode as HTMLElement
+ }
+ return null
+}
+
+function getScrollTop(): number {
+ return (document.scrollingElement || document.documentElement).scrollTop
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth
+function getViewPort(): ViewPortModel {
+ return {
+ width: window.innerWidth,
+ height: window.innerHeight,
+ }
+}
+
+function insertAfterElement(el: HTMLElement, referenceNode: HTMLElement) {
+ return referenceNode.parentNode?.insertBefore(el, referenceNode.nextSibling)
+}
+
+function isElementHasClasses(element: HTMLElement, classesStr: string): boolean {
+ const classes = classesStr.split(' ')
+ for (let i = 0; i < classes.length; i++) {
+ if (!element.classList.contains(classes[i])) {
+ return false
+ }
+ }
+
+ return true
+}
+
+function isVisibleElement(element: HTMLElement): boolean {
+ return !(element.offsetWidth === 0 && element.offsetHeight === 0)
+}
+
+// Throttle function: Input as function which needs to be throttled and delay is the time interval in milliseconds
+function throttle(timer: number | undefined, func: Function, delay?: number) {
+ // If setTimeout is already scheduled, no need to do anything
+ if (timer) {
+ return
+ }
+
+ // Schedule a setTimeout after delay seconds
+ timer = window.setTimeout(function () {
+ func()
+
+ // Once setTimeout function execution is finished, timerId = undefined so that in
+ // the next scroll event function execution can be scheduled by the setTimeout
+ timer = undefined
+ }, delay)
+}
+
+function getElementChildren(element: HTMLElement, selector: string): Array | null {
+ if (!element || !element.childNodes) {
+ return null
+ }
+
+ const result: Array = []
+ for (let i = 0; i < element.childNodes.length; i++) {
+ const child = element.childNodes[i]
+ // child.nodeType == 1 => Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
+ if (child.nodeType === 1 && getElementMatches(child as HTMLElement, selector)) {
+ result.push(child as HTMLElement)
+ }
+ }
+
+ return result
+}
+
+function getElementChild(element: HTMLElement, selector: string): HTMLElement | null {
+ const children = getElementChildren(element, selector)
+ return children ? children[0] : null
+}
+
+function isMobileDevice(): boolean {
+ let test = getViewPort().width < +getBreakpoint('lg') ? true : false
+
+ if (test === false) {
+ // For use within normal web clients
+ test = navigator.userAgent.match(/iPad/i) != null
+ }
+
+ return test
+}
+
+function slide(el: HTMLElement, dir: string, speed: number, callback: any) {
+ if (
+ !el ||
+ (dir === 'up' && isVisibleElement(el) === false) ||
+ (dir === 'down' && isVisibleElement(el) === true)
+ ) {
+ return
+ }
+
+ speed = speed ? speed : 600
+ let calcHeight = getElementActualHeight(el)
+ let calcPaddingTop: number = 0
+ let calcPaddingBottom: number = 0
+
+ if (ElementStyleUtil.get(el, 'padding-top') && DataUtil.get(el, 'slide-padding-top') !== true) {
+ DataUtil.set(el, 'slide-padding-top', ElementStyleUtil.get(el, 'padding-top'))
+ }
+
+ if (
+ ElementStyleUtil.get(el, 'padding-bottom') &&
+ DataUtil.has(el, 'slide-padding-bottom') !== true
+ ) {
+ DataUtil.set(el, 'slide-padding-bottom', ElementStyleUtil.get(el, 'padding-bottom'))
+ }
+
+ if (DataUtil.has(el, 'slide-padding-top')) {
+ const data = DataUtil.get(el, 'slide-padding-top') as string
+ calcPaddingTop = parseInt(data as string)
+ }
+
+ if (DataUtil.has(el, 'slide-padding-bottom')) {
+ const data = DataUtil.get(el, 'slide-padding-bottom') as string
+ calcPaddingBottom = parseInt(data)
+ }
+
+ if (dir === 'up') {
+ // up
+ el.style.cssText = 'display: block; overflow: hidden;'
+
+ if (calcPaddingTop) {
+ ElementAnimateUtil.animate(0, calcPaddingTop, speed, function (value: number) {
+ el.style.paddingTop = calcPaddingTop - value + 'px'
+ })
+ }
+
+ if (calcPaddingBottom) {
+ ElementAnimateUtil.animate(0, calcPaddingBottom, speed, function (value: number) {
+ el.style.paddingBottom = calcPaddingBottom - value + 'px'
+ })
+ }
+
+ ElementAnimateUtil.animate(
+ 0,
+ calcHeight || 0,
+ speed,
+ function (value: number) {
+ el.style.height = (calcHeight || 0) - value + 'px'
+ },
+ function () {
+ el.style.height = ''
+ el.style.display = 'none'
+
+ if (typeof callback === 'function') {
+ callback()
+ }
+ }
+ )
+ } else if (dir === 'down') {
+ // down
+ el.style.cssText = 'display: block; overflow: hidden;'
+
+ if (calcPaddingTop) {
+ ElementAnimateUtil.animate(
+ 0,
+ calcPaddingTop,
+ speed,
+ function (value: number) {
+ //
+ el.style.paddingTop = value + 'px'
+ },
+ function () {
+ el.style.paddingTop = ''
+ }
+ )
+ }
+
+ if (calcPaddingBottom) {
+ ElementAnimateUtil.animate(
+ 0,
+ calcPaddingBottom,
+ speed,
+ function (value: number) {
+ el.style.paddingBottom = value + 'px'
+ },
+ function () {
+ el.style.paddingBottom = ''
+ }
+ )
+ }
+
+ ElementAnimateUtil.animate(
+ 0,
+ calcHeight || 0,
+ speed,
+ function (value: number) {
+ el.style.height = value + 'px'
+ },
+ function () {
+ el.style.height = ''
+ el.style.display = ''
+ el.style.overflow = ''
+
+ if (typeof callback === 'function') {
+ callback()
+ }
+ }
+ )
+ }
+}
+
+function slideUp(el: HTMLElement, speed: number, callback: any) {
+ slide(el, 'up', speed, callback)
+}
+
+function slideDown(el: HTMLElement, speed: number, callback: any) {
+ slide(el, 'down', speed, callback)
+}
+
+function getBreakpoint(breakpoint: string) {
+ let value: number | string = getCSSVariableValue('--kt-' + breakpoint)
+ if (value) {
+ value = parseInt(value.trim())
+ }
+
+ return value
+}
+
+function getAttributeValueByBreakpoint(incomingAttr: string): string | JSON {
+ let value = toJSON(incomingAttr)
+ if (typeof value !== 'object') {
+ return incomingAttr
+ }
+
+ const width = getViewPort().width
+ let resultKey
+ let resultBreakpoint = -1
+ let breakpoint
+
+ for (let key in value) {
+ if (key === 'default') {
+ breakpoint = 0
+ } else {
+ breakpoint = getBreakpoint(key) ? +getBreakpoint(key) : parseInt(key)
+ }
+
+ if (breakpoint <= width && breakpoint > resultBreakpoint) {
+ resultKey = key
+ resultBreakpoint = breakpoint
+ }
+ }
+
+ return resultKey ? getObjectPropertyValueByKey(value, resultKey) : value
+}
+
+function colorLighten(color: string, amount: number) {
+ const addLight = (_color: string, _amount: number) => {
+ const cc = parseInt(_color, 16) + _amount
+ const cNum = cc > 255 ? 255 : cc
+ const c = cNum.toString(16).length > 1 ? cNum.toString(16) : `0${cNum.toString(16)}`
+ return c
+ }
+
+ color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+ amount = parseInt(((255 * amount) / 100).toString())
+ return (color = `#${addLight(color.substring(0, 2), amount)}${addLight(
+ color.substring(2, 4),
+ amount
+ )}${addLight(color.substring(4, 6), amount)}`)
+}
+
+function colorDarken(color: string, amount: number) {
+ const subtractLight = (_color: string, _amount: number) => {
+ const cc = parseInt(color, 16) - amount
+ const cNum = cc < 0 ? 0 : cc
+ const c = cNum.toString(16).length > 1 ? cNum.toString(16) : `0${cNum.toString(16)}`
+ return c
+ }
+
+ color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+ amount = parseInt(((255 * amount) / 100).toString())
+
+ return (color = `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
+ color.substring(2, 4),
+ amount
+ )}${subtractLight(color.substring(4, 6), amount)}`)
+}
+
+export {
+ getBreakpoint,
+ getCSS,
+ getCSSVariableValue,
+ getElementActualCss,
+ getElementActualHeight,
+ getElementActualWidth,
+ getElementIndex,
+ getElementMatches,
+ getElementOffset,
+ getElementParents,
+ getHighestZindex,
+ getScrollTop,
+ getViewPort,
+ insertAfterElement,
+ isElementHasClasses,
+ isVisibleElement,
+ throttle,
+ getElementChildren,
+ getElementChild,
+ isMobileDevice,
+ slide,
+ slideUp,
+ slideDown,
+ getAttributeValueByBreakpoint,
+ colorLighten,
+ colorDarken,
+}
diff --git a/src/_res/assets/ts/_utils/ElementAnimateUtil.ts b/src/_res/assets/ts/_utils/ElementAnimateUtil.ts
new file mode 100644
index 0000000..20a2339
--- /dev/null
+++ b/src/_res/assets/ts/_utils/ElementAnimateUtil.ts
@@ -0,0 +1,111 @@
+import {DOMEventHandlerUtil} from './_DOMEventHandlerUtil'
+import {ElementStyleUtil} from './_ElementStyleUtil'
+import {getElementOffset} from './DomHelpers'
+
+export class ElementAnimateUtil {
+ public static animate(
+ from: number,
+ to: number,
+ duration: number,
+ update: Function,
+ complete?: Function
+ ) {
+ /**
+ * TinyAnimate.easings
+ * Adapted from jQuery Easing
+ */
+ const easings = {
+ linear: function (t: number, b: number, c: number, d: number) {
+ return (c * t) / d + b
+ },
+ }
+
+ // Create mock done() function if necessary
+ if (!complete) {
+ complete = function () {}
+ }
+
+ // Animation loop
+ // let canceled = false;
+ const change = to - from
+
+ function loop(timestamp: number) {
+ var time = (timestamp || +new Date()) - start
+
+ if (time >= 0) {
+ update(easings.linear(time, from, change, duration))
+ }
+ if (time >= 0 && time >= duration) {
+ update(to)
+ if (complete) {
+ complete()
+ }
+ } else {
+ window.requestAnimationFrame(loop)
+ }
+ }
+
+ update(from)
+
+ // Start animation loop
+ const start =
+ window.performance && window.performance.now ? window.performance.now() : +new Date()
+
+ window.requestAnimationFrame(loop)
+ }
+
+ public static animateClass(
+ element: HTMLElement,
+ animationName: string,
+ callBack?: Function
+ ): void {
+ const animateClasses = animationName.split(' ')
+ animateClasses.forEach((cssClass) => element.classList.add(cssClass))
+ DOMEventHandlerUtil.one(element, 'animationend', function () {
+ animateClasses.forEach((cssClass) => element.classList.remove(cssClass))
+ })
+
+ if (callBack) {
+ DOMEventHandlerUtil.one(element, 'animationend', callBack)
+ }
+ }
+
+ public static transitionEnd(element: HTMLElement, callBack: Function) {
+ DOMEventHandlerUtil.one(element, 'transitionend', callBack)
+ }
+
+ public static animationEnd(element: HTMLElement, callBack: Function) {
+ DOMEventHandlerUtil.one(element, 'animationend', callBack)
+ }
+
+ public static animationDelay(element: HTMLElement, value: string) {
+ ElementStyleUtil.set(element, 'animation-delay', value)
+ }
+
+ public static animationDuration(element: HTMLElement, value: string) {
+ ElementStyleUtil.set(element, 'animation-duration', value)
+ }
+
+ public static scrollTo(element: HTMLElement | null, offset: number, duration: number = 500) {
+ let targetPos = element ? getElementOffset(element).top : 0
+ let scrollPos =
+ window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+
+ if (offset) {
+ scrollPos += offset
+ targetPos = targetPos - offset
+ }
+
+ const from = scrollPos
+ const to = targetPos
+
+ ElementAnimateUtil.animate(from, to, duration, function (value: number) {
+ document.documentElement.scrollTop = value
+ // document.body.parentNode.scrollTop = value;
+ document.body.scrollTop = value
+ }) //, easing, done
+ }
+ public static scrollTop(offset: number, duration: number) {
+ ElementAnimateUtil.scrollTo(null, offset, duration)
+ }
+}
diff --git a/src/_res/assets/ts/_utils/EventHandlerUtil.ts b/src/_res/assets/ts/_utils/EventHandlerUtil.ts
new file mode 100644
index 0000000..878a793
--- /dev/null
+++ b/src/_res/assets/ts/_utils/EventHandlerUtil.ts
@@ -0,0 +1,144 @@
+import {DataUtil} from './_DataUtil'
+import {getUniqueIdWithPrefix} from './_TypesHelpers'
+
+export interface EventMeta {
+ name: string
+ callback: Function
+ one: boolean
+ fired: boolean
+}
+
+export class EventHandlerUtil {
+ static store: {
+ [name: string]: {
+ [handlerId: string]: EventMeta
+ }
+ } = {}
+
+ private static setEventMetasByName(
+ name: string,
+ handlers: {
+ [handlerId: string]: EventMeta
+ }
+ ): void {
+ EventHandlerUtil.store[name] = handlers
+ }
+
+ private static getEventMetaByName(name: string):
+ | {
+ [handlerId: string]: EventMeta
+ }
+ | undefined {
+ return EventHandlerUtil.store[name]
+ }
+
+ private static setEventMetaByNameAndHandlerId(
+ name: string,
+ handlerId: string,
+ meta: EventMeta
+ ): void {
+ if (EventHandlerUtil.store[name]) {
+ EventHandlerUtil.store[name][handlerId] = meta
+ return
+ }
+ EventHandlerUtil.store[name] = {}
+ EventHandlerUtil.store[name][handlerId] = meta
+ }
+
+ private static getEventMetaByHandlerId(name: string, handlerId: string): EventMeta | undefined {
+ const handlersIds = EventHandlerUtil.store[name]
+ if (!handlersIds) {
+ return
+ }
+ return handlersIds[handlerId]
+ }
+
+ private static setFiredByNameAndHandlerId(name: string, handerId: string, fired: boolean): void {
+ const meta = EventHandlerUtil.getEventMetaByHandlerId(name, handerId)
+ if (!meta) {
+ return
+ }
+
+ meta.fired = fired
+ EventHandlerUtil.setEventMetaByNameAndHandlerId(name, handerId, meta)
+ }
+
+ private static addEvent(
+ element: HTMLElement,
+ name: string,
+ callback: Function,
+ one: boolean = false
+ ): string {
+ const handlerId = getUniqueIdWithPrefix('event')
+ const data = DataUtil.get(element, name)
+ const handlersIds = data ? (data as string[]) : []
+ handlersIds.push(handlerId)
+
+ DataUtil.set(element, name, handlersIds)
+
+ const meta: EventMeta = {
+ name: name,
+ callback: callback,
+ one: one,
+ fired: false,
+ }
+
+ EventHandlerUtil.setEventMetaByNameAndHandlerId(name, handlerId, meta)
+ return handlerId
+ }
+
+ private static removeEvent(element: HTMLElement, name: string, handerId: string) {
+ DataUtil.removeOne(element, name, handerId)
+ const handlersIds = EventHandlerUtil.store[name]
+ if (handlersIds) {
+ return
+ }
+
+ delete EventHandlerUtil.store[name][handerId]
+ }
+
+ public static trigger(element: HTMLElement, name: string, target?: any, e?: Event): boolean {
+ let returnValue = true
+ if (!DataUtil.has(element, name)) {
+ return returnValue
+ }
+
+ let eventValue
+ let handlerId
+ const data = DataUtil.get(element, name)
+ const handlersIds = data ? (data as string[]) : []
+ for (let i = 0; i < handlersIds.length; i++) {
+ handlerId = handlersIds[i]
+ if (EventHandlerUtil.store[name] && EventHandlerUtil.store[name][handlerId]) {
+ const handler = EventHandlerUtil.store[name][handlerId]
+ if (handler.name === name) {
+ if (handler.one) {
+ if (handler.fired) {
+ EventHandlerUtil.store[name][handlerId].fired = true
+ eventValue = handler.callback.call(this, target)
+ }
+ } else {
+ eventValue = handler.callback.call(this, target)
+ }
+
+ if (eventValue === false) {
+ returnValue = false
+ }
+ }
+ }
+ }
+ return returnValue
+ }
+
+ public static on = function (element: HTMLElement, name: string, callBack: Function): void {
+ EventHandlerUtil.addEvent(element, name, callBack, false)
+ }
+
+ public static one(element: HTMLElement, name: string, callBack: Function): void {
+ EventHandlerUtil.addEvent(element, name, callBack, true)
+ }
+
+ public static off(element: HTMLElement, name: string, handerId: string): void {
+ EventHandlerUtil.removeEvent(element, name, handerId)
+ }
+}
diff --git a/src/_res/assets/ts/_utils/_DOMEventHandlerUtil.ts b/src/_res/assets/ts/_utils/_DOMEventHandlerUtil.ts
new file mode 100644
index 0000000..568f812
--- /dev/null
+++ b/src/_res/assets/ts/_utils/_DOMEventHandlerUtil.ts
@@ -0,0 +1,60 @@
+import {getUniqueIdWithPrefix} from './_TypesHelpers'
+
+export class DOMEventHandlerUtil {
+ public static store = new Map()
+
+ public static on(
+ element: HTMLElement,
+ selector: string,
+ eventName: string,
+ callBack: any
+ ): string {
+ const eventId = getUniqueIdWithPrefix('DOMEvent')
+ DOMEventHandlerUtil.store.set(eventId, (e: Event) => {
+ const targets = element.querySelectorAll(selector)
+ let target: HTMLElement | null = e.target as HTMLElement
+ while (target && target !== element) {
+ for (let i = 0; i < targets.length; i++) {
+ if (target === targets[i]) {
+ callBack.call(target, e)
+ }
+ }
+
+ if (target.parentElement) {
+ target = target.parentElement
+ } else {
+ target = null
+ }
+ }
+ })
+ element.addEventListener(eventName, DOMEventHandlerUtil.store.get(eventId))
+ return eventId
+ }
+
+ public static off(element: HTMLElement, eventName: string, eventId: string): void {
+ const funcFromStore = DOMEventHandlerUtil.store.get(eventId)
+ if (!funcFromStore) {
+ return
+ }
+
+ element.removeEventListener(eventName, funcFromStore)
+ DOMEventHandlerUtil.store.delete(eventId)
+ }
+
+ public static one(element: HTMLElement, eventName: string, callBack: Function): void {
+ element.addEventListener(eventName, function calee(e) {
+ // remove event
+ if (e.target && e.target.removeEventListener) {
+ e.target.removeEventListener(e.type, calee)
+ }
+
+ if (element && e && e.currentTarget) {
+ // if (element && element.removeEventListener && e && e.currentTarget) {
+ e.currentTarget.removeEventListener(e.type, calee)
+ }
+
+ // call hander
+ return callBack(e)
+ })
+ }
+}
diff --git a/src/_res/assets/ts/_utils/_DataUtil.ts b/src/_res/assets/ts/_utils/_DataUtil.ts
new file mode 100644
index 0000000..14e9cae
--- /dev/null
+++ b/src/_res/assets/ts/_utils/_DataUtil.ts
@@ -0,0 +1,72 @@
+export class DataUtil {
+ static store: Map> = new Map()
+
+ public static set(instance: HTMLElement | undefined, key: string, data: unknown): void {
+ if (!instance) {
+ return
+ }
+
+ const instanceData = DataUtil.store.get(instance)
+ if (!instanceData) {
+ const newMap = new Map().set(key, data)
+ DataUtil.store.set(instance, newMap)
+ return
+ }
+
+ instanceData.set(key, data)
+ }
+
+ public static get(instance: HTMLElement, key: string): unknown | undefined {
+ const instanceData = DataUtil.store.get(instance)
+ if (!instanceData) {
+ return
+ }
+
+ return instanceData.get(key)
+ }
+
+ public static remove(instance: HTMLElement, key: string): void {
+ const instanceData = DataUtil.store.get(instance)
+ if (!instanceData) {
+ return
+ }
+
+ instanceData.delete(key)
+ }
+
+ public static removeOne(instance: HTMLElement, key: string, eventId: string) {
+ const instanceData = DataUtil.store.get(instance)
+ if (!instanceData) {
+ return
+ }
+
+ const eventsIds = instanceData.get(key)
+ if (!eventsIds) {
+ return
+ }
+
+ const updateEventsIds = (eventsIds as string[]).filter((f) => f !== eventId)
+ DataUtil.set(instance, key, updateEventsIds)
+ }
+
+ public static has(instance: HTMLElement, key: string): boolean {
+ const instanceData = DataUtil.store.get(instance)
+ if (instanceData) {
+ return instanceData.has(key)
+ }
+
+ return false
+ }
+
+ public static getAllInstancesByKey(key: string) {
+ const result: any[] = []
+ DataUtil.store.forEach((val) => {
+ val.forEach((v, k) => {
+ if (k === key) {
+ result.push(v)
+ }
+ })
+ })
+ return result
+ }
+}
diff --git a/src/_res/assets/ts/_utils/_ElementStyleUtil.ts b/src/_res/assets/ts/_utils/_ElementStyleUtil.ts
new file mode 100644
index 0000000..b0ddda4
--- /dev/null
+++ b/src/_res/assets/ts/_utils/_ElementStyleUtil.ts
@@ -0,0 +1,17 @@
+export class ElementStyleUtil {
+ public static set(element: HTMLElement, property: string, value?: any, important?: boolean) {
+ if (important) {
+ element.style.setProperty(property, value, 'important')
+ } else {
+ element.style.setProperty(property, value)
+ }
+ }
+
+ public static get(element: HTMLElement, attributeName: string) {
+ return element.style.getPropertyValue(attributeName)
+ }
+
+ public static remove(element: HTMLElement, attibuteName: string) {
+ element.style.removeProperty(attibuteName)
+ }
+}
diff --git a/src/_res/assets/ts/_utils/_TypesHelpers.ts b/src/_res/assets/ts/_utils/_TypesHelpers.ts
new file mode 100644
index 0000000..5c32269
--- /dev/null
+++ b/src/_res/assets/ts/_utils/_TypesHelpers.ts
@@ -0,0 +1,54 @@
+function getObjectPropertyValueByKey(obj: any, key: string): any | undefined {
+ const map = new Map(Object.entries(obj))
+ if (obj.hasOwnProperty(key) && map) {
+ return map.get(key)
+ }
+}
+
+/**
+ * Generates unique ID for give prefix.
+ * @param {string} prefix Prefix for generated ID
+ * @returns {boolean}
+ */
+function getUniqueIdWithPrefix(prefix: string | undefined): string {
+ const result = Math.floor(Math.random() * new Date().getTime()).toString()
+ if (!prefix) {
+ return result
+ }
+
+ return `${prefix}${result}`
+}
+
+/* eslint-disable no-useless-escape */
+function stringSnakeToCamel(str: string): string {
+ return str.replace(/(\-\w)/g, function (m) {
+ return m[1].toUpperCase()
+ })
+}
+
+function toJSON(value: string | JSON): JSON | undefined {
+ if (typeof value !== 'string') {
+ return value
+ }
+
+ if (!value) {
+ return undefined
+ }
+
+ // ("'" => "\"");
+ const result = value
+ .toString()
+ .split('')
+ .map((el) => (el !== "'" ? el : '"'))
+ .join('')
+ var jsonStr = result.replace(/(\w+:)|(\w+ :)/g, function (matched) {
+ return '"' + matched.substring(0, matched.length - 1) + '":'
+ })
+ try {
+ return JSON.parse(jsonStr)
+ } catch {
+ return undefined
+ }
+}
+
+export {getObjectPropertyValueByKey, getUniqueIdWithPrefix, stringSnakeToCamel, toJSON}
diff --git a/src/_res/assets/ts/_utils/index.ts b/src/_res/assets/ts/_utils/index.ts
new file mode 100644
index 0000000..02ad68f
--- /dev/null
+++ b/src/_res/assets/ts/_utils/index.ts
@@ -0,0 +1,12 @@
+// Types
+export * from './models/OffsetModel'
+export * from './models/ViewPortModel'
+// Helpers
+export * from './DomHelpers'
+export * from './_TypesHelpers'
+// Basic
+export * from './_DataUtil'
+export * from './_DOMEventHandlerUtil'
+export * from './_ElementStyleUtil'
+export * from './ElementAnimateUtil'
+export * from './EventHandlerUtil'
diff --git a/src/_res/assets/ts/_utils/models/OffsetModel.ts b/src/_res/assets/ts/_utils/models/OffsetModel.ts
new file mode 100644
index 0000000..bea6c4e
--- /dev/null
+++ b/src/_res/assets/ts/_utils/models/OffsetModel.ts
@@ -0,0 +1,4 @@
+export interface OffsetModel {
+ top: number
+ left: number
+}
diff --git a/src/_res/assets/ts/_utils/models/ViewPortModel.ts b/src/_res/assets/ts/_utils/models/ViewPortModel.ts
new file mode 100644
index 0000000..63ee145
--- /dev/null
+++ b/src/_res/assets/ts/_utils/models/ViewPortModel.ts
@@ -0,0 +1,4 @@
+export interface ViewPortModel {
+ width: number
+ height: number
+}
diff --git a/src/_res/assets/ts/components/MenuComponent.ts b/src/_res/assets/ts/components/MenuComponent.ts
new file mode 100644
index 0000000..e27ac0b
--- /dev/null
+++ b/src/_res/assets/ts/components/MenuComponent.ts
@@ -0,0 +1,1088 @@
+import {createPopper, VirtualElement} from '@popperjs/core'
+import {
+ getElementChild,
+ getElementParents,
+ getAttributeValueByBreakpoint,
+ getUniqueIdWithPrefix,
+ DataUtil,
+ ElementStyleUtil,
+ EventHandlerUtil,
+ insertAfterElement,
+ slideUp,
+ slideDown,
+ DOMEventHandlerUtil,
+ throttle,
+ getHighestZindex,
+} from '../_utils/index'
+
+export interface MenuOptions {
+ dropdown: {
+ hoverTimeout: number
+ zindex: number
+ }
+ accordion: {
+ slideSpeed: number
+ expand: boolean
+ }
+}
+
+const defaultMenuOptions: MenuOptions = {
+ dropdown: {
+ hoverTimeout: 200,
+ zindex: 105,
+ },
+ accordion: {
+ slideSpeed: 250,
+ expand: false,
+ },
+}
+
+type PopperPlacement =
+ | 'right'
+ | 'auto'
+ | 'auto-start'
+ | 'auto-end'
+ | 'top'
+ | 'bottom'
+ | 'left'
+ | 'top-start'
+ | 'top-end'
+ | 'bottom-start'
+ | 'bottom-end'
+ | 'right-start'
+ | 'right-end'
+ | 'left-start'
+ | 'left-end'
+ | undefined
+
+class MenuComponent {
+ element: HTMLElement
+ options: MenuOptions
+ instanceUid: string
+ triggerElement: HTMLElement | null = null
+
+ constructor(_element: HTMLElement, options: MenuOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultMenuOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('menu')
+ // this.element.setAttribute('data-kt-menu', 'true')
+ this._setTriggerElement()
+ this._update()
+ DataUtil.set(this.element, 'menu', this)
+ return this
+ }
+
+ // Set external trigger element
+ private _setTriggerElement = () => {
+ const target = document.querySelector(
+ `[data-kt-menu-target="#${this.element.getAttribute('id')}"`
+ )
+
+ if (target) {
+ this.triggerElement = target as HTMLElement
+ } else if (this.element.closest('[data-kt-menu-trigger]')) {
+ this.triggerElement = this.element.closest('[data-kt-menu-trigger]') as HTMLElement
+ } else if (
+ this.element.parentNode &&
+ getElementChild(this.element.parentNode as HTMLElement, '[data-kt-menu-trigger]')
+ ) {
+ const child = getElementChild(
+ this.element.parentNode as HTMLElement,
+ '[data-kt-menu-trigger]'
+ )
+ if (child) {
+ this.triggerElement = child
+ }
+ }
+
+ if (this.triggerElement) {
+ DataUtil.set(this.triggerElement, 'menu', this)
+ }
+ }
+
+ // Test if menu has external trigger element
+ private _isTriggerElement = (item: HTMLElement) => {
+ return this.triggerElement === item
+ }
+
+ // Get item option(through html attributes)
+ private _getItemOption = (item: HTMLElement, name: string) => {
+ let value: string | JSON | null | boolean = null
+ if (item && item.hasAttribute('data-kt-menu-' + name)) {
+ const attr = item.getAttribute('data-kt-menu-' + name) || ''
+ value = getAttributeValueByBreakpoint(attr)
+ if (value !== null && String(value) === 'true') {
+ value = true
+ } else if (value !== null && String(value) === 'false') {
+ value = false
+ }
+ }
+ return value
+ }
+
+ // Get item element
+ private _getItemElement = (_element: HTMLElement): HTMLElement | undefined => {
+ // Element is the external trigger element
+ if (this._isTriggerElement(_element)) {
+ return _element
+ }
+
+ // Element has item toggler attribute
+ if (_element.hasAttribute('data-kt-menu-trigger')) {
+ return _element
+ }
+
+ // Element has item DOM reference in it's data storage
+ const itemElement = DataUtil.get(_element, 'item')
+ if (itemElement) {
+ return itemElement as HTMLElement
+ }
+
+ // Item is parent of element
+ const item = _element.closest('.menu-item[data-kt-menu-trigger]')
+ if (item) {
+ return item
+ }
+
+ // Element's parent has item DOM reference in it's data storage
+ const sub = _element.closest('.menu-sub')
+ if (sub) {
+ const subItem = DataUtil.get(sub as HTMLElement, 'item')
+ if (subItem) {
+ return subItem as HTMLElement
+ }
+ }
+ }
+
+ // Get item parent element
+ private _getItemParentElement = (item: HTMLElement) => {
+ const sub = item.closest('.menu-sub')
+ if (!sub) {
+ return null
+ }
+
+ const subItem = DataUtil.get(sub, 'item')
+ if (subItem) {
+ return subItem as HTMLElement
+ }
+
+ const parentItem = sub.closest('.menu-item[data-kt-menu-trigger]')
+ if (sub && parentItem) {
+ return parentItem
+ }
+
+ return null
+ }
+
+ // Get item parent elements
+ private _getItemParentElements = (item: HTMLElement) => {
+ const parents: Array = []
+ let parent: HTMLElement | null
+ let i = 0
+ let buffer: HTMLElement = item
+
+ do {
+ parent = this._getItemParentElement(buffer)
+ if (parent) {
+ parents.push(parent)
+ buffer = parent as HTMLElement
+ }
+
+ i++
+ } while (parent !== null && i < 20)
+
+ if (this.triggerElement) {
+ parents.unshift(this.triggerElement)
+ }
+
+ return parents
+ }
+
+ // Prepare popper config for dropdown(see: https://popper.js.org/docs/v2/)
+ private _getDropdownPopperConfig = (item: HTMLElement) => {
+ // Placement
+ const placementOption = this._getItemOption(item, 'placement')
+ let placement: PopperPlacement = 'right'
+ if (placementOption) {
+ placement = placementOption as PopperPlacement
+ }
+
+ // Flip
+ // const flipValue = this._getItemOption(item, 'flip')
+ // const flip = flipValue ? flipValue.toString().split(',') : []
+
+ // Offset
+ const offsetValue = this._getItemOption(item, 'offset')
+ const offset = offsetValue ? offsetValue.toString().split(',') : []
+
+ // Strategy
+ const strategy: 'absolute' | 'fixed' | undefined =
+ this._getItemOption(item, 'overflow') === true ? 'absolute' : 'fixed'
+
+ return {
+ placement: placement,
+ strategy: strategy,
+ modifiers: [
+ {
+ name: 'offset',
+ options: {
+ offset: offset,
+ },
+ },
+ {
+ name: 'preventOverflow',
+ },
+ {
+ name: 'flip',
+ options: {
+ // altBoundary: true,
+ // fallbackPlacements: flip,
+ flipVariations: false,
+ },
+ },
+ ],
+ }
+ }
+
+ // Get item child element
+ private _getItemChildElement = (item: HTMLElement): HTMLElement | null => {
+ let selector = item
+
+ const subItem = DataUtil.get(item, 'sub')
+ if (subItem) {
+ selector = subItem as HTMLElement
+ }
+
+ if (selector) {
+ //element = selector.querySelector('.show.menu-item[data-kt-menu-trigger]');
+ const element = selector.querySelector('.menu-item[data-kt-menu-trigger]')
+ if (element) {
+ return element
+ }
+ }
+ return null
+ }
+
+ // Get item child elements
+ private _getItemChildElements = (item: HTMLElement) => {
+ const children: Array = []
+ let child: HTMLElement | null
+ let i = 0
+ let buffer = item
+ do {
+ child = this._getItemChildElement(buffer)
+ if (child) {
+ children.push(child)
+ buffer = child as HTMLElement
+ }
+
+ i++
+ } while (child !== null && i < 20)
+
+ return children
+ }
+
+ // Get item sub element
+ private _getItemSubElement = (item: HTMLElement): HTMLElement | null => {
+ if (!item) {
+ return null
+ }
+
+ if (this._isTriggerElement(item)) {
+ return this.element
+ }
+
+ if (item.classList.contains('menu-sub')) {
+ return item
+ } else if (DataUtil.has(item, 'sub')) {
+ const itemSub = DataUtil.get(item, 'sub')
+ return itemSub ? (itemSub as HTMLElement) : null
+ } else {
+ return getElementChild(item, '.menu-sub')
+ }
+ }
+
+ private _getCss = (el: HTMLElement, styleProp: string) => {
+ const defaultView = (el.ownerDocument || document).defaultView
+ if (!defaultView) {
+ return ''
+ }
+
+ // sanitize property name to css notation
+ // (hyphen separated words eg. font-Size)
+ styleProp = styleProp.replace(/([A-Z])/g, '-$1').toLowerCase()
+
+ return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp)
+ }
+
+ // Get item sub type
+ private _getItemSubType = (element: HTMLElement) => {
+ const sub = this._getItemSubElement(element)
+ if (sub && parseInt(this._getCss(sub as HTMLElement, 'z-index')) > 0) {
+ return 'dropdown'
+ } else {
+ return 'accordion'
+ }
+ }
+
+ // Test if item's sub is shown
+ private _isItemSubShown = (item: HTMLElement) => {
+ let sub = this._getItemSubElement(item)
+ if (sub) {
+ if (this._getItemSubType(item) === 'dropdown') {
+ const subHTMLElement = sub as HTMLElement
+ return (
+ subHTMLElement.classList.contains('show') &&
+ subHTMLElement.hasAttribute('data-popper-placement')
+ )
+ } else {
+ return item.classList.contains('show')
+ }
+ }
+
+ return false
+ }
+
+ // Test if item dropdown is permanent
+ private _isItemDropdownPermanent = (item: HTMLElement) => {
+ return this._getItemOption(item, 'permanent') === true
+ }
+
+ // Test if item's parent is shown
+ private _isItemParentShown = (item: HTMLElement) => {
+ return getElementParents(item, '.menu-item.show').length > 0
+ }
+
+ // Test of it is item sub element
+ private _isItemSubElement = (item: HTMLElement) => {
+ return item.classList.contains('menu-sub')
+ }
+
+ // Test if item has sub
+ private _hasItemSub = (item: HTMLElement) => {
+ return item.classList.contains('menu-item') && item.hasAttribute('data-kt-menu-trigger')
+ }
+
+ // Get link element
+ private _getItemLinkElement = (item: HTMLElement) => {
+ return getElementChild(item, '.menu-link')
+ }
+
+ // Get toggle element
+ private _getItemToggleElement = (item: HTMLElement) => {
+ if (this.triggerElement) {
+ return this.triggerElement
+ }
+
+ return this._getItemLinkElement(item)
+ }
+
+ // Show item dropdown
+ private _showDropdown = (item: HTMLElement) => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.menu.dropdown.show') === false) {
+ return
+ }
+
+ // Hide all currently shown dropdowns except current one
+ MenuComponent.hideDropdowns(item)
+
+ // const toggle = this._isTriggerElement(item) ? item : this._getItemLinkElement(item);
+ const sub = this._getItemSubElement(item)
+ const width = this._getItemOption(item, 'width')
+ const height = this._getItemOption(item, 'height')
+
+ let zindex = this.options.dropdown.zindex
+ const parentZindex = getHighestZindex(item) // update
+ // Apply a new z-index if dropdown's toggle element or it's parent has greater z-index // update
+ if (parentZindex !== null && parentZindex >= zindex) {
+ zindex = parentZindex + 1
+ }
+
+ if (zindex && sub) {
+ ElementStyleUtil.set(sub, 'z-index', zindex)
+ }
+
+ if (width && sub) {
+ ElementStyleUtil.set(sub, 'width', width)
+ }
+
+ if (height && sub) {
+ ElementStyleUtil.set(sub, 'height', height)
+ }
+
+ this.initDropdownPopper(item, sub as HTMLElement)
+
+ item.classList.add('show')
+ item.classList.add('menu-dropdown')
+ sub?.classList.add('show')
+
+ // Append the sub the the root of the menu
+ if (this._getItemOption(item, 'overflow') === true) {
+ if (sub) {
+ document.body.appendChild(sub)
+ DataUtil.set(item, 'sub', sub)
+ DataUtil.set(sub, 'item', item)
+ DataUtil.set(sub, 'menu', this)
+ }
+ } else {
+ if (sub) {
+ DataUtil.set(sub, 'item', item)
+ }
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.menu.dropdown.shown')
+ }
+
+ // Init dropdown popper(new)
+ private initDropdownPopper = (item: HTMLElement, sub: HTMLElement) => {
+ // Setup popper instance
+ let reference
+ const attach = this._getItemOption(item, 'attach') as string
+
+ if (attach) {
+ if (attach === 'parent') {
+ reference = item.parentNode
+ } else {
+ reference = document.querySelector(attach)
+ }
+ } else {
+ reference = item
+ }
+
+ if (reference) {
+ const popper = createPopper(
+ reference as Element | VirtualElement,
+ sub,
+ this._getDropdownPopperConfig(item)
+ )
+ DataUtil.set(item, 'popper', popper)
+ }
+ }
+
+ // Hide item dropdown
+ private _hideDropdown = (item: HTMLElement) => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.menu.dropdown.hide') === false) {
+ return
+ }
+
+ const sub = this._getItemSubElement(item)
+ if (sub) {
+ ElementStyleUtil.set(sub, 'z-index', '')
+ ElementStyleUtil.set(sub, 'width', '')
+ ElementStyleUtil.set(sub, 'height', '')
+ }
+
+ item.classList.remove('show')
+ item.classList.remove('menu-dropdown')
+ if (sub) {
+ sub.classList.remove('show')
+ }
+
+ // Append the sub back to it's parent
+ if (this._getItemOption(item, 'overflow') === true) {
+ if (item.classList.contains('menu-item')) {
+ if (sub) {
+ item.appendChild(sub)
+ }
+ } else {
+ insertAfterElement(this.element, item)
+ }
+
+ if (sub) {
+ DataUtil.remove(item, 'sub')
+ DataUtil.remove(sub, 'item')
+ DataUtil.remove(sub, 'menu')
+ }
+ }
+
+ if (DataUtil.has(item, 'popper') === true) {
+ // @ts-ignore
+ DataUtil.get(item, 'popper').destroy()
+ DataUtil.remove(item, 'popper')
+ }
+
+ // Destroy popper(new)
+ this.destroyDropdownPopper(item)
+ EventHandlerUtil.trigger(this.element, 'kt.menu.dropdown.hidden')
+ }
+
+ // Destroy dropdown popper(new)
+ private destroyDropdownPopper = (item: HTMLElement) => {
+ if (DataUtil.has(item, 'popper') === true) {
+ // @ts-ignore
+ DataUtil.get(item, 'popper').destroy()
+ DataUtil.remove(item, 'popper')
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.menu.dropdown.hidden')
+ }
+
+ private _showAccordion = (item: HTMLElement) => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.menu.accordion.show') === false) {
+ return
+ }
+
+ if (this.options.accordion.expand === false) {
+ this._hideAccordions(item)
+ }
+
+ if (DataUtil.has(item, 'popper') === true) {
+ this._hideDropdown(item)
+ }
+
+ item.classList.add('hover') // updateWW
+ item.classList.add('showing')
+
+ const subElement = this._getItemSubElement(item)
+ if (subElement) {
+ const sub = subElement as HTMLElement
+ slideDown(sub, this.options.accordion.slideSpeed, () => {
+ item.classList.remove('showing')
+ item.classList.add('show')
+ sub.classList.add('show')
+ EventHandlerUtil.trigger(this.element, 'kt.menu.accordion.shown')
+ })
+ }
+ }
+
+ private _hideAccordion = (item: HTMLElement) => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.menu.accordion.hide') === false) {
+ return
+ }
+
+ const sub = this._getItemSubElement(item)
+ item.classList.add('hiding')
+
+ if (sub) {
+ slideUp(sub, this.options.accordion.slideSpeed, () => {
+ item.classList.remove('hiding')
+ item.classList.remove('show')
+ sub.classList.remove('show')
+ item.classList.remove('hover') // update
+ EventHandlerUtil.trigger(this.element, 'kt.menu.accordion.hidden')
+ })
+ }
+ }
+
+ // Hide all shown accordions of item
+ private _hideAccordions = (item: HTMLElement) => {
+ const itemsToHide = this.element.querySelectorAll('.show[data-kt-menu-trigger]')
+ if (itemsToHide && itemsToHide.length > 0) {
+ for (var i = 0, len = itemsToHide.length; i < len; i++) {
+ const itemToHide = itemsToHide[i] as HTMLElement
+
+ if (
+ this._getItemSubType(itemToHide) === 'accordion' &&
+ itemToHide !== item &&
+ item.contains(itemToHide) === false &&
+ itemToHide.contains(item) === false
+ ) {
+ this._hideAccordion(itemToHide)
+ }
+ }
+ }
+ }
+
+ // Event Handlers
+ // Reset item state classes if item sub type changed
+ private _reset = (item: HTMLElement) => {
+ if (this._hasItemSub(item) === false) {
+ return
+ }
+
+ const sub = this._getItemSubElement(item)
+
+ // Reset sub state if sub type is changed during the window resize
+ if (DataUtil.has(item, 'type') && DataUtil.get(item, 'type') !== this._getItemSubType(item)) {
+ // updated
+ item.classList.remove('hover')
+ item.classList.remove('show')
+ item.classList.remove('show')
+ if (sub) {
+ sub.classList.remove('show')
+ }
+ } // updated
+ }
+
+ // TODO: not done
+ private _destroy = () => {}
+
+ // Update all item state classes if item sub type changed
+ private _update = () => {
+ const items = this.element.querySelectorAll('.menu-item[data-kt-menu-trigger]')
+ items.forEach((el) => this._reset(el as HTMLElement))
+ }
+
+ // Hide item sub
+ private _hide = (item: HTMLElement) => {
+ if (!item) {
+ return
+ }
+
+ if (this._isItemSubShown(item) === false) {
+ return
+ }
+
+ if (this._getItemSubType(item) === 'dropdown') {
+ this._hideDropdown(item)
+ } else if (this._getItemSubType(item) === 'accordion') {
+ this._hideAccordion(item)
+ }
+ }
+
+ // Show item sub
+ private _show = (item: HTMLElement) => {
+ if (!item) {
+ return
+ }
+
+ if (this._isItemSubShown(item) === true) {
+ return
+ }
+
+ if (this._getItemSubType(item) === 'dropdown') {
+ this._showDropdown(item) // // show current dropdown
+ } else if (this._getItemSubType(item) === 'accordion') {
+ this._showAccordion(item)
+ }
+
+ // Remember last submenu type
+
+ DataUtil.set(item, 'type', this._getItemSubType(item)) // updated
+ }
+
+ // Toggle item sub
+ private _toggle = (item: HTMLElement) => {
+ if (!item) {
+ return
+ }
+
+ if (this._isItemSubShown(item) === true) {
+ this._hide(item)
+ } else {
+ this._show(item)
+ }
+ }
+
+ // Mouseout handle
+ private _mouseout = (element: HTMLElement, e: MouseEvent) => {
+ const item = this._getItemElement(element)
+ if (!item) {
+ return
+ }
+
+ if (this._getItemOption(item, 'trigger') !== 'hover') {
+ return
+ }
+
+ const timeout = setTimeout(() => {
+ if (DataUtil.get(item, 'hover') === '1') {
+ this._hide(item)
+ }
+ }, this.options.dropdown.hoverTimeout)
+
+ DataUtil.set(item, 'hover', '1')
+ DataUtil.set(item, 'timeout', timeout)
+ }
+
+ // Mouseover handle
+ private _mouseover = (element: HTMLElement, e: MouseEvent) => {
+ const item = this._getItemElement(element)
+ if (!item) {
+ return
+ }
+
+ if (this._getItemOption(item, 'trigger') !== 'hover') {
+ return
+ }
+
+ if (DataUtil.get(item, 'hover') === '1') {
+ const timeout = DataUtil.get(item, 'timeout')
+ if (timeout) {
+ clearTimeout(timeout as number)
+ }
+ DataUtil.remove(item, 'hover')
+ DataUtil.remove(item, 'timeout')
+ }
+
+ this._show(item)
+ }
+
+ // Dismiss handler
+ private _dismiss = (element: HTMLElement, e: Event) => {
+ const item = this._getItemElement(element)
+ if (!item) {
+ return
+ }
+ const items = this._getItemChildElements(item)
+ //if ( item !== null && _getItemOption(item, 'trigger') === 'click' && _getItemSubType(item) === 'dropdown' ) {
+ const itemSubType = this._getItemSubType(item)
+ if (item !== null && itemSubType === 'dropdown') {
+ this._hide(item) // hide items dropdown
+
+ // Hide all child elements as well
+ if (items.length > 0) {
+ for (let i = 0, len = items.length; i < len; i++) {
+ //if ( _getItemOption(item, 'trigger') === 'click' && _getItemSubType(item) === 'dropdown' ) {
+ if (items[i] !== null && this._getItemSubType(items[i] as HTMLElement) === 'dropdown') {
+ this._hide(items[i] as HTMLElement)
+ }
+ }
+ }
+ }
+ }
+
+ // Link handler
+ private _link = (element: HTMLElement, e: Event) => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.menu.link.click') === false) {
+ return
+ }
+
+ // Dismiss all shown dropdowns
+ MenuComponent.hideDropdowns(undefined)
+ EventHandlerUtil.trigger(this.element, 'kt.menu.link.clicked')
+ }
+
+ private _click = (element: HTMLElement, e: Event) => {
+ e.preventDefault()
+ const item = this._getItemElement(element)
+ if (item) {
+ if (this._getItemOption(item, 'trigger') !== 'click') {
+ return
+ }
+
+ if (this._getItemOption(item, 'toggle') === false) {
+ this._show(item)
+ } else {
+ this._toggle(item)
+ }
+ }
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public click = (element: HTMLElement, e: Event) => {
+ return this._click(element, e)
+ }
+
+ public link = (element: HTMLElement, e: Event) => {
+ return this._link(element, e)
+ }
+
+ public dismiss = (element: HTMLElement, e: Event) => {
+ return this._dismiss(element, e)
+ }
+
+ public mouseover = (element: HTMLElement, e: Event) => {
+ return this._mouseover(element, e as MouseEvent)
+ }
+
+ public mouseout = (element: HTMLElement, e: Event) => {
+ return this._mouseout(element, e as MouseEvent)
+ }
+
+ // General Methods
+ public getItemTriggerType = (item: HTMLElement) => {
+ return this._getItemOption(item, 'trigger')
+ }
+
+ public getItemSubType = (element: HTMLElement) => {
+ return this._getItemSubType(element)
+ }
+
+ public show = (item: HTMLElement) => {
+ return this._show(item)
+ }
+
+ public hide = (item: HTMLElement) => {
+ return this._hide(item)
+ }
+
+ public reset = (item: HTMLElement) => {
+ return this._reset(item)
+ }
+
+ public update = () => {
+ return this._update()
+ }
+
+ public getElement = () => {
+ return this.element
+ }
+
+ public getItemLinkElement = (item: HTMLElement) => {
+ return this._getItemLinkElement(item)
+ }
+
+ public getItemToggleElement = (item: HTMLElement) => {
+ return this._getItemToggleElement(item)
+ }
+
+ public getItemSubElement = (item: HTMLElement) => {
+ return this._getItemSubElement(item)
+ }
+
+ public getItemParentElements = (item: HTMLElement) => {
+ return this._getItemParentElements(item)
+ }
+
+ public isItemSubShown = (item: HTMLElement) => {
+ return this._isItemSubShown(item)
+ }
+
+ public isItemParentShown = (item: HTMLElement) => {
+ return this._isItemParentShown(item)
+ }
+
+ public getTriggerElement = () => {
+ return this.triggerElement
+ }
+
+ public isItemDropdownPermanent = (item: HTMLElement) => {
+ return this._isItemDropdownPermanent(item)
+ }
+
+ // Accordion Mode Methods
+ public hideAccordions = (item: HTMLElement) => {
+ return this._hideAccordions(item)
+ }
+
+ // Event API
+ public on = (name: string, handler: any) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: any) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ // public static methods
+ // Get KTMenu instance by element
+ public static getInstance = (element: HTMLElement): MenuComponent | null => {
+ // Element has menu DOM reference in it's DATA storage
+ const elementMenu = DataUtil.get(element, 'menu')
+ if (elementMenu) {
+ return elementMenu as MenuComponent
+ }
+
+ // Element has .menu parent
+ const menu = element.closest('.menu')
+ if (menu) {
+ const menuData = DataUtil.get(menu as HTMLElement, 'menu')
+ if (menuData) {
+ return menuData as MenuComponent
+ }
+ }
+
+ // Element has a parent with DOM reference to .menu in it's DATA storage
+ if (element.classList.contains('menu-link')) {
+ const sub = element.closest('.menu-sub')
+ if (sub) {
+ const subMenu = DataUtil.get(sub as HTMLElement, 'menu')
+ if (subMenu) {
+ return subMenu as MenuComponent
+ }
+ }
+ }
+
+ return null
+ }
+
+ // Hide all dropdowns and skip one if provided
+ public static hideDropdowns = (skip: HTMLElement | undefined) => {
+ const items = document.querySelectorAll(
+ '.show.menu-dropdown[data-kt-menu-trigger]'
+ )
+
+ if (items && items.length > 0) {
+ for (let i = 0, len = items.length; i < len; i++) {
+ const item = items[i]
+ const menu = MenuComponent.getInstance(item as HTMLElement)
+
+ if (menu && menu.getItemSubType(item) === 'dropdown') {
+ if (skip) {
+ if (
+ // @ts-ignore
+ menu.getItemSubElement(item).contains(skip) === false &&
+ item.contains(skip) === false &&
+ item !== skip
+ ) {
+ menu.hide(item)
+ }
+ } else {
+ menu.hide(item)
+ }
+ }
+ }
+ }
+ }
+
+ public static updateDropdowns = () => {
+ const items = document.querySelectorAll('.show.menu-dropdown[data-kt-menu-trigger]')
+ if (items && items.length > 0) {
+ for (var i = 0, len = items.length; i < len; i++) {
+ var item = items[i]
+
+ if (DataUtil.has(item as HTMLElement, 'popper')) {
+ // @ts-ignore
+ DataUtil.get(item as HTMLElement, 'popper').forceUpdate()
+ }
+ }
+ }
+ }
+
+ // Global handlers
+ public static createInstances = (selector: string) => {
+ // Initialize menus
+ document.querySelectorAll(selector).forEach((el) => {
+ const menuItem = el as HTMLElement
+ let menuInstance = MenuComponent.getInstance(menuItem)
+ if (!menuInstance) {
+ menuInstance = new MenuComponent(el as HTMLElement, defaultMenuOptions)
+ }
+ })
+ }
+
+ public static initGlobalHandlers = () => {
+ // Dropdown handler
+ document.addEventListener('click', (e) => {
+ const menuItems = document.querySelectorAll('.show.menu-dropdown[data-kt-menu-trigger]')
+ if (menuItems && menuItems.length > 0) {
+ for (let i = 0; i < menuItems.length; i++) {
+ const item = menuItems[i] as HTMLElement
+ const menuObj = MenuComponent.getInstance(item) as MenuComponent
+ if (menuObj && menuObj.getItemSubType(item) === 'dropdown') {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const menu = menuObj.getElement()
+ const sub = menuObj.getItemSubElement(item) as HTMLElement
+ if (item === e.target || item.contains(e.target as HTMLElement)) {
+ continue
+ }
+
+ if (sub && (sub === e.target || sub.contains(e.target as HTMLElement))) {
+ continue
+ }
+ menuObj.hide(item)
+ }
+ }
+ }
+ })
+
+ // Sub toggle handler
+ DOMEventHandlerUtil.on(
+ document.body,
+ '.menu-item[data-kt-menu-trigger] > .menu-link, [data-kt-menu-trigger]:not(.menu-item):not([data-kt-menu-trigger="auto"])',
+ 'click',
+ function (this: HTMLElement, e: Event) {
+ const menu = MenuComponent.getInstance(this) as MenuComponent
+ if (menu) {
+ return menu.click(this, e)
+ }
+ }
+ )
+
+ // // Link handler
+ DOMEventHandlerUtil.on(
+ document.body,
+ '.menu-item:not([data-kt-menu-trigger]) > .menu-link',
+ 'click',
+ function (this: HTMLElement, e: Event) {
+ e.stopPropagation()
+ const menu = MenuComponent.getInstance(this)
+ if (menu && menu.link) {
+ return menu.link(this, e)
+ }
+ }
+ )
+
+ // Dismiss handler
+ DOMEventHandlerUtil.on(
+ document.body,
+ '[data-kt-menu-dismiss="true"]',
+ 'click',
+ function (this: HTMLElement, e: Event) {
+ const menu = MenuComponent.getInstance(this) as MenuComponent
+ if (menu) {
+ return menu.dismiss(this, e)
+ }
+ }
+ )
+
+ // Mouseover handler
+ DOMEventHandlerUtil.on(
+ document.body,
+ '[data-kt-menu-trigger], .menu-sub',
+ 'mouseover',
+ function (this: HTMLElement, e: Event) {
+ const menu = MenuComponent.getInstance(this) as MenuComponent
+ if (menu && menu.getItemSubType(this) === 'dropdown') {
+ return menu.mouseover(this, e)
+ }
+ }
+ )
+
+ // Mouseout handler
+ DOMEventHandlerUtil.on(
+ document.body,
+ '[data-kt-menu-trigger], .menu-sub',
+ 'mouseout',
+ function (this: HTMLElement, e: Event) {
+ const menu = MenuComponent.getInstance(this) as MenuComponent
+ if (menu && menu.getItemSubType(this) === 'dropdown') {
+ return menu.mouseout(this, e)
+ }
+ }
+ )
+
+ // Resize handler
+ window.addEventListener('resize', () => {
+ let timer
+ throttle(
+ timer,
+ () => {
+ // Locate and update Drawer instances on window resize
+ const elements = document.querySelectorAll('[data-kt-menu="true"]')
+ elements.forEach((el) => {
+ const menu = MenuComponent.getInstance(el as HTMLElement)
+ if (menu) {
+ menu.update()
+ }
+ })
+ },
+ 200
+ )
+ })
+ }
+
+ public static bootstrap = () => {
+ MenuComponent.initGlobalHandlers()
+ MenuComponent.createInstances('[data-kt-menu="true"]')
+ }
+
+ public static reinitialization = () => {
+ MenuComponent.createInstances('[data-kt-menu="true"]')
+ }
+
+ public static createInsance = (
+ selector: string,
+ options: MenuOptions = defaultMenuOptions
+ ): MenuComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let menu = MenuComponent.getInstance(item)
+ if (!menu) {
+ menu = new MenuComponent(item, options)
+ }
+ return menu
+ }
+}
+
+export {MenuComponent, defaultMenuOptions}
diff --git a/src/_res/assets/ts/components/SearchComponent.ts b/src/_res/assets/ts/components/SearchComponent.ts
new file mode 100644
index 0000000..88a6609
--- /dev/null
+++ b/src/_res/assets/ts/components/SearchComponent.ts
@@ -0,0 +1,478 @@
+import {
+ EventHandlerUtil,
+ DataUtil,
+ getBreakpoint,
+ getAttributeValueByBreakpoint,
+ stringSnakeToCamel,
+ getObjectPropertyValueByKey,
+ getViewPort,
+ isVisibleElement,
+ throttle,
+} from '../_utils/index'
+
+import {MenuComponent, defaultMenuOptions} from './MenuComponent'
+
+export interface ISearchOptions {
+ minLength: number // Miniam text lenght to query search
+ keypress: boolean // Enable search on keypress
+ enter: boolean // Enable search on enter key press
+ layout: 'menu' | 'inline' // Use 'menu' or 'inline' layout options to display search results
+ responsive?: number // Pass integer value or bootstrap compatible breakpoint key(sm,md,lg,xl,xxl) to enable reponsive form mode for device width below the breakpoint value
+ showOnFocus: boolean // Always show menu on input focus
+}
+
+export interface ISearchQueries {
+ componentName: string
+ instanseQuery: string
+ attrQuery: string
+}
+
+const defaultSearchOptions: ISearchOptions = {
+ minLength: 2, // Miniam text lenght to query search
+ keypress: true, // Enable search on keypress
+ enter: true, // Enable search on enter key press
+ layout: 'menu', // Use 'menu' or 'inline' layout options to display search results
+ showOnFocus: true, // Always show menu on input focus
+}
+
+const defaultSearchQueires: ISearchQueries = {
+ componentName: 'search',
+ instanseQuery: '[data-kt-search]',
+ attrQuery: 'data-kt-search-',
+}
+
+class SearchComponent {
+ element: HTMLElement
+ contentElement: HTMLElement
+ formElement: HTMLFormElement
+ inputElement: HTMLInputElement
+ spinnerElement: HTMLElement
+ clearElement: HTMLElement
+ toggleElement: HTMLElement
+ submitElement: HTMLElement
+ toolbarElement: HTMLElement
+ resultsElement: HTMLElement
+ suggestionElement: HTMLElement
+ emptyElement: HTMLElement
+ layout: any
+
+ options: ISearchOptions
+ queries: ISearchQueries
+
+ processing: boolean = false
+ menuObject: MenuComponent | undefined
+
+ constructor(_element: HTMLElement, _options: ISearchOptions, _queries: ISearchQueries) {
+ // Variables
+ this.options = Object.assign(defaultSearchOptions, _options)
+ this.queries = _queries
+
+ // Elements
+ this.element = _element
+ this.contentElement = this._getElement('content') as HTMLElement
+ this.formElement = this._getElement('form') as HTMLFormElement
+ this.inputElement = this._getElement('input') as HTMLInputElement
+ this.spinnerElement = this._getElement('spinner') as HTMLElement
+ this.clearElement = this._getElement('clear') as HTMLElement
+ this.toggleElement = this._getElement('toggle') as HTMLElement
+ this.submitElement = this._getElement('submit') as HTMLElement
+ this.toolbarElement = this._getElement('toolbar') as HTMLElement
+
+ this.resultsElement = this._getElement('results') as HTMLElement
+ this.suggestionElement = this._getElement('suggestion') as HTMLElement
+ this.emptyElement = this._getElement('empty') as HTMLElement
+
+ // Layout
+ this.layout = this.getOption('layout')
+ if (this.layout === 'menu') {
+ this.menuObject = new MenuComponent(this.contentElement, defaultMenuOptions)
+ }
+
+ // Update
+ this.update()
+
+ // Event Handlers
+ this.handlers()
+
+ DataUtil.set(this.element, this.queries.componentName, this)
+ }
+
+ private _getElement = (name: string) => {
+ return this.element.querySelector('[data-kt-search-element="' + name + '"]')
+ }
+
+ // Get option
+ private getOption = (name: string) => {
+ const attr = this.element.getAttribute(`${this.queries.attrQuery}${name}`)
+ if (attr) {
+ let value = getAttributeValueByBreakpoint(attr)
+
+ if (value !== null && String(value) === 'true') {
+ return true
+ } else if (value !== null && String(value) === 'false') {
+ return false
+ }
+
+ return value
+ } else {
+ const optionName = stringSnakeToCamel(name)
+
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ } else {
+ return null
+ }
+ }
+ }
+
+ // Check if responsive form mode is enabled
+ private getResponsiveFormMode = () => {
+ const responsive = this.getOption('responsive') as string
+ const width = getViewPort().width
+
+ if (!responsive) {
+ return null
+ }
+
+ const breakpoint = getBreakpoint(responsive)
+ let breakPointNum = -1
+ if (!breakpoint) {
+ breakPointNum = parseInt(responsive)
+ } else {
+ breakPointNum = +breakpoint
+ }
+
+ if (width < breakPointNum) {
+ return 'on'
+ } else {
+ return 'off'
+ }
+ }
+
+ // Focus
+ private focus = () => {
+ this.element.classList.add('focus')
+
+ if (
+ this.getOption('show-on-focus') === true ||
+ this.inputElement.value.length >= this.options.minLength
+ ) {
+ this.show()
+ }
+ }
+
+ // Blur
+ private blur = () => {
+ this.element.classList.remove('focus')
+ }
+
+ // Enter
+ private enter = (e: KeyboardEvent) => {
+ const key = e.charCode || e.keyCode || 0
+
+ if (key === 13) {
+ e.preventDefault()
+
+ this.search()
+ }
+ }
+
+ // Input
+ private input = () => {
+ if (this.getOption('min-length')) {
+ const minLength = parseInt(this.getOption('min-length') as string)
+
+ if (this.inputElement.value.length >= minLength) {
+ this.search()
+ } else if (this.inputElement.value.length === 0) {
+ this.clear()
+ }
+ }
+ }
+
+ private handlers(): void {
+ const context = this
+
+ // Focus
+ this.inputElement.addEventListener('focus', this.focus)
+
+ // Blur
+ this.inputElement.addEventListener('blur', this.blur)
+
+ // Keypress
+ if (this.getOption('keypress') === true) {
+ this.inputElement.addEventListener('input', this.input)
+ }
+
+ // Submit
+ if (this.submitElement) {
+ this.submitElement.addEventListener('click', this.search)
+ }
+
+ // Enter
+ if (this.getOption('enter') === true) {
+ this.inputElement.addEventListener('keypress', this.enter)
+ }
+
+ // Clear
+ if (this.clearElement) {
+ this.clearElement.addEventListener('click', this.clear)
+ }
+
+ // Menu
+ if (this.menuObject) {
+ // Toggle menu
+ if (this.toggleElement) {
+ this.toggleElement.addEventListener('click', this.show)
+
+ this.menuObject.on('kt.menu.dropdown.show', function () {
+ // @ts-ignore
+ if (isVisibleElement(context.toggleElement)) {
+ // @ts-ignore
+ context.toggleElement.classList.add('active')
+ // @ts-ignore
+ context.toggleElement.classList.add('show')
+ }
+ })
+
+ this.menuObject.on('kt.menu.dropdown.hide', function () {
+ // @ts-ignore
+ if (isVisibleElement(context.toggleElement)) {
+ // @ts-ignore
+ context.toggleElement.classList.remove('active')
+ // @ts-ignore
+ context.toggleElement.classList.remove('show')
+ }
+ })
+ }
+
+ this.menuObject.on('kt.menu.dropdown.shown', function () {
+ // @ts-ignore
+ context.inputElement.focus()
+ })
+ }
+
+ // Window resize handling
+ window.addEventListener('resize', () => {
+ let timer
+
+ throttle(
+ timer,
+ () => {
+ this.update()
+ },
+ 200
+ )
+ })
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ // Update
+ public update = () => {
+ // Handle responsive form
+ if (this.layout === 'menu') {
+ let responsiveFormMode = this.getResponsiveFormMode()
+
+ if (responsiveFormMode === 'on' && !this.contentElement.contains(this.formElement)) {
+ this.contentElement.prepend(this.formElement)
+ this.formElement.classList.remove('d-none')
+ } else if (responsiveFormMode === 'off' && this.contentElement.contains(this.formElement)) {
+ this.element.prepend(this.formElement)
+ this.formElement.classList.add('d-none')
+ }
+ }
+ }
+
+ // Show menu
+ public show = () => {
+ if (this.menuObject) {
+ this.update()
+
+ this.menuObject.show(this.element)
+ }
+ }
+
+ // Hide menu
+ public hide = () => {
+ if (this.menuObject) {
+ this.update()
+
+ this.menuObject.hide(this.element)
+ }
+ }
+
+ // Search
+ public search = () => {
+ if (!this.processing) {
+ // Show search spinner
+ if (this.spinnerElement) {
+ this.spinnerElement.classList.remove('d-none')
+ }
+
+ // Hide search clear button
+ if (this.clearElement) {
+ this.clearElement.classList.add('d-none')
+ }
+
+ // Hide search toolbar
+ if (this.toolbarElement) {
+ this.toolbarElement.classList.add('d-none')
+ }
+
+ // Focus input
+ this.inputElement.focus()
+
+ this.processing = true
+ EventHandlerUtil.trigger(this.element, 'kt.search.process', this)
+ }
+ }
+
+ // Complete
+ public complete = () => {
+ if (this.spinnerElement) {
+ this.spinnerElement.classList.add('d-none')
+ }
+
+ // Show search toolbar
+ if (this.clearElement) {
+ this.clearElement.classList.remove('d-none')
+ }
+
+ if (this.inputElement.value.length === 0) {
+ this.clear()
+ }
+
+ // Focus input
+ this.inputElement.focus()
+
+ this.show()
+
+ this.processing = false
+ }
+
+ // Clear
+ public clear = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.search.clear') === false) {
+ return
+ }
+
+ // Clear and focus input
+ this.inputElement.value = ''
+ this.inputElement.focus()
+
+ // Hide clear icon
+ if (this.clearElement) {
+ this.clearElement.classList.add('d-none')
+ }
+
+ // Show search toolbar
+ if (this.toolbarElement) {
+ this.toolbarElement.classList.remove('d-none')
+ }
+
+ // Hide menu
+ if (this.getOption('show-on-focus') === false) {
+ this.hide()
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.search.cleared')
+ }
+
+ public isProcessing = () => {
+ return this.processing
+ }
+
+ public getQuery = () => {
+ return this.inputElement.value
+ }
+
+ public getMenu = () => {
+ return this.menuObject
+ }
+
+ public getFormElement = () => {
+ return this.formElement
+ }
+
+ public getInputElement(): HTMLInputElement {
+ return this.inputElement
+ }
+
+ public getContentElement(): HTMLElement {
+ return this.contentElement
+ }
+
+ public getElement(): HTMLElement {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ // Static methods
+ public static getInstance = (
+ el: HTMLElement,
+ componentName: string = defaultSearchQueires.componentName
+ ) => {
+ const Search = DataUtil.get(el, componentName)
+ if (Search) {
+ return Search as SearchComponent
+ }
+
+ return null
+ }
+
+ public static createInstances = (
+ selector: string = defaultSearchQueires.instanseQuery,
+ options: ISearchOptions = defaultSearchOptions,
+ queries: ISearchQueries = defaultSearchQueires
+ ) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ let Search = SearchComponent.getInstance(item)
+ if (!Search) {
+ Search = new SearchComponent(item, options, queries)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string = defaultSearchQueires.instanseQuery,
+ options: ISearchOptions = defaultSearchOptions,
+ queries: ISearchQueries = defaultSearchQueires
+ ): SearchComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let Search = SearchComponent.getInstance(item)
+ if (!Search) {
+ Search = new SearchComponent(item, options, queries)
+ }
+ return Search
+ }
+
+ public static bootstrap = (selector: string = defaultSearchQueires.instanseQuery) => {
+ SearchComponent.createInstances(selector)
+ }
+
+ public static reinitialization = (selector: string = defaultSearchQueires.instanseQuery) => {
+ SearchComponent.createInstances(selector)
+ }
+}
+export {SearchComponent, defaultSearchOptions, defaultSearchQueires}
diff --git a/src/_res/assets/ts/components/_CookieComponent.ts b/src/_res/assets/ts/components/_CookieComponent.ts
new file mode 100644
index 0000000..67b3d44
--- /dev/null
+++ b/src/_res/assets/ts/components/_CookieComponent.ts
@@ -0,0 +1,60 @@
+/* eslint-disable no-useless-escape */
+// DOCS: https://javascript.info/cookie
+export class CookieComponent {
+ /**
+ * Returns the cookie with the given name, or undefined if not found
+ *
+ * @param {string} name - cookie name
+ * @returns string | null
+ */
+ public static get(name: string): string | undefined {
+ let matches = document.cookie.match(
+ new RegExp('(?:^|; )' + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)')
+ )
+ return matches ? decodeURIComponent(matches[1]) : undefined
+ }
+
+ /**
+ * Please note that a cookie value is encoded,
+ * so getCookie uses a built-in decodeURIComponent function to decode it.
+ *
+ * @param {string} name - cookie name
+ * @param {string | number | boolean} value - cookie value
+ * @param {any} cookieOptions - cookie options
+ * @returns void
+ */
+ public static set(name: string, value: string | number | boolean, cookieOptions: any): void {
+ const options = {
+ path: '/',
+ // add other defaults here if necessary
+ ...cookieOptions,
+ }
+
+ if (options.expires instanceof Date) {
+ options.expires = options.expires.toUTCString()
+ }
+
+ let updatedCookie = encodeURIComponent(name) + '=' + encodeURIComponent(value)
+
+ for (let optionKey in options) {
+ updatedCookie += '; ' + optionKey
+ let optionValue = options[optionKey]
+ if (optionValue !== true) {
+ updatedCookie += '=' + optionValue
+ }
+ }
+
+ document.cookie = updatedCookie
+ }
+
+ /**
+ * To delete a cookie, we can call it with a negative expiration date
+ *
+ * @param {string} name
+ */
+ public static delete(name: string): void {
+ CookieComponent.set(name, '', {
+ 'max-age': -1,
+ })
+ }
+}
diff --git a/src/_res/assets/ts/components/_DrawerComponent.ts b/src/_res/assets/ts/components/_DrawerComponent.ts
new file mode 100644
index 0000000..6dbfd44
--- /dev/null
+++ b/src/_res/assets/ts/components/_DrawerComponent.ts
@@ -0,0 +1,385 @@
+import {
+ EventHandlerUtil,
+ getUniqueIdWithPrefix,
+ getObjectPropertyValueByKey,
+ stringSnakeToCamel,
+ getAttributeValueByBreakpoint,
+ throttle,
+ getCSS,
+ DOMEventHandlerUtil,
+ ElementStyleUtil,
+} from '../_utils/index'
+
+export class DrawerStore {
+ static store: Map = new Map()
+
+ public static set(instanceId: string, drawerComponentObj: DrawerComponent): void {
+ if (DrawerStore.has(instanceId)) {
+ return
+ }
+
+ DrawerStore.store.set(instanceId, drawerComponentObj)
+ }
+
+ public static get(instanceId: string): DrawerComponent | undefined {
+ if (!DrawerStore.has(instanceId)) {
+ return
+ }
+ return DrawerStore.store.get(instanceId)
+ }
+
+ public static remove(instanceId: string): void {
+ if (!DrawerStore.has(instanceId)) {
+ return
+ }
+
+ DrawerStore.store.delete(instanceId)
+ }
+
+ public static has(instanceId: string): boolean {
+ return DrawerStore.store.has(instanceId)
+ }
+
+ public static getAllInstances() {
+ return DrawerStore.store
+ }
+}
+
+export interface DrawerOptions {
+ overlay: boolean
+ baseClass: string
+ overlayClass: string
+ direction: string
+}
+
+const defaultDrawerOptions: DrawerOptions = {
+ overlay: true,
+ baseClass: 'drawer',
+ overlayClass: 'drawer-overlay',
+ direction: 'end',
+}
+
+class DrawerComponent {
+ element: HTMLElement
+ overlayElement: HTMLElement | null = null
+ toggleElement: HTMLElement | null = null
+ options: DrawerOptions
+ instanceUid: string
+ name: string = ''
+ shown: boolean = false
+ lastWidth: number = 0
+ closeElement: HTMLElement | null = null
+
+ constructor(_element: HTMLElement, options: DrawerOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultDrawerOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('drawer')
+ this.overlayElement = null
+ this.name = this.element.getAttribute('data-kt-drawer-name') || ''
+ this.shown = false
+ this.toggleElement = null
+ // Event Handlers
+ this._handlers()
+ // Update Instance
+ this._update()
+ // Bind Instance
+ DrawerStore.set(this.element.id, this)
+ }
+
+ private _handlers = () => {
+ const togglers = this._getOption('toggle') as string
+ const closers = this._getOption('close') as string
+
+ if (togglers !== null && togglers.length > 0) {
+ DOMEventHandlerUtil.on(document.body, togglers, 'click', (e: Event) => {
+ e.preventDefault()
+ this.toggleElement = document.getElementById(togglers)
+ this._toggle()
+ })
+ }
+
+ if (closers !== null && closers.length > 0) {
+ DOMEventHandlerUtil.on(document.body, closers, 'click', (e: Event) => {
+ e.preventDefault()
+ this.closeElement = document.getElementById(closers)
+
+ this._hide()
+ })
+ }
+ }
+
+ private _update = () => {
+ const width = String(this._getOption('width'))
+ const direction = String(this._getOption('direction'))
+
+ // Reset state
+ const hasBaseClass = this.element.classList.contains(`${this.options.baseClass}-on`)
+ const bodyCanvasAttr = String(document.body.getAttribute(`data-kt-drawer-${this.name}-`))
+
+ if (hasBaseClass === true && bodyCanvasAttr === 'on') {
+ this.shown = true
+ } else {
+ this.shown = false
+ }
+
+ // Activate/deactivate
+ if (this._getOption('activate') === true) {
+ this.element.classList.add(this.options.baseClass)
+ this.element.classList.add(`${this.options.baseClass}-${direction}`)
+ ElementStyleUtil.set(this.element, 'width', width, true)
+
+ this.lastWidth = parseInt(width)
+ } else {
+ ElementStyleUtil.set(this.element, 'width', '')
+ this.element.classList.remove(this.options.baseClass)
+ this.element.classList.remove(`${this.options.baseClass}-${direction}`)
+ this._hide()
+ }
+ }
+
+ private _getOption = (name: string) => {
+ const attr = this.element.getAttribute(`data-kt-drawer-${name}`)
+ if (attr) {
+ let value = getAttributeValueByBreakpoint(attr)
+ if (value !== null && String(value) === 'true') {
+ return true
+ } else {
+ if (value !== null && String(value) === 'false') {
+ return false
+ }
+ }
+
+ return value
+ } else {
+ const optionName = stringSnakeToCamel(name)
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ } else {
+ return null
+ }
+ }
+ }
+
+ private _toggle = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.drawer.toggle') === false) {
+ return
+ }
+
+ if (this.shown) {
+ this._hide()
+ } else {
+ this._show()
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.drawer.toggled')
+ }
+
+ private _hide = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.drawer.hide') === false) {
+ return
+ }
+
+ this.shown = false
+ this._deleteOverlay()
+ document.body.removeAttribute(`data-kt-drawer-${this.name}`)
+ document.body.removeAttribute(`data-kt-drawer`)
+ this.element.classList.remove(`${this.options.baseClass}-on`)
+ if (this.toggleElement != null) {
+ this.toggleElement.classList.remove('active')
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.drawer.after.hidden')
+ }
+
+ private _show = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.drawer.show') === false) {
+ return
+ }
+
+ this.shown = true
+ this._createOverlay()
+ document.body.setAttribute(`data-kt-drawer-${this.name}`, 'on')
+ document.body.setAttribute('data-kt-drawer', 'on')
+ this.element.classList.add(`${this.options.baseClass}-on`)
+ if (this.toggleElement !== null) {
+ this.toggleElement.classList.add('active')
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.drawer.shown')
+ }
+
+ private _createOverlay = () => {
+ if (this._getOption('overlay') === true) {
+ this.overlayElement = document.createElement('DIV')
+ const elementZIndex = getCSS(this.element, 'z-index')
+ if (elementZIndex) {
+ const overlayZindex = parseInt(elementZIndex) - 1
+ ElementStyleUtil.set(this.overlayElement, 'z-index', overlayZindex) // update
+ }
+ document.body.append(this.overlayElement)
+ const overlayClassOption = this._getOption('overlay-class')
+ if (overlayClassOption) {
+ this.overlayElement.classList.add(overlayClassOption.toString())
+ }
+ this.overlayElement.addEventListener('click', (e) => {
+ e.preventDefault()
+ this._hide()
+ })
+ }
+ }
+
+ private _deleteOverlay = () => {
+ if (this.overlayElement !== null && this.overlayElement.parentNode) {
+ this.overlayElement.parentNode.removeChild(this.overlayElement)
+ }
+ }
+
+ private _getDirection = () => {
+ return String(this._getOption('direction')) === 'left' ? 'left' : 'right'
+ }
+
+ private _getWidth = () => {
+ let width = this._getOption('width')
+ if (width && width === 'auto') {
+ width = getCSS(this.element, 'width')
+ }
+
+ return width
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public toggle = () => {
+ this._toggle()
+ }
+
+ public show = () => {
+ this._show()
+ }
+
+ public hide = () => {
+ this._hide()
+ }
+
+ public isShown = () => {
+ return this.shown
+ }
+
+ public update = () => {
+ this._update()
+ }
+
+ public goElement = () => {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handerId)
+ }
+
+ public trigger = (name: string, event: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Static methods
+ public static hasInstace = (elementId: string): boolean => {
+ return DrawerStore.has(elementId)
+ }
+
+ public static getInstance = (elementId: string) => {
+ return DrawerStore.get(elementId)
+ }
+
+ public static hideAll = () => {
+ const oldInstances = DrawerStore.getAllInstances()
+ oldInstances.forEach((dr) => {
+ dr.hide()
+ })
+ }
+
+ public static updateAll = () => {
+ const oldInstances = DrawerStore.getAllInstances()
+ oldInstances.forEach((dr) => {
+ dr.update()
+ })
+ }
+
+ // Create Instances
+ public static createInstances(selector: string): void {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((element) => {
+ const item = element as HTMLElement
+ let drawer = DrawerComponent.getInstance(item.id)
+ if (!drawer) {
+ drawer = new DrawerComponent(item, defaultDrawerOptions)
+ }
+ drawer.element = item
+ drawer.hide()
+ })
+ }
+
+ // Dismiss instances
+ public static handleDismiss = () => {
+ // External drawer toggle handler
+ DOMEventHandlerUtil.on(document.body, '[data-kt-drawer-dismiss="true"]', 'click', () => {
+ /* @ts-ignore */
+ const element = this.closest('[data-kt-drawer="true"]')
+ if (element) {
+ const drawer = DrawerComponent.getInstance(element)
+ if (drawer && drawer.isShown()) {
+ drawer.hide()
+ }
+ }
+ })
+ }
+
+ // Global Initialization
+ public static initGlobalHandlers(): void {
+ // Window Resize Handling
+ window.addEventListener('resize', function () {
+ let timer: number | undefined
+ throttle(
+ timer,
+ () => {
+ // Locate and update Drawer instances on window resize
+ const elements = document.body.querySelectorAll('[data-kt-drawer="true"]')
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ const instance = DrawerComponent.getInstance(item.id)
+ if (instance) {
+ instance.element = item
+ instance.update()
+ }
+ })
+ },
+ 200
+ )
+ })
+ }
+
+ public static bootstrap = () => {
+ DrawerComponent.createInstances('[data-kt-drawer="true"]')
+ DrawerComponent.initGlobalHandlers()
+ DrawerComponent.handleDismiss()
+ }
+
+ public static reinitialization = () => {
+ DrawerComponent.createInstances('[data-kt-drawer="true"]')
+ DrawerComponent.hideAll()
+ DrawerComponent.updateAll()
+ DrawerComponent.handleDismiss()
+ }
+}
+
+export {DrawerComponent, defaultDrawerOptions}
diff --git a/src/_res/assets/ts/components/_FeedbackComponent.ts b/src/_res/assets/ts/components/_FeedbackComponent.ts
new file mode 100644
index 0000000..c3ebb12
--- /dev/null
+++ b/src/_res/assets/ts/components/_FeedbackComponent.ts
@@ -0,0 +1,152 @@
+import {
+ DataUtil,
+ ElementStyleUtil,
+ EventHandlerUtil,
+ getUniqueIdWithPrefix,
+ getAttributeValueByBreakpoint,
+} from '../_utils/index'
+
+export interface FeedbackOptions {
+ width?: number
+ placement?: string
+ content?: string
+ type?: string
+}
+
+const defaultFeedbackOptions: FeedbackOptions = {
+ width: 100,
+ placement: 'top-center',
+ content: '',
+ type: 'popup',
+}
+
+class FeedbackComponent {
+ element: HTMLElement
+ options: FeedbackOptions
+ instanceUid: string
+ shown: boolean
+
+ constructor(_element: HTMLElement, options: FeedbackOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultFeedbackOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('feedback')
+ this.shown = false
+
+ // Event handlers
+ this._handlers() // will add in the show popup
+ DataUtil.set(this.element, 'feedback', this)
+ }
+
+ private _handlers = () => {
+ this.element.addEventListener('click', (e: Event) => {
+ e.preventDefault()
+ this._go()
+ })
+ }
+
+ private _go = () => {}
+
+ private showPopup = () => {
+ this.element = document.createElement('DIV')
+
+ this.element.classList.add('feedback feedback-popup')
+ this.element.innerHTML = this.options.content || ''
+
+ if (this.options.placement === 'top-center') {
+ this.setPopupTopCenterPosition()
+ }
+
+ document.body.appendChild(this.element)
+ this.element.classList.add('feedback-shown')
+ this.shown = true
+ }
+
+ private setPopupTopCenterPosition = () => {
+ const width = getAttributeValueByBreakpoint(this.options.width?.toString() || '0')
+ const height = ElementStyleUtil.get(this.element, 'height')
+ this.element.classList.add('feedback-top-center')
+ ElementStyleUtil.set(this.element, 'width', width)
+ ElementStyleUtil.set(this.element, 'left', '50%')
+ ElementStyleUtil.set(this.element, 'top', '-' + height)
+ }
+
+ private hidePopup = () => {
+ this.element.remove()
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public show = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.feedback.show') === false) {
+ return
+ }
+
+ if (this.options.type === 'popup') {
+ this.showPopup()
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.feedback.shown')
+
+ return this
+ }
+
+ public hide = () => {
+ if (EventHandlerUtil.trigger(this.element, 'kt.feedback.hide') === false) {
+ return
+ }
+
+ if (this.options.type === 'popup') {
+ this.hidePopup()
+ }
+
+ this.shown = false
+ EventHandlerUtil.trigger(this.element, 'kt.feedback.hidden')
+ return this
+ }
+
+ public isShown = () => {
+ return this.isShown
+ }
+
+ public getElement = () => {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handerId)
+ }
+
+ public trigger = (name: string, event: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Create Instances
+ public static createInstances(selector: string) {
+ throw new Error('not implemented')
+ }
+
+ // Static methods
+ public static hasInstace(element: HTMLElement) {
+ throw new Error('not implemented')
+ }
+
+ public static getInstance(element: HTMLElement) {
+ throw new Error('not implemented')
+ }
+
+ public static bootstrap(attr: string = '[data-Feedback]') {
+ throw new Error('not implemented')
+ }
+}
+
+export {FeedbackComponent, defaultFeedbackOptions}
diff --git a/src/_res/assets/ts/components/_ImageInputComponent.ts b/src/_res/assets/ts/components/_ImageInputComponent.ts
new file mode 100644
index 0000000..1301a95
--- /dev/null
+++ b/src/_res/assets/ts/components/_ImageInputComponent.ts
@@ -0,0 +1,229 @@
+import {EventHandlerUtil, DataUtil, getUniqueIdWithPrefix, getCSS} from '../_utils/index'
+
+export interface IImageInputOptions {}
+
+export interface IImageInputQueries {
+ componentName: string
+ instanseQuery: string
+ inputQuery: string
+ wrapperQuery: string
+ cancelQuery: string
+ removeQuery: string
+ hiddenQuery: string
+}
+
+const defaultImageInputOptions = {}
+
+const defaultImageInputQueires: IImageInputQueries = {
+ componentName: 'image-input',
+ instanseQuery: '[data-kt-image-input]',
+ inputQuery: 'input[type="file"]',
+ wrapperQuery: '.image-input-wrapper',
+ cancelQuery: '[data-kt-image-input-action="cancel"]',
+ removeQuery: '[data-kt-image-input-action="remove"]',
+ hiddenQuery: 'input[type="hidden"]',
+}
+
+class ImageInputComponent {
+ element: HTMLElement
+ inputElement: HTMLInputElement | null
+ wrapperElement: HTMLElement | null
+ cancelElement: HTMLElement | null
+ removeElement: HTMLElement | null
+ hiddenElement: HTMLInputElement | null
+ src: string = ''
+ options: IImageInputOptions
+ queries: IImageInputQueries
+ uid: string
+ value: string = ''
+
+ constructor(_element: HTMLElement, _options: IImageInputOptions, _queries: IImageInputQueries) {
+ // Variables
+ this.options = Object.assign(defaultImageInputOptions, _options)
+ this.queries = _queries
+ this.uid = getUniqueIdWithPrefix(this.queries.componentName)
+
+ // Elements
+ this.element = _element
+ this.inputElement = this.element.querySelector(this.queries.inputQuery)
+ this.wrapperElement = this.element.querySelector(this.queries.wrapperQuery)
+ this.cancelElement = this.element.querySelector(this.queries.cancelQuery)
+ this.removeElement = this.element.querySelector(this.queries.removeQuery)
+ this.hiddenElement = this.element.querySelector(this.queries.hiddenQuery)
+ if (this.wrapperElement) {
+ this.src = getCSS(this.wrapperElement, 'backgroundImage')
+ }
+
+ // Event Handlers
+ this.handlers()
+
+ DataUtil.set(this.element, this.queries.componentName, this)
+ }
+
+ private handlers(): void {
+ this.element.addEventListener('change', this._change)
+ if (this.cancelElement) {
+ this.cancelElement.addEventListener('click', this._cancel)
+ }
+
+ if (this.removeElement) {
+ this.removeElement.addEventListener('click', this._cancel)
+ }
+ }
+
+ // Event Handlers
+ private _change = (e: Event) => {
+ e.preventDefault()
+
+ if (this.inputElement !== null && this.inputElement.files && this.inputElement.files[0]) {
+ // Fire change event
+ if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.change', e) === false) {
+ return
+ }
+
+ const reader = new FileReader()
+
+ reader.onload = (e: ProgressEvent) => {
+ if (this.wrapperElement && e.target) {
+ this.wrapperElement.style.setProperty('background-image', `url('${e.target.result}')`)
+ }
+ }
+
+ reader.readAsDataURL(this.inputElement.files[0])
+ this.element.classList.add('image-input-changed')
+ this.element.classList.remove('image-input-empty')
+
+ // Fire removed event
+ EventHandlerUtil.trigger(this.element, 'kt.imageinput.changed', e)
+ }
+ }
+
+ private _cancel = (e: Event) => {
+ e.preventDefault()
+
+ // Fire cancel event
+ if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.cancel', e) === false) {
+ return
+ }
+
+ this.element.classList.remove('image-input-changed')
+ this.element.classList.remove('image-input-empty')
+ this.element.style.setProperty('background-image', this.src)
+ if (this.inputElement) {
+ this.inputElement.value = ''
+ }
+
+ if (this.hiddenElement !== null) {
+ this.hiddenElement.value = '0'
+ }
+
+ // Fire canceled event
+ EventHandlerUtil.trigger(this.element, 'kt.imageinput.canceled', e)
+ }
+
+ private _remove = (e: Event) => {
+ e.preventDefault()
+
+ // Fire remove event
+ if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.remove', e) === false) {
+ return
+ }
+
+ this.element.classList.remove('image-input-changed')
+ this.element.classList.add('image-input-empty')
+ if (this.wrapperElement) {
+ this.wrapperElement.style.setProperty('background-image', 'none')
+ }
+
+ if (this.inputElement) {
+ this.inputElement.value = ''
+ }
+
+ if (this.hiddenElement !== null) {
+ this.hiddenElement.value = '1'
+ }
+
+ // Fire removed event
+ EventHandlerUtil.trigger(this.element, 'kt.imageinput.removed', e)
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public getInputElement(): HTMLInputElement | null {
+ return this.inputElement
+ }
+
+ public getElement(): HTMLElement {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ public trigger = (name: string, event: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Static methods
+ public static getInstance = (
+ el: HTMLElement,
+ componentName: string = defaultImageInputQueires.componentName
+ ): ImageInputComponent | undefined => {
+ const ImageInput = DataUtil.get(el, componentName)
+ if (ImageInput) {
+ return ImageInput as ImageInputComponent
+ }
+ }
+
+ public static createInstances = (
+ selector: string = defaultImageInputQueires.instanseQuery,
+ options: IImageInputOptions = defaultImageInputOptions,
+ queries: IImageInputQueries = defaultImageInputQueires
+ ) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ let ImageInput = ImageInputComponent.getInstance(item)
+ if (!ImageInput) {
+ ImageInput = new ImageInputComponent(item, options, queries)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string = defaultImageInputQueires.instanseQuery,
+ options: IImageInputOptions = defaultImageInputOptions,
+ queries: IImageInputQueries = defaultImageInputQueires
+ ): ImageInputComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let ImageInput = ImageInputComponent.getInstance(item)
+ if (!ImageInput) {
+ ImageInput = new ImageInputComponent(item, options, queries)
+ }
+ return ImageInput
+ }
+
+ public static bootstrap = (selector: string = defaultImageInputQueires.instanseQuery) => {
+ ImageInputComponent.createInstances(selector)
+ }
+
+ public static reinitialization = (selector: string = defaultImageInputQueires.instanseQuery) => {
+ ImageInputComponent.createInstances(selector)
+ }
+}
+export {ImageInputComponent, defaultImageInputOptions, defaultImageInputQueires}
diff --git a/src/_res/assets/ts/components/_PasswordMeterComponent.ts b/src/_res/assets/ts/components/_PasswordMeterComponent.ts
new file mode 100644
index 0000000..8a90252
--- /dev/null
+++ b/src/_res/assets/ts/components/_PasswordMeterComponent.ts
@@ -0,0 +1,273 @@
+/* eslint-disable array-callback-return */
+/* eslint-disable no-useless-escape */
+import {DataUtil} from '../_utils/index'
+
+export interface IPasswordMeterOptions {
+ minLength: number
+ checkUppercase: boolean
+ checkLowercase: boolean
+ checkDigit: boolean
+ checkChar: boolean
+ scoreHighlightClass: string
+}
+
+export interface IPasswordMeterQueries {
+ componentName: string
+ instanseQuery: string
+ inputQuery: string
+ visibilityQuery: string
+ highlightQuery: string
+}
+
+const defaultPasswordMeterOptions = {
+ minLength: 8,
+ checkUppercase: true,
+ checkLowercase: true,
+ checkDigit: true,
+ checkChar: true,
+ scoreHighlightClass: 'active',
+}
+
+const defaultPasswordMeterQueires: IPasswordMeterQueries = {
+ componentName: 'password-meter',
+ instanseQuery: '[data-kt-password-meter]',
+ inputQuery: 'input[type]',
+ visibilityQuery: '[data-kt-password-meter-control="visibility"]',
+ highlightQuery: '[data-kt-password-meter-control="highlight"]',
+}
+
+class PasswordMeterComponent {
+ element: HTMLElement
+ inputElement: HTMLInputElement | null
+ visibilityElement: HTMLElement | null
+ highlightElement: HTMLElement | null
+ options: IPasswordMeterOptions
+ queries: IPasswordMeterQueries
+ score: number
+ checkSteps: number
+
+ constructor(
+ _element: HTMLElement,
+ _options: IPasswordMeterOptions,
+ _queries: IPasswordMeterQueries
+ ) {
+ this.element = _element
+ this.options = Object.assign(defaultPasswordMeterOptions, _options)
+ this.queries = _queries
+ this.score = 0
+ this.checkSteps = 5
+
+ // Elements
+ this.inputElement = this.element.querySelector(this.queries.inputQuery)
+ this.visibilityElement = this.element.querySelector(this.queries.visibilityQuery)
+ this.highlightElement = this.element.querySelector(this.queries.highlightQuery)
+
+ // Event Handlers
+ this.handlers()
+
+ DataUtil.set(this.element, this.queries.componentName, this)
+ }
+
+ private handlers(): void {
+ if (this.inputElement) {
+ this.inputElement.addEventListener('input', () => {
+ this.check()
+ })
+ }
+
+ if (this.visibilityElement) {
+ this.visibilityElement.addEventListener('click', () => {
+ this.visitbility()
+ })
+ }
+ }
+
+ private visitbility() {
+ if (this.visibilityElement && this.inputElement) {
+ const visibleIcon = this.visibilityElement.querySelector(
+ 'i:not(.d-none), .svg-icon:not(.d-none)'
+ )
+
+ const hiddenIcon = this.visibilityElement.querySelector('i.d-none, .svg-icon.d-none')
+
+ const typeAttr = this.inputElement.getAttribute('type') || ''
+
+ if (typeAttr === 'password') {
+ this.inputElement.setAttribute('type', 'text')
+ } else {
+ this.inputElement.setAttribute('type', 'password')
+ }
+
+ visibleIcon?.classList.add('d-none')
+ hiddenIcon?.classList.remove('d-none')
+
+ this.inputElement.focus()
+ }
+ }
+
+ private checkScore(): number {
+ return 0
+ }
+
+ private checkLength(): boolean {
+ if (this.inputElement) {
+ return this.inputElement.value.length >= this.options.minLength // 20 score
+ }
+
+ return false
+ }
+
+ private checkLowerCase(): boolean {
+ const val = this.inputElement ? this.inputElement.value : ''
+ return /[a-z]/.test(val) // 20 score
+ }
+
+ private checkUppercase(): boolean {
+ const val = this.inputElement ? this.inputElement.value : ''
+ return /[A-Z]/.test(val) // 20 score
+ }
+
+ private checkDigit(): boolean {
+ const val = this.inputElement ? this.inputElement.value : ''
+ return /[0-9]/.test(val) // 20 score
+ }
+
+ private checkChar(): boolean {
+ const val = this.inputElement ? this.inputElement.value : ''
+ return /[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(val) // 20 score
+ }
+
+ private getCheckScore(): number {
+ let count = 1
+ if (this.options.checkUppercase) {
+ count++
+ }
+
+ if (this.options.checkLowercase) {
+ count++
+ }
+
+ if (this.options.checkDigit) {
+ count++
+ }
+
+ if (this.options.checkChar) {
+ count++
+ }
+
+ this.checkSteps = count
+ return 100 / this.checkSteps
+ }
+
+ private highlight() {
+ const items = this.highlightElement
+ ? [].slice.call(this.highlightElement.querySelectorAll('div'))
+ : []
+ const total = items.length
+ let index = 0
+ const checkScore = this.getCheckScore()
+ const score = this.getScore()
+
+ items.map((item: HTMLElement) => {
+ index++
+ if (checkScore * index * (this.checkSteps / total) <= score) {
+ item.classList.add('active')
+ } else {
+ item.classList.remove('active')
+ }
+ })
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public reset = () => {
+ this.score = 0
+ this.highlight()
+ }
+
+ public getScore() {
+ return this.score
+ }
+
+ public check() {
+ let score = 0
+ const checkScore = this.getCheckScore()
+ if (this.checkLength()) {
+ score = score + checkScore
+ }
+
+ if (this.options.checkUppercase && this.checkLowerCase()) {
+ score = score + checkScore
+ }
+
+ if (this.options.checkLowercase && this.checkUppercase()) {
+ score = score + checkScore
+ }
+
+ if (this.options.checkDigit && this.checkDigit()) {
+ score = score + checkScore
+ }
+
+ if (this.options.checkChar && this.checkChar()) {
+ score = score + checkScore
+ }
+
+ this.score = score
+ this.highlight()
+ }
+
+ // Static methods
+ public static getInstance = (
+ el: HTMLElement,
+ componentName: string = defaultPasswordMeterQueires.componentName
+ ): PasswordMeterComponent | undefined => {
+ const passwordMeter = DataUtil.get(el, componentName)
+ if (passwordMeter) {
+ return passwordMeter as PasswordMeterComponent
+ }
+ }
+
+ public static createInstances = (
+ selector: string = defaultPasswordMeterQueires.instanseQuery,
+ options: IPasswordMeterOptions = defaultPasswordMeterOptions,
+ queries: IPasswordMeterQueries = defaultPasswordMeterQueires
+ ) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ let passwordMeter = PasswordMeterComponent.getInstance(item)
+ if (!passwordMeter) {
+ passwordMeter = new PasswordMeterComponent(item, options, queries)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string = defaultPasswordMeterQueires.instanseQuery,
+ options: IPasswordMeterOptions = defaultPasswordMeterOptions,
+ queries: IPasswordMeterQueries = defaultPasswordMeterQueires
+ ): PasswordMeterComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let passwordMeter = PasswordMeterComponent.getInstance(item)
+ if (!passwordMeter) {
+ passwordMeter = new PasswordMeterComponent(item, options, queries)
+ }
+ return passwordMeter
+ }
+
+ public static bootstrap = (selector: string = defaultPasswordMeterQueires.instanseQuery) => {
+ PasswordMeterComponent.createInstances(selector)
+ }
+
+ public static reinitialization = (
+ selector: string = defaultPasswordMeterQueires.instanseQuery
+ ) => {
+ PasswordMeterComponent.createInstances(selector)
+ }
+}
+export {PasswordMeterComponent, defaultPasswordMeterOptions, defaultPasswordMeterQueires}
diff --git a/src/_res/assets/ts/components/_ScrollComponent.ts b/src/_res/assets/ts/components/_ScrollComponent.ts
new file mode 100644
index 0000000..67a461f
--- /dev/null
+++ b/src/_res/assets/ts/components/_ScrollComponent.ts
@@ -0,0 +1,312 @@
+import {
+ DataUtil,
+ getObjectPropertyValueByKey,
+ stringSnakeToCamel,
+ getAttributeValueByBreakpoint,
+ getViewPort,
+ isVisibleElement,
+ throttle,
+ getCSS,
+ ElementStyleUtil,
+} from '../_utils/index'
+import {CookieComponent} from './_CookieComponent'
+
+export interface ScrollOptions {
+ saveState?: boolean
+}
+
+const defaultScrollOptions: ScrollOptions = {
+ saveState: true,
+}
+
+class ScrollComponent {
+ element: HTMLElement
+ options: ScrollOptions
+ id: string
+
+ constructor(_element: HTMLElement, options: ScrollOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultScrollOptions, options)
+ this.id = this.element.getAttribute('id') || ''
+ this.update()
+ // this.element.setAttribute('data-kt-scrolltop', 'true')
+ DataUtil.set(this.element, 'scroll', this)
+ }
+
+ private getOption = (name: string) => {
+ if (this.element.hasAttribute('data-kt-scroll-' + name) === true) {
+ const attr = this.element.getAttribute('data-kt-scroll-' + name) || ''
+ let value: string | JSON | boolean = getAttributeValueByBreakpoint(attr)
+ if (value !== null && String(value) === 'true') {
+ value = true
+ } else if (value !== null && String(value) === 'false') {
+ value = false
+ }
+
+ return value
+ } else {
+ const optionName = stringSnakeToCamel(name)
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ } else {
+ return null
+ }
+ }
+ }
+
+ private getHeightType = () => {
+ if (this.getOption('height')) {
+ return 'height'
+ }
+ if (this.getOption('min-height')) {
+ return 'min-height'
+ }
+ if (this.getOption('max-height')) {
+ return 'max-height'
+ }
+ }
+
+ private getAutoHeight = () => {
+ let height: number | string = getViewPort().height
+ const dependencies = this.getOption('dependencies')
+ const wrappers = this.getOption('wrappers')
+ const offset = this.getOption('offset')
+
+ // Height dependencies
+ if (dependencies !== null) {
+ const elements = document.querySelectorAll(dependencies as string)
+ if (elements && elements.length > 0) {
+ for (let i = 0, len = elements.length; i < len; i++) {
+ const element = elements[i] as HTMLElement
+ if (isVisibleElement(element) === false) {
+ continue
+ }
+
+ height = height - parseInt(getCSS(element, 'height'))
+ height = height - parseInt(getCSS(element, 'margin-top'))
+ height = height - parseInt(getCSS(element, 'margin-bottom'))
+
+ const borderTop = getCSS(element, 'border-top')
+ if (borderTop) {
+ height = height - parseInt(borderTop)
+ }
+
+ const borderBottom = getCSS(element, 'border-bottom')
+ if (borderBottom) {
+ height = height - parseInt(borderBottom)
+ }
+ }
+ }
+ }
+
+ // Wrappers
+ if (wrappers !== null) {
+ var elements = document.querySelectorAll(wrappers as string)
+ if (elements && elements.length > 0) {
+ for (let i = 0, len = elements.length; i < len; i++) {
+ const element = elements[i] as HTMLElement
+
+ if (!isVisibleElement(element)) {
+ continue
+ }
+
+ height = height - parseInt(getCSS(element, 'margin-top'))
+ height = height - parseInt(getCSS(element, 'margin-bottom'))
+ height = height - parseInt(getCSS(element, 'padding-top'))
+ height = height - parseInt(getCSS(element, 'padding-bottom'))
+
+ const borderTop = getCSS(element, 'border-top')
+ if (borderTop) {
+ height = height - parseInt(borderTop)
+ }
+
+ const borderBottom = getCSS(element, 'border-bottom')
+ if (borderBottom) {
+ height = height - parseInt(borderBottom)
+ }
+ }
+ }
+ }
+
+ // Custom offset
+ if (offset !== null) {
+ height = height - parseInt(offset as string)
+ }
+
+ height = height - parseInt(getCSS(this.element, 'margin-top'))
+ height = height - parseInt(getCSS(this.element, 'margin-bottom'))
+
+ const borderTop = getCSS(this.element, 'border-top')
+ if (borderTop) {
+ height = height - parseInt(borderTop)
+ }
+
+ const borderBottom = getCSS(this.element, 'border-bottom')
+ if (borderBottom) {
+ height = height - parseInt(borderBottom)
+ }
+
+ height = String(height) + 'px'
+
+ return height
+ }
+
+ private setupHeight = () => {
+ let height = this.getHeight()
+ let heightType = this.getHeightType() as string
+
+ // Set height
+ if (height !== null && height.length > 0) {
+ ElementStyleUtil.set(this.element, heightType, height)
+ } else {
+ ElementStyleUtil.set(this.element, heightType, '')
+ }
+ }
+
+ private setupState = () => {
+ if (this.getOption('save-state') === true && this.id) {
+ const cookie = CookieComponent.get(this.id + 'st')
+ if (cookie) {
+ var pos = parseInt(cookie)
+
+ if (pos > 0) {
+ this.element.scrollTop = pos
+ }
+ }
+ }
+ }
+
+ private setupScrollHandler = () => {
+ if (this.getOption('save-state') === true && this.id) {
+ this.element.addEventListener('scroll', this.scrollHandler)
+ } else {
+ this.element.removeEventListener('scroll', this.scrollHandler)
+ }
+ }
+
+ private scrollHandler = () => {
+ const cookieId = this.id + 'st'
+ CookieComponent.set(cookieId, this.element.scrollTop, {})
+ }
+
+ private destroyScrollHandler = () => {
+ this.element.removeEventListener('scroll', this.scrollHandler)
+ }
+
+ private resetHeight = () => {
+ const heghtType = this.getHeightType()
+ if (heghtType) {
+ ElementStyleUtil.set(this.element, heghtType, '')
+ }
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public update = () => {
+ // Activate/deactivate
+ if (
+ this.getOption('activate') === true ||
+ !this.element.hasAttribute('data-kt-scroll-activate')
+ ) {
+ this.setupHeight()
+ this.setupScrollHandler()
+ this.setupState()
+ } else {
+ this.resetHeight()
+ this.destroyScrollHandler()
+ }
+ }
+
+ public getHeight = () => {
+ const heightType = this.getHeightType()
+ const height = this.getOption(heightType || '')
+ if (height instanceof Function) {
+ return height.call(height)
+ } else if (height !== null && typeof height === 'string' && height.toLowerCase() === 'auto') {
+ return this.getAutoHeight()
+ } else {
+ return height
+ }
+ }
+
+ public getElement = () => {
+ return this.element
+ }
+
+ // Static methods
+ public static hasInstace(element: HTMLElement) {
+ return DataUtil.has(element, 'scroll')
+ }
+
+ public static getInstance(element: HTMLElement): ScrollComponent | undefined {
+ if (element !== null && ScrollComponent.hasInstace(element)) {
+ const data = DataUtil.get(element, 'scroll')
+ if (data) {
+ return data as ScrollComponent
+ }
+ }
+ }
+
+ // Create Instances
+ public static createInstances(selector: string) {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((element: Element) => {
+ const item = element as HTMLElement
+ let scroll = ScrollComponent.getInstance(item)
+ if (!scroll) {
+ scroll = new ScrollComponent(item, defaultScrollOptions)
+ }
+ })
+ }
+
+ public static destroyAll(attr: string = '[data-kt-scroll="true"]') {}
+
+ public static bootstrap(attr: string = '[data-kt-scroll="true"]') {
+ ScrollComponent.createInstances(attr)
+ ScrollComponent.resize()
+ }
+
+ public static createInstance = (
+ element: HTMLElement,
+ options: ScrollOptions = defaultScrollOptions
+ ): ScrollComponent | undefined => {
+ let scroll = ScrollComponent.getInstance(element)
+ if (!scroll) {
+ scroll = new ScrollComponent(element, options)
+ }
+ return scroll
+ }
+
+ public static reinitialization(attr: string = '[data-kt-scroll="true"]') {
+ ScrollComponent.createInstances(attr)
+ }
+
+ public static updateAll() {
+ const elements = document.body.querySelectorAll('[data-kt-scroll="true"]')
+ elements.forEach((element: Element) => {
+ const instance = ScrollComponent.getInstance(element as HTMLElement)
+ if (instance) {
+ instance.update()
+ }
+ })
+ }
+
+ public static resize() {
+ // Window Resize Handling
+ window.addEventListener('resize', function () {
+ let timer
+ throttle(
+ timer,
+ () => {
+ // Locate and update Drawer instances on window resize
+ ScrollComponent.updateAll()
+ },
+ 200
+ )
+ })
+ }
+}
+
+export {ScrollComponent, defaultScrollOptions}
diff --git a/src/_res/assets/ts/components/_ScrollTopComponent.ts b/src/_res/assets/ts/components/_ScrollTopComponent.ts
new file mode 100644
index 0000000..ea8d924
--- /dev/null
+++ b/src/_res/assets/ts/components/_ScrollTopComponent.ts
@@ -0,0 +1,148 @@
+import {
+ getScrollTop,
+ getAttributeValueByBreakpoint,
+ throttle,
+ getObjectPropertyValueByKey,
+ stringSnakeToCamel,
+ getUniqueIdWithPrefix,
+ DataUtil,
+ ElementAnimateUtil,
+} from '../_utils/index'
+
+export interface IScrollTopOptions {
+ offset: number
+ speed: number
+}
+
+const defaultScrollTopOptions: IScrollTopOptions = {
+ offset: 200,
+ speed: 600,
+}
+
+class ScrollTopComponent {
+ element: HTMLElement
+ options: IScrollTopOptions
+ instanceUid: string
+
+ constructor(_element: HTMLElement, options: IScrollTopOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultScrollTopOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('scrolltop')
+
+ // Event Handlers
+ this._handlers()
+
+ // Bind Instance
+ DataUtil.set(this.element, 'scrolltop', this)
+ }
+
+ private _handlers = () => {
+ let timer: number
+ window.addEventListener('scroll', () => {
+ throttle(timer, () => {
+ this._scroll()
+ })
+ })
+
+ this.element.addEventListener('click', (e: Event) => {
+ e.preventDefault()
+ this._go()
+ })
+ }
+
+ private _scroll = () => {
+ const offset = parseInt(this._getOption('offset') as string)
+ const pos = getScrollTop() // current vertical position
+ if (pos > offset) {
+ if (!document.body.hasAttribute('data-kt-scrolltop')) {
+ document.body.setAttribute('data-kt-scrolltop', 'on')
+ }
+ } else {
+ if (document.body.hasAttribute('data-kt-scrolltop')) {
+ document.body.removeAttribute('data-kt-scrolltop')
+ }
+ }
+ }
+
+ private _go = () => {
+ const speed = parseInt(this._getOption('speed') as string)
+ ElementAnimateUtil.scrollTop(0, speed)
+ }
+
+ private _getOption = (name: string) => {
+ const attr = this.element.getAttribute(`data-kt-scrolltop-${name}`)
+ if (attr) {
+ const value = getAttributeValueByBreakpoint(attr)
+ return value !== null && String(value) === 'true'
+ }
+
+ const optionName = stringSnakeToCamel(name)
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ }
+
+ return null
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+
+ // Plugin API
+ public go = () => {
+ return this._go()
+ }
+
+ public getElement = () => {
+ return this.element
+ }
+
+ // Static methods
+ public static getInstance = (el: HTMLElement): ScrollTopComponent | undefined => {
+ const scrollTop = DataUtil.get(el, 'scrolltop')
+ if (scrollTop) {
+ return scrollTop as ScrollTopComponent
+ }
+ }
+
+ public static createInstances = (selector: string) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ let scrollTop = ScrollTopComponent.getInstance(item)
+ if (!scrollTop) {
+ scrollTop = new ScrollTopComponent(item, defaultScrollTopOptions)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string,
+ options: IScrollTopOptions = defaultScrollTopOptions
+ ): ScrollTopComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let scrollTop = ScrollTopComponent.getInstance(item)
+ if (!scrollTop) {
+ scrollTop = new ScrollTopComponent(item, options)
+ }
+ return scrollTop
+ }
+
+ public static bootstrap = () => {
+ ScrollTopComponent.createInstances('[data-kt-scrolltop="true"]')
+ }
+
+ public static reinitialization = () => {
+ ScrollTopComponent.createInstances('[data-kt-scrolltop="true"]')
+ }
+
+ public static goTop = () => {
+ ElementAnimateUtil.scrollTop(0, defaultScrollTopOptions.speed)
+ }
+}
+export {ScrollTopComponent, defaultScrollTopOptions}
diff --git a/src/_res/assets/ts/components/_StepperComponent.ts b/src/_res/assets/ts/components/_StepperComponent.ts
new file mode 100644
index 0000000..4e88aa6
--- /dev/null
+++ b/src/_res/assets/ts/components/_StepperComponent.ts
@@ -0,0 +1,332 @@
+import {
+ getElementIndex,
+ getUniqueIdWithPrefix,
+ ElementAnimateUtil,
+ EventHandlerUtil,
+ DataUtil,
+ DOMEventHandlerUtil,
+ ElementStyleUtil,
+} from '../_utils/index'
+
+export interface IStepperOptions {
+ startIndex: number
+ animation: boolean
+ animationSpeed: string
+ animationNextClass: string
+ animationPreviousClass: string
+}
+
+const defaultStepperOptions: IStepperOptions = {
+ startIndex: 1,
+ animation: false,
+ animationSpeed: '0.3s',
+ animationNextClass: 'animate__animated animate__slideInRight animate__fast',
+ animationPreviousClass: 'animate__animated animate__slideInLeft animate__fast',
+}
+
+class StepperComponent {
+ element: HTMLElement
+ options: IStepperOptions
+ instanceUid: string
+ steps: NodeListOf
+ btnNext: HTMLElement | null
+ btnPrev: HTMLElement | null
+ btnSubmit: HTMLElement | null
+ totatStepsNumber: number = 0
+ passedStepIndex: number = 0
+ currentStepIndex: number = 1
+
+ constructor(_element: HTMLElement, options: IStepperOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultStepperOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('stepper')
+
+ // Elements
+ this.steps = this.element.querySelectorAll('[data-kt-stepper-element="nav"]')
+ this.btnNext = this.element.querySelector('[data-kt-stepper-action="next"]')
+ this.btnPrev = this.element.querySelector('[data-kt-stepper-action="previous"]')
+ this.btnSubmit = this.element.querySelector('[data-kt-stepper-action="submit"]')
+
+ // Variables
+ this.totatStepsNumber = this.steps?.length | 0
+ this.passedStepIndex = 0
+ this.currentStepIndex = 1
+
+ // Set Current Step
+ if (this.options.startIndex > 1) {
+ this._goTo(this.options.startIndex)
+ }
+
+ // Event Handlers
+ this.initHandlers()
+
+ // Bind Instance
+ DataUtil.set(this.element, 'stepper', this)
+ }
+
+ private _goTo = (index: number) => {
+ EventHandlerUtil.trigger(this.element, 'kt.stepper.change')
+ // Skip if this step is already shown
+ if (index === this.currentStepIndex || index > this.totatStepsNumber || index < 0) {
+ return
+ }
+
+ // Validate step number
+ index = parseInt(index.toString())
+ // Set current step
+ this.passedStepIndex = this.currentStepIndex
+ this.currentStepIndex = index
+
+ // Refresh elements
+ this.refreshUI()
+
+ EventHandlerUtil.trigger(this.element, 'kt.stepper.changed')
+ }
+
+ private initHandlers = () => {
+ this.btnNext?.addEventListener('click', (e: Event) => {
+ e.preventDefault()
+
+ EventHandlerUtil.trigger(this.element, 'kt.stepper.next', e)
+ })
+
+ this.btnPrev?.addEventListener('click', (e: Event) => {
+ e.preventDefault()
+
+ EventHandlerUtil.trigger(this.element, 'kt.stepper.previous', e)
+ })
+
+ DOMEventHandlerUtil.on(this.element, '[data-kt-stepper-action="step"]', 'click', (e: Event) => {
+ e.preventDefault()
+
+ if (this.steps && this.steps.length > 0) {
+ for (let i = 0; i < this.steps.length; i++) {
+ if ((this.steps[i] as HTMLElement) === this.element) {
+ let index = i + 1
+
+ const stepDirection = this._getStepDirection(index)
+ EventHandlerUtil.trigger(this.element, `stepper.${stepDirection}`, e)
+ return
+ }
+ }
+ }
+ })
+ }
+
+ private _getStepDirection = (index: number) => {
+ return index > this.currentStepIndex ? 'next' : 'previous'
+ }
+
+ private getStepContent = (index: number) => {
+ const content = this.element.querySelectorAll('[data-kt-stepper-element="content"]')
+ if (!content) {
+ return false
+ }
+
+ if (content[index - 1]) {
+ return content[index - 1]
+ }
+
+ return false
+ }
+
+ private getLastStepIndex = () => {
+ return this.totatStepsNumber
+ }
+
+ private getTotalStepsNumber = () => {
+ return this.totatStepsNumber
+ }
+
+ private refreshUI = () => {
+ let state = ''
+
+ if (this.isLastStep()) {
+ state = 'last'
+ } else if (this.isFirstStep()) {
+ state = 'first'
+ } else {
+ state = 'between'
+ }
+
+ // Set state class
+ this.element.classList.remove('last')
+ this.element.classList.remove('first')
+ this.element.classList.remove('between')
+
+ this.element.classList.add(state)
+
+ // Step Items
+ const elements = this.element.querySelectorAll(
+ '[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]'
+ )
+
+ if (!elements || elements.length <= 0) {
+ return
+ }
+
+ for (var i = 0, len = elements.length; i < len; i++) {
+ var element = elements[i] as HTMLElement
+ var index = getElementIndex(element) + 1
+
+ element.classList.remove('current')
+ element.classList.remove('completed')
+ element.classList.remove('pending')
+
+ if (index === this.currentStepIndex) {
+ element.classList.add('current')
+
+ if (
+ this.options.animation !== false &&
+ element.getAttribute('data-kt-stepper-element') === 'content'
+ ) {
+ ElementStyleUtil.set(element, 'animationDuration', this.options.animationSpeed)
+
+ const animation =
+ this._getStepDirection(this.passedStepIndex) === 'previous'
+ ? this.options.animationPreviousClass
+ : this.options.animationNextClass
+ ElementAnimateUtil.animateClass(element, animation)
+ }
+ } else {
+ if (index < this.currentStepIndex) {
+ element.classList.add('completed')
+ } else {
+ element.classList.add('pending')
+ }
+ }
+ }
+ }
+
+ private isLastStep = () => {
+ return this.currentStepIndex === this.totatStepsNumber
+ }
+
+ private isFirstStep = () => {
+ return this.currentStepIndex === 1
+ }
+
+ private isBetweenStep = () => {
+ return this.isLastStep() === false && this.isFirstStep() === false
+ }
+
+ // ///////////////////////
+ // // ** Public API ** //
+ // ///////////////////////
+
+ // // Plugin API
+ public goto = (index: number) => {
+ return this._goTo(index)
+ }
+
+ public goNext = () => {
+ return this.goto(this.getNextStepIndex())
+ }
+
+ public goPrev = () => {
+ return this.goto(this.getPrevStepIndex())
+ }
+
+ public goFirst = () => {
+ return this.goto(1)
+ }
+
+ public goLast = () => {
+ return this.goto(this.getLastStepIndex())
+ }
+
+ public getCurrentStepIndex = () => {
+ return this.currentStepIndex
+ }
+
+ public getNextStepIndex = () => {
+ if (this.totatStepsNumber >= this.currentStepIndex + 1) {
+ return this.currentStepIndex + 1
+ } else {
+ return this.totatStepsNumber
+ }
+ }
+
+ public getPassedStepIndex = () => {
+ return this.passedStepIndex
+ }
+
+ public getPrevStepIndex = () => {
+ if (this.currentStepIndex - 1 > 1) {
+ return this.currentStepIndex - 1
+ } else {
+ return 1
+ }
+ }
+
+ public getElement = (index: number) => {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ public destroy = () => {
+ console.log('destroy stepper')
+ }
+
+ public trigger = (name: string, event: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Static methods
+ public static hasInstace(element: HTMLElement): boolean {
+ return DataUtil.has(element, 'stepper')
+ }
+
+ public static getInstance(element: HTMLElement): StepperComponent | undefined {
+ if (element !== null && StepperComponent.hasInstace(element)) {
+ const data = DataUtil.get(element, 'stepper')
+ if (data) {
+ return data as StepperComponent
+ }
+ }
+ }
+
+ // Create Instances
+ public static createInstances(selector: string): void {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((element) => {
+ const item = element as HTMLElement
+ let stepper = StepperComponent.getInstance(item)
+ if (!stepper) {
+ stepper = new StepperComponent(item, defaultStepperOptions)
+ }
+ })
+ }
+
+ public static createInsance = (
+ element: HTMLElement,
+ options: IStepperOptions = defaultStepperOptions
+ ): StepperComponent | null => {
+ if (!element) {
+ return null
+ }
+ let stepper = StepperComponent.getInstance(element)
+ if (!stepper) {
+ stepper = new StepperComponent(element, options)
+ }
+ return stepper
+ }
+
+ public static bootstrap(attr: string = '[data-kt-stepper]') {
+ StepperComponent.createInstances(attr)
+ }
+}
+
+export {StepperComponent, defaultStepperOptions}
diff --git a/src/_res/assets/ts/components/_StickyComponent.ts b/src/_res/assets/ts/components/_StickyComponent.ts
new file mode 100644
index 0000000..0a5bd85
--- /dev/null
+++ b/src/_res/assets/ts/components/_StickyComponent.ts
@@ -0,0 +1,285 @@
+import {
+ getElementOffset,
+ getScrollTop,
+ getAttributeValueByBreakpoint,
+ getUniqueIdWithPrefix,
+ getObjectPropertyValueByKey,
+ stringSnakeToCamel,
+ getCSS,
+ DataUtil,
+ ElementAnimateUtil,
+ ElementStyleUtil,
+ EventHandlerUtil,
+} from '../_utils/index'
+
+export interface StickyOptions {
+ offset: number
+ reverse: boolean
+ animation: boolean
+ animationSpeed: string
+ animationClass: string
+}
+
+const defaultStickyOptions: StickyOptions = {
+ offset: 200,
+ reverse: false,
+ animation: true,
+ animationSpeed: '0.3s',
+ animationClass: 'animation-slide-in-down',
+}
+
+class StickyComponent {
+ element: HTMLElement
+ options: StickyOptions
+ instanceUid: string
+ instanceName: string | null = ''
+ attributeName: string
+ eventTriggerState: boolean
+ lastScrollTop: number
+
+ constructor(_element: HTMLElement, options: StickyOptions) {
+ this.element = _element
+ this.options = Object.assign(defaultStickyOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('sticky')
+ this.instanceName = this.element.getAttribute('data-kt-sticky-name')
+ this.attributeName = 'data-kt-sticky-' + this.instanceName
+ this.eventTriggerState = true
+ this.lastScrollTop = 0
+
+ // Event Handlers
+ window.addEventListener('scroll', this.scroll)
+
+ // Initial Launch
+ this.scroll()
+
+ DataUtil.set(this.element, 'sticky', this)
+ }
+
+ private scroll = () => {
+ let offset = this.getOption('offset')
+ let reverse = this.getOption('reverse')
+
+ // Exit if false
+ if (offset === false) {
+ return
+ }
+
+ let offsetNum = 0
+ if (typeof offset === 'string') {
+ offsetNum = parseInt(offset)
+ }
+
+ const st = getScrollTop()
+
+ // Reverse scroll mode
+ if (reverse === true) {
+ // Release on reverse scroll mode
+ if (st > offsetNum && this.lastScrollTop < st) {
+ if (document.body.hasAttribute(this.attributeName) === false) {
+ this.enable()
+ document.body.setAttribute(this.attributeName, 'on')
+ }
+
+ if (this.eventTriggerState === true) {
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.on')
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+
+ this.eventTriggerState = false
+ }
+ } else {
+ // Back scroll mode
+ if (document.body.hasAttribute(this.attributeName)) {
+ this.disable()
+ document.body.removeAttribute(this.attributeName)
+ }
+
+ if (this.eventTriggerState === false) {
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.off')
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+
+ this.eventTriggerState = true
+ }
+ }
+
+ this.lastScrollTop = st
+ return
+ }
+
+ // Classic scroll mode
+ if (st > offsetNum) {
+ if (document.body.hasAttribute(this.attributeName) === false) {
+ this.enable()
+ document.body.setAttribute(this.attributeName, 'on')
+ }
+
+ if (this.eventTriggerState === true) {
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.on')
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+ this.eventTriggerState = false
+ }
+ } else {
+ // back scroll mode
+ if (document.body.hasAttribute(this.attributeName) === true) {
+ this.disable()
+ document.body.removeAttribute(this.attributeName)
+ }
+
+ if (this.eventTriggerState === false) {
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.off')
+ EventHandlerUtil.trigger(this.element, 'kt.sticky.change')
+ this.eventTriggerState = true
+ }
+ }
+ }
+
+ private getOption = (name: string) => {
+ const dataStickyAttr = 'data-kt-sticky-' + name
+ if (this.element.hasAttribute(dataStickyAttr) === true) {
+ const attrValueInStr = this.element.getAttribute(dataStickyAttr)
+ const attrValue = getAttributeValueByBreakpoint(attrValueInStr || '')
+ if (attrValue !== null && String(attrValue) === 'true') {
+ return true
+ } else if (attrValue !== null && String(attrValue) === 'false') {
+ return false
+ }
+
+ return attrValue
+ } else {
+ const optionName = stringSnakeToCamel(name)
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ }
+ }
+ }
+
+ private disable = () => {
+ ElementStyleUtil.remove(this.element, 'top')
+ ElementStyleUtil.remove(this.element, 'width')
+ ElementStyleUtil.remove(this.element, 'left')
+ ElementStyleUtil.remove(this.element, 'right')
+ ElementStyleUtil.remove(this.element, 'z-index')
+ ElementStyleUtil.remove(this.element, 'position')
+ }
+
+ private enable = (update: boolean = false) => {
+ const top = this.getOption('top')
+ const left = this.getOption('left')
+ // const right = this.getOption("right");
+ let width = this.getOption('width')
+ const zindex = this.getOption('zindex')
+
+ if (update !== true && this.getOption('animation') === true) {
+ ElementStyleUtil.set(this.element, 'animationDuration', this.getOption('animationSpeed'))
+ ElementAnimateUtil.animateClass(this.element, 'animation ' + this.getOption('animationClass'))
+ }
+
+ if (zindex !== null) {
+ ElementStyleUtil.set(this.element, 'z-index', zindex)
+ ElementStyleUtil.set(this.element, 'position', 'fixed')
+ }
+
+ if (top !== null) {
+ ElementStyleUtil.set(this.element, 'top', top)
+ }
+
+ if (width !== null && width !== undefined) {
+ const widthTarget = getObjectPropertyValueByKey(width, 'target')
+ if (widthTarget) {
+ const targetElement = document.querySelector(widthTarget)
+ if (targetElement) {
+ width = getCSS(targetElement, 'width')
+ }
+ }
+ ElementStyleUtil.set(this.element, 'width', width)
+ }
+
+ if (left !== null) {
+ if (String(left).toLowerCase() === 'auto') {
+ var offsetLeft = getElementOffset(this.element).left
+
+ if (offsetLeft > 0) {
+ ElementStyleUtil.set(this.element, 'left', String(offsetLeft) + 'px')
+ }
+ }
+ }
+ }
+
+ public update = () => {
+ if (document.body.hasAttribute(this.attributeName) === true) {
+ this.disable()
+ document.body.removeAttribute(this.attributeName)
+ this.enable(true)
+ document.body.setAttribute(this.attributeName, 'on')
+ }
+ }
+
+ // Event API
+ public on = (name: string, callBack: Function) => {
+ return EventHandlerUtil.on(this.element, name, callBack)
+ }
+
+ public one = (name: string, callback: Function) => {
+ return EventHandlerUtil.one(this.element, name, callback)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ public trigger = (name: string) => {
+ return EventHandlerUtil.trigger(this.element, name)
+ }
+
+ // Static methods
+ public static hasInstace(element: HTMLElement) {
+ return DataUtil.has(element, 'sticky')
+ }
+
+ public static getInstance(element: HTMLElement): StickyComponent | undefined {
+ if (element !== null && StickyComponent.hasInstace(element)) {
+ const data = DataUtil.get(element, 'sticky')
+ if (data) {
+ return data as StickyComponent
+ }
+ }
+ }
+
+ // Create Instances
+ public static createInstances(selector: string) {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((element) => {
+ const item = element as HTMLElement
+ let sticky = StickyComponent.getInstance(item)
+ if (!sticky) {
+ sticky = new StickyComponent(item, defaultStickyOptions)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string,
+ options: StickyOptions = defaultStickyOptions
+ ): StickyComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let sticky = StickyComponent.getInstance(item)
+ if (!sticky) {
+ sticky = new StickyComponent(item, options)
+ }
+ return sticky
+ }
+
+ public static bootstrap(attr: string = '[data-kt-sticky="true"]') {
+ StickyComponent.createInstances(attr)
+ }
+
+ public static reInitialization(attr: string = '[data-kt-sticky="true"]') {
+ StickyComponent.createInstances(attr)
+ }
+}
+
+export {StickyComponent, defaultStickyOptions}
diff --git a/src/_res/assets/ts/components/_SwapperComponent.ts b/src/_res/assets/ts/components/_SwapperComponent.ts
new file mode 100644
index 0000000..31e99e8
--- /dev/null
+++ b/src/_res/assets/ts/components/_SwapperComponent.ts
@@ -0,0 +1,210 @@
+import {
+ getAttributeValueByBreakpoint,
+ stringSnakeToCamel,
+ getObjectPropertyValueByKey,
+ EventHandlerUtil,
+ throttle,
+} from '../_utils/index'
+
+export class SwapperStore {
+ static store: Map = new Map()
+
+ public static set(instanceId: string, drawerComponentObj: SwapperComponent): void {
+ if (SwapperStore.has(instanceId)) {
+ return
+ }
+
+ SwapperStore.store.set(instanceId, drawerComponentObj)
+ }
+
+ public static get(instanceId: string): SwapperComponent | undefined {
+ if (!SwapperStore.has(instanceId)) {
+ return
+ }
+ return SwapperStore.store.get(instanceId)
+ }
+
+ public static remove(instanceId: string): void {
+ if (!SwapperStore.has(instanceId)) {
+ return
+ }
+
+ SwapperStore.store.delete(instanceId)
+ }
+
+ public static has(instanceId: string): boolean {
+ return SwapperStore.store.has(instanceId)
+ }
+
+ public static getAllInstances() {
+ return SwapperStore.store
+ }
+}
+
+export interface ISwapperOptions {
+ mode: string
+}
+
+export interface ISwapperQueries {
+ componentName: string
+ instanseQuery: string
+ attrQuery: string
+}
+
+const defaultSwapperOptions: ISwapperOptions = {
+ mode: 'append',
+}
+
+const defaultSwapperQueires: ISwapperQueries = {
+ componentName: 'swapper',
+ instanseQuery: '[data-kt-swapper="true"]',
+ attrQuery: 'data-kt-swapper-',
+}
+
+class SwapperComponent {
+ element: HTMLElement
+ options: ISwapperOptions
+ queries: ISwapperQueries
+
+ constructor(_element: HTMLElement, _options: ISwapperOptions, _queries: ISwapperQueries) {
+ this.element = _element
+ this.options = Object.assign(defaultSwapperOptions, _options)
+ this.queries = _queries
+
+ // Initial update
+ this.update()
+
+ SwapperStore.set(this.element.id, this)
+ }
+
+ private getOption(name: string) {
+ const attr = this.element.getAttribute(`${this.queries.attrQuery}${name}`)
+ if (attr) {
+ let value = getAttributeValueByBreakpoint(attr)
+ if (attr != null && String(value) === 'true') {
+ return true
+ } else if (value !== null && String(value) === 'false') {
+ return false
+ }
+ return value
+ } else {
+ const optionName = stringSnakeToCamel(name)
+ const option = getObjectPropertyValueByKey(this.options, optionName)
+ if (option) {
+ return getAttributeValueByBreakpoint(option)
+ } else {
+ return null
+ }
+ }
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+ public update = () => {
+ const parentSelector = this.getOption('parent')?.toString()
+ const mode = this.getOption('mode')
+ const parentElement = parentSelector ? document.querySelector(parentSelector) : null
+ if (parentElement && this.element.parentNode !== parentElement) {
+ const alreadyPended = document.getElementById('kt_header_menu') !== null
+ if (!alreadyPended) {
+ if (mode === 'prepend') {
+ parentElement.prepend(this.element)
+ } else if (mode === 'append') {
+ parentElement.append(this.element)
+ }
+ }
+ }
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ public trigger = (name: string, event: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Static methods
+ public static getInstance = (
+ el: HTMLElement,
+ componentName: string = defaultSwapperQueires.componentName
+ ): SwapperComponent | null => {
+ const place = SwapperStore.get(el.id)
+ if (place) {
+ return place as SwapperComponent
+ }
+
+ return null
+ }
+
+ public static createInstances = (
+ selector: string = defaultSwapperQueires.instanseQuery,
+ options: ISwapperOptions = defaultSwapperOptions,
+ queries: ISwapperQueries = defaultSwapperQueires
+ ) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ const item = el as HTMLElement
+ let place = SwapperComponent.getInstance(item)
+ if (!place) {
+ place = new SwapperComponent(item, options, queries)
+ }
+ })
+ }
+
+ public static createInsance = (
+ selector: string = defaultSwapperQueires.instanseQuery,
+ options: ISwapperOptions = defaultSwapperOptions,
+ queries: ISwapperQueries = defaultSwapperQueires
+ ): SwapperComponent | undefined => {
+ const element = document.body.querySelector(selector)
+ if (!element) {
+ return
+ }
+ const item = element as HTMLElement
+ let place = SwapperComponent.getInstance(item)
+ if (!place) {
+ place = new SwapperComponent(item, options, queries)
+ }
+ return place
+ }
+
+ public static bootstrap = (selector: string = defaultSwapperQueires.instanseQuery) => {
+ SwapperComponent.createInstances(selector)
+ }
+
+ public static reinitialization = (selector: string = defaultSwapperQueires.instanseQuery) => {
+ SwapperComponent.createInstances(selector)
+ }
+}
+
+// Window resize handler
+window.addEventListener('resize', function () {
+ let timer
+ throttle(
+ timer,
+ () => {
+ // Locate and update Offcanvas instances on window resize
+ const elements = document.querySelectorAll(defaultSwapperQueires.instanseQuery)
+ elements.forEach((el) => {
+ const place = SwapperComponent.getInstance(el as HTMLElement)
+ if (place) {
+ place.update()
+ }
+ })
+ },
+ 200
+ )
+})
+
+export {SwapperComponent, defaultSwapperOptions, defaultSwapperQueires}
diff --git a/src/_res/assets/ts/components/_ToggleComponent.ts b/src/_res/assets/ts/components/_ToggleComponent.ts
new file mode 100644
index 0000000..9119b94
--- /dev/null
+++ b/src/_res/assets/ts/components/_ToggleComponent.ts
@@ -0,0 +1,200 @@
+import {DataUtil, getUniqueIdWithPrefix, EventHandlerUtil} from '../_utils/index'
+// Helpers
+import {CookieComponent} from './_CookieComponent'
+
+export interface ToggleOptions {
+ saveState: boolean
+ targetState?: string
+ toggleState?: string
+ targetToggleMode?: string
+}
+
+const defaultToggleOptions: ToggleOptions = {
+ saveState: false,
+}
+
+class ToggleComponent {
+ element: HTMLElement
+ instanceUid: string
+ options: ToggleOptions
+ state: string = ''
+ mode: string = ''
+ target: HTMLElement | null = null
+ attribute: string = ''
+
+ constructor(_element: HTMLElement, options: ToggleOptions) {
+ this.options = Object.assign(defaultToggleOptions, options)
+ this.instanceUid = getUniqueIdWithPrefix('toggle')
+ this.element = _element
+
+ const elementTargetAttr = this.element.getAttribute('data-kt-toggle-target')
+ if (elementTargetAttr) {
+ this.target = document.querySelector(elementTargetAttr)
+ }
+ const elementToggleAttr = this.element.getAttribute('data-kt-toggle-state')
+ this.state = elementToggleAttr || ''
+ const elementModeAttr = this.element.getAttribute('data-kt-toggle-mode')
+ this.mode = elementModeAttr || ''
+ this.attribute = 'data-kt-' + this.element.getAttribute('data-kt-toggle-name')
+
+ // Event Handlers
+ this._handlers()
+
+ // Update Instance
+ // Bind Instance
+ DataUtil.set(this.element, 'toggle', this)
+ }
+
+ private _handlers = () => {
+ this.element.addEventListener('click', (e: Event) => {
+ e.preventDefault()
+
+ if (this.mode === '') {
+ this._toggle()
+ return
+ }
+
+ if (this.mode === 'off' && !this._isEnabled()) {
+ this._toggle()
+ } else if (this.mode === 'on' && this._isEnabled()) {
+ this._toggle()
+ }
+ })
+ }
+
+ // Event handlers
+ private _toggle = () => {
+ // Trigger "after.toggle" event
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.change')
+
+ if (this._isEnabled()) {
+ this._disable()
+ } else {
+ this._enable()
+ }
+
+ // Trigger "before.toggle" event
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.changed')
+ return this
+ }
+
+ private _enable = () => {
+ if (this._isEnabled()) {
+ return
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.enable')
+ this.target?.setAttribute(this.attribute, 'on')
+ if (this.state.length > 0) {
+ this.element.classList.add(this.state)
+ }
+
+ if (this.options.saveState) {
+ CookieComponent.set(this.attribute, 'on', {})
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.enabled')
+ return this
+ }
+
+ private _disable = () => {
+ if (!this._isEnabled()) {
+ return false
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.disable')
+ this.target?.removeAttribute(this.attribute)
+
+ if (this.state.length > 0) {
+ this.element.classList.remove(this.state)
+ }
+
+ if (this.options.saveState) {
+ CookieComponent.delete(this.attribute)
+ }
+
+ EventHandlerUtil.trigger(this.element, 'kt.toggle.disabled')
+ return this
+ }
+
+ private _isEnabled = () => {
+ if (!this.target) {
+ return false
+ }
+
+ return String(this.target.getAttribute(this.attribute)).toLowerCase() === 'on'
+ }
+
+ ///////////////////////
+ // ** Public API ** //
+ ///////////////////////
+
+ // Plugin API
+ // Plugin API
+ public toggle = () => {
+ return this._toggle()
+ }
+
+ public enable = () => {
+ return this._enable()
+ }
+
+ public disable = () => {
+ return this._disable()
+ }
+
+ public isEnabled = () => {
+ return this._isEnabled()
+ }
+
+ public goElement = () => {
+ return this.element
+ }
+
+ // Event API
+ public on = (name: string, handler: Function) => {
+ return EventHandlerUtil.on(this.element, name, handler)
+ }
+
+ public one = (name: string, handler: Function) => {
+ return EventHandlerUtil.one(this.element, name, handler)
+ }
+
+ public off = (name: string, handlerId: string) => {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+
+ public trigger = (name: string, event?: Event) => {
+ return EventHandlerUtil.trigger(this.element, name, event)
+ }
+
+ // Static methods
+ public static getInstance = (el: HTMLElement) => {
+ const toggleElement = DataUtil.get(el, 'toggle')
+ if (toggleElement) {
+ return toggleElement
+ }
+
+ return null
+ }
+
+ public static createInstances = (selector: string) => {
+ const elements = document.body.querySelectorAll(selector)
+ elements.forEach((el) => {
+ let toggle = ToggleComponent.getInstance(el)
+ if (!toggle) {
+ toggle = new ToggleComponent(el, defaultToggleOptions)
+ }
+ })
+ }
+
+ public static reinitialization = () => {
+ ToggleComponent.createInstances('[data-kt-toggle]')
+ }
+
+ public static bootstrap = () => {
+ ToggleComponent.createInstances('[data-kt-toggle]')
+ }
+}
+
+export {ToggleComponent, defaultToggleOptions}
diff --git a/src/_res/assets/ts/components/index.ts b/src/_res/assets/ts/components/index.ts
new file mode 100644
index 0000000..bf59774
--- /dev/null
+++ b/src/_res/assets/ts/components/index.ts
@@ -0,0 +1,14 @@
+export * from './_CookieComponent'
+export * from './_DrawerComponent'
+export * from './_FeedbackComponent'
+export * from './_ImageInputComponent'
+export * from './_ScrollComponent'
+export * from './_ScrollTopComponent'
+export * from './_StepperComponent'
+export * from './_StickyComponent'
+export * from './_ToggleComponent'
+// export * from './_DialerComponent';
+export * from './_PasswordMeterComponent'
+export * from './_SwapperComponent'
+export * from './MenuComponent'
+export * from './SearchComponent'
diff --git a/src/_res/assets/ts/index.ts b/src/_res/assets/ts/index.ts
new file mode 100644
index 0000000..eb9a9f9
--- /dev/null
+++ b/src/_res/assets/ts/index.ts
@@ -0,0 +1,43 @@
+export * as KTUtil from './_utils/index'
+export * as components from './components/index'
+// declare global {
+// interface Window {
+// keenthemes: any;
+// }
+// }
+
+// window.keenthemes = {
+// components: {
+// ScrollTop: components.ScrollTopComponent,
+// Coockie: components.CookieComponent,
+// Drawer: components.DrawerComponent,
+// Feedback: components.FeedbackComponent,
+// ImageInput: components.ImageInputComponent,
+// Scroll: components.ScrollComponent,
+// Stepper: components.StepperComponent,
+// Sticky: components.StickyComponent,
+// Toggle: components.ToggleComponent,
+// Menu: components.MenuComponent,
+// Search: components.SearchComponent,
+// Dialder: components.DialerComponent,
+// PasswordMeter: components.PasswordMeterComponent,
+// Place: components.PlaceComponent,
+// defaultDialerOptions: components.defaultDialerOptions,
+// defaultDialderQueries: components.defaultDialerQueires,
+// defaultPasswordMeterOptions: components.defaultPasswordMeterOptions,
+// defaultPasswordMeterQueries: components.defaultPasswordMeterQueires,
+// defaultPlaceOptions: components.defaultPlaceOptions,
+// defaultPlaceQueries: components.defaultPlaceQueires,
+// defaultDrawerOptions: components.defaultDrawerOptions,
+// defaultFeedbackOptions: components.defaultFeedbackOptions,
+// defaultImageInputOptions: components.defaultImageInputOptions,
+// defaultScrollOptions: components.defaultScrollOptions,
+// defaultScrollTopOptions: components.defaultScrollTopOptions,
+// defaultStepperOptions: components.defaultStepperOptions,
+// defaultStickyOptions: components.defaultStickyOptions,
+// defaultToggleOptions: components.defaultToggleOptions,
+// defaultMenuOptions: components.defaultMenuOptions,
+// defaultSearchOptions: components.defaultSearchOptions,
+// },
+// utils: KTUtil,
+// };
diff --git a/src/_res/assets/ts/layout/ThemeMode.ts b/src/_res/assets/ts/layout/ThemeMode.ts
new file mode 100644
index 0000000..d96c629
--- /dev/null
+++ b/src/_res/assets/ts/layout/ThemeMode.ts
@@ -0,0 +1,195 @@
+import {themeMenuModeLSKey, themeModelSKey} from '../../../partials'
+import {EventHandlerUtil} from '../_utils'
+
+type Mode = 'light' | 'dark' | 'system'
+
+class ThemeMode {
+ menu: HTMLElement | null = null
+ element: HTMLElement | null = null
+
+ public getMode = (): Mode => {
+ const menuMode: Mode | '' = this.getMenuMode()
+ const defaultMode = 'light'
+ if (!localStorage) {
+ return defaultMode
+ }
+
+ const ls = localStorage.getItem(themeModelSKey)
+ if (ls) {
+ return ls as Mode
+ }
+
+ const dataTheme = this.element?.getAttribute('data-theme')
+ if (dataTheme) {
+ return dataTheme as Mode
+ }
+
+ if (!menuMode) {
+ return defaultMode
+ }
+
+ if (menuMode === 'system') {
+ return this.getSystemMode()
+ }
+
+ return menuMode
+ }
+
+ public setMode = (mode: Mode, menuMode: Mode | ''): void => {
+ // Check input values
+ if (mode !== 'light' && mode !== 'dark') {
+ return
+ }
+
+ // Reset mode if system mode was changed
+ if (menuMode === 'system') {
+ if (this.getSystemMode() !== mode) {
+ mode = this.getSystemMode()
+ }
+ }
+
+ // Check menu mode
+ if (!menuMode) {
+ menuMode = mode
+ }
+
+ // Read active menu mode value
+ const activeMenuItem: HTMLElement | null =
+ this.menu?.querySelector('[data-kt-element="mode"][data-kt-value="' + menuMode + '"]') || null
+
+ // Enable switching state
+ this.element?.setAttribute('data-kt-theme-mode-switching', 'true')
+
+ // Set mode to the target element
+ this.element?.setAttribute('data-theme', mode)
+
+ // Disable switching state
+ const self = this
+ setTimeout(function () {
+ self.element?.removeAttribute('data-kt-theme-mode-switching')
+ }, 300)
+
+ // Store mode value in storage
+ if (localStorage) {
+ localStorage.setItem(themeModelSKey, mode)
+ }
+
+ // Set active menu item
+ if (activeMenuItem && localStorage) {
+ localStorage.setItem(themeMenuModeLSKey, menuMode)
+ this.setActiveMenuItem(activeMenuItem)
+ }
+
+ // Flip images
+ this.flipImages()
+ }
+
+ public getMenuMode = (): Mode | '' => {
+ const menuItem = this.menu?.querySelector('.active[data-kt-element="mode"]')
+ const dataKTValue = menuItem?.getAttribute('data-kt-value')
+ if (dataKTValue) {
+ return dataKTValue as Mode
+ }
+
+ const ls = localStorage ? localStorage.getItem(themeMenuModeLSKey) : null
+ return (ls as Mode) || ''
+ }
+
+ public getSystemMode = (): Mode => {
+ return window.matchMedia('(prefers-color-scheme: dark)') ? 'dark' : 'light'
+ }
+
+ private initMode = (): void => {
+ this.setMode(this.getMode(), this.getMenuMode())
+ if (this.element) {
+ EventHandlerUtil.trigger(this.element, 'kt.thememode.init')
+ }
+ }
+
+ private getActiveMenuItem = (): HTMLElement | null => {
+ return (
+ this.menu?.querySelector(
+ '[data-kt-element="mode"][data-kt-value="' + this.getMenuMode() + '"]'
+ ) || null
+ )
+ }
+
+ private setActiveMenuItem = (item: HTMLElement): void => {
+ const menuMode = item.getAttribute('data-kt-value')
+ const activeItem = this.menu?.querySelector('.active[data-kt-element="mode"]')
+ if (activeItem) {
+ activeItem.classList.remove('active')
+ }
+
+ item.classList.add('active')
+ if (localStorage && menuMode) {
+ localStorage.setItem(themeMenuModeLSKey, menuMode)
+ }
+ }
+
+ private handleMenu = (): void => {
+ this.menu
+ ?.querySelectorAll('[data-kt-element="mode"]')
+ ?.forEach((item: HTMLElement) => {
+ item.addEventListener('click', (e) => {
+ e.preventDefault()
+
+ const menuMode: string | null = item.getAttribute('data-kt-value')
+ const mode = menuMode === 'system' ? this.getSystemMode() : menuMode
+
+ if (mode) {
+ this.setMode(mode as Mode, menuMode as Mode | '')
+ }
+ })
+ })
+ }
+
+ public flipImages = () => {
+ document.querySelectorAll('[data-kt-img-dark]')?.forEach((item: HTMLElement) => {
+ if (item.tagName === 'IMG') {
+ if (this.getMode() === 'dark' && item.hasAttribute('data-kt-img-dark')) {
+ item.setAttribute('data-kt-img-light', item.getAttribute('src') || '')
+ item.setAttribute('src', item.getAttribute('data-kt-img-dark') || '')
+ } else if (this.getMode() === 'light' && item.hasAttribute('data-kt-img-light')) {
+ item.setAttribute('data-kt-img-dark', item.getAttribute('src') || '')
+ item.setAttribute('src', item.getAttribute('data-kt-img-light') || '')
+ }
+ } else {
+ if (this.getMode() === 'dark' && item.hasAttribute('data-kt-img-dark')) {
+ item.setAttribute('data-kt-img-light', item.getAttribute('src') || '')
+ item.style.backgroundImage = "url('" + item.getAttribute('data-kt-img-dark') + "')"
+ } else if (this.getMode() === 'light' && item.hasAttribute('data-kt-img-light')) {
+ item.setAttribute('data-kt-img-dark', item.getAttribute('src') || '')
+ item.style.backgroundImage = "url('" + item.getAttribute('data-kt-img-light') + "')"
+ }
+ }
+ })
+ }
+
+ public on = (name: string, hander: Function) => {
+ if (this.element) {
+ return EventHandlerUtil.on(this.element, name, hander)
+ }
+ }
+
+ public off = (name: string, handlerId: string) => {
+ if (this.element) {
+ return EventHandlerUtil.off(this.element, name, handlerId)
+ }
+ }
+
+ public init = () => {
+ this.menu = document.querySelector('[data-kt-element="theme-mode-menu"]')
+ this.element = document.documentElement
+
+ this.initMode()
+
+ if (this.menu) {
+ this.handleMenu()
+ }
+ }
+}
+
+const ThemeModeComponent = new ThemeMode()
+// Initialize app on document ready => ThemeModeComponent.init()
+export {ThemeModeComponent}
diff --git a/src/_res/assets/ts/layout/index.ts b/src/_res/assets/ts/layout/index.ts
new file mode 100644
index 0000000..8b157b2
--- /dev/null
+++ b/src/_res/assets/ts/layout/index.ts
@@ -0,0 +1 @@
+export * from './ThemeMode'
diff --git a/src/_res/helpers/AssetHelpers.ts b/src/_res/helpers/AssetHelpers.ts
new file mode 100644
index 0000000..821a9d8
--- /dev/null
+++ b/src/_res/helpers/AssetHelpers.ts
@@ -0,0 +1 @@
+export const toAbsoluteUrl = (pathname: string) => process.env.PUBLIC_URL + pathname
diff --git a/src/_res/helpers/RouterHelpers.ts b/src/_res/helpers/RouterHelpers.ts
new file mode 100644
index 0000000..7cc10dc
--- /dev/null
+++ b/src/_res/helpers/RouterHelpers.ts
@@ -0,0 +1,20 @@
+export function getCurrentUrl(pathname: string) {
+ return pathname.split(/[?#]/)[0]
+}
+
+export function checkIsActive(pathname: string, url: string) {
+ const current = getCurrentUrl(pathname)
+ if (!current || !url) {
+ return false
+ }
+
+ if (current === url) {
+ return true
+ }
+
+ if (current.indexOf(url) > -1) {
+ return true
+ }
+
+ return false
+}
diff --git a/src/_res/helpers/components/KTCard.tsx b/src/_res/helpers/components/KTCard.tsx
new file mode 100644
index 0000000..dace09c
--- /dev/null
+++ b/src/_res/helpers/components/KTCard.tsx
@@ -0,0 +1,62 @@
+import {FC} from 'react'
+import clsx from 'clsx'
+import {WithChildren} from '../react18MigrationHelpers'
+
+// Wrapper on html card:
+// https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html
+
+type Props = {
+ className?: string
+ shadow?: boolean
+ flush?: boolean // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#flush
+ resetSidePaddings?: boolean // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#reset-side-paddings
+ border?: boolean // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#bordered
+ dashed?: boolean // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#dashed
+ stretch?: 'stretch' | 'stretch-75' | 'stretch-50' | 'stretch-33' | 'stretch-25' // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#stretch
+ rounded?: 'rounded' | 'rounded-top' | 'rounded-bottom'
+ // https://preview.keenthemes.com/metronic8/demo1/documentation/base/cards.html#utilities
+ utilityP?: number
+ utilityPY?: number
+ utilityPX?: number
+}
+
+const KTCard: FC = (props) => {
+ const {
+ className,
+ shadow,
+ flush,
+ resetSidePaddings,
+ border,
+ dashed,
+ stretch,
+ rounded,
+ utilityP,
+ utilityPY,
+ utilityPX,
+ children,
+ } = props
+ return (
+
+ {children}
+
+ )
+}
+
+export {KTCard}
diff --git a/src/_res/helpers/components/KTCardBody.tsx b/src/_res/helpers/components/KTCardBody.tsx
new file mode 100644
index 0000000..3611852
--- /dev/null
+++ b/src/_res/helpers/components/KTCardBody.tsx
@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+import {FC} from 'react'
+import {WithChildren} from '../react18MigrationHelpers'
+
+type Props = {
+ className?: string
+ scroll?: boolean
+ height?: number
+}
+
+const KTCardBody: FC = (props) => {
+ const {className, scroll, height, children} = props
+ return (
+
+ {children}
+
+ )
+}
+
+export {KTCardBody}
diff --git a/src/_res/helpers/components/KTSVG.tsx b/src/_res/helpers/components/KTSVG.tsx
new file mode 100644
index 0000000..112d069
--- /dev/null
+++ b/src/_res/helpers/components/KTSVG.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import SVG from 'react-inlinesvg'
+import {toAbsoluteUrl} from '../AssetHelpers'
+type Props = {
+ className?: string
+ path: string
+ svgClassName?: string
+}
+
+const KTSVG: React.FC = ({className = '', path, svgClassName = 'mh-50px'}) => {
+ return (
+
+
+
+ )
+}
+
+export {KTSVG}
diff --git a/src/_res/helpers/crud-helper/consts.ts b/src/_res/helpers/crud-helper/consts.ts
new file mode 100644
index 0000000..8c09903
--- /dev/null
+++ b/src/_res/helpers/crud-helper/consts.ts
@@ -0,0 +1,5 @@
+const QUERIES = {
+ USERS_LIST: 'users-list',
+}
+
+export {QUERIES}
diff --git a/src/_res/helpers/crud-helper/helpers.tsx b/src/_res/helpers/crud-helper/helpers.tsx
new file mode 100644
index 0000000..9208603
--- /dev/null
+++ b/src/_res/helpers/crud-helper/helpers.tsx
@@ -0,0 +1,124 @@
+import {createContext, Dispatch, SetStateAction, useEffect, useState} from 'react'
+import qs from 'qs'
+import {ID, QueryResponseContextProps, QueryState} from './models'
+
+function createResponseContext(initialState: QueryResponseContextProps) {
+ return createContext(initialState)
+}
+
+function isNotEmpty(obj: unknown) {
+ return obj !== undefined && obj !== null && obj !== ''
+}
+
+// Example: page=1&items_per_page=10&sort=id&order=desc&search=a&filter_name=a&filter_online=false
+function stringifyRequestQuery(state: QueryState): string {
+ const pagination = qs.stringify(state, {filter: ['page', 'items_per_page'], skipNulls: true})
+ const sort = qs.stringify(state, {filter: ['sort', 'order'], skipNulls: true})
+ const search = isNotEmpty(state.search)
+ ? qs.stringify(state, {filter: ['search'], skipNulls: true})
+ : ''
+
+ const filter = state.filter
+ ? Object.entries(state.filter as Object)
+ .filter((obj) => isNotEmpty(obj[1]))
+ .map((obj) => {
+ return `filter_${obj[0]}=${obj[1]}`
+ })
+ .join('&')
+ : ''
+
+ return [pagination, sort, search, filter]
+ .filter((f) => f)
+ .join('&')
+ .toLowerCase()
+}
+
+function parseRequestQuery(query: string): QueryState {
+ const cache: unknown = qs.parse(query)
+ return cache as QueryState
+}
+
+function calculatedGroupingIsDisabled(isLoading: boolean, data: Array | undefined): boolean {
+ if (isLoading) {
+ return true
+ }
+
+ return !data || !data.length
+}
+
+function calculateIsAllDataSelected(data: Array | undefined, selected: Array): boolean {
+ if (!data) {
+ return false
+ }
+
+ return data.length > 0 && data.length === selected.length
+}
+
+function groupingOnSelect(
+ id: ID,
+ selected: Array,
+ setSelected: Dispatch>>
+) {
+ if (!id) {
+ return
+ }
+
+ if (selected.includes(id)) {
+ setSelected(selected.filter((itemId) => itemId !== id))
+ } else {
+ const updatedSelected = [...selected]
+ updatedSelected.push(id)
+ setSelected(updatedSelected)
+ }
+}
+
+function groupingOnSelectAll(
+ isAllSelected: boolean,
+ setSelected: Dispatch>>,
+ data?: Array
+) {
+ if (isAllSelected) {
+ setSelected([])
+ return
+ }
+
+ if (!data || !data.length) {
+ return
+ }
+
+ setSelected(data.filter((item) => item.id).map((item) => item.id))
+}
+
+// Hook
+function useDebounce(value: string | undefined, delay: number) {
+ // State and setters for debounced value
+ const [debouncedValue, setDebouncedValue] = useState(value)
+ useEffect(
+ () => {
+ // Update debounced value after delay
+ const handler = setTimeout(() => {
+ setDebouncedValue(value)
+ }, delay)
+ // Cancel the timeout if value changes (also on delay change or unmount)
+ // This is how we prevent debounced value from updating if value is changed ...
+ // .. within the delay period. Timeout gets cleared and restarted.
+ return () => {
+ clearTimeout(handler)
+ }
+ },
+ [value, delay] // Only re-call effect if value or delay changes
+ )
+ return debouncedValue
+}
+
+export {
+ createResponseContext,
+ stringifyRequestQuery,
+ parseRequestQuery,
+ calculatedGroupingIsDisabled,
+ calculateIsAllDataSelected,
+ groupingOnSelect,
+ groupingOnSelectAll,
+ useDebounce,
+ isNotEmpty,
+}
diff --git a/src/_res/helpers/crud-helper/models.ts b/src/_res/helpers/crud-helper/models.ts
new file mode 100644
index 0000000..3f36d9f
--- /dev/null
+++ b/src/_res/helpers/crud-helper/models.ts
@@ -0,0 +1,83 @@
+import {Dispatch, SetStateAction} from 'react'
+
+export type ID = undefined | null | number
+
+export type PaginationState = {
+ page: number
+ items_per_page: 10 | 30 | 50 | 100
+ links?: Array<{label: string; active: boolean; url: string | null; page: number | null}>
+}
+
+export type SortState = {
+ sort?: string
+ order?: 'asc' | 'desc'
+}
+
+export type FilterState = {
+ filter?: unknown
+}
+
+export type SearchState = {
+ search?: string
+}
+
+export type Response = {
+ data?: T
+ payload?: {
+ message?: string
+ errors?: {
+ [key: string]: Array
+ }
+ pagination?: PaginationState
+ }
+}
+
+export type QueryState = PaginationState & SortState & FilterState & SearchState
+
+export type QueryRequestContextProps = {
+ state: QueryState
+ updateState: (updates: Partial) => void
+}
+
+export const initialQueryState: QueryState = {
+ page: 1,
+ items_per_page: 10,
+}
+
+export const initialQueryRequest: QueryRequestContextProps = {
+ state: initialQueryState,
+ updateState: () => {},
+}
+
+export type QueryResponseContextProps = {
+ response?: Response> | undefined
+ refetch: () => void
+ isLoading: boolean
+ query: string
+}
+
+export const initialQueryResponse = {refetch: () => {}, isLoading: false, query: ''}
+
+export type ListViewContextProps = {
+ selected: Array
+ onSelect: (selectedId: ID) => void
+ onSelectAll: () => void
+ clearSelected: () => void
+ // NULL => (CREATION MODE) | MODAL IS OPENED
+ // NUMBER => (EDIT MODE) | MODAL IS OPENED
+ // UNDEFINED => MODAL IS CLOSED
+ itemIdForUpdate?: ID
+ setItemIdForUpdate: Dispatch