xit-front
/
xit-opst-fo
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: js type 전환

Browse Source
main
Lim Jonguk 3 years ago
parent 969ad21b45
commit 06e0dc61cf
40 changed files with 1771 additions and 48702 deletions
Show Stats Download Patch File Download Diff File

2
.env
Unescape Escape View File

@ -1 +1,3 @@
REACT_APP_VERSION = v3.1.0
REACT_APP_API_URL=http://localhost:8090
REACT_APP_SERVER_TIMEOUT=60000

46759
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
public/index.html
Unescape Escape View File

@ -69,7 +69,8 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<!--
//TODO: production build ???
<script type="text/javascript">
(function (c, l, a, r, i, t, y) {
c[a] =
@ -84,6 +85,7 @@
y.parentNode.insertBefore(t, y);
})(window, document, 'clarity', 'script', '6sbb1vpcjo');
</script>
-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X1LG1CJ1GG"></script>

8
src/apis/ApiService.js
Unescape Escape View File

@ -2,14 +2,14 @@ import axios, { AxiosInstance, AxiosInterceptorManager, AxiosRequestConfig, Axio
import Swal from 'sweetalert2';
type CustomResponseFormat<T = any> = {
response: T; // e<T>;
refreshedToken?: string;
response: T, // e<T>;
refreshedToken?: string
};
export interface CustomInstance extends AxiosInstance {
interceptors: {
request: AxiosInterceptorManager<AxiosRequestConfig>;
response: AxiosInterceptorManager<AxiosResponse<CustomResponseFormat>>;
request: AxiosInterceptorManager<AxiosRequestConfig>,
response: AxiosInterceptorManager<AxiosResponse<CustomResponseFormat>>
};
getUri(config?: AxiosRequestConfig): string;

3
src/apis/BoardService.js
Unescape Escape View File

@ -1,8 +1,5 @@
import { BOARD_LIST_URL } from 'commons/ApiUrl';
import axios from 'utils/axios';
import { IBoard, IParam } from 'types/Data';
import { IApiPageResponse } from 'types/api';
import { AxiosResponse } from 'axios';
class BoardService {
getBoardList = (params) =>

2
src/commons/XitCmm.js
Unescape Escape View File

@ -112,7 +112,7 @@ const XitCmm = {
initalValue: T,
validator?: (value: string) => boolean
): [T, Dispatch<SetStateAction<T>>, (e?: React.ChangeEvent<HTMLInputElement>) => void] {
const [value, setValue] = useState<typeof initalValue>(initalValue);
const [value, setValue] = useState < typeof initalValue > initalValue;
const changer = useCallback(
(e) => {
const v = e.target.value;

3
src/commons/constants.js
Unescape Escape View File

@ -0,0 +1,3 @@
export const ACCESS_TOKEN_NAME = 'accessToken';
export const REFRESH_TOKEN_NAME = 'accessToken';
export const AUTH_HEADER_NAME = 'Authorization';

1
src/config.js
Unescape Escape View File

@ -3,7 +3,6 @@ export const JWT_API = {
timeout: '1 days'
};
// basename: only at build time to set, and Don't add '/' at end off BASENAME for breadcrumbs, also Don't put only '/' use blank('') instead,
// like '/berry-material-react/react/default'
export const BASE_PATH = '';

9
src/contexts/JWTContext.js
Unescape Escape View File

@ -12,6 +12,8 @@ import accountReducer from 'store/accountReducer';
// project imports
import Loader from 'ui-component/Loader';
import axios from 'utils/axios';
import { ACCESS_TOKEN_NAME, REFRESH_TOKEN_NAME } from 'commons/constants';
import { LOGIN_URL } from 'commons/ApiUrl';
const chance = new Chance();
@ -43,7 +45,6 @@ const setLocalStorage = (tokenName, token) => {
}
};
// ==============================|| JWT CONTEXT & PROVIDER ||============================== //
const JWTContext = createContext(null);
@ -87,8 +88,8 @@ export const JWTProvider = ({ children }) => {
init();
}, []);
const login = async (email, passwd) => {
const response = await axios.post(LOGIN_URL, { providerType: ProviderType.LOCAL, userid, passwd });
const login = async (userid, passwd) => {
const response = await axios.post(LOGIN_URL, { providerType: 'LOCAL', userid, passwd });
// console.log(response);
if (response && response.data) {
const { accessToken, refreshToken, user } = response.data;
@ -138,7 +139,7 @@ export const JWTProvider = ({ children }) => {
};
const logout = () => {
setSession(null);
setLocalStorage(ACCESS_TOKEN_NAME, null);
dispatch({ type: LOGOUT });
};

2
src/hooks/useAuth.js
Unescape Escape View File

@ -1,7 +1,7 @@
import { useContext } from 'react';
// auth provider
// import AuthContext from 'contexts/JWTContext';
import AuthContext from 'contexts/JWTContext';
// ==============================|| AUTH HOOKS ||============================== //

6
src/routes/LoginRoutes.js
Unescape Escape View File

@ -7,9 +7,9 @@ import NavMotion from 'layout/NavMotion';
import Loadable from 'ui-component/Loadable';
// login routing
const AuthLogin = Loadable(lazy(() => import('views/pages/authentication/authentication3/Login3')));
const AuthRegister = Loadable(lazy(() => import('views/pages/authentication/authentication3/Register3')));
const AuthForgotPassword = Loadable(lazy(() => import('views/pages/authentication/authentication3/ForgotPassword3')));
const AuthLogin = Loadable(lazy(() => import('views/pages/authentication/authentication/Login')));
const AuthRegister = Loadable(lazy(() => import('views/pages/authentication/authentication/Register')));
const AuthForgotPassword = Loadable(lazy(() => import('views/pages/authentication/authentication/ForgotPassword')));
// ==============================|| AUTH ROUTING ||============================== //

22
src/routes/MainRoutes.js
Unescape Escape View File

@ -7,6 +7,12 @@ import AuthGuard from 'utils/route-guard/AuthGuard';
// sample page routing
const SamplePage = Loadable(lazy(() => import('views/sample-page')));
const DashboardDefault = Loadable(lazy(() => import('views/dashboard/Default')));
const DashboardAnalytics = Loadable(lazy(() => import('views/dashboard/Analytics')));
// opst page routing
const PublicBoard = Loadable(lazy(() => import('views/biz/board/public')));
const Board = Loadable(lazy(() => import('views/biz/board')));
// ==============================|| MAIN ROUTING ||============================== //
@ -19,8 +25,20 @@ const MainRoutes = {
),
children: [
{
path: '/',
element: <SamplePage />
path: '/dashboard/default',
element: <DashboardDefault />
},
{
path: '/dashboard/analytics',
element: <DashboardAnalytics />
},
{
path: '/publicBoard',
element: <PublicBoard />
},
{
path: '/board',
element: <Board />
},
{
path: '/sample-page',

4
src/ui-component/MuiGridList.jsx
Unescape Escape View File

@ -40,8 +40,8 @@ const MuiGridList = (props) => {
columns={columns}
// pageSize={pageSize}
{...rowsState}
onPageChange={(page) => setRowsState((prev: any) => ({ ...prev, page }))}
onPageSizeChange={(pageSize) => setRowsState((prev: any) => ({ ...prev, page: 0, pageSize }))}
onPageChange={(page) => setRowsState((prev) => ({ ...prev, page }))}
onPageSizeChange={(pageSize) => setRowsState((prev) => ({ ...prev, page: 0, pageSize }))}
rowsPerPageOptions={[5, 10, 50, 100]}
pagination
/>

177
src/utils/axios.js
Unescape Escape View File

@ -5,36 +5,75 @@
import axios from 'axios';
import Swal from 'sweetalert2';
const axiosService = axios.create({
baseURL: process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL : '',
withCredentials: process.env.NODE_ENV === 'development', // 개발시만 사용 : crossdomain
timeout: Number(process.env.REACT_APP_SERVER_TIMEOUT)
// headers: {
// 'Content-Type': 'application/json'
// // AUTH_HEADER_NAME: accessToken
// }
// params: {key: key}
baseURL: process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL : '',
withCredentials: process.env.NODE_ENV === 'development', // 개발시만 사용 : crossdomain
timeout: Number(process.env.REACT_APP_SERVER_TIMEOUT)
// headers: {
// 'Content-Type': 'application/json'
// // AUTH_HEADER_NAME: accessToken
// }
// params: {key: key}
});
/**
* 에러 처리
* TODO :: 토큰 에러인 경우 업무 정의에 따라 alert 처리 여부등 결정하여 내용 추가
* @param config
* @param request
* @param response
* @param error
*/
// const alertError = (config: AxiosRequestConfig, request: any, response: AxiosResponse, error: Error) => {
const alertError = (config, request, response, error) => {
if (error.isAxiosError) {
let errMsg = `시스템 에러~~~~~~~~~~~~`;
if (error.code === 'ECONNABORTED') errMsg = 'Server time out';
Swal.fire({
icon: 'error',
title: 'Api Error',
html: errMsg,
// imageUrl:
timer: 5000
}).then((r) => r);
return;
}
if (response) {
const errCode = response.data.code;
const errMsg = response.data.error;
console.error(`${errCode}: ${errMsg}`);
console.error('=================================');
// Alert.error(`${errCode}: ${errMsg}`);
Swal.fire({
icon: 'error',
title: 'Api Error',
html: `${errCode}: ${errMsg}`,
// imageUrl:
timer: 5000
}).then((r) => r);
}
};
/**
* before axios request
*/
axiosService.interceptors.request.use(
(config) => {
Swal.fire({
title: 'Please Wait ...',
// html: '',
// imageUrl:
// timer: 10000,
didOpen: () => Swal.showLoading()
}).then((r) => {});
return config;
},
({ config, request, response, ...error }) => {
console.error('========== ApiService.request error Data ==========');
return alertError(config, request, response, error);
}
(config) => {
Swal.fire({
title: 'Please Wait ...',
// html: '',
// imageUrl:
// timer: 10000,
didOpen: () => Swal.showLoading()
}).then((r) => r);
return config;
},
({ config, request, response, ...error }) => {
console.error('========== ApiService.request error Data ==========');
return alertError(config, request, response, error);
}
);
/*
@ -49,75 +88,27 @@ axiosServices.interceptors.response.use(
* after axios response
*/
axiosService.interceptors.response.use(
(response) => {
Swal.close();
if (!response.data.success) {
Swal.fire({
icon: 'error',
title: 'Api Error',
html: `${response.data.message}`,
// imageUrl:
timer: 5000
}).then((r) => {});
console.log(response);
}
return Promise.resolve(response.data);
},
({ config, request, response, ...error }) => {
console.error('========== ApiService.response Error Data ==========');
alertError(config, request, response, error);
// error 데이타 return
// return response.data;
return error;
}
(response) => {
Swal.close();
if (!response.data.success) {
Swal.fire({
icon: 'error',
title: 'Api Error',
html: `${response.data.message}`,
// imageUrl:
timer: 5000
}).then((r) => r);
console.log(response);
}
return Promise.resolve(response.data);
},
({ config, request, response, ...error }) => {
console.error('========== ApiService.response Error Data ==========');
alertError(config, request, response, error);
// error 데이타 return
// return response.data;
return error;
}
);
/**
* 에러 처리
* TODO :: 토큰 에러인 경우 업무 정의에 따라 alert 처리 여부등 결정하여 내용 추가
* @param config
* @param request
* @param response
* @param error
*/
// const alertError = (config: AxiosRequestConfig, request: any, response: AxiosResponse, error: Error) => {
const alertError = (config, request, response, error) => {
if (error.isAxiosError) {
let errMsg = `시스템 에러~~~~~~~~~~~~`;
if (error.code === 'ECONNABORTED') errMsg = 'Server time out';
Swal.fire({
icon: 'error',
title: 'Api Error',
html: errMsg,
// imageUrl:
timer: 5000
}).then((r) => {});
return;
}
if (response) {
const errCode = response.data.code;
const errMsg = response.data.error;
console.error(`${errCode}: ${errMsg}`);
console.error('=================================');
// Alert.error(`${errCode}: ${errMsg}`);
Swal.fire({
icon: 'error',
title: 'Api Error',
html: `${errCode}: ${errMsg}`,
// imageUrl:
timer: 5000
}).then((r) => {});
}
// return Promise.reject({
// config,
// //message: errMsg,
// response,
// ...error
// })
};
export default axiosServices;
export default axiosService;

31
src/views/biz/board/index.jsx
Unescape Escape View File

@ -1,39 +1,17 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
// material-ui
import {
Button,
Divider,
FormControl,
FormControlLabel,
FormHelperText,
FormLabel,
Grid,
InputAdornment,
OutlinedInput,
Radio,
RadioGroup,
TextField,
Typography
} from '@mui/material';
import { Button, Divider, FormControl, FormControlLabel, Grid, OutlinedInput, Radio, RadioGroup } from '@mui/material';
// assets
import { IconSearch } from '@tabler/icons';
import LinkTwoToneIcon from '@mui/icons-material/LinkTwoTone';
import LockTwoToneIcon from '@mui/icons-material/LockTwoTone';
// berry ui
import MainCard from 'ui-component/cards/MainCard';
import { gridSpacing } from 'store/constant';
import { useDispatch, useSelector } from 'store';
import { getDetailCards, filterDetailCards } from 'store/slices/user';
// project imports
import MuiGridList from 'ui-component/MuiGridList';
import { Dispatch } from 'redux';
import { GridColumns } from '@mui/x-data-grid';
import InputLabel from 'ui-component/extended/Form/InputLabel';
import SearchSection from 'layout/MainLayout/Header/SearchSection';
import boardService from 'apis/BoardService';
const Index = () => {
@ -59,7 +37,7 @@ const Index = () => {
// loading: false
});
const columns: GridColumns = [
const columns = [
{ headerName: '게시판코드', field: 'ciCode' },
{ headerName: '글번호', field: 'ciContentno' },
{ headerName: '제목', field: 'ciTitle', editable: true },
@ -91,7 +69,7 @@ const Index = () => {
field: `ciIp`
}
];
const handleSearch = async (event: any) => {
const handleSearch = async (event) => {
console.log('~~~');
if (event.type === 'keydown' && event.key === 'Enter') {
const newString = event?.target.value;
@ -120,7 +98,6 @@ const Index = () => {
};
}
// eslint-disable-next-line @typescript-eslint/no-shadow
const res = boardService.getBoardList(params).then((response) => {
if (response && response.data) {
// setTotalCount(response?.count);

7
src/views/biz/board/public.jsx
Unescape Escape View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
// material-ui
import { Button, Divider, FormControlLabel, Grid, InputAdornment, Radio, RadioGroup, TextField } from '@mui/material';
@ -9,12 +9,11 @@ import LockTwoToneIcon from '@mui/icons-material/LockTwoTone';
// berry ui
import MainCard from 'ui-component/cards/MainCard';
import { useDispatch, useSelector } from 'store';
import { useDispatch } from 'store';
import { getDetailCards, filterDetailCards } from 'store/slices/user';
// project imports
import MuiGridList from 'ui-component/MuiGridList';
import { GridColumns } from '@mui/x-data-grid';
import InputLabel from 'ui-component/extended/Form/InputLabel';
const Index = () => {
@ -39,7 +38,7 @@ const Index = () => {
// loading: false
});
const columns: GridColumns = [
const columns = [
{ headerName: '게시판코드', field: 'ciCode' },
{ headerName: '글번호', field: 'ciContentno' },
{ headerName: '제목', field: 'ciTitle', editable: true },

98
src/views/dashboard/Analytics/LatestCustomerTableCard.js
Unescape Escape View File

@ -18,66 +18,66 @@ import Flag5 from 'assets/images/widget/USA.jpg';
// table data
function createData(image, subject, dept, date) {
return { image, subject, dept, date };
return { image, subject, dept, date };
}
const rows = [
createData(Flag1, 'Germany', 'Angelina Jolly', '56.23%'),
createData(Flag2, 'USA', 'John Deo', '25.23%'),
createData(Flag3, 'Australia', 'Jenifer Vintage', '12.45%'),
createData(Flag4, 'United Kingdom', 'Lori Moore', '8.65%'),
createData(Flag5, 'Brazil', 'Allianz Dacron', '3.56%'),
createData(Flag1, 'Australia', 'Jenifer Vintage', '12.45%'),
createData(Flag3, 'USA', 'John Deo', '25.23%'),
createData(Flag5, 'Australia', 'Jenifer Vintage', '12.45%'),
createData(Flag2, 'United Kingdom', 'Lori Moore', '8.65%')
createData(Flag1, 'Germany', 'Angelina Jolly', '56.23%'),
createData(Flag2, 'USA', 'John Deo', '25.23%'),
createData(Flag3, 'Australia', 'Jenifer Vintage', '12.45%'),
createData(Flag4, 'United Kingdom', 'Lori Moore', '8.65%'),
createData(Flag5, 'Brazil', 'Allianz Dacron', '3.56%'),
createData(Flag1, 'Australia', 'Jenifer Vintage', '12.45%'),
createData(Flag3, 'USA', 'John Deo', '25.23%'),
createData(Flag5, 'Australia', 'Jenifer Vintage', '12.45%'),
createData(Flag2, 'United Kingdom', 'Lori Moore', '8.65%')
];
// =========================|| DASHBOARD ANALYTICS - LATEST CUSTOMERS TABLE CARD ||========================= //
const LatestCustomerTableCard = ({ title }) => (
<MainCard title={title} content={false}>
<PerfectScrollbar style={{ height: 345, padding: 0 }}>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell sx={{ pl: 3 }}>#</TableCell>
<TableCell>Country</TableCell>
<TableCell>Name</TableCell>
<TableCell align="right" sx={{ pr: 3 }}>
Average
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => (
<TableRow hover key={index}>
<TableCell sx={{ pl: 3 }}>
<CardMedia component="img" image={row.image} title="image" sx={{ width: 30, height: 'auto' }} />
</TableCell>
<TableCell>{row.subject}</TableCell>
<TableCell>{row.dept}</TableCell>
<TableCell align="right" sx={{ pr: 3 }}>
{row.date}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</PerfectScrollbar>
<MainCard title={title} content={false}>
<PerfectScrollbar style={{ height: 345, padding: 0 }}>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell sx={{ pl: 3 }}>#</TableCell>
<TableCell>Country</TableCell>
<TableCell>Name</TableCell>
<TableCell align="right" sx={{ pr: 3 }}>
Average
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => (
<TableRow hover key={index}>
<TableCell sx={{ pl: 3 }}>
<CardMedia component="img" image={row.image} title="image" sx={{ width: 30, height: 'auto' }} />
</TableCell>
<TableCell>{row.subject}</TableCell>
<TableCell>{row.dept}</TableCell>
<TableCell align="right" sx={{ pr: 3 }}>
{row.date}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</PerfectScrollbar>
<Divider />
<CardActions sx={{ justifyContent: 'flex-end' }}>
<Button variant="text" size="small">
View all Latest Customers
</Button>
</CardActions>
</MainCard>
<Divider />
<CardActions sx={{ justifyContent: 'flex-end' }}>
<Button variant="text" size="small">
View all Latest Customers
</Button>
</CardActions>
</MainCard>
);
LatestCustomerTableCard.propTypes = {
title: PropTypes.string
title: PropTypes.string
};
export default LatestCustomerTableCard;

226
src/views/dashboard/Analytics/MarketShareAreaChartCard.js
Unescape Escape View File

@ -20,126 +20,120 @@ import TrendingDownIcon from '@mui/icons-material/TrendingDown';
// ===========================|| DASHBOARD ANALYTICS - MARKET SHARE AREA CHART CARD ||=========================== //
const MarketShareAreaChartCard = () => {
const theme = useTheme();
const theme = useTheme();
const { navType } = useConfig();
const { navType } = useConfig();
const secondaryMain = theme.palette.secondary.main;
const errorMain = theme.palette.error.main;
const primaryDark = theme.palette.primary.dark;
const secondaryMain = theme.palette.secondary.main;
const errorMain = theme.palette.error.main;
const primaryDark = theme.palette.primary.dark;
React.useEffect(() => {
const newChartData = {
...chartData.options,
colors: [secondaryMain, errorMain, primaryDark],
tooltip: {
theme: navType === 'dark' ? 'dark' : 'light'
}
};
ApexCharts.exec(`market-share-area-chart`, 'updateOptions', newChartData);
}, [navType, secondaryMain, errorMain, primaryDark]);
React.useEffect(() => {
const newChartData = {
...chartData.options,
colors: [secondaryMain, errorMain, primaryDark],
tooltip: {
theme: navType === 'dark' ? 'dark' : 'light'
}
};
ApexCharts.exec(`market-share-area-chart`, 'updateOptions', newChartData);
}, [navType, secondaryMain, errorMain, primaryDark]);
return (
<MainCard sx={{ '&>div': { p: 0, pb: '0px !important' } }}>
<Box
sx={{
p: 3
}}
>
<Grid container direction="column" spacing={3}>
<Grid item container spacing={1} alignItems="center">
<Grid item>
<Typography variant="h3">Market Share</Typography>
</Grid>
<Grid item xs zeroMinWidth />
<Grid item>
<TrendingDownIcon fontSize="large" color="error" />
</Grid>
<Grid item>
<Typography variant="h3">27, 695.65</Typography>
</Grid>
</Grid>
<Grid item xs={12}>
<Typography sx={{ mt: -2.5, fontWeight: 400 }} color="inherit" variant="h5">
Department wise monthly sales report
</Typography>
</Grid>
<Grid item container justifyContent="space-around" alignItems="center" spacing={3}>
<Grid item>
<Grid container alignItems="center" spacing={1}>
<Grid item>
<Typography
sx={{
width: 40,
height: 40,
color: theme.palette.secondary.main,
borderRadius: '12px',
padding: 1,
backgroundColor:
theme.palette.mode === 'dark'
? theme.palette.background.default
: theme.palette.secondary.light
}}
>
<IconBrandFacebook stroke={1.5} />
</Typography>
</Grid>
<Grid item sm zeroMinWidth>
<Typography variant="h4">+45.36%</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container alignItems="center" spacing={1}>
<Grid item>
<Typography
sx={{
width: 40,
height: 40,
color: theme.palette.primary.main,
borderRadius: '12px',
padding: 1,
backgroundColor:
theme.palette.mode === 'dark'
? theme.palette.background.default
: theme.palette.primary.light
}}
>
<IconBrandTwitter stroke={1.5} />
</Typography>
</Grid>
<Grid item sm zeroMinWidth>
<Typography variant="h4">- 50.69%</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container alignItems="center" spacing={1}>
<Grid item>
<Typography
sx={{
width: 40,
height: 40,
color: theme.palette.error.main,
borderRadius: '12px',
padding: 1,
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : '#ffe9e9'
}}
>
<IconBrandYoutube stroke={2} />
</Typography>
</Grid>
<Grid item sm zeroMinWidth>
<Typography variant="h4">+ 16.85%</Typography>
</Grid>
</Grid>
</Grid>
<Grid item xs zeroMinWidth />
</Grid>
return (
<MainCard sx={{ '&>div': { p: 0, pb: '0px !important' } }}>
<Box
sx={{
p: 3
}}
>
<Grid container direction="column" spacing={3}>
<Grid item container spacing={1} alignItems="center">
<Grid item>
<Typography variant="h3">Market Share</Typography>
</Grid>
<Grid item xs zeroMinWidth />
<Grid item>
<TrendingDownIcon fontSize="large" color="error" />
</Grid>
<Grid item>
<Typography variant="h3">27, 695.65</Typography>
</Grid>
</Grid>
<Grid item xs={12}>
<Typography sx={{ mt: -2.5, fontWeight: 400 }} color="inherit" variant="h5">
Department wise monthly sales report
</Typography>
</Grid>
<Grid item container justifyContent="space-around" alignItems="center" spacing={3}>
<Grid item>
<Grid container alignItems="center" spacing={1}>
<Grid item>
<Typography
sx={{
width: 40,
height: 40,
color: theme.palette.secondary.main,
borderRadius: '12px',
padding: 1,
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.secondary.light
}}
>
<IconBrandFacebook stroke={1.5} />
</Typography>
</Grid>
</Box>
<Chart {...chartData} />
</MainCard>
);
<Grid item sm zeroMinWidth>
<Typography variant="h4">+45.36%</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container alignItems="center" spacing={1}>
<Grid item>
<Typography
sx={{
width: 40,
height: 40,
color: theme.palette.primary.main,
borderRadius: '12px',
padding: 1,
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.primary.light
}}
>
<IconBrandTwitter stroke={1.5} />
</Typography>
</Grid>
<Grid item sm zeroMinWidth>
<Typography variant="h4">- 50.69%</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container alignItems="center" spacing={1}>
<Grid item>
<Typography
sx={{
width: 40,
height: 40,
color: theme.palette.error.main,
borderRadius: '12px',
padding: 1,
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : '#ffe9e9'
}}
>
<IconBrandYoutube stroke={2} />
</Typography>
</Grid>
<Grid item sm zeroMinWidth>
<Typography variant="h4">+ 16.85%</Typography>
</Grid>
</Grid>
</Grid>
<Grid item xs zeroMinWidth />
</Grid>
</Grid>
</Box>
<Chart {...chartData} />
</MainCard>
);
};
export default MarketShareAreaChartCard;

322
src/views/dashboard/Analytics/TotalRevenueCard.js
Unescape Escape View File

@ -16,171 +16,171 @@ import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
// ===========================|| DASHBOARD ANALYTICS - TOTAL REVENUE CARD ||=========================== //
const TotalRevenueCard = ({ title }) => {
const successSX = { color: 'success.dark' };
const errorSX = { color: 'error.main' };
const successSX = { color: 'success.dark' };
const errorSX = { color: 'error.main' };
return (
<MainCard title={title} content={false}>
<PerfectScrollbar style={{ height: 370 }}>
<List
component="nav"
aria-label="main mailbox folders"
sx={{
'& svg': {
width: 32,
my: -0.75,
ml: -0.75,
mr: 0.75
}
}}
>
<ListItemButton>
<ListItemIcon>
<ArrowDropUpIcon sx={successSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Bitcoin</span>
<Typography sx={successSX}>+ $145.85</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ethereum</span>
<Typography sx={errorSX}>- $6.368</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropUpIcon sx={successSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ripple</span>
<Typography sx={successSX}>+ $458.63</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Neo</span>
<Typography sx={errorSX}>- $5.631</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ethereum</span>
<Typography sx={errorSX}>- $6.368</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropUpIcon sx={successSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ripple</span>
<Typography sx={successSX}>+ $458.63</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Neo</span>
<Typography sx={errorSX}>- $5.631</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ethereum</span>
<Typography sx={errorSX}>- $6.368</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropUpIcon sx={successSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ripple</span>
<Typography sx={successSX}>+ $458.63</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Neo</span>
<Typography sx={errorSX}>- $5.631</Typography>
</Stack>
}
/>
</ListItemButton>
</List>
</PerfectScrollbar>
</MainCard>
);
return (
<MainCard title={title} content={false}>
<PerfectScrollbar style={{ height: 370 }}>
<List
component="nav"
aria-label="main mailbox folders"
sx={{
'& svg': {
width: 32,
my: -0.75,
ml: -0.75,
mr: 0.75
}
}}
>
<ListItemButton>
<ListItemIcon>
<ArrowDropUpIcon sx={successSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Bitcoin</span>
<Typography sx={successSX}>+ $145.85</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ethereum</span>
<Typography sx={errorSX}>- $6.368</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropUpIcon sx={successSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ripple</span>
<Typography sx={successSX}>+ $458.63</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Neo</span>
<Typography sx={errorSX}>- $5.631</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ethereum</span>
<Typography sx={errorSX}>- $6.368</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropUpIcon sx={successSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ripple</span>
<Typography sx={successSX}>+ $458.63</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Neo</span>
<Typography sx={errorSX}>- $5.631</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ethereum</span>
<Typography sx={errorSX}>- $6.368</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropUpIcon sx={successSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ripple</span>
<Typography sx={successSX}>+ $458.63</Typography>
</Stack>
}
/>
</ListItemButton>
<Divider />
<ListItemButton>
<ListItemIcon>
<ArrowDropDownIcon sx={errorSX} />
</ListItemIcon>
<ListItemText
primary={
<Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Neo</span>
<Typography sx={errorSX}>- $5.631</Typography>
</Stack>
}
/>
</ListItemButton>
</List>
</PerfectScrollbar>
</MainCard>
);
};
TotalRevenueCard.propTypes = {
title: PropTypes.string
title: PropTypes.string
};
export default TotalRevenueCard;

110
src/views/dashboard/Analytics/chart-data/market-share-area-chart.js
Unescape Escape View File

@ -1,62 +1,62 @@
// ==============================|| DASHBOARD - MARKET SHARE AREA CHART ||============================== //
const chartData = {
height: 200,
type: 'area',
options: {
chart: {
id: 'market-share-area-chart',
toolbar: {
show: false
},
zoom: {
enabled: false
},
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 80, 100]
}
},
legend: {
show: false
},
yaxis: {
min: 1,
max: 100,
labels: {
show: false
}
}
height: 200,
type: 'area',
options: {
chart: {
id: 'market-share-area-chart',
toolbar: {
show: false
},
zoom: {
enabled: false
},
sparkline: {
enabled: true
}
},
series: [
{
name: 'Youtube',
data: [10, 90, 65, 85, 40, 80, 30]
},
{
name: 'Facebook',
data: [50, 30, 25, 15, 60, 10, 25]
},
{
name: 'Twitter',
data: [5, 50, 40, 55, 20, 40, 20]
}
]
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 80, 100]
}
},
legend: {
show: false
},
yaxis: {
min: 1,
max: 100,
labels: {
show: false
}
}
},
series: [
{
name: 'Youtube',
data: [10, 90, 65, 85, 40, 80, 30]
},
{
name: 'Facebook',
data: [50, 30, 25, 15, 60, 10, 25]
},
{
name: 'Twitter',
data: [5, 50, 40, 55, 20, 40, 20]
}
]
};
export default chartData;

279
src/views/dashboard/Analytics/index.js
Unescape Escape View File

@ -20,172 +20,147 @@ import DescriptionTwoToneIcon from '@mui/icons-material/DescriptionTwoTone';
// ==============================|| ANALYTICS DASHBOARD ||============================== //
const Analytics = () => {
const theme = useTheme();
const matchDownXs = useMediaQuery(theme.breakpoints.down('sm'));
const theme = useTheme();
const matchDownXs = useMediaQuery(theme.breakpoints.down('sm'));
const blockSX = {
p: 2.5,
borderLeft: '1px solid ',
borderBottom: '1px solid ',
borderLeftColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[200],
borderBottomColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[200]
};
const blockSX = {
p: 2.5,
borderLeft: '1px solid ',
borderBottom: '1px solid ',
borderLeftColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[200],
borderBottomColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[200]
};
return (
return (
<Grid container spacing={gridSpacing}>
<Grid item xs={12} lg={8} md={6}>
<Grid container spacing={gridSpacing}>
<Grid item xs={12} lg={8} md={6}>
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<MarketShareAreaChartCard />
<Grid item xs={12}>
<MarketShareAreaChartCard />
</Grid>
<Grid item xs={12} lg={6}>
<RevenueCard
primary="Revenue"
secondary="$42,562"
content="$50,032 Last Month"
iconPrimary={MonetizationOnTwoToneIcon}
color={theme.palette.secondary.main}
/>
</Grid>
<Grid item xs={12} lg={6}>
<RevenueCard
primary="Orders Received"
secondary="486"
content="20% Increase"
iconPrimary={AccountCircleTwoTone}
color={theme.palette.primary.main}
/>
</Grid>
<Grid item xs={12}>
<LatestCustomerTableCard title="Latest Customers" />
</Grid>
</Grid>
</Grid>
<Grid item xs={12} lg={4} md={6}>
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<MainCard
content={false}
sx={{
'& svg': {
width: 50,
height: 50,
color: theme.palette.secondary.main,
borderRadius: '14px',
p: 1.25,
bgcolor: theme.palette.mode === 'dark' ? theme.palette.background.default : 'primary.light'
}
}}
>
<Grid container alignItems="center" spacing={0}>
<Grid item xs={12} sm={6} sx={blockSX}>
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
<Grid item>
<IconShare stroke={1.5} />
</Grid>
<Grid item xs={12} lg={6}>
<RevenueCard
primary="Revenue"
secondary="$42,562"
content="$50,032 Last Month"
iconPrimary={MonetizationOnTwoToneIcon}
color={theme.palette.secondary.main}
/>
<Grid item sm zeroMinWidth>
<Typography variant="h5" align="center">
1000
</Typography>
<Typography variant="subtitle2" align="center">
SHARES
</Typography>
</Grid>
<Grid item xs={12} lg={6}>
<RevenueCard
primary="Orders Received"
secondary="486"
content="20% Increase"
iconPrimary={AccountCircleTwoTone}
color={theme.palette.primary.main}
/>
</Grid>
</Grid>
<Grid item xs={12} sm={6} sx={blockSX}>
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
<Grid item>
<IconAccessPoint stroke={1.5} />
</Grid>
<Grid item xs={12}>
<LatestCustomerTableCard title="Latest Customers" />
<Grid item sm zeroMinWidth>
<Typography variant="h5" align="center">
600
</Typography>
<Typography variant="subtitle2" align="center">
NETWORK
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} lg={4} md={6}>
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<MainCard
content={false}
sx={{
'& svg': {
width: 50,
height: 50,
color: theme.palette.secondary.main,
borderRadius: '14px',
p: 1.25,
bgcolor: theme.palette.mode === 'dark' ? theme.palette.background.default : 'primary.light'
}
}}
>
<Grid container alignItems="center" spacing={0}>
<Grid item xs={12} sm={6} sx={blockSX}>
<Grid
container
alignItems="center"
spacing={1}
justifyContent={matchDownXs ? 'space-between' : 'center'}
>
<Grid item>
<IconShare stroke={1.5} />
</Grid>
<Grid item sm zeroMinWidth>
<Typography variant="h5" align="center">
1000
</Typography>
<Typography variant="subtitle2" align="center">
SHARES
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} sm={6} sx={blockSX}>
<Grid
container
alignItems="center"
spacing={1}
justifyContent={matchDownXs ? 'space-between' : 'center'}
>
<Grid item>
<IconAccessPoint stroke={1.5} />
</Grid>
<Grid item sm zeroMinWidth>
<Typography variant="h5" align="center">
600
</Typography>
<Typography variant="subtitle2" align="center">
NETWORK
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid container alignItems="center" spacing={0}>
<Grid item xs={12} sm={6} sx={blockSX}>
<Grid
container
alignItems="center"
spacing={1}
justifyContent={matchDownXs ? 'space-between' : 'center'}
>
<Grid item>
<IconCircles stroke={1.5} />
</Grid>
<Grid item sm zeroMinWidth>
<Typography variant="h5" align="center">
3550
</Typography>
<Typography variant="subtitle2" align="center">
RETURNS
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} sm={6} sx={blockSX}>
<Grid
container
alignItems="center"
spacing={1}
justifyContent={matchDownXs ? 'space-between' : 'center'}
>
<Grid item>
<IconCreditCard stroke={1.5} />
</Grid>
<Grid item sm zeroMinWidth>
<Typography variant="h5" align="center">
100%
</Typography>
<Typography variant="subtitle2" align="center">
ORDER
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</MainCard>
</Grid>
<Grid container alignItems="center" spacing={0}>
<Grid item xs={12} sm={6} sx={blockSX}>
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
<Grid item>
<IconCircles stroke={1.5} />
</Grid>
<Grid item xs={12}>
<TotalRevenueCard title="Total Revenue" />
<Grid item sm zeroMinWidth>
<Typography variant="h5" align="center">
3550
</Typography>
<Typography variant="subtitle2" align="center">
RETURNS
</Typography>
</Grid>
<Grid item xs={12}>
<UserCountCard
primary="Daily user"
secondary="1,658"
iconPrimary={AccountCircleTwoTone}
color={theme.palette.secondary.main}
/>
</Grid>
</Grid>
<Grid item xs={12} sm={6} sx={blockSX}>
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
<Grid item>
<IconCreditCard stroke={1.5} />
</Grid>
<Grid item xs={12}>
<UserCountCard
primary="Daily page view"
secondary="1K"
iconPrimary={DescriptionTwoToneIcon}
color={theme.palette.primary.main}
/>
<Grid item sm zeroMinWidth>
<Typography variant="h5" align="center">
100%
</Typography>
<Typography variant="subtitle2" align="center">
ORDER
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</MainCard>
</Grid>
<Grid item xs={12}>
<TotalRevenueCard title="Total Revenue" />
</Grid>
<Grid item xs={12}>
<UserCountCard primary="Daily user" secondary="1,658" iconPrimary={AccountCircleTwoTone} color={theme.palette.secondary.main} />
</Grid>
<Grid item xs={12}>
<UserCountCard
primary="Daily page view"
secondary="1K"
iconPrimary={DescriptionTwoToneIcon}
color={theme.palette.primary.main}
/>
</Grid>
</Grid>
);
</Grid>
</Grid>
);
};
export default Analytics;

82
src/views/dashboard/Default/BajajAreaChartCard.js
Unescape Escape View File

@ -15,48 +15,48 @@ import chartData from './chart-data/bajaj-area-chart';
// ===========================|| DASHBOARD DEFAULT - BAJAJ AREA CHART CARD ||=========================== //
const BajajAreaChartCard = () => {
const theme = useTheme();
const { navType } = useConfig();
const orangeDark = theme.palette.secondary[800];
React.useEffect(() => {
const newSupportChart = {
...chartData.options,
colors: [orangeDark],
tooltip: {
theme: navType === 'dark' ? 'dark' : 'light'
}
};
ApexCharts.exec(`support-chart`, 'updateOptions', newSupportChart);
}, [navType, orangeDark]);
return (
<Card sx={{ bgcolor: 'secondary.light' }}>
<Grid container sx={{ p: 2, pb: 0, color: '#fff' }}>
<Grid item xs={12}>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" sx={{ color: theme.palette.secondary.dark }}>
Bajaj Finery
</Typography>
</Grid>
<Grid item>
<Typography variant="h4" sx={{ color: theme.palette.grey[800] }}>
$1839.00
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Typography variant="subtitle2" sx={{ color: theme.palette.grey[800] }}>
10% Profit
</Typography>
</Grid>
const theme = useTheme();
const { navType } = useConfig();
const orangeDark = theme.palette.secondary[800];
React.useEffect(() => {
const newSupportChart = {
...chartData.options,
colors: [orangeDark],
tooltip: {
theme: navType === 'dark' ? 'dark' : 'light'
}
};
ApexCharts.exec(`support-chart`, 'updateOptions', newSupportChart);
}, [navType, orangeDark]);
return (
<Card sx={{ bgcolor: 'secondary.light' }}>
<Grid container sx={{ p: 2, pb: 0, color: '#fff' }}>
<Grid item xs={12}>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" sx={{ color: theme.palette.secondary.dark }}>
Bajaj Finery
</Typography>
</Grid>
<Chart {...chartData} />
</Card>
);
<Grid item>
<Typography variant="h4" sx={{ color: theme.palette.grey[800] }}>
$1839.00
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Typography variant="subtitle2" sx={{ color: theme.palette.grey[800] }}>
10% Profit
</Typography>
</Grid>
</Grid>
<Chart {...chartData} />
</Card>
);
};
export default BajajAreaChartCard;

312
src/views/dashboard/Default/EarningCard.js
Unescape Escape View File

@ -19,177 +19,173 @@ import PictureAsPdfTwoToneIcon from '@mui/icons-material/PictureAsPdfOutlined';
import ArchiveTwoToneIcon from '@mui/icons-material/ArchiveOutlined';
const CardWrapper = styled(MainCard)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.secondary.dark,
color: '#fff',
overflow: 'hidden',
position: 'relative',
'&:after': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background:
theme.palette.mode === 'dark'
? `linear-gradient(210.04deg, ${theme.palette.secondary.dark} -50.94%, rgba(144, 202, 249, 0) 95.49%)`
: theme.palette.secondary[800],
borderRadius: '50%',
top: -85,
right: -95,
[theme.breakpoints.down('sm')]: {
top: -105,
right: -140
}
},
'&:before': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background:
theme.palette.mode === 'dark'
? `linear-gradient(140.9deg, ${theme.palette.secondary.dark} -14.02%, rgba(144, 202, 249, 0) 85.50%)`
: theme.palette.secondary[800],
borderRadius: '50%',
top: -125,
right: -15,
opacity: 0.5,
[theme.breakpoints.down('sm')]: {
top: -155,
right: -70
}
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.secondary.dark,
color: '#fff',
overflow: 'hidden',
position: 'relative',
'&:after': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background:
theme.palette.mode === 'dark'
? `linear-gradient(210.04deg, ${theme.palette.secondary.dark} -50.94%, rgba(144, 202, 249, 0) 95.49%)`
: theme.palette.secondary[800],
borderRadius: '50%',
top: -85,
right: -95,
[theme.breakpoints.down('sm')]: {
top: -105,
right: -140
}
},
'&:before': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background:
theme.palette.mode === 'dark'
? `linear-gradient(140.9deg, ${theme.palette.secondary.dark} -14.02%, rgba(144, 202, 249, 0) 85.50%)`
: theme.palette.secondary[800],
borderRadius: '50%',
top: -125,
right: -15,
opacity: 0.5,
[theme.breakpoints.down('sm')]: {
top: -155,
right: -70
}
}
}));
// ===========================|| DASHBOARD DEFAULT - EARNING CARD ||=========================== //
const EarningCard = ({ isLoading }) => {
const theme = useTheme();
const theme = useTheme();
const [anchorEl, setAnchorEl] = React.useState(null);
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<>
{isLoading ? (
<SkeletonEarningCard />
) : (
<CardWrapper border={false} content={false}>
<Box sx={{ p: 2.25 }}>
<Grid container direction="column">
<Grid item>
<Grid container justifyContent="space-between">
<Grid item>
<Avatar
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.largeAvatar,
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary[800],
mt: 1
}}
>
<img src={EarningIcon} alt="Notification" />
</Avatar>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.mediumAvatar,
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.secondary.dark,
color: theme.palette.secondary[200],
zIndex: 1
}}
aria-controls="menu-earning-card"
aria-haspopup="true"
onClick={handleClick}
>
<MoreHorizIcon fontSize="inherit" />
</Avatar>
<Menu
id="menu-earning-card"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
variant="selectedMenu"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right'
}}
>
<MenuItem onClick={handleClose}>
<GetAppTwoToneIcon sx={{ mr: 1.75 }} /> Import Card
</MenuItem>
<MenuItem onClick={handleClose}>
<FileCopyTwoToneIcon sx={{ mr: 1.75 }} /> Copy Data
</MenuItem>
<MenuItem onClick={handleClose}>
<PictureAsPdfTwoToneIcon sx={{ mr: 1.75 }} /> Export
</MenuItem>
<MenuItem onClick={handleClose}>
<ArchiveTwoToneIcon sx={{ mr: 1.75 }} /> Archive File
</MenuItem>
</Menu>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container alignItems="center">
<Grid item>
<Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>
$500.00
</Typography>
</Grid>
<Grid item>
<Avatar
sx={{
cursor: 'pointer',
...theme.typography.smallAvatar,
backgroundColor: theme.palette.secondary[200],
color: theme.palette.secondary.dark
}}
>
<ArrowUpwardIcon fontSize="inherit" sx={{ transform: 'rotate3d(1, 1, 1, 45deg)' }} />
</Avatar>
</Grid>
</Grid>
</Grid>
<Grid item sx={{ mb: 1.25 }}>
<Typography
sx={{
fontSize: '1rem',
fontWeight: 500,
color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : theme.palette.secondary[200]
}}
>
Total Earning
</Typography>
</Grid>
</Grid>
</Box>
</CardWrapper>
)}
</>
);
return (
<>
{isLoading ? (
<SkeletonEarningCard />
) : (
<CardWrapper border={false} content={false}>
<Box sx={{ p: 2.25 }}>
<Grid container direction="column">
<Grid item>
<Grid container justifyContent="space-between">
<Grid item>
<Avatar
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.largeAvatar,
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary[800],
mt: 1
}}
>
<img src={EarningIcon} alt="Notification" />
</Avatar>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.mediumAvatar,
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.secondary.dark,
color: theme.palette.secondary[200],
zIndex: 1
}}
aria-controls="menu-earning-card"
aria-haspopup="true"
onClick={handleClick}
>
<MoreHorizIcon fontSize="inherit" />
</Avatar>
<Menu
id="menu-earning-card"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
variant="selectedMenu"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right'
}}
>
<MenuItem onClick={handleClose}>
<GetAppTwoToneIcon sx={{ mr: 1.75 }} /> Import Card
</MenuItem>
<MenuItem onClick={handleClose}>
<FileCopyTwoToneIcon sx={{ mr: 1.75 }} /> Copy Data
</MenuItem>
<MenuItem onClick={handleClose}>
<PictureAsPdfTwoToneIcon sx={{ mr: 1.75 }} /> Export
</MenuItem>
<MenuItem onClick={handleClose}>
<ArchiveTwoToneIcon sx={{ mr: 1.75 }} /> Archive File
</MenuItem>
</Menu>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container alignItems="center">
<Grid item>
<Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>$500.00</Typography>
</Grid>
<Grid item>
<Avatar
sx={{
cursor: 'pointer',
...theme.typography.smallAvatar,
backgroundColor: theme.palette.secondary[200],
color: theme.palette.secondary.dark
}}
>
<ArrowUpwardIcon fontSize="inherit" sx={{ transform: 'rotate3d(1, 1, 1, 45deg)' }} />
</Avatar>
</Grid>
</Grid>
</Grid>
<Grid item sx={{ mb: 1.25 }}>
<Typography
sx={{
fontSize: '1rem',
fontWeight: 500,
color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : theme.palette.secondary[200]
}}
>
Total Earning
</Typography>
</Grid>
</Grid>
</Box>
</CardWrapper>
)}
</>
);
};
EarningCard.propTypes = {
isLoading: PropTypes.bool
isLoading: PropTypes.bool
};
export default EarningCard;

552
src/views/dashboard/Default/PopularCard.js
Unescape Escape View File

@ -20,290 +20,290 @@ import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDown
// ==============================|| DASHBOARD DEFAULT - POPULAR CARD ||============================== //
const PopularCard = ({ isLoading }) => {
const theme = useTheme();
const theme = useTheme();
const [anchorEl, setAnchorEl] = React.useState(null);
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<>
{isLoading ? (
<SkeletonPopularCard />
) : (
<MainCard content={false}>
<CardContent>
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<Grid container alignContent="center" justifyContent="space-between">
<Grid item>
<Typography variant="h4">Popular Stocks</Typography>
</Grid>
<Grid item>
<MoreHorizOutlinedIcon
fontSize="small"
sx={{
color: theme.palette.primary[200],
cursor: 'pointer'
}}
aria-controls="menu-popular-card"
aria-haspopup="true"
onClick={handleClick}
/>
<Menu
id="menu-popular-card"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
variant="selectedMenu"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right'
}}
>
<MenuItem onClick={handleClose}> Today</MenuItem>
<MenuItem onClick={handleClose}> This Month</MenuItem>
<MenuItem onClick={handleClose}> This Year </MenuItem>
</Menu>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} sx={{ pt: '16px !important' }}>
<BajajAreaChartCard />
</Grid>
<Grid item xs={12}>
<Grid container direction="column">
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
Bajaj Finery
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
$1839.00
</Typography>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
width: 16,
height: 16,
borderRadius: '5px',
backgroundColor: theme.palette.success.light,
color: theme.palette.success.dark,
ml: 2
}}
>
<KeyboardArrowUpOutlinedIcon fontSize="small" color="inherit" />
</Avatar>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: 'success.dark' }}>
10% Profit
</Typography>
</Grid>
</Grid>
<Divider sx={{ my: 1.5 }} />
<Grid container direction="column">
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
TTML
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
$100.00
</Typography>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
width: 16,
height: 16,
borderRadius: '5px',
backgroundColor: theme.palette.orange.light,
color: theme.palette.orange.dark,
marginLeft: 1.875
}}
>
<KeyboardArrowDownOutlinedIcon fontSize="small" color="inherit" />
</Avatar>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: theme.palette.orange.dark }}>
10% loss
</Typography>
</Grid>
</Grid>
<Divider sx={{ my: 1.5 }} />
<Grid container direction="column">
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
Reliance
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
$200.00
</Typography>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
width: 16,
height: 16,
borderRadius: '5px',
backgroundColor: theme.palette.success.light,
color: theme.palette.success.dark,
ml: 2
}}
>
<KeyboardArrowUpOutlinedIcon fontSize="small" color="inherit" />
</Avatar>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: theme.palette.success.dark }}>
10% Profit
</Typography>
</Grid>
</Grid>
<Divider sx={{ my: 1.5 }} />
<Grid container direction="column">
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
TTML
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
$189.00
</Typography>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
width: 16,
height: 16,
borderRadius: '5px',
backgroundColor: theme.palette.orange.light,
color: theme.palette.orange.dark,
ml: 2
}}
>
<KeyboardArrowDownOutlinedIcon fontSize="small" color="inherit" />
</Avatar>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: theme.palette.orange.dark }}>
10% loss
</Typography>
</Grid>
</Grid>
<Divider sx={{ my: 1.5 }} />
<Grid container direction="column">
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
Stolon
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
$189.00
</Typography>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
width: 16,
height: 16,
borderRadius: '5px',
backgroundColor: theme.palette.orange.light,
color: theme.palette.orange.dark,
ml: 2
}}
>
<KeyboardArrowDownOutlinedIcon fontSize="small" color="inherit" />
</Avatar>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: theme.palette.orange.dark }}>
10% loss
</Typography>
</Grid>
</Grid>
</Grid>
return (
<>
{isLoading ? (
<SkeletonPopularCard />
) : (
<MainCard content={false}>
<CardContent>
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<Grid container alignContent="center" justifyContent="space-between">
<Grid item>
<Typography variant="h4">Popular Stocks</Typography>
</Grid>
<Grid item>
<MoreHorizOutlinedIcon
fontSize="small"
sx={{
color: theme.palette.primary[200],
cursor: 'pointer'
}}
aria-controls="menu-popular-card"
aria-haspopup="true"
onClick={handleClick}
/>
<Menu
id="menu-popular-card"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
variant="selectedMenu"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right'
}}
>
<MenuItem onClick={handleClose}> Today</MenuItem>
<MenuItem onClick={handleClose}> This Month</MenuItem>
<MenuItem onClick={handleClose}> This Year </MenuItem>
</Menu>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} sx={{ pt: '16px !important' }}>
<BajajAreaChartCard />
</Grid>
<Grid item xs={12}>
<Grid container direction="column">
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
Bajaj Finery
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
$1839.00
</Typography>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
width: 16,
height: 16,
borderRadius: '5px',
backgroundColor: theme.palette.success.light,
color: theme.palette.success.dark,
ml: 2
}}
>
<KeyboardArrowUpOutlinedIcon fontSize="small" color="inherit" />
</Avatar>
</Grid>
</Grid>
</CardContent>
<CardActions sx={{ p: 1.25, pt: 0, justifyContent: 'center' }}>
<Button size="small" disableElevation>
View All
<ChevronRightOutlinedIcon />
</Button>
</CardActions>
</MainCard>
)}
</>
);
</Grid>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: 'success.dark' }}>
10% Profit
</Typography>
</Grid>
</Grid>
<Divider sx={{ my: 1.5 }} />
<Grid container direction="column">
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
TTML
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
$100.00
</Typography>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
width: 16,
height: 16,
borderRadius: '5px',
backgroundColor: theme.palette.orange.light,
color: theme.palette.orange.dark,
marginLeft: 1.875
}}
>
<KeyboardArrowDownOutlinedIcon fontSize="small" color="inherit" />
</Avatar>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: theme.palette.orange.dark }}>
10% loss
</Typography>
</Grid>
</Grid>
<Divider sx={{ my: 1.5 }} />
<Grid container direction="column">
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
Reliance
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
$200.00
</Typography>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
width: 16,
height: 16,
borderRadius: '5px',
backgroundColor: theme.palette.success.light,
color: theme.palette.success.dark,
ml: 2
}}
>
<KeyboardArrowUpOutlinedIcon fontSize="small" color="inherit" />
</Avatar>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: theme.palette.success.dark }}>
10% Profit
</Typography>
</Grid>
</Grid>
<Divider sx={{ my: 1.5 }} />
<Grid container direction="column">
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
TTML
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
$189.00
</Typography>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
width: 16,
height: 16,
borderRadius: '5px',
backgroundColor: theme.palette.orange.light,
color: theme.palette.orange.dark,
ml: 2
}}
>
<KeyboardArrowDownOutlinedIcon fontSize="small" color="inherit" />
</Avatar>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: theme.palette.orange.dark }}>
10% loss
</Typography>
</Grid>
</Grid>
<Divider sx={{ my: 1.5 }} />
<Grid container direction="column">
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
Stolon
</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="subtitle1" color="inherit">
$189.00
</Typography>
</Grid>
<Grid item>
<Avatar
variant="rounded"
sx={{
width: 16,
height: 16,
borderRadius: '5px',
backgroundColor: theme.palette.orange.light,
color: theme.palette.orange.dark,
ml: 2
}}
>
<KeyboardArrowDownOutlinedIcon fontSize="small" color="inherit" />
</Avatar>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: theme.palette.orange.dark }}>
10% loss
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</CardContent>
<CardActions sx={{ p: 1.25, pt: 0, justifyContent: 'center' }}>
<Button size="small" disableElevation>
View All
<ChevronRightOutlinedIcon />
</Button>
</CardActions>
</MainCard>
)}
</>
);
};
PopularCard.propTypes = {
isLoading: PropTypes.bool
isLoading: PropTypes.bool
};
export default PopularCard;

197
src/views/dashboard/Default/TotalGrowthBarChart.js
Unescape Escape View File

@ -19,121 +19,116 @@ import { gridSpacing } from 'store/constant';
import chartData from './chart-data/total-growth-bar-chart';
const status = [
{
value: 'today',
label: 'Today'
},
{
value: 'month',
label: 'This Month'
},
{
value: 'year',
label: 'This Year'
}
{
value: 'today',
label: 'Today'
},
{
value: 'month',
label: 'This Month'
},
{
value: 'year',
label: 'This Year'
}
];
// ==============================|| DASHBOARD DEFAULT - TOTAL GROWTH BAR CHART ||============================== //
const TotalGrowthBarChart = ({ isLoading }) => {
const [value, setValue] = React.useState('today');
const theme = useTheme();
const { navType } = useConfig();
const { primary } = theme.palette.text;
const darkLight = theme.palette.dark.light;
const grey200 = theme.palette.grey[200];
const grey500 = theme.palette.grey[500];
const [value, setValue] = React.useState('today');
const theme = useTheme();
const { navType } = useConfig();
const primary200 = theme.palette.primary[200];
const primaryDark = theme.palette.primary.dark;
const secondaryMain = theme.palette.secondary.main;
const secondaryLight = theme.palette.secondary.light;
const { primary } = theme.palette.text;
const darkLight = theme.palette.dark.light;
const grey200 = theme.palette.grey[200];
const grey500 = theme.palette.grey[500];
React.useEffect(() => {
const newChartData = {
...chartData.options,
colors: [primary200, primaryDark, secondaryMain, secondaryLight],
xaxis: {
labels: {
style: {
colors: [primary, primary, primary, primary, primary, primary, primary, primary, primary, primary, primary, primary]
}
}
},
yaxis: {
labels: {
style: {
colors: [primary]
}
}
},
grid: {
borderColor: navType === 'dark' ? darkLight + 20 : grey200
},
tooltip: {
theme: navType === 'dark' ? 'dark' : 'light'
},
legend: {
labels: {
colors: grey500
}
}
};
const primary200 = theme.palette.primary[200];
const primaryDark = theme.palette.primary.dark;
const secondaryMain = theme.palette.secondary.main;
const secondaryLight = theme.palette.secondary.light;
// do not load chart when loading
if (!isLoading) {
ApexCharts.exec(`bar-chart`, 'updateOptions', newChartData);
React.useEffect(() => {
const newChartData = {
...chartData.options,
colors: [primary200, primaryDark, secondaryMain, secondaryLight],
xaxis: {
labels: {
style: {
colors: [primary, primary, primary, primary, primary, primary, primary, primary, primary, primary, primary, primary]
}
}
},
yaxis: {
labels: {
style: {
colors: [primary]
}
}
},
grid: {
borderColor: navType === 'dark' ? darkLight + 20 : grey200
},
tooltip: {
theme: navType === 'dark' ? 'dark' : 'light'
},
legend: {
labels: {
colors: grey500
}
}, [navType, primary200, primaryDark, secondaryMain, secondaryLight, primary, darkLight, grey200, isLoading, grey500]);
}
};
return (
<>
{isLoading ? (
<SkeletonTotalGrowthBarChart />
) : (
<MainCard>
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Grid container direction="column" spacing={1}>
<Grid item>
<Typography variant="subtitle2">Total Growth</Typography>
</Grid>
<Grid item>
<Typography variant="h3">$2,324.00</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<TextField
id="standard-select-currency"
select
value={value}
onChange={(e) => setValue(e.target.value)}
>
{status.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Chart {...chartData} />
</Grid>
// do not load chart when loading
if (!isLoading) {
ApexCharts.exec(`bar-chart`, 'updateOptions', newChartData);
}
}, [navType, primary200, primaryDark, secondaryMain, secondaryLight, primary, darkLight, grey200, isLoading, grey500]);
return (
<>
{isLoading ? (
<SkeletonTotalGrowthBarChart />
) : (
<MainCard>
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Grid container direction="column" spacing={1}>
<Grid item>
<Typography variant="subtitle2">Total Growth</Typography>
</Grid>
<Grid item>
<Typography variant="h3">$2,324.00</Typography>
</Grid>
</MainCard>
)}
</>
);
</Grid>
</Grid>
<Grid item>
<TextField id="standard-select-currency" select value={value} onChange={(e) => setValue(e.target.value)}>
{status.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Chart {...chartData} />
</Grid>
</Grid>
</MainCard>
)}
</>
);
};
TotalGrowthBarChart.propTypes = {
isLoading: PropTypes.bool
isLoading: PropTypes.bool
};
export default TotalGrowthBarChart;

144
src/views/dashboard/Default/TotalIncomeDarkCard.js
Unescape Escape View File

@ -12,87 +12,87 @@ import TableChartOutlinedIcon from '@mui/icons-material/TableChartOutlined';
// styles
const CardWrapper = styled(MainCard)(({ theme }) => ({
backgroundColor: theme.palette.primary.dark,
color: theme.palette.primary.light,
overflow: 'hidden',
position: 'relative',
'&:after': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background: `linear-gradient(210.04deg, ${theme.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`,
borderRadius: '50%',
top: -30,
right: -180
},
'&:before': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background: `linear-gradient(140.9deg, ${theme.palette.primary[200]} -14.02%, rgba(144, 202, 249, 0) 77.58%)`,
borderRadius: '50%',
top: -160,
right: -130
}
backgroundColor: theme.palette.primary.dark,
color: theme.palette.primary.light,
overflow: 'hidden',
position: 'relative',
'&:after': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background: `linear-gradient(210.04deg, ${theme.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`,
borderRadius: '50%',
top: -30,
right: -180
},
'&:before': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background: `linear-gradient(140.9deg, ${theme.palette.primary[200]} -14.02%, rgba(144, 202, 249, 0) 77.58%)`,
borderRadius: '50%',
top: -160,
right: -130
}
}));
// ==============================|| DASHBOARD - TOTAL INCOME DARK CARD ||============================== //
const TotalIncomeDarkCard = ({ isLoading }) => {
const theme = useTheme();
const theme = useTheme();
return (
<>
{isLoading ? (
<TotalIncomeCard />
) : (
<CardWrapper border={false} content={false}>
<Box sx={{ p: 2 }}>
<List sx={{ py: 0 }}>
<ListItem alignItems="center" disableGutters sx={{ py: 0 }}>
<ListItemAvatar>
<Avatar
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.largeAvatar,
backgroundColor: theme.palette.primary[800],
color: '#fff'
}}
>
<TableChartOutlinedIcon fontSize="inherit" />
</Avatar>
</ListItemAvatar>
<ListItemText
sx={{
py: 0,
mt: 0.45,
mb: 0.45
}}
primary={
<Typography variant="h4" sx={{ color: '#fff' }}>
$203k
</Typography>
}
secondary={
<Typography variant="subtitle2" sx={{ color: 'primary.light', mt: 0.25 }}>
Total Income
</Typography>
}
/>
</ListItem>
</List>
</Box>
</CardWrapper>
)}
</>
);
return (
<>
{isLoading ? (
<TotalIncomeCard />
) : (
<CardWrapper border={false} content={false}>
<Box sx={{ p: 2 }}>
<List sx={{ py: 0 }}>
<ListItem alignItems="center" disableGutters sx={{ py: 0 }}>
<ListItemAvatar>
<Avatar
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.largeAvatar,
backgroundColor: theme.palette.primary[800],
color: '#fff'
}}
>
<TableChartOutlinedIcon fontSize="inherit" />
</Avatar>
</ListItemAvatar>
<ListItemText
sx={{
py: 0,
mt: 0.45,
mb: 0.45
}}
primary={
<Typography variant="h4" sx={{ color: '#fff' }}>
$203k
</Typography>
}
secondary={
<Typography variant="subtitle2" sx={{ color: 'primary.light', mt: 0.25 }}>
Total Income
</Typography>
}
/>
</ListItem>
</List>
</Box>
</CardWrapper>
)}
</>
);
};
TotalIncomeDarkCard.propTypes = {
isLoading: PropTypes.bool
isLoading: PropTypes.bool
};
export default TotalIncomeDarkCard;

145
src/views/dashboard/Default/TotalIncomeLightCard.js
Unescape Escape View File

@ -13,88 +13,87 @@ import StorefrontTwoToneIcon from '@mui/icons-material/StorefrontTwoTone';
// styles
const CardWrapper = styled(MainCard)(({ theme }) => ({
overflow: 'hidden',
position: 'relative',
'&:after': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background: `linear-gradient(210.04deg, ${theme.palette.warning.dark} -50.94%, rgba(144, 202, 249, 0) 83.49%)`,
borderRadius: '50%',
top: -30,
right: -180
},
'&:before': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background: `linear-gradient(140.9deg, ${theme.palette.warning.dark} -14.02%, rgba(144, 202, 249, 0) 70.50%)`,
borderRadius: '50%',
top: -160,
right: -130
}
overflow: 'hidden',
position: 'relative',
'&:after': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background: `linear-gradient(210.04deg, ${theme.palette.warning.dark} -50.94%, rgba(144, 202, 249, 0) 83.49%)`,
borderRadius: '50%',
top: -30,
right: -180
},
'&:before': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background: `linear-gradient(140.9deg, ${theme.palette.warning.dark} -14.02%, rgba(144, 202, 249, 0) 70.50%)`,
borderRadius: '50%',
top: -160,
right: -130
}
}));
// ==============================|| DASHBOARD - TOTAL INCOME LIGHT CARD ||============================== //
const TotalIncomeLightCard = ({ isLoading }) => {
const theme = useTheme();
const theme = useTheme();
return (
<>
{isLoading ? (
<TotalIncomeCard />
) : (
<CardWrapper border={false} content={false}>
<Box sx={{ p: 2 }}>
<List sx={{ py: 0 }}>
<ListItem alignItems="center" disableGutters sx={{ py: 0 }}>
<ListItemAvatar>
<Avatar
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.largeAvatar,
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.warning.light,
color: theme.palette.mode === 'dark' ? theme.palette.warning.dark : theme.palette.warning.dark
}}
>
<StorefrontTwoToneIcon fontSize="inherit" />
</Avatar>
</ListItemAvatar>
<ListItemText
sx={{
py: 0,
mt: 0.45,
mb: 0.45
}}
primary={<Typography variant="h4">$203k</Typography>}
secondary={
<Typography
variant="subtitle2"
sx={{
color: theme.palette.grey[500],
mt: 0.5
}}
>
Total Income
</Typography>
}
/>
</ListItem>
</List>
</Box>
</CardWrapper>
)}
</>
);
return (
<>
{isLoading ? (
<TotalIncomeCard />
) : (
<CardWrapper border={false} content={false}>
<Box sx={{ p: 2 }}>
<List sx={{ py: 0 }}>
<ListItem alignItems="center" disableGutters sx={{ py: 0 }}>
<ListItemAvatar>
<Avatar
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.largeAvatar,
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.warning.light,
color: theme.palette.mode === 'dark' ? theme.palette.warning.dark : theme.palette.warning.dark
}}
>
<StorefrontTwoToneIcon fontSize="inherit" />
</Avatar>
</ListItemAvatar>
<ListItemText
sx={{
py: 0,
mt: 0.45,
mb: 0.45
}}
primary={<Typography variant="h4">$203k</Typography>}
secondary={
<Typography
variant="subtitle2"
sx={{
color: theme.palette.grey[500],
mt: 0.5
}}
>
Total Income
</Typography>
}
/>
</ListItem>
</List>
</Box>
</CardWrapper>
)}
</>
);
};
TotalIncomeLightCard.propTypes = {
isLoading: PropTypes.bool
isLoading: PropTypes.bool
};
export default TotalIncomeLightCard;

