first

src/layouts/AuthCardLayout.tsx

@@ -0,0 +1,128 @@
+import { UilCheckCircle } from '@iconscout/react-unicons';
+import Unicon from 'components/base/Unicon';
+import { Card, Col, Container, Row } from 'react-bootstrap';
+import bg37 from 'assets/img/bg/37.png';
+import bg38 from 'assets/img/bg/38.png';
+import authIllustrations from 'assets/img/spot-illustrations/auth.png';
+import authIllustrationsDark from 'assets/img/spot-illustrations/auth-dark.png';
+import { PropsWithChildren } from 'react';
+import { Link } from 'react-router-dom';
+import Logo from 'components/common/Logo';
+import classNames from 'classnames';
+
+interface AuthCardLayoutProps {
+  logo?: boolean;
+  className?: string;
+}
+
+const AuthCardLayout = ({
+  logo = true,
+  className,
+  children
+}: PropsWithChildren<AuthCardLayoutProps>) => {
+  return (
+    <Container fluid className="bg-body-tertiary dark__bg-gray-1200">
+      <div
+        className="bg-holder bg-auth-card-overlay"
+        style={{ backgroundImage: `url(${bg37})` }}
+      />
+
+      <Row className="flex-center position-relative min-vh-100 g-0 py-5">
+        <Col xs={11} sm={10} xl={8}>
+          <Card className="border border-translucent auth-card">
+            <Card.Body className="pe-md-0">
+              <Row className="align-items-center gx-0 gy-7">
+                <Col
+                  xs="auto"
+                  className="bg-body-highlight dark__bg-gray-1100 rounded-3 position-relative overflow-hidden auth-title-box"
+                >
+                  <div
+                    className="bg-holder"
+                    style={{ backgroundImage: `url(${bg38})` }}
+                  />
+                  <div
+                    className={classNames(
+                      className,
+                      'position-relative px-4 px-lg-7 py-7 pb-sm-5 text-center text-md-start pb-lg-7'
+                    )}
+                  >
+                    <h3 className="mb-3 text-body-emphasis fs-7">
+                      Phoenix Authentication
+                    </h3>
+                    <p className="text-body-tertiary">
+                      Give yourself some hassle-free development process with
+                      the uniqueness of Phoenix!
+                    </p>
+                    <ul className="list-unstyled mb-0 w-max-content w-md-auto mx-auto">
+                      <li className="d-flex align-items-center gap-2">
+                        <Unicon
+                          icon={UilCheckCircle}
+                          className="text-success"
+                          size={16}
+                        />
+                        <span className="text-body-tertiary fw-semibold">
+                          Fast
+                        </span>
+                      </li>
+                      <li className="d-flex align-items-center gap-2">
+                        <Unicon
+                          icon={UilCheckCircle}
+                          className="text-success"
+                          size={16}
+                        />
+                        <span className="text-body-tertiary fw-semibold">
+                          Simple
+                        </span>
+                      </li>
+                      <li className="d-flex align-items-center gap-2">
+                        <Unicon
+                          icon={UilCheckCircle}
+                          className="text-success"
+                          size={16}
+                        />
+                        <span className="text-body-tertiary fw-semibold">
+                          Responsive
+                        </span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="position-relative mb-6 d-none d-md-block text-center mt-md-15 z-n1">
+                    <img
+                      className="auth-title-box-img d-dark-none"
+                      src={authIllustrations}
+                      alt=""
+                    />
+                    <img
+                      className="auth-title-box-img d-light-none"
+                      src={authIllustrationsDark}
+                      alt=""
+                    />
+                  </div>
+                </Col>
+                <Col className="mx-auto">
+                  {logo && (
+                    <div className="text-center">
+                      <Link
+                        to="/"
+                        className="d-inline-block text-decoration-none mb-4"
+                      >
+                        <Logo
+                          text={false}
+                          width={58}
+                          className="fw-bolder fs-5 d-inline-block"
+                        />
+                      </Link>
+                    </div>
+                  )}
+                  <div className="auth-form-box">{children}</div>
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default AuthCardLayout;

src/layouts/AuthSimpleLayout.tsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import Logo from 'components/common/Logo';
+import { PropsWithChildren } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+interface AuthSimpleLayoutProps {
+  logo?: boolean;
+  className?: string;
+}
+
+const AuthSimpleLayout = ({
+  logo = true,
+  className = 'col-xl-5 col-xxl-3',
+  children
+}: PropsWithChildren<AuthSimpleLayoutProps>) => {
+  return (
+    <div className="container">
+      <Row className="flex-center min-vh-100 py-5">
+        <Col sm={10} md={8} lg={5} className={classNames(className)}>
+          {logo && (
+            <Link
+              to="/"
+              className="d-flex flex-center text-decoration-none mb-4"
+            >
+              <Logo
+                text={false}
+                width={58}
+                className="fw-bolder fs-5 d-inline-block"
+              />
+            </Link>
+          )}
+          {children}
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default AuthSimpleLayout;

src/layouts/AuthSplitLayout.tsx

@@ -0,0 +1,51 @@
+import Logo from 'components/common/Logo';
+import { PropsWithChildren } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+interface AuthSplitLayoutProps {
+  logo?: boolean;
+  bg: string;
+}
+
+const AuthSplitLayout = ({
+  logo = true,
+  bg,
+  children
+}: PropsWithChildren<AuthSplitLayoutProps>) => {
+  return (
+    <Row className="vh-100 g-0">
+      <Col lg={6} className="position-relative d-none d-lg-block">
+        <div
+          className="bg-holder"
+          style={{
+            backgroundImage: `url(${bg})`
+          }}
+        />
+      </Col>
+      <Col lg={6}>
+        <Row className="flex-center h-100 g-0 px-4 px-sm-0">
+          <Col sm={6} lg={7} xl={6}>
+            {logo && (
+              <div className="text-center">
+                <Link
+                  to="/"
+                  className="d-inline-block text-decoration-none mb-4"
+                >
+                  <Logo
+                    text={false}
+                    width={58}
+                    className="fw-bolder fs-5 d-inline-block"
+                  />
+                </Link>
+              </div>
+            )}
+            {children}
+          </Col>
+        </Row>
+      </Col>
+    </Row>
+  );
+};
+
+export default AuthSplitLayout;

src/layouts/DocPagesLayout.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { snakeCase } from 'helpers/utils';
+import React, {
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useState
+} from 'react';
+import { Col, Nav, Row } from 'react-bootstrap';
+import { useLocation } from 'react-router-dom';
+
+export type SideNavItem = {
+  to: string;
+  label: string;
+  subItem?: SideNavItem[];
+};
+
+interface DocPagesLayoutProps {
+  sideNavItems?: SideNavItem[];
+}
+
+const DocPagesLayout = ({
+  children,
+  sideNavItems
+}: PropsWithChildren<DocPagesLayoutProps>) => {
+  const [navItems, setNavItems] = useState<SideNavItem[]>([]);
+
+  useEffect(() => {
+    if (sideNavItems) {
+      setNavItems(sideNavItems);
+    } else {
+      const items: SideNavItem[] = [];
+      const recursiveMap = (children: ReactNode) => {
+        React.Children.forEach(children, child => {
+          if (React.isValidElement(child)) {
+            if (
+              child?.props?.children &&
+              typeof child.type !== 'string' &&
+              //@ts-ignore
+              child.type?.componentName !== 'PhoenixDocCardHeader'
+            ) {
+              recursiveMap((child.props as any).children);
+            } else {
+              if (
+                typeof child.type !== 'string' &&
+                //@ts-ignore
+                child.type?.componentName === 'PhoenixDocCardHeader' &&
+                (child.props as any).title
+              ) {
+                items.push({
+                  to: snakeCase((child.props as any).title),
+                  label: (child.props as any).title
+                });
+              }
+            }
+          }
+        });
+      };
+      recursiveMap(children);
+
+      setNavItems(items);
+    }
+  }, []);
+
+  return (
+    <Row className="gx-3 gy-4 mb-7">
+      <Col xs={12} xl={10} className="order-1 order-xl-0">
+        {children}
+      </Col>
+      <Col xs={12} xl={2}>
+        <div className="position-sticky" style={{ top: 80 }}>
+          <h5>On this page</h5>
+          <hr />
+          <Nav as="ul" className="flex-column nav-vertical doc-nav">
+            {navItems.map(item => (
+              <NavItem item={item} key={item.label} />
+            ))}
+          </Nav>
+        </div>
+      </Col>
+    </Row>
+  );
+};
+
+const NavItem = ({ item }: { item: SideNavItem }) => {
+  const { hash } = useLocation();
+
+  return (
+    <Nav.Item as="li" key={item.to}>
+      <Nav.Link active={hash === `#${item.to}`} href={`#${item.to}`}>
+        {item.label}
+      </Nav.Link>
+      {item.subItem && (
+        <Nav as="ul" className="flex-column">
+          {item.subItem.map(subItem => (
+            <NavItem item={subItem} key={subItem.to} />
+          ))}
+        </Nav>
+      )}
+    </Nav.Item>
+  );
+};
+
+export default DocPagesLayout;

src/layouts/EcommerceLayout.tsx

@@ -0,0 +1,30 @@
+import EcommerceFooter from 'components/footers/EcommerceFooter';
+import Footer from 'components/footers/Footer';
+import EcommerceTopbar from 'components/navbars/ecommerce/EcommerceTopbar';
+import EcommerceNavbar from 'components/navbars/ecommerce/EcommerceNavbar';
+import { Outlet } from 'react-router-dom';
+import useSettingsMountEffect from 'hooks/useSettingsMountEffect';
+import ChatWidget from 'components/common/chat-widget/ChatWidget';
+
+const EcommerceLayout = () => {
+  useSettingsMountEffect({
+    disableNavigationType: true,
+    disableHorizontalNavbarAppearance: true,
+    disableVerticalNavbarAppearance: true,
+    disableHorizontalNavbarShape: true
+  });
+  return (
+    <>
+      <EcommerceTopbar />
+      <div className="position-relative">
+        <EcommerceNavbar />
+        <Outlet />
+      </div>
+      <EcommerceFooter />
+      <Footer />
+      <ChatWidget />
+    </>
+  );
+};
+
+export default EcommerceLayout;

src/layouts/EmailLayout.tsx

@@ -0,0 +1,109 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Button from 'components/base/Button';
+import PhoenixOffcanvas from 'components/base/PhoenixOffcanvas';
+import SearchBox from 'components/common/SearchBox';
+import EmailSidebar from 'components/modules/email/EmailSidebar';
+import { useBreakpoints } from 'providers/BreakpointsProvider';
+import { useMainLayoutContext } from 'providers/MainLayoutProvider';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import InboxToolbar from '../components/modules/email/InboxToolbar';
+import { emails } from 'data/email';
+import EmailRow from '../components/modules/email/EmailRow';
+import { Link } from 'react-router-dom';
+import { faBars, faPlus } from '@fortawesome/free-solid-svg-icons';
+import BulkSelectProvider from 'providers/BulkSelectProvider';
+
+interface EmailLayoutProps {
+  page: 'inbox' | 'detail' | 'compose';
+}
+
+const EmailLayout = ({
+  children,
+  page
+}: PropsWithChildren<EmailLayoutProps>) => {
+  const [openSidebar, setOpenSidebar] = useState(false);
+  const { breakpoints } = useBreakpoints();
+  const { setContentClass } = useMainLayoutContext();
+
+  useEffect(() => {
+    setContentClass('pt-0');
+
+    return () => {
+      setContentClass('');
+    };
+  }, []);
+  return (
+    <div className="email-container">
+      <Row className="gx-lg-4 gx-xl-6 gx-3 py-4 z-2 position-sticky bg-body email-header">
+        <Col className="col-auto">
+          <Button
+            variant="primary"
+            className="email-sidebar-width d-none d-lg-block"
+            as={Link}
+            to="/apps/email/compose"
+          >
+            Compose
+          </Button>
+          <Button
+            variant="phoenix-secondary"
+            className="px-3 text-body-tertiary d-lg-none"
+            onClick={() => setOpenSidebar(true)}
+          >
+            <FontAwesomeIcon icon={faBars} />
+          </Button>
+        </Col>
+        {page !== 'compose' && (
+          <Col className="col-auto d-lg-none">
+            <Button variant="primary" className="px-3 px-sm-4">
+              <span className="d-none d-sm-inline-block">Compose</span>
+              <FontAwesomeIcon icon={faPlus} className="d-sm-none" />
+            </Button>
+          </Col>
+        )}
+        <Col className="col-auto flex-1">
+          <SearchBox className="w-100" />
+        </Col>
+      </Row>
+      <Row className="g-lg-4 g-xl-6 mb-8">
+        <Col lg="auto">
+          <div
+            className="email-sidebar email-sidebar-width bg-body d-none d-lg-block"
+            id="emailSidebarColumn"
+          >
+            <EmailSidebar />
+          </div>
+          {breakpoints.down('lg') && (
+            <PhoenixOffcanvas
+              open={openSidebar}
+              fixed
+              placement="start"
+              className="email-sidebar email-sidebar-width bg-body"
+              backdropClassName="top-0"
+              onHide={() => setOpenSidebar(false)}
+            >
+              <EmailSidebar hideSidebar={() => setOpenSidebar(false)} />
+            </PhoenixOffcanvas>
+          )}
+        </Col>
+        {page !== 'inbox' && (
+          <Col xs="3" className="d-none d-xxl-block">
+            <div className="email-content scrollbar">
+              <div className="px-lg-1">
+                <BulkSelectProvider data={emails}>
+                  <InboxToolbar size="sm" />
+                  {emails.map((email, index) => (
+                    <EmailRow email={email} index={index} key={email.id} />
+                  ))}
+                </BulkSelectProvider>
+              </div>
+            </div>
+          </Col>
+        )}
+        {children}
+      </Row>
+    </div>
+  );
+};
+
+export default EmailLayout;

src/layouts/FlightAlternateLayout.tsx

@@ -0,0 +1,22 @@
+import { Outlet } from 'react-router-dom';
+import useSettingsMountEffect from 'hooks/useSettingsMountEffect';
+import ChatWidget from 'components/common/chat-widget/ChatWidget';
+import NavbarMain from 'components/navbars/travel-agency/NavbarMain';
+
+const FlightAlternateLayout = () => {
+  useSettingsMountEffect({
+    disableNavigationType: true,
+    disableHorizontalNavbarAppearance: true,
+    disableVerticalNavbarAppearance: true,
+    disableHorizontalNavbarShape: true
+  });
+  return (
+    <>
+      <NavbarMain />
+      <Outlet />
+      <ChatWidget />
+    </>
+  );
+};
+
+export default FlightAlternateLayout;

src/layouts/MainLayout.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import ChatWidget from 'components/common/chat-widget/ChatWidget';
+import Footer from 'components/footers/Footer';
+import NavbarDual from 'components/navbars/navbar-dual/NavbarDual';
+import NavbarTopHorizontal from 'components/navbars/navbar-horizontal/NavbarTopHorizontal';
+import NavbarTopDefault from 'components/navbars/navbar-top/NavbarTopDefault';
+import NavbarVertical from 'components/navbars/navbar-vertical/NavbarVertical';
+import NavBarMy from 'module-dimmer/NavBarMy';
+import { useAppContext } from 'providers/AppProvider';
+import { useMainLayoutContext } from 'providers/MainLayoutProvider';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+
+const MainLayout = () => {
+  const {
+    config: { navbarPosition }
+  } = useAppContext();
+
+  const { contentClass, footerClass } = useMainLayoutContext();
+
+  return (
+    <Container fluid className="px-0">
+      {/* {(navbarPosition === 'vertical' || navbarPosition === 'combo') && (
+        <NavbarVertical />
+      )}
+      {navbarPosition === 'vertical' && <NavbarTopDefault />}
+      {(navbarPosition === 'horizontal' || navbarPosition === 'combo') && (
+        <NavbarTopHorizontal />
+      )}
+      {navbarPosition === 'dual' && <NavbarDual />} */}
+
+      <div className={classNames(contentClass, 'content')}>
+        <Outlet />
+        <NavBarMy />
+        <Footer className={classNames(footerClass, 'position-absolute')} />
+        <ChatWidget />
+      </div>
+    </Container>
+  );
+};
+
+export default MainLayout;

src/layouts/TravelAgencyLayout.tsx

@@ -0,0 +1,24 @@
+import { Outlet } from 'react-router-dom';
+import useSettingsMountEffect from 'hooks/useSettingsMountEffect';
+import ChatWidget from 'components/common/chat-widget/ChatWidget';
+import NavbarMain from 'components/navbars/travel-agency/NavbarMain';
+import TravelAgencyFooter from 'pages/apps/travel-agency/landing/TravelAgencyFooter';
+
+const TravelAgencyLayout = () => {
+  useSettingsMountEffect({
+    disableNavigationType: true,
+    disableHorizontalNavbarAppearance: true,
+    disableVerticalNavbarAppearance: true,
+    disableHorizontalNavbarShape: true
+  });
+  return (
+    <>
+      <NavbarMain />
+      <Outlet />
+      <TravelAgencyFooter />
+      <ChatWidget />
+    </>
+  );
+};
+
+export default TravelAgencyLayout;

src/layouts/TravelLandingLayout.tsx

@@ -0,0 +1,24 @@
+import { Outlet } from 'react-router-dom';
+import useSettingsMountEffect from 'hooks/useSettingsMountEffect';
+import NavbarMain from 'components/navbars/travel-agency/NavbarMain';
+import Footer from 'pages/apps/travel-agency/landing/Footer';
+import TopNav from 'pages/apps/travel-agency/landing/TopNav copy';
+
+const TravelLandingLayout = () => {
+  useSettingsMountEffect({
+    disableNavigationType: true,
+    disableHorizontalNavbarAppearance: true,
+    disableVerticalNavbarAppearance: true,
+    disableHorizontalNavbarShape: true
+  });
+  return (
+    <>
+      <TopNav />
+      <NavbarMain />
+      <Outlet />
+      <Footer />
+    </>
+  );
+};
+
+export default TravelLandingLayout;

src/layouts/TripLayout.tsx

@@ -0,0 +1,26 @@
+import { Outlet } from 'react-router-dom';
+import useSettingsMountEffect from 'hooks/useSettingsMountEffect';
+import ChatWidget from 'components/common/chat-widget/ChatWidget';
+import NavbarMain from 'components/navbars/travel-agency/NavbarMain';
+import TravelAgencyFooter from 'pages/apps/travel-agency/landing/TravelAgencyFooter';
+import TripCommonCTASection from 'components/modules/travel-agency/trip/homepage/TripCommonCTASection';
+
+const TripLayout = () => {
+  useSettingsMountEffect({
+    disableNavigationType: true,
+    disableHorizontalNavbarAppearance: true,
+    disableVerticalNavbarAppearance: true,
+    disableHorizontalNavbarShape: true
+  });
+  return (
+    <>
+      <NavbarMain />
+      <Outlet />
+      <TripCommonCTASection />
+      <TravelAgencyFooter />
+      <ChatWidget />
+    </>
+  );
+};
+
+export default TripLayout;