vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 删除无用组件

Browse Source
This commit is contained in:
zdl
2025-10-20 13:34:19 +08:00
parent 44f9fea624
commit b2681231b0
24 changed files with 16 additions and 7877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.claude/settings.local.json
View File

@@ -5,9 +5,15 @@
"Bash(xargs ls:*)", "Bash(xargs ls:*)",
"Bash(awk:*)", "Bash(awk:*)",
"Bash(npm start)", "Bash(npm start)",
"Bash(python3:*)" "Bash(python3:*)",
"Bash(rm -rf /Users/qiye/Desktop/jzqy/vf_react/src/views/Applications)",
"Bash(rm -rf /Users/qiye/Desktop/jzqy/vf_react/src/views/Ecommerce)",
"Bash(rm /Users/qiye/Desktop/jzqy/vf_react/src/views/Dashboard/Automotive.js)",
"Bash(rm /Users/qiye/Desktop/jzqy/vf_react/src/views/Dashboard/CRM.js)",
"Bash(rm /Users/qiye/Desktop/jzqy/vf_react/src/views/Dashboard/SmartHome.js)",
"Bash(rm /Users/qiye/Desktop/jzqy/vf_react/src/views/Dashboard/Landing.js)"
], ],
"deny": [], "deny": [],
"ask": [] "ask": []
} }
} }

14
src/App.js
View File