292
src/views/dashboard/Default/TotalOrderLineChartCard.js
Unescape Escape View File

@ -20,168 +20,160 @@ import LocalMallOutlinedIcon from '@mui/icons-material/LocalMallOutlined';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
const CardWrapper = styled(MainCard)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.primary.dark,
color: '#fff',
overflow: 'hidden',
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.primary.dark,
color: '#fff',
overflow: 'hidden',
position: 'relative',
'&>div': {
position: 'relative',
'&>div': {
position: 'relative',
zIndex: 5
},
'&:after': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background:
theme.palette.mode === 'dark'
? `linear-gradient(210.04deg, ${theme.palette.primary.dark} -50.94%, rgba(144, 202, 249, 0) 95.49%)`
: theme.palette.primary[800],
borderRadius: '50%',
zIndex: 1,
top: -85,
right: -95,
[theme.breakpoints.down('sm')]: {
top: -105,
right: -140
}
},
'&:before': {
content: '""',
position: 'absolute',
zIndex: 1,
width: 210,
height: 210,
background:
theme.palette.mode === 'dark'
? `linear-gradient(140.9deg, ${theme.palette.primary.dark} -14.02%, rgba(144, 202, 249, 0) 82.50%)`
: theme.palette.primary[800],
borderRadius: '50%',
top: -125,
right: -15,
opacity: 0.5,
[theme.breakpoints.down('sm')]: {
top: -155,
right: -70
}
zIndex: 5
},
'&:after': {
content: '""',
position: 'absolute',
width: 210,
height: 210,
background:
theme.palette.mode === 'dark'
? `linear-gradient(210.04deg, ${theme.palette.primary.dark} -50.94%, rgba(144, 202, 249, 0) 95.49%)`
: theme.palette.primary[800],
borderRadius: '50%',
zIndex: 1,
top: -85,
right: -95,
[theme.breakpoints.down('sm')]: {
top: -105,
right: -140
}
},
'&:before': {
content: '""',
position: 'absolute',
zIndex: 1,
width: 210,
height: 210,
background:
theme.palette.mode === 'dark'
? `linear-gradient(140.9deg, ${theme.palette.primary.dark} -14.02%, rgba(144, 202, 249, 0) 82.50%)`
: theme.palette.primary[800],
borderRadius: '50%',
top: -125,
right: -15,
opacity: 0.5,
[theme.breakpoints.down('sm')]: {
top: -155,
right: -70
}
}
}));
// ==============================|| DASHBOARD - TOTAL ORDER LINE CHART CARD ||============================== //
const TotalOrderLineChartCard = ({ isLoading }) => {
const theme = useTheme();
const theme = useTheme();
const [timeValue, setTimeValue] = React.useState(false);
const handleChangeTime = (event, newValue) => {
setTimeValue(newValue);
};
const [timeValue, setTimeValue] = React.useState(false);
const handleChangeTime = (event, newValue) => {
setTimeValue(newValue);
};
return (
<>
{isLoading ? (
<SkeletonTotalOrderCard />
) : (
<CardWrapper border={false} content={false}>
<Box sx={{ p: 2.25 }}>
<Grid container direction="column">
<Grid item>
<Grid container justifyContent="space-between">
<Grid item>
<Avatar
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.largeAvatar,
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary[800],
color: '#fff',
mt: 1
}}
>
<LocalMallOutlinedIcon fontSize="inherit" />
</Avatar>
</Grid>
<Grid item>
<Button
disableElevation
variant={timeValue ? 'contained' : 'text'}
size="small"
sx={{ color: 'inherit' }}
onClick={(e) => handleChangeTime(e, true)}
>
Month
</Button>
<Button
disableElevation
variant={!timeValue ? 'contained' : 'text'}
size="small"
sx={{ color: 'inherit' }}
onClick={(e) => handleChangeTime(e, false)}
>
Year
</Button>
</Grid>
</Grid>
</Grid>
<Grid item sx={{ mb: 0.75 }}>
<Grid container alignItems="center">
<Grid item xs={6}>
<Grid container alignItems="center">
<Grid item>
{timeValue ? (
<Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>
$108
</Typography>
) : (
<Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>
$961
</Typography>
)}
</Grid>
<Grid item>
<Avatar
sx={{
...theme.typography.smallAvatar,
cursor: 'pointer',
backgroundColor: theme.palette.primary[200],
color: theme.palette.primary.dark
}}
>
<ArrowDownwardIcon fontSize="inherit" sx={{ transform: 'rotate3d(1, 1, 1, 45deg)' }} />
</Avatar>
</Grid>
<Grid item xs={12}>
<Typography
sx={{
fontSize: '1rem',
fontWeight: 500,
color:
theme.palette.mode === 'dark'
? theme.palette.text.secondary
: theme.palette.primary[200]
}}
>
Total Order
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
{timeValue ? <Chart {...ChartDataMonth} /> : <Chart {...ChartDataYear} />}
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</CardWrapper>
)}
</>
);
return (
<>
{isLoading ? (
<SkeletonTotalOrderCard />
) : (
<CardWrapper border={false} content={false}>
<Box sx={{ p: 2.25 }}>
<Grid container direction="column">
<Grid item>
<Grid container justifyContent="space-between">
<Grid item>
<Avatar
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.largeAvatar,
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary[800],
color: '#fff',
mt: 1
}}
>
<LocalMallOutlinedIcon fontSize="inherit" />
</Avatar>
</Grid>
<Grid item>
<Button
disableElevation
variant={timeValue ? 'contained' : 'text'}
size="small"
sx={{ color: 'inherit' }}
onClick={(e) => handleChangeTime(e, true)}
>
Month
</Button>
<Button
disableElevation
variant={!timeValue ? 'contained' : 'text'}
size="small"
sx={{ color: 'inherit' }}
onClick={(e) => handleChangeTime(e, false)}
>
Year
</Button>
</Grid>
</Grid>
</Grid>
<Grid item sx={{ mb: 0.75 }}>
<Grid container alignItems="center">
<Grid item xs={6}>
<Grid container alignItems="center">
<Grid item>
{timeValue ? (
<Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>$108</Typography>
) : (
<Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>$961</Typography>
)}
</Grid>
<Grid item>
<Avatar
sx={{
...theme.typography.smallAvatar,
cursor: 'pointer',
backgroundColor: theme.palette.primary[200],
color: theme.palette.primary.dark
}}
>
<ArrowDownwardIcon fontSize="inherit" sx={{ transform: 'rotate3d(1, 1, 1, 45deg)' }} />
</Avatar>
</Grid>
<Grid item xs={12}>
<Typography
sx={{
fontSize: '1rem',
fontWeight: 500,
color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : theme.palette.primary[200]
}}
>
Total Order
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
{timeValue ? <Chart {...ChartDataMonth} /> : <Chart {...ChartDataYear} />}
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</CardWrapper>
)}
</>
);
};
TotalOrderLineChartCard.propTypes = {
isLoading: PropTypes.bool
isLoading: PropTypes.bool
};
export default TotalOrderLineChartCard;

72
src/views/dashboard/Default/chart-data/bajaj-area-chart.js
Unescape Escape View File

@ -1,44 +1,44 @@
// ==============================|| DASHBOARD - BAJAJ AREA CHART ||============================== //
const chartData = {
type: 'area',
height: 95,
options: {
chart: {
id: 'support-chart',
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 1
},
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: () => 'Ticket '
}
},
marker: {
show: false
}
}
type: 'area',
height: 95,
options: {
chart: {
id: 'support-chart',
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 1
},
series: [
{
data: [0, 15, 10, 50, 30, 40, 25]
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: () => 'Ticket '
}
]
},
marker: {
show: false
}
}
},
series: [
{
data: [0, 15, 10, 50, 30, 40, 25]
}
]
};
export default chartData;

156
src/views/dashboard/Default/chart-data/total-growth-bar-chart.js
Unescape Escape View File

@ -1,86 +1,86 @@
// ==============================|| DASHBOARD - TOTAL GROWTH BAR CHART ||============================== //
const chartData = {
height: 480,
type: 'bar',
options: {
chart: {
id: 'bar-chart',
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}
],
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%'
}
},
xaxis: {
type: 'category',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
show: true,
fontFamily: `'Roboto', sans-serif`,
height: 480,
type: 'bar',
options: {
chart: {
id: 'bar-chart',
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: 20,
labels: {
useSeriesColors: false
},
markers: {
width: 16,
height: 16,
radius: 5
},
itemMargin: {
horizontal: 15,
vertical: 8
}
},
fill: {
type: 'solid'
},
dataLabels: {
enabled: false
},
grid: {
show: true
offsetX: -10,
offsetY: 0
}
}
}
],
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%'
}
},
series: [
{
name: 'Investment',
data: [35, 125, 35, 35, 35, 80, 35, 20, 35, 45, 15, 75]
},
{
name: 'Loss',
data: [35, 15, 15, 35, 65, 40, 80, 25, 15, 85, 25, 75]
},
{
name: 'Profit',
data: [35, 145, 35, 35, 20, 105, 100, 10, 65, 45, 30, 10]
},
{
name: 'Maintenance',
data: [0, 0, 75, 0, 0, 115, 0, 0, 0, 0, 150, 0]
}
]
xaxis: {
type: 'category',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
show: true,
fontFamily: `'Roboto', sans-serif`,
position: 'bottom',
offsetX: 20,
labels: {
useSeriesColors: false
},
markers: {
width: 16,
height: 16,
radius: 5
},
itemMargin: {
horizontal: 15,
vertical: 8
}
},
fill: {
type: 'solid'
},
dataLabels: {
enabled: false
},
grid: {
show: true
}
},
series: [
{
name: 'Investment',
data: [35, 125, 35, 35, 35, 80, 35, 20, 35, 45, 15, 75]
},
{
name: 'Loss',
data: [35, 15, 15, 35, 65, 40, 80, 25, 15, 85, 25, 75]
},
{
name: 'Profit',
data: [35, 145, 35, 35, 20, 105, 100, 10, 65, 45, 30, 10]
},
{
name: 'Maintenance',
data: [0, 0, 75, 0, 0, 115, 0, 0, 0, 0, 150, 0]
}
]
};
export default chartData;

