chore: 删除未使用的 ApexCharts 模板组件和演示页面
删除的组件: - src/components/Charts/BubbleChart.js - src/components/Charts/LineBarChart.js - src/components/Charts/PolarChart.js - src/components/Charts/RadarChart.js 删除的模板演示页面: - src/views/Pages/Charts.js - src/views/Pages/Projects/General.js - src/views/Pages/RTLPage.js 这些文件来自 Argon Dashboard Chakra PRO 模板，从未被路由引用或使用 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -1,50 +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, { Component } from "react";
|
|
||||||
import Chart from "react-apexcharts";
|
|
||||||
|
|
||||||
class BubbleChart extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
chartData: [],
|
|
||||||
chartOptions: {},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.setState({
|
|
||||||
chartData: this.props.chartData,
|
|
||||||
chartOptions: this.props.chartOptions,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Chart
|
|
||||||
options={this.state.chartOptions}
|
|
||||||
series={this.state.chartData}
|
|
||||||
type="bubble"
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BubbleChart;
|
|
||||||
@@ -1,50 +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, { Component } from "react";
|
|
||||||
import Chart from "react-apexcharts";
|
|
||||||
|
|
||||||
class LineBarChart extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
chartData: [],
|
|
||||||
chartOptions: {},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.setState({
|
|
||||||
chartData: this.props.chartData,
|
|
||||||
chartOptions: this.props.chartOptions,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Chart
|
|
||||||
options={this.state.chartOptions}
|
|
||||||
series={this.state.chartData}
|
|
||||||
type="line"
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LineBarChart;
|
|
||||||
@@ -1,51 +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";
|
|
||||||
import ReactApexChart from "react-apexcharts";
|
|
||||||
|
|
||||||
class PolarChart extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
chartData: [],
|
|
||||||
chartOptions: {},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.setState({
|
|
||||||
chartData: this.props.chartData,
|
|
||||||
chartOptions: this.props.chartOptions,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<ReactApexChart
|
|
||||||
options={this.state.chartOptions}
|
|
||||||
series={this.state.chartData}
|
|
||||||
type="polarArea"
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PolarChart;
|
|
||||||
@@ -1,51 +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";
|
|
||||||
import ReactApexChart from "react-apexcharts";
|
|
||||||
|
|
||||||
class RadarChart extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
chartData: [],
|
|
||||||
chartOptions: {},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.setState({
|
|
||||||
chartData: this.props.chartData,
|
|
||||||
chartOptions: this.props.chartOptions,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<ReactApexChart
|
|
||||||
options={this.state.chartOptions}
|
|
||||||
series={this.state.chartData}
|
|
||||||
type="radar"
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RadarChart;
|
|
||||||
@@ -1,221 +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, Grid, Text, useColorModeValue } from "@chakra-ui/react";
|
|
||||||
// Custom components
|
|
||||||
import Card from "components/Card/Card";
|
|
||||||
import CardBody from "components/Card/CardBody";
|
|
||||||
import CardHeader from "components/Card/CardHeader";
|
|
||||||
import BarChart from "components/Charts/BarChart";
|
|
||||||
import BubbleChart from "components/Charts/BubbleChart";
|
|
||||||
import DonutChart from "components/Charts/DonutChart";
|
|
||||||
import LineBarChart from "components/Charts/LineBarChart";
|
|
||||||
import LineChart from "components/Charts/LineChart";
|
|
||||||
import PieChart from "components/Charts/PieChart";
|
|
||||||
import PolarChart from "components/Charts/PolarChart";
|
|
||||||
import RadarChart from "components/Charts/RadarChart";
|
|
||||||
// Assets
|
|
||||||
import React from "react";
|
|
||||||
import {
|
|
||||||
barChartDataCharts1,
|
|
||||||
barChartDataCharts2,
|
|
||||||
barChartOptionsCharts1,
|
|
||||||
barChartOptionsCharts2,
|
|
||||||
bubbleChartData,
|
|
||||||
bubbleChartOptions,
|
|
||||||
donutChartDataCharts1,
|
|
||||||
donutChartOptionsCharts1,
|
|
||||||
lineBarChartData,
|
|
||||||
lineBarChartOptions,
|
|
||||||
lineChartDataCharts1,
|
|
||||||
lineChartDataCharts2,
|
|
||||||
lineChartOptionsCharts1,
|
|
||||||
lineChartOptionsCharts2,
|
|
||||||
pieChartDataCharts1,
|
|
||||||
pieChartOptionsCharts1,
|
|
||||||
polarChartDataCharts,
|
|
||||||
polarChartOptionsCharts,
|
|
||||||
radarChartDataCharts,
|
|
||||||
radarChartOptionsCharts,
|
|
||||||
} from "variables/charts";
|
|
||||||
|
|
||||||
function Charts() {
|
|
||||||
const textColor = useColorModeValue("gray.700", "white");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Grid
|
|
||||||
templateColumns={{ sm: "1fr", md: "repeat(2, 1fr)" }}
|
|
||||||
templateRows={{ sm: "repeat(8, 1fr)", md: "repeat(4, 1fr)" }}
|
|
||||||
gap="24px"
|
|
||||||
pt={{ sm: "125px", lg: "75px" }}
|
|
||||||
>
|
|
||||||
<Card px="0px" pb="0px">
|
|
||||||
<CardHeader mb="34px" px="22px">
|
|
||||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
|
||||||
Line chart
|
|
||||||
</Text>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody h="100%">
|
|
||||||
<Box w="100%" h="100%">
|
|
||||||
<LineChart
|
|
||||||
chartData={lineChartDataCharts1}
|
|
||||||
chartOptions={lineChartOptionsCharts1}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
<Card px="0px" pb="0px">
|
|
||||||
<CardHeader mb="34px" px="22px">
|
|
||||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
|
||||||
Line chart with gradient
|
|
||||||
</Text>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody h="100%">
|
|
||||||
<Box w="100%" h="100%">
|
|
||||||
<LineChart
|
|
||||||
chartData={lineChartDataCharts2}
|
|
||||||
chartOptions={lineChartOptionsCharts2}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
<Card px="0px" pb="0px">
|
|
||||||
<CardHeader mb="34px" px="22px">
|
|
||||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
|
||||||
Bar chart
|
|
||||||
</Text>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody h="100%">
|
|
||||||
<Box w="100%" h="100%">
|
|
||||||
<BarChart
|
|
||||||
chartData={barChartDataCharts1}
|
|
||||||
chartOptions={barChartOptionsCharts1}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
<Card px="0px" pb="0px">
|
|
||||||
<CardHeader mb="34px" px="22px">
|
|
||||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
|
||||||
Bar chart horizontal
|
|
||||||
</Text>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody h="100%">
|
|
||||||
<Box w="100%" h="100%">
|
|
||||||
<BarChart
|
|
||||||
chartData={barChartDataCharts2}
|
|
||||||
chartOptions={barChartOptionsCharts2}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
<Card px="0px" pb="0px">
|
|
||||||
<CardHeader mb="34px" px="22px">
|
|
||||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
|
||||||
Mixed chart
|
|
||||||
</Text>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody h="100%">
|
|
||||||
<Box w="100%" h="100%">
|
|
||||||
<LineBarChart
|
|
||||||
chartData={lineBarChartData}
|
|
||||||
chartOptions={lineBarChartOptions}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
<Card px="0px" pb="0px">
|
|
||||||
<CardHeader mb="34px" px="22px">
|
|
||||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
|
||||||
Bubble chart
|
|
||||||
</Text>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody h="100%">
|
|
||||||
<Box w="100%" h="100%">
|
|
||||||
<BubbleChart
|
|
||||||
chartData={bubbleChartData}
|
|
||||||
chartOptions={bubbleChartOptions}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
<Card px="0px" pb="0px">
|
|
||||||
<CardHeader mb="34px" px="22px">
|
|
||||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
|
||||||
Donut chart
|
|
||||||
</Text>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody h="100%">
|
|
||||||
<Box w="100%" minH={{ sm: "200px", lg: "300px" }}>
|
|
||||||
<DonutChart
|
|
||||||
chartData={donutChartDataCharts1}
|
|
||||||
chartOptions={donutChartOptionsCharts1}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
<Card px="0px" pb="0px">
|
|
||||||
<CardHeader mb="34px" px="22px">
|
|
||||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
|
||||||
Pie chart
|
|
||||||
</Text>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody h="100%">
|
|
||||||
<Box w="100%" minH={{ sm: "200px", lg: "300px" }}>
|
|
||||||
<PieChart
|
|
||||||
chartData={pieChartDataCharts1}
|
|
||||||
chartOptions={pieChartOptionsCharts1}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
<Card px="0px" pb="0px">
|
|
||||||
<CardHeader mb="34px" px="22px">
|
|
||||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
|
||||||
Radar chart
|
|
||||||
</Text>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody h="100%">
|
|
||||||
<Box w="100%" minH={{ sm: "300px", lg: "500px" }}>
|
|
||||||
<RadarChart
|
|
||||||
chartData={radarChartDataCharts}
|
|
||||||
chartOptions={radarChartOptionsCharts}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
<Card px="0px" pb="0px">
|
|
||||||
<CardHeader mb="34px" px="22px">
|
|
||||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
|
||||||
Polar chart
|
|
||||||
</Text>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody h="100%">
|
|
||||||
<Box w="100%" minH={{ sm: "300px", lg: "500px" }}>
|
|
||||||
<PolarChart
|
|
||||||
chartData={polarChartDataCharts}
|
|
||||||
chartOptions={polarChartOptionsCharts}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Charts;
|
|
||||||
@@ -1,740 +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 {
|
|
||||||
Avatar,
|
|
||||||
Badge,
|
|
||||||
Button,
|
|
||||||
Checkbox,
|
|
||||||
Flex,
|
|
||||||
Grid,
|
|
||||||
Icon,
|
|
||||||
Progress,
|
|
||||||
Stack,
|
|
||||||
Stat,
|
|
||||||
StatHelpText,
|
|
||||||
StatLabel,
|
|
||||||
StatNumber,
|
|
||||||
Text,
|
|
||||||
useColorMode,
|
|
||||||
useColorModeValue,
|
|
||||||
} from '@chakra-ui/react';
|
|
||||||
// Assets
|
|
||||||
import avatar4 from 'assets/img/avatars/avatar4.png';
|
|
||||||
import basicDark from 'assets/img/BgMusicCard.png';
|
|
||||||
import basicBlue from 'assets/img/basic-auth.png';
|
|
||||||
import { BsCircleFill } from 'react-icons/bs';
|
|
||||||
import { IoEllipsisHorizontalSharp } from 'react-icons/io5';
|
|
||||||
import {
|
|
||||||
CartIcon,
|
|
||||||
DocumentIcon,
|
|
||||||
GlobeIcon,
|
|
||||||
HomeIcon,
|
|
||||||
WalletIcon,
|
|
||||||
} from 'components/Icons/Icons';
|
|
||||||
// Custom components
|
|
||||||
import Card from 'components/Card/Card';
|
|
||||||
import CardHeader from 'components/Card/CardHeader';
|
|
||||||
import DonutChart from 'components/Charts/DonutChart';
|
|
||||||
import LineChart from 'components/Charts/LineChart';
|
|
||||||
import IconBox from 'components/Icons/IconBox';
|
|
||||||
import { HSeparator } from 'components/Separator/Separator';
|
|
||||||
import {
|
|
||||||
donutChartDataGeneral,
|
|
||||||
donutChartOptionsGeneral,
|
|
||||||
lineChartDataGeneral,
|
|
||||||
lineChartOptionsGeneral,
|
|
||||||
} from 'variables/charts';
|
|
||||||
|
|
||||||
function General() {
|
|
||||||
const { colorMode } = useColorMode();
|
|
||||||
|
|
||||||
const textColor = useColorModeValue('gray.700', 'white');
|
|
||||||
const iconBoxInside = useColorModeValue('white', 'white');
|
|
||||||
const iconBlue = useColorModeValue('blue.500', 'blue.500');
|
|
||||||
const bgSalaryCard = useColorModeValue('gray.50', 'navy.900');
|
|
||||||
const bgButton = useColorModeValue('gray.700', 'blue.500');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex direction='column' pt={{ sm: '125px', lg: '75px' }}>
|
|
||||||
<Grid
|
|
||||||
templateColumns={{
|
|
||||||
sm: '1fr',
|
|
||||||
lg: '0.5fr 1.5fr 1fr',
|
|
||||||
xl: '1fr 1.7fr 1.5fr',
|
|
||||||
}}
|
|
||||||
gap='24px'
|
|
||||||
mb='24px'
|
|
||||||
>
|
|
||||||
<Card
|
|
||||||
bgImage={colorMode === 'light' ? basicDark : basicBlue}
|
|
||||||
bgSize='cover'
|
|
||||||
bgPosition='50%'
|
|
||||||
>
|
|
||||||
<Flex
|
|
||||||
p={{ sm: '24px 52px', lg: '12px 26px', xl: '24px 52px' }}
|
|
||||||
direction='column'
|
|
||||||
align='center'
|
|
||||||
justify='center'
|
|
||||||
w='100%'
|
|
||||||
h='100%'
|
|
||||||
>
|
|
||||||
<Text color='#fff' fontSize='2xl' fontWeight='normal'>
|
|
||||||
Earnings
|
|
||||||
</Text>
|
|
||||||
<Text color='#fff' fontSize='5xl' fontWeight='bold' mb='12px'>
|
|
||||||
$15,800
|
|
||||||
</Text>
|
|
||||||
<Badge
|
|
||||||
bg='rgba(255, 255, 255, 0.3)'
|
|
||||||
mb='26px'
|
|
||||||
color='#fff'
|
|
||||||
w='150px'
|
|
||||||
borderRadius='8px'
|
|
||||||
display='flex'
|
|
||||||
justify='center'
|
|
||||||
align='center'
|
|
||||||
>
|
|
||||||
<Text
|
|
||||||
textAlign='center'
|
|
||||||
py='6px'
|
|
||||||
fontSize='11px'
|
|
||||||
w='100%'
|
|
||||||
h='100%'
|
|
||||||
alignSelf='center'
|
|
||||||
>
|
|
||||||
+15% SINCE LAST WEEK
|
|
||||||
</Text>
|
|
||||||
</Badge>
|
|
||||||
<Button
|
|
||||||
variant={colorMode === 'light' ? 'primary' : 'light'}
|
|
||||||
py='16px'
|
|
||||||
w='155px'
|
|
||||||
h='25px'
|
|
||||||
>
|
|
||||||
VIEW MORE
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Grid
|
|
||||||
templateColumns={{
|
|
||||||
sm: '1fr',
|
|
||||||
md: 'repeat(2, 1fr)',
|
|
||||||
}}
|
|
||||||
templateRows='repeat(2, 1fr)'
|
|
||||||
gap='24px'
|
|
||||||
>
|
|
||||||
<Card px={{ lg: '8px', xl: '22px' }}>
|
|
||||||
<Flex
|
|
||||||
flexDirection='row'
|
|
||||||
align='center'
|
|
||||||
justify='center'
|
|
||||||
w='100%'
|
|
||||||
h='100%'
|
|
||||||
>
|
|
||||||
<Stat me='auto'>
|
|
||||||
<StatLabel
|
|
||||||
fontSize='sm'
|
|
||||||
color='gray.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
pb='.1rem'
|
|
||||||
>
|
|
||||||
Today's Money
|
|
||||||
</StatLabel>
|
|
||||||
<Flex>
|
|
||||||
<StatNumber fontSize='lg' color={textColor}>
|
|
||||||
$53,000
|
|
||||||
</StatNumber>
|
|
||||||
<StatHelpText
|
|
||||||
alignSelf='flex-end'
|
|
||||||
justifySelf='flex-end'
|
|
||||||
m='0px'
|
|
||||||
color='green.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
ps='3px'
|
|
||||||
fontSize='md'
|
|
||||||
>
|
|
||||||
+55%
|
|
||||||
</StatHelpText>
|
|
||||||
</Flex>
|
|
||||||
</Stat>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg={bgButton}>
|
|
||||||
<WalletIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
||||||
</IconBox>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Card px={{ lg: '8px', xl: '22px' }}>
|
|
||||||
<Flex
|
|
||||||
flexDirection='row'
|
|
||||||
align='center'
|
|
||||||
justify='center'
|
|
||||||
w='100%'
|
|
||||||
h='100%'
|
|
||||||
>
|
|
||||||
<Stat me='auto'>
|
|
||||||
<StatLabel
|
|
||||||
fontSize='sm'
|
|
||||||
color='gray.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
pb='.1rem'
|
|
||||||
>
|
|
||||||
New Clients
|
|
||||||
</StatLabel>
|
|
||||||
<Flex>
|
|
||||||
<StatNumber fontSize='lg' color={textColor}>
|
|
||||||
+$3,052
|
|
||||||
</StatNumber>
|
|
||||||
<StatHelpText
|
|
||||||
alignSelf='flex-end'
|
|
||||||
justifySelf='flex-end'
|
|
||||||
m='0px'
|
|
||||||
color='red.500'
|
|
||||||
fontWeight='bold'
|
|
||||||
ps='3px'
|
|
||||||
fontSize='md'
|
|
||||||
>
|
|
||||||
-14%
|
|
||||||
</StatHelpText>
|
|
||||||
</Flex>
|
|
||||||
</Stat>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg={bgButton}>
|
|
||||||
<DocumentIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
||||||
</IconBox>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Card px={{ lg: '8px', xl: '22px' }}>
|
|
||||||
<Flex
|
|
||||||
flexDirection='row'
|
|
||||||
align='center'
|
|
||||||
justify='center'
|
|
||||||
w='100%'
|
|
||||||
h='100%'
|
|
||||||
>
|
|
||||||
<Stat me='auto'>
|
|
||||||
<StatLabel
|
|
||||||
fontSize='sm'
|
|
||||||
color='gray.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
pb='.1rem'
|
|
||||||
>
|
|
||||||
Today's Users
|
|
||||||
</StatLabel>
|
|
||||||
<Flex>
|
|
||||||
<StatNumber fontSize='lg' color={textColor}>
|
|
||||||
$2,300
|
|
||||||
</StatNumber>
|
|
||||||
<StatHelpText
|
|
||||||
alignSelf='flex-end'
|
|
||||||
justifySelf='flex-end'
|
|
||||||
m='0px'
|
|
||||||
color='green.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
ps='3px'
|
|
||||||
fontSize='md'
|
|
||||||
>
|
|
||||||
+5%
|
|
||||||
</StatHelpText>
|
|
||||||
</Flex>
|
|
||||||
</Stat>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg={bgButton}>
|
|
||||||
<GlobeIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
||||||
</IconBox>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Card px={{ lg: '8px', xl: '22px' }}>
|
|
||||||
<Flex
|
|
||||||
flexDirection='row'
|
|
||||||
align='center'
|
|
||||||
justify='center'
|
|
||||||
w='100%'
|
|
||||||
h='100%'
|
|
||||||
>
|
|
||||||
<Stat me='auto'>
|
|
||||||
<StatLabel
|
|
||||||
fontSize='sm'
|
|
||||||
color='gray.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
pb='.1rem'
|
|
||||||
>
|
|
||||||
Total Sales
|
|
||||||
</StatLabel>
|
|
||||||
<Flex>
|
|
||||||
<StatNumber fontSize='lg' color={textColor}>
|
|
||||||
$173,000
|
|
||||||
</StatNumber>
|
|
||||||
<StatHelpText
|
|
||||||
alignSelf='flex-end'
|
|
||||||
justifySelf='flex-end'
|
|
||||||
m='0px'
|
|
||||||
color='green.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
ps='3px'
|
|
||||||
fontSize='md'
|
|
||||||
>
|
|
||||||
+8%
|
|
||||||
</StatHelpText>
|
|
||||||
</Flex>
|
|
||||||
</Stat>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg={bgButton}>
|
|
||||||
<CartIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
||||||
</IconBox>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
<Card>
|
|
||||||
<CardHeader mb='28px'>
|
|
||||||
<Flex>
|
|
||||||
<Avatar
|
|
||||||
src={avatar4}
|
|
||||||
w='40px'
|
|
||||||
h='40px'
|
|
||||||
mr='15px'
|
|
||||||
borderRadius='12px'
|
|
||||||
/>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color={textColor} fontSize='md' fontWeight='bold'>
|
|
||||||
Esthera Jackson
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
|
||||||
2h ago
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<Flex direction='column' w='100%'>
|
|
||||||
<Flex direction='column' maxW='400px' mb='32px'>
|
|
||||||
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='4px'>
|
|
||||||
I need a Ruby developer for my new website.
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
|
||||||
The website was initially built in PHP, I need a professional
|
|
||||||
ruby programmer to shift it.
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex
|
|
||||||
justify='space-between'
|
|
||||||
w='100%'
|
|
||||||
bg={bgSalaryCard}
|
|
||||||
borderRadius='12px'
|
|
||||||
p='20px 25px'
|
|
||||||
direction={{ sm: 'row' }}
|
|
||||||
>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
|
||||||
${' '}
|
|
||||||
<Text
|
|
||||||
as='span'
|
|
||||||
fontSize='2xl'
|
|
||||||
color={textColor}
|
|
||||||
fontWeight='bold'
|
|
||||||
>
|
|
||||||
3,000
|
|
||||||
</Text>{' '}
|
|
||||||
/ month
|
|
||||||
</Text>
|
|
||||||
<Button
|
|
||||||
variant='outlined'
|
|
||||||
w={{ sm: '75px', md: '125px', lg: '75px', xl: '125px' }}
|
|
||||||
h='35px'
|
|
||||||
>
|
|
||||||
APPLY
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
<Grid
|
|
||||||
templateColumns={{ sm: '1fr', lg: '1.85fr 1fr', xl: '70% 30%' }}
|
|
||||||
gap='24px'
|
|
||||||
>
|
|
||||||
<Card p={{ sm: '16px', md: '22px' }} maxW={{ sm: '330px', md: '100%' }}>
|
|
||||||
<CardHeader>
|
|
||||||
<Flex justify='space-between' w='100%'>
|
|
||||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
|
||||||
To do List
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.400' fontSize='md' fontWeight='normal'>
|
|
||||||
23 - 30 March 2020
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<Flex
|
|
||||||
direction='column'
|
|
||||||
w='100%'
|
|
||||||
overflowX={{ sm: 'scroll', md: 'hidden' }}
|
|
||||||
>
|
|
||||||
<HSeparator my='14px' />
|
|
||||||
<Flex>
|
|
||||||
<Flex
|
|
||||||
bgColor='blue.500'
|
|
||||||
borderRadius='12px'
|
|
||||||
minWidth='3px'
|
|
||||||
h='100%'
|
|
||||||
/>
|
|
||||||
<Flex direction='column' p='12px 22px' w='100%'>
|
|
||||||
<Flex justify='space-between' mb='18px'>
|
|
||||||
<Flex align='center'>
|
|
||||||
<Checkbox
|
|
||||||
me='16px'
|
|
||||||
colorScheme='blue'
|
|
||||||
size='lg'
|
|
||||||
defaultIsChecked
|
|
||||||
/>
|
|
||||||
<Text color={textColor} fontSize='md' fontWeight='bold'>
|
|
||||||
Check status
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Icon
|
|
||||||
as={IoEllipsisHorizontalSharp}
|
|
||||||
color='gray.400'
|
|
||||||
w='20px'
|
|
||||||
h='20px'
|
|
||||||
cursor='pointer'
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing={{
|
|
||||||
sm: '20px',
|
|
||||||
md: '100px',
|
|
||||||
lg: '80px',
|
|
||||||
xl: '180px',
|
|
||||||
}}
|
|
||||||
ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
|
|
||||||
>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Date
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
22 July 2022
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Project
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
2414_VR4sf3#
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Company
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
Creative Tim
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Stack>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<HSeparator my='14px' />
|
|
||||||
<Flex>
|
|
||||||
<Flex
|
|
||||||
bgColor='orange.300'
|
|
||||||
borderRadius='12px'
|
|
||||||
minWidth='3px'
|
|
||||||
h='100%'
|
|
||||||
/>
|
|
||||||
<Flex direction='column' p='12px 22px' w='100%'>
|
|
||||||
<Flex justify='space-between' mb='18px'>
|
|
||||||
<Flex align='center'>
|
|
||||||
<Checkbox me='16px' colorScheme='blue' size='lg' />
|
|
||||||
<Text color={textColor} fontSize='md' fontWeight='bold'>
|
|
||||||
Management discussion
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Icon
|
|
||||||
as={IoEllipsisHorizontalSharp}
|
|
||||||
color='gray.400'
|
|
||||||
w='20px'
|
|
||||||
h='20px'
|
|
||||||
cursor='pointer'
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing={{
|
|
||||||
sm: '20px',
|
|
||||||
md: '100px',
|
|
||||||
lg: '80px',
|
|
||||||
xl: '180px',
|
|
||||||
}}
|
|
||||||
ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
|
|
||||||
>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Date
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
22 July 2022
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Project
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
4411_8sIsdd23
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Company
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
Apple
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Stack>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<HSeparator my='14px' />
|
|
||||||
<Flex>
|
|
||||||
<Flex
|
|
||||||
bgColor='pink.300'
|
|
||||||
borderRadius='12px'
|
|
||||||
minWidth='3px'
|
|
||||||
h='100%'
|
|
||||||
/>
|
|
||||||
<Flex direction='column' p='12px 22px' w='100%'>
|
|
||||||
<Flex justify='space-between' mb='18px'>
|
|
||||||
<Flex align='center'>
|
|
||||||
<Checkbox me='16px' colorScheme='blue' size='lg' />
|
|
||||||
<Text color={textColor} fontSize='md' fontWeight='bold'>
|
|
||||||
New channel distribution
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Icon
|
|
||||||
as={IoEllipsisHorizontalSharp}
|
|
||||||
color='gray.400'
|
|
||||||
w='20px'
|
|
||||||
h='20px'
|
|
||||||
cursor='pointer'
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing={{
|
|
||||||
sm: '20px',
|
|
||||||
md: '100px',
|
|
||||||
lg: '80px',
|
|
||||||
xl: '180px',
|
|
||||||
}}
|
|
||||||
ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
|
|
||||||
>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Date
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
22 July 2022
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Project
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
827d_kdl33D1s
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Company
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
Microsoft
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Stack>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<HSeparator my='14px' />
|
|
||||||
<Flex>
|
|
||||||
<Flex
|
|
||||||
bgColor='purple.500'
|
|
||||||
borderRadius='12px'
|
|
||||||
minWidth='3px'
|
|
||||||
h='100%'
|
|
||||||
/>{' '}
|
|
||||||
<Flex direction='column' p='12px 22px' w='100%'>
|
|
||||||
<Flex justify='space-between' mb='18px'>
|
|
||||||
<Flex align='center'>
|
|
||||||
<Checkbox
|
|
||||||
me='16px'
|
|
||||||
colorScheme='blue'
|
|
||||||
size='lg'
|
|
||||||
defaultIsChecked
|
|
||||||
/>
|
|
||||||
<Text color={textColor} fontSize='md' fontWeight='bold'>
|
|
||||||
IOS App development
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Icon
|
|
||||||
as={IoEllipsisHorizontalSharp}
|
|
||||||
color='gray.400'
|
|
||||||
w='20px'
|
|
||||||
h='20px'
|
|
||||||
cursor='pointer'
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing={{
|
|
||||||
sm: '20px',
|
|
||||||
md: '100px',
|
|
||||||
lg: '80px',
|
|
||||||
xl: '180px',
|
|
||||||
}}
|
|
||||||
ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
|
|
||||||
>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Date
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
22 July 2022
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Project
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
88s1_349DA2sa
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Company
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
|
||||||
Facebook
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Stack>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Card
|
|
||||||
mb='24px'
|
|
||||||
maxW={{ sm: '330px', md: '100%' }}
|
|
||||||
px={{ sm: '0px', lg: '22px' }}
|
|
||||||
>
|
|
||||||
<CardHeader>
|
|
||||||
<Flex direction='column' w='100%'>
|
|
||||||
<Flex
|
|
||||||
justify='space-between'
|
|
||||||
w='100%'
|
|
||||||
px={{ sm: '22px', lg: '0px' }}
|
|
||||||
>
|
|
||||||
<Flex align='center'>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg={iconBlue} me='16px'>
|
|
||||||
<HomeIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
||||||
</IconBox>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Tasks
|
|
||||||
</Text>
|
|
||||||
<Text color={textColor} fontWeight='bold' fontSize='xl'>
|
|
||||||
480
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column' alignSelf='flex-end' minW='125px'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
60%
|
|
||||||
</Text>
|
|
||||||
<Progress
|
|
||||||
colorScheme='blue'
|
|
||||||
size='sm'
|
|
||||||
borderRadius='15px'
|
|
||||||
value={60}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<LineChart
|
|
||||||
chartData={lineChartDataGeneral}
|
|
||||||
chartOptions={lineChartOptionsGeneral}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
</CardHeader>
|
|
||||||
</Card>
|
|
||||||
<Card maxW={{ sm: '330px', md: '100%' }}>
|
|
||||||
<Flex justify='space-between' w='100%' minH='190px'>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Flex align='center'>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg={iconBlue} me='16px'>
|
|
||||||
<DocumentIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
||||||
</IconBox>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
|
||||||
Projects
|
|
||||||
</Text>
|
|
||||||
<Text color={textColor} fontWeight='bold' fontSize='xl'>
|
|
||||||
115
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column' mt='36px'>
|
|
||||||
<Flex align='center'>
|
|
||||||
<Icon
|
|
||||||
as={BsCircleFill}
|
|
||||||
color='blue.500'
|
|
||||||
w='10px'
|
|
||||||
h='10px'
|
|
||||||
me='8px'
|
|
||||||
/>
|
|
||||||
<Text color={textColor} fontWeight='normal' fontSize='md'>
|
|
||||||
Done
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex align='center'>
|
|
||||||
<Icon
|
|
||||||
as={BsCircleFill}
|
|
||||||
color='gray.400'
|
|
||||||
w='10px'
|
|
||||||
h='10px'
|
|
||||||
me='8px'
|
|
||||||
/>
|
|
||||||
<Text color={textColor} fontWeight='normal' fontSize='md'>
|
|
||||||
In progress
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<DonutChart
|
|
||||||
chartData={donutChartDataGeneral}
|
|
||||||
chartOptions={donutChartOptionsGeneral}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
</Flex>
|
|
||||||
</Grid>
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default General;
|
|
||||||
@@ -1,400 +0,0 @@
|
|||||||
// Chakra imports
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Flex,
|
|
||||||
Grid,
|
|
||||||
Progress,
|
|
||||||
SimpleGrid,
|
|
||||||
Stat,
|
|
||||||
StatLabel,
|
|
||||||
StatNumber,
|
|
||||||
Table,
|
|
||||||
Tbody,
|
|
||||||
Td,
|
|
||||||
Text,
|
|
||||||
Th,
|
|
||||||
Thead,
|
|
||||||
Tr,
|
|
||||||
useColorMode,
|
|
||||||
useColorModeValue,
|
|
||||||
} from '@chakra-ui/react';
|
|
||||||
// Custom components
|
|
||||||
import Card from 'components/Card/Card.js';
|
|
||||||
import BarChart from 'components/Charts/BarChart';
|
|
||||||
import LineChart from 'components/Charts/LineChart';
|
|
||||||
import IconBox from 'components/Icons/IconBox';
|
|
||||||
// Custom icons
|
|
||||||
import {
|
|
||||||
CartIcon,
|
|
||||||
DocumentIcon,
|
|
||||||
GlobeIcon,
|
|
||||||
WalletIcon,
|
|
||||||
} from 'components/Icons/Icons.js';
|
|
||||||
import React from 'react';
|
|
||||||
// Variables
|
|
||||||
import {
|
|
||||||
barChartDataRTL,
|
|
||||||
barChartOptionsRTL,
|
|
||||||
lineChartDataRTL,
|
|
||||||
lineChartOptionsRTL,
|
|
||||||
} from 'variables/charts';
|
|
||||||
import { pageVisits, socialTraffic } from 'variables/general';
|
|
||||||
|
|
||||||
export default function Dashboard() {
|
|
||||||
// Chakra Color Mode
|
|
||||||
const iconBlue = useColorModeValue('blue.500', 'blue.500');
|
|
||||||
const iconBoxInside = useColorModeValue('white', 'white');
|
|
||||||
const textColor = useColorModeValue('gray.700', 'white');
|
|
||||||
const tableRowColor = useColorModeValue('#F7FAFC', 'navy.900');
|
|
||||||
const borderColor = useColorModeValue('gray.200', 'gray.600');
|
|
||||||
const textTableColor = useColorModeValue('gray.500', 'white');
|
|
||||||
|
|
||||||
const { colorMode } = useColorMode();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex flexDirection='column' pt={{ base: '120px', md: '75px' }}>
|
|
||||||
<SimpleGrid columns={{ sm: 1, md: 2, xl: 4 }} spacing='24px' mb='20px'>
|
|
||||||
<Card minH='125px'>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Flex
|
|
||||||
flexDirection='row'
|
|
||||||
align='center'
|
|
||||||
justify='center'
|
|
||||||
w='100%'
|
|
||||||
mb='25px'
|
|
||||||
>
|
|
||||||
<Stat me='auto'>
|
|
||||||
<StatLabel
|
|
||||||
fontSize='xs'
|
|
||||||
color='gray.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
textTransform='uppercase'
|
|
||||||
>
|
|
||||||
Today's Money
|
|
||||||
</StatLabel>
|
|
||||||
<Flex>
|
|
||||||
<StatNumber fontSize='lg' color={textColor} fontWeight='bold'>
|
|
||||||
$53,897
|
|
||||||
</StatNumber>
|
|
||||||
</Flex>
|
|
||||||
</Stat>
|
|
||||||
<IconBox borderRadius='50%' h={'45px'} w={'45px'} bg={iconBlue}>
|
|
||||||
<WalletIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
||||||
</IconBox>
|
|
||||||
</Flex>
|
|
||||||
<Text color='gray.400' fontSize='sm'>
|
|
||||||
<Text as='span' color='green.400' fontWeight='bold'>
|
|
||||||
+3.48%{' '}
|
|
||||||
</Text>
|
|
||||||
Since last month
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Card minH='125px'>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Flex
|
|
||||||
flexDirection='row'
|
|
||||||
align='center'
|
|
||||||
justify='center'
|
|
||||||
w='100%'
|
|
||||||
mb='25px'
|
|
||||||
>
|
|
||||||
<Stat me='auto'>
|
|
||||||
<StatLabel
|
|
||||||
fontSize='xs'
|
|
||||||
color='gray.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
textTransform='uppercase'
|
|
||||||
>
|
|
||||||
Today's Users
|
|
||||||
</StatLabel>
|
|
||||||
<Flex>
|
|
||||||
<StatNumber fontSize='lg' color={textColor} fontWeight='bold'>
|
|
||||||
$3,200
|
|
||||||
</StatNumber>
|
|
||||||
</Flex>
|
|
||||||
</Stat>
|
|
||||||
<IconBox borderRadius='50%' h={'45px'} w={'45px'} bg={iconBlue}>
|
|
||||||
<GlobeIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
||||||
</IconBox>
|
|
||||||
</Flex>
|
|
||||||
<Text color='gray.400' fontSize='sm'>
|
|
||||||
<Text as='span' color='green.400' fontWeight='bold'>
|
|
||||||
+5.2%{' '}
|
|
||||||
</Text>
|
|
||||||
Since last month
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Card minH='125px'>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Flex
|
|
||||||
flexDirection='row'
|
|
||||||
align='center'
|
|
||||||
justify='center'
|
|
||||||
w='100%'
|
|
||||||
mb='25px'
|
|
||||||
>
|
|
||||||
<Stat me='auto'>
|
|
||||||
<StatLabel
|
|
||||||
fontSize='xs'
|
|
||||||
color='gray.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
textTransform='uppercase'
|
|
||||||
>
|
|
||||||
New Clients
|
|
||||||
</StatLabel>
|
|
||||||
<Flex>
|
|
||||||
<StatNumber fontSize='lg' color={textColor} fontWeight='bold'>
|
|
||||||
+2,503
|
|
||||||
</StatNumber>
|
|
||||||
</Flex>
|
|
||||||
</Stat>
|
|
||||||
<IconBox borderRadius='50%' h={'45px'} w={'45px'} bg={iconBlue}>
|
|
||||||
<DocumentIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
||||||
</IconBox>
|
|
||||||
</Flex>
|
|
||||||
<Text color='gray.400' fontSize='sm'>
|
|
||||||
<Text as='span' color='red.500' fontWeight='bold'>
|
|
||||||
-2.82%{' '}
|
|
||||||
</Text>
|
|
||||||
Since last month
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Card minH='125px'>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Flex
|
|
||||||
flexDirection='row'
|
|
||||||
align='center'
|
|
||||||
justify='center'
|
|
||||||
w='100%'
|
|
||||||
mb='25px'
|
|
||||||
>
|
|
||||||
<Stat me='auto'>
|
|
||||||
<StatLabel
|
|
||||||
fontSize='xs'
|
|
||||||
color='gray.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
textTransform='uppercase'
|
|
||||||
>
|
|
||||||
Total Sales
|
|
||||||
</StatLabel>
|
|
||||||
<Flex>
|
|
||||||
<StatNumber fontSize='lg' color={textColor} fontWeight='bold'>
|
|
||||||
$173,000
|
|
||||||
</StatNumber>
|
|
||||||
</Flex>
|
|
||||||
</Stat>
|
|
||||||
<IconBox borderRadius='50%' h={'45px'} w={'45px'} bg={iconBlue}>
|
|
||||||
<CartIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
||||||
</IconBox>
|
|
||||||
</Flex>
|
|
||||||
<Text color='gray.400' fontSize='sm'>
|
|
||||||
<Text as='span' color='green.400' fontWeight='bold'>
|
|
||||||
+8.12%{' '}
|
|
||||||
</Text>
|
|
||||||
Since last month
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
</SimpleGrid>
|
|
||||||
<Grid
|
|
||||||
templateColumns={{ sm: '1fr', lg: '2fr 1fr' }}
|
|
||||||
templateRows={{ lg: 'repeat(2, auto)' }}
|
|
||||||
gap='20px'
|
|
||||||
>
|
|
||||||
<Card
|
|
||||||
bg={
|
|
||||||
colorMode === 'dark'
|
|
||||||
? 'navy.800'
|
|
||||||
: 'linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)'
|
|
||||||
}
|
|
||||||
p='0px'
|
|
||||||
maxW={{ sm: '320px', md: '100%' }}
|
|
||||||
>
|
|
||||||
<Flex direction='column' mb='40px' p='28px 22px 0px 0px'>
|
|
||||||
<Text color='#fff' fontSize='lg' fontWeight='bold' mb='6px'>
|
|
||||||
Sales Overview
|
|
||||||
</Text>
|
|
||||||
<Text color='#fff' fontSize='sm'>
|
|
||||||
<Text as='span' color='green.400' fontWeight='bold'>
|
|
||||||
(+5) more{' '}
|
|
||||||
</Text>
|
|
||||||
in 2022
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Box minH='300px'>
|
|
||||||
<LineChart
|
|
||||||
chartData={lineChartDataRTL}
|
|
||||||
chartOptions={lineChartOptionsRTL}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Card>
|
|
||||||
<Card p='0px' maxW={{ sm: '320px', md: '100%' }}>
|
|
||||||
<Flex direction='column' mb='40px' p='28px 22px 0px 0px'>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='bold' mb='6px'>
|
|
||||||
PERFORMANCE
|
|
||||||
</Text>
|
|
||||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
|
||||||
Total orders
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Box minH='300px'>
|
|
||||||
<BarChart
|
|
||||||
chartData={barChartDataRTL}
|
|
||||||
chartOptions={barChartOptionsRTL}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Card>
|
|
||||||
<Card p='0px' maxW={{ sm: '320px', md: '100%' }}>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Flex align='center' justify='space-between' p='22px'>
|
|
||||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
||||||
Page visits
|
|
||||||
</Text>
|
|
||||||
<Button variant='primary' maxH='30px'>
|
|
||||||
SEE ALL
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
<Box overflow={{ sm: 'scroll', lg: 'hidden' }}>
|
|
||||||
<Table>
|
|
||||||
<Thead>
|
|
||||||
<Tr bg={tableRowColor}>
|
|
||||||
<Th color='gray.400' borderColor={borderColor}>
|
|
||||||
Page name
|
|
||||||
</Th>
|
|
||||||
<Th color='gray.400' borderColor={borderColor}>
|
|
||||||
Visitors
|
|
||||||
</Th>
|
|
||||||
<Th color='gray.400' borderColor={borderColor}>
|
|
||||||
Unique users
|
|
||||||
</Th>
|
|
||||||
<Th color='gray.400' borderColor={borderColor}>
|
|
||||||
Bounce rate
|
|
||||||
</Th>
|
|
||||||
</Tr>
|
|
||||||
</Thead>
|
|
||||||
<Tbody>
|
|
||||||
{pageVisits.map((el, index, arr) => {
|
|
||||||
return (
|
|
||||||
<Tr key={index}>
|
|
||||||
<Td
|
|
||||||
color={textTableColor}
|
|
||||||
fontSize='sm'
|
|
||||||
fontWeight='bold'
|
|
||||||
borderColor={borderColor}
|
|
||||||
border={index === arr.length - 1 ? 'none' : null}
|
|
||||||
>
|
|
||||||
{el.pageName}
|
|
||||||
</Td>
|
|
||||||
<Td
|
|
||||||
color={textTableColor}
|
|
||||||
fontSize='sm'
|
|
||||||
border={index === arr.length - 1 ? 'none' : null}
|
|
||||||
borderColor={borderColor}
|
|
||||||
>
|
|
||||||
{el.visitors}
|
|
||||||
</Td>
|
|
||||||
<Td
|
|
||||||
color={textTableColor}
|
|
||||||
fontSize='sm'
|
|
||||||
border={index === arr.length - 1 ? 'none' : null}
|
|
||||||
borderColor={borderColor}
|
|
||||||
>
|
|
||||||
{el.uniqueUsers}
|
|
||||||
</Td>
|
|
||||||
<Td
|
|
||||||
color={textTableColor}
|
|
||||||
fontSize='sm'
|
|
||||||
border={index === arr.length - 1 ? 'none' : null}
|
|
||||||
borderColor={borderColor}
|
|
||||||
>
|
|
||||||
{el.bounceRate}
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Tbody>
|
|
||||||
</Table>
|
|
||||||
</Box>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Card p='0px' maxW={{ sm: '320px', md: '100%' }}>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Flex align='center' justify='space-between' p='22px'>
|
|
||||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
||||||
Social traffic
|
|
||||||
</Text>
|
|
||||||
<Button variant='primary' maxH='30px'>
|
|
||||||
SEE ALL
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<Box overflow={{ sm: 'scroll', lg: 'hidden' }}>
|
|
||||||
<Table>
|
|
||||||
<Thead>
|
|
||||||
<Tr bg={tableRowColor}>
|
|
||||||
<Th color='gray.400' borderColor={borderColor}>
|
|
||||||
Referral
|
|
||||||
</Th>
|
|
||||||
<Th color='gray.400' borderColor={borderColor}>
|
|
||||||
Visitors
|
|
||||||
</Th>
|
|
||||||
<Th color='gray.400' borderColor={borderColor}></Th>
|
|
||||||
</Tr>
|
|
||||||
</Thead>
|
|
||||||
<Tbody>
|
|
||||||
{socialTraffic.map((el, index, arr) => {
|
|
||||||
return (
|
|
||||||
<Tr key={index}>
|
|
||||||
<Td
|
|
||||||
color={textTableColor}
|
|
||||||
fontSize='sm'
|
|
||||||
fontWeight='bold'
|
|
||||||
borderColor={borderColor}
|
|
||||||
border={index === arr.length - 1 ? 'none' : null}
|
|
||||||
>
|
|
||||||
{el.referral}
|
|
||||||
</Td>
|
|
||||||
<Td
|
|
||||||
color={textTableColor}
|
|
||||||
fontSize='sm'
|
|
||||||
borderColor={borderColor}
|
|
||||||
border={index === arr.length - 1 ? 'none' : null}
|
|
||||||
>
|
|
||||||
{el.visitors}
|
|
||||||
</Td>
|
|
||||||
<Td
|
|
||||||
color={textTableColor}
|
|
||||||
fontSize='sm'
|
|
||||||
borderColor={borderColor}
|
|
||||||
border={index === arr.length - 1 ? 'none' : null}
|
|
||||||
>
|
|
||||||
<Flex align='center'>
|
|
||||||
<Text
|
|
||||||
color={textTableColor}
|
|
||||||
fontWeight='bold'
|
|
||||||
fontSize='sm'
|
|
||||||
me='12px'
|
|
||||||
>{`${el.percentage}%`}</Text>
|
|
||||||
<Progress
|
|
||||||
size='xs'
|
|
||||||
colorScheme={el.color}
|
|
||||||
value={el.percentage}
|
|
||||||
minW='120px'
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Tbody>
|
|
||||||
</Table>
|
|
||||||
</Box>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user