@@ -23,7 +23,6 @@ import theme from "theme/theme.js";
import PageLoader from "components/Loading/PageLoader"; import PageLoader from "components/Loading/PageLoader";
// Layouts - 保持同步导入（需要立即加载） // Layouts - 保持同步导入（需要立即加载）
import Admin from "layouts/Admin";
import Auth from "layouts/Auth"; import Auth from "layouts/Auth";
import HomeLayout from "layouts/Home"; import HomeLayout from "layouts/Home";
import MainLayout from "layouts/MainLayout"; import MainLayout from "layouts/MainLayout";
@@ -143,19 +142,6 @@ function AppContent() {
<Route path="market-data" element={<MarketDataView />} /> <Route path="market-data" element={<MarketDataView />} />
</Route> </Route>
{/* 管理后台路由 - 需要登录，不使用 MainLayout */}
{/* 这些路由有自己的加载状态处理 */}
<Route
path="admin/*"
element={
<Suspense fallback={<PageLoader message="加载中..." />}>
<ProtectedRoute>
<Admin />
</ProtectedRoute>
</Suspense>
}
/>
{/* 认证页面路由 - 不使用 MainLayout */} {/* 认证页面路由 - 不使用 MainLayout */}
<Route path="auth/*" element={<Auth />} /> <Route path="auth/*" element={<Auth />} />

222
src/components/Navbars/AdminNavbar.js
View File

@@ -1,222 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra Imports
import {
Box,
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
Flex,
Link,
useColorModeValue,
} from "@chakra-ui/react";
import { SidebarContext } from "contexts/SidebarContext";
import PropTypes from "prop-types";
import React, { useState, useEffect, useContext } from "react";
import AdminNavbarLinks from "./AdminNavbarLinks";
import { HamburgerIcon } from "@chakra-ui/icons";
export default function AdminNavbar(props) {
const [scrolled, setScrolled] = useState(false);
const {
sidebarWidth,
setSidebarWidth,
toggleSidebar,
setToggleSidebar,
} = useContext(SidebarContext);
useEffect(() => {
window.addEventListener("scroll", changeNavbar);
return () => {
window.removeEventListener("scroll", changeNavbar);
};
});
const {
variant,
children,
fixed,
secondary,
brandText,
onOpen,
...rest
} = props;
// Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)
let mainText =
fixed && scrolled
? useColorModeValue("gray.700", "gray.200")
: useColorModeValue("white", "gray.200");
let secondaryText =
fixed && scrolled
? useColorModeValue("gray.700", "gray.200")
: useColorModeValue("white", "gray.200");
let navbarPosition = "absolute";
let navbarFilter = "none";
let navbarBackdrop = "blur(20px)";
let navbarShadow = "none";
let navbarBg = "none";
let navbarBorder = "transparent";
let secondaryMargin = "0px";
let paddingX = "15px";
if (props.fixed === true)
if (scrolled === true) {
navbarPosition = "fixed";
navbarShadow = useColorModeValue(
"0px 7px 23px rgba(0, 0, 0, 0.05)",
"none"
);
navbarBg = useColorModeValue(
"linear-gradient(112.83deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.8) 110.84%)",
"linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)"
);
navbarBorder = useColorModeValue("#FFFFFF", "rgba(255, 255, 255, 0.31)");
navbarFilter = useColorModeValue(
"none",
"drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))"
);
}
if (props.secondary) {
navbarBackdrop = "none";
navbarPosition = "absolute";
mainText = "white";
secondaryText = "white";
secondaryMargin = "22px";
paddingX = "30px";
}
const changeNavbar = () => {
if (window.scrollY > 1) {
setScrolled(true);
} else {
setScrolled(false);
}
};
return (
<Flex
position={navbarPosition}
boxShadow={navbarShadow}
bg={navbarBg}
borderColor={navbarBorder}
filter={navbarFilter}
backdropFilter={navbarBackdrop}
borderWidth="1.5px"
borderStyle="solid"
transitionDelay="0s, 0s, 0s, 0s"
transitionDuration=" 0.25s, 0.25s, 0.25s, 0s"
transition-property="box-shadow, background-color, filter, border"
transitionTimingFunction="linear, linear, linear, linear"
alignItems={{ xl: "center" }}
borderRadius="16px"
display="flex"
minH="75px"
justifyContent={{ xl: "center" }}
lineHeight="25.6px"
mx="auto"
mt={secondaryMargin}
pb="8px"
left={document.documentElement.dir === "rtl" ? "30px" : ""}
right={document.documentElement.dir === "rtl" ? "" : "30px"}
px={{
sm: paddingX,
md: "30px",
}}
ps={{
xl: "12px",
}}
pt="8px"
top="18px"
w={{ sm: "calc(100vw - 30px)", xl: "calc(100vw - 75px - 275px)" }}
>
<Flex
w="100%"
flexDirection={{
sm: "column",
md: "row",
}}
alignItems={{ xl: "center" }}
>
<Box mb={{ sm: "8px", md: "0px" }}>
<Breadcrumb>
<BreadcrumbItem color={mainText}>
<BreadcrumbLink href="#" color={secondaryText}>
Pages
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem color={mainText}>
<BreadcrumbLink href="#" color={mainText}>
{brandText}
</BreadcrumbLink>
</BreadcrumbItem>
</Breadcrumb>
{/* Here we create navbar brand, based on route name */}
<Link
color={mainText}
href="#"
bg="inherit"
borderRadius="inherit"
fontWeight="bold"
_hover={{ color: { mainText } }}
_active={{
bg: "inherit",
transform: "none",
borderColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}
>
{brandText}
</Link>
</Box>
<HamburgerIcon
w="100px"
h="20px"
ms="20px"
color="#fff"
cursor="pointer"
display={{ sm: "none", xl: "block" }}
onClick={() => {
setSidebarWidth(sidebarWidth === 275 ? 120 : 275);
setToggleSidebar(!toggleSidebar);
}}
/>
<Box ms="auto" w={{ sm: "100%", md: "unset" }}>
<AdminNavbarLinks
onOpen={props.onOpen}
logoText={props.logoText}
secondary={props.secondary}
fixed={props.fixed}
scrolled={scrolled}
/>
</Box>
</Flex>
</Flex>
);
}
AdminNavbar.propTypes = {
brandText: PropTypes.string,
variant: PropTypes.string,
secondary: PropTypes.bool,
fixed: PropTypes.bool,
onOpen: PropTypes.func,
};

335
src/components/Navbars/AdminNavbarLinks.js
View File

@@ -1,335 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra Icons
import { BellIcon } from "@chakra-ui/icons";
// Chakra Imports
import {
Button,
Flex,
Menu,
MenuButton,
MenuItem,
MenuList,
Text,
Stack,
Box,
useColorMode,
useColorModeValue,
Avatar,
HStack,
Divider,
} from "@chakra-ui/react";
// 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";
// Custom Icons
import { ProfileIcon, SettingsIcon } from "components/Icons/Icons";
// Custom Components
import { ItemContent } from "components/Menu/ItemContent";
import { SearchBar } from "components/Navbars/SearchBar/SearchBar";
import { SidebarResponsive } from "components/Sidebar/Sidebar";
import PropTypes from "prop-types";
import React from "react";
import { NavLink, useNavigate } from "react-router-dom";
import routes from "routes.js";
import {
ArgonLogoDark,
ChakraLogoDark,
ArgonLogoLight,
ChakraLogoLight,
} from "components/Icons/Icons";
import { useAuth } from "contexts/AuthContext";
import SubscriptionBadge from "components/Subscription/SubscriptionBadge";
import SubscriptionModal from "components/Subscription/SubscriptionModal";
export default function HeaderLinks(props) {
console.log('🚀 [AdminNavbarLinks] 组件已加载');
const {
variant,
children,
fixed,
scrolled,
secondary,
onOpen,
...rest
} = props;
const { colorMode } = useColorMode();
const { user, isAuthenticated, logout } = useAuth();
const navigate = useNavigate();
console.log('👤 [AdminNavbarLinks] 用户状态:', { user, isAuthenticated });
// 订阅信息状态
const [subscriptionInfo, setSubscriptionInfo] = React.useState({
type: 'free',
status: 'active',
days_left: 0,
is_active: true
});
const [isSubscriptionModalOpen, setIsSubscriptionModalOpen] = React.useState(false);
// 加载订阅信息
React.useEffect(() => {
console.log('🔍 [AdminNavbarLinks] 订阅徽章 - 认证状态:', isAuthenticated, 'userId:', user?.id);
if (isAuthenticated && user) {
const loadSubscriptionInfo = async () => {
try {
const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');
console.log('🌐 [AdminNavbarLinks] 订阅徽章 - API:', base + '/api/subscription/current');
const response = await fetch(base + '/api/subscription/current', {
credentials: 'include',
});
console.log('📡 [AdminNavbarLinks] 订阅徽章 - 响应:', response.status);
if (response.ok) {
const data = await response.json();
console.log('✅ [AdminNavbarLinks] 订阅徽章 - 完整响应数据:', data);
console.log('🔍 [AdminNavbarLinks] 订阅徽章 - data.data:', data.data);
console.log('🔍 [AdminNavbarLinks] 订阅徽章 - type值:', data.data?.type, '类型:', typeof data.data?.type);
if (data.success && data.data) {
// 数据标准化处理：确保type字段是小写的 'free', 'pro', 或 'max'
const normalizedData = {
type: (data.data.type || data.data.subscription_type || 'free').toLowerCase(),
status: data.data.status || 'active',
days_left: data.data.days_left || 0,
is_active: data.data.is_active !== false,
end_date: data.data.end_date || null
};
console.log('✨ [AdminNavbarLinks] 订阅徽章 - 标准化后:', normalizedData);
setSubscriptionInfo(normalizedData);
}
} else {
console.warn('⚠️ [AdminNavbarLinks] 订阅徽章 - API 失败，使用默认值');
}
} catch (error) {
console.error('❌ [AdminNavbarLinks] 订阅徽章 - 错误:', error);
}
};
loadSubscriptionInfo();
} else {
// 用户未登录时,重置为免费版
console.warn('🚫 [AdminNavbarLinks] 订阅徽章 - 用户未登录,重置为免费版');
setSubscriptionInfo({
type: 'free',
status: 'active',
days_left: 0,
is_active: true
});
}
}, [isAuthenticated, user?.id]); // 只依赖 user.id 而不是整个 user 对象
// Chakra Color Mode
let navbarIcon =
fixed && scrolled
? useColorModeValue("gray.700", "gray.200")
: useColorModeValue("white", "gray.200");
let menuBg = useColorModeValue("white", "navy.800");
if (secondary) {
navbarIcon = "white";
}
const handleLogout = () => {
logout();
navigate("/auth/signin");
};
return (
<Flex
pe={{ sm: "0px", md: "16px" }}
w={{ sm: "100%", md: "auto" }}
alignItems="center"
flexDirection="row"
>
<SearchBar me="18px" />
{/* 订阅状态徽章 - 仅登录用户可见 */}
{console.log('🎨 [订阅徽章] 渲染:', { isAuthenticated, subscriptionInfo })}
{isAuthenticated && (
<>
<SubscriptionBadge
subscriptionInfo={subscriptionInfo}
onClick={() => setIsSubscriptionModalOpen(true)}
/>
<SubscriptionModal
isOpen={isSubscriptionModalOpen}
onClose={() => setIsSubscriptionModalOpen(false)}
subscriptionInfo={subscriptionInfo}
/>
</>
)}
{/* 用户认证状态 */}
{isAuthenticated ? (
// 已登录用户 - 显示用户菜单
<Menu>
<MenuButton>
<HStack spacing={2} cursor="pointer">
<Avatar
size="sm"
name={user?.name}
src={user?.avatar}
bg="blue.500"
/>
<Text
display={{ sm: "none", md: "flex" }}
color={navbarIcon}
fontSize="sm"
fontWeight="medium"
>
{user?.name || user?.email}
</Text>
</HStack>
</MenuButton>
<MenuList p="16px 8px" bg={menuBg}>
<Flex flexDirection="column">
<MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/profile")}>
<HStack spacing={3}>
<Avatar size="sm" name={user?.name} src={user?.avatar} />
<Box>
<Text fontWeight="bold" fontSize="sm">{user?.name}</Text>
<Text fontSize="xs" color="gray.500">{user?.email}</Text>
</Box>
</HStack>
</MenuItem>
<Divider my={2} />
<MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/profile")}>
<Text>个人资料</Text>
</MenuItem>
<MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/settings")}>
<Text>设置</Text>
</MenuItem>
<Divider my={2} />
<MenuItem borderRadius="8px" onClick={handleLogout}>
<Text color="red.500">退出登录</Text>
</MenuItem>
</Flex>
</MenuList>
</Menu>
) : (
// 未登录用户 - 显示登录按钮
<NavLink to="/auth/signin">
<Button
ms="0px"
px="0px"
me={{ sm: "2px", md: "16px" }}
color={navbarIcon}
variant="no-effects"
rightIcon={
document.documentElement.dir ? (
""
) : (
<ProfileIcon color={navbarIcon} w="22px" h="22px" me="0px" />
)
}
leftIcon={
document.documentElement.dir ? (
<ProfileIcon color={navbarIcon} w="22px" h="22px" me="0px" />
) : (
""
)
}
>
<Text display={{ sm: "none", md: "flex" }}>登录</Text>
</Button>
</NavLink>
)}
<SidebarResponsive
logo={
<Stack direction="row" spacing="12px" align="center" justify="center">
{colorMode === "dark" ? (
<ArgonLogoLight w="74px" h="27px" />
) : (
<ArgonLogoDark w="74px" h="27px" />
)}
<Box
w="1px"
h="20px"
bg={colorMode === "dark" ? "white" : "gray.700"}
/>
{colorMode === "dark" ? (
<ChakraLogoLight w="82px" h="21px" />
) : (
<ChakraLogoDark w="82px" h="21px" />
)}
</Stack>
}
colorMode={colorMode}
secondary={props.secondary}
routes={routes}
{...rest}
/>
<SettingsIcon
cursor="pointer"
ms={{ base: "16px", xl: "0px" }}
me="16px"
onClick={props.onOpen}
color={navbarIcon}
w="18px"
h="18px"
/>
<Menu>
<MenuButton>
<BellIcon color={navbarIcon} w="18px" h="18px" />
</MenuButton>
<MenuList p="16px 8px" bg={menuBg}>
<Flex flexDirection="column">
<MenuItem borderRadius="8px" mb="10px">
<ItemContent
time="13 minutes ago"
info="from Alicia"
boldInfo="New Message"
aName="Alicia"
aSrc={avatar1}
/>
</MenuItem>
<MenuItem borderRadius="8px" mb="10px">
<ItemContent
time="2 days ago"
info="by Josh Henry"
boldInfo="New Album"
aName="Josh Henry"
aSrc={avatar2}
/>
</MenuItem>
<MenuItem borderRadius="8px">
<ItemContent
time="3 days ago"
info="Payment succesfully completed!"
boldInfo=""
aName="Kara"
aSrc={avatar3}
/>
</MenuItem>
</Flex>
</MenuList>
</Menu>
</Flex>
);
}
HeaderLinks.propTypes = {
variant: PropTypes.string,
fixed: PropTypes.bool,
secondary: PropTypes.bool,
onOpen: PropTypes.func,
};

15
src/components/Navbars/HomeNavbar.js
View File

@@ -626,23 +626,15 @@ export default function HomeNavbar() {
// 加载订阅信息 // 加载订阅信息
React.useEffect(() => { React.useEffect(() => {
console.log('🔍 [HomeNavbar] 订阅徽章 - 认证状态:', isAuthenticated, 'userId:', user?.id);
if (isAuthenticated && user) { if (isAuthenticated && user) {
const loadSubscriptionInfo = async () => { const loadSubscriptionInfo = async () => {
try { try {
const base = getApiBase(); const base = getApiBase();
console.log('🌐 [HomeNavbar] 订阅徽章 - API:', base + '/api/subscription/current');
const response = await fetch(base + '/api/subscription/current', { const response = await fetch(base + '/api/subscription/current', {
credentials: 'include', credentials: 'include',
}); });
console.log('📡 [HomeNavbar] 订阅徽章 - 响应:', response.status);
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
console.log('✅ [HomeNavbar] 订阅徽章 - 完整响应数据:', data);
console.log('🔍 [HomeNavbar] 订阅徽章 - data.data:', data.data);
console.log('🔍 [HomeNavbar] 订阅徽章 - type值:', data.data?.type, '类型:', typeof data.data?.type);
if (data.success && data.data) { if (data.success && data.data) {
// 数据标准化处理：确保type字段是小写的 'free', 'pro', 或 'max' // 数据标准化处理：确保type字段是小写的 'free', 'pro', 或 'max'
const normalizedData = { const normalizedData = {
@@ -652,20 +644,16 @@ export default function HomeNavbar() {
is_active: data.data.is_active !== false, is_active: data.data.is_active !== false,
end_date: data.data.end_date || null end_date: data.data.end_date || null
}; };
console.log('✨ [HomeNavbar] 订阅徽章 - 标准化后:', normalizedData);
setSubscriptionInfo(normalizedData); setSubscriptionInfo(normalizedData);
} }
} else {
console.warn('⚠️ [HomeNavbar] 订阅徽章 - API 失败，使用默认值');
} }
} catch (error) { } catch (error) {
console.error('❌ [HomeNavbar] 订阅徽章 - 错误:', error); logger.error('HomeNavbar', '加载订阅信息失败', error);
} }
}; };
loadSubscriptionInfo(); loadSubscriptionInfo();
} else { } else {
// 用户未登录时,重置为免费版 // 用户未登录时,重置为免费版
console.warn('🚫 [HomeNavbar] 订阅徽章 - 用户未登录,重置为免费版');
setSubscriptionInfo({ setSubscriptionInfo({
type: 'free', type: 'free',
status: 'active', status: 'active',
@@ -775,7 +763,6 @@ export default function HomeNavbar() {
/> />
{/* 订阅状态徽章 - 仅登录用户可见 */} {/* 订阅状态徽章 - 仅登录用户可见 */}
{console.log('🎨 [HomeNavbar] 订阅徽章 - 渲染:', { isAuthenticated, user: !!user, subscriptionInfo })}
{isAuthenticated && user && ( {isAuthenticated && user && (
<> <>
<SubscriptionBadge <SubscriptionBadge

719
src/components/Sidebar/Sidebar.js
View File

@@ -1,719 +0,0 @@
/* eslint-disable */
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { HamburgerIcon } from '@chakra-ui/icons';
// chakra imports
import {
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
Box,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerOverlay,
Flex,
HStack,
Icon,
List,
ListItem,
Stack,
Text,
useColorModeValue,
useDisclosure
} from '@chakra-ui/react';
import IconBox from 'components/Icons/IconBox';
import {
renderThumbDark,
renderThumbLight,
renderTrack,
renderTrackRTL,
renderView,
renderViewRTL
} from 'components/Scrollbar/Scrollbar';
import { HSeparator } from 'components/Separator/Separator';
import { SidebarContext } from 'contexts/SidebarContext';
import React from 'react';
import { Scrollbars } from 'react-custom-scrollbars-2';
import { FaCircle } from 'react-icons/fa';
import { NavLink, useLocation } from 'react-router-dom';
import SidebarDocs from './SidebarDocs';
// FUNCTIONS
function Sidebar(props) {
// to check for active links and opened collapses
let location = useLocation();
const { routes, landing } = props;
// this is for the rest of the collapses
const { sidebarWidth, setSidebarWidth, toggleSidebar } = React.useContext(SidebarContext);
let variantChange = '0.2s linear';
// verifies if routeName is the one active (in browser input)
const activeRoute = (routeName) => {
return location.pathname.includes(routeName);
};
// this function creates the links and collapses that appear in the sidebar (left menu)
const createLinks = (routes) => {
// Chakra Color Mode
let activeBg = 'blue.500';
let inactiveBg = useColorModeValue('transparent', 'navy.700');
let activeColor = useColorModeValue('gray.700', 'white');
let inactiveColor = useColorModeValue('gray.400', 'gray.400');
let sidebarActiveShadow = '0px 7px 11px rgba(0, 0, 0, 0.04)';
let activeAccordionBg = useColorModeValue('white', 'navy.700');
let activeColorIcon = 'white';
let inactiveColorIcon = 'blue.500';
if (landing) {
activeBg = 'white';
inactiveBg = 'transparent';
activeColor = 'white';
inactiveColor = 'white';
sidebarActiveShadow = '0px 7px 11px rgba(0, 0, 0, 0.04)';
activeAccordionBg = 'rgba(255, 255, 255, 0.11)';
activeColorIcon = 'blue.500';
inactiveColorIcon = 'white';
}
return routes.map((prop, key) => {
if (prop.category) {
return (
<Box key={key}>
<Text
fontSize={sidebarWidth === 275 ? 'md' : 'xs'}
color={activeColor}
fontWeight='bold'
mx='auto'
ps={{
sm: '10px',
xl: '16px'
}}
pt='18px'
pb='12px'
key={key}>
{prop.name}
</Text>
{createLinks(prop.items)}
</Box>
);
}
if (prop.collapse) {
return (
<Accordion key={key} allowToggle>
<AccordionItem border='none'>
<AccordionButton
display='flex'
align='center'
justify='center'
boxShadow={activeRoute(prop.path) && prop.icon ? sidebarActiveShadow : null}
_hover={{
boxShadow: activeRoute(prop.path) && prop.icon ? sidebarActiveShadow : null
}}
_focus={{
boxShadow: 'none'
}}
borderRadius='8px'
w={{
sm: sidebarWidth === 275 ? '100%' : '77%',
xl: sidebarWidth === 275 ? '90%' : '70%',
'2xl': sidebarWidth === 275 ? '95%' : '77%'
}}
px={prop.icon ? null : '0px'}
py={prop.icon ? '12px' : null}
bg={activeRoute(prop.path) && prop.icon ? activeAccordionBg : 'transparent'}
ms={sidebarWidth !== 275 ? !prop.icon ? '12px' : '8px' : null}>
{activeRoute(prop.path) ? (
<Flex
fontWeight='bold'
boxSize='initial'
justifyContent='flex-start'
alignItems='center'
bg='transparent'
transition={variantChange}
mx={{
xl: 'auto'
}}
px='0px'
borderRadius='8px'
w='100%'
_hover={{}}
_active={{
bg: 'inherit',
transform: 'none',
borderColor: 'transparent',
border: 'none'
}}
_focus={{
transform: 'none',
borderColor: 'transparent',
border: 'none'
}}>
{prop.icon ? (
<Flex justify={sidebarWidth === 275 ? 'flex-start' : 'center'}>
<IconBox
bg={activeBg}
color={activeColorIcon}
h='30px'
w='30px'
me={sidebarWidth === 275 ? '12px' : '0px'}
transition={variantChange}>
{prop.icon}
</IconBox>
<Text
color={activeColor}
my='auto'
fontSize='sm'
display={sidebarWidth === 275 ? 'block' : 'none'}>
{prop.name}
</Text>
</Flex>
) : (
<HStack
spacing={sidebarWidth === 275 ? '22px' : '0px'}
ps={sidebarWidth === 275 ? '10px' : '0px'}
ms={sidebarWidth === 275 ? '0px' : '8px'}>
<Icon
as={FaCircle}
w='10px'
color='blue.500'
display={sidebarWidth === 275 ? 'block' : 'none'}
/>
<Text color={activeColor} my='auto' fontSize='sm'>
{sidebarWidth === 275 ? prop.name : prop.name[0]}
</Text>
</HStack>
)}
</Flex>
) : (
<Flex
fontWeight='bold'
boxSize='initial'
justifyContent='flex-start'
alignItems='center'
bg='transparent'
mx={{
xl: 'auto'
}}
px='0px'
borderRadius='8px'
w='100%'
_hover={{}}
_active={{
bg: 'inherit',
transform: 'none',
borderColor: 'transparent'
}}
_focus={{
borderColor: 'transparent',
boxShadow: 'none'
}}>
{prop.icon ? (
<Flex justify={sidebarWidth === 275 ? 'flex-start' : 'center'}>
<IconBox
bg={inactiveBg}
color={inactiveColorIcon}
h='30px'
w='30px'
me={sidebarWidth === 275 ? '12px' : '0px'}
transition={variantChange}>
{prop.icon}
</IconBox>
<Text
color={inactiveColor}
my='auto'
fontSize='sm'
display={sidebarWidth === 275 ? 'block' : 'none'}>
{prop.name}
</Text>
</Flex>
) : (
<HStack
spacing={sidebarWidth === 275 ? '26px' : '0px'}
ps={sidebarWidth === 275 ? '10px' : '0px'}
ms={sidebarWidth === 275 ? '0px' : '8px'}>
<Icon
as={FaCircle}
w='6px'
color={landing ? 'white' : 'blue.500'}
display={sidebarWidth === 275 ? 'block' : 'none'}
/>
<Text color={inactiveColor} my='auto' fontSize='md' fontWeight='normal'>
{sidebarWidth === 275 ? prop.name : prop.name[0]}
</Text>
</HStack>
)}
</Flex>
)}
<AccordionIcon
color={landing ? 'white' : 'gray.400'}
display={
prop.icon ? sidebarWidth === 275 ? (
'block'
) : (
'none'
) : sidebarWidth === 275 ? (
'block'
) : (
'none'
)
}
transform={prop.icon ? null : sidebarWidth === 275 ? null : 'translateX(-70%)'}
/>
</AccordionButton>
<AccordionPanel
pe={prop.icon ? null : '0px'}
pb='8px'
ps={prop.icon ? null : sidebarWidth === 275 ? null : '8px'}>
<List>
{prop.icon ? (
createLinks(prop.items) // for bullet accordion links
) : (
createAccordionLinks(prop.items)
) // for non-bullet accordion links
}
</List>
</AccordionPanel>
</AccordionItem>
</Accordion>
);
} else {
return (
<NavLink key={key} to={prop.layout + prop.path}>
{prop.icon ? (
<Box>
<HStack spacing='14px' py='15px' px='15px'>
<IconBox bg='blue.500' color='white' h='30px' w='30px' transition={variantChange}>
{prop.icon}
</IconBox>
<Text
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
fontWeight={activeRoute(prop.name) ? 'bold' : 'normal'}
fontSize='sm'>
{prop.name}
</Text>
</HStack>
</Box>
) : (
<ListItem key={key} ms={sidebarWidth === 275 ? null : '10px'}>
<HStack
spacing={
sidebarWidth === 275 ? activeRoute(prop.path.toLowerCase()) ? (
'22px'
) : (
'26px'
) : (
'8px'
)
}
py='5px'
px={sidebarWidth === 275 ? '10px' : '0px'}>
<Icon
as={FaCircle}
w={activeRoute(prop.path.toLowerCase()) ? '10px' : '6px'}
color={landing ? 'white' : 'blue.500'}
display={sidebarWidth === 275 ? 'block' : 'none'}
/>
<Text
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
fontWeight={activeRoute(prop.path.toLowerCase()) ? 'bold' : 'normal'}>
{sidebarWidth === 275 ? prop.name : prop.name[0]}
</Text>
</HStack>
</ListItem>
)}
</NavLink>
);
}
});
};
const createAccordionLinks = (routes) => {
let inactiveColor = useColorModeValue('gray.400', 'gray.400');
let activeColor = useColorModeValue('gray.700', 'white');
if (landing) {
inactiveColor = 'white';
activeColor = 'white';
}
return routes.map((prop, key) => {
return (
<NavLink key={key} to={prop.layout + prop.path}>
<ListItem key={key} pt='5px' ms={sidebarWidth === 275 ? '26px' : '12px'}>
<Text
mb='4px'
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
fontWeight={activeRoute(prop.path.toLowerCase()) ? 'bold' : 'normal'}
fontSize='sm'>
{sidebarWidth === 275 ? prop.name : prop.name[0]}
</Text>
</ListItem>
</NavLink>
);
});
};
let isWindows = navigator.platform.startsWith('Win');
let links = <Box>{createLinks(routes)}</Box>;
// BRAND
// Chakra Color Mode
let sidebarBg = useColorModeValue('white', 'navy.800');
let sidebarRadius = '20px';
let sidebarMargins = '0px';
var brand = (
<Flex align='center' direction='column' pt={'25px'}>
{props.logo}
<HSeparator my='20px' />
</Flex>
);
let sidebarContent = (
<Box>
<Box>{brand}</Box>
<Stack direction='column' mb='40px'>
<Box>{links}</Box>
</Stack>
<SidebarDocs landing={landing} />
</Box>
);
// SIDEBAR
return (
<Box
onMouseEnter={toggleSidebar ? () => setSidebarWidth(sidebarWidth === 120 ? 275 : 120) : null}
onMouseLeave={toggleSidebar ? () => setSidebarWidth(sidebarWidth === 275 ? 120 : 275) : null}>
<Box display={{ sm: 'none', xl: 'block' }} position='fixed'>
<Box
bg={landing ? 'transparent' : sidebarBg}
transition={variantChange}
w={`${sidebarWidth}px`}
ms={{
sm: '16px'
}}
my={{
sm: '16px'
}}
h='calc(100vh - 32px)'
ps='20px'
pe='20px'
m={sidebarMargins}
borderRadius={sidebarRadius}>
<Scrollbars
autoHide
renderTrackVertical={document.documentElement.dir === 'rtl' ? renderTrackRTL : renderTrack}
renderThumbVertical={useColorModeValue(renderThumbLight, renderThumbDark)}
renderView={document.documentElement.dir === 'rtl' ? renderViewRTL : renderView}>
{sidebarContent}
</Scrollbars>
</Box>
</Box>
</Box>
);
}
// FUNCTIONS
export function SidebarResponsive(props) {
// to check for active links and opened collapses
let location = useLocation();
let variantChange = '0.2s linear';
// verifies if routeName is the one active (in browser input)
const activeRoute = (routeName) => {
return location.pathname.includes(routeName);
};
// Chakra Color Mode
let activeBg = 'blue.500';
let inactiveBg = useColorModeValue('transparent', 'navy.700');
let activeColor = useColorModeValue('gray.700', 'white');
let inactiveColor = useColorModeValue('gray.400', 'gray.400');
let activeAccordionBg = useColorModeValue('white', 'navy.700');
let sidebarActiveShadow = useColorModeValue('0px 7px 11px rgba(0, 0, 0, 0.04)', 'none');
let activeColorIcon = 'white';
let inactiveColorIcon = 'blue.500';
let sidebarBackgroundColor = useColorModeValue('white', 'navy.900');
// this function creates the links and collapses that appear in the sidebar (left menu)
const createLinks = (routes) => {
return routes.map((prop, key) => {
if (prop.category) {
return (
<Box key={key}>
<Text
fontSize={'md'}
color={activeColor}
fontWeight='bold'
mx='auto'
ps={{
sm: '10px',
xl: '16px'
}}
py='12px'
key={key}>
{prop.name}
</Text>
{createLinks(prop.items)}
</Box>
);
}
if (prop.collapse) {
return (
<Accordion key={key} allowToggle>
<AccordionItem border='none'>
<AccordionButton
as='div'
display='flex'
align='center'
justify='center'
key={key}
borderRadius='8px'
px={prop.icon ? null : '0px'}
py={prop.icon ? '12px' : null}
boxShadow={activeRoute(prop.path) && prop.icon ? sidebarActiveShadow : 'none'}
bg={activeRoute(prop.path) && prop.icon ? activeAccordionBg : 'transparent'}>
{activeRoute(prop.path) ? (
<Flex
fontWeight='bold'
boxSize='initial'
justifyContent='flex-start'
alignItems='center'
bg='transparent'
transition={variantChange}
mx={{
xl: 'auto'
}}
px='0px'
borderRadius='8px'
_hover={{}}
w='100%'
_active={{
bg: 'inherit',
transform: 'none',
borderColor: 'transparent'
}}>
{prop.icon ? (
<Flex>
<IconBox
bg={activeBg}
color={activeColorIcon}
h='30px'
w='30px'
me='12px'
transition={variantChange}>
{prop.icon}
</IconBox>
<Text color={activeColor} my='auto' fontSize='sm' display={'block'}>
{prop.name}
</Text>
</Flex>
) : (
<HStack spacing={'22px'} ps='10px' ms='0px'>
<Icon as={FaCircle} w='10px' color='blue.500' />
<Text as='span' color={activeColor} my='auto' fontSize='sm'>
{prop.name}
</Text>
</HStack>
)}
</Flex>
) : (
<Text
as='span'
fontWeight='bold'
boxSize='initial'
justifyContent='flex-start'
alignItems='center'
bg='transparent'
mx={{
xl: 'auto'
}}
px='0px'
borderRadius='8px'
_hover={{}}
w='100%'
_active={{
bg: 'inherit',
transform: 'none',
borderColor: 'transparent'
}}
_focus={{
boxShadow: 'none'
}}>
{prop.icon ? (
<Flex>
<IconBox
bg={inactiveBg}
color={inactiveColorIcon}
h='30px'
w='30px'
me='12px'
transition={variantChange}>
{prop.icon}
</IconBox>
<Text color={inactiveColor} my='auto' fontSize='sm'>
{prop.name}
</Text>
</Flex>
) : (
<HStack spacing={'26px'} ps={'10px'} ms={'0px'}>
<Icon as={FaCircle} w='6px' color='blue.500' />
<Text color={inactiveColor} my='auto' fontSize='sm' fontWeight='normal'>
{prop.name}
</Text>
</HStack>
)}
</Text>
)}
<AccordionIcon color='gray.400' />
</AccordionButton>
<AccordionPanel pe={prop.icon ? null : '0px'} pb='8px'>
<List>
{prop.icon ? (
createLinks(prop.items) // for bullet accordion links
) : (
createAccordionLinks(prop.items)
) // for non-bullet accordion links
}
</List>
</AccordionPanel>
</AccordionItem>
</Accordion>
);
} else {
return (
<NavLink key={key} to={prop.layout + prop.path}>
{prop.icon ? (
<Box>
<HStack spacing='14px' py='15px' px='15px'>
<IconBox bg='blue.500' color='white' h='30px' w='30px' transition={variantChange}>
{prop.icon}
</IconBox>
<Text
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
fontWeight={activeRoute(prop.name) ? 'bold' : 'normal'}
fontSize='sm'>
{prop.name}
</Text>
</HStack>
</Box>
) : (
<ListItem>
<HStack spacing='22px' py='5px' px='10px'>
<Icon
as={FaCircle}
w={activeRoute(prop.path.toLowerCase()) ? '10px' : '6px'}
color='blue.500'
/>
<Text
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
fontSize='sm'
fontWeight={activeRoute(prop.path.toLowerCase()) ? 'bold' : 'normal'}>
{prop.name}
</Text>
</HStack>
</ListItem>
)}
</NavLink>
);
}
});
};
const createAccordionLinks = (routes) => {
return routes.map((prop, key) => {
return (
<NavLink key={key} to={prop.layout + prop.path}>
<ListItem pt='5px' ms='26px' key={key}>
<Text
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
fontWeight={activeRoute(prop.path.toLowerCase()) ? 'bold' : 'normal'}
fontSize='sm'>
{prop.name}
</Text>
</ListItem>
</NavLink>
);
});
};
const { logo, display, routes } = props;
let links = <Box>{createLinks(routes)}</Box>;
// BRAND
// Chakra Color Mode
let hamburgerColor = 'white';
var brand = (
<Box pt={'25px'} mb='12px'>
{logo}
<HSeparator my='26px' />
</Box>
);
// SIDEBAR
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = React.useRef();
// Color variables
return (
<Box display={display}>
<Box display={{ sm: 'flex', xl: 'none' }} ms='8px'>
<HamburgerIcon
color={hamburgerColor}
w='18px'
h='18px'
me='16px'
ref={btnRef}
cursor='pointer'
onClick={onOpen}
/>
<Drawer
placement={document.documentElement.dir === 'rtl' ? 'right' : 'left'}
isOpen={isOpen}
onClose={onClose}
finalFocusRef={btnRef}>
<DrawerOverlay />
<DrawerContent
w='250px'
bg={sidebarBackgroundColor}
maxW='250px'
ms={{
sm: '16px'
}}
my={{
sm: '16px'
}}
borderRadius='16px'>
<DrawerCloseButton _focus={{ boxShadow: 'none' }} _hover={{ boxShadow: 'none' }} />
<DrawerBody maxW='250px' px='1rem'>
<Box maxW='100%' h='100vh'>
<Box mb='20px'>{brand}</Box>
<Stack direction='column' mb='40px'>
<Box>{links}</Box>
</Stack>
<SidebarDocs />
</Box>
</DrawerBody>
</DrawerContent>
</Drawer>
</Box>
</Box>
);
}
// PROPS
export default Sidebar;

45
src/components/Sidebar/SidebarDocs.js
View File

@@ -1,45 +0,0 @@
import {
Button,
Flex,
Image,
Link,
Stack,
Text,
useColorModeValue,
} from "@chakra-ui/react";
import SidebarHelpImage from "assets/img/SidebarHelpImage.png";
import { SidebarContext } from "contexts/SidebarContext";
import React, { useContext } from "react";
export default function SidebarDocs({ landing }) {
const textColor = useColorModeValue("gray.700", "white");
const { sidebarWidth } = useContext(SidebarContext);
return (
<Flex
justify='center'
direction='column'
align='center'
display={sidebarWidth !== 275 && "none"}
>
<Image src={SidebarHelpImage} w='165px' ms="24px" />
<Flex direction='column' align="center" textAlign='center' mb="12px" me="24px">
<Text fontSize='14px' color={landing ? "white" : textColor} fontWeight='bold'>
Need help?
</Text>
<Text fontSize='12px' color={landing ? "white" : 'gray.500'}>
Please check our docs.
</Text>
</Flex>
<Link href='#' >
<Button variant={landing ? "light" : 'primary'} mb={{ sm: "12px", xl: "16px" }} color={landing && "blue.500"} fontWeight="bold" minW="185px" ms="24px">
DOCUMENTATION
</Button>
</Link>
</Flex>
);
}

15
src/components/Subscription/SubscriptionBadge.js
View File

@@ -4,16 +4,9 @@ import { Box, Text, Tooltip, useColorModeValue } from '@chakra-ui/react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
export default function SubscriptionBadge({ subscriptionInfo, onClick }) { export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
// 🔍 调试：输出接收到的 props
console.log('🎯 [SubscriptionBadge] 接收到的 subscriptionInfo:', subscriptionInfo);
console.log('🎯 [SubscriptionBadge] subscriptionInfo.type:', subscriptionInfo?.type, '类型:', typeof subscriptionInfo?.type);
// 根据订阅类型返回样式配置 // 根据订阅类型返回样式配置
const getBadgeStyles = () => { const getBadgeStyles = () => {
console.log('🔧 [SubscriptionBadge] getBadgeStyles 执行, type:', subscriptionInfo.type);
if (subscriptionInfo.type === 'max') { if (subscriptionInfo.type === 'max') {
console.log('✅ [SubscriptionBadge] 匹配到 MAX');
return { return {
bg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', bg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
color: 'white', color: 'white',
@@ -24,7 +17,6 @@ export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
}; };
} }
if (subscriptionInfo.type === 'pro') { if (subscriptionInfo.type === 'pro') {
console.log('✅ [SubscriptionBadge] 匹配到 PRO');
return { return {
bg: 'linear-gradient(135deg, #667eea 0%, #3182CE 100%)', bg: 'linear-gradient(135deg, #667eea 0%, #3182CE 100%)',
color: 'white', color: 'white',
@@ -35,7 +27,6 @@ export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
}; };
} }
// 基础版 // 基础版
console.log('⚠️ [SubscriptionBadge] 使用默认基础版');
return { return {
bg: 'transparent', bg: 'transparent',
color: useColorModeValue('gray.600', 'gray.400'), color: useColorModeValue('gray.600', 'gray.400'),
@@ -49,7 +40,6 @@ export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
}; };
const styles = getBadgeStyles(); const styles = getBadgeStyles();
console.log('🎨 [SubscriptionBadge] styles 对象:', styles);
// 智能动态 Tooltip 文本 // 智能动态 Tooltip 文本
const getTooltipText = () => { const getTooltipText = () => {
@@ -118,10 +108,7 @@ export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
}} }}
> >
{styles.icon && <span style={{ marginRight: '4px' }}>{styles.icon}</span>} {styles.icon && <span style={{ marginRight: '4px' }}>{styles.icon}</span>}
{(() => { {styles.label}
console.log('📝 [SubscriptionBadge] 渲染文本:', styles.label);
return styles.label;
})()}
</Box> </Box>
</Tooltip> </Tooltip>
); );

222
src/layouts/Admin.js
View File

@@ -1,222 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra imports
import { Portal, Box, useColorMode, Stack, useDisclosure, useColorModeValue } from '@chakra-ui/react';
import Configurator from 'components/Configurator/Configurator';
import FixedPlugin from 'components/FixedPlugin/FixedPlugin';
import Footer from 'components/Footer/Footer.js';
// Custom components
import MainPanel from 'components/Layout/MainPanel';
import PanelContainer from 'components/Layout/PanelContainer';
import PanelContent from 'components/Layout/PanelContent';
// Layout components
import AdminNavbar from 'components/Navbars/AdminNavbar.js';
import Sidebar from 'components/Sidebar/Sidebar.js';
import { SidebarContext } from 'contexts/SidebarContext';
import React, { useState, Suspense } from 'react';
import 'react-quill/dist/quill.snow.css'; // ES6
import { Route, Routes, Navigate } from "react-router-dom";
import routes from 'routes.js';
import PageLoader from 'components/Loading/PageLoader';
import {
ArgonLogoDark,
ArgonLogoLight,
ChakraLogoDark,
ChakraLogoLight,
ArgonLogoMinifiedDark,
ArgonLogoMinifiedLight
} from 'components/Icons/Icons';
// Custom Chakra theme
export default function Dashboard(props) {
const { ...rest } = props;
// states and functions
const [ fixed, setFixed ] = useState(false);
const [ toggleSidebar, setToggleSidebar ] = useState(false);
const [ sidebarWidth, setSidebarWidth ] = useState(275);
// 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].items);
if (collapseActiveRoute !== activeRoute) {
return collapseActiveRoute;
}
} else if (routes[i].category) {
let categoryActiveRoute = getActiveRoute(routes[i].items);
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].collapse) {
let collapseActiveNavbar = getActiveNavbar(routes[i].items);
if (collapseActiveNavbar !== activeNavbar) {
return collapseActiveNavbar;
}
} else if (routes[i].category) {
let categoryActiveNavbar = getActiveNavbar(routes[i].items);
if (categoryActiveNavbar !== activeNavbar) {
return categoryActiveNavbar;
}
} else {
if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
return routes[i].secondaryNavbar;
}
}
}
return activeNavbar;
};
const getRoutes = (routes) => {
return routes.map((route, key) => {
if (route.layout === '/admin') {
// ⚡ 懒加载组件需要包裹在 Suspense 中
const Component = route.component;
return (
<Route
path={route.path}
element={
<Suspense fallback={<PageLoader message="加载中..." />}>
<Component />
</Suspense>
}
key={key}
/>
);
}
if (route.collapse) {
return getRoutes(route.items);
}
if (route.category) {
return getRoutes(route.items);
} else {
return null;
}
});
};
let bgBoxHeight = '40vh';
let bgBoxColor = useColorModeValue('blue.500', 'navy.900');
const { isOpen, onOpen, onClose } = useDisclosure();
const { colorMode } = useColorMode();
document.documentElement.dir = 'ltr';
document.documentElement.layout = 'admin';
// Chakra Color Mode
return (
<Box>
<SidebarContext.Provider
value={{
sidebarWidth,
setSidebarWidth,
toggleSidebar,
setToggleSidebar
}}>
<Box minH={bgBoxHeight} h='100% !important' w='100%' position='absolute' bg={bgBoxColor} top='0' />
<Sidebar
routes={routes}
logo={
sidebarWidth === 275 ? (
<Stack direction='row' spacing='12px' align='center' justify='center'>
{colorMode === 'dark' ? (
<ArgonLogoLight w='74px' h='27px' />
) : (
<ArgonLogoDark w='74px' h='27px' />
)}
<Box w='1px' h='20px' bg={colorMode === 'dark' ? 'white' : 'gray.700'} />
{colorMode === 'dark' ? (
<ChakraLogoLight w='82px' h='21px' />
) : (
<ChakraLogoDark w='82px' h='21px' />
)}
</Stack>
) : colorMode === 'light' ? (
<ArgonLogoMinifiedDark w='36px' h='36px' />
) : (
<ArgonLogoMinifiedLight w='36px' h='36px' />
)
}
display='none'
{...rest}
/>
<MainPanel
w={{
base: '100%',
xl: `calc(100% - ${sidebarWidth}px)`
}}>
<Portal>
<Box>
<AdminNavbar
onOpen={onOpen}
logoText={'Argon Dashboard Chakra PRO'}
brandText={getActiveRoute(routes)}
secondary={getActiveNavbar(routes)}
fixed={fixed}
{...rest}
/>
</Box>
</Portal>
{getRoute() ? (
<PanelContent>
<PanelContainer>
<Routes>
{getRoutes(routes)}
<Route
path="/"
element={<Navigate to="/admin/dashboard/default" replace />}
/>
</Routes>
</PanelContainer>
</PanelContent>
) : null}
<Box>
<Footer />
</Box>
<Portal>
<Box>
<FixedPlugin fixed={fixed} onOpen={onOpen} />
</Box>
</Portal>
<Configurator
secondary={getActiveNavbar(routes)}
isOpen={isOpen}
onClose={onClose}
isChecked={fixed}
onSwitch={(value) => {
setFixed(value);
}}
/>
</MainPanel>
</SidebarContext.Provider>
</Box>
);
}

257
src/layouts/RTL.js
View File

@@ -1,257 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra imports
import {
Portal,
Box,
useColorMode,
Stack,
useDisclosure,
useColorModeValue,
} from "@chakra-ui/react";
import Configurator from "components/Configurator/Configurator";
import FixedPlugin from "components/FixedPlugin/FixedPlugin";
import Footer from "components/Footer/Footer.js";
// Custom components
import MainPanel from "components/Layout/MainPanel";
import PanelContainer from "components/Layout/PanelContainer";
import PanelContent from "components/Layout/PanelContent";
// Layout components
import AdminNavbar from "components/Navbars/AdminNavbar.js";
import Sidebar from "components/Sidebar/Sidebar.js";
import { SidebarContext } from "contexts/SidebarContext";
import React, { useState, Suspense } from "react";
import "react-quill/dist/quill.snow.css"; // ES6
import { Route, Routes, Navigate } from "react-router-dom";
import routes from "routes.js";
import PageLoader from "components/Loading/PageLoader";
import {
ArgonLogoDark,
ArgonLogoLight,
ChakraLogoDark,
ChakraLogoLight,
ArgonLogoMinifiedDark,
ArgonLogoMinifiedLight,
} from "components/Icons/Icons";
import { RtlProvider } from "components/RTLProvider/RTLProvider";
export default function Dashboard(props) {
const { ...rest } = props;
// states and functions
const [sidebarVariant, setSidebarVariant] = useState("transparent");
const [fixed, setFixed] = useState(false);
const [toggleSidebar, setToggleSidebar] = useState(false);
const [sidebarWidth, setSidebarWidth] = useState(275);
// ref for main panel div
const mainPanel = React.createRef();
const { colorMode } = useColorMode();
// functions for changing the states from components
const getRoute = () => {
return window.location.pathname !== "/rtl/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].items);
if (collapseActiveRoute !== activeRoute) {
return collapseActiveRoute;
}
} else if (routes[i].category) {
let categoryActiveRoute = getActiveRoute(routes[i].items);
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].items);
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((route, key) => {
if (route.layout === "/rtl") {
const Component = route.component;
return (
<Route
path={route.path}
element={
<Suspense fallback={<PageLoader message="加载中..." />}>
<Component />
</Suspense>
}
key={key}
/>
);
}
if (route.collapse) {
return getRoutes(route.items);
}
if (route.category) {
return getRoutes(route.items);
} else {
return null;
}
});
};
const { isOpen, onOpen, onClose } = useDisclosure();
document.body.style.backgroundColor = useColorModeValue(
"gray.50",
"gray.800"
);
document.documentElement.dir = "rtl";
document.documentElement.layout = "rtl";
let bgBoxHeight = "40vh";
let bgBoxColor = useColorModeValue("blue.500", "navy.900");
// Chakra Color Mode
return (
<>
<RtlProvider>
<SidebarContext.Provider
value={{
sidebarWidth,
setSidebarWidth,
toggleSidebar,
setToggleSidebar,
}}>
<Box
minH={bgBoxHeight}
h='100% !important'
w='100%'
position='absolute'
bg={bgBoxColor}
top='0'
/>
<Sidebar
routes={routes}
logo={
sidebarWidth === 275 ? (
<Stack
direction='row'
spacing='12px'
align='center'
justify='center'>
{colorMode === "dark" ? (
<ArgonLogoLight w='74px' h='27px' />
) : (
<ArgonLogoDark w='74px' h='27px' />
)}
<Box
w='1px'
h='20px'
bg={colorMode === "dark" ? "white" : "gray.700"}
/>
{colorMode === "dark" ? (
<ChakraLogoLight w='82px' h='21px' />
) : (
<ChakraLogoDark w='82px' h='21px' />
)}
</Stack>
) : colorMode === "light" ? (
<ArgonLogoMinifiedDark w='36px' h='36px' />
) : (
<ArgonLogoMinifiedLight w='36px' h='36px' />
)
}
display='none'
{...rest}
/>
<MainPanel
ref={mainPanel}
w={{
base: "100%",
xl: `calc(100% - ${sidebarWidth}px)`,
}}
variant='rtl'>
<Portal>
<Box>
<AdminNavbar
onOpen={onOpen}
logoText={"Argon Dashboard Chakra PRO"}
brandText={getActiveRoute(routes)}
secondary={getActiveNavbar(routes)}
fixed={fixed}
{...rest}
/>
</Box>
</Portal>
{getRoute() ? (
<PanelContent>
<PanelContainer>
<Routes>
{getRoutes(routes)}
<Route
path="/"
element={<Navigate to="/admin/dashboard/default" replace />}
/>
</Routes>
</PanelContainer>
</PanelContent>
) : null}
<Box>
<Footer />
</Box>
<Portal>
<Box>
<FixedPlugin fixed={fixed} onOpen={onOpen} />
</Box>
</Portal>
<Configurator
secondary={getActiveNavbar(routes)}
isOpen={isOpen}
onClose={onClose}
isChecked={fixed}
onSwitch={(value) => {
setFixed(value);
}}
/>
</MainPanel>
</SidebarContext.Provider>
</RtlProvider>
</>
);
}

608
src/routes.js
View File

@@ -15,609 +15,13 @@
*/ */
// ⚡ 使用 React.lazy() 实现路由懒加载
// 按需加载组件，大幅减少初始 JS 包大小
import React from "react"; import React from "react";
import {
CartIcon,
DocumentIcon,
HomeIcon,
PersonIcon,
StatsIcon,
} from "components/Icons/Icons";
// ⚡ 懒加载所有页面组件 // ⚠️ Admin 布局已移除
const Calendar = React.lazy(() => import("views/Applications/Calendar")); // 实际路由配置现在在 /src/App.js 中
const DataTables = React.lazy(() => import("views/Applications/DataTables")); // 此文件保留仅为兼容可能的旧引用
const Kanban = React.lazy(() => import("views/Applications/Kanban.js"));
const Wizard = React.lazy(() => import("views/Applications/Wizard.js")); // 导出空数组以保持向后兼容
const SignInBasic = React.lazy(() => import("views/Authentication/SignIn/SignInBasic.js")); const dashRoutes = [];
const SignInCover = React.lazy(() => import("views/Authentication/SignIn/SignInCover.js"));
const SignInIllustration = React.lazy(() => import("views/Authentication/SignIn/SignInIllustration.js"));
const LockBasic = React.lazy(() => import("views/Authentication/Lock/LockBasic.js"));
const LockCover = React.lazy(() => import("views/Authentication/Lock/LockCover.js"));
const LockIllustration = React.lazy(() => import("views/Authentication/Lock/LockIllustration.js"));
const ResetBasic = React.lazy(() => import("views/Authentication/Reset/ResetBasic.js"));
const ResetCover = React.lazy(() => import("views/Authentication/Reset/ResetCover.js"));
const ResetIllustration = React.lazy(() => import("views/Authentication/Reset/ResetIllustration.js"));
const VerificationBasic = React.lazy(() => import("views/Authentication/Verification/VerificationBasic.js"));
const VerificationCover = React.lazy(() => import("views/Authentication/Verification/VerificationCover.js"));
const VerificationIllustration = React.lazy(() => import("views/Authentication/Verification/VerificationIllustration.js"));
const SignUpBasic = React.lazy(() => import("views/Authentication/SignUp/SignUpBasic.js"));
const SignUpCover = React.lazy(() => import("views/Authentication/SignUp/SignUpCover.js"));
const SignUpIllustration = React.lazy(() => import("views/Authentication/SignUp/SignUpIllustration.js"));
const Automotive = React.lazy(() => import("views/Dashboard/Automotive"));
const CRM = React.lazy(() => import("views/Dashboard/CRM.js"));
const Default = React.lazy(() => import("views/Dashboard/Default.js"));
const Landing = React.lazy(() => import("views/Dashboard/Landing.js"));
const OrderDetails = React.lazy(() => import("views/Ecommerce/Orders/OrderDetails"));
const OrderList = React.lazy(() => import("views/Ecommerce/Orders/OrderList"));
const EditProduct = React.lazy(() => import("views/Ecommerce/Products/EditProduct"));
const NewProduct = React.lazy(() => import("views/Ecommerce/Products/NewProduct"));
const ProductPage = React.lazy(() => import("views/Ecommerce/Products/ProductPage"));
const Billing = React.lazy(() => import("views/Pages/Account/Billing.js"));
const Subscription = React.lazy(() => import("views/Pages/Account/Subscription.js"));
const Invoice = React.lazy(() => import("views/Pages/Account/Invoice.js"));
const Settings = React.lazy(() => import("views/Pages/Account/Settings.js"));
const Alerts = React.lazy(() => import("views/Pages/Alerts"));
const Charts = React.lazy(() => import("views/Pages/Charts.js"));
const Pricing = React.lazy(() => import("views/Pages/Pricing.js"));
const Overview = React.lazy(() => import("views/Pages/Profile/Overview.js"));
const Projects = React.lazy(() => import("views/Pages/Profile/Projects.js"));
const Teams = React.lazy(() => import("views/Pages/Profile/Teams.js"));
const General = React.lazy(() => import("views/Pages/Projects/General.js"));
const Timeline = React.lazy(() => import("views/Pages/Projects/Timeline.js"));
const RTLPage = React.lazy(() => import("views/Pages/RTLPage.js"));
const NewUser = React.lazy(() => import("views/Pages/Users/NewUser.js"));
const Reports = React.lazy(() => import("views/Pages/Users/Reports.js"));
const Widgets = React.lazy(() => import("views/Pages/Widgets.js"));
const SmartHome = React.lazy(() => import("views/Dashboard/SmartHome"));
const ConceptCenter = React.lazy(() => import("views/Concept"));
const ProfilePage = React.lazy(() => import("views/Profile/ProfilePage"));
const SettingsPage = React.lazy(() => import("views/Settings/SettingsPage"));
const LimitAnalyse = React.lazy(() => import("views/LimitAnalyse"));
const Community = React.lazy(() => import("views/Community"));
const ForecastReport = React.lazy(() => import("views/Company/ForecastReport"));
const FinancialPanorama = React.lazy(() => import("views/Company/FinancialPanorama"));
const CompanyIndex = React.lazy(() => import("views/Company"));
const MarketDataView = React.lazy(() => import("views/Company/MarketDataView"));
const StockOverview = React.lazy(() => import("views/StockOverview"));
const TradingSimulation = React.lazy(() => import("views/TradingSimulation"));
const PrivacyPolicy = React.lazy(() => import("views/Pages/PrivacyPolicy"));
const UserAgreement = React.lazy(() => import("views/Pages/UserAgreement"));
const WechatCallback = React.lazy(() => import("views/Pages/WechatCallback"));
const dashRoutes = [
{
name: "Dashboard",
path: "/dashboard",
icon: <HomeIcon color="inherit" />,
authIcon: <HomeIcon color="inherit" />,
collapse: true,
items: [
{
name: "Landing Page",
path: "/dashboard/landing",
component: Landing,
layout: "/landing",
},
{
name: "Default",
path: "/dashboard/default",
component: Default,
layout: "/admin",
},
{
name: "Automotive",
path: "/dashboard/automotive",
component: Automotive,
layout: "/admin",
},
{
name: "Smart Home",
path: "/dashboard/smart-home",
component: SmartHome,
layout: "/admin",
},
{
name: "CRM",
path: "/dashboard/crm",
component: CRM,
layout: "/admin",
},
],
},
{
name: "股票分析",
path: "/stock-analysis",
icon: <StatsIcon color="inherit" />,
authIcon: <StatsIcon color="inherit" />,
collapse: true,
items: [
{
name: "股票概览",
path: "/stock-analysis/overview",
component: StockOverview,
layout: "/admin",
},
{
name: "个股信息",
path: "/stock-analysis/company",
component: CompanyIndex,
layout: "/admin",
},
{
name: "股票行情",
path: "/stock-analysis/market-data",
component: MarketDataView,
layout: "/admin",
},
{
name: "涨停分析",
path: "/stock-analysis/limit-analyse",
component: LimitAnalyse,
layout: "/admin",
},
{
name: "盈利预测报表",
path: "/stock-analysis/forecast-report",
component: ForecastReport,
layout: "/admin",
},
{
name: "盈利预测报表",
path: "/stock-analysis/Financial-report",
component: FinancialPanorama,
layout: "/admin",
},
],
},
{
name: "概念中心",
path: "/concepts",
icon: <StatsIcon color="inherit" />, // 或者使用其他图标
authIcon: <StatsIcon color="inherit" />,
collapse: false,
component: ConceptCenter,
layout: "/admin",
},
{
name: "事件社区",
path: "/community",
icon: <StatsIcon color="inherit" />,
authIcon: <StatsIcon color="inherit" />,
collapse: false,
component: Community,
layout: "/admin",
},
{
name: "模拟盘交易",
path: "/trading-simulation",
icon: <CartIcon color="inherit" />,
authIcon: <CartIcon color="inherit" />,
collapse: false,
component: TradingSimulation,
layout: "/home",
},
{
name: "个人资料",
path: "/profile",
icon: <PersonIcon color="inherit" />,
component: ProfilePage,
layout: "/admin",
invisible: true, // 不在侧边栏显示
},
{
name: "账户设置",
path: "/settings",
icon: <StatsIcon color="inherit" />,
component: SettingsPage,
layout: "/admin",
invisible: true, // 不在侧边栏显示
},
{
name: "隐私政策",
path: "/privacy-policy",
icon: <DocumentIcon color="inherit" />,
component: PrivacyPolicy,
layout: "/home",
invisible: true, // 不在侧边栏显示
},
{
name: "用户协议",
path: "/user-agreement",
icon: <DocumentIcon color="inherit" />,
component: UserAgreement,
layout: "/home",
invisible: true, // 不在侧边栏显示
},
{
name: "微信授权回调",
path: "/wechat-callback",
icon: <DocumentIcon color="inherit" />,
component: WechatCallback,
layout: "/home",
invisible: true, // 不在侧边栏显示
},
{
name: "PAGES",
category: "pages",
items: [
{
name: "Pages",
path: "/pages",
collapse: true,
icon: <DocumentIcon color="inherit" />,
items: [
{
name: "Profile",
path: "/profile",
collapse: true,
authIcon: <HomeIcon color="inherit" />,
items: [
{
name: "Profile Overview",
secondaryNavbar: true,
path: "/pages/profile/overview",
component: Overview,
layout: "/admin",
},
{
name: "Teams",
secondaryNavbar: true,
path: "/pages/profile/teams",
component: Teams,
layout: "/admin",
},
{
name: "All Projects",
secondaryNavbar: true,
path: "/pages/profile/profile-projects",
component: Projects,
layout: "/admin",
},
],
},
{
name: "Users",
path: "/users",
collapse: true,
authIcon: <PersonIcon color="inherit" />,
items: [
{
name: "Reports",
path: "/pages/users/reports",
component: Reports,
layout: "/admin",
},
{
name: "New User",
path: "/pages/users/new-user",
component: NewUser,
layout: "/admin",
},
],
},
{
name: "Account",
path: "/account",
collapse: true,
authIcon: <PersonIcon color="inherit" />,
items: [
{
name: "Settings",
path: "/pages/account/settings",
component: Settings,
layout: "/admin",
},
{
name: "Billing",
component: Billing,
path: "/pages/account/billing",
layout: "/admin",
},
{
name: "Subscription",
component: Subscription,
path: "/pages/account/subscription",
layout: "/home",
},
{
name: "Invoice",
component: Invoice,
path: "/pages/account/invoice",
layout: "/admin",
},
],
},
{
name: "Projects",
path: "/projects",
collapse: true,
authIcon: <StatsIcon color="inherit" />,
items: [
{
name: "General",
path: "/pages/projects/general",
component: General,
layout: "/admin",
},
{
name: "Timeline",
path: "/pages/projects/timeline",
component: Timeline,
layout: "/admin",
},
],
},
{
name: "Pricing Page",
component: Pricing,
path: "/pages/pricing-page",
layout: "/auth",
},
{
name: "RTL",
component: RTLPage,
path: "/pages/rtl-support-page",
layout: "/rtl",
},
{
name: "Widgets",
component: Widgets,
path: "/pages/widgets",
layout: "/admin",
},
{
name: "Charts",
component: Charts,
path: "/pages/charts",
layout: "/admin",
},
{
name: "Alerts",
path: "/pages/alerts",
component: Alerts,
layout: "/admin",
},
],
},
{
name: "Applications",
path: "/applications",
icon: <StatsIcon color="inherit" />,
collapse: true,
items: [
{
name: "Kanban",
component: Kanban,
authIcon: <DocumentIcon color="inherit" />,
path: "/applications/kanban",
layout: "/admin",
},
{
name: "Wizard",
component: Wizard,
authIcon: <CartIcon color="inherit" />,
path: "/applications/wizard",
layout: "/admin",
},
{
name: "Data Tables",
path: "/applications/data-tables",
authIcon: <PersonIcon color="inherit" />,
component: DataTables,
layout: "/admin",
},
{
name: "Calendar",
component: Calendar,
authIcon: <StatsIcon color="inherit" />,
path: "/applications/calendar",
layout: "/admin",
},
],
},
{
name: "Ecommerce",
path: "/ecommerce",
icon: <CartIcon color="inherit" />,
collapse: true,
items: [
{
name: "Products",
path: "/products",
collapse: true,
authIcon: <DocumentIcon color="inherit" />,
items: [
{
name: "New Product",
component: NewProduct,
secondaryNavbar: true,
path: "/ecommerce/products/new-product",
layout: "/admin",
},
{
name: "Edit Product",
component: EditProduct,
path: "/ecommerce/products/edit-product",
layout: "/admin",
},
{
name: "Product Page",
component: ProductPage,
path: "/ecommerce/products/product-page",
layout: "/admin",
},
],
},
{
name: "Orders",
path: "/orders",
collapse: true,
authIcon: <StatsIcon color="inherit" />,
items: [
{
name: "Order List",
component: OrderList,
path: "/ecommerce/orders/order-list",
layout: "/admin",
},
{
name: "Order Details",
component: OrderDetails,
path: "/ecommerce/orders/order-details",
layout: "/admin",
},
],
},
],
},
{
name: "Authentication",
path: "/authentication",
icon: <PersonIcon color="inherit" />,
collapse: true,
items: [
{
name: "Sign In",
path: "/authentication/sign-in",
collapse: true,
authIcon: <DocumentIcon color="inherit" />,
items: [
{
name: "Basic",
component: SignInBasic,
path: "/authentication/sign-in/basic",
layout: "/auth",
},
{
name: "Cover",
component: SignInCover,
path: "/authentication/sign-in/cover",
layout: "/auth",
},
{
name: "Illustration",
component: SignInIllustration,
secondaryNavbar: true,
path: "/authentication/sign-in/illustration",
layout: "/auth",
},
],
},
{
name: "Sign Up",
path: "/authentication/sign-up",
collapse: true,
authIcon: <DocumentIcon color="inherit" />,
items: [
{
name: "Basic",
component: SignUpBasic,
path: "/authentication/sign-up/basic",
layout: "/auth",
},
{
name: "Cover",
component: SignUpCover,
path: "/authentication/sign-up/cover",
layout: "/auth",
},
{
name: "Illustration",
secondaryNavbar: true,
component: SignUpIllustration,
path: "/authentication/sign-up/illustration",
layout: "/auth",
},
],
},
{
name: "Reset password",
path: "/authentication/reset",
collapse: true,
authIcon: <DocumentIcon color="inherit" />,
items: [
{
name: "Basic",
component: ResetBasic,
path: "/authentication/reset/basic",
layout: "/auth",
},
{
name: "Cover",
component: ResetCover,
path: "/authentication/reset/cover",
layout: "/auth",
},
{
name: "Illustration",
secondaryNavbar: true,
component: ResetIllustration,
path: "/authentication/reset/illustration",
layout: "/auth",
},
],
},
{
name: "Lock",
path: "/authentication/lock",
collapse: true,
authIcon: <DocumentIcon color="inherit" />,
items: [
{
name: "Basic",
component: LockBasic,
path: "/authentication/lock/basic",
layout: "/auth",
},
{
name: "Cover",
component: LockCover,
path: "/authentication/lock/cover",
layout: "/auth",
},
{
name: "Illustration",
secondaryNavbar: true,
component: LockIllustration,
path: "/authentication/lock/illustration",
layout: "/auth",
},
],
},
{
name: "2-Step Verification",
path: "/authentication/verification",
collapse: true,
authIcon: <DocumentIcon color="inherit" />,
items: [
{
name: "Basic",
component: VerificationBasic,
path: "/authentication/verification/basic",
layout: "/auth",
},
{
name: "Cover",
component: VerificationCover,
path: "/authentication/verification/cover",
layout: "/auth",
},
{
name: "Illustration",
secondaryNavbar: true,
component: VerificationIllustration,
path: "/authentication/verification/illustration",
layout: "/auth",
},
],
},
],
},
],
},
];
export default dashRoutes; export default dashRoutes;

264
src/views/Applications/Calendar.js
View File

@@ -1,264 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra imports
import { AddIcon } from '@chakra-ui/icons';
import {
Avatar,
AvatarGroup,
Box,
Flex,
Grid,
Icon,
IconButton,
Stack,
Text,
useColorModeValue,
} from '@chakra-ui/react';
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 EventCalendar from 'components/Calendars/EventCalendar';
// Custom components
import Card from 'components/Card/Card';
import CardBody from 'components/Card/CardBody';
import CardHeader from 'components/Card/CardHeader';
import LineChart from 'components/Charts/LineChart';
import IconBox from 'components/Icons/IconBox';
import { ClockIcon, DocumentIcon, WalletIcon } from 'components/Icons/Icons';
import { VSeparator } from 'components/Separator/Separator';
import React from 'react';
import { FaPalette, FaShip } from 'react-icons/fa';
import { calendarDataCalendar } from 'variables/calendar';
import {
lineChartDataCalendar,
lineChartOptionsCalendar,
} from 'variables/charts';
function Calendar() {
const textColor = useColorModeValue('gray.700', 'white');
const iconBlue = useColorModeValue('blue.500', 'white');
const iconBoxColor = useColorModeValue('gray.100', 'blue.500');
const bgCard = useColorModeValue(
'linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)',
'navy.800'
);
return (
<Flex direction='column' pt={{ sm: '125px', lg: '75px' }}>
<Flex w='100%' align='flex-end' justify='flex-end' mb='24px'>
<Flex
ms='auto'
align='center'
justify='center'
me='25px'
mb={{ sm: '16px', md: '50px' }}
>
<Flex direction='column' me='25px'>
<Text fontSize='sm' color='white' fontWeight='bold' mb='8px'>
Team Members:
</Text>
<AvatarGroup size='sm'>
<Avatar
borderColor={useColorModeValue('blue.500', 'navy.900')}
src={avatar1}
/>
<Avatar
borderColor={useColorModeValue('blue.500', 'navy.900')}
src={avatar2}
/>
<Avatar
borderColor={useColorModeValue('blue.500', 'navy.900')}
src={avatar3}
/>
</AvatarGroup>
</Flex>
<VSeparator h='56px' me='25px' />
<IconButton
w='40px'
h='40px'
bg={useColorModeValue('white', 'blue.500')}
aria-label='Search database'
icon={
<AddIcon
w='12px'
h='12px'
color={useColorModeValue('blue.500', 'white')}
/>
}
/>
</Flex>
</Flex>
<Grid templateColumns={{ sm: '1fr', lg: '2fr 1fr' }} gap='24px'>
<Card minH='570px'>
<CardHeader mb='6px'>
<Flex direction='column'>
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='6px'>
Calendar
</Text>
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
Wednesday, 2022
</Text>
</Flex>
</CardHeader>
<CardBody position='relative' display='block' height='100%'>
<EventCalendar
initialDate='2022-10-01'
calendarData={calendarDataCalendar}
/>
</CardBody>
</Card>
<Stack
direction={{ sm: 'column', md: 'row', lg: 'column' }}
spacing='24px'
>
<Card>
<CardHeader>
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='28px'>
Upcoming events
</Text>
</CardHeader>
<CardBody>
<Stack direction='column' spacing='20px'>
<Flex align='center'>
<IconBox h={'50px'} w={'50px'} bg={iconBoxColor} me='16px'>
<Icon
as={WalletIcon}
h={'22px'}
w={'22px'}
color={iconBlue}
/>
</IconBox>
<Flex direction='column'>
<Text color={textColor} fontSize='sm' fontWeight='bold'>
Cyber Week
</Text>
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
27 March 2020, at 12:30 PM
</Text>
</Flex>
</Flex>
<Flex align='center'>
<IconBox h={'50px'} w={'50px'} bg={iconBoxColor} me='16px'>
<Icon
as={ClockIcon}
h={'22px'}
w={'22px'}
color={iconBlue}
/>
</IconBox>
<Flex direction='column'>
<Text color={textColor} fontSize='sm' fontWeight='bold'>
Meeting with Marry
</Text>
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
22 March 2020, at 10:00 PM
</Text>
</Flex>
</Flex>
<Flex align='center' mb='22px'>
<IconBox h={'50px'} w={'50px'} bg={iconBoxColor} me='16px'>
<Icon
as={DocumentIcon}
h={'22px'}
w={'22px'}
color={iconBlue}
/>
</IconBox>
<Flex direction='column'>
<Text color={textColor} fontSize='sm' fontWeight='bold'>
Book Deposit Hall
</Text>
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
25 March 2022, at 9:30 AM
</Text>
</Flex>
</Flex>
<Flex align='center' mb='22px'>
<IconBox h={'50px'} w={'50px'} bg={iconBoxColor} me='16px'>
<Icon as={FaShip} h={'22px'} w={'22px'} color={iconBlue} />
</IconBox>
<Flex direction='column'>
<Text color={textColor} fontSize='sm' fontWeight='bold'>
Shipment Deal UK
</Text>
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
25 March 2022, at 2:00 PM
</Text>
</Flex>
</Flex>
<Flex align='center' mb='22px'>
<IconBox h={'50px'} w={'50px'} bg={iconBoxColor} me='16px'>
<Icon
as={FaPalette}
h={'22px'}
w={'22px'}
color={iconBlue}
/>
</IconBox>
<Flex direction='column'>
<Text color={textColor} fontSize='sm' fontWeight='bold'>
Verify Dashboard Color Palette
</Text>
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
26 March 2022, at 9:00 AM
</Text>
</Flex>
</Flex>
</Stack>
</CardBody>
</Card>
<Card
px='0px'
pb='0px'
bg={bgCard}
minH='230px'
alignSelf='flex-start'
>
<CardHeader px='22px'>
<Flex direction='column'>
<Text fontSize='lg' color='#fff' fontWeight='bold'>
Productivity
</Text>
<Text color='#fff' fontSize='sm' fontWeight='normal'>
<Text as='span' color='green.400' fontWeight='bold'>
+4%
</Text>
<Text as='span' fontWeight='bold'>
{' '}
more{' '}
</Text>
in 2022
</Text>
</Flex>
</CardHeader>
<CardBody>
<Box w='100%'>
<LineChart
chartData={lineChartDataCalendar}
chartOptions={lineChartOptionsCalendar}
/>
</Box>
</CardBody>
</Card>
</Stack>
</Grid>
</Flex>
);
}
export default Calendar;

70
src/views/Applications/DataTables.js
View File

@@ -1,70 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra imports
import { Flex, Text, useColorModeValue } from "@chakra-ui/react";
import Card from "components/Card/Card";
import CardBody from "components/Card/CardBody";
import CardHeader from "components/Card/CardHeader";
import BasicTable from "components/Tables/BasicTable";
import SearchTable1 from "components/Tables/SearchTable1";
import React from "react";
import { columnsData1 } from "variables/columnsData";
import tableData1 from "variables/tableData1.json";
function DataTables() {
const textColor = useColorModeValue("gray.700", "white");
return (
<Flex direction="column" pt={{ sm: "125px", lg: "75px" }}>
<Card px="0px" mb="24px">
<CardHeader px="22px" mb="24px">
<Flex direction="column">
<Text color={textColor} fontSize="lg" fontWeight="bold" mb="6px">
Datatable Simple
</Text>
<Text color="gray.400" fontSize="sm" fontWeight="normal">
A lightweight, extendable, dependency-free javascript HTML table
plugin.
</Text>
</Flex>
</CardHeader>
<CardBody>
<BasicTable tableData={tableData1} columnsData={columnsData1} />
</CardBody>
</Card>
<Card px="0px">
<CardHeader px="22px" mb="24px">
<Flex direction="column">
<Text color={textColor} fontSize="lg" fontWeight="bold" mb="6px">
Datatable Search
</Text>
<Text color="gray.400" fontSize="sm" fontWeight="normal">
A lightweight, extendable, dependency-free javascript HTML table
plugin.
</Text>
</Flex>
</CardHeader>
<CardBody>
<SearchTable1 tableData={tableData1} columnsData={columnsData1} />
</CardBody>
</Card>
</Flex>
);
}
export default DataTables;

336
src/views/Applications/Kanban.js
View File

@@ -1,336 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra imports
import Board from '@asseinfo/react-kanban';
import '@asseinfo/react-kanban/dist/styles.css';
import { AddIcon, AttachmentIcon } from '@chakra-ui/icons';
import {
Avatar,
AvatarGroup,
Badge,
Button,
Flex,
FormControl,
IconButton,
Image,
Input,
Text,
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 kanban1 from 'assets/img/kanban1.png';
import kanban2 from 'assets/img/kanban2.png';
import kanban3 from 'assets/img/kanban3.png';
import {
kanbanRenderTrack,
kanbanRenderView,
} from 'components/Scrollbar/Scrollbar';
import { useRef, useState } from 'react';
import { Scrollbars } from 'react-custom-scrollbars-2';
import { logger } from '../../utils/logger';
function Kanban() {
// Chakra color mode
const textGray = useColorModeValue('gray.400', 'white');
const attachementsGray = useColorModeValue('gray.500', 'gray.200');
const kanbanCardBg = useColorModeValue('white', 'navy.700');
const addButton = useColorModeValue('white', 'blue.500');
const addIcon = useColorModeValue('blue.500', 'white');
// Kanban Settings, states, etc.
let initialBoard = {
counter: 9,
columns: [
{
id: 1,
title: 'Backlog',
cards: [
{
id: 1.1,
title: 'Drag me to “In progress” section!',
},
{
id: 1.2,
title: 'Click me to change the title',
},
{
id: 1.3,
image: kanban1,
members: [avatar2, avatar3, avatar4],
status: 'PENDING',
title:
'Website Design: New cards for blog section and profile details!',
attachements: '3',
},
],
},
{
id: 2,
title: 'In progress',
cards: [
{
id: 2.1,
title: 'Fix Firefox Errors!',
members: [avatar2, avatar3, avatar4],
status: 'ERRORS',
attachements: '2',
},
{
id: 2.2,
title: 'Argon UI Dashboard - PRO Version v1.0.1',
},
{
id: 2.3,
image: kanban2,
members: [avatar2, avatar3, avatar4],
status: 'UPDATES',
title:
'Argon UI Update: Add RTL Page and the details about documentation',
attachements: '9',
},
],
},
{
id: 3,
title: 'Done',
cards: [
{
id: 3.1,
title: 'Schedule Black Friday campaign',
},
{
id: 3.2,
image: kanban3,
title:
'Marketing plan: The whole plan for the next weeks & quarter',
attachements: '7',
members: [avatar2, avatar3, avatar4],
status: 'DONE',
},
{
id: 3.3,
title: 'Redesign website page - until tomorrow',
attachements: '7',
members: [avatar2, avatar3, avatar4],
status: 'DONE',
},
{
id: 3.4,
title: 'Resolve RTL Page bugs - Argon',
attachements: '1',
members: [avatar2, avatar3, avatar4],
status: 'DONE',
},
],
},
],
};
const [board, setBoard] = useState(initialBoard);
function onCardNew(newCard) {
const newCardLocal = { id: initialBoard.counter + 1, ...newCard };
initialBoard.counter = initialBoard.counter + 1;
setBoard(initialBoard);
return newCardLocal;
}
// 卡片创建日志处理函数
function handleCardNew(cardData) {
logger.debug('Kanban', '创建新卡片', {
cardId: cardData?.id,
title: cardData?.title,
boardCounter: initialBoard.counter
});
}
return (
<Flex
direction='column'
minH='100vh'
align='center'
pt={{ sm: '125px', lg: '75px' }}
overflow='hidden'
>
<Flex maxWidth='100%'>
<Scrollbars
autoHide
renderTrackHorizontal={kanbanRenderTrack}
renderView={kanbanRenderView}
>
<Board
initialBoard={board}
allowAddCard
onNewCardConfirm={onCardNew}
onCardNew={handleCardNew}
renderColumnHeader={function ({ title }, { addCard }) {
const kanbanForm = useRef(null);
const cardInput = useRef(null);
function kanbanFormOpen() {
kanbanForm.current.style.display = 'flex';
}
function kanbanFormClose() {
kanbanForm.current.style.display = 'none';
}
function formSubmit() {
addCard({ title: cardInput.current.value });
cardInput.current.value = '';
}
return (
<Flex
flexDirection='column'
mb='24px'
fontWeight='bold'
w='100%'
key={title}
>
<Flex justify='space-between' align='center' mb='24px'>
<Text fontSize='lg' mt='5px'>
{title}
</Text>
<IconButton
w='92px'
h='35px'
aria-label='Search database'
variant='no-hover'
bg={addButton}
icon={<AddIcon w='12px' h='12px' color={addIcon} />}
onClick={kanbanFormOpen}
/>
</Flex>
<Flex flexDirection='column' ref={kanbanForm} display='none'>
<FormControl>
<Input
variant='main'
borderRadius='15px'
mb='20px'
bg={kanbanCardBg}
border='none'
ref={cardInput}
/>
<Flex>
<Button
colorScheme='blue'
me='14px'
onClick={formSubmit}
>
Add Card
</Button>
<Button
variant='no-hover'
color={useColorModeValue('gray.700', 'white')}
bg={useColorModeValue('white', 'gray.700')}
onClick={kanbanFormClose}
>
Cancel
</Button>
</Flex>
</FormControl>
</Flex>
</Flex>
);
}}
renderCard={({ image, title, attachements, status, members }) => (
<Flex
mt='10px'
flexDirection='column'
bg={kanbanCardBg}
p='25px'
borderRadius='15px'
w='470px'
key={title}
>
{image ? (
<Image
borderRadius='15px'
w='420px'
h='284px'
src={image}
mb='20px'
/>
) : null}
{status ? (
<Badge
fontSize='10px'
fontWeight='bold'
variant='solid'
mb='16px'
h='28px'
w='94px'
display='flex'
borderRadius='8px'
alignItems='center'
justifyContent='center'
bg={
status === 'ERRORS'
? 'red.500'
: status === 'PENDING'
? 'orange.300'
: status === 'DONE'
? 'green.500'
: status === 'UPDATES'
? 'blue.400'
: 'teal'
}
colorScheme={
status === 'ERRORS'
? 'red'
: status === 'PENDING'
? 'orange'
: status === 'DONE'
? 'green'
: status === 'UPDATES'
? 'blue'
: 'teal'
}
>
{status}
</Badge>
) : null}
<Text fontSize='md' color={textGray}>
{title}
</Text>
{image ? (
members ? (
<Flex justify='space-between' align='center' mt='20px'>
<Flex justify='center' align='center'>
<AttachmentIcon me='2px' color={attachementsGray} />
<Text fontSize='sm' color={attachementsGray}>
{attachements}
</Text>
</Flex>
<AvatarGroup size='sm'>
<Avatar src={avatar2} />
<Avatar src={avatar3} />
<Avatar src={avatar4} />
</AvatarGroup>
</Flex>
) : null
) : null}
</Flex>
)}
/>
</Scrollbars>
</Flex>
</Flex>
);
}
export default Kanban;

680
src/views/Applications/Wizard.js
View File

@@ -1,680 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra imports
import {
Avatar,
Box,
Button,
Checkbox,
Flex,
FormControl,
FormLabel,
Grid,
Icon,
Input,
Stack,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
useColorModeValue,
} from '@chakra-ui/react';
import avatar4 from 'assets/img/avatars/avatar4.png';
// Custom components
import Card from 'components/Card/Card';
import CardBody from 'components/Card/CardBody';
import CardHeader from 'components/Card/CardHeader';
import IconBox from 'components/Icons/IconBox';
import { RocketIcon } from 'components/Icons/Icons';
import React, { useRef, useState } from 'react';
import { AiFillSetting } from 'react-icons/ai';
import { BsCircleFill } from 'react-icons/bs';
import { FaCube } from 'react-icons/fa';
import { MdModeEdit } from 'react-icons/md';
function Wizard() {
const textColor = useColorModeValue('gray.700', 'white');
const bgPrevButton = useColorModeValue('gray.100', 'gray.100');
const iconColor = useColorModeValue('gray.300', 'gray.700');
const [activeBullets, setActiveBullets] = useState({
about: true,
account: false,
address: false,
});
const [checkboxes, setCheckboxes] = useState({
design: false,
code: false,
develop: false,
});
const aboutTab = useRef();
const accountTab = useRef();
const addressTab = useRef();
return (
<Flex
direction='column'
minH='100vh'
align='center'
pt={{ sm: '125px', lg: '75px' }}
>
<Flex
direction='column'
textAlign='center'
mb={{ sm: '25px', md: '45px' }}
>
<Text
color={textColor}
fontSize={{ sm: '2xl', md: '3xl', lg: '4xl' }}
fontWeight='bold'
mb='8px'
>
Build your profile
</Text>
<Text
color='gray.400'
fontWeight='normal'
fontSize={{ sm: 'sm', md: 'lg' }}
>
This information will let us know more about you.
</Text>
</Flex>
<Tabs variant='unstyled' mt='24px' display='flex' flexDirection='column'>
<TabList
display='flex'
align='center'
alignSelf='center'
justifySelf='center'
>
<Tab
ref={aboutTab}
_focus={{}}
w={{ sm: '120px', md: '250px', lg: '300px' }}
onClick={() =>
setActiveBullets({
about: true,
account: false,
address: false,
})
}
>
<Flex
direction='column'
justify='center'
align='center'
position='relative'
_before={{
content: "''",
width: { sm: '120px', md: '250px', lg: '300px' },
height: '3px',
bg: activeBullets.account ? 'white' : 'blue.300',
left: { sm: '12px', md: '30px' },
top: {
sm: activeBullets.about ? '6px' : '4px',
md: null,
},
position: 'absolute',
bottom: activeBullets.about ? '40px' : '38px',
transition: 'all .3s ease',
}}
>
<Icon
zIndex='1'
as={BsCircleFill}
color={activeBullets.about ? 'white' : 'blue.300'}
w={activeBullets.about ? '16px' : '12px'}
h={activeBullets.about ? '16px' : '12px'}
mb='8px'
/>
<Text
color={activeBullets.about ? 'white' : 'gray.300'}
fontWeight={activeBullets.about ? 'bold' : 'normal'}
display={{ sm: 'none', md: 'block' }}
>
About
</Text>
</Flex>
</Tab>
<Tab
ref={accountTab}
_focus={{}}
w={{ sm: '120px', md: '250px', lg: '300px' }}
onClick={() =>
setActiveBullets({
about: true,
account: true,
address: false,
})
}
>
<Flex
direction='column'
justify='center'
align='center'
position='relative'
_before={{
content: "''",
width: { sm: '120px', md: '250px', lg: '300px' },
height: '3px',
bg: activeBullets.address ? 'white' : 'blue.300',
left: { sm: '12px', md: '32px' },
top: {
sm: activeBullets.account ? '6px' : '4px',
md: null,
},
position: 'absolute',
bottom: activeBullets.account ? '40px' : '38px',
transition: 'all .3s ease',
}}
>
<Icon
zIndex='1'
as={BsCircleFill}
color={activeBullets.account ? 'white' : 'blue.300'}
w={activeBullets.account ? '16px' : '12px'}
h={activeBullets.account ? '16px' : '12px'}
mb='8px'
/>
<Text
color={activeBullets.account ? 'white' : 'gray.300'}
fontWeight={activeBullets.account ? 'bold' : 'normal'}
display={{ sm: 'none', md: 'block' }}
>
Account
</Text>
</Flex>
</Tab>
<Tab
ref={addressTab}
_focus={{}}
w={{ sm: '120px', md: '250px', lg: '300px' }}
onClick={() =>
setActiveBullets({
about: true,
account: true,
address: true,
})
}
>
<Flex
direction='column'
justify='center'
align='center'
position='relative'
>
<Icon
zIndex='1'
as={BsCircleFill}
color={activeBullets.address ? 'white' : 'blue.300'}
w={activeBullets.address ? '16px' : '12px'}
h={activeBullets.address ? '16px' : '12px'}
mb='8px'
/>
<Text
color={activeBullets.address ? 'white' : 'gray.300'}
fontWeight={activeBullets.address ? 'bold' : 'normal'}
display={{ sm: 'none', md: 'block' }}
>
Address
</Text>
</Flex>
</Tab>
</TabList>
<TabPanels mt='24px' maxW={{ md: '90%', lg: '100%' }} mx='auto'>
<TabPanel w={{ sm: '330px', md: '700px', lg: '850px' }} mx='auto'>
<Card>
<CardHeader mb='40px'>
<Flex
direction='column'
align='center'
justify='center'
textAlign='center'
w='80%'
mx='auto'
>
<Text
color={textColor}
fontSize='lg'
fontWeight='bold'
mb='4px'
>
Let's start with the basic information
</Text>
<Text color='gray.400' fontWeight='normal' fontSize='sm'>
Let us know your name and email address. Use an address you
don't mind other users contacting you at
</Text>
</Flex>
</CardHeader>
<CardBody>
<Flex direction='column' w='100%'>
<Flex
direction={{ sm: 'column', md: 'row' }}
w='100%'
mb='24px'
>
<Box
position='relative'
minW={{ sm: '110px', xl: '150px' }}
h={{ sm: '110px', xl: '150px' }}
mx={{ sm: 'auto', md: '40px', xl: '85px' }}
mb={{ sm: '25px' }}
>
<Avatar
src={avatar4}
w='100%'
h='100%'
borderRadius='12px'
/>
<IconBox
bg='#fff'
h='35px'
w='35px'
boxShadow='0px 3.5px 5.5px rgba(0, 0, 0, 0.06)'
position='absolute'
right='-10px'
bottom='-10px'
cursor='pointer'
>
<Icon as={MdModeEdit} w='15px' h='15px' color='#333' />
</IconBox>
</Box>
<Stack direction='column' spacing='20px' w='100%'>
<FormControl>
<FormLabel
color={textColor}
fontSize='xs'
fontWeight='bold'
>
First Name
</FormLabel>
<Input
variant='main'
placeholder='eg. Michael'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel
color={textColor}
fontSize='xs'
fontWeight='bold'
>
Last Name
</FormLabel>
<Input
variant='main'
placeholder='eg. Jackson'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel
color={textColor}
fontSize='xs'
fontWeight='bold'
>
Email Address
</FormLabel>
<Input
variant='main'
placeholder='eg. example@address.com'
fontSize='xs'
/>
</FormControl>
</Stack>
</Flex>
<Button
variant='dark'
alignSelf='flex-end'
mt='24px'
w={{ sm: '75px', lg: '100px' }}
h='35px'
onClick={() => accountTab.current.click()}
>
<Text fontSize='xs' color='#fff' fontWeight='bold'>
NEXT
</Text>
</Button>
</Flex>
</CardBody>
</Card>
</TabPanel>
<TabPanel w={{ sm: '330px', md: '700px', lg: '850px' }} mx='auto'>
<Card>
<CardHeader mb='40px'>
<Flex
direction='column'
align='center'
justify='center'
textAlign='center'
w='80%'
mx='auto'
>
<Text
color={textColor}
fontSize='lg'
fontWeight='bold'
mb='4px'
>
What are you doing? (checkboxes)
</Text>
<Text color='gray.400' fontWeight='normal' fontSize='sm'>
Give us more details about you. What do you enjoy doing in
your spare time?
</Text>
</Flex>
</CardHeader>
<CardBody>
<Flex direction='column' w='100%'>
<Stack
direction={{ sm: 'column', md: 'row' }}
spacing={{ sm: '20px', lg: '35px' }}
alignSelf='center'
justifySelf='center'
mb='24px'
>
<Flex direction='column' align='center'>
<FormLabel w='150px' h='150px' cursor='pointer' mb='16px'>
<Flex
w='100%'
h='100%'
borderRadius='8px'
justify='center'
transition='.5s all ease'
border={
checkboxes.design ? 'none' : '1px solid lightgray'
}
align='center'
bg={checkboxes.design ? 'blue.500' : '#fff'}
_hover={{ opacity: '0.8' }}
>
<Checkbox
onChange={() =>
setCheckboxes((prevCheckboxes) => {
return {
...prevCheckboxes,
design: !prevCheckboxes.design,
};
})
}
display='none'
/>
<Icon
as={AiFillSetting}
w='54px'
h='54px'
color={checkboxes.design ? '#fff' : iconColor}
/>
</Flex>
</FormLabel>
<Text color={textColor} fontWeight='bold' fontSize='md'>
Design
</Text>
</Flex>
<Flex direction='column' align='center'>
<FormLabel w='150px' h='150px' cursor='pointer' mb='16px'>
<Flex
w='100%'
h='100%'
borderRadius='8px'
justify='center'
transition='.5s all ease'
border={
checkboxes.code ? 'none' : '1px solid lightgray'
}
align='center'
bg={checkboxes.code ? 'blue.500' : '#fff'}
_hover={{ opacity: '0.8' }}
>
<Checkbox
onChange={() =>
setCheckboxes((prevCheckboxes) => {
return {
...prevCheckboxes,
code: !prevCheckboxes.code,
};
})
}
display='none'
/>
<Icon
as={FaCube}
w='54px'
h='54px'
color={checkboxes.code ? '#fff' : iconColor}
/>
</Flex>
</FormLabel>
<Text color={textColor} fontWeight='bold' fontSize='md'>
Code
</Text>
</Flex>
<Flex direction='column' align='center'>
<FormLabel w='150px' h='150px' cursor='pointer' mb='16px'>
<Flex
w='100%'
h='100%'
borderRadius='8px'
justify='center'
transition='.5s all ease'
border={
checkboxes.develop ? 'none' : '1px solid lightgray'
}
align='center'
bg={checkboxes.develop ? 'blue.500' : '#fff'}
_hover={{ opacity: '0.8' }}
>
<Checkbox
onChange={() =>
setCheckboxes((prevCheckboxes) => {
return {
...prevCheckboxes,
develop: !prevCheckboxes.develop,
};
})
}
display='none'
/>
<Icon
as={RocketIcon}
w='54px'
h='54px'
color={checkboxes.develop ? '#fff' : iconColor}
/>
</Flex>
</FormLabel>
<Text color={textColor} fontWeight='bold' fontSize='md'>
Develop
</Text>
</Flex>
</Stack>
<Flex justify='space-between'>
<Button
variant='no-effects'
bg={bgPrevButton}
alignSelf='flex-end'
mt='24px'
w={{ sm: '75px', lg: '100px' }}
h='35px'
onClick={() => aboutTab.current.click()}
>
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
PREV
</Text>
</Button>
<Button
variant='dark'
alignSelf='flex-end'
mt='24px'
w={{ sm: '75px', lg: '100px' }}
h='35px'
onClick={() => addressTab.current.click()}
>
<Text fontSize='xs' color='#fff' fontWeight='bold'>
NEXT
</Text>
</Button>
</Flex>
</Flex>
</CardBody>
</Card>
</TabPanel>
<TabPanel w={{ sm: '330px', md: '700px', lg: '850px' }} mx='auto'>
<Card>
<CardHeader mb='40px'>
<Flex
direction='column'
align='center'
justify='center'
textAlign='center'
w='80%'
mx='auto'
>
<Text
color={textColor}
fontSize='lg'
fontWeight='bold'
mb='4px'
>
Are you living in a nice area?
</Text>
<Text color='gray.400' fontWeight='normal' fontSize='sm'>
One thing I love about the later sunsets is the chance to go
for a walk through the neighborhood woods before dinner
</Text>
</Flex>
</CardHeader>
<CardBody>
<Flex direction='column' w='100%'>
<Stack direction='column' spacing='20px'>
<FormControl>
<FormLabel
color={textColor}
fontWeight='bold'
fontSize='xs'
>
Address 1
</FormLabel>
<Input
variant='main'
placeholder='eg. Street 120'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel
color={textColor}
fontWeight='bold'
fontSize='xs'
>
Address 2
</FormLabel>
<Input
variant='main'
placeholder='eg. Street 220'
fontSize='xs'
/>
</FormControl>
<Grid
templateColumns={{ sm: '1fr 1fr', lg: '2fr 1fr 1fr' }}
gap='30px'
>
<FormControl gridColumn={{ sm: '1 / 3', lg: 'auto' }}>
<FormLabel
color={textColor}
fontWeight='bold'
fontSize='xs'
>
City
</FormLabel>
<Input
variant='main'
placeholder='eg. Tokyo'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel
color={textColor}
fontWeight='bold'
fontSize='xs'
>
State
</FormLabel>
<Input variant='main' placeholder='...' fontSize='xs' />
</FormControl>
<FormControl>
<FormLabel
color={textColor}
fontWeight='bold'
fontSize='xs'
>
ZIP
</FormLabel>
<Input
variant='main'
placeholder='7 letters'
fontSize='xs'
/>
</FormControl>
</Grid>
</Stack>
<Flex justify='space-between'>
<Button
variant='no-effects'
bg={bgPrevButton}
alignSelf='flex-end'
mt='24px'
w={{ sm: '75px', lg: '100px' }}
h='35px'
onClick={() => accountTab.current.click()}
>
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
PREV
</Text>
</Button>
<Button
variant='dark'
alignSelf='flex-end'
mt='24px'
w={{ sm: '75px', lg: '100px' }}
h='35px'
>
<Text fontSize='xs' color='#fff' fontWeight='bold'>
SEND
</Text>
</Button>
</Flex>
</Flex>
</CardBody>
</Card>
</TabPanel>
</TabPanels>
</Tabs>
</Flex>
);
}
export default Wizard;

434
src/views/Dashboard/Automotive.js
View File

@@ -1,434 +0,0 @@
import React from "react";
import {
Flex,
Text,
Stack,
Grid,
Image,
Button,
Icon,
Input,
Box,
RangeSlider,
RangeSliderTrack,
RangeSliderFilledTrack,
RangeSliderThumb,
useColorModeValue,
} from "@chakra-ui/react";
import Card from "components/Card/Card";
import IconBox from "components/Icons/IconBox";
import { HSeparator, VSeparator } from "components/Separator/Separator";
import Map from "components/Map/Map";
import bgAutomotiveCard from "assets/img/automotive-background-card.png";
import tesla from "assets/img/tesla.png";
import drake from "assets/img/drake.png";
import { FaMap, FaPlay, FaPowerOff } from "react-icons/fa";
import {
AiFillCar,
AiOutlineSearch,
AiFillBackward,
AiFillForward,
AiOutlineUnorderedList,
} from "react-icons/ai";
import { BsBatteryCharging } from "react-icons/bs";
import { IoIosSpeedometer, IoIosMusicalNotes } from "react-icons/io";
import { IoHeadsetSharp, IoChatbubbleEllipsesSharp } from "react-icons/io5";
import { CgAppleWatch } from "react-icons/cg";
import { SpotifyLogo } from "components/Icons/Icons";
const Automotive = () => {
const bgCard = useColorModeValue("linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)", "navy.800")
return (
<Flex direction="column" pt={{ base: "150px" }}>
<Card
bgImage={bgAutomotiveCard}
bgSize="cover"
p={{ sm: "22px", lg: "60px 40px", xl: "100px 80px" }}
>
<Flex
justify="space-between"
align={{ sm: "center", lg: "normal" }}
w="100%"
direction={{ sm: "column", lg: "row" }}
>
<Flex direction="column" my={{ sm: "10px", lg: "0px" }}>
<Text color="white" fontSize="2xl" fontWeight="bold">
Since Last Charge
</Text>
<HSeparator mt="11px" mb="25px" />
<Stack
direction="row"
spacing="30px"
justify={{ sm: "center", lg: "normal" }}
>
<Flex direction="column">
<Text color="white" fontSize="xs">
Distance
</Text>
<Text color="white" fontSize="2xl" fontWeight="bold">
145{" "}
<Text
as="span"
fontSize="10px"
display="inline-block"
transform="translateY(-50%)"
>
KM
</Text>
</Text>
</Flex>
<Flex direction="column">
<Text color="white" fontSize="xs">
Average Energy
</Text>
<Text color="white" fontSize="2xl" fontWeight="bold">
300{" "}
<Text
as="span"
fontSize="10px"
display="inline-block"
transform="translateY(-50%)"
>
KW
</Text>
</Text>
</Flex>
</Stack>
</Flex>
<Flex
direction="column"
textAlign="center"
my={{ sm: "10px", lg: "0px" }}
>
<Image
src={tesla}
minW={{ md: "300px", lg: "450px" }}
mt={{ lg: "-170px" }}
mb="30px"
display={{ sm: "none", md: "block" }}
/>
<Text color="white" fontSize="lg" fontWeight="bold">
Available Range{" "}
<Text as="span" fontSize="2xl">
70{" "}
<Text
as="span"
fontSize="10px"
display="inline-block"
transform="translateY(-50%)"
>
%
</Text>
</Text>
</Text>
</Flex>
<Flex direction="column" my={{ sm: "10px", lg: "0px" }}>
<Text color="white" fontSize="2xl" fontWeight="bold">
Nearest Charger
</Text>
<HSeparator mt="11px" mb="25px" />
<Flex direction="row">
<Text color="white" fontSize="xs" fontWeight="bold" me="52px">
Miclan, DW <br />
891 Limarenda road
</Text>
<Button
p="9px"
borderRadius="50%"
variant="no-effects"
bg="rgba(255, 255, 255, 0.15)"
border="1px solid #fff"
>
<Icon as={FaMap} color="white" w="14px" h="14px" />
</Button>
</Flex>
</Flex>
</Flex>
</Card>
<Grid
templateColumns={{
sm: "1fr",
md: "repeat(2, 1fr)",
lg: "repeat(4, 1fr)",
}}
my="20px"
gap="20px"
>
<Flex
align="center"
p="18px"
justify="space-between"
bg="linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
borderRadius="20px"
>
<Flex direction="column" me="auto">
<Text fontSize="xs" color="white" mb="3px">
Today's Trip
</Text>
<Text color="#fff" fontSize="lg" fontWeight="bold">
143 KM
</Text>
</Flex>
<IconBox bg="white" w="45px" h="45px">
<Icon as={AiFillCar} color="blue.500" w="22px" h="22px" />
</IconBox>
</Flex>
<Flex
align="center"
p="18px"
justify="space-between"
bg="linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
borderRadius="20px"
>
<Flex direction="column" me="auto">
<Text fontSize="xs" color="white" mb="3px">
Battery Health
</Text>
<Text color="#fff" fontSize="lg" fontWeight="bold">
99%
</Text>
</Flex>
<IconBox bg="white" w="45px" h="45px">
<Icon as={BsBatteryCharging} color="blue.500" w="22px" h="22px" />
</IconBox>
</Flex>
<Flex
align="center"
p="18px"
justify="space-between"
bg="linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
borderRadius="20px"
>
<Flex direction="column" me="auto">
<Text fontSize="xs" color="white" mb="3px">
Average Speed
</Text>
<Text color="#fff" fontSize="lg" fontWeight="bold">
56 KM/h
</Text>
</Flex>
<IconBox bg="white" w="45px" h="45px">
<Icon as={IoIosSpeedometer} color="blue.500" w="22px" h="22px" />
</IconBox>
</Flex>
<Flex
align="center"
p="18px"
justify="space-between"
bg="linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
borderRadius="20px"
>
<Flex direction="column" me="auto">
<Text fontSize="xs" color="white" mb="3px">
Music Volume
</Text>
<Text color="#fff" fontSize="lg" fontWeight="bold">
15 / 100
</Text>
</Flex>
<IconBox bg="white" w="45px" h="45px">
<Icon as={IoIosMusicalNotes} color="blue.500" w="22px" h="22px" />
</IconBox>
</Flex>
</Grid>
<Card
bg={bgCard}
px="0px"
>
<Flex
direction={{ sm: "column", md: "row" }}
justify="space-between"
align="center"
px="22px"
>
<Flex align="center">
<Icon
as={AiOutlineSearch}
color="white"
w="20px"
h="20px"
me="8px"
/>
<Input
placeholder="Search anything..."
border={{}}
_hover={{}}
_focus={{}}
color="white"
/>
</Flex>
<Stack direction="row" spacing="10px" align="center">
<Icon as={IoHeadsetSharp} color="white" w="18px" h="18px" />
<Icon as={FaPlay} color="white" w="18px" h="18px" />
<Icon as={FaPowerOff} color="white" w="18px" h="18px" />
<Icon as={CgAppleWatch} color="white" w="18px" h="18px" />
<Text color="white" fontWeight="bold" fontSize="2xl">
10:45
</Text>
</Stack>
</Flex>
<HSeparator my="22px" />
<Flex
direction={{ sm: "column", md: "row" }}
justify="space-between"
align="center"
mb="20px"
px="22px"
>
<Flex align="center">
<Text color="white" fontSize="2xl" fontWeight="bold" me="10px">
11:43
</Text>
<Text color="gray.400" fontSize="xs" fontWeight="bold">
Estimated arrival time
</Text>
</Flex>
<VSeparator
h="30px"
bg="white"
display={{ sm: "none", md: "block" }}
/>
<Flex align="center">
<Text color="white" fontSize="2xl" fontWeight="bold" me="10px">
2.4{" "}
<Text
as="span"
color="white"
fontSize="10px"
display="inline-block"
transform="translateY(-50%)"
>
KM
</Text>
</Text>
<Text color="gray.400" fontSize="xs" fontWeight="bold">
Turn Right in 2.4 miles
</Text>
</Flex>
<VSeparator
h="30px"
bg="white"
display={{ sm: "none", md: "block" }}
/>
<Flex align="center">
<Text color="white" fontSize="2xl" fontWeight="bold" me="10px">
6.7{" "}
<Text
as="span"
color="white"
fontSize="10px"
display="inline-block"
transform="translateY(-50%)"
>
KM
</Text>
</Text>
<Text color="gray.400" fontSize="xs" fontWeight="bold">
Distance to Starbucks
</Text>
</Flex>
</Flex>
<Map />
<Flex
direction={{ sm: "column", lg: "row" }}
justify="space-between"
align="center"
my="20px"
px="22px"
>
<Stack direction="row" spacing="15px" align="center">
<Box position="relative">
<Image src={drake} w="70px" h="70px" borderRadius="50%" />
<SpotifyLogo
w="25px"
h="25px"
position="absolute"
right="-10px"
transform="translateY(-70%)"
/>
</Box>
<Flex direction="column">
<Text color="white" fontSize="sm" fontWeight="bold">
Life Is Good (feat. Drake)
</Text>
<Text color="gray.400" fontSize="sm">
Future, Drake - Hip-Hop
</Text>
</Flex>
</Stack>
<Stack direction="row" spacing="18px" my={{ sm: "15px", lg: "0px" }}>
<Button
variant="outline"
colorScheme="whiteAlpha"
borderRadius="50px"
w="45px"
h="45px"
>
<Icon as={AiFillBackward} color="#fff" w="26px" h="26px" />
</Button>
<Button
variant="outline"
colorScheme="whiteAlpha"
borderRadius="50px"
w="45px"
h="45px"
>
<Icon as={FaPlay} color="#fff" w="18px" h="18px" />
</Button>
<Button
variant="outline"
colorScheme="whiteAlpha"
borderRadius="50px"
w="45px"
h="45px"
>
<Icon as={AiFillForward} color="#fff" w="26px" h="26px" />
</Button>
</Stack>
<Flex align="center">
<Flex direction="column" me="80px">
<Text color="gray.400" fontSize="xs" fontWeight="bold">
Volume
</Text>
<RangeSlider
aria-label={["max"]}
colorScheme="blue"
defaultValue={[30]}
borderRadius="20px"
w={{ sm: "130px", md: "250px", lg: "200px" }}
>
<RangeSliderTrack>
<RangeSliderFilledTrack />
</RangeSliderTrack>
<RangeSliderThumb index={0} />
</RangeSlider>
</Flex>
<Stack direction="row" spacing="12px" align="center">
<Icon
as={AiOutlineUnorderedList}
color="white"
w="18px"
h="18px"
/>
<Icon
as={IoChatbubbleEllipsesSharp}
color="white"
w="18px"
h="18px"
/>
</Stack>
</Flex>
</Flex>
</Card>
</Flex>
);
};
export default Automotive;

539
src/views/Dashboard/CRM.js
View File

@@ -1,539 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import {
Box,
Button,
Flex,
Grid,
Icon,
Image,
Portal,
Spacer,
Stack,
Stat,
StatHelpText,
StatLabel,
StatNumber,
Text,
useColorModeValue,
} from '@chakra-ui/react';
import CRMimage from 'assets/img/CRM-image.png';
import peopleImage from 'assets/img/people-image.png';
import EventCalendar from 'components/Calendars/EventCalendar';
import Card from 'components/Card/Card.js';
import CardHeader from 'components/Card/CardHeader.js';
import LineChart from 'components/Charts/LineChart';
import IconBox from 'components/Icons/IconBox';
import { DocumentIcon, RocketIcon, SettingsIcon } from 'components/Icons/Icons';
import TransactionRow from 'components/Tables/TransactionRow';
import React, { useRef } from 'react';
import { BsArrowRight } from 'react-icons/bs';
import { FaPlus, FaRegCalendarAlt } from 'react-icons/fa';
import { RiArrowDropRightLine } from 'react-icons/ri';
import { calendarDataCRM } from 'variables/calendar';
import {
lineChartDataCRM1,
lineChartDataCRM2,
lineChartOptionsCRM1,
lineChartOptionsCRM2,
} from 'variables/charts';
import { revenueCRM, transactionsCRM } from 'variables/general';
function CRM() {
const textColor = useColorModeValue('gray.700', 'white');
const secondaryColor = useColorModeValue('gray.500', 'white');
const iconBlue = useColorModeValue('gray.800', 'blue.500');
const iconBoxInside = useColorModeValue('white', 'white');
const overlayRef = useRef();
return (
<Flex direction='column' pt={{ sm: '120px', md: '75px' }}>
<Grid
templateColumns={{ sm: '1fr', lg: '1.6fr 1fr', xl: '2fr 1fr' }}
templateRows='1fr'
gap='24px'
mb={{ lg: '24px' }}
>
<Grid
templateColumns='auto'
templateRows={{ sm: '1fr auto', lg: '1fr 2.5fr' }}
gap='24px'
>
<Stack
direction={{ sm: 'column', md: 'row' }}
spacing='24px'
maxH={{ lg: '220px' }}
>
<Card px='0px' pb='0px'>
<CardHeader px='22px'>
<Stat>
<StatLabel fontSize='xs' color='gray.400'>
Visitors
</StatLabel>
<Flex>
<StatNumber fontSize='lg' me='4px' color={textColor}>
$5,927
</StatNumber>
<StatHelpText
color='green.400'
size='sm'
alignSelf='flex-end'
fontWeight='bold'
mb='0px'
>
+55%
</StatHelpText>
</Flex>
</Stat>
</CardHeader>
<Flex direction='column'>
<Box w='100%' h='100%'>
<LineChart
chartData={lineChartDataCRM1}
chartOptions={lineChartOptionsCRM1}
/>
</Box>
</Flex>
</Card>
<Card px='0px' pb='0px'>
<CardHeader px='22px'>
<Stat>
<StatLabel fontSize='xs' color='gray.400'>
Income
</StatLabel>
<Flex>
<StatNumber fontSize='lg' me='4px' color={textColor}>
$130,912
</StatNumber>
<StatHelpText
color='green.400'
size='sm'
alignSelf='flex-end'
fontWeight='bold'
mb='0px'
>
+90%
</StatHelpText>
</Flex>
</Stat>
</CardHeader>
<Flex direction='column'>
<Box w='100%'>
<LineChart
chartData={lineChartDataCRM2}
chartOptions={lineChartOptionsCRM2}
/>
</Box>
</Flex>
</Card>
<Card p='0px'>
<Button
p='0px'
w='100%'
h='100%'
bg='transparent'
color='gray.500'
borderRadius='15px'
>
<Flex
direction='column'
justifyContent='center'
align='center'
h='120px'
>
<Icon
as={FaPlus}
w='30px'
h='30px'
mb='12px'
color={secondaryColor}
/>
<Text fontSize='lg' fontWeight='bold' color={secondaryColor}>
New Tab
</Text>
</Flex>
</Button>
</Card>
</Stack>
<Card w={{ sm: '100%' }} h='575px'>
<CardHeader pt='6px' mb='8px'>
<Flex direction='column'>
<Text fontSize='lg' color={textColor} fontWeight='bold'>
Calendar
</Text>
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
Wednesday, 2022
</Text>
</Flex>
</CardHeader>
<Flex
direction='column'
position='relative'
display='block'
height='100%'
>
<EventCalendar
initialDate='2022-10-01'
calendarData={calendarDataCRM}
/>
</Flex>
</Card>
</Grid>
<Stack direction='column' spacing='24px'>
<Card w={{ sm: '100%' }} minH={{ lg: '300px' }}>
<Flex
direction='column'
backgroundImage={peopleImage}
bgPosition='center'
bgRepeat='no-repeat'
w='100%'
h='100%'
minH={{ sm: '200px', lg: '100%' }}
bgSize='cover'
position='relative'
borderRadius='15px'
>
<Box
bg='linear-gradient(360deg, rgba(49, 56, 96, 0.16) 0%, rgba(21, 25, 40, 0.88) 100%)'
w='100%'
position='absolute'
h='100%'
borderRadius='inherit'
ref={overlayRef}
></Box>
<Portal containerRef={overlayRef}>
<Flex
flexDirection='column'
color='white'
p='24px 20px 4px 20px'
lineHeight='1.6'
h={{ md: '190px', lg: '240px' }}
>
<Text fontSize='lg' fontWeight='bold' pb='6px'>
Hello John!
</Text>
<Text fontSize='sm' fontWeight='normal' w={{ lg: '92%' }}>
Wealth creation is a revolutionary recent positive-sum game.
It is all about who takes the opportunity first.
</Text>
<Spacer />
<Flex
align='center'
mt={{ sm: '20px', lg: '40px', xl: '80px' }}
>
<Button
ps='0px'
pb={{ xl: '22px' }}
variant='no-effects'
bg='transparent'
>
<Text
fontSize='sm'
fontWeight='bold'
_hover={{ me: '4px' }}
color='#fff'
transition='all .5s ease'
>
Read more
</Text>
<Icon
as={BsArrowRight}
w='12px'
h='12px'
fontSize='xl'
transition='all .5s ease'
mx='4px'
color='#fff'
cursor='pointer'
_hover={{ transform: 'translateX(20%)' }}
/>
</Button>
</Flex>
</Flex>
</Portal>
</Flex>
</Card>
<Stack
direction={{ sm: 'column', md: 'row', lg: 'column' }}
maxW={{ md: '100%' }}
spacing='24px'
>
<Card>
<CardHeader>
<Text fontSize='lg' text={textColor} fontWeight='bold'>
Invoices
</Text>
</CardHeader>
<Flex direction='column' w='100%' pt='28px'>
<Stack direction='column' spacing='24px' w='100%'>
<Flex align='center' w='100%'>
<Flex align='center'>
<IconBox h={'40px'} w={'40px'} bg={iconBlue} me='18px'>
<RocketIcon
h={'20px'}
w={'20px'}
color={iconBoxInside}
/>
</IconBox>
<Flex direction='column'>
<Text fontSize='sm' fontWeight='bold' color={textColor}>
Devices
</Text>
<Text color='gray.400' fontSize='xs'>
250 in stock,{' '}
<Text as='span' fontWeight='bold'>
346+ sold
</Text>
</Text>
</Flex>
</Flex>
<Spacer />
<Button variant='no-effects' px='0px'>
<Icon
as={RiArrowDropRightLine}
color='gray.400'
w='30px'
h='30px'
cursor='pointer'
transition='all .25s ease'
_hover={{ transform: 'translateX(25%)' }}
/>
</Button>
</Flex>
<Flex align='center' w='100%'>
<Flex align='center'>
<IconBox h={'40px'} w={'40px'} bg={iconBlue} me='18px'>
<SettingsIcon
h={'20px'}
w={'20px'}
color={iconBoxInside}
/>
</IconBox>
<Flex direction='column'>
<Text fontSize='sm' fontWeight='bold' color={textColor}>
Tickets
</Text>
<Text color='gray.400' fontSize='xs'>
123 closed,{' '}
<Text as='span' fontWeight='bold'>
15 open
</Text>
</Text>
</Flex>
</Flex>
<Spacer />
<Button variant='no-effects' px='0px'>
<Icon
as={RiArrowDropRightLine}
color='gray.400'
w='30px'
h='30px'
cursor='pointer'
transition='all .25s ease'
_hover={{ transform: 'translateX(25%)' }}
/>
</Button>
</Flex>
<Flex align='center' w='100%'>
<Flex align='center'>
<IconBox h={'40px'} w={'40px'} bg={iconBlue} me='18px'>
<DocumentIcon
h={'20px'}
w={'20px'}
color={iconBoxInside}
/>
</IconBox>
<Flex direction='column'>
<Text fontSize='sm' fontWeight='bold' color={textColor}>
Error logs
</Text>
<Text color='gray.400' fontSize='xs'>
1 is active,{' '}
<Text as='span' fontWeight='bold'>
40 closed
</Text>
</Text>
</Flex>
</Flex>
<Spacer />
<Button variant='no-effects' px='0px'>
<Icon
as={RiArrowDropRightLine}
color='gray.400'
w='30px'
h='30px'
cursor='pointer'
transition='all .25s ease'
_hover={{ transform: 'translateX(25%)' }}
/>
</Button>
</Flex>
</Stack>
</Flex>
</Card>
<Card maxH={{ md: '130px', lg: '100%' }}>
<Flex
direction={{ sm: 'column', md: 'row', lg: 'row' }}
align='center'
>
<Box
minW={{
sm: '80px',
lg: '100px',
xl: '130px',
'2xl': '170px',
}}
h={{ sm: '80px', lg: '100px', xl: '130px', '2xl': '170px' }}
me={{ md: '36px' }}
mb={{ sm: '12px', md: '0px' }}
>
<Image src={CRMimage} w='100%' h='100%' borderRadius='15px' />
</Box>
<Flex
direction='column'
justify='center'
align={{ sm: 'center', md: 'flex-start' }}
>
<Text
fontWeight='bold'
textAlign={{ sm: 'center', md: 'start' }}
color={secondaryColor}
fontSize={{ sm: 'sm', md: 'xs', lg: 'sm' }}
mb={{ sm: '10px', lg: '22px' }}
>
Today's Martina's Birthday. Wish her the best of luck!
</Text>
<Button
h={{ sm: '32px' }}
variant='primary'
p={{ sm: '0px 32px', lg: '6px 22px' }}
>
SEND MESSAGE
</Button>
</Flex>
</Flex>
</Card>
</Stack>
</Stack>
</Grid>
<Stack
direction={{ sm: 'column', lg: 'row' }}
spacing='24px'
mt={{ sm: '24px', lg: '0px' }}
>
<Card>
<CardHeader mb='12px'>
<Flex direction='column' w='100%'>
<Flex
direction={{ sm: 'column', lg: 'row' }}
justify={{ sm: 'center', lg: 'space-between' }}
align={{ sm: 'center' }}
w='100%'
my={{ md: '12px' }}
>
<Text
color={textColor}
fontSize={{ sm: 'lg', md: 'xl', lg: 'lg' }}
fontWeight='bold'
>
Your Transactions
</Text>
<Flex align='center'>
<Icon
as={FaRegCalendarAlt}
color='gray.400'
fontSize='md'
me='6px'
></Icon>
<Text color='gray.400' fontSize='sm' fontWeight='semibold'>
23 - 30 March 2022
</Text>
</Flex>
</Flex>
</Flex>
</CardHeader>
<Flex direction='column'>
<Flex direction='column' w='100%' justify='center'>
{transactionsCRM.map((row, index) => {
return (
<TransactionRow
name={row.name}
logo={row.logo}
date={row.date}
price={row.price}
key={index}
/>
);
})}
</Flex>
</Flex>
</Card>
<Card>
<CardHeader mb='12px'>
<Flex direction='column' w='100%'>
<Flex
direction={{ sm: 'column', lg: 'row' }}
justify={{ sm: 'center', lg: 'space-between' }}
align={{ sm: 'center' }}
w='100%'
my={{ md: '12px' }}
>
<Text
color={textColor}
fontSize={{ sm: 'lg', md: 'xl', lg: 'lg' }}
fontWeight='bold'
>
Revenue
</Text>
<Flex align='center'>
<Icon
as={FaRegCalendarAlt}
color='gray.400'
fontSize='md'
me='6px'
></Icon>
<Text color='gray.400' fontSize='sm' fontWeight='semibold'>
23 - 30 March 2022
</Text>
</Flex>
</Flex>
</Flex>
</CardHeader>
<Flex direction='column'>
<Flex direction='column' w='100%' justify='center'>
{revenueCRM.map((row, index) => {
return (
<TransactionRow
name={row.name}
logo={row.logo}
date={row.date}
price={row.price}
key={index}
/>
);
})}
</Flex>
</Flex>
</Card>
</Stack>
</Flex>
);
}
export default CRM;

115
src/views/Dashboard/Landing.js
View File

@@ -1,115 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra imports
import { Box, Image, Link } from "@chakra-ui/react";
import Landing1 from "assets/img/Landing1.png";
import Landing2 from "assets/img/Landing2.png";
import Landing3 from "assets/img/Landing3.png";
import React from "react";
export default function Default() {
return (
<Box
flexDirection='column'
pt={{ base: "0px", lg: "0px", xl: "70px", "2xl": "0px" }}
m='auto'>
<Box
bg='linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.25) 100%)'
backdropFilter='blur(20px)'
borderRadius={{ base: "12px", lg: "24px" }}
p={{ base: "15px", lg: "20px" }}
mx='auto'
mb={{ base: "20px", lg: "20px" }}
width={{
base: "95% !important",
xl: "80% !important",
"2xl": "92% !important",
}}
zIndex='3'
position={{ lg: "absolute" }}
transform={{
lg:
"scale(0.8) perspective(2000px) rotateY(-35deg) rotateX(2deg) rotate(0deg)",
xl:
"scale(0.9) perspective(2000px) rotateY(-35deg) rotateX(2deg) rotate(0deg)",
"2xl":
"scale(0.8) perspective(2000px) rotateY(-35deg) rotateX(2deg) rotate(0deg)",
}}
right={{ lg: "125px", xl: "290px", "2xl": "250px" }}
_hover={{
transform: "scale(0.85) rotateY(-25deg) ",
right: "225px",
}}
transition='0.3s linear'>
<Link href='#'>
<Image src={Landing1} borderRadius={{ base: "12px", lg: "24px" }} />
</Link>
</Box>
<Box
bg='linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.25) 100%)'
backdropFilter='blur(20px)'
borderRadius={{ base: "12px", lg: "24px" }}
p={{ base: "15px", lg: "20px" }}
mx='auto'
mb={{ base: "20px", lg: "20px" }}
width={{
base: "95% !important",
xl: "80% !important",
"2xl": "92% !important",
}}
zIndex='2'
position={{ lg: "absolute" }}
transform={{
lg:
"scale(.75) perspective(2000px) rotateY(-32deg) rotateX(2deg) rotate(0deg)",
xl:
"scale(.85) perspective(2000px) rotateY(-32deg) rotateX(2deg) rotate(0deg)",
"2xl":
"scale(.75) perspective(2000px) rotateY(-32deg) rotateX(2deg) rotate(0deg)",
}}
right={{ lg: "55px", xl: "120px", "2xl": "80px" }}>
<Image src={Landing2} borderRadius={{ base: "12px", lg: "24px" }} />
</Box>
<Box
bg='linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.25) 100%)'
backdropFilter='blur(20px)'
borderRadius={{ base: "12px", lg: "24px" }}
p={{ base: "15px", lg: "20px" }}
mx='auto'
mb={{ base: "20px", lg: "20px" }}
width={{
base: "95% !important",
xl: "80% !important",
"2xl": "92% !important",
}}
zIndex='1'
position={{ lg: "absolute" }}
transform={{
lg:
"scale(.7) perspective(2000px) rotateY(-30deg) rotateX(2deg) rotate(0deg)",
xl:
"scale(.8) perspective(2000px) rotateY(-30deg) rotateX(2deg) rotate(0deg)",
"2xl":
"scale(.7) perspective(2000px) rotateY(-30deg) rotateX(2deg) rotate(0deg)",
}}
right={{ lg: "-25px", xl: "-10px", "2xl": "-90px" }}>
<Image src={Landing3} borderRadius={{ base: "12px", lg: "24px" }} />
</Box>
</Box>
);
}

532
src/views/Dashboard/SmartHome.js
View File

@@ -1,532 +0,0 @@
import React, { useState } from "react";
import {
Box,
Button,
Flex,
Grid,
Icon,
Image,
Menu,
MenuButton,
MenuItem,
MenuList,
Stack,
Switch,
Text,
useColorModeValue,
useDisclosure,
useColorMode,
} from "@chakra-ui/react";
import bgWeather from "assets/img/BgMusicCard.png";
import bgWeatherDark from "assets/img/bgMusicCardDark.png";
import smartHome from "assets/img/smart-home.png";
import sunBehindCloud from "assets/img/sun-behind-cloud.png";
import Card from "components/Card/Card";
import BarChart from "components/Charts/BarChart";
import { HSeparator } from "components/Separator/Separator";
import VisxPieChart from "components/VisxPieChart/VisxPieChart";
import CircularSlider from "react-circular-slider-svg";
import { AiOutlineInfoCircle } from "react-icons/ai";
import { BiWater, BiWifi } from "react-icons/bi";
import { BsFillRecordCircleFill, BsThermometerHigh } from "react-icons/bs";
import { FaPlus, FaSnowflake } from "react-icons/fa";
import { IoBulbOutline, IoEllipsisVerticalSharp } from "react-icons/io5";
import {
barChartDataSmartHome,
barChartOptionsSmartHome,
} from "variables/charts";
import { rooms } from "variables/general";
const SmartHome = () => {
const { colorMode } = useColorMode();
const [temperature, setTemperature] = useState(21);
const [activeButton, setActiveButton] = useState({
kitchen: true,
living: false,
attic: false,
});
const { isOpen, onOpen, onClose } = useDisclosure();
const textColor = useColorModeValue("gray.700", "white");
const bgButtonGroup = useColorModeValue("gray.50", "navy.700");
const bgActiveButton = useColorModeValue("#fff", "navy.800");
const arcBackgroundColor = useColorModeValue("#EDF2F7", "#0B1437");
const borderColor = useColorModeValue("gray.200", "gray.600");
const iconColor = useColorModeValue("gray.400", "white");
const bgIcon = useColorModeValue(
"linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)",
"navy.800"
);
return (
<Flex direction='column' pt={{ sm: "125px", lg: "75px" }}>
<Grid templateColumns={{ sm: "1fr", lg: "1.5fr 1fr" }} gap='20px'>
<Card>
<Flex
direction={{ sm: "column", md: "row" }}
justify='space-between'
align={{ md: "center" }}
mb='16px'>
<Text
color={textColor}
fontSize='lg'
fontWeight='bold'
mb={{ sm: "12px", md: "0px" }}>
Cameras
</Text>
<Flex align='center'>
<Flex bg={bgButtonGroup} borderRadius='10px' p='6px' me='10px'>
<Button
variant='no-effects'
w={{ sm: "fit-content", xl: "135px" }}
h='40px'
fontSize='xs'
boxShadow={
activeButton.kitchen
? "0px 2px 5.5px rgba(0, 0, 0, 0.06)"
: "none"
}
bg={activeButton.kitchen ? bgActiveButton : "transparent"}
onClick={() =>
setActiveButton({
kitchen: true,
living: false,
attic: false,
})
}>
KITCHEN
</Button>
<Button
variant='no-effects'
w={{ sm: "fit-content", xl: "135px" }}
h='40px'
fontSize='xs'
boxShadow={
activeButton.living
? "0px 2px 5.5px rgba(0, 0, 0, 0.06)"
: "none"
}
bg={activeButton.living ? bgActiveButton : "transparent"}
onClick={() =>
setActiveButton({
kitchen: false,
living: true,
attic: false,
})
}>
LIVING
</Button>
<Button
variant='no-effects'
w={{ sm: "fit-content", xl: "135px" }}
h='40px'
fontSize='xs'
boxShadow={
activeButton.attic
? "0px 2px 5.5px rgba(0, 0, 0, 0.06)"
: "none"
}
bg={activeButton.attic ? bgActiveButton : "transparent"}
onClick={() =>
setActiveButton({
kitchen: false,
attic: true,
living: false,
})
}>
ATTIC
</Button>
</Flex>
<Menu isOpen={isOpen} onClose={onClose}>
<MenuButton onClick={onOpen}>
<Icon
as={IoEllipsisVerticalSharp}
color='gray.400'
w='20px'
h='20px'
/>
</MenuButton>
<MenuList>
<MenuItem>Action</MenuItem>
<MenuItem>Another action</MenuItem>
<MenuItem>Something else here</MenuItem>
</MenuList>
</Menu>
</Flex>
</Flex>
<Flex
p='20px'
justify='flex-end'
borderRadius='15px'
bgImage={smartHome}
minH='390px'>
<Flex
p='6px 12px'
align='center'
h='fit-content'
bg='rgba(255, 255, 255, 0.4)'
borderRadius='8px'>
<Icon
as={BsFillRecordCircleFill}
color='red.500'
w='10px'
h='10px'
me='4px'
/>
<Text color={textColor} fontSize='10px' fontWeight='bold'>
RECORDING
</Text>
</Flex>
</Flex>
</Card>
<Flex direction='column' justify='space-between' h='100%'>
<Card
bgImage={colorMode === "light" ? bgWeather : bgWeatherDark}
minH='140px'
bgSize='cover'
mb={{ sm: "20px", lg: "0px" }}>
<Flex align='center' justify='space-between' h='100%'>
<Flex direction='column'>
<Text color='white' fontSize='xs' mb='3px'>
Weather Today
</Text>
<Text color='white' fontSize='lg' fontWeight='bold'>
San Francisco - 34°C
</Text>
</Flex>
<Flex direction='column' align='center'>
<Image src={sunBehindCloud} w='65px' h='65px' />
<Text color='white' fontSize='xs' fontWeight='bold'>
Cloudly
</Text>
</Flex>
</Flex>
</Card>
<Grid
templateColumns={{ sm: "1fr", md: "repeat(2, 1fr)" }}
gap='20px'>
<Card display='flex' justify='center' align='center' minH='155px'>
<Flex direction='column'>
<Text color='blue.500' fontSize='3xl' fontWeight='bold'>
23{" "}
<Text as='span' fontSize='sm'>
°C
</Text>
</Text>
<Text color={textColor} fontSize='lg' fontWeight='bold'>
Living Room
</Text>
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
Temperature
</Text>
</Flex>
</Card>
<Card display='flex' justify='center' align='center' minH='155px'>
<Flex direction='column'>
<Text color='blue.500' fontSize='3xl' fontWeight='bold'>
44{" "}
<Text as='span' fontSize='sm'>
%
</Text>
</Text>
<Text color={textColor} fontSize='lg' fontWeight='bold'>
Outside
</Text>
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
Humidity
</Text>
</Flex>
</Card>
<Card display='flex' justify='center' align='center' minH='155px'>
<Flex direction='column'>
<Text color='blue.500' fontSize='3xl' fontWeight='bold'>
87{" "}
<Text as='span' fontSize='sm'>
m³
</Text>
</Text>
<Text color={textColor} fontSize='lg' fontWeight='bold'>
Water
</Text>
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
Consumption
</Text>
</Flex>
</Card>
<Card display='flex' justify='center' align='center' minH='155px'>
<Flex direction='column'>
<Text color='blue.500' fontSize='3xl' fontWeight='bold'>
593{" "}
<Text as='span' fontSize='sm'>
GB
</Text>
</Text>
<Text color={textColor} fontSize='lg' fontWeight='bold'>
Internet
</Text>
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
All Devices
</Text>
</Flex>
</Card>
</Grid>
</Flex>
</Grid>
<Grid
templateColumns={{
sm: "1fr",
md: "repeat(2, 1fr)",
lg: "1.5fr 1fr 1fr",
xl: "2fr 1fr 1fr",
}}
gap='20px'
my='20px'>
<Card gridColumn={{ md: "1 / 3", lg: "auto" }}>
<Flex justify='space-between' align='center' mb='30px'>
<Text fontSize='lg' color={textColor} fontWeight='bold'>
Consumption by Room
</Text>
<Icon
as={AiOutlineInfoCircle}
w='20px'
h='20px'
color={textColor}
/>
</Flex>
<Flex direction={{ sm: "column", md: "row" }} align='center'>
<Box mb={{ sm: "12px", lg: "0px" }} color='red'>
<VisxPieChart data={rooms} title={"473.1"} width={200} />
</Box>
<Stack
direction='column'
spacing='10px'
ms={{ md: "50px", lg: "10px", xl: "50px" }}
w='100%'>
{rooms.map((room, index, arr) => {
return (
<Flex
justify='space-between'
align='center'
key={index}
py='6px'
w='100%'
borderBottom={
index === arr.length - 1 ? "none" : "1px solid"
}
borderColor={borderColor}>
<Flex align='center'>
<Box
borderRadius='6px'
bg={room.color}
w='20px'
h='20px'
me='12px'
/>
<Text color={textColor} fontWeight='bold' fontSize='xs'>
{room.name}
</Text>
</Flex>
<Text
color='gray.400'
fontSize='xs'
fontWeight='bold'>{`${room.percentage} %`}</Text>
</Flex>
);
})}
</Stack>
</Flex>
</Card>
<Card>
<Text fontSize='lg' color={textColor} fontWeight='bold'>
Consumption per Day
</Text>
<BarChart
chartData={barChartDataSmartHome}
chartOptions={barChartOptionsSmartHome}
/>
</Card>
<Card>
<Text fontSize='lg' color={textColor} fontWeight='bold'>
Device Limit
</Text>
<Flex
direction='column'
align='center'
alignSelf='center'
textAlign='center'
position='relative'>
<CircularSlider
startAngle={45}
endAngle={315}
handleSize={6}
minValue={16}
maxValue={32}
size={220}
arcColor='#3182CE'
arcBackgroundColor={arcBackgroundColor}
handle1={{
value: temperature,
onChange: (v) => setTemperature(Math.round(v)),
}}
/>
<Text
color={textColor}
fontSize='32px'
fontWeight='bold'
position='absolute'
top='35%'>{`${temperature} °C`}</Text>
<Stack direction='row' spacing='16px'>
<Text fontSize='xs' color='gray.400' fontWeight='bold'>
16°C
</Text>
<Text fontSize='xs' color='gray.400' fontWeight='bold'>
Temperature
</Text>
<Text fontSize='xs' color='gray.400' fontWeight='bold'>
32°C
</Text>
</Stack>
</Flex>
</Card>
</Grid>
<HSeparator my='40px' />
<Grid
templateColumns={{
sm: "1fr",
md: "repeat(2, 1fr)",
lg: "repeat(6, 1fr)",
}}
gap='20px'>
<Card minH='210px'>
<Flex direction='column' justify='space-between' h='100%'>
<Flex justify='space-between' align='center' mb='auto'>
<Text fontSize='xs' color='gray.400'>
OFF
</Text>
<Switch colorScheme='blue' />
</Flex>
<Flex direction='column'>
<Icon as={BiWater} color='gray.400' w='62px' h='62px' mb='10px' />
<Text color={textColor} fontWeight='bold' mb='3px'>
Humidity
</Text>
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
Inactive since: 2 days
</Text>
</Flex>
</Flex>
</Card>
<Card minH='210px' bg={bgIcon}>
<Flex direction='column' justify='space-between' h='100%'>
<Flex justify='space-between' align='center' mb='auto'>
<Text fontSize='xs' color='gray.400'>
ON
</Text>
<Switch colorScheme='blue' defaultChecked />
</Flex>
<Flex direction='column'>
<Icon
as={BsThermometerHigh}
color={iconColor}
w='62px'
h='62px'
mb='10px'
/>
<Text color='white' fontWeight='bold' mb='3px'>
Temperature
</Text>
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
Active
</Text>
</Flex>
</Flex>
</Card>
<Card minH='210px'>
<Flex direction='column' justify='space-between' h='100%'>
<Flex justify='space-between' align='center' mb='auto'>
<Text fontSize='xs' color='gray.400'>
OFF
</Text>
<Switch colorScheme='blue' />
</Flex>
<Flex direction='column'>
<Icon
as={FaSnowflake}
color={iconColor}
w='62px'
h='62px'
mb='10px'
/>
<Text color={textColor} fontWeight='bold' mb='3px'>
Air Conditioner
</Text>
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
Inactive since: 1 hour
</Text>
</Flex>
</Flex>
</Card>
<Card minH='210px'>
<Flex direction='column' justify='space-between' h='100%'>
<Flex justify='space-between' align='center' mb='auto'>
<Text fontSize='xs' color='gray.400'>
OFF
</Text>
<Switch colorScheme='blue' />
</Flex>
<Flex direction='column'>
<Icon
as={IoBulbOutline}
color={iconColor}
w='62px'
h='62px'
mb='10px'
/>
<Text color={textColor} fontWeight='bold' mb='3px'>
Lights
</Text>
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
Inactive since: 27 min
</Text>
</Flex>
</Flex>
</Card>
<Card minH='210px' bg={bgIcon}>
<Flex direction='column' justify='space-between' h='100%'>
<Flex justify='space-between' align='center' mb='auto'>
<Text fontSize='xs' color='gray.400'>
ON
</Text>
<Switch colorScheme='blue' defaultChecked />
</Flex>
<Flex direction='column'>
<Icon as={BiWifi} color={iconColor} w='62px' h='62px' mb='10px' />
<Text color='white' fontWeight='bold' mb='3px'>
Wi-Fi
</Text>
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
Active
</Text>
</Flex>
</Flex>
</Card>
<Card minH='210px' cursor='pointer'>
<Flex direction='column' align='center' justify='center' h='100%'>
<Icon as={FaPlus} color={iconColor} w='30px' h='30px' mb='11px' />
<Text
fontSize={{ sm: "lg", lg: "md", xl: "lg" }}
color={iconColor}
fontWeight='bold'>
New Device
</Text>
</Flex>
</Card>
</Grid>
</Flex>
);
};
export default SmartHome;

433
src/views/Ecommerce/Orders/OrderDetails.js
View File

@@ -1,433 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React from "react";
// Chakra imports
import {
Badge,
Box,
Button,
Flex,
Grid,
Icon,
Image,
Spacer,
Stack,
Text,
useColorModeValue,
LightMode,
} from "@chakra-ui/react";
// Assets
import productImage1 from "assets/img/product-page-1.png";
import { CgShapeCircle } from "react-icons/cg";
import { FaPencilAlt } from "react-icons/fa";
import { MastercardIcon } from "components/Icons/Icons";
// 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 { HSeparator } from "components/Separator/Separator";
function OrderDetails() {
// Chakra color mode
const textColor = useColorModeValue("gray.700", "white");
const borderColor = useColorModeValue("#dee2e6", "transparent");
const bgPayment = useColorModeValue("transparent", "navy.900");
const bgColor = useColorModeValue("#F8F9FA", "navy.900");
const nameColor = useColorModeValue("gray.500", "white");
return (
<Flex pt={{ sm: "125px", lg: "95px" }} justify="center" mx="auto" mb="50px">
<Card maxW={{ lg: "800px" }} pt="10px" pb="50px">
<CardHeader>
<Flex direction="column" w="100%">
<Text color={textColor} fontSize="lg" fontWeight="bold" mb="22px">
Order Details
</Text>
<Flex justify="space-between" w="100%">
<Flex direction="column">
<Text fontSize="sm" color="gray.400" fontWeight="normal">
Order no.{" "}
<Text as="span" color="blue.500" fontWeight="bold">
241342
</Text>{" "}
from{" "}
<Text as="span" color={textColor} fontWeight="bold">
23.02.2022
</Text>
</Text>
<Text fontSize="sm" color="gray.400" fontWeight="normal">
Code:{" "}
<Text as="span" color={textColor} fontWeight="bold">
KF332
</Text>
</Text>
</Flex>
<Button
bg={useColorModeValue("#fff", "blue.500")}
border={useColorModeValue("1px solid #E2E8F0", "unset")}
variant={useColorModeValue("", "dark")}
w="125px"
h="35px"
fontSize="xs"
fontWeight="bold"
>
INVOICE
</Button>
</Flex>
</Flex>
</CardHeader>
<CardBody>
<Flex direction="column" w="100%">
<HSeparator my="22px" />
<Flex
direction={{ sm: "column", md: "row" }}
justify="space-between"
w="100%"
align="center"
>
<Flex align="center">
<Box
minW="110px"
h="110px"
me="30px"
alignSelf={{ sm: "flex-start", md: "auto" }}
>
<Image
src={productImage1}
w="100%"
h="100%"
borderRadius="12px"
/>
</Box>
<Flex direction="column">
<Text
color={textColor}
fontSize="lg"
fontWeight="bold"
mb="6px"
>
Modern Luxury Sofa
</Text>
<Text
color="gray.400"
fontSize="sm"
fontWeight="normal"
mb="16px"
>
Order was delivered 2 days ago.
</Text>
<Badge
colorScheme="green"
w="95px"
h="28px"
borderRadius="8px"
display="flex"
alignItems="center"
alignSelf={{ sm: "center", md: "auto" }}
justifyContent="center"
mb={{ sm: "6px", md: "0px" }}
>
DELIVERED
</Badge>
</Flex>
</Flex>
<Flex direction="column" align="flex-end">
<LightMode>
<Button
variant="dark"
w="125px"
h="35px"
color="#fff"
fontSize="xs"
fontWeight="bold"
mb={{ sm: "12px", md: "36px" }}
>
CONTACT US
</Button>
</LightMode>
<Text color="gray.400" fontSize="xs" fontWeight="normal">
Do you like the product? Leave us a review here.
</Text>
</Flex>
</Flex>
<HSeparator my="22px" />
<Grid
templateColumns={{
sm: "1fr",
md: "1fr 1fr",
lg: "1fr 1.7fr 1fr",
}}
gap={{ sm: "24px", lg: "54px" }}
>
<Flex direction="column">
<Text color={textColor} fontWeight="bold" mb="22px">
Track Order
</Text>
<Flex alignItems="center" minH="70px" justifyContent="start">
<Flex direction="column" align="center" h="100%" me="20px">
<Icon
as={CgShapeCircle}
color="blue.500"
h={"30px"}
w={"30px"}
zIndex="1"
position="relative"
/>
<Box w="2px" bg="gray.200" h="100%"></Box>
</Flex>
<Flex direction="column" justifyContent="flex-start" h="100%">
<Text fontSize="sm" color={textColor} fontWeight="bold">
Order received
</Text>
<Text
fontSize="sm"
color="gray.400"
fontWeight="normal"
mb="14px"
>
22 DEC 7:20 AM
</Text>
</Flex>
</Flex>
<Flex alignItems="center" minH="70px" justifyContent="start">
<Flex direction="column" align="center" h="100%" me="20px">
<Icon
as={CgShapeCircle}
color="blue.500"
h={"30px"}
w={"30px"}
zIndex="1"
position="relative"
/>
<Box w="2px" bg="gray.200" h="100%"></Box>
</Flex>
<Flex direction="column" justifyContent="flex-start" h="100%">
<Text fontSize="sm" color={textColor} fontWeight="bold">
Generate order id #1832412
</Text>
<Text
fontSize="sm"
color="gray.400"
fontWeight="normal"
mb="14px"
>
22 DEC 7:21 AM
</Text>
</Flex>
</Flex>
<Flex alignItems="center" minH="70px" justifyContent="start">
<Flex direction="column" align="center" h="100%" me="20px">
<Icon
as={CgShapeCircle}
color="blue.500"
h={"30px"}
w={"30px"}
zIndex="1"
position="relative"
/>
<Box w="2px" bg="gray.200" h="100%"></Box>
</Flex>
<Flex direction="column" justifyContent="flex-start" h="100%">
<Text fontSize="sm" color={textColor} fontWeight="bold">
Order transmited to courier
</Text>
<Text
fontSize="sm"
color="gray.400"
fontWeight="normal"
mb="14px"
>
22 DEC 8:10 AM
</Text>
</Flex>
</Flex>
<Flex alignItems="center" minH="70px" justifyContent="start">
<Flex direction="column" align="center" h="100%" me="20px">
<Icon
as={CgShapeCircle}
color="blue.500"
h={"30px"}
w={"30px"}
zIndex="1"
position="relative"
/>
<Box w="2px" bg="gray.200" h="100%"></Box>
</Flex>
<Flex direction="column" justifyContent="flex-start" h="100%">
<Text fontSize="sm" color={textColor} fontWeight="bold">
Order delivered
</Text>
<Text
fontSize="sm"
color="gray.400"
fontWeight="normal"
mb="14px"
>
22 DEC 4:54 PM
</Text>
</Flex>
</Flex>
</Flex>
<Flex direction="column">
<Flex direction="column" mb="32px">
<Text
color={textColor}
fontSize="md"
fontWeight="bold"
mb="22px"
>
Payment Details
</Text>
<Flex
p="22px"
bg="transparent"
borderRadius="8px"
width="100%"
bg={bgPayment}
border="1px solid"
borderColor={borderColor}
align="center"
>
<IconBox me="10px" w="25px" h="22px">
<MastercardIcon w="100%" h="100%" />
</IconBox>
<Text color="gray.400" fontSize="sm" fontWeight="normal">
7812 2139 0823 XXXX
</Text>
<Spacer />
<Button
p="0px"
bg="transparent"
w="16px"
h="16px"
variant="no-effects"
>
<Icon as={FaPencilAlt} />
</Button>
</Flex>
</Flex>
<Flex direction="column">
<Text
color={textColor}
fontSize="md"
fontWeight="bold"
mb="22px"
>
Billing Information
</Text>
<Box p="24px" bg={bgColor} borderRadius="12px">
<Flex justify="space-between" w="100%">
<Flex direction="column">
<Text
color={nameColor}
fontSize="md"
fontWeight="bold"
mb="10px"
>
Oliver Liam
</Text>
<Text
color="gray.400"
fontSize="sm"
fontWeight="normal"
>
Company Name:{" "}
<Text as="span" color="gray.500" fontWeight="bold">
Viking Burrito
</Text>
</Text>
<Text
color="gray.400"
fontSize="sm"
fontWeight="normal"
>
Email Address:{" "}
<Text as="span" color="gray.500" fontWeight="bold">
oliver@burrito.com
</Text>
</Text>
<Text
color="gray.400"
fontSize="sm"
fontWeight="normal"
>
VAT Number:{" "}
<Text as="span" color="gray.500" fontWeight="bold">
FRB1235476
</Text>
</Text>
</Flex>
</Flex>
</Box>
</Flex>
</Flex>
<Flex direction="column" gridColumn={{ md: "1 / 3", lg: "auto" }}>
<Text
color={textColor}
fontSize="md"
fontWeight="bold"
mb="22px"
>
Order Summary
</Text>
<Stack direction="column" spacing="12px">
<Flex align="center" justify="space-between">
<Text fontSize="sm" color="gray.400" fontWeight="normal">
Product Price:
</Text>
<Text fontSize="sm" color={textColor} fontWeight="bold">
$90
</Text>
</Flex>
<Flex align="center" justify="space-between">
<Text fontSize="sm" color="gray.400" fontWeight="normal">
Delivery:
</Text>
<Text fontSize="sm" color={textColor} fontWeight="bold">
$15
</Text>
</Flex>
<Flex align="center" justify="space-between">
<Text fontSize="sm" color="gray.400" fontWeight="normal">
Taxes:
</Text>
<Text fontSize="sm" color={textColor} fontWeight="bold">
$1.95
</Text>
</Flex>
</Stack>
<Flex align="center" justify="space-between" mt="24px">
<Text fontSize="md" color="gray.400" fontWeight="normal">
Total:
</Text>
<Text fontSize="md" color={textColor} fontWeight="bold">
$105.95
</Text>
</Flex>
</Flex>
</Grid>
</Flex>
</CardBody>
</Card>
</Flex>
);
}
export default OrderDetails;

119
src/views/Ecommerce/Orders/OrderList.js
View File

@@ -1,119 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React from 'react';
// Chakra imports
import {
Button,
Flex,
Menu,
MenuButton,
MenuDivider,
MenuItem,
MenuList,
Stack,
LightMode,
useColorModeValue,
} from '@chakra-ui/react';
// Assets
import { IoIosArrowDown } from 'react-icons/io';
// Custom components
import Card from 'components/Card/Card';
import CardBody from 'components/Card/CardBody';
import SearchTable2 from 'components/Tables/SearchTable2';
import { columnsData2 } from 'variables/columnsData';
import tableData2 from 'variables/tableData2.json';
function OrderList() {
return (
<Flex direction='column' pt={{ sm: '125px', md: '75px' }}>
<Flex
direction={{ sm: 'column', md: 'row' }}
justify='space-between'
align='center'
w='100%'
mb='24px'
>
<Button
variant='no-effects'
bg={useColorModeValue('gray.700', 'white')}
w='125px'
h='35px'
color={useColorModeValue('white', 'gray.700')}
fontSize='xs'
fontWeight='bold'
alignSelf={{ sm: 'flex-start', lg: null }}
mb={{ sm: '12px', md: '0px' }}
>
NEW ORDER
</Button>
<Stack
direction='row'
spacing='10px'
alignSelf={{ sm: 'flex-start', lg: 'auto' }}
>
<Menu>
<LightMode>
<MenuButton
as={Button}
variant='light'
rightIcon={<IoIosArrowDown />}
color='gray.700'
w='125px'
h='35px'
fontSize='xs'
>
FILTERS
</MenuButton>
</LightMode>
<MenuList bg={useColorModeValue('white', 'navy.800')}>
<MenuItem color='gray.500'>Status: Paid</MenuItem>
<MenuItem color='gray.500'>Status: Refunded</MenuItem>
<MenuItem color='gray.500'>Status: Canceled</MenuItem>
<MenuDivider />
<MenuItem color='red.300'>Remove filter</MenuItem>
</MenuList>
</Menu>
<LightMode>
<Button
variant='light'
bg={useColorModeValue('white', 'blue.500')}
color={useColorModeValue('gray.700', 'white')}
_hover={useColorModeValue({}, { bg: 'blue.600' })}
_active={useColorModeValue({}, { bg: 'blue.400' })}
_focus={useColorModeValue({}, { bg: 'blue.500' })}
w='125px'
h='35px'
fontSize='xs'
fontWeight='bold'
>
EXPORT CSV
</Button>
</LightMode>
</Stack>
</Flex>
<Card px='0px'>
<CardBody>
<SearchTable2 tableData={tableData2} columnsData={columnsData2} />
</CardBody>
</Card>
</Flex>
);
}
export default OrderList;

427
src/views/Ecommerce/Products/EditProduct.js
View File

@@ -1,427 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React, { useState } from 'react';
// Chakra imports
import {
Box,
Button,
Flex,
FormControl,
FormLabel,
Grid,
Image,
Input,
NumberDecrementStepper,
NumberIncrementStepper,
NumberInput,
NumberInputField,
NumberInputStepper,
Select,
Stack,
Tag,
TagCloseButton,
TagLabel,
Text,
useColorModeValue,
} from '@chakra-ui/react';
// Assets
import productImage1 from 'assets/img/product-page-1.png';
// Custom components
import Card from 'components/Card/Card';
import CardBody from 'components/Card/CardBody';
import CardHeader from 'components/Card/CardHeader';
import Editor from 'components/Editor/Editor';
function EditProduct() {
const [skills, setSkills] = useState([
{
name: 'chakra-ui',
id: 1,
},
{
name: 'react',
id: 2,
},
{
name: 'javascript',
id: 3,
},
]);
const keyPress = (e) => {
if (e.keyCode === 13) {
setSkills([
...skills,
{
name: e.target.value,
id: skills.length === 0 ? 1 : skills[skills.length - 1].id + 1,
},
]);
e.target.value = '';
}
};
const textColor = useColorModeValue('gray.700', 'white');
return (
<Flex direction='column' pt={{ sm: '125px', lg: '75px' }}>
<Flex
direction={{ sm: 'column', lg: 'row' }}
justify='space-between'
align={{ lg: 'center' }}
w='100%'
mb={{ sm: '24px', lg: '55px' }}
>
<Flex direction='column'>
<Text
color='white'
ms='12px'
fontSize={{ sm: 'xl', md: '2xl' }}
fontWeight='bold'
mb='10px'
>
Make the changes below
</Text>
<Text
fontSize='sm'
color='white'
ms='12px'
fontWeight='normal'
mb={{ sm: '16px', lg: '0px' }}
>
We’re constantly trying to express ourselves and actualize our
dreams. If you have the opportunity to play.
</Text>
</Flex>
</Flex>
<Grid templateColumns={{ sm: '1fr', lg: '1fr 1.7fr' }} gap='24px'>
<Stack direction='column' spacing='24px'>
<Card>
<CardHeader mb='42px'>
<Text color={textColor} fontSize='lg' fontWeight='bold'>
Product Image
</Text>
</CardHeader>
<CardBody>
<Flex direction='column' w='100%'>
<Box
w={{ sm: '280px', md: '670px', lg: '600px' }}
h={{ sm: '185px', md: '450px', lg: '400px' }}
maxW={{ sm: '280px', md: '670px', lg: '600px' }}
maxH={{ sm: '185px', md: '450px', lg: '400px' }}
mb='24px'
>
<Image src={productImage1} w='100%' h='100%' />
</Box>
<Flex mt='40px'>
<Button
variant='no-effects'
bg='gray.700'
w={{ sm: '75px', md: '100px' }}
h='35px'
me='12px'
>
<Text fontSize='xs' color='#fff' fontWeight='bold'>
EDIT
</Text>
</Button>
<Button
variant='no-effects'
bg='gray.100'
w={{ sm: '75px', md: '100px' }}
h='35px'
>
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
REMOVE
</Text>
</Button>
</Flex>
</Flex>
</CardBody>
</Card>
<Card>
<CardHeader mb='32px'>
<Text fontSize='lg' color={textColor} fontWeight='bold'>
Socials
</Text>
</CardHeader>
<CardBody>
<Stack direction='column' spacing='20px' w='100%'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Shopify Handle
</FormLabel>
<Input variant='main' placeholder='@Argon' fontSize='xs' />
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Facebook Account
</FormLabel>
<Input variant='main' placeholder='https://' fontSize='xs' />
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Instagram Account
</FormLabel>
<Input variant='main' placeholder='https://' fontSize='xs' />
</FormControl>
</Stack>
</CardBody>
</Card>
</Stack>
<Stack direction='column' spacing='24px'>
<Card>
<CardHeader mb='22px'>
<Text color={textColor} fontSize='lg' fontWeight='bold'>
Product Information
</Text>
</CardHeader>
<CardBody>
<Stack direction='column' spacing='20px' w='100%'>
<Stack direction={{ sm: 'column', md: 'row' }} spacing='30px'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Product Name
</FormLabel>
<Input
variant='main'
placeholder='eg. Modern Luxury Sofa'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Weight
</FormLabel>
<Input variant='main' placeholder='eg. 42' fontSize='xs' />
</FormControl>
</Stack>
<Stack direction={{ sm: 'column', lg: 'row' }} spacing='30px'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Description
</FormLabel>
<Editor />
</FormControl>
<Stack direction='column' spacing='20px' w='100%'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Category
</FormLabel>
<Select
variant='main'
fontSize='xs'
defaultValue={0}
color='gray.400'
>
<option>Electronics</option>
<option>Clothing</option>
<option>Real Estate</option>
<option>Others</option>
</Select>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Color
</FormLabel>
<Select
variant='main'
fontSize='xs'
defaultValue={0}
color='gray.400'
>
<option>Red</option>
<option>Blue</option>
<option>Black</option>
<option>White</option>
<option>Pink</option>
<option>Orange</option>
</Select>
</FormControl>
</Stack>
</Stack>
<Stack direction={{ sm: 'column', md: 'row' }} spacing='30px'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Collection
</FormLabel>
<Input
variant='main'
placeholder='eg. Summer'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Quantity
</FormLabel>
<NumberInput
variant='main'
defaultValue={1}
min={1}
max={20}
color='gray.400'
fontSize='xs'
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</FormControl>
</Stack>
</Stack>
</CardBody>
</Card>
<Card>
<CardHeader mb='32px'>
<Text fontSize='lg' color={textColor} fontWeight='bold'>
Pricing
</Text>
</CardHeader>
<CardBody>
<Stack direction='column' spacing='20px' w='100%'>
<Stack direction='row' spacing='24px'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Price
</FormLabel>
<Input
variant='main'
placeholder='eg. $99.99'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Currency
</FormLabel>
<Select
variant='main'
fontSize='xs'
defaultValue={0}
color='gray.400'
>
<option>EUR</option>
<option>CNY</option>
<option>RON</option>
<option>GBP</option>
<option>INR</option>
<option>CZH</option>
</Select>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
SKU
</FormLabel>
<Input
variant='main'
placeholder='71283476591'
fontSize='xs'
/>
</FormControl>
</Stack>
<FormControl>
<FormLabel fontWeight='bold' fontSize='xs' mb='10px'>
Tags
</FormLabel>
<Flex
direction='row'
p='12px'
wrap='wrap'
bg={useColorModeValue('none', 'navy.900')}
border={useColorModeValue('1px solid #E2E8F0', 'none')}
borderRadius='8px'
_focus={{ borderColor: 'teal.300' }}
minH='40px'
cursor='text'
>
{skills.map((skill, index) => {
return (
<Tag
fontSize='xs'
h='25px'
mb='6px'
me='6px'
key={skill.id}
borderRadius='12px'
variant='solid'
bg='gray.700'
>
<TagLabel w='100%'>{skill.name}</TagLabel>
<TagCloseButton
justifySelf='flex-end'
color='white'
onClick={() =>
setSkills([
...skills.filter(
(element) => element.id !== skill.id
),
])
}
/>
</Tag>
);
})}
<Input
variant='main'
border='none'
_focus={{}}
p='0px'
onKeyDown={(e) => keyPress(e)}
fontSize='xs'
/>
</Flex>
</FormControl>
</Stack>
</CardBody>
</Card>
<Card>
<CardHeader>
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='22px'>
Product Images
</Text>
</CardHeader>
<CardBody>
<Flex
align='center'
justify='center'
bg={useColorModeValue('none', 'navy.900')}
border={useColorModeValue('1px dashed #E2E8F0', 'none')}
borderRadius='15px'
w='100%'
minH='130px'
cursor='pointer'
>
<Button variant='no-effects'>
<Text color='gray.400' fontWeight='normal'>
Drop files here to upload
</Text>
</Button>
</Flex>
</CardBody>
</Card>
</Stack>
</Grid>
</Flex>
);
}
export default EditProduct;

885
src/views/Ecommerce/Products/NewProduct.js
View File

@@ -1,885 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React, { useReducer, useRef, useState } from 'react';
// Chakra imports
import {
Avatar,
Box,
Button,
Flex,
FormControl,
FormLabel,
Icon,
Input,
NumberDecrementStepper,
NumberIncrementStepper,
NumberInput,
NumberInputField,
NumberInputStepper,
Select,
Stack,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Tag,
TagCloseButton,
TagLabel,
Text,
useColorMode,
useColorModeValue,
LightMode,
} from '@chakra-ui/react';
// Assets
import avatar5 from 'assets/img/avatars/avatar5.png';
import { BsCircleFill } from 'react-icons/bs';
import { FaCube, FaPenFancy } from 'react-icons/fa';
import { IoDocumentsSharp } from 'react-icons/io5';
// Custom components
import Card from 'components/Card/Card';
import CardBody from 'components/Card/CardBody';
import CardHeader from 'components/Card/CardHeader';
import Editor from 'components/Editor/Editor';
import { useDropzone } from 'react-dropzone';
const reducer = (state, action) => {
if (action.type === 'SWITCH_ACTIVE') {
if (action.payload === 'overview') {
const newState = {
overview: true,
teams: false,
projects: false,
};
return newState;
} else if (action.payload === 'teams') {
const newState = {
overview: false,
teams: true,
projects: false,
};
return newState;
} else if (action.payload === 'projects') {
const newState = {
overview: false,
teams: false,
projects: true,
};
return newState;
}
}
return state;
};
function NewProduct() {
const [skills, setSkills] = useState([
{
name: 'chakra-ui',
id: 1,
},
{
name: 'react',
id: 2,
},
{
name: 'javascript',
id: 3,
},
]);
const [state, dispatch] = useReducer(reducer, {
overview: true,
teams: false,
projects: false,
});
const [activeBullets, setActiveBullets] = useState({
productInfo: true,
media: false,
socials: false,
pricing: false,
});
const productInfoTab = useRef();
const mediaTab = useRef();
const socialsTab = useRef();
const pricingTab = useRef();
const { getRootProps, getInputProps } = useDropzone();
const keyPress = (e) => {
if (e.keyCode === 13) {
setSkills([
...skills,
{
name: e.target.value,
id: skills.length === 0 ? 1 : skills[skills.length - 1].id + 1,
},
]);
e.target.value = '';
}
};
const { colorMode } = useColorMode();
// Chakra color mode
const textColor = useColorModeValue('gray.700', 'white');
const bgProfile = useColorModeValue('hsla(0,0%,100%,.8)', 'navy.800');
const borderProfileColor = useColorModeValue('white', 'transparent');
const bgPrevButton = 'gray.100';
return (
<Flex direction='column' pt={{ base: '120px', md: '75px', lg: '100px' }}>
<Flex
direction={{ sm: 'column', md: 'row' }}
mb='24px'
maxH='330px'
justifyContent={{ sm: 'center', md: 'space-between' }}
align='center'
backdropFilter='blur(21px)'
boxShadow='0px 2px 5.5px rgba(0, 0, 0, 0.02)'
border='1.5px solid'
borderColor={borderProfileColor}
bg={bgProfile}
p='24px'
borderRadius='20px'
>
<Flex
align='center'
mb={{ sm: '10px', md: '0px' }}
direction={{ sm: 'column', md: 'row' }}
w={{ sm: '100%' }}
textAlign={{ sm: 'center', md: 'start' }}
>
<Avatar
me={{ md: '22px' }}
src={avatar5}
w='80px'
h='80px'
borderRadius='15px'
/>
<Flex direction='column' maxWidth='100%' my={{ sm: '14px' }}>
<Text
fontSize={{ sm: 'lg', lg: 'xl' }}
color={textColor}
fontWeight='bold'
ms={{ sm: '8px', md: '0px' }}
>
Alec Thompson
</Text>
<Text fontSize={{ sm: 'sm', md: 'md' }} color='gray.400'>
alec@simmmple.com
</Text>
</Flex>
</Flex>
<Flex
direction={{ sm: 'column', lg: 'row' }}
w={{ sm: '100%', md: '50%', lg: 'auto' }}
>
<Button p='0px' bg='transparent' variant='no-effects'>
<Flex
align='center'
w={{ sm: '100%', lg: '135px' }}
bg={
state.overview
? colorMode === 'dark'
? 'navy.900'
: '#fff'
: null
}
borderRadius='8px'
justifyContent='center'
py='10px'
boxShadow={
state.overview ? '0px 2px 5.5px rgba(0, 0, 0, 0.06)' : null
}
cursor='pointer'
transition='all .5s ease'
onClick={() =>
dispatch({ type: 'SWITCH_ACTIVE', payload: 'overview' })
}
>
<Icon color={textColor} as={FaCube} me='6px' />
<Text fontSize='xs' color={textColor} fontWeight='bold'>
OVERVIEW
</Text>
</Flex>
</Button>
<Button p='0px' bg='transparent' variant='no-effects'>
<Flex
align='center'
w={{ lg: '135px' }}
borderRadius='8px'
justifyContent='center'
py='10px'
mx={{ lg: '1rem' }}
cursor='pointer'
boxShadow={
state.teams ? '0px 2px 5.5px rgba(0, 0, 0, 0.06)' : null
}
bg={
state.teams
? colorMode === 'dark'
? 'navy.900'
: '#fff'
: null
}
transition='all .5s ease'
onClick={() =>
dispatch({ type: 'SWITCH_ACTIVE', payload: 'teams' })
}
>
<Icon color={textColor} as={IoDocumentsSharp} me='6px' />
<Text fontSize='xs' color={textColor} fontWeight='bold'>
TEAMS
</Text>
</Flex>
</Button>
<Button p='0px' bg='transparent' variant='no-effects'>
<Flex
align='center'
w={{ lg: '135px' }}
borderRadius='8px'
justifyContent='center'
py='10px'
cursor='pointer'
boxShadow={
state.projects ? '0px 2px 5.5px rgba(0, 0, 0, 0.06)' : null
}
bg={
state.projects
? colorMode === 'dark'
? 'navy.900'
: '#fff'
: null
}
transition='all .5s ease'
onClick={() =>
dispatch({ type: 'SWITCH_ACTIVE', payload: 'projects' })
}
>
<Icon color={textColor} as={FaPenFancy} me='6px' />
<Text fontSize='xs' color={textColor} fontWeight='bold'>
PROJECTS
</Text>
</Flex>
</Button>
</Flex>
</Flex>
<Tabs variant='unstyled' mt='24px' alignSelf='center'>
<TabList display='flex' align='center'>
<Tab
ref={productInfoTab}
_focus={{}}
w={{ sm: '80px', md: '200px' }}
onClick={() =>
setActiveBullets({
productInfo: true,
media: false,
socials: false,
pricing: false,
})
}
>
<Flex
direction='column'
justify='center'
align='center'
position='relative'
_before={{
content: "''",
width: { sm: '80px', md: '200px' },
height: '3px',
bg: activeBullets.media ? 'white' : 'blue.300',
left: { sm: '12px', md: '52px' },
top: {
sm: activeBullets.productInfo ? '6px' : '4px',
md: null,
},
position: 'absolute',
bottom: activeBullets.productInfo ? '40px' : '38px',
transition: 'all .3s ease',
}}
>
<Icon
zIndex='1'
as={BsCircleFill}
color={activeBullets.productInfo ? 'white' : 'blue.300'}
w={activeBullets.productInfo ? '16px' : '12px'}
h={activeBullets.productInfo ? '16px' : '12px'}
mb='8px'
/>
<Text
color={activeBullets.productInfo ? 'white' : 'gray.300'}
fontWeight={activeBullets.productInfo ? 'bold' : 'normal'}
display={{ sm: 'none', md: 'block' }}
>
1. Product Info
</Text>
</Flex>
</Tab>
<Tab
ref={mediaTab}
_focus={{}}
w={{ sm: '80px', md: '200px' }}
onClick={() =>
setActiveBullets({
productInfo: true,
media: true,
socials: false,
pricing: false,
})
}
>
<Flex
direction='column'
justify='center'
align='center'
position='relative'
_before={{
content: "''",
width: { sm: '80px', md: '200px' },
height: '3px',
bg: activeBullets.socials ? 'white' : 'blue.300',
left: { sm: '12px', md: '32px' },
top: {
sm: activeBullets.media ? '6px' : '4px',
md: null,
},
position: 'absolute',
bottom: activeBullets.media ? '40px' : '38px',
transition: 'all .3s ease',
}}
>
<Icon
zIndex='1'
as={BsCircleFill}
color={activeBullets.media ? 'white' : 'blue.300'}
w={activeBullets.media ? '16px' : '12px'}
h={activeBullets.media ? '16px' : '12px'}
mb='8px'
/>
<Text
color={activeBullets.media ? 'white' : 'gray.300'}
fontWeight={activeBullets.media ? 'bold' : 'normal'}
display={{ sm: 'none', md: 'block' }}
>
2. Media
</Text>
</Flex>
</Tab>
<Tab
ref={socialsTab}
_focus={{}}
w={{ sm: '80px', md: '200px' }}
onClick={() =>
setActiveBullets({
productInfo: true,
media: true,
socials: true,
pricing: false,
})
}
>
<Flex
direction='column'
justify='center'
align='center'
position='relative'
_before={{
content: "''",
width: { sm: '80px', md: '200px' },
height: '3px',
bg: activeBullets.pricing ? 'white' : 'blue.300',
left: { sm: '12px', md: '32px' },
top: {
sm: activeBullets.socials ? '6px' : '4px',
md: null,
},
position: 'absolute',
bottom: activeBullets.socials ? '40px' : '38px',
transition: 'all .3s ease',
}}
>
<Icon
zIndex='1'
as={BsCircleFill}
color={activeBullets.socials ? 'white' : 'blue.300'}
w={activeBullets.socials ? '16px' : '12px'}
h={activeBullets.socials ? '16px' : '12px'}
mb='8px'
/>
<Text
color={activeBullets.socials ? 'white' : 'gray.300'}
fontWeight={activeBullets.socials ? 'bold' : 'normal'}
display={{ sm: 'none', md: 'block' }}
>
3. Socials
</Text>
</Flex>
</Tab>
<Tab
ref={pricingTab}
_focus={{}}
w={{ sm: '80px', md: '200px' }}
onClick={() =>
setActiveBullets({
productInfo: true,
media: true,
socials: true,
pricing: true,
})
}
>
<Flex direction='column' justify='center' align='center'>
<Icon
zIndex='1'
as={BsCircleFill}
color={activeBullets.pricing ? 'white' : 'blue.300'}
w={activeBullets.pricing ? '16px' : '12px'}
h={activeBullets.pricing ? '16px' : '12px'}
mb='8px'
/>
<Text
color={activeBullets.pricing ? 'white' : 'gray.300'}
fontWeight={activeBullets.pricing ? 'bold' : 'normal'}
display={{ sm: 'none', md: 'block' }}
>
4. Pricing
</Text>
</Flex>
</Tab>
</TabList>
<TabPanels mt='24px' maxW={{ md: '90%', lg: '100%' }} mx='auto'>
<TabPanel>
<Card>
<CardHeader mb='22px'>
<Text color={textColor} fontSize='lg' fontWeight='bold'>
Product Information
</Text>
</CardHeader>
<CardBody>
<Stack direction='column' spacing='20px' w='100%'>
<Stack direction={{ sm: 'column', md: 'row' }} spacing='30px'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Product Name
</FormLabel>
<Input
variant='main'
placeholder='eg. Modern Luxury Sofa'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Weight
</FormLabel>
<Input
variant='main'
placeholder='eg. 42'
fontSize='xs'
/>
</FormControl>
</Stack>
<Stack direction={{ sm: 'column', lg: 'row' }} spacing='30px'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Description
</FormLabel>
<Editor />
</FormControl>
<Stack direction='column' spacing='20px' w='100%'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Category
</FormLabel>
<Select
variant='main'
fontSize='xs'
placeholder='Furniture'
color='gray.400'
defaultValue={0}
>
<option>Electronics</option>
<option>Clothing</option>
<option>Real Estate</option>
<option>Others</option>
</Select>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Color
</FormLabel>
<Select
variant='main'
fontSize='xs'
placeholder='Green'
color='gray.400'
defaultValue={0}
>
<option>Red</option>
<option>Blue</option>
<option>Black</option>
<option>White</option>
<option>Pink</option>
<option>Orange</option>
</Select>
</FormControl>
</Stack>
</Stack>
<Stack direction={{ sm: 'column', md: 'row' }} spacing='30px'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Collection
</FormLabel>
<Input
variant='main'
placeholder='eg. Summer'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Quantity
</FormLabel>
<NumberInput
variant='main'
defaultValue={1}
min={1}
max={20}
color='gray.400'
>
<NumberInputField fontSize='xs' />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</FormControl>
</Stack>
<LightMode>
<Button
variant='dark'
alignSelf='flex-end'
mt='24px'
w='100px'
h='35px'
onClick={() => mediaTab.current.click()}
>
<Text fontSize='xs' color='#fff' fontWeight='bold'>
NEXT
</Text>
</Button>
</LightMode>
</Stack>
</CardBody>
</Card>
</TabPanel>
<TabPanel>
<Card>
<CardHeader mb='40px'>
<Text
color={textColor}
fontSize='xl'
fontWeight='bold'
mb='3px'
>
Media
</Text>
</CardHeader>
<CardBody>
<Flex direction='column' w='100%'>
<Text
color={textColor}
fontSize='sm'
fontWeight='bold'
mb='12px'
>
Product images
</Text>
<Flex
align='center'
justify='center'
bg={useColorModeValue('none', 'navy.900')}
border={useColorModeValue('1px dashed #E2E8F0', 'none')}
w='100%'
minH='130px'
cursor='pointer'
{...getRootProps({ className: 'dropzone' })}
>
<Input variant='main' {...getInputProps()} />
<Button variant='no-effects'>
<Text color='gray.400' fontWeight='normal'>
Drop files here to upload
</Text>
</Button>
</Flex>
<Flex justify='space-between'>
<Button
variant='no-effects'
bg={bgPrevButton}
alignSelf='flex-end'
mt='24px'
w='100px'
h='35px'
onClick={() => productInfoTab.current.click()}
>
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
PREV
</Text>
</Button>
<LightMode>
<Button
variant='DARK'
alignSelf='flex-end'
mt='24px'
w='100px'
h='35px'
onClick={() => socialsTab.current.click()}
>
<Text fontSize='xs' color='#fff' fontWeight='bold'>
NEXT
</Text>
</Button>
</LightMode>
</Flex>
</Flex>
</CardBody>
</Card>
</TabPanel>
<TabPanel>
<Card>
<CardHeader mb='32px'>
<Text fontSize='lg' color={textColor} fontWeight='bold'>
Socials
</Text>
</CardHeader>
<CardBody>
<Flex direction='column' w='100%'>
<Stack direction='column' spacing='20px' w='100%'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Shopify Handle
</FormLabel>
<Input
variant='main'
placeholder='@Argon'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Facebook Account
</FormLabel>
<Input
variant='main'
placeholder='https://'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Instagram Account
</FormLabel>
<Input
variant='main'
placeholder='https://'
fontSize='xs'
/>
</FormControl>
</Stack>
<Flex justify='space-between'>
<Button
variant='no-effects'
bg={bgPrevButton}
alignSelf='flex-end'
mt='24px'
w='100px'
h='35px'
onClick={() => mediaTab.current.click()}
>
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
PREV
</Text>
</Button>
<LightMode>
<Button
variant='no-effects'
bg='dark'
alignSelf='flex-end'
mt='24px'
w='100px'
h='35px'
onClick={() => pricingTab.current.click()}
>
<Text fontSize='xs' color='#fff' fontWeight='bold'>
NEXT
</Text>
</Button>
</LightMode>
</Flex>
</Flex>
</CardBody>
</Card>
</TabPanel>
<TabPanel maxW='800px'>
<Card>
<CardHeader mb='32px'>
<Text fontSize='lg' color={textColor} fontWeight='bold'>
Pricing
</Text>
</CardHeader>
<CardBody>
<Flex direction='column' w='100%'>
<Stack direction='column' spacing='20px' w='100%'>
<Stack direction='row' spacing='24px'>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Price
</FormLabel>
<Input
variant='main'
placeholder='eg. $99.99'
fontSize='xs'
/>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
Currency
</FormLabel>
<Select
variant='main'
fontSize='xs'
placeholder='USD'
color='gray.400'
defaultValue={0}
>
<option>EUR</option>
<option>CNY</option>
<option>RON</option>
<option>GBP</option>
<option>INR</option>
<option>CZH</option>
</Select>
</FormControl>
<FormControl>
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
SKU
</FormLabel>
<Input
variant='main'
placeholder='71283476591'
fontSize='xs'
/>
</FormControl>
</Stack>
<FormControl>
<FormLabel fontWeight='bold' fontSize='xs' mb='10px'>
Tags
</FormLabel>
<Flex
borderRadius='8px'
direction='row'
p='12px'
wrap='wrap'
bg={useColorModeValue('none', 'navy.900')}
border={useColorModeValue('1px solid #E2E8F0', 'none')}
_focus={{ borderColor: 'teal.300' }}
minH='40px'
cursor='text'
>
{skills.map((skill) => {
return (
<Tag
fontSize='xs'
h='25px'
mb='6px'
me='6px'
key={skill.id}
borderRadius='12px'
variant='solid'
bg='gray.700'
>
<TagLabel w='100%'>{skill.name}</TagLabel>
<TagCloseButton
justifySelf='flex-end'
onClick={() =>
setSkills([
...skills.filter(
(element) => element.id !== skill.id
),
])
}
/>
</Tag>
);
})}
<Input
variant='main'
border='none'
_focus={{}}
p='0px'
onKeyDown={(e) => keyPress(e)}
fontSize='xs'
/>
</Flex>
</FormControl>
</Stack>
<Flex justify='space-between'>
<Button
variant='no-effects'
bg={bgPrevButton}
alignSelf='flex-end'
mt='24px'
w='100px'
h='35px'
onClick={() => socialsTab.current.click()}
>
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
PREV
</Text>
</Button>
<LightMode>
<Button
variant='dark'
alignSelf='flex-end'
mt='24px'
w='100px'
h='35px'
>
<Text fontSize='xs' color='#fff' fontWeight='bold'>
SEND
</Text>
</Button>
</LightMode>
</Flex>
</Flex>
</CardBody>
</Card>
</TabPanel>
</TabPanels>
</Tabs>
</Flex>
);
}
export default NewProduct;

597
src/views/Ecommerce/Products/ProductPage.js
View File

@@ -1,597 +0,0 @@
/*!
=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
* Designed and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra imports
import {
Badge,
Box,
Button,
Flex,
FormControl,
FormLabel,
Icon,
Image,
ListItem,
Progress,
Select,
Stack,
Table,
Tbody,
Td,
Text,
Th,
Thead,
Tr,
UnorderedList,
useColorModeValue,
} from '@chakra-ui/react';
// Assets
import productPage1 from 'assets/img/product-page-1.png';
import productPage2 from 'assets/img/product-page-2.png';
import productPage3 from 'assets/img/product-page-3.png';
import productPage4 from 'assets/img/product-page-4.png';
import productPage5 from 'assets/img/product-page-5.png';
// Custom components
import Card from 'components/Card/Card';
import CardBody from 'components/Card/CardBody';
import CardHeader from 'components/Card/CardHeader';
import React, { useState } from 'react';
import { BsStarFill, BsStarHalf } from 'react-icons/bs';
function ProductPage() {
const [currentImage, setCurrentImage] = useState(productPage1);
const textColor = useColorModeValue('gray.700', 'white');
const starFill = useColorModeValue('gray.800', 'white');
return (
<Card mt={{ sm: '125px', md: '75px' }}>
<CardHeader mb='42px'>
<Text color={textColor} fontSize='lg' fontWeight='bold'>
Product Details
</Text>
</CardHeader>
<CardBody>
<Flex direction='column' w='100%'>
<Flex
direction={{ sm: 'column', lg: 'row' }}
mb={{ sm: '42px', lg: '84px' }}
>
<Flex
direction='column'
me={{ lg: '70px', xl: '120px' }}
mb={{ sm: '24px', lg: '0px' }}
>
<Box
w={{ sm: '275px', md: '670px', lg: '450px', xl: '600px' }}
h={{ sm: '200px', md: '500px', lg: '330px', xl: '500px' }}
mb='26px'
mx={{ sm: 'auto', lg: '0px' }}
>
<Image
src={currentImage}
w='100%'
h='100%'
borderRadius='8px'
/>
</Box>
<Stack
direction='row'
spacing={{ sm: '20px', md: '35px', lg: '20px' }}
mx='auto'
mb={{ sm: '24px', lg: '0px' }}
>
<Box
w={{ sm: '36px', md: '90px', lg: '60px' }}
h={{ sm: '36px', md: '90px', lg: '60px' }}
>
<Image
src={productPage1}
w='100%'
h='100%'
borderRadius='8px'
cursor='pointer'
onClick={(e) => setCurrentImage(e.target.src)}
/>
</Box>
<Box
w={{ sm: '36px', md: '90px', lg: '60px' }}
h={{ sm: '36px', md: '90px', lg: '60px' }}
>
<Image
src={productPage3}
w='100%'
h='100%'
borderRadius='8px'
cursor='pointer'
onClick={(e) => setCurrentImage(e.target.src)}
/>
</Box>
<Box
w={{ sm: '36px', md: '90px', lg: '60px' }}
h={{ sm: '36px', md: '90px', lg: '60px' }}
>
<Image
src={productPage4}
w='100%'
h='100%'
borderRadius='8px'
cursor='pointer'
onClick={(e) => setCurrentImage(e.target.src)}
/>
</Box>
<Box
w={{ sm: '36px', md: '90px', lg: '60px' }}
h={{ sm: '36px', md: '90px', lg: '60px' }}
>
<Image
src={productPage5}
w='100%'
h='100%'
borderRadius='8px'
cursor='pointer'
onClick={(e) => setCurrentImage(e.target.src)}
/>
</Box>
</Stack>
</Flex>
<Flex direction='column'>
<Text
color={textColor}
fontSize='3xl'
fontWeight='bold'
mb='12px'
>
Modern Luxury Sofa
</Text>
<Stack
direction='row'
spacing='12px'
color='orange.300'
mb='30px'
>
<Icon as={BsStarFill} w='26px' h='26px' />
<Icon as={BsStarFill} w='26px' h='26px' />
<Icon as={BsStarFill} w='26px' h='26px' />
<Icon as={BsStarFill} w='26px' h='26px' />
<Icon as={BsStarHalf} w='26px' h='26px' />
</Stack>
<Text color='gray.400' fontWeight='normal' fontSize='sm'>
Price
</Text>
<Text
color={textColor}
fontWeight='bold'
fontSize='3xl'
mb='12px'
>
$2,599.00
</Text>
<Badge
colorScheme='green'
w='95px'
h='28px'
mb='40px'
borderRadius='8px'
display='flex'
alignItems='center'
justifyContent='center'
>
IN STOCK
</Badge>
<Text color='gray.400' fontSize='sm' fontWeight='normal' mb='8px'>
Description
</Text>
<UnorderedList spacing='8px' mb='40px'>
<ListItem fontSize='md' color={textColor} fontWeight='normal'>
The most beautiful curves of this swivel stool adds an elegant
touch to any environment
</ListItem>
<ListItem fontSize='md' color={textColor} fontWeight='normal'>
Memory swivel seat returns to original seat position
</ListItem>
<ListItem fontSize='md' color={textColor} fontWeight='normal'>
Comfortable integrated layered chair seat cushion design
</ListItem>
<ListItem fontSize='md' color={textColor} fontWeight='normal'>
Fully assembled! No assembly required
</ListItem>
</UnorderedList>
<Stack
direction={{ sm: 'column', lg: 'row' }}
spacing='24px'
mb='40px'
>
<FormControl>
<FormLabel fontWeight='bold' fontSize='xs' color={textColor}>
Frame Material
</FormLabel>
<Select
variant='main'
placeholder='Wood'
fontSize='xs'
cursor='pointer'
color='gray.400'
>
<option>Aluminium</option>
<option>Carbon</option>
<option>Steel</option>
<option>Brasil</option>
</Select>
</FormControl>
<FormControl>
<FormLabel fontWeight='bold' fontSize='xs' color={textColor}>
Color
</FormLabel>
<Select
variant='main'
placeholder='White'
fontSize='xs'
cursor='pointer'
color='gray.400'
>
<option>Blue</option>
<option>Gray</option>
<option>Pink</option>
<option>Red</option>
<option>Green</option>
<option>Black</option>
</Select>
</FormControl>
<FormControl>
<FormLabel fontWeight='bold' fontSize='xs' color={textColor}>
Quantity
</FormLabel>
<Select
variant='main'
placeholder='1'
fontSize='xs'
cursor='pointer'
color='gray.400'
maxW={{ lg: '75px' }}
>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</Select>
</FormControl>
</Stack>
<Button
variant='dark'
w={{ sm: '240px', md: '100%', lg: '240px' }}
h='50px'
mx={{ sm: 'auto', md: '0px' }}
color='#fff'
fontSize='xs'
fontWeight='bold'
>
ADD TO CART
</Button>
</Flex>
</Flex>
<Box w='100%' overflowX={{ sm: 'scroll', lg: 'hidden' }}>
<Table variant='simple' w='100%'>
<Thead>
<Tr>
<Th color='gray.400' fontSize='xs'>
Name
</Th>
<Th color='gray.400' fontSize='xs'>
Price
</Th>
<Th color='gray.400' fontSize='xs'>
Review
</Th>
<Th color='gray.400' fontSize='xs'>
Availability
</Th>
<Th color='gray.400' fontSize='xs'>
id
</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td minW='300px'>
<Flex align='center'>
<Box w='40px' h='40px' me='14px'>
<Image
src={productPage2}
w='100%'
h='100%'
borderRadius='12px'
/>
</Box>
<Text color={textColor} fontSize='sm' fontWeight='bold'>
Christopher Knight Home
</Text>
</Flex>
</Td>
<Td>
<Text color='gray.500' fontSize='sm' fontWeight='bold'>
$89.53
</Text>
</Td>
<Td>
<Stack direction='row' color='gray.700' spacing='2px'>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarHalf}
w='10px'
h='10px'
/>
</Stack>
</Td>
<Td>
<Progress
size='xs'
colorScheme='blue'
value={70}
borderRadius='12px'
/>
</Td>
<Td>
<Text color='gray.500' fontSize='sm' fontWeight='normal'>
230019
</Text>
</Td>
</Tr>
<Tr>
<Td>
<Flex align='center'>
<Box w='40px' h='40px' me='14px'>
<Image
src={productPage3}
w='100%'
h='100%'
borderRadius='12px'
/>
</Box>
<Text color={textColor} fontSize='sm' fontWeight='bold'>
Bar Height Swivel Barstool
</Text>
</Flex>
</Td>
<Td>
<Text color='gray.500' fontSize='sm' fontWeight='bold'>
$89.53
</Text>
</Td>
<Td>
<Stack direction='row' color='gray.700' spacing='2px'>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
</Stack>
</Td>
<Td>
<Progress
size='xs'
colorScheme='blue'
value={90}
borderRadius='12px'
/>
</Td>
<Td>
<Text color='gray.500' fontSize='sm' fontWeight='normal'>
230019
</Text>
</Td>
</Tr>
<Tr>
<Td>
<Flex align='center'>
<Box w='40px' h='40px' me='14px'>
<Image
src={productPage4}
w='100%'
h='100%'
borderRadius='12px'
/>
</Box>
<Text color={textColor} fontSize='sm' fontWeight='bold'>
Signature Design by Ashley
</Text>
</Flex>
</Td>
<Td>
<Text color='gray.500' fontSize='sm' fontWeight='bold'>
$89.53
</Text>
</Td>
<Td>
<Stack direction='row' color='gray.700' spacing='2px'>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
</Stack>
</Td>
<Td>
<Progress
size='xs'
colorScheme='red'
value={40}
borderRadius='12px'
/>
</Td>
<Td>
<Text color='gray.500' fontSize='sm' fontWeight='normal'>
230019
</Text>
</Td>
</Tr>
<Tr>
<Td border='none'>
<Flex align='center'>
<Box w='40px' h='40px' me='14px'>
<Image
src={productPage5}
w='100%'
h='100%'
borderRadius='12px'
/>
</Box>
<Text color={textColor} fontSize='sm' fontWeight='bold'>
Modern Square
</Text>
</Flex>
</Td>
<Td border='none'>
<Text color='gray.500' fontSize='sm' fontWeight='bold'>
$89.53
</Text>
</Td>
<Td border='none'>
<Stack direction='row' color='gray.700' spacing='2px'>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarFill}
w='10px'
h='10px'
/>
<Icon
color={starFill}
as={BsStarHalf}
w='10px'
h='10px'
/>
</Stack>
</Td>
<Td border='none'>
<Progress
size='xs'
colorScheme='red'
value={15}
borderRadius='12px'
/>
</Td>
<Td border='none'>
<Text color='gray.500' fontSize='sm' fontWeight='normal'>
230019
</Text>
</Td>
</Tr>
</Tbody>
</Table>
</Box>
</Flex>
</CardBody>
</Card>
);
}
export default ProductPage;