92
src/views/dashboard/Default/chart-data/total-order-month-line-chart.js
Unescape Escape View File

@ -1,54 +1,54 @@
// ==============================|| DASHBOARD - TOTAL ORDER MONTH CHART ||============================== //
const chartData = {
type: 'line',
height: 90,
options: {
chart: {
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
colors: ['#fff'],
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
width: 3
},
yaxis: {
min: 0,
max: 100
},
tooltip: {
theme: 'dark',
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: () => 'Total Order'
}
},
marker: {
show: false
}
}
type: 'line',
height: 90,
options: {
chart: {
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
colors: ['#fff'],
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
width: 3
},
yaxis: {
min: 0,
max: 100
},
series: [
{
name: 'series1',
data: [45, 66, 41, 89, 25, 44, 9, 54]
tooltip: {
theme: 'dark',
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: () => 'Total Order'
}
]
},
marker: {
show: false
}
}
},
series: [
{
name: 'series1',
data: [45, 66, 41, 89, 25, 44, 9, 54]
}
]
};
export default chartData;

92
src/views/dashboard/Default/chart-data/total-order-year-line-chart.js
Unescape Escape View File

@ -1,54 +1,54 @@
// ==============================|| DASHBOARD - TOTAL ORDER YEAR CHART ||============================== //
const chartData = {
type: 'line',
height: 90,
options: {
chart: {
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
colors: ['#fff'],
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
width: 3
},
yaxis: {
min: 0,
max: 100
},
tooltip: {
theme: 'dark',
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: () => 'Total Order'
}
},
marker: {
show: false
}
}
type: 'line',
height: 90,
options: {
chart: {
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
colors: ['#fff'],
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
width: 3
},
yaxis: {
min: 0,
max: 100
},
series: [
{
name: 'series1',
data: [35, 44, 9, 54, 45, 66, 41, 69]
tooltip: {
theme: 'dark',
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: () => 'Total Order'
}
]
},
marker: {
show: false
}
}
},
series: [
{
name: 'series1',
data: [35, 44, 9, 54, 45, 66, 41, 69]
}
]
};
export default chartData;

70
src/views/dashboard/Default/index.js
Unescape Escape View File

@ -15,45 +15,45 @@ import { gridSpacing } from 'store/constant';
// ==============================|| DEFAULT DASHBOARD ||============================== //
const Dashboard = () => {
const [isLoading, setLoading] = useState(true);
useEffect(() => {
setLoading(false);
}, []);
const [isLoading, setLoading] = useState(true);
useEffect(() => {
setLoading(false);
}, []);
return (
return (
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<Grid container spacing={gridSpacing}>
<Grid item lg={4} md={6} sm={6} xs={12}>
<EarningCard isLoading={isLoading} />
</Grid>
<Grid item lg={4} md={6} sm={6} xs={12}>
<TotalOrderLineChartCard isLoading={isLoading} />
</Grid>
<Grid item lg={4} md={12} sm={12} xs={12}>
<Grid container spacing={gridSpacing}>
<Grid item sm={6} xs={12} md={6} lg={12}>
<TotalIncomeDarkCard isLoading={isLoading} />
</Grid>
<Grid item sm={6} xs={12} md={6} lg={12}>
<TotalIncomeLightCard isLoading={isLoading} />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid container spacing={gridSpacing}>
<Grid item xs={12} md={8}>
<TotalGrowthBarChart isLoading={isLoading} />
</Grid>
<Grid item xs={12} md={4}>
<PopularCard isLoading={isLoading} />
</Grid>
</Grid>
<Grid item lg={4} md={6} sm={6} xs={12}>
<EarningCard isLoading={isLoading} />
</Grid>
<Grid item lg={4} md={6} sm={6} xs={12}>
<TotalOrderLineChartCard isLoading={isLoading} />
</Grid>
<Grid item lg={4} md={12} sm={12} xs={12}>
<Grid container spacing={gridSpacing}>
<Grid item sm={6} xs={12} md={6} lg={12}>
<TotalIncomeDarkCard isLoading={isLoading} />
</Grid>
<Grid item sm={6} xs={12} md={6} lg={12}>
<TotalIncomeLightCard isLoading={isLoading} />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid container spacing={gridSpacing}>
<Grid item xs={12} md={8}>
<TotalGrowthBarChart isLoading={isLoading} />
</Grid>
<Grid item xs={12} md={4}>
<PopularCard isLoading={isLoading} />
</Grid>
</Grid>
);
</Grid>
</Grid>
);
};
export default Dashboard;

4
src/views/pages/authentication/AuthWrapper1.js → src/views/pages/authentication/AuthWrapper.js
Unescape Escape View File

@ -3,9 +3,9 @@ import { styled } from '@mui/material/styles';
// ==============================|| AUTHENTICATION 1 WRAPPER ||============================== //
const AuthWrapper1 = styled('div')(({ theme }) => ({
const AuthWrapper = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.primary.light,
minHeight: '100vh'
}));
export default AuthWrapper1;
export default AuthWrapper;

14
src/views/pages/authentication/AuthWrapper2.js
Unescape Escape View File

@ -1,14 +0,0 @@
// material-ui
import { styled } from '@mui/material/styles';
// ==============================|| AUTHENTICATION 1 WRAPPER ||============================== //
const AuthWrapper2 = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.background.paper,
minHeight: '100vh',
[theme.breakpoints.down('lg')]: {
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary.light
}
}));
export default AuthWrapper2;

129
src/views/pages/authentication/auth-forms/AuthLogin.js
Unescape Escape View File

@ -8,7 +8,6 @@ import {
Box,
Button,
Checkbox,
Divider,
FormControl,
FormControlLabel,
FormHelperText,
@ -18,8 +17,7 @@ import {
InputLabel,
OutlinedInput,
Stack,
Typography,
useMediaQuery
Typography
} from '@mui/material';
// third party
@ -27,7 +25,6 @@ import * as Yup from 'yup';
import { Formik } from 'formik';
// project imports
import useConfig from 'hooks/useConfig';
import useAuth from 'hooks/useAuth';
import useScriptRef from 'hooks/useScriptRef';
import AnimateButton from 'ui-component/extended/AnimateButton';
@ -36,26 +33,14 @@ import AnimateButton from 'ui-component/extended/AnimateButton';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import Google from 'assets/images/icons/social-google.svg';
// ============================|| FIREBASE - LOGIN ||============================ //
const FirebaseLogin = ({ loginProp, ...others }) => {
const theme = useTheme();
const { login } = useAuth();
const scriptedRef = useScriptRef();
const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
const { borderRadius } = useConfig();
const [checked, setChecked] = React.useState(true);
const { firebaseEmailPasswordSignIn, firebaseGoogleSignIn } = useAuth();
const googleHandler = async () => {
try {
await firebaseGoogleSignIn();
} catch (err) {
console.error(err);
}
};
const [showPassword, setShowPassword] = React.useState(false);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
@ -68,58 +53,6 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
return (
<>
<Grid container direction="column" justifyContent="center" spacing={2}>
<Grid item xs={12}>
<AnimateButton>
<Button
disableElevation
fullWidth
onClick={googleHandler}
size="large"
variant="outlined"
sx={{
color: 'grey.700',
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
borderColor: theme.palette.mode === 'dark' ? theme.palette.dark.light + 20 : theme.palette.grey[100]
}}
>
<Box sx={{ mr: { xs: 1, sm: 2, width: 20 } }}>
<img src={Google} alt="google" width={16} height={16} style={{ marginRight: matchDownSM ? 8 : 16 }} />
</Box>
Sign in with Google
</Button>
</AnimateButton>
</Grid>
<Grid item xs={12}>
<Box
sx={{
alignItems: 'center',
display: 'flex'
}}
>
<Divider sx={{ flexGrow: 1 }} orientation="horizontal" />
<Button
variant="outlined"
sx={{
cursor: 'unset',
m: 2,
py: 0.5,
px: 7,
borderColor:
theme.palette.mode === 'dark' ? `${theme.palette.dark.light + 20} !important` : `${theme.palette.grey[100]} !important`,
color: `${theme.palette.grey[900]} !important`,
fontWeight: 500,
borderRadius: `${borderRadius}px`
}}
disableRipple
disabled
>
OR
</Button>
<Divider sx={{ flexGrow: 1 }} orientation="horizontal" />
</Box>
</Grid>
<Grid item xs={12} container alignItems="center" justifyContent="center">
<Box sx={{ mb: 2 }}>
<Typography variant="subtitle1">Sign in with Email address</Typography>
@ -129,31 +62,17 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
<Formik
initialValues={{
email: 'info@codedthemes.com',
password: '123456',
userid: 'xitdev',
passwd: 'xitdev',
submit: null
}}
validationSchema={Yup.object().shape({
email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
password: Yup.string().max(255).required('Password is required')
userid: Yup.string().max(255).required('User ID is required'),
passwd: Yup.string().max(255).required('Password is required')
})}
onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
try {
await firebaseEmailPasswordSignIn(values.email, values.password).then(
() => {
// WARNING: do not set any formik state here as formik might be already destroyed here. You may get following error by doing so.
// Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.
// To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
// github issue: https://github.com/formium/formik/issues/2430
},
(err) => {
if (scriptedRef.current) {
setStatus({ success: false });
setErrors({ submit: err.message });
setSubmitting(false);
}
}
);
await login(values.userid, values.passwd);
} catch (err) {
console.error(err);
if (scriptedRef.current) {
@ -166,32 +85,32 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
>
{({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
<form noValidate onSubmit={handleSubmit} {...others}>
<FormControl fullWidth error={Boolean(touched.email && errors.email)} sx={{ ...theme.typography.customInput }}>
<InputLabel htmlFor="outlined-adornment-email-login">Email Address / Username</InputLabel>
<FormControl fullWidth error={Boolean(touched.userid && errors.userid)} sx={{ ...theme.typography.customInput }}>
<InputLabel htmlFor="userid">User ID</InputLabel>
<OutlinedInput
id="outlined-adornment-email-login"
type="email"
value={values.email}
name="email"
id="userid"
type="text"
value={values.userid}
name="userid"
onBlur={handleBlur}
onChange={handleChange}
label="Email Address / Username"
label="User ID"
inputProps={{}}
/>
{touched.email && errors.email && (
<FormHelperText error id="standard-weight-helper-text-email-login">
{errors.email}
{touched.userid && errors.userid && (
<FormHelperText error id="standard-weight-helper-text-userid-login">
{errors.userid}
</FormHelperText>
)}
</FormControl>
<FormControl fullWidth error={Boolean(touched.password && errors.password)} sx={{ ...theme.typography.customInput }}>
<InputLabel htmlFor="outlined-adornment-password-login">Password</InputLabel>
<FormControl fullWidth error={Boolean(touched.passwd && errors.passwd)} sx={{ ...theme.typography.customInput }}>
<InputLabel htmlFor="passwd">Password</InputLabel>
<OutlinedInput
id="outlined-adornment-password-login"
id="passwd"
type={showPassword ? 'text' : 'password'}
value={values.password}
name="password"
value={values.passwd}
name="passwd"
onBlur={handleBlur}
onChange={handleChange}
endAdornment={
@ -210,9 +129,9 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
label="Password"
inputProps={{}}
/>
{touched.password && errors.password && (
{touched.passwd && errors.passwd && (
<FormHelperText error id="standard-weight-helper-text-password-login">
{errors.password}
{errors.passwd}
</FormHelperText>
)}
</FormControl>

8
src/views/pages/authentication/authentication3/ForgotPassword3.js → src/views/pages/authentication/authentication/ForgotPassword.js
Unescape Escape View File

@ -5,7 +5,7 @@ import { useTheme } from '@mui/material/styles';
import { Divider, Grid, Typography, useMediaQuery } from '@mui/material';
// project imports
import AuthWrapper1 from '../AuthWrapper1';
import AuthWrapper from '../AuthWrapper';
import AuthCardWrapper from '../AuthCardWrapper';
import Logo from 'ui-component/Logo';
import AuthForgotPassword from '../auth-forms/AuthForgotPassword';
@ -20,7 +20,7 @@ const ForgotPassword = () => {
const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
return (
<AuthWrapper1>
<AuthWrapper>
<Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}>
<Grid item xs={12}>
<Grid container justifyContent="center" alignItems="center" sx={{ minHeight: 'calc(100vh - 68px)' }}>
@ -56,7 +56,7 @@ const ForgotPassword = () => {
<Grid item container direction="column" alignItems="center" xs={12}>
<Typography
component={Link}
to={isLoggedIn ? '/pages/login/login3' : '/login'}
to={isLoggedIn ? '/pages/login/login' : '/login'}
variant="subtitle1"
sx={{ textDecoration: 'none' }}
>
@ -73,7 +73,7 @@ const ForgotPassword = () => {
<AuthFooter />
</Grid>
</Grid>
</AuthWrapper1>
</AuthWrapper>
);
};

27
src/views/pages/authentication/authentication3/Login3.js → src/views/pages/authentication/authentication/Login.js
Unescape Escape View File

@ -1,11 +1,10 @@
import { Link } from 'react-router-dom';
// material-ui
import { useTheme } from '@mui/material/styles';
import { Divider, Grid, Stack, Typography, useMediaQuery } from '@mui/material';
import { Divider, Grid, Typography } from '@mui/material';
// project imports
import AuthWrapper1 from '../AuthWrapper1';
import AuthWrapper from '../AuthWrapper';
import AuthCardWrapper from '../AuthCardWrapper';
import AuthLogin from '../auth-forms/AuthLogin';
import Logo from 'ui-component/Logo';
@ -17,12 +16,10 @@ import useAuth from 'hooks/useAuth';
// ================================|| AUTH3 - LOGIN ||================================ //
const Login = () => {
const theme = useTheme();
const { isLoggedIn } = useAuth();
const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
return (
<AuthWrapper1>
<AuthWrapper>
<Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}>
<Grid item xs={12}>
<Grid container justifyContent="center" alignItems="center" sx={{ minHeight: 'calc(100vh - 68px)' }}>
@ -34,20 +31,6 @@ const Login = () => {
<Logo />
</Link>
</Grid>
<Grid item xs={12}>
<Grid container direction={matchDownSM ? 'column-reverse' : 'row'} alignItems="center" justifyContent="center">
<Grid item>
<Stack alignItems="center" justifyContent="center" spacing={1}>
<Typography color={theme.palette.secondary.main} gutterBottom variant={matchDownSM ? 'h3' : 'h2'}>
Hi, Welcome Back
</Typography>
<Typography variant="caption" fontSize="16px" textAlign={matchDownSM ? 'center' : 'inherit'}>
Enter your credentials to continue
</Typography>
</Stack>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<AuthLogin />
</Grid>
@ -58,7 +41,7 @@ const Login = () => {
<Grid item container direction="column" alignItems="center" xs={12}>
<Typography
component={Link}
to={isLoggedIn ? '/pages/register/register3' : '/register'}
to={isLoggedIn ? '/pages/register/register' : '/register'}
variant="subtitle1"
sx={{ textDecoration: 'none' }}
>
@ -75,7 +58,7 @@ const Login = () => {
<AuthFooter />
</Grid>
</Grid>
</AuthWrapper1>
</AuthWrapper>
);
};

6
src/views/pages/authentication/authentication3/Register3.js → src/views/pages/authentication/authentication/Register.js
Unescape Escape View File

@ -5,7 +5,7 @@ import { useTheme } from '@mui/material/styles';
import { Divider, Grid, Stack, Typography, useMediaQuery } from '@mui/material';
// project imports
import AuthWrapper1 from '../AuthWrapper1';
import AuthWrapper from '../AuthWrapper';
import AuthCardWrapper from '../AuthCardWrapper';
import Logo from 'ui-component/Logo';
import AuthRegister from '../auth-forms/AuthRegister';
@ -22,7 +22,7 @@ const Register = () => {
const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
return (
<AuthWrapper1>
<AuthWrapper>
<Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}>
<Grid item xs={12}>
<Grid container justifyContent="center" alignItems="center" sx={{ minHeight: 'calc(100vh - 68px)' }}>
@ -75,7 +75,7 @@ const Register = () => {
<AuthFooter />
</Grid>
</Grid>
</AuthWrapper1>
</AuthWrapper>
);
};
Write Preview
Loading…
Cancel
Save