(
+ ({ icon, width = 24, sx, className, ...other }) => (
+ // Render the Icon component with the provided properties
+
+ )
+);
+
+export default Iconify;
+
diff --git a/src/components/Icons/IconBox.js b/src/components/icon/svg/IconBox.tsx
similarity index 90%
rename from src/components/Icons/IconBox.js
rename to src/components/icon/svg/IconBox.tsx
index 6a63c0850..295b1f872 100644
--- a/src/components/Icons/IconBox.js
+++ b/src/components/icon/svg/IconBox.tsx
@@ -1,4 +1,3 @@
-import React from "react";
import { Flex } from "@chakra-ui/react";
export default function IconBox(props) {
@@ -14,4 +13,4 @@ export default function IconBox(props) {
{children}
);
-}
+}
\ No newline at end of file
diff --git a/src/components/Icons/Icons.js b/src/components/icon/svg/index.tsx
similarity index 99%
rename from src/components/Icons/Icons.js
rename to src/components/icon/svg/index.tsx
index e9c186e9a..fd53c8499 100644
--- a/src/components/Icons/Icons.js
+++ b/src/components/icon/svg/index.tsx
@@ -520,4 +520,4 @@ export const VisaIcon = createIcon({
/>
),
-});
+});
\ No newline at end of file
diff --git a/src/components/loadable/index.tsx b/src/components/loadable/index.tsx
new file mode 100644
index 000000000..73582f3fb
--- /dev/null
+++ b/src/components/loadable/index.tsx
@@ -0,0 +1,16 @@
+import React, { Suspense, ReactElement } from 'react';
+
+// project imports
+import { CircularLoader } from '../loader';
+
+// ==============================|| LOADABLE - LAZY LOADING ||============================== //
+
+const Loadable = (Component: React.ComponentType
): React.FC
=> (
+ props: P
+): ReactElement => (
+ }>
+
+
+);
+
+export default Loadable;
diff --git a/src/components/loader/index.tsx b/src/components/loader/index.tsx
new file mode 100644
index 000000000..04e6707ba
--- /dev/null
+++ b/src/components/loader/index.tsx
@@ -0,0 +1,36 @@
+// Chakra UI kutubxonalari import qilinadi
+import { Box, Spinner } from "@chakra-ui/react";
+
+// Komponentlar stil bilan tasvirlangan "LoaderWrapper" komponenti
+const LoaderWrapper = (props) => (
+
+);
+
+// ==============================|| LOADER ||============================== //
+
+// "Loader" nomli komponent, stilga qo'yilgan "LoaderWrapper" orqali Spinner chizadi
+const Loader = () => (
+
+
+
+);
+
+// "CircularLoader" nomli komponent, "Box" orqali flex stilga ega bo'lgan dairaviy chizishni chizadi
+export const CircularLoader = () => (
+
+
+
+);
+
+// "Loader" komponentini eksport qilamiz
+export default Loader;
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 855c8ed16..000000000
--- a/src/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*!
-
-=========================================================
-* Purity UI Dashboard - v1.0.1
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/purity-ui-dashboard
-* Copyright 2021 Creative Tim (https://www.creative-tim.com)
-* Licensed under MIT (https://github.com/creativetimofficial/purity-ui-dashboard/blob/master/LICENSE.md)
-
-* Design by Creative Tim & Coded by Simmmple
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
-import React from "react";
-import ReactDOM from "react-dom";
-import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
-
-import AuthLayout from "layouts/Auth.js";
-import AdminLayout from "layouts/Admin.js";
-import RTLLayout from "layouts/RTL.js";
-
-ReactDOM.render(
-
-
-
-
-
-
-
- ,
- document.getElementById("root")
-);
diff --git a/src/layout/appLayout.tsx b/src/layout/appLayout.tsx
new file mode 100644
index 000000000..2b2d51801
--- /dev/null
+++ b/src/layout/appLayout.tsx
@@ -0,0 +1,125 @@
+// Chakra imports
+import { ChakraProvider, Portal, CSSReset } from "@chakra-ui/react"
+import Footer from "@/components/Footer"
+// Layout components
+import AdminNavbar from "@/components/Navbar"
+import Sidebar from "@/components/Sidebar"
+import React from "react"
+import { Route } from "react-router-dom"
+import routes from "@/routes/config"
+// import '@fontsource/roboto/400.css';
+// import '@fontsource/roboto/500.css';
+// import '@fontsource/roboto/700.css';
+// Custom Chakra theme
+import theme from "@/themes"
+// Custom components
+import MainPanel from "@/components/Layout/MainPanel"
+import PanelContainer from "@/components/Layout/PanelContainer"
+import PanelContent from "@/components/Layout/PanelContent"
+
+interface AppLayoutProps {
+ children: React.ReactNode
+}
+
+const AppLayout: React.FC = ({ children }) => {
+ const getActiveRoute = (routes: any[]) => {
+ let activeRoute = "Default Brand Text"
+ for (let i = 0; i < routes.length; i++) {
+ if (routes[i].collapse) {
+ let collapseActiveRoute = getActiveRoute(routes[i].views)
+ if (collapseActiveRoute !== activeRoute) {
+ return collapseActiveRoute
+ }
+ } else if (routes[i].category) {
+ let categoryActiveRoute = getActiveRoute(routes[i].views)
+ if (categoryActiveRoute !== activeRoute) {
+ return categoryActiveRoute
+ }
+ } else {
+ if (
+ window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1
+ ) {
+ return routes[i].name
+ }
+ }
+ }
+ return activeRoute
+ }
+
+ const getActiveNavbar = (routes: any[]) => {
+ let activeNavbar = false
+ for (let i = 0; i < routes.length; i++) {
+ if (routes[i].category) {
+ let categoryActiveNavbar = getActiveNavbar(routes[i].views)
+ if (categoryActiveNavbar !== activeNavbar) {
+ return categoryActiveNavbar
+ }
+ } else {
+ if (
+ window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1
+ ) {
+ if (routes[i].secondaryNavbar) {
+ return routes[i].secondaryNavbar
+ }
+ }
+ }
+ }
+ return activeNavbar
+ }
+
+ const getRoutes = (routes: any[]) => {
+ return routes.map((prop, key) => {
+ if (prop.collapse) {
+ return getRoutes(prop.views)
+ }
+ if (prop.category === "account") {
+ return getRoutes(prop.views)
+ }
+ if (prop.layout === "/admin") {
+ return (
+
+ )
+ } else {
+ return null
+ }
+ })
+ }
+
+ document.documentElement.dir = "ltr"
+
+ return (
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ )
+}
+
+export default AppLayout
diff --git a/src/layout/authLayout.tsx b/src/layout/authLayout.tsx
new file mode 100644
index 000000000..61df29850
--- /dev/null
+++ b/src/layout/authLayout.tsx
@@ -0,0 +1,107 @@
+import { Box, ChakraProvider } from '@chakra-ui/react';
+import Footer from '@/components/Footer';
+import React, { useEffect, useRef } from 'react';
+import { Route } from 'react-router-dom';
+import theme from '@/themes';
+
+interface AuthLayoutProps {
+ children: React.ReactNode;
+}
+
+function AuthLayout(props: AuthLayoutProps): JSX.Element {
+ const { children } = props;
+
+ const wrapper = useRef(null);
+
+ useEffect(() => {
+ document.body.style.overflow = 'unset';
+
+ return function cleanup() {
+ // Specify how to clean up after this effect:
+ };
+ }, []);
+
+ const getActiveRoute = (routes: any[]) => {
+ let activeRoute = 'Default Brand Text';
+
+ for (let i = 0; i < routes.length; i++) {
+ if (routes[i].collapse) {
+ let collapseActiveRoute = getActiveRoute(routes[i].views);
+ if (collapseActiveRoute !== activeRoute) {
+ return collapseActiveRoute;
+ }
+ } else if (routes[i].category) {
+ let categoryActiveRoute = getActiveRoute(routes[i].views);
+ if (categoryActiveRoute !== activeRoute) {
+ return categoryActiveRoute;
+ }
+ } else {
+ if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
+ return routes[i].name;
+ }
+ }
+ }
+
+ return activeRoute;
+ };
+
+ const getActiveNavbar = (routes: any[]) => {
+ let activeNavbar = false;
+
+ for (let i = 0; i < routes.length; i++) {
+ if (routes[i].category) {
+ let categoryActiveNavbar = getActiveNavbar(routes[i].views);
+ if (categoryActiveNavbar !== activeNavbar) {
+ return categoryActiveNavbar;
+ }
+ } else {
+ if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
+ if (routes[i].secondaryNavbar) {
+ return routes[i].secondaryNavbar;
+ }
+ }
+ }
+ }
+
+ return activeNavbar;
+ };
+
+ const getRoutes = (routes: any[]) => {
+ return routes.map((prop, key) => {
+ if (prop.collapse) {
+ return getRoutes(prop.views);
+ }
+
+ if (prop.category === 'account') {
+ return getRoutes(prop.views);
+ }
+
+ if (prop.layout === '/auth') {
+ return ;
+ } else {
+ return null;
+ }
+ });
+ };
+
+ const navRef = useRef(null);
+
+ document.documentElement.dir = 'ltr';
+
+ return (
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+ );
+}
+
+export default AuthLayout;
diff --git a/src/layouts/Admin.js b/src/layouts/Admin.js
deleted file mode 100644
index fbdaaf747..000000000
--- a/src/layouts/Admin.js
+++ /dev/null
@@ -1,140 +0,0 @@
-// Chakra imports
-import { ChakraProvider, Portal, useDisclosure } from '@chakra-ui/react';
-import Configurator from 'components/Configurator/Configurator';
-import Footer from 'components/Footer/Footer.js';
-// Layout components
-import AdminNavbar from 'components/Navbars/AdminNavbar.js';
-import Sidebar from 'components/Sidebar';
-import React, { useState } from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
-import routes from 'routes.js';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-// Custom Chakra theme
-import theme from 'theme/theme.js';
-import FixedPlugin from '../components/FixedPlugin/FixedPlugin';
-// Custom components
-import MainPanel from '../components/Layout/MainPanel';
-import PanelContainer from '../components/Layout/PanelContainer';
-import PanelContent from '../components/Layout/PanelContent';
-export default function Dashboard(props) {
- const { ...rest } = props;
- // states and functions
- const [ sidebarVariant, setSidebarVariant ] = useState('transparent');
- const [ fixed, setFixed ] = useState(false);
- // functions for changing the states from components
- const getRoute = () => {
- return window.location.pathname !== '/admin/full-screen-maps';
- };
- const getActiveRoute = (routes) => {
- let activeRoute = 'Default Brand Text';
- for (let i = 0; i < routes.length; i++) {
- if (routes[i].collapse) {
- let collapseActiveRoute = getActiveRoute(routes[i].views);
- if (collapseActiveRoute !== activeRoute) {
- return collapseActiveRoute;
- }
- } else if (routes[i].category) {
- let categoryActiveRoute = getActiveRoute(routes[i].views);
- if (categoryActiveRoute !== activeRoute) {
- return categoryActiveRoute;
- }
- } else {
- if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
- return routes[i].name;
- }
- }
- }
- return activeRoute;
- };
- // This changes navbar state(fixed or not)
- const getActiveNavbar = (routes) => {
- let activeNavbar = false;
- for (let i = 0; i < routes.length; i++) {
- if (routes[i].category) {
- let categoryActiveNavbar = getActiveNavbar(routes[i].views);
- if (categoryActiveNavbar !== activeNavbar) {
- return categoryActiveNavbar;
- }
- } else {
- if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
- if (routes[i].secondaryNavbar) {
- return routes[i].secondaryNavbar;
- }
- }
- }
- }
- return activeNavbar;
- };
- const getRoutes = (routes) => {
- return routes.map((prop, key) => {
- if (prop.collapse) {
- return getRoutes(prop.views);
- }
- if (prop.category === 'account') {
- return getRoutes(prop.views);
- }
- if (prop.layout === '/admin') {
- return ;
- } else {
- return null;
- }
- });
- };
- const { isOpen, onOpen, onClose } = useDisclosure();
- document.documentElement.dir = 'ltr';
- // Chakra Color Mode
- return (
-
-
-
-
-
-
- {getRoute() ? (
-
-
-
- {getRoutes(routes)}
-
-
-
-
- ) : null}
-
-
-
-
- {
- setFixed(value);
- }}
- onOpaque={() => setSidebarVariant('opaque')}
- onTransparent={() => setSidebarVariant('transparent')}
- />
-
-
- );
-}
diff --git a/src/layouts/Auth.js b/src/layouts/Auth.js
deleted file mode 100644
index 6370003bb..000000000
--- a/src/layouts/Auth.js
+++ /dev/null
@@ -1,99 +0,0 @@
-// chakra imports
-import { Box, ChakraProvider, Portal } from '@chakra-ui/react';
-import Footer from 'components/Footer/Footer.js';
-// core components
-import AuthNavbar from 'components/Navbars/AuthNavbar.js';
-import React from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
-import routes from 'routes.js';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-import theme from 'theme/theme.js';
-
-export default function Pages(props) {
- const { ...rest } = props;
- // ref for the wrapper div
- const wrapper = React.createRef();
- React.useEffect(() => {
- document.body.style.overflow = 'unset';
- // Specify how to clean up after this effect:
- return function cleanup() {};
- });
- const getActiveRoute = (routes) => {
- let activeRoute = 'Default Brand Text';
- for (let i = 0; i < routes.length; i++) {
- if (routes[i].collapse) {
- let collapseActiveRoute = getActiveRoute(routes[i].views);
- if (collapseActiveRoute !== activeRoute) {
- return collapseActiveRoute;
- }
- } else if (routes[i].category) {
- let categoryActiveRoute = getActiveRoute(routes[i].views);
- if (categoryActiveRoute !== activeRoute) {
- return categoryActiveRoute;
- }
- } else {
- if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
- return routes[i].name;
- }
- }
- }
- return activeRoute;
- };
- const getActiveNavbar = (routes) => {
- let activeNavbar = false;
- for (let i = 0; i < routes.length; i++) {
- if (routes[i].category) {
- let categoryActiveNavbar = getActiveNavbar(routes[i].views);
- if (categoryActiveNavbar !== activeNavbar) {
- return categoryActiveNavbar;
- }
- } else {
- if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
- if (routes[i].secondaryNavbar) {
- return routes[i].secondaryNavbar;
- }
- }
- }
- }
- return activeNavbar;
- };
- const getRoutes = (routes) => {
- return routes.map((prop, key) => {
- if (prop.collapse) {
- return getRoutes(prop.views);
- }
- if (prop.category === 'account') {
- return getRoutes(prop.views);
- }
- if (prop.layout === '/auth') {
- return ;
- } else {
- return null;
- }
- });
- };
- const navRef = React.useRef();
- document.documentElement.dir = 'ltr';
- return (
-
-
-
-
-
-
-
-
- {getRoutes(routes)}
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/layouts/RTL.js b/src/layouts/RTL.js
deleted file mode 100644
index 43b4a16cd..000000000
--- a/src/layouts/RTL.js
+++ /dev/null
@@ -1,143 +0,0 @@
-// Chakra imports
-import { ChakraProvider, Portal, useDisclosure } from '@chakra-ui/react';
-import { RtlProvider } from 'components/RTLProvider/RTLProvider';
-import Configurator from 'components/Configurator/Configurator';
-import Footer from 'components/Footer/Footer.js';
-// Layout components
-import AdminNavbar from 'components/Navbars/AdminNavbar.js';
-import Sidebar from 'components/Sidebar';
-import React, { useState } from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
-import routes from 'routes.js';
-// Custom Chakra theme
-import theme from 'theme/theme.js';
-import FixedPlugin from '../components/FixedPlugin/FixedPlugin';
-// Custom components
-import MainPanel from '../components/Layout/MainPanel';
-import PanelContainer from '../components/Layout/PanelContainer';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-import PanelContent from '../components/Layout/PanelContent';
-export default function Dashboard(props) {
- const { ...rest } = props;
- // states and functions
- const [ sidebarVariant, setSidebarVariant ] = useState('transparent');
- const [ fixed, setFixed ] = useState(false);
- const getRoute = () => {
- return window.location.pathname !== '/admin/full-screen-maps';
- };
- const getActiveRoute = (routes) => {
- let activeRoute = 'Default Brand Text';
- for (let i = 0; i < routes.length; i++) {
- if (routes[i].collapse) {
- let collapseActiveRoute = getActiveRoute(routes[i].views);
- if (collapseActiveRoute !== activeRoute) {
- return collapseActiveRoute;
- }
- } else if (routes[i].category) {
- let categoryActiveRoute = getActiveRoute(routes[i].views);
- if (categoryActiveRoute !== activeRoute) {
- return categoryActiveRoute;
- }
- } else {
- if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
- return routes[i].name;
- }
- }
- }
- return activeRoute;
- };
- // This changes navbar state(fixed or not)
- const getActiveNavbar = (routes) => {
- let activeNavbar = false;
- for (let i = 0; i < routes.length; i++) {
- if (routes[i].category) {
- let categoryActiveNavbar = getActiveNavbar(routes[i].views);
- if (categoryActiveNavbar !== activeNavbar) {
- return categoryActiveNavbar;
- }
- } else {
- if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
- if (routes[i].secondaryNavbar) {
- return routes[i].secondaryNavbar;
- }
- }
- }
- }
- return activeNavbar;
- };
- const getRoutes = (routes) => {
- return routes.map((prop, key) => {
- if (prop.collapse) {
- return getRoutes(prop.views);
- }
- if (prop.category === 'account') {
- return getRoutes(prop.views);
- }
- if (prop.layout === '/rtl' || prop.layout === '/admin') {
- return ;
- } else {
- return null;
- }
- });
- };
- const { isOpen, onOpen, onClose } = useDisclosure();
- document.documentElement.dir = 'rtl';
- // Chakra Color Mode
- return (
-
-
-
-
-
-
-
- {getRoute() ? (
-
-
-
- {getRoutes(routes)}
-
-
-
-
- ) : null}
-
-
-
-
- {
- setFixed(value);
- }}
- onOpaque={() => setSidebarVariant('opaque')}
- onTransparent={() => setSidebarVariant('transparent')}
- />
-
-
-
- );
-}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 000000000..ee17e241f
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from '@/app'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/src/views/Dashboard/Billing/components/BillingInformation.js b/src/pages/Billing/components/BillingInformation.tsx
similarity index 79%
rename from src/views/Dashboard/Billing/components/BillingInformation.js
rename to src/pages/Billing/components/BillingInformation.tsx
index 3454a3565..683ac566c 100644
--- a/src/views/Dashboard/Billing/components/BillingInformation.js
+++ b/src/pages/Billing/components/BillingInformation.tsx
@@ -1,11 +1,10 @@
// Chakra imports
import { Flex, Text, useColorModeValue } from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
-import BillingRow from "components/Tables/BillingRow";
-import React from "react";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
+import CardHeader from "@/components/Card/CardHeader.js";
+import BillingRow from "@/components/Tables/BillingRow";
const BillingInformation = ({ title, data }) => {
const textColor = useColorModeValue("gray.700", "white");
diff --git a/src/views/Dashboard/Billing/components/CreditCard.js b/src/pages/Billing/components/CreditCard.tsx
similarity index 93%
rename from src/views/Dashboard/Billing/components/CreditCard.js
rename to src/pages/Billing/components/CreditCard.tsx
index d06608784..2f6e76fe0 100644
--- a/src/views/Dashboard/Billing/components/CreditCard.js
+++ b/src/pages/Billing/components/CreditCard.tsx
@@ -1,9 +1,8 @@
// Chakra imports
import { Box, Flex, Spacer, Text } from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import React from "react";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
const CreditCard = ({
backgroundImage,
diff --git a/src/views/Dashboard/Billing/components/Invoices.js b/src/pages/Billing/components/Invoices.tsx
similarity index 83%
rename from src/views/Dashboard/Billing/components/Invoices.js
rename to src/pages/Billing/components/Invoices.tsx
index e409c36b6..a7f1699ef 100644
--- a/src/views/Dashboard/Billing/components/Invoices.js
+++ b/src/pages/Billing/components/Invoices.tsx
@@ -1,11 +1,10 @@
// Chakra imports
import { Button, Flex, Text, useColorModeValue } from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
-import InvoicesRow from "components/Tables/InvoicesRow";
-import React from "react";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
+import CardHeader from "@/components/Card/CardHeader.js";
+import InvoicesRow from "@/components/Tables/InvoicesRow";
const Invoices = ({ title, data }) => {
const textColor = useColorModeValue("gray.700", "white");
diff --git a/src/views/Dashboard/Billing/components/PaymentMethod.js b/src/pages/Billing/components/PaymentMethod.tsx
similarity index 92%
rename from src/views/Dashboard/Billing/components/PaymentMethod.js
rename to src/pages/Billing/components/PaymentMethod.tsx
index 325c878fd..5026606bf 100644
--- a/src/views/Dashboard/Billing/components/PaymentMethod.js
+++ b/src/pages/Billing/components/PaymentMethod.tsx
@@ -8,11 +8,10 @@ import {
useColorModeValue,
} from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
-import IconBox from "components/Icons/IconBox";
-import React from "react";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
+import CardHeader from "@/components/Card/CardHeader.js";
+import IconBox from "@/components/Icon/svg/IconBox";
import { FaPencilAlt } from "react-icons/fa";
const PaymentMethod = ({ title, mastercard, visa }) => {
diff --git a/src/views/Dashboard/Billing/components/PaymentStatistics.js b/src/pages/Billing/components/PaymentStatistics.tsx
similarity index 84%
rename from src/views/Dashboard/Billing/components/PaymentStatistics.js
rename to src/pages/Billing/components/PaymentStatistics.tsx
index 68589cceb..ab10c1f38 100644
--- a/src/views/Dashboard/Billing/components/PaymentStatistics.js
+++ b/src/pages/Billing/components/PaymentStatistics.tsx
@@ -1,11 +1,10 @@
// Chakra imports
import { Flex, Text, useColorModeValue } from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import IconBox from "components/Icons/IconBox";
-import { Separator } from "components/Separator/Separator";
-import React from "react";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
+import IconBox from "@/components/Icon/svg/IconBox";
+import { Separator } from "@/components/Separator";
const PaymentStatistics = ({ icon, title, description, amount }) => {
const iconTeal = useColorModeValue("teal.300", "teal.300");
diff --git a/src/views/Dashboard/Billing/components/Transactions.js b/src/pages/Billing/components/Transactions.tsx
similarity index 90%
rename from src/views/Dashboard/Billing/components/Transactions.js
rename to src/pages/Billing/components/Transactions.tsx
index 907d23ec8..c824803fa 100644
--- a/src/views/Dashboard/Billing/components/Transactions.js
+++ b/src/pages/Billing/components/Transactions.tsx
@@ -1,11 +1,10 @@
// Chakra imports
import { Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
-import TransactionRow from "components/Tables/TransactionRow";
-import React from "react";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
+import CardHeader from "@/components/Card/CardHeader.js";
+import TransactionRow from "@/components/Tables/TransactionRow";
import { FaRegCalendarAlt } from "react-icons/fa";
const Transactions = ({
diff --git a/src/views/Dashboard/Billing/index.js b/src/pages/Billing/index.tsx
similarity index 81%
rename from src/views/Dashboard/Billing/index.js
rename to src/pages/Billing/index.tsx
index d12443be6..bef20e1ad 100644
--- a/src/views/Dashboard/Billing/index.js
+++ b/src/pages/Billing/index.tsx
@@ -1,9 +1,8 @@
// Chakra imports
import { Box, Flex, Grid, Icon } from "@chakra-ui/react";
// Assets
-import BackgroundCard1 from "assets/img/BackgroundCard1.png";
-import { MastercardIcon, VisaIcon } from "components/Icons/Icons";
-import React from "react";
+import BackgroundCard1 from "@/assets/img/BackgroundCard1.png";
+import { MastercardIcon, VisaIcon } from "@/components/Icon/svg";
import { FaPaypal, FaWallet } from "react-icons/fa";
import { RiMastercardFill } from "react-icons/ri";
import {
@@ -11,13 +10,13 @@ import {
invoicesData,
newestTransactions,
olderTransactions,
-} from "variables/general";
-import BillingInformation from "./components/BillingInformation";
-import CreditCard from "./components/CreditCard";
-import Invoices from "./components/Invoices";
-import PaymentMethod from "./components/PaymentMethod";
-import PaymentStatistics from "./components/PaymentStatistics";
-import Transactions from "./components/Transactions";
+} from "@/variables/general";
+import BillingInformation from "@/pages/Billing/components/BillingInformation";
+import CreditCard from "@/pages/Billing/components/CreditCard";
+import Invoices from "@/pages/Billing/components/Invoices";
+import PaymentMethod from "@/pages/Billing/components/PaymentMethod";
+import PaymentStatistics from "@/pages/Billing/components/PaymentStatistics";
+import Transactions from "@/pages/Billing/components/Transactions";
function Billing() {
return (
diff --git a/src/views/Dashboard/Profile/components/Conversations.js b/src/pages/Profile/components/Conversations.tsx
similarity index 92%
rename from src/views/Dashboard/Profile/components/Conversations.js
rename to src/pages/Profile/components/Conversations.tsx
index 6e56c1ba5..fb6dc7241 100644
--- a/src/views/Dashboard/Profile/components/Conversations.js
+++ b/src/pages/Profile/components/Conversations.tsx
@@ -7,15 +7,15 @@ import {
useColorModeValue,
} from "@chakra-ui/react";
// Assets
-import avatar2 from "assets/img/avatars/avatar2.png";
-import avatar3 from "assets/img/avatars/avatar3.png";
-import avatar4 from "assets/img/avatars/avatar4.png";
-import avatar5 from "assets/img/avatars/avatar5.png";
-import avatar6 from "assets/img/avatars/avatar6.png";
+import avatar2 from "@/assets/img/avatars/avatar2.png";
+import avatar3 from "@/assets/img/avatars/avatar3.png";
+import avatar4 from "@/assets/img/avatars/avatar4.png";
+import avatar5 from "@/assets/img/avatars/avatar5.png";
+import avatar6 from "@/assets/img/avatars/avatar6.png";
// Custom components
-import Card from "components/Card/Card";
-import CardBody from "components/Card/CardBody";
-import CardHeader from "components/Card/CardHeader";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody";
+import CardHeader from "@/components/Card/CardHeader";
import React from "react";
const Conversations = ({ title }) => {
diff --git a/src/views/Dashboard/Profile/components/Header.js b/src/pages/Profile/components/Header.tsx
similarity index 100%
rename from src/views/Dashboard/Profile/components/Header.js
rename to src/pages/Profile/components/Header.tsx
diff --git a/src/views/Dashboard/Profile/components/PlatformSettings.js b/src/pages/Profile/components/PlatformSettings.tsx
similarity index 94%
rename from src/views/Dashboard/Profile/components/PlatformSettings.js
rename to src/pages/Profile/components/PlatformSettings.tsx
index 93fe20f98..85a040272 100644
--- a/src/views/Dashboard/Profile/components/PlatformSettings.js
+++ b/src/pages/Profile/components/PlatformSettings.tsx
@@ -1,9 +1,9 @@
// Chakra imports
import { Flex, Switch, Text, useColorModeValue } from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card";
-import CardBody from "components/Card/CardBody";
-import CardHeader from "components/Card/CardHeader";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody";
+import CardHeader from "@/components/Card/CardHeader";
import React from "react";
const PlatformSettings = ({ title, subtitle1, subtitle2 }) => {
diff --git a/src/views/Dashboard/Profile/components/ProfileInformation.js b/src/pages/Profile/components/ProfileInformation.tsx
similarity index 95%
rename from src/views/Dashboard/Profile/components/ProfileInformation.js
rename to src/pages/Profile/components/ProfileInformation.tsx
index 929e1514f..654a4f9e3 100644
--- a/src/views/Dashboard/Profile/components/ProfileInformation.js
+++ b/src/pages/Profile/components/ProfileInformation.tsx
@@ -1,9 +1,9 @@
// Chakra imports
import { Flex, Icon, Link, Text, useColorModeValue } from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card";
-import CardBody from "components/Card/CardBody";
-import CardHeader from "components/Card/CardHeader";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody";
+import CardHeader from "@/components/Card/CardHeader";
import React from "react";
import { FaFacebook, FaInstagram, FaTwitter } from "react-icons/fa";
diff --git a/src/views/Dashboard/Profile/components/ProjectCard.js b/src/pages/Profile/components/ProjectCard.tsx
similarity index 100%
rename from src/views/Dashboard/Profile/components/ProjectCard.js
rename to src/pages/Profile/components/ProjectCard.tsx
diff --git a/src/views/Dashboard/Profile/components/Projects.js b/src/pages/Profile/components/Projects.tsx
similarity index 83%
rename from src/views/Dashboard/Profile/components/Projects.js
rename to src/pages/Profile/components/Projects.tsx
index bd06db5c2..7e5dfc545 100644
--- a/src/views/Dashboard/Profile/components/Projects.js
+++ b/src/pages/Profile/components/Projects.tsx
@@ -8,16 +8,16 @@ import {
useColorModeValue,
} from "@chakra-ui/react";
// Assets
-import avatar2 from "assets/img/avatars/avatar2.png";
-import avatar4 from "assets/img/avatars/avatar4.png";
-import avatar6 from "assets/img/avatars/avatar6.png";
-import imageArchitect1 from "assets/img/ImageArchitect1.png";
-import imageArchitect2 from "assets/img/ImageArchitect2.png";
-import imageArchitect3 from "assets/img/ImageArchitect3.png";
+import avatar2 from "@/assets/img/avatars/avatar2.png";
+import avatar4 from "@/assets/img/avatars/avatar4.png";
+import avatar6 from "@/assets/img/avatars/avatar6.png";
+import imageArchitect1 from "@/assets/img/ImageArchitect1.png";
+import imageArchitect2 from "@/assets/img/ImageArchitect2.png";
+import imageArchitect3 from "@/assets/img/ImageArchitect3.png";
// Custom components
-import Card from "components/Card/Card";
-import CardBody from "components/Card/CardBody";
-import CardHeader from "components/Card/CardHeader";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody";
+import CardHeader from "@/components/Card/CardHeader";
import React from "react";
import { FaPlus } from "react-icons/fa";
import ProjectCard from "./ProjectCard";
diff --git a/src/views/Dashboard/Profile/index.js b/src/pages/Profile/index.tsx
similarity index 93%
rename from src/views/Dashboard/Profile/index.js
rename to src/pages/Profile/index.tsx
index 78babc7ee..142edfb9e 100644
--- a/src/views/Dashboard/Profile/index.js
+++ b/src/pages/Profile/index.tsx
@@ -1,8 +1,7 @@
// Chakra imports
import { Flex, Grid, useColorModeValue } from "@chakra-ui/react";
-import avatar4 from "assets/img/avatars/avatar4.png";
-import ProfileBgImage from "assets/img/ProfileBackground.png";
-import React from "react";
+import avatar4 from "@/assets/img/avatars/avatar4.png";
+import ProfileBgImage from "@/assets/img/ProfileBackground.png";
import { FaCube, FaPenFancy } from "react-icons/fa";
import { IoDocumentsSharp } from "react-icons/io5";
import Conversations from "./components/Conversations";
diff --git a/src/views/Auth/SignIn.js b/src/pages/SignIn/index.tsx
similarity index 97%
rename from src/views/Auth/SignIn.js
rename to src/pages/SignIn/index.tsx
index 0b67b361e..399ba60b4 100644
--- a/src/views/Auth/SignIn.js
+++ b/src/pages/SignIn/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
// Chakra imports
import {
Box,
@@ -14,7 +13,7 @@ import {
useColorModeValue,
} from "@chakra-ui/react";
// Assets
-import signInImage from "assets/img/signInImage.png";
+import signInImage from "@/assets/img/signInImage.png";
function SignIn() {
// Chakra color mode
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
new file mode 100644
index 000000000..40b2c7c12
--- /dev/null
+++ b/src/pages/SignUp/index.tsx
@@ -0,0 +1,238 @@
+// Chakra imports
+import {
+ Box,
+ Button,
+ Flex,
+ FormControl,
+ FormLabel,
+ HStack,
+ Icon,
+ Input,
+ Link,
+ Switch,
+ Text,
+ useColorModeValue,
+ } from "@chakra-ui/react";
+ // Assets
+ import BgSignUp from "@/assets/img/BgSignUp.png";
+ import { FaApple, FaFacebook, FaGoogle } from "react-icons/fa";
+
+ function SignUp() {
+ const titleColor = useColorModeValue("teal.300", "teal.200");
+ const textColor = useColorModeValue("gray.700", "white");
+ const bgColor = useColorModeValue("white", "gray.700");
+ const bgIcons = useColorModeValue("teal.200", "rgba(255, 255, 255, 0.5)");
+ return (
+
+
+
+
+ Welcome!
+
+
+ Use these awesome forms to login or create new account in your project
+ for free.
+
+
+
+
+
+ Register With
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ or
+
+
+
+ Name
+
+
+
+ Email
+
+
+
+ Password
+
+
+
+
+
+ Remember me
+
+
+
+
+
+
+ Already have an account?
+
+ Sign In
+
+
+
+
+
+
+ );
+ }
+
+ export default SignUp;
+
\ No newline at end of file
diff --git a/src/views/Dashboard/Tables/components/Authors.js b/src/pages/Tables/components/Authors.tsx
similarity index 85%
rename from src/views/Dashboard/Tables/components/Authors.js
rename to src/pages/Tables/components/Authors.tsx
index 5dd073d85..ccce6ba5c 100644
--- a/src/views/Dashboard/Tables/components/Authors.js
+++ b/src/pages/Tables/components/Authors.tsx
@@ -9,11 +9,10 @@ import {
useColorModeValue,
} from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
-import TablesTableRow from "components/Tables/TablesTableRow";
-import React from "react";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
+import CardHeader from "@/components/Card/CardHeader.js";
+import TablesTableRow from "@/components/Tables/TablesTableRow";
const Authors = ({ title, captions, data }) => {
const textColor = useColorModeValue("gray.700", "white");
diff --git a/src/views/Dashboard/Tables/components/Projects.js b/src/pages/Tables/components/Projects.tsx
similarity index 85%
rename from src/views/Dashboard/Tables/components/Projects.js
rename to src/pages/Tables/components/Projects.tsx
index 00a7e1ab2..6eb50e29e 100644
--- a/src/views/Dashboard/Tables/components/Projects.js
+++ b/src/pages/Tables/components/Projects.tsx
@@ -10,11 +10,10 @@ import {
useColorModeValue,
} from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
-import TablesProjectRow from "components/Tables/TablesProjectRow";
-import React from "react";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
+import CardHeader from "@/components/Card/CardHeader.js";
+import TablesProjectRow from "@/components/Tables/TablesProjectRow";
const Projects = ({ title, captions, data }) => {
const textColor = useColorModeValue("gray.700", "white");
diff --git a/src/views/Dashboard/Tables/index.js b/src/pages/Tables/index.tsx
similarity index 85%
rename from src/views/Dashboard/Tables/index.js
rename to src/pages/Tables/index.tsx
index a686c6254..aca567967 100644
--- a/src/views/Dashboard/Tables/index.js
+++ b/src/pages/Tables/index.tsx
@@ -1,9 +1,8 @@
// Chakra imports
import { Flex } from "@chakra-ui/react";
-import React from "react";
import Authors from "./components/Authors";
import Projects from "./components/Projects";
-import { tablesTableData, dashboardTableData } from "variables/general";
+import { tablesTableData, dashboardTableData } from "@/variables/general";
function Tables() {
return (
diff --git a/src/views/Dashboard/Dashboard/components/ActiveUsers.js b/src/pages/dashboard/components/ActiveUsers.tsx
similarity index 93%
rename from src/views/Dashboard/Dashboard/components/ActiveUsers.js
rename to src/pages/dashboard/components/ActiveUsers.tsx
index fa62a357e..45867874c 100644
--- a/src/views/Dashboard/Dashboard/components/ActiveUsers.js
+++ b/src/pages/dashboard/components/ActiveUsers.tsx
@@ -1,16 +1,15 @@
// Chakra imports
import { Flex, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
// Custom icons
import {
CartIcon,
RocketIcon,
StatsIcon,
WalletIcon,
-} from "components/Icons/Icons.js";
-import React from "react";
+} from "@/components/Icon/svg";
import ChartStatistics from "./ChartStatistics";
const ActiveUsers = ({ title, percentage, chart }) => {
diff --git a/src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js b/src/pages/dashboard/components/BuiltByDevelopers.tsx
similarity index 94%
rename from src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js
rename to src/pages/dashboard/components/BuiltByDevelopers.tsx
index 0fa09c97c..7e9c2cf44 100644
--- a/src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js
+++ b/src/pages/dashboard/components/BuiltByDevelopers.tsx
@@ -8,9 +8,8 @@ import {
useColorModeValue,
} from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import React from "react";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
// react icons
import { BsArrowRight } from "react-icons/bs";
diff --git a/src/views/Dashboard/Dashboard/components/ChartStatistics.js b/src/pages/dashboard/components/ChartStatistics.tsx
similarity index 94%
rename from src/views/Dashboard/Dashboard/components/ChartStatistics.js
rename to src/pages/dashboard/components/ChartStatistics.tsx
index b6d09eb4c..5874f0439 100644
--- a/src/views/Dashboard/Dashboard/components/ChartStatistics.js
+++ b/src/pages/dashboard/components/ChartStatistics.tsx
@@ -1,5 +1,5 @@
import { Flex, Progress, Text, useColorModeValue } from "@chakra-ui/react";
-import IconBox from "components/Icons/IconBox";
+import IconBox from "@/components/Icon/svg/IconBox";
import React from "react";
const ChartStatistics = ({ title, amount, icon, percentage }) => {
diff --git a/src/views/Dashboard/Dashboard/components/MiniStatistics.js b/src/pages/dashboard/components/MiniStatistics.tsx
similarity index 89%
rename from src/views/Dashboard/Dashboard/components/MiniStatistics.js
rename to src/pages/dashboard/components/MiniStatistics.tsx
index feea6ae5e..c95d63952 100644
--- a/src/views/Dashboard/Dashboard/components/MiniStatistics.js
+++ b/src/pages/dashboard/components/MiniStatistics.tsx
@@ -8,10 +8,9 @@ import {
useColorModeValue,
} from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import IconBox from "components/Icons/IconBox";
-import React from "react";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
+import IconBox from "@/components/Icon/svg/IconBox";
const MiniStatistics = ({ title, amount, percentage, icon }) => {
const iconTeal = useColorModeValue("teal.300", "teal.300");
diff --git a/src/views/Dashboard/Dashboard/components/OrdersOverview.js b/src/pages/dashboard/components/OrdersOverview.tsx
similarity index 84%
rename from src/views/Dashboard/Dashboard/components/OrdersOverview.js
rename to src/pages/dashboard/components/OrdersOverview.tsx
index 9cbfd9865..c7c5460a4 100644
--- a/src/views/Dashboard/Dashboard/components/OrdersOverview.js
+++ b/src/pages/dashboard/components/OrdersOverview.tsx
@@ -1,11 +1,10 @@
// Chakra imports
import { Flex, Text, useColorModeValue } from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
-import TimelineRow from "components/Tables/TimelineRow";
-import React from "react";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
+import CardHeader from "@/components/Card/CardHeader.js";
+import TimelineRow from "@/components/Tables/TimelineRow";
const OrdersOverview = ({ title, amount, data }) => {
const textColor = useColorModeValue("gray.700", "white");
diff --git a/src/views/Dashboard/Dashboard/components/Projects.js b/src/pages/dashboard/components/Projects.tsx
similarity index 91%
rename from src/views/Dashboard/Dashboard/components/Projects.js
rename to src/pages/dashboard/components/Projects.tsx
index e55464b9b..d60a872cc 100644
--- a/src/views/Dashboard/Dashboard/components/Projects.js
+++ b/src/pages/dashboard/components/Projects.tsx
@@ -11,9 +11,9 @@ import {
useColorModeValue,
} from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardHeader from "components/Card/CardHeader.js";
-import DashboardTableRow from "components/Tables/DashboardTableRow";
+import Card from "@/components/Card";
+import CardHeader from "@/components/Card/CardHeader.js";
+import DashboardTableRow from "@/components/Tables/DashboardTableRow";
import React from "react";
import { IoCheckmarkDoneCircleSharp } from "react-icons/io5";
diff --git a/src/views/Dashboard/Dashboard/components/SalesOverview.js b/src/pages/dashboard/components/SalesOverview.tsx
similarity index 88%
rename from src/views/Dashboard/Dashboard/components/SalesOverview.js
rename to src/pages/dashboard/components/SalesOverview.tsx
index ca91f5caa..c87758e3a 100644
--- a/src/views/Dashboard/Dashboard/components/SalesOverview.js
+++ b/src/pages/dashboard/components/SalesOverview.tsx
@@ -1,9 +1,8 @@
// Chakra imports
import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardHeader from "components/Card/CardHeader.js";
-import React from "react";
+import Card from "@/components/Card";
+import CardHeader from "@/components/Card/CardHeader.js";
const SalesOverview = ({ title, percentage, chart }) => {
const textColor = useColorModeValue("gray.700", "white");
diff --git a/src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js b/src/pages/dashboard/components/WorkWithTheRockets.tsx
similarity index 95%
rename from src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js
rename to src/pages/dashboard/components/WorkWithTheRockets.tsx
index 0569d4f6d..a3c1f0260 100644
--- a/src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js
+++ b/src/pages/dashboard/components/WorkWithTheRockets.tsx
@@ -9,8 +9,8 @@ import {
Text,
} from "@chakra-ui/react";
// Custom components
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
+import Card from "@/components/Card";
+import CardBody from "@/components/Card/CardBody.js";
import React from "react";
// react icons
import { BsArrowRight } from "react-icons/bs";
diff --git a/src/views/Dashboard/Dashboard/index.js b/src/pages/dashboard/index.tsx
similarity index 90%
rename from src/views/Dashboard/Dashboard/index.js
rename to src/pages/dashboard/index.tsx
index 08aa83057..3bf71710e 100644
--- a/src/views/Dashboard/Dashboard/index.js
+++ b/src/pages/dashboard/index.tsx
@@ -7,19 +7,18 @@ import {
useColorModeValue,
} from "@chakra-ui/react";
// assets
-import peopleImage from "assets/img/people-image.png";
-import logoChakra from "assets/svg/logo-white.svg";
-import BarChart from "components/Charts/BarChart";
-import LineChart from "components/Charts/LineChart";
+import peopleImage from "@/assets/img/people-image.png";
+import logoChakra from "@/assets/svg/logo-white.svg";
+import BarChart from "@/components/Charts/BarChart";
+import LineChart from "@/components/Charts/LineChart";
// Custom icons
import {
CartIcon,
DocumentIcon,
GlobeIcon,
WalletIcon,
-} from "components/Icons/Icons.js";
-import React from "react";
-import { dashboardTableData, timelineData } from "variables/general";
+} from "@/components/Icon/svg";
+import { dashboardTableData, timelineData } from "@/variables/general";
import ActiveUsers from "./components/ActiveUsers";
import BuiltByDevelopers from "./components/BuiltByDevelopers";
import MiniStatistics from "./components/MiniStatistics";
@@ -28,7 +27,7 @@ import Projects from "./components/Projects";
import SalesOverview from "./components/SalesOverview";
import WorkWithTheRockets from "./components/WorkWithTheRockets";
-export default function Dashboard() {
+function Dashboard() {
const iconBoxInside = useColorModeValue("white", "white");
return (
@@ -121,3 +120,4 @@ export default function Dashboard() {
);
}
+export default Dashboard
\ No newline at end of file
diff --git a/src/routes.js b/src/routes.js
deleted file mode 100644
index ce9a49159..000000000
--- a/src/routes.js
+++ /dev/null
@@ -1,88 +0,0 @@
-// import
-import Dashboard from "views/Dashboard/Dashboard";
-import Tables from "views/Dashboard/Tables";
-import Billing from "views/Dashboard/Billing";
-import RTLPage from "views/Dashboard/RTL";
-import Profile from "views/Dashboard/Profile";
-import SignIn from "views/Auth/SignIn.js";
-import SignUp from "views/Auth/SignUp.js";
-
-import {
- HomeIcon,
- StatsIcon,
- CreditIcon,
- PersonIcon,
- DocumentIcon,
- RocketIcon,
- SupportIcon,
-} from "components/Icons/Icons";
-
-var dashRoutes = [
- {
- path: "/dashboard",
- name: "Dashboard",
- rtlName: "لوحة القيادة",
- icon: ,
- component: Dashboard,
- layout: "/admin",
- },
- {
- path: "/tables",
- name: "Tables",
- rtlName: "لوحة القيادة",
- icon: ,
- component: Tables,
- layout: "/admin",
- },
- {
- path: "/billing",
- name: "Billing",
- rtlName: "لوحة القيادة",
- icon: ,
- component: Billing,
- layout: "/admin",
- },
- {
- path: "/rtl-support-page",
- name: "RTL",
- rtlName: "آرتيإل",
- icon: ,
- component: RTLPage,
- layout: "/rtl",
- },
- {
- name: "ACCOUNT PAGES",
- category: "account",
- rtlName: "صفحات",
- state: "pageCollapse",
- views: [
- {
- path: "/profile",
- name: "Profile",
- rtlName: "لوحة القيادة",
- icon: ,
- secondaryNavbar: true,
- component: Profile,
- layout: "/admin",
- },
- {
- path: "/signin",
- name: "Sign In",
- rtlName: "لوحة القيادة",
- icon: ,
- component: SignIn,
- layout: "/auth",
- },
- {
- path: "/signup",
- name: "Sign Up",
- rtlName: "لوحة القيادة",
- icon: ,
- secondaryNavbar: true,
- component: SignUp,
- layout: "/auth",
- },
- ],
- },
-];
-export default dashRoutes;
diff --git a/src/routes/ProtectedRoute.tsx b/src/routes/ProtectedRoute.tsx
new file mode 100644
index 000000000..0977fb5bd
--- /dev/null
+++ b/src/routes/ProtectedRoute.tsx
@@ -0,0 +1,24 @@
+// import React, { useEffect } from "react";
+// import { Navigate, useNavigate } from "react-router-dom";
+// import useToken from "@/hooks/useToken";
+
+interface ProtectedRouteProps {
+ component: React.ComponentType;
+ [key: string]: any;
+}
+
+const ProtectedRoute: React.FC = ({ component: Component, ...rest }) => {
+ // const { token } = useToken();
+ // const navigate = useNavigate();
+
+ // useEffect(() => {
+ // if (!token) {
+ // navigate("/login");
+ // }
+ // }, [token, navigate]);
+
+ // return token ? : ;
+ return ;
+};
+
+export default ProtectedRoute;
diff --git a/src/routes/config.tsx b/src/routes/config.tsx
new file mode 100644
index 000000000..0db308349
--- /dev/null
+++ b/src/routes/config.tsx
@@ -0,0 +1,65 @@
+// import
+import Dashboard from "@/pages/Dashboard";
+import Tables from "@/pages/Tables";
+import Billing from "@/pages/Billing";
+import Profile from "@/pages/Profile";
+import SignIn from "@/pages/SignIn";
+import SignUp from "@/pages/SignUp";
+
+import {
+ HomeIcon,
+ StatsIcon,
+ CreditIcon,
+ PersonIcon,
+ DocumentIcon,
+ RocketIcon,
+} from "@/components/Icon/svg";
+
+var dashRoutes = [
+ {
+ path: "/",
+ name: "Dashboard",
+ icon: ,
+ component: Dashboard,
+ },
+ {
+ path: "/tables",
+ name: "Tables",
+ icon: ,
+ component: Tables,
+ },
+ {
+ path: "/billing",
+ name: "Billing",
+ icon: ,
+ component: Billing,
+ },
+ {
+ name: "ACCOUNT PAGES",
+ category: "account",
+ state: "pageCollapse",
+ views: [
+ {
+ path: "/profile",
+ name: "Profile",
+ icon: ,
+ secondaryNavbar: true,
+ component: Profile,
+ },
+ {
+ path: "/sign-in",
+ name: "Sign In",
+ icon: ,
+ component: SignIn,
+ },
+ {
+ path: "/signup",
+ name: "Sign Up",
+ icon: ,
+ secondaryNavbar: true,
+ component: SignUp,
+ },
+ ],
+ },
+];
+export default dashRoutes;
\ No newline at end of file
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
new file mode 100644
index 000000000..361a50988
--- /dev/null
+++ b/src/routes/index.tsx
@@ -0,0 +1,53 @@
+// react import
+import React from "react"
+import { BrowserRouter, Route, Routes } from "react-router-dom"
+// components import
+// import Loadable from "@/components/loadable"
+// routes import
+import ProtectedRoute from "./ProtectedRoute"
+// error pages import
+// import Error404 from "@/pages/ErrorPages/Error404"
+// layout import
+import SignIn from "@/pages/SignIn"
+import Loadable from "@/components/loadable"
+import AuthLayout from "@/layout/authLayout"
+import AppLayout from "@/layout/appLayout"
+// pages with lazy imports
+const DashboardCrm = Loadable(React.lazy(() => import("@/pages/dashboard")))
+
+const protectedRoutes = [{ path: "/", component: DashboardCrm }]
+
+const AppRoutes = () => {
+ return (
+
+
+
+
+
+ }
+ />
+ {/* Protected Routes */}
+
+ {protectedRoutes.map(({ path, component: Component }) => (
+
+
+
+ }
+ />
+ ))}
+
+ {/* Error Routes */}
+ {/* } /> */}
+
+
+ )
+}
+
+export default AppRoutes
diff --git a/src/theme/additions/card/Card.js b/src/themes/additions/card/Card.js
similarity index 100%
rename from src/theme/additions/card/Card.js
rename to src/themes/additions/card/Card.js
diff --git a/src/theme/additions/card/CardBody.js b/src/themes/additions/card/CardBody.js
similarity index 100%
rename from src/theme/additions/card/CardBody.js
rename to src/themes/additions/card/CardBody.js
diff --git a/src/theme/additions/card/CardHeader.js b/src/themes/additions/card/CardHeader.js
similarity index 100%
rename from src/theme/additions/card/CardHeader.js
rename to src/themes/additions/card/CardHeader.js
diff --git a/src/theme/additions/layout/MainPanel.js b/src/themes/additions/layout/MainPanel.js
similarity index 100%
rename from src/theme/additions/layout/MainPanel.js
rename to src/themes/additions/layout/MainPanel.js
diff --git a/src/theme/additions/layout/PanelContainer.js b/src/themes/additions/layout/PanelContainer.js
similarity index 100%
rename from src/theme/additions/layout/PanelContainer.js
rename to src/themes/additions/layout/PanelContainer.js
diff --git a/src/theme/additions/layout/PanelContent.js b/src/themes/additions/layout/PanelContent.js
similarity index 100%
rename from src/theme/additions/layout/PanelContent.js
rename to src/themes/additions/layout/PanelContent.js
diff --git a/src/theme/components/badge.js b/src/themes/components/badge.tsx
similarity index 100%
rename from src/theme/components/badge.js
rename to src/themes/components/badge.tsx
diff --git a/src/theme/components/button.js b/src/themes/components/button.tsx
similarity index 100%
rename from src/theme/components/button.js
rename to src/themes/components/button.tsx
diff --git a/src/theme/components/drawer.js b/src/themes/components/drawer.tsx
similarity index 100%
rename from src/theme/components/drawer.js
rename to src/themes/components/drawer.tsx
diff --git a/src/theme/components/link.js b/src/themes/components/link.tsx
similarity index 100%
rename from src/theme/components/link.js
rename to src/themes/components/link.tsx
diff --git a/src/theme/foundations/breakpoints.js b/src/themes/foundations/breakpoints.js
similarity index 100%
rename from src/theme/foundations/breakpoints.js
rename to src/themes/foundations/breakpoints.js
diff --git a/src/theme/foundations/text.js b/src/themes/foundations/text.js
similarity index 100%
rename from src/theme/foundations/text.js
rename to src/themes/foundations/text.js
diff --git a/src/theme/theme.js b/src/themes/index.tsx
similarity index 95%
rename from src/theme/theme.js
rename to src/themes/index.tsx
index 446f13b25..f846e0a92 100644
--- a/src/theme/theme.js
+++ b/src/themes/index.tsx
@@ -2,7 +2,7 @@ import { extendTheme } from '@chakra-ui/react';
import { globalStyles } from './styles';
import { breakpoints } from './foundations/breakpoints';
import { buttonStyles } from './components/button';
-import { badgeStyles } from './components/badge';
+import { badgeStyles } from './components/badge.tsx';
import { linkStyles } from './components/link';
import { drawerStyles } from './components/drawer';
import { CardComponent } from './additions/card/Card';
@@ -25,4 +25,4 @@ export default extendTheme(
MainPanelComponent, // Main Panel component
PanelContentComponent, // Panel Content component
PanelContainerComponent // Panel Container component
-);
+);
\ No newline at end of file
diff --git a/src/theme/styles.js b/src/themes/styles.ts
similarity index 100%
rename from src/theme/styles.js
rename to src/themes/styles.ts
diff --git a/src/variables/charts.js b/src/variables/charts.tsx
similarity index 100%
rename from src/variables/charts.js
rename to src/variables/charts.tsx
diff --git a/src/variables/general.js b/src/variables/general.tsx
similarity index 93%
rename from src/variables/general.js
rename to src/variables/general.tsx
index f9aaf0ff6..e8cc28e08 100644
--- a/src/variables/general.js
+++ b/src/variables/general.tsx
@@ -1,13 +1,13 @@
// Assets
-import avatar1 from "assets/img/avatars/avatar1.png";
-import avatar2 from "assets/img/avatars/avatar2.png";
-import avatar3 from "assets/img/avatars/avatar3.png";
-import avatar4 from "assets/img/avatars/avatar4.png";
-import avatar5 from "assets/img/avatars/avatar5.png";
-import avatar7 from "assets/img/avatars/avatar7.png";
-import avatar8 from "assets/img/avatars/avatar8.png";
-import avatar9 from "assets/img/avatars/avatar9.png";
-import avatar10 from "assets/img/avatars/avatar10.png";
+import avatar1 from "@/assets/img/avatars/avatar1.png";
+import avatar2 from "@/assets/img/avatars/avatar2.png";
+import avatar3 from "@/assets/img/avatars/avatar3.png";
+import avatar4 from "@/assets/img/avatars/avatar4.png";
+import avatar5 from "@/assets/img/avatars/avatar5.png";
+import avatar7 from "@/assets/img/avatars/avatar7.png";
+import avatar8 from "@/assets/img/avatars/avatar8.png";
+import avatar9 from "@/assets/img/avatars/avatar9.png";
+import avatar10 from "@/assets/img/avatars/avatar10.png";
// Custom icons
import {
AdobexdLogo,
@@ -16,7 +16,7 @@ import {
JiraLogo,
SlackLogo,
SpotifyLogo,
-} from "components/Icons/Icons.js";
+} from "@/components/Icon/svg";
import { AiOutlineExclamation } from "react-icons/ai";
import {
FaArrowDown,
diff --git a/src/views/Auth/SignUp.js b/src/views/Auth/SignUp.js
deleted file mode 100644
index beb60cc12..000000000
--- a/src/views/Auth/SignUp.js
+++ /dev/null
@@ -1,238 +0,0 @@
-// Chakra imports
-import {
- Box,
- Button,
- Flex,
- FormControl,
- FormLabel,
- HStack,
- Icon,
- Input,
- Link,
- Switch,
- Text,
- useColorModeValue,
-} from "@chakra-ui/react";
-// Assets
-import BgSignUp from "assets/img/BgSignUp.png";
-import React from "react";
-import { FaApple, FaFacebook, FaGoogle } from "react-icons/fa";
-
-function SignUp() {
- const titleColor = useColorModeValue("teal.300", "teal.200");
- const textColor = useColorModeValue("gray.700", "white");
- const bgColor = useColorModeValue("white", "gray.700");
- const bgIcons = useColorModeValue("teal.200", "rgba(255, 255, 255, 0.5)");
- return (
-
-
-
-
- Welcome!
-
-
- Use these awesome forms to login or create new account in your project
- for free.
-
-
-
-
-
- Register With
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- or
-
-
-
- Name
-
-
-
- Email
-
-
-
- Password
-
-
-
-
-
- Remember me
-
-
-
-
-
-
- Already have an account?
-
- Sign In
-
-
-
-
-
-
- );
-}
-
-export default SignUp;
diff --git a/src/views/Dashboard/RTL/index.js b/src/views/Dashboard/RTL/index.js
deleted file mode 100644
index 27d91501f..000000000
--- a/src/views/Dashboard/RTL/index.js
+++ /dev/null
@@ -1,125 +0,0 @@
-// Chakra imports
-import {
- Flex,
- Grid,
- Image,
- SimpleGrid,
- useColorModeValue,
-} from "@chakra-ui/react";
-// assets
-import peopleImage from "assets/img/people-image.png";
-import logoChakra from "assets/svg/logo-white.svg";
-import BarChart from "components/Charts/BarChart";
-import LineChart from "components/Charts/LineChart";
-// Custom icons
-import {
- CartIcon,
- DocumentIcon,
- GlobeIcon,
- WalletIcon,
-} from "components/Icons/Icons.js";
-import React from "react";
-import { rtlDashboardTableData, rtlTimelineData } from "variables/general";
-import ActiveUsers from "../Dashboard/components/ActiveUsers";
-import BuiltByDevelopers from "../Dashboard/components/BuiltByDevelopers";
-import MiniStatistics from "../Dashboard/components/MiniStatistics";
-import OrdersOverview from "../Dashboard/components/OrdersOverview";
-import Projects from "../Dashboard/components/Projects";
-import SalesOverview from "../Dashboard/components/SalesOverview";
-import WorkWithTheRockets from "../Dashboard/components/WorkWithTheRockets";
-
-export default function Dashboard() {
- // Chakra Color Mode
-
- const iconBoxInside = useColorModeValue("white", "white");
-
- return (
-
-
- }
- />
- }
- />
- }
- />
- }
- />
-
-
-
- }
- />
-
-
-
- }
- />
- }
- />
-
-
-
-
-
-
- );
-}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..87195f140
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,62 @@
+// {
+// "compilerOptions": {
+// "target": "ES2020",
+// "useDefineForClassFields": true,
+// "lib": ["ES2020", "DOM", "DOM.Iterable"],
+// "module": "ESNext",
+// "skipLibCheck": true,
+
+// /* Bundler mode */
+// "moduleResolution": "node",
+// // "allowImportingTsExtensions": true,
+// "resolveJsonModule": true,
+// "isolatedModules": true,
+// "noEmit": true,
+// "jsx": "react-jsx",
+
+// /* Linting */
+// "strict": true,
+// "noUnusedLocals": true,
+// "noUnusedParameters": true,
+// "noFallthroughCasesInSwitch": true
+// },
+// "baseUrl": "./src",
+// "paths": {
+// "@/*": ["*"]
+// },
+// "references": [{
+// "path": "./tsconfig.node.json"
+// }]
+// }
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "node",
+ // "allowImportingTsExtensions": true,
+ "allowSyntheticDefaultImports": true, //noaniq
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"],
+ },
+ /* Linting */
+ "types": ["node", "react"],
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src/**/*"],
+ "references": [{
+ "path": "./tsconfig.node.json"
+ }]
+}
\ No newline at end of file
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 000000000..cfa1ab5b9
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "node",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 000000000..d254d075b
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,13 @@
+// vite.config.js
+import { defineConfig } from 'vite'
+import path from 'path'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src/"),
+ },
+ }
+})
\ No newline at end of file
](https://www.creative-tim.com/product/purity-ui-dashboard?ref=readme-pud)[
](https://www.creative-tim.com/product/purity-ui-dashboard?ref=readme-pud)
-
-| React | Figma |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [](https://www.creative-tim.com/product/purity-ui-dashboard?ref=readme-pud) | [](https://www.creative-tim.com/product/purity-ui-dashboard?ref=readme-pud) |
-
-## Demo
-
-- [Dashboard](https://demos.creative-tim.com/purity-ui-dashboard/#/admin/dashboard?ref=readme-pud)
-- [Tables page](https://demos.creative-tim.com/purity-ui-dashboard/#/admin/tables?ref=readme-pud)
-- [Billing page](https://demos.creative-tim.com/purity-ui-dashboard/#/admin/billing?ref=readme-pud)
-- [Profile page](http://demos.creative-tim.com/purity-ui-dashboard/#/admin/profile?ref=readme-pud)
-- [Sign in page](https://demos.creative-tim.com/purity-ui-dashboard/#/auth/signin?ref=readme-pud)
-- [Sign up page](https://demos.creative-tim.com/purity-ui-dashboard/#/auth/signup?ref=readme-pud)
-
-[View More](https://demos.creative-tim.com/purity-ui-dashboard/#/admin/dashboard?ref=readme-pud).
-
-## Quick Start
-
-- Clone the repo: `git clone https://github.com/creativetimofficial/purity-ui-dashboard.git`.
-- `cd purity-ui-dashboard`
-- `npm install`
-- `npm start`
-- [Download from Github](https://github.com/creativetimofficial/purity-ui-dashboard/archive/main.zip).
-- [Download from Creative Tim](https://www.creative-tim.com/product/purity-ui-dashboard).
-
-## File Structure
-
-Within the download you'll find the following directories and files:
-
-```
-purity-ui-dashboard/
-├── .gitattributes
-├── .gitigonore
-├── CHANGELOG.md
-├── commit.sh
-├── gulpfile.js
-├── ISSUE_TEMPLATE.md
-├── jsconfig.json
-├── package-lock.json
-├── package.json
-├── README.md
-├── documentation
-├── node_modules
-├── public
-│ ├── favicon.ico
-│ ├── index.html
-│ └── manifest.json
-└── src
- ├── assets
- │ ├── img
- │ └── svg
- ├── components
- │ ├── Card
- │ │ ├── Card.js
- │ │ ├── CardBody.js
- │ │ └── CardHeader.js
- │ ├── Charts
- │ │ ├── BarChart.js
- │ │ └── LineChart.js
- │ ├── Configurator
- │ │ └── Configurator.js
- │ ├── FixedPlugin
- │ │ └── FixedPlugin.js
- │ ├── Footer
- │ │ └── Footer.js
- │ ├── Icons
- │ │ ├── IconBox.js
- │ │ └── Icons.js
- │ ├── Layout
- │ │ ├── MainPanel.js
- │ │ ├── PanelContainer.js
- │ │ └── PanelContent.js
- │ ├── Menu
- │ │ └── ItemContent.js
- │ ├── Navbars
- │ │ ├── Searchbar
- │ │ │ └── SearchBar.js
- │ │ ├── AdminNavbar.js
- │ │ ├── AdminNavbarLinks.js
- │ │ └── AuthNavbar.js
- │ ├── Other
- │ │ ├── BillingRow.js
- │ │ ├── InvoicesRow.js
- │ │ └── TransactionRow.js
- │ ├── Separator
- │ │ └── Separator.js
- │ ├── Sidebar
- │ │ ├── Sidebar.js
- │ │ └── SidebarHelp.js
- │ └── Tables
- │ ├── BillingRow.js
- │ ├── DashboardTableRow.js
- │ ├── InvoicesRow.js
- │ ├── TablesProjectRow.js
- │ ├── TablesTableRow.js
- │ ├── TimelineRow.js
- │ └── TransactionRow.js
- ├── layouts
- │ ├── Admin.js
- │ ├── Auth.js
- │ └── RTL.js
- ├── theme
- │ ├── additions
- │ │ ├── card
- │ │ │ ├── Card.js
- │ │ │ ├── CardBody.js
- │ │ │ └── CardHeader.js
- │ │ ├── layout
- │ │ │ ├── MainPanel.js
- │ │ │ ├── PanelContainer.js
- │ │ │ └── PanelContent.js
- │ ├── components
- │ │ ├── button.js
- │ │ ├── link.js
- │ │ └── drawer.js
- │ ├── foundations
- │ │ ├── breakpoints.js
- │ │ └── text.js
- │ ├── styles.js
- │ └── theme.js
- ├── variables
- │ ├── charts.js
- │ └── general.js
- ├── views
- │ ├── Dashboard
- │ │ ├── Billing.js
- │ │ ├── Dashboard.js
- │ │ ├── Profile.js
- │ │ └── Tables.js
- │ ├── Pages
- │ ├── SignIn.js
- │ └── SignUp.js
- │ └── RTL
- │ └── RTLPage.js
- ├── index.js
- └── routes.js
+- Configure the top-level `parserOptions` property like this:
+```js
+export default {
+ // other rules...
+ parserOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ project: ['./tsconfig.json', './tsconfig.node.json'],
+ tsconfigRootDir: __dirname,
+ },
+}
```
-## Browser Support
-
-At present, we officially aim to support the last two versions of the following browsers:
-
-
-
-## Resources
-
-- Demo: