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

4
.env
Unescape Escape View File

@ -1 +1,3 @@
REACT_APP_VERSION = v3.1.0 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 begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
<!--
//TODO: production build ???
<script type="text/javascript"> <script type="text/javascript">
(function (c, l, a, r, i, t, y) { (function (c, l, a, r, i, t, y) {
c[a] = c[a] =
@ -84,6 +85,7 @@
y.parentNode.insertBefore(t, y); y.parentNode.insertBefore(t, y);
})(window, document, 'clarity', 'script', '6sbb1vpcjo'); })(window, document, 'clarity', 'script', '6sbb1vpcjo');
</script> </script>
-->
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X1LG1CJ1GG"></script> <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'; import Swal from 'sweetalert2';
type CustomResponseFormat<T = any> = { type CustomResponseFormat<T = any> = {
response: T; // e<T>; response: T, // e<T>;
refreshedToken?: string; refreshedToken?: string
}; };
export interface CustomInstance extends AxiosInstance { export interface CustomInstance extends AxiosInstance {
interceptors: { interceptors: {
request: AxiosInterceptorManager<AxiosRequestConfig>; request: AxiosInterceptorManager<AxiosRequestConfig>,
response: AxiosInterceptorManager<AxiosResponse<CustomResponseFormat>>; response: AxiosInterceptorManager<AxiosResponse<CustomResponseFormat>>
}; };
getUri(config?: AxiosRequestConfig): string; 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 { BOARD_LIST_URL } from 'commons/ApiUrl';
import axios from 'utils/axios'; import axios from 'utils/axios';
import { IBoard, IParam } from 'types/Data';
import { IApiPageResponse } from 'types/api';
import { AxiosResponse } from 'axios';
class BoardService { class BoardService {
getBoardList = (params) => getBoardList = (params) =>

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

@ -112,7 +112,7 @@ const XitCmm = {
initalValue: T, initalValue: T,
validator?: (value: string) => boolean validator?: (value: string) => boolean
): [T, Dispatch<SetStateAction<T>>, (e?: React.ChangeEvent<HTMLInputElement>) => void] { ): [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( const changer = useCallback(
(e) => { (e) => {
const v = e.target.value; 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' 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, // 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' // like '/berry-material-react/react/default'
export const BASE_PATH = ''; export const BASE_PATH = '';

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

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

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

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

2
src/menu-items/index.js
Unescape Escape View File

@ -8,4 +8,4 @@ const menuItems = {
items: [dashboard, opst, other] items: [dashboard, opst, other]
}; };
export default menuItems; export default menuItems;

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

@ -7,9 +7,9 @@ import NavMotion from 'layout/NavMotion';
import Loadable from 'ui-component/Loadable'; import Loadable from 'ui-component/Loadable';
// login routing // login routing
const AuthLogin = Loadable(lazy(() => import('views/pages/authentication/authentication3/Login3'))); const AuthLogin = Loadable(lazy(() => import('views/pages/authentication/authentication/Login')));
const AuthRegister = Loadable(lazy(() => import('views/pages/authentication/authentication3/Register3'))); const AuthRegister = Loadable(lazy(() => import('views/pages/authentication/authentication/Register')));
const AuthForgotPassword = Loadable(lazy(() => import('views/pages/authentication/authentication3/ForgotPassword3'))); const AuthForgotPassword = Loadable(lazy(() => import('views/pages/authentication/authentication/ForgotPassword')));
// ==============================|| AUTH ROUTING ||============================== // // ==============================|| 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 // sample page routing
const SamplePage = Loadable(lazy(() => import('views/sample-page'))); 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 ||============================== // // ==============================|| MAIN ROUTING ||============================== //
@ -19,8 +25,20 @@ const MainRoutes = {
), ),
children: [ children: [
{ {
path: '/', path: '/dashboard/default',
element: <SamplePage /> element: <DashboardDefault />
},
{
path: '/dashboard/analytics',
element: <DashboardAnalytics />
},
{
path: '/publicBoard',
element: <PublicBoard />
},
{
path: '/board',
element: <Board />
}, },
{ {
path: '/sample-page', path: '/sample-page',

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

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

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

@ -5,36 +5,75 @@
import axios from 'axios'; import axios from 'axios';
import Swal from 'sweetalert2'; import Swal from 'sweetalert2';
const axiosService = axios.create({ const axiosService = axios.create({
baseURL: process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL : '', baseURL: process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL : '',
withCredentials: process.env.NODE_ENV === 'development', // 개발시만 사용 : crossdomain withCredentials: process.env.NODE_ENV === 'development', // 개발시만 사용 : crossdomain
timeout: Number(process.env.REACT_APP_SERVER_TIMEOUT) timeout: Number(process.env.REACT_APP_SERVER_TIMEOUT)
// headers: { // headers: {
// 'Content-Type': 'application/json' // 'Content-Type': 'application/json'
// // AUTH_HEADER_NAME: accessToken // // AUTH_HEADER_NAME: accessToken
// } // }
// params: {key: key} // 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 * before axios request
*/ */
axiosService.interceptors.request.use( axiosService.interceptors.request.use(
(config) => { (config) => {
Swal.fire({ Swal.fire({
title: 'Please Wait ...', title: 'Please Wait ...',
// html: '', // html: '',
// imageUrl: // imageUrl:
// timer: 10000, // timer: 10000,
didOpen: () => Swal.showLoading() didOpen: () => Swal.showLoading()
}).then((r) => {}); }).then((r) => r);
return config; return config;
}, },
({ config, request, response, ...error }) => { ({ config, request, response, ...error }) => {
console.error('========== ApiService.request error Data =========='); console.error('========== ApiService.request error Data ==========');
return alertError(config, request, response, error); return alertError(config, request, response, error);
} }
); );
/* /*
@ -49,75 +88,27 @@ axiosServices.interceptors.response.use(
* after axios response * after axios response
*/ */
axiosService.interceptors.response.use( axiosService.interceptors.response.use(
(response) => { (response) => {
Swal.close(); Swal.close();
if (!response.data.success) { if (!response.data.success) {
Swal.fire({ Swal.fire({
icon: 'error', icon: 'error',
title: 'Api Error', title: 'Api Error',
html: `${response.data.message}`, html: `${response.data.message}`,
// imageUrl: // imageUrl:
timer: 5000 timer: 5000
}).then((r) => {}); }).then((r) => r);
console.log(response); console.log(response);
} }
return Promise.resolve(response.data); return Promise.resolve(response.data);
}, },
({ config, request, response, ...error }) => { ({ config, request, response, ...error }) => {
console.error('========== ApiService.response Error Data =========='); console.error('========== ApiService.response Error Data ==========');
alertError(config, request, response, error); alertError(config, request, response, error);
// error 데이타 return // error 데이타 return
// return response.data; // return response.data;
return error; return error;
} }
); );
/** export default axiosService;
* 에러 처리
* 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;

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 // material-ui
import { import { Button, Divider, FormControl, FormControlLabel, Grid, OutlinedInput, Radio, RadioGroup } from '@mui/material';
Button,
Divider,
FormControl,
FormControlLabel,
FormHelperText,
FormLabel,
Grid,
InputAdornment,
OutlinedInput,
Radio,
RadioGroup,
TextField,
Typography
} from '@mui/material';
// assets // assets
import { IconSearch } from '@tabler/icons'; import { IconSearch } from '@tabler/icons';
import LinkTwoToneIcon from '@mui/icons-material/LinkTwoTone';
import LockTwoToneIcon from '@mui/icons-material/LockTwoTone';
// berry ui // berry ui
import MainCard from 'ui-component/cards/MainCard'; import MainCard from 'ui-component/cards/MainCard';
import { gridSpacing } from 'store/constant';
import { useDispatch, useSelector } from 'store'; import { useDispatch, useSelector } from 'store';
import { getDetailCards, filterDetailCards } from 'store/slices/user';
// project imports // project imports
import MuiGridList from 'ui-component/MuiGridList'; 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'; import boardService from 'apis/BoardService';
const Index = () => { const Index = () => {
@ -59,7 +37,7 @@ const Index = () => {
// loading: false // loading: false
}); });
const columns: GridColumns = [ const columns = [
{ headerName: '게시판코드', field: 'ciCode' }, { headerName: '게시판코드', field: 'ciCode' },
{ headerName: '글번호', field: 'ciContentno' }, { headerName: '글번호', field: 'ciContentno' },
{ headerName: '제목', field: 'ciTitle', editable: true }, { headerName: '제목', field: 'ciTitle', editable: true },
@ -91,7 +69,7 @@ const Index = () => {
field: `ciIp` field: `ciIp`
} }
]; ];
const handleSearch = async (event: any) => { const handleSearch = async (event) => {
console.log('~~~'); console.log('~~~');
if (event.type === 'keydown' && event.key === 'Enter') { if (event.type === 'keydown' && event.key === 'Enter') {
const newString = event?.target.value; 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) => { const res = boardService.getBoardList(params).then((response) => {
if (response && response.data) { if (response && response.data) {
// setTotalCount(response?.count); // 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 // material-ui
import { Button, Divider, FormControlLabel, Grid, InputAdornment, Radio, RadioGroup, TextField } from '@mui/material'; 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 // berry ui
import MainCard from 'ui-component/cards/MainCard'; import MainCard from 'ui-component/cards/MainCard';
import { useDispatch, useSelector } from 'store'; import { useDispatch } from 'store';
import { getDetailCards, filterDetailCards } from 'store/slices/user'; import { getDetailCards, filterDetailCards } from 'store/slices/user';
// project imports // project imports
import MuiGridList from 'ui-component/MuiGridList'; import MuiGridList from 'ui-component/MuiGridList';
import { GridColumns } from '@mui/x-data-grid';
import InputLabel from 'ui-component/extended/Form/InputLabel'; import InputLabel from 'ui-component/extended/Form/InputLabel';
const Index = () => { const Index = () => {
@ -39,7 +38,7 @@ const Index = () => {
// loading: false // loading: false
}); });
const columns: GridColumns = [ const columns = [
{ headerName: '게시판코드', field: 'ciCode' }, { headerName: '게시판코드', field: 'ciCode' },
{ headerName: '글번호', field: 'ciContentno' }, { headerName: '글번호', field: 'ciContentno' },
{ headerName: '제목', field: 'ciTitle', editable: true }, { 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 // table data
function createData(image, subject, dept, date) { function createData(image, subject, dept, date) {
return { image, subject, dept, date }; return { image, subject, dept, date };
} }
const rows = [ const rows = [
createData(Flag1, 'Germany', 'Angelina Jolly', '56.23%'), createData(Flag1, 'Germany', 'Angelina Jolly', '56.23%'),
createData(Flag2, 'USA', 'John Deo', '25.23%'), createData(Flag2, 'USA', 'John Deo', '25.23%'),
createData(Flag3, 'Australia', 'Jenifer Vintage', '12.45%'), createData(Flag3, 'Australia', 'Jenifer Vintage', '12.45%'),
createData(Flag4, 'United Kingdom', 'Lori Moore', '8.65%'), createData(Flag4, 'United Kingdom', 'Lori Moore', '8.65%'),
createData(Flag5, 'Brazil', 'Allianz Dacron', '3.56%'), createData(Flag5, 'Brazil', 'Allianz Dacron', '3.56%'),
createData(Flag1, 'Australia', 'Jenifer Vintage', '12.45%'), createData(Flag1, 'Australia', 'Jenifer Vintage', '12.45%'),
createData(Flag3, 'USA', 'John Deo', '25.23%'), createData(Flag3, 'USA', 'John Deo', '25.23%'),
createData(Flag5, 'Australia', 'Jenifer Vintage', '12.45%'), createData(Flag5, 'Australia', 'Jenifer Vintage', '12.45%'),
createData(Flag2, 'United Kingdom', 'Lori Moore', '8.65%') createData(Flag2, 'United Kingdom', 'Lori Moore', '8.65%')
]; ];
// =========================|| DASHBOARD ANALYTICS - LATEST CUSTOMERS TABLE CARD ||========================= // // =========================|| DASHBOARD ANALYTICS - LATEST CUSTOMERS TABLE CARD ||========================= //
const LatestCustomerTableCard = ({ title }) => ( const LatestCustomerTableCard = ({ title }) => (
<MainCard title={title} content={false}> <MainCard title={title} content={false}>
<PerfectScrollbar style={{ height: 345, padding: 0 }}> <PerfectScrollbar style={{ height: 345, padding: 0 }}>
<TableContainer> <TableContainer>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell sx={{ pl: 3 }}>#</TableCell> <TableCell sx={{ pl: 3 }}>#</TableCell>
<TableCell>Country</TableCell> <TableCell>Country</TableCell>
<TableCell>Name</TableCell> <TableCell>Name</TableCell>
<TableCell align="right" sx={{ pr: 3 }}> <TableCell align="right" sx={{ pr: 3 }}>
Average Average
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{rows.map((row, index) => ( {rows.map((row, index) => (
<TableRow hover key={index}> <TableRow hover key={index}>
<TableCell sx={{ pl: 3 }}> <TableCell sx={{ pl: 3 }}>
<CardMedia component="img" image={row.image} title="image" sx={{ width: 30, height: 'auto' }} /> <CardMedia component="img" image={row.image} title="image" sx={{ width: 30, height: 'auto' }} />
</TableCell> </TableCell>
<TableCell>{row.subject}</TableCell> <TableCell>{row.subject}</TableCell>
<TableCell>{row.dept}</TableCell> <TableCell>{row.dept}</TableCell>
<TableCell align="right" sx={{ pr: 3 }}> <TableCell align="right" sx={{ pr: 3 }}>
{row.date} {row.date}
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
</PerfectScrollbar> </PerfectScrollbar>
<Divider /> <Divider />
<CardActions sx={{ justifyContent: 'flex-end' }}> <CardActions sx={{ justifyContent: 'flex-end' }}>
<Button variant="text" size="small"> <Button variant="text" size="small">
View all Latest Customers View all Latest Customers
</Button> </Button>
</CardActions> </CardActions>
</MainCard> </MainCard>
); );
LatestCustomerTableCard.propTypes = { LatestCustomerTableCard.propTypes = {
title: PropTypes.string title: PropTypes.string
}; };
export default LatestCustomerTableCard; 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 ||=========================== // // ===========================|| DASHBOARD ANALYTICS - MARKET SHARE AREA CHART CARD ||=========================== //
const MarketShareAreaChartCard = () => { const MarketShareAreaChartCard = () => {
const theme = useTheme(); const theme = useTheme();
const { navType } = useConfig(); const { navType } = useConfig();
const secondaryMain = theme.palette.secondary.main; const secondaryMain = theme.palette.secondary.main;
const errorMain = theme.palette.error.main; const errorMain = theme.palette.error.main;
const primaryDark = theme.palette.primary.dark; const primaryDark = theme.palette.primary.dark;
React.useEffect(() => { React.useEffect(() => {
const newChartData = { const newChartData = {
...chartData.options, ...chartData.options,
colors: [secondaryMain, errorMain, primaryDark], colors: [secondaryMain, errorMain, primaryDark],
tooltip: { tooltip: {
theme: navType === 'dark' ? 'dark' : 'light' theme: navType === 'dark' ? 'dark' : 'light'
} }
}; };
ApexCharts.exec(`market-share-area-chart`, 'updateOptions', newChartData); ApexCharts.exec(`market-share-area-chart`, 'updateOptions', newChartData);
}, [navType, secondaryMain, errorMain, primaryDark]); }, [navType, secondaryMain, errorMain, primaryDark]);
return ( return (
<MainCard sx={{ '&>div': { p: 0, pb: '0px !important' } }}> <MainCard sx={{ '&>div': { p: 0, pb: '0px !important' } }}>
<Box <Box
sx={{ sx={{
p: 3 p: 3
}} }}
> >
<Grid container direction="column" spacing={3}> <Grid container direction="column" spacing={3}>
<Grid item container spacing={1} alignItems="center"> <Grid item container spacing={1} alignItems="center">
<Grid item> <Grid item>
<Typography variant="h3">Market Share</Typography> <Typography variant="h3">Market Share</Typography>
</Grid> </Grid>
<Grid item xs zeroMinWidth /> <Grid item xs zeroMinWidth />
<Grid item> <Grid item>
<TrendingDownIcon fontSize="large" color="error" /> <TrendingDownIcon fontSize="large" color="error" />
</Grid> </Grid>
<Grid item> <Grid item>
<Typography variant="h3">27, 695.65</Typography> <Typography variant="h3">27, 695.65</Typography>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Typography sx={{ mt: -2.5, fontWeight: 400 }} color="inherit" variant="h5"> <Typography sx={{ mt: -2.5, fontWeight: 400 }} color="inherit" variant="h5">
Department wise monthly sales report Department wise monthly sales report
</Typography> </Typography>
</Grid> </Grid>
<Grid item container justifyContent="space-around" alignItems="center" spacing={3}> <Grid item container justifyContent="space-around" alignItems="center" spacing={3}>
<Grid item> <Grid item>
<Grid container alignItems="center" spacing={1}> <Grid container alignItems="center" spacing={1}>
<Grid item> <Grid item>
<Typography <Typography
sx={{ sx={{
width: 40, width: 40,
height: 40, height: 40,
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
borderRadius: '12px', borderRadius: '12px',
padding: 1, padding: 1,
backgroundColor: backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.secondary.light
theme.palette.mode === 'dark' }}
? theme.palette.background.default >
: theme.palette.secondary.light <IconBrandFacebook stroke={1.5} />
}} </Typography>
>
<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>
</Grid> </Grid>
</Box> <Grid item sm zeroMinWidth>
<Chart {...chartData} /> <Typography variant="h4">+45.36%</Typography>
</MainCard> </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; 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 ||=========================== // // ===========================|| DASHBOARD ANALYTICS - TOTAL REVENUE CARD ||=========================== //
const TotalRevenueCard = ({ title }) => { const TotalRevenueCard = ({ title }) => {
const successSX = { color: 'success.dark' }; const successSX = { color: 'success.dark' };
const errorSX = { color: 'error.main' }; const errorSX = { color: 'error.main' };
return ( return (
<MainCard title={title} content={false}> <MainCard title={title} content={false}>
<PerfectScrollbar style={{ height: 370 }}> <PerfectScrollbar style={{ height: 370 }}>
<List <List
component="nav" component="nav"
aria-label="main mailbox folders" aria-label="main mailbox folders"
sx={{ sx={{
'& svg': { '& svg': {
width: 32, width: 32,
my: -0.75, my: -0.75,
ml: -0.75, ml: -0.75,
mr: 0.75 mr: 0.75
} }
}} }}
> >
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<ArrowDropUpIcon sx={successSX} /> <ArrowDropUpIcon sx={successSX} />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={ primary={
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Bitcoin</span> <span>Bitcoin</span>
<Typography sx={successSX}>+ $145.85</Typography> <Typography sx={successSX}>+ $145.85</Typography>
</Stack> </Stack>
} }
/> />
</ListItemButton> </ListItemButton>
<Divider /> <Divider />
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<ArrowDropDownIcon sx={errorSX} /> <ArrowDropDownIcon sx={errorSX} />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={ primary={
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ethereum</span> <span>Ethereum</span>
<Typography sx={errorSX}>- $6.368</Typography> <Typography sx={errorSX}>- $6.368</Typography>
</Stack> </Stack>
} }
/> />
</ListItemButton> </ListItemButton>
<Divider /> <Divider />
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<ArrowDropUpIcon sx={successSX} /> <ArrowDropUpIcon sx={successSX} />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={ primary={
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ripple</span> <span>Ripple</span>
<Typography sx={successSX}>+ $458.63</Typography> <Typography sx={successSX}>+ $458.63</Typography>
</Stack> </Stack>
} }
/> />
</ListItemButton> </ListItemButton>
<Divider /> <Divider />
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<ArrowDropDownIcon sx={errorSX} /> <ArrowDropDownIcon sx={errorSX} />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={ primary={
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Neo</span> <span>Neo</span>
<Typography sx={errorSX}>- $5.631</Typography> <Typography sx={errorSX}>- $5.631</Typography>
</Stack> </Stack>
} }
/> />
</ListItemButton> </ListItemButton>
<Divider /> <Divider />
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<ArrowDropDownIcon sx={errorSX} /> <ArrowDropDownIcon sx={errorSX} />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={ primary={
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ethereum</span> <span>Ethereum</span>
<Typography sx={errorSX}>- $6.368</Typography> <Typography sx={errorSX}>- $6.368</Typography>
</Stack> </Stack>
} }
/> />
</ListItemButton> </ListItemButton>
<Divider /> <Divider />
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<ArrowDropUpIcon sx={successSX} /> <ArrowDropUpIcon sx={successSX} />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={ primary={
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ripple</span> <span>Ripple</span>
<Typography sx={successSX}>+ $458.63</Typography> <Typography sx={successSX}>+ $458.63</Typography>
</Stack> </Stack>
} }
/> />
</ListItemButton> </ListItemButton>
<Divider /> <Divider />
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<ArrowDropDownIcon sx={errorSX} /> <ArrowDropDownIcon sx={errorSX} />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={ primary={
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Neo</span> <span>Neo</span>
<Typography sx={errorSX}>- $5.631</Typography> <Typography sx={errorSX}>- $5.631</Typography>
</Stack> </Stack>
} }
/> />
</ListItemButton> </ListItemButton>
<Divider /> <Divider />
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<ArrowDropDownIcon sx={errorSX} /> <ArrowDropDownIcon sx={errorSX} />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={ primary={
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ethereum</span> <span>Ethereum</span>
<Typography sx={errorSX}>- $6.368</Typography> <Typography sx={errorSX}>- $6.368</Typography>
</Stack> </Stack>
} }
/> />
</ListItemButton> </ListItemButton>
<Divider /> <Divider />
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<ArrowDropUpIcon sx={successSX} /> <ArrowDropUpIcon sx={successSX} />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={ primary={
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Ripple</span> <span>Ripple</span>
<Typography sx={successSX}>+ $458.63</Typography> <Typography sx={successSX}>+ $458.63</Typography>
</Stack> </Stack>
} }
/> />
</ListItemButton> </ListItemButton>
<Divider /> <Divider />
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<ArrowDropDownIcon sx={errorSX} /> <ArrowDropDownIcon sx={errorSX} />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={ primary={
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" justifyContent="space-between" alignItems="center">
<span>Neo</span> <span>Neo</span>
<Typography sx={errorSX}>- $5.631</Typography> <Typography sx={errorSX}>- $5.631</Typography>
</Stack> </Stack>
} }
/> />
</ListItemButton> </ListItemButton>
</List> </List>
</PerfectScrollbar> </PerfectScrollbar>
</MainCard> </MainCard>
); );
}; };
TotalRevenueCard.propTypes = { TotalRevenueCard.propTypes = {
title: PropTypes.string title: PropTypes.string
}; };
export default TotalRevenueCard; 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 ||============================== // // ==============================|| DASHBOARD - MARKET SHARE AREA CHART ||============================== //
const chartData = { const chartData = {
height: 200, height: 200,
type: 'area', type: 'area',
options: { options: {
chart: { chart: {
id: 'market-share-area-chart', id: 'market-share-area-chart',
toolbar: { toolbar: {
show: false show: false
}, },
zoom: { zoom: {
enabled: false enabled: false
}, },
sparkline: { sparkline: {
enabled: true 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
}
}
}, },
series: [ dataLabels: {
{ enabled: false
name: 'Youtube', },
data: [10, 90, 65, 85, 40, 80, 30] stroke: {
}, curve: 'smooth',
{ width: 2
name: 'Facebook', },
data: [50, 30, 25, 15, 60, 10, 25] fill: {
}, type: 'gradient',
{ gradient: {
name: 'Twitter', shadeIntensity: 1,
data: [5, 50, 40, 55, 20, 40, 20] 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; 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 ||============================== // // ==============================|| ANALYTICS DASHBOARD ||============================== //
const Analytics = () => { const Analytics = () => {
const theme = useTheme(); const theme = useTheme();
const matchDownXs = useMediaQuery(theme.breakpoints.down('sm')); const matchDownXs = useMediaQuery(theme.breakpoints.down('sm'));
const blockSX = { const blockSX = {
p: 2.5, p: 2.5,
borderLeft: '1px solid ', borderLeft: '1px solid ',
borderBottom: '1px solid ', borderBottom: '1px solid ',
borderLeftColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[200], 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] 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 container spacing={gridSpacing}>
<Grid item xs={12} lg={8} md={6}> <Grid item xs={12}>
<Grid container spacing={gridSpacing}> <MarketShareAreaChartCard />
<Grid item xs={12}> </Grid>
<MarketShareAreaChartCard /> <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>
<Grid item xs={12} lg={6}> <Grid item sm zeroMinWidth>
<RevenueCard <Typography variant="h5" align="center">
primary="Revenue" 1000
secondary="$42,562" </Typography>
content="$50,032 Last Month" <Typography variant="subtitle2" align="center">
iconPrimary={MonetizationOnTwoToneIcon} SHARES
color={theme.palette.secondary.main} </Typography>
/>
</Grid> </Grid>
<Grid item xs={12} lg={6}> </Grid>
<RevenueCard </Grid>
primary="Orders Received" <Grid item xs={12} sm={6} sx={blockSX}>
secondary="486" <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
content="20% Increase" <Grid item>
iconPrimary={AccountCircleTwoTone} <IconAccessPoint stroke={1.5} />
color={theme.palette.primary.main}
/>
</Grid> </Grid>
<Grid item xs={12}> <Grid item sm zeroMinWidth>
<LatestCustomerTableCard title="Latest Customers" /> <Typography variant="h5" align="center">
600
</Typography>
<Typography variant="subtitle2" align="center">
NETWORK
</Typography>
</Grid> </Grid>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} lg={4} md={6}> <Grid container alignItems="center" spacing={0}>
<Grid container spacing={gridSpacing}> <Grid item xs={12} sm={6} sx={blockSX}>
<Grid item xs={12}> <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
<MainCard <Grid item>
content={false} <IconCircles stroke={1.5} />
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>
<Grid item xs={12}> <Grid item sm zeroMinWidth>
<TotalRevenueCard title="Total Revenue" /> <Typography variant="h5" align="center">
3550
</Typography>
<Typography variant="subtitle2" align="center">
RETURNS
</Typography>
</Grid> </Grid>
<Grid item xs={12}> </Grid>
<UserCountCard </Grid>
primary="Daily user" <Grid item xs={12} sm={6} sx={blockSX}>
secondary="1,658" <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
iconPrimary={AccountCircleTwoTone} <Grid item>
color={theme.palette.secondary.main} <IconCreditCard stroke={1.5} />
/>
</Grid> </Grid>
<Grid item xs={12}> <Grid item sm zeroMinWidth>
<UserCountCard <Typography variant="h5" align="center">
primary="Daily page view" 100%
secondary="1K" </Typography>
iconPrimary={DescriptionTwoToneIcon} <Typography variant="subtitle2" align="center">
color={theme.palette.primary.main} ORDER
/> </Typography>
</Grid> </Grid>
</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>
</Grid>
);
}; };
export default Analytics; 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 ||=========================== // // ===========================|| DASHBOARD DEFAULT - BAJAJ AREA CHART CARD ||=========================== //
const BajajAreaChartCard = () => { const BajajAreaChartCard = () => {
const theme = useTheme(); const theme = useTheme();
const { navType } = useConfig(); const { navType } = useConfig();
const orangeDark = theme.palette.secondary[800]; const orangeDark = theme.palette.secondary[800];
React.useEffect(() => { React.useEffect(() => {
const newSupportChart = { const newSupportChart = {
...chartData.options, ...chartData.options,
colors: [orangeDark], colors: [orangeDark],
tooltip: { tooltip: {
theme: navType === 'dark' ? 'dark' : 'light' theme: navType === 'dark' ? 'dark' : 'light'
} }
}; };
ApexCharts.exec(`support-chart`, 'updateOptions', newSupportChart); ApexCharts.exec(`support-chart`, 'updateOptions', newSupportChart);
}, [navType, orangeDark]); }, [navType, orangeDark]);
return ( return (
<Card sx={{ bgcolor: 'secondary.light' }}> <Card sx={{ bgcolor: 'secondary.light' }}>
<Grid container sx={{ p: 2, pb: 0, color: '#fff' }}> <Grid container sx={{ p: 2, pb: 0, color: '#fff' }}>
<Grid item xs={12}> <Grid item xs={12}>
<Grid container alignItems="center" justifyContent="space-between"> <Grid container alignItems="center" justifyContent="space-between">
<Grid item> <Grid item>
<Typography variant="subtitle1" sx={{ color: theme.palette.secondary.dark }}> <Typography variant="subtitle1" sx={{ color: theme.palette.secondary.dark }}>
Bajaj Finery Bajaj Finery
</Typography> </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>
</Grid> </Grid>
<Chart {...chartData} /> <Grid item>
</Card> <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; 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'; import ArchiveTwoToneIcon from '@mui/icons-material/ArchiveOutlined';
const CardWrapper = styled(MainCard)(({ theme }) => ({ const CardWrapper = styled(MainCard)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.secondary.dark, backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.secondary.dark,
color: '#fff', color: '#fff',
overflow: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
'&:after': { '&:after': {
content: '""', content: '""',
position: 'absolute', position: 'absolute',
width: 210, width: 210,
height: 210, height: 210,
background: background:
theme.palette.mode === 'dark' theme.palette.mode === 'dark'
? `linear-gradient(210.04deg, ${theme.palette.secondary.dark} -50.94%, rgba(144, 202, 249, 0) 95.49%)` ? `linear-gradient(210.04deg, ${theme.palette.secondary.dark} -50.94%, rgba(144, 202, 249, 0) 95.49%)`
: theme.palette.secondary[800], : theme.palette.secondary[800],
borderRadius: '50%', borderRadius: '50%',
top: -85, top: -85,
right: -95, right: -95,
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('sm')]: {
top: -105, top: -105,
right: -140 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
}
} }
},
'&: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 ||=========================== // // ===========================|| DASHBOARD DEFAULT - EARNING CARD ||=========================== //
const EarningCard = ({ isLoading }) => { const EarningCard = ({ isLoading }) => {
const theme = useTheme(); const theme = useTheme();
const [anchorEl, setAnchorEl] = React.useState(null); const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => { const handleClick = (event) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
const handleClose = () => { const handleClose = () => {
setAnchorEl(null); setAnchorEl(null);
}; };
return ( return (
<> <>
{isLoading ? ( {isLoading ? (
<SkeletonEarningCard /> <SkeletonEarningCard />
) : ( ) : (
<CardWrapper border={false} content={false}> <CardWrapper border={false} content={false}>
<Box sx={{ p: 2.25 }}> <Box sx={{ p: 2.25 }}>
<Grid container direction="column"> <Grid container direction="column">
<Grid item> <Grid item>
<Grid container justifyContent="space-between"> <Grid container justifyContent="space-between">
<Grid item> <Grid item>
<Avatar <Avatar
variant="rounded" variant="rounded"
sx={{ sx={{
...theme.typography.commonAvatar, ...theme.typography.commonAvatar,
...theme.typography.largeAvatar, ...theme.typography.largeAvatar,
backgroundColor: backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary[800],
theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary[800], mt: 1
mt: 1 }}
}} >
> <img src={EarningIcon} alt="Notification" />
<img src={EarningIcon} alt="Notification" /> </Avatar>
</Avatar> </Grid>
</Grid> <Grid item>
<Grid item> <Avatar
<Avatar variant="rounded"
variant="rounded" sx={{
sx={{ ...theme.typography.commonAvatar,
...theme.typography.commonAvatar, ...theme.typography.mediumAvatar,
...theme.typography.mediumAvatar, backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.secondary.dark,
backgroundColor: color: theme.palette.secondary[200],
theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.secondary.dark, zIndex: 1
color: theme.palette.secondary[200], }}
zIndex: 1 aria-controls="menu-earning-card"
}} aria-haspopup="true"
aria-controls="menu-earning-card" onClick={handleClick}
aria-haspopup="true" >
onClick={handleClick} <MoreHorizIcon fontSize="inherit" />
> </Avatar>
<MoreHorizIcon fontSize="inherit" /> <Menu
</Avatar> id="menu-earning-card"
<Menu anchorEl={anchorEl}
id="menu-earning-card" keepMounted
anchorEl={anchorEl} open={Boolean(anchorEl)}
keepMounted onClose={handleClose}
open={Boolean(anchorEl)} variant="selectedMenu"
onClose={handleClose} anchorOrigin={{
variant="selectedMenu" vertical: 'bottom',
anchorOrigin={{ horizontal: 'right'
vertical: 'bottom', }}
horizontal: 'right' transformOrigin={{
}} vertical: 'top',
transformOrigin={{ horizontal: 'right'
vertical: 'top', }}
horizontal: 'right' >
}} <MenuItem onClick={handleClose}>
> <GetAppTwoToneIcon sx={{ mr: 1.75 }} /> Import Card
<MenuItem onClick={handleClose}> </MenuItem>
<GetAppTwoToneIcon sx={{ mr: 1.75 }} /> Import Card <MenuItem onClick={handleClose}>
</MenuItem> <FileCopyTwoToneIcon sx={{ mr: 1.75 }} /> Copy Data
<MenuItem onClick={handleClose}> </MenuItem>
<FileCopyTwoToneIcon sx={{ mr: 1.75 }} /> Copy Data <MenuItem onClick={handleClose}>
</MenuItem> <PictureAsPdfTwoToneIcon sx={{ mr: 1.75 }} /> Export
<MenuItem onClick={handleClose}> </MenuItem>
<PictureAsPdfTwoToneIcon sx={{ mr: 1.75 }} /> Export <MenuItem onClick={handleClose}>
</MenuItem> <ArchiveTwoToneIcon sx={{ mr: 1.75 }} /> Archive File
<MenuItem onClick={handleClose}> </MenuItem>
<ArchiveTwoToneIcon sx={{ mr: 1.75 }} /> Archive File </Menu>
</MenuItem> </Grid>
</Menu> </Grid>
</Grid> </Grid>
</Grid> <Grid item>
</Grid> <Grid container alignItems="center">
<Grid item> <Grid item>
<Grid container alignItems="center"> <Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>$500.00</Typography>
<Grid item> </Grid>
<Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}> <Grid item>
$500.00 <Avatar
</Typography> sx={{
</Grid> cursor: 'pointer',
<Grid item> ...theme.typography.smallAvatar,
<Avatar backgroundColor: theme.palette.secondary[200],
sx={{ color: theme.palette.secondary.dark
cursor: 'pointer', }}
...theme.typography.smallAvatar, >
backgroundColor: theme.palette.secondary[200], <ArrowUpwardIcon fontSize="inherit" sx={{ transform: 'rotate3d(1, 1, 1, 45deg)' }} />
color: theme.palette.secondary.dark </Avatar>
}} </Grid>
> </Grid>
<ArrowUpwardIcon fontSize="inherit" sx={{ transform: 'rotate3d(1, 1, 1, 45deg)' }} /> </Grid>
</Avatar> <Grid item sx={{ mb: 1.25 }}>
</Grid> <Typography
</Grid> sx={{
</Grid> fontSize: '1rem',
<Grid item sx={{ mb: 1.25 }}> fontWeight: 500,
<Typography color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : theme.palette.secondary[200]
sx={{ }}
fontSize: '1rem', >
fontWeight: 500, Total Earning
color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : theme.palette.secondary[200] </Typography>
}} </Grid>
> </Grid>
Total Earning </Box>
</Typography> </CardWrapper>
</Grid> )}
</Grid> </>
</Box> );
</CardWrapper>
)}
</>
);
}; };
EarningCard.propTypes = { EarningCard.propTypes = {
isLoading: PropTypes.bool isLoading: PropTypes.bool
}; };
export default EarningCard; 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 ||============================== // // ==============================|| DASHBOARD DEFAULT - POPULAR CARD ||============================== //
const PopularCard = ({ isLoading }) => { const PopularCard = ({ isLoading }) => {
const theme = useTheme(); const theme = useTheme();
const [anchorEl, setAnchorEl] = React.useState(null); const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => { const handleClick = (event) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
const handleClose = () => { const handleClose = () => {
setAnchorEl(null); setAnchorEl(null);
}; };
return ( return (
<> <>
{isLoading ? ( {isLoading ? (
<SkeletonPopularCard /> <SkeletonPopularCard />
) : ( ) : (
<MainCard content={false}> <MainCard content={false}>
<CardContent> <CardContent>
<Grid container spacing={gridSpacing}> <Grid container spacing={gridSpacing}>
<Grid item xs={12}> <Grid item xs={12}>
<Grid container alignContent="center" justifyContent="space-between"> <Grid container alignContent="center" justifyContent="space-between">
<Grid item> <Grid item>
<Typography variant="h4">Popular Stocks</Typography> <Typography variant="h4">Popular Stocks</Typography>
</Grid> </Grid>
<Grid item> <Grid item>
<MoreHorizOutlinedIcon <MoreHorizOutlinedIcon
fontSize="small" fontSize="small"
sx={{ sx={{
color: theme.palette.primary[200], color: theme.palette.primary[200],
cursor: 'pointer' cursor: 'pointer'
}} }}
aria-controls="menu-popular-card" aria-controls="menu-popular-card"
aria-haspopup="true" aria-haspopup="true"
onClick={handleClick} onClick={handleClick}
/> />
<Menu <Menu
id="menu-popular-card" id="menu-popular-card"
anchorEl={anchorEl} anchorEl={anchorEl}
keepMounted keepMounted
open={Boolean(anchorEl)} open={Boolean(anchorEl)}
onClose={handleClose} onClose={handleClose}
variant="selectedMenu" variant="selectedMenu"
anchorOrigin={{ anchorOrigin={{
vertical: 'bottom', vertical: 'bottom',
horizontal: 'right' horizontal: 'right'
}} }}
transformOrigin={{ transformOrigin={{
vertical: 'top', vertical: 'top',
horizontal: 'right' horizontal: 'right'
}} }}
> >
<MenuItem onClick={handleClose}> Today</MenuItem> <MenuItem onClick={handleClose}> Today</MenuItem>
<MenuItem onClick={handleClose}> This Month</MenuItem> <MenuItem onClick={handleClose}> This Month</MenuItem>
<MenuItem onClick={handleClose}> This Year </MenuItem> <MenuItem onClick={handleClose}> This Year </MenuItem>
</Menu> </Menu>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} sx={{ pt: '16px !important' }}> <Grid item xs={12} sx={{ pt: '16px !important' }}>
<BajajAreaChartCard /> <BajajAreaChartCard />
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Grid container direction="column"> <Grid container direction="column">
<Grid item> <Grid item>
<Grid container alignItems="center" justifyContent="space-between"> <Grid container alignItems="center" justifyContent="space-between">
<Grid item> <Grid item>
<Typography variant="subtitle1" color="inherit"> <Typography variant="subtitle1" color="inherit">
Bajaj Finery Bajaj Finery
</Typography> </Typography>
</Grid> </Grid>
<Grid item> <Grid item>
<Grid container alignItems="center" justifyContent="space-between"> <Grid container alignItems="center" justifyContent="space-between">
<Grid item> <Grid item>
<Typography variant="subtitle1" color="inherit"> <Typography variant="subtitle1" color="inherit">
$1839.00 $1839.00
</Typography> </Typography>
</Grid> </Grid>
<Grid item> <Grid item>
<Avatar <Avatar
variant="rounded" variant="rounded"
sx={{ sx={{
width: 16, width: 16,
height: 16, height: 16,
borderRadius: '5px', borderRadius: '5px',
backgroundColor: theme.palette.success.light, backgroundColor: theme.palette.success.light,
color: theme.palette.success.dark, color: theme.palette.success.dark,
ml: 2 ml: 2
}} }}
> >
<KeyboardArrowUpOutlinedIcon fontSize="small" color="inherit" /> <KeyboardArrowUpOutlinedIcon fontSize="small" color="inherit" />
</Avatar> </Avatar>
</Grid> </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>
</Grid> </Grid>
</CardContent> </Grid>
<CardActions sx={{ p: 1.25, pt: 0, justifyContent: 'center' }}> </Grid>
<Button size="small" disableElevation> </Grid>
View All <Grid item>
<ChevronRightOutlinedIcon /> <Typography variant="subtitle2" sx={{ color: 'success.dark' }}>
</Button> 10% Profit
</CardActions> </Typography>
</MainCard> </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 = { PopularCard.propTypes = {
isLoading: PropTypes.bool isLoading: PropTypes.bool
}; };
export default PopularCard; 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'; import chartData from './chart-data/total-growth-bar-chart';
const status = [ const status = [
{ {
value: 'today', value: 'today',
label: 'Today' label: 'Today'
}, },
{ {
value: 'month', value: 'month',
label: 'This Month' label: 'This Month'
}, },
{ {
value: 'year', value: 'year',
label: 'This Year' label: 'This Year'
} }
]; ];
// ==============================|| DASHBOARD DEFAULT - TOTAL GROWTH BAR CHART ||============================== // // ==============================|| DASHBOARD DEFAULT - TOTAL GROWTH BAR CHART ||============================== //
const TotalGrowthBarChart = ({ isLoading }) => { const TotalGrowthBarChart = ({ isLoading }) => {
const [value, setValue] = React.useState('today'); const [value, setValue] = React.useState('today');
const theme = useTheme(); const theme = useTheme();
const { navType } = useConfig(); 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 primary200 = theme.palette.primary[200]; const { primary } = theme.palette.text;
const primaryDark = theme.palette.primary.dark; const darkLight = theme.palette.dark.light;
const secondaryMain = theme.palette.secondary.main; const grey200 = theme.palette.grey[200];
const secondaryLight = theme.palette.secondary.light; const grey500 = theme.palette.grey[500];
React.useEffect(() => { const primary200 = theme.palette.primary[200];
const newChartData = { const primaryDark = theme.palette.primary.dark;
...chartData.options, const secondaryMain = theme.palette.secondary.main;
colors: [primary200, primaryDark, secondaryMain, secondaryLight], const secondaryLight = theme.palette.secondary.light;
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
}
}
};
// do not load chart when loading React.useEffect(() => {
if (!isLoading) { const newChartData = {
ApexCharts.exec(`bar-chart`, 'updateOptions', 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 ( // do not load chart when loading
<> if (!isLoading) {
{isLoading ? ( ApexCharts.exec(`bar-chart`, 'updateOptions', newChartData);
<SkeletonTotalGrowthBarChart /> }
) : ( }, [navType, primary200, primaryDark, secondaryMain, secondaryLight, primary, darkLight, grey200, isLoading, grey500]);
<MainCard>
<Grid container spacing={gridSpacing}> return (
<Grid item xs={12}> <>
<Grid container alignItems="center" justifyContent="space-between"> {isLoading ? (
<Grid item> <SkeletonTotalGrowthBarChart />
<Grid container direction="column" spacing={1}> ) : (
<Grid item> <MainCard>
<Typography variant="subtitle2">Total Growth</Typography> <Grid container spacing={gridSpacing}>
</Grid> <Grid item xs={12}>
<Grid item> <Grid container alignItems="center" justifyContent="space-between">
<Typography variant="h3">$2,324.00</Typography> <Grid item>
</Grid> <Grid container direction="column" spacing={1}>
</Grid> <Grid item>
</Grid> <Typography variant="subtitle2">Total Growth</Typography>
<Grid item> </Grid>
<TextField <Grid item>
id="standard-select-currency" <Typography variant="h3">$2,324.00</Typography>
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> </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 = { TotalGrowthBarChart.propTypes = {
isLoading: PropTypes.bool isLoading: PropTypes.bool
}; };
export default TotalGrowthBarChart; 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 // styles
const CardWrapper = styled(MainCard)(({ theme }) => ({ const CardWrapper = styled(MainCard)(({ theme }) => ({
backgroundColor: theme.palette.primary.dark, backgroundColor: theme.palette.primary.dark,
color: theme.palette.primary.light, color: theme.palette.primary.light,
overflow: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
'&:after': { '&:after': {
content: '""', content: '""',
position: 'absolute', position: 'absolute',
width: 210, width: 210,
height: 210, height: 210,
background: `linear-gradient(210.04deg, ${theme.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`, background: `linear-gradient(210.04deg, ${theme.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`,
borderRadius: '50%', borderRadius: '50%',
top: -30, top: -30,
right: -180 right: -180
}, },
'&:before': { '&:before': {
content: '""', content: '""',
position: 'absolute', position: 'absolute',
width: 210, width: 210,
height: 210, height: 210,
background: `linear-gradient(140.9deg, ${theme.palette.primary[200]} -14.02%, rgba(144, 202, 249, 0) 77.58%)`, background: `linear-gradient(140.9deg, ${theme.palette.primary[200]} -14.02%, rgba(144, 202, 249, 0) 77.58%)`,
borderRadius: '50%', borderRadius: '50%',
top: -160, top: -160,
right: -130 right: -130
} }
})); }));
// ==============================|| DASHBOARD - TOTAL INCOME DARK CARD ||============================== // // ==============================|| DASHBOARD - TOTAL INCOME DARK CARD ||============================== //
const TotalIncomeDarkCard = ({ isLoading }) => { const TotalIncomeDarkCard = ({ isLoading }) => {
const theme = useTheme(); const theme = useTheme();
return ( return (
<> <>
{isLoading ? ( {isLoading ? (
<TotalIncomeCard /> <TotalIncomeCard />
) : ( ) : (
<CardWrapper border={false} content={false}> <CardWrapper border={false} content={false}>
<Box sx={{ p: 2 }}> <Box sx={{ p: 2 }}>
<List sx={{ py: 0 }}> <List sx={{ py: 0 }}>
<ListItem alignItems="center" disableGutters sx={{ py: 0 }}> <ListItem alignItems="center" disableGutters sx={{ py: 0 }}>
<ListItemAvatar> <ListItemAvatar>
<Avatar <Avatar
variant="rounded" variant="rounded"
sx={{ sx={{
...theme.typography.commonAvatar, ...theme.typography.commonAvatar,
...theme.typography.largeAvatar, ...theme.typography.largeAvatar,
backgroundColor: theme.palette.primary[800], backgroundColor: theme.palette.primary[800],
color: '#fff' color: '#fff'
}} }}
> >
<TableChartOutlinedIcon fontSize="inherit" /> <TableChartOutlinedIcon fontSize="inherit" />
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
sx={{ sx={{
py: 0, py: 0,
mt: 0.45, mt: 0.45,
mb: 0.45 mb: 0.45
}} }}
primary={ primary={
<Typography variant="h4" sx={{ color: '#fff' }}> <Typography variant="h4" sx={{ color: '#fff' }}>
$203k $203k
</Typography> </Typography>
} }
secondary={ secondary={
<Typography variant="subtitle2" sx={{ color: 'primary.light', mt: 0.25 }}> <Typography variant="subtitle2" sx={{ color: 'primary.light', mt: 0.25 }}>
Total Income Total Income
</Typography> </Typography>
} }
/> />
</ListItem> </ListItem>
</List> </List>
</Box> </Box>
</CardWrapper> </CardWrapper>
)} )}
</> </>
); );
}; };
TotalIncomeDarkCard.propTypes = { TotalIncomeDarkCard.propTypes = {
isLoading: PropTypes.bool isLoading: PropTypes.bool
}; };
export default TotalIncomeDarkCard; 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 // styles
const CardWrapper = styled(MainCard)(({ theme }) => ({ const CardWrapper = styled(MainCard)(({ theme }) => ({
overflow: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
'&:after': { '&:after': {
content: '""', content: '""',
position: 'absolute', position: 'absolute',
width: 210, width: 210,
height: 210, height: 210,
background: `linear-gradient(210.04deg, ${theme.palette.warning.dark} -50.94%, rgba(144, 202, 249, 0) 83.49%)`, background: `linear-gradient(210.04deg, ${theme.palette.warning.dark} -50.94%, rgba(144, 202, 249, 0) 83.49%)`,
borderRadius: '50%', borderRadius: '50%',
top: -30, top: -30,
right: -180 right: -180
}, },
'&:before': { '&:before': {
content: '""', content: '""',
position: 'absolute', position: 'absolute',
width: 210, width: 210,
height: 210, height: 210,
background: `linear-gradient(140.9deg, ${theme.palette.warning.dark} -14.02%, rgba(144, 202, 249, 0) 70.50%)`, background: `linear-gradient(140.9deg, ${theme.palette.warning.dark} -14.02%, rgba(144, 202, 249, 0) 70.50%)`,
borderRadius: '50%', borderRadius: '50%',
top: -160, top: -160,
right: -130 right: -130
} }
})); }));
// ==============================|| DASHBOARD - TOTAL INCOME LIGHT CARD ||============================== // // ==============================|| DASHBOARD - TOTAL INCOME LIGHT CARD ||============================== //
const TotalIncomeLightCard = ({ isLoading }) => { const TotalIncomeLightCard = ({ isLoading }) => {
const theme = useTheme(); const theme = useTheme();
return ( return (
<> <>
{isLoading ? ( {isLoading ? (
<TotalIncomeCard /> <TotalIncomeCard />
) : ( ) : (
<CardWrapper border={false} content={false}> <CardWrapper border={false} content={false}>
<Box sx={{ p: 2 }}> <Box sx={{ p: 2 }}>
<List sx={{ py: 0 }}> <List sx={{ py: 0 }}>
<ListItem alignItems="center" disableGutters sx={{ py: 0 }}> <ListItem alignItems="center" disableGutters sx={{ py: 0 }}>
<ListItemAvatar> <ListItemAvatar>
<Avatar <Avatar
variant="rounded" variant="rounded"
sx={{ sx={{
...theme.typography.commonAvatar, ...theme.typography.commonAvatar,
...theme.typography.largeAvatar, ...theme.typography.largeAvatar,
backgroundColor: backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.warning.light,
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
color: theme.palette.mode === 'dark' ? theme.palette.warning.dark : theme.palette.warning.dark }}
}} >
> <StorefrontTwoToneIcon fontSize="inherit" />
<StorefrontTwoToneIcon fontSize="inherit" /> </Avatar>
</Avatar> </ListItemAvatar>
</ListItemAvatar> <ListItemText
<ListItemText sx={{
sx={{ py: 0,
py: 0, mt: 0.45,
mt: 0.45, mb: 0.45
mb: 0.45 }}
}} primary={<Typography variant="h4">$203k</Typography>}
primary={<Typography variant="h4">$203k</Typography>} secondary={
secondary={ <Typography
<Typography variant="subtitle2"
variant="subtitle2" sx={{
sx={{ color: theme.palette.grey[500],
color: theme.palette.grey[500], mt: 0.5
mt: 0.5 }}
}} >
> Total Income
Total Income </Typography>
</Typography> }
} />
/> </ListItem>
</ListItem> </List>
</List> </Box>
</Box> </CardWrapper>
</CardWrapper> )}
)} </>
</> );
);
}; };
TotalIncomeLightCard.propTypes = { TotalIncomeLightCard.propTypes = {
isLoading: PropTypes.bool isLoading: PropTypes.bool
}; };
export default TotalIncomeLightCard; 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'; import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
const CardWrapper = styled(MainCard)(({ theme }) => ({ const CardWrapper = styled(MainCard)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.primary.dark, backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.primary.dark,
color: '#fff', color: '#fff',
overflow: 'hidden', overflow: 'hidden',
position: 'relative',
'&>div': {
position: 'relative', position: 'relative',
'&>div': { zIndex: 5
position: 'relative', },
zIndex: 5 '&:after': {
}, content: '""',
'&:after': { position: 'absolute',
content: '""', width: 210,
position: 'absolute', height: 210,
width: 210, background:
height: 210, theme.palette.mode === 'dark'
background: ? `linear-gradient(210.04deg, ${theme.palette.primary.dark} -50.94%, rgba(144, 202, 249, 0) 95.49%)`
theme.palette.mode === 'dark' : theme.palette.primary[800],
? `linear-gradient(210.04deg, ${theme.palette.primary.dark} -50.94%, rgba(144, 202, 249, 0) 95.49%)` borderRadius: '50%',
: theme.palette.primary[800], zIndex: 1,
borderRadius: '50%', top: -85,
zIndex: 1, right: -95,
top: -85, [theme.breakpoints.down('sm')]: {
right: -95, top: -105,
[theme.breakpoints.down('sm')]: { right: -140
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
}
} }
},
'&: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 ||============================== // // ==============================|| DASHBOARD - TOTAL ORDER LINE CHART CARD ||============================== //
const TotalOrderLineChartCard = ({ isLoading }) => { const TotalOrderLineChartCard = ({ isLoading }) => {
const theme = useTheme(); const theme = useTheme();
const [timeValue, setTimeValue] = React.useState(false); const [timeValue, setTimeValue] = React.useState(false);
const handleChangeTime = (event, newValue) => { const handleChangeTime = (event, newValue) => {
setTimeValue(newValue); setTimeValue(newValue);
}; };
return ( return (
<> <>
{isLoading ? ( {isLoading ? (
<SkeletonTotalOrderCard /> <SkeletonTotalOrderCard />
) : ( ) : (
<CardWrapper border={false} content={false}> <CardWrapper border={false} content={false}>
<Box sx={{ p: 2.25 }}> <Box sx={{ p: 2.25 }}>
<Grid container direction="column"> <Grid container direction="column">
<Grid item> <Grid item>
<Grid container justifyContent="space-between"> <Grid container justifyContent="space-between">
<Grid item> <Grid item>
<Avatar <Avatar
variant="rounded" variant="rounded"
sx={{ sx={{
...theme.typography.commonAvatar, ...theme.typography.commonAvatar,
...theme.typography.largeAvatar, ...theme.typography.largeAvatar,
backgroundColor: backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary[800],
theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary[800], color: '#fff',
color: '#fff', mt: 1
mt: 1 }}
}} >
> <LocalMallOutlinedIcon fontSize="inherit" />
<LocalMallOutlinedIcon fontSize="inherit" /> </Avatar>
</Avatar> </Grid>
</Grid> <Grid item>
<Grid item> <Button
<Button disableElevation
disableElevation variant={timeValue ? 'contained' : 'text'}
variant={timeValue ? 'contained' : 'text'} size="small"
size="small" sx={{ color: 'inherit' }}
sx={{ color: 'inherit' }} onClick={(e) => handleChangeTime(e, true)}
onClick={(e) => handleChangeTime(e, true)} >
> Month
Month </Button>
</Button> <Button
<Button disableElevation
disableElevation variant={!timeValue ? 'contained' : 'text'}
variant={!timeValue ? 'contained' : 'text'} size="small"
size="small" sx={{ color: 'inherit' }}
sx={{ color: 'inherit' }} onClick={(e) => handleChangeTime(e, false)}
onClick={(e) => handleChangeTime(e, false)} >
> Year
Year </Button>
</Button> </Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid> <Grid item sx={{ mb: 0.75 }}>
<Grid item sx={{ mb: 0.75 }}> <Grid container alignItems="center">
<Grid container alignItems="center"> <Grid item xs={6}>
<Grid item xs={6}> <Grid container alignItems="center">
<Grid container alignItems="center"> <Grid item>
<Grid item> {timeValue ? (
{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 }}> ) : (
$108 <Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>$961</Typography>
</Typography> )}
) : ( </Grid>
<Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}> <Grid item>
$961 <Avatar
</Typography> sx={{
)} ...theme.typography.smallAvatar,
</Grid> cursor: 'pointer',
<Grid item> backgroundColor: theme.palette.primary[200],
<Avatar color: theme.palette.primary.dark
sx={{ }}
...theme.typography.smallAvatar, >
cursor: 'pointer', <ArrowDownwardIcon fontSize="inherit" sx={{ transform: 'rotate3d(1, 1, 1, 45deg)' }} />
backgroundColor: theme.palette.primary[200], </Avatar>
color: theme.palette.primary.dark </Grid>
}} <Grid item xs={12}>
> <Typography
<ArrowDownwardIcon fontSize="inherit" sx={{ transform: 'rotate3d(1, 1, 1, 45deg)' }} /> sx={{
</Avatar> fontSize: '1rem',
</Grid> fontWeight: 500,
<Grid item xs={12}> color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : theme.palette.primary[200]
<Typography }}
sx={{ >
fontSize: '1rem', Total Order
fontWeight: 500, </Typography>
color: </Grid>
theme.palette.mode === 'dark' </Grid>
? theme.palette.text.secondary </Grid>
: theme.palette.primary[200] <Grid item xs={6}>
}} {timeValue ? <Chart {...ChartDataMonth} /> : <Chart {...ChartDataYear} />}
> </Grid>
Total Order </Grid>
</Typography> </Grid>
</Grid> </Grid>
</Grid> </Box>
</Grid> </CardWrapper>
<Grid item xs={6}> )}
{timeValue ? <Chart {...ChartDataMonth} /> : <Chart {...ChartDataYear} />} </>
</Grid> );
</Grid>
</Grid>
</Grid>
</Box>
</CardWrapper>
)}
</>
);
}; };
TotalOrderLineChartCard.propTypes = { TotalOrderLineChartCard.propTypes = {
isLoading: PropTypes.bool isLoading: PropTypes.bool
}; };
export default TotalOrderLineChartCard; 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 ||============================== // // ==============================|| DASHBOARD - BAJAJ AREA CHART ||============================== //
const chartData = { const chartData = {
type: 'area', type: 'area',
height: 95, height: 95,
options: { options: {
chart: { chart: {
id: 'support-chart', id: 'support-chart',
sparkline: { sparkline: {
enabled: true enabled: true
} }
}, },
dataLabels: { dataLabels: {
enabled: false enabled: false
}, },
stroke: { stroke: {
curve: 'smooth', curve: 'smooth',
width: 1 width: 1
},
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: () => 'Ticket '
}
},
marker: {
show: false
}
}
}, },
series: [ tooltip: {
{ fixed: {
data: [0, 15, 10, 50, 30, 40, 25] enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: () => 'Ticket '
} }
] },
marker: {
show: false
}
}
},
series: [
{
data: [0, 15, 10, 50, 30, 40, 25]
}
]
}; };
export default chartData; 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 ||============================== // // ==============================|| DASHBOARD - TOTAL GROWTH BAR CHART ||============================== //
const chartData = { const chartData = {
height: 480, height: 480,
type: 'bar', type: 'bar',
options: { options: {
chart: { chart: {
id: 'bar-chart', id: 'bar-chart',
stacked: true, stacked: true,
toolbar: { toolbar: {
show: true show: true
}, },
zoom: { zoom: {
enabled: true enabled: true
} }
}, },
responsive: [ responsive: [
{ {
breakpoint: 480, breakpoint: 480,
options: { options: {
legend: { 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`,
position: 'bottom', position: 'bottom',
offsetX: 20, offsetX: -10,
labels: { offsetY: 0
useSeriesColors: false }
},
markers: {
width: 16,
height: 16,
radius: 5
},
itemMargin: {
horizontal: 15,
vertical: 8
}
},
fill: {
type: 'solid'
},
dataLabels: {
enabled: false
},
grid: {
show: true
} }
}
],
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%'
}
}, },
series: [ xaxis: {
{ type: 'category',
name: 'Investment', categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
data: [35, 125, 35, 35, 35, 80, 35, 20, 35, 45, 15, 75] },
}, legend: {
{ show: true,
name: 'Loss', fontFamily: `'Roboto', sans-serif`,
data: [35, 15, 15, 35, 65, 40, 80, 25, 15, 85, 25, 75] position: 'bottom',
}, offsetX: 20,
{ labels: {
name: 'Profit', useSeriesColors: false
data: [35, 145, 35, 35, 20, 105, 100, 10, 65, 45, 30, 10] },
}, markers: {
{ width: 16,
name: 'Maintenance', height: 16,
data: [0, 0, 75, 0, 0, 115, 0, 0, 0, 0, 150, 0] 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; 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 ||============================== // // ==============================|| DASHBOARD - TOTAL ORDER MONTH CHART ||============================== //
const chartData = { const chartData = {
type: 'line', type: 'line',
height: 90, height: 90,
options: { options: {
chart: { chart: {
sparkline: { sparkline: {
enabled: true enabled: true
} }
}, },
dataLabels: { dataLabels: {
enabled: false enabled: false
}, },
colors: ['#fff'], colors: ['#fff'],
fill: { fill: {
type: 'solid', type: 'solid',
opacity: 1 opacity: 1
}, },
stroke: { stroke: {
curve: 'smooth', curve: 'smooth',
width: 3 width: 3
}, },
yaxis: { yaxis: {
min: 0, min: 0,
max: 100 max: 100
},
tooltip: {
theme: 'dark',
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: () => 'Total Order'
}
},
marker: {
show: false
}
}
}, },
series: [ tooltip: {
{ theme: 'dark',
name: 'series1', fixed: {
data: [45, 66, 41, 89, 25, 44, 9, 54] 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; 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 ||============================== // // ==============================|| DASHBOARD - TOTAL ORDER YEAR CHART ||============================== //
const chartData = { const chartData = {
type: 'line', type: 'line',
height: 90, height: 90,
options: { options: {
chart: { chart: {
sparkline: { sparkline: {
enabled: true enabled: true
} }
}, },
dataLabels: { dataLabels: {
enabled: false enabled: false
}, },
colors: ['#fff'], colors: ['#fff'],
fill: { fill: {
type: 'solid', type: 'solid',
opacity: 1 opacity: 1
}, },
stroke: { stroke: {
curve: 'smooth', curve: 'smooth',
width: 3 width: 3
}, },
yaxis: { yaxis: {
min: 0, min: 0,
max: 100 max: 100
},
tooltip: {
theme: 'dark',
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: () => 'Total Order'
}
},
marker: {
show: false
}
}
}, },
series: [ tooltip: {
{ theme: 'dark',
name: 'series1', fixed: {
data: [35, 44, 9, 54, 45, 66, 41, 69] 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; 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 ||============================== // // ==============================|| DEFAULT DASHBOARD ||============================== //
const Dashboard = () => { const Dashboard = () => {
const [isLoading, setLoading] = useState(true); const [isLoading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
setLoading(false); setLoading(false);
}, []); }, []);
return ( return (
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<Grid container spacing={gridSpacing}> <Grid container spacing={gridSpacing}>
<Grid item xs={12}> <Grid item lg={4} md={6} sm={6} xs={12}>
<Grid container spacing={gridSpacing}> <EarningCard isLoading={isLoading} />
<Grid item lg={4} md={6} sm={6} xs={12}> </Grid>
<EarningCard isLoading={isLoading} /> <Grid item lg={4} md={6} sm={6} xs={12}>
</Grid> <TotalOrderLineChartCard isLoading={isLoading} />
<Grid item lg={4} md={6} sm={6} xs={12}> </Grid>
<TotalOrderLineChartCard isLoading={isLoading} /> <Grid item lg={4} md={12} sm={12} xs={12}>
</Grid> <Grid container spacing={gridSpacing}>
<Grid item lg={4} md={12} sm={12} xs={12}> <Grid item sm={6} xs={12} md={6} lg={12}>
<Grid container spacing={gridSpacing}> <TotalIncomeDarkCard isLoading={isLoading} />
<Grid item sm={6} xs={12} md={6} lg={12}> </Grid>
<TotalIncomeDarkCard isLoading={isLoading} /> <Grid item sm={6} xs={12} md={6} lg={12}>
</Grid> <TotalIncomeLightCard isLoading={isLoading} />
<Grid item sm={6} xs={12} md={6} lg={12}> </Grid>
<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>
</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>
</Grid>
);
}; };
export default Dashboard; 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 ||============================== // // ==============================|| 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, backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.primary.light,
minHeight: '100vh' 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, Box,
Button, Button,
Checkbox, Checkbox,
Divider,
FormControl, FormControl,
FormControlLabel, FormControlLabel,
FormHelperText, FormHelperText,
@ -18,8 +17,7 @@ import {
InputLabel, InputLabel,
OutlinedInput, OutlinedInput,
Stack, Stack,
Typography, Typography
useMediaQuery
} from '@mui/material'; } from '@mui/material';
// third party // third party
@ -27,7 +25,6 @@ import * as Yup from 'yup';
import { Formik } from 'formik'; import { Formik } from 'formik';
// project imports // project imports
import useConfig from 'hooks/useConfig';
import useAuth from 'hooks/useAuth'; import useAuth from 'hooks/useAuth';
import useScriptRef from 'hooks/useScriptRef'; import useScriptRef from 'hooks/useScriptRef';
import AnimateButton from 'ui-component/extended/AnimateButton'; 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 Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff'; import VisibilityOff from '@mui/icons-material/VisibilityOff';
import Google from 'assets/images/icons/social-google.svg';
// ============================|| FIREBASE - LOGIN ||============================ // // ============================|| FIREBASE - LOGIN ||============================ //
const FirebaseLogin = ({ loginProp, ...others }) => { const FirebaseLogin = ({ loginProp, ...others }) => {
const theme = useTheme(); const theme = useTheme();
const { login } = useAuth();
const scriptedRef = useScriptRef(); const scriptedRef = useScriptRef();
const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
const { borderRadius } = useConfig();
const [checked, setChecked] = React.useState(true); 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 [showPassword, setShowPassword] = React.useState(false);
const handleClickShowPassword = () => { const handleClickShowPassword = () => {
setShowPassword(!showPassword); setShowPassword(!showPassword);
@ -68,58 +53,6 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
return ( return (
<> <>
<Grid container direction="column" justifyContent="center" spacing={2}> <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"> <Grid item xs={12} container alignItems="center" justifyContent="center">
<Box sx={{ mb: 2 }}> <Box sx={{ mb: 2 }}>
<Typography variant="subtitle1">Sign in with Email address</Typography> <Typography variant="subtitle1">Sign in with Email address</Typography>
@ -129,31 +62,17 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
<Formik <Formik
initialValues={{ initialValues={{
email: 'info@codedthemes.com', userid: 'xitdev',
password: '123456', passwd: 'xitdev',
submit: null submit: null
}} }}
validationSchema={Yup.object().shape({ validationSchema={Yup.object().shape({
email: Yup.string().email('Must be a valid email').max(255).required('Email is required'), userid: Yup.string().max(255).required('User ID is required'),
password: Yup.string().max(255).required('Password is required') passwd: Yup.string().max(255).required('Password is required')
})} })}
onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => { onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
try { try {
await firebaseEmailPasswordSignIn(values.email, values.password).then( await login(values.userid, values.passwd);
() => {
// 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);
}
}
);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
if (scriptedRef.current) { if (scriptedRef.current) {
@ -166,32 +85,32 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
> >
{({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => ( {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
<form noValidate onSubmit={handleSubmit} {...others}> <form noValidate onSubmit={handleSubmit} {...others}>
<FormControl fullWidth error={Boolean(touched.email && errors.email)} sx={{ ...theme.typography.customInput }}> <FormControl fullWidth error={Boolean(touched.userid && errors.userid)} sx={{ ...theme.typography.customInput }}>
<InputLabel htmlFor="outlined-adornment-email-login">Email Address / Username</InputLabel> <InputLabel htmlFor="userid">User ID</InputLabel>
<OutlinedInput <OutlinedInput
id="outlined-adornment-email-login" id="userid"
type="email" type="text"
value={values.email} value={values.userid}
name="email" name="userid"
onBlur={handleBlur} onBlur={handleBlur}
onChange={handleChange} onChange={handleChange}
label="Email Address / Username" label="User ID"
inputProps={{}} inputProps={{}}
/> />
{touched.email && errors.email && ( {touched.userid && errors.userid && (
<FormHelperText error id="standard-weight-helper-text-email-login"> <FormHelperText error id="standard-weight-helper-text-userid-login">
{errors.email} {errors.userid}
</FormHelperText> </FormHelperText>
)} )}
</FormControl> </FormControl>
<FormControl fullWidth error={Boolean(touched.password && errors.password)} sx={{ ...theme.typography.customInput }}> <FormControl fullWidth error={Boolean(touched.passwd && errors.passwd)} sx={{ ...theme.typography.customInput }}>
<InputLabel htmlFor="outlined-adornment-password-login">Password</InputLabel> <InputLabel htmlFor="passwd">Password</InputLabel>
<OutlinedInput <OutlinedInput
id="outlined-adornment-password-login" id="passwd"
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
value={values.password} value={values.passwd}
name="password" name="passwd"
onBlur={handleBlur} onBlur={handleBlur}
onChange={handleChange} onChange={handleChange}
endAdornment={ endAdornment={
@ -210,9 +129,9 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
label="Password" label="Password"
inputProps={{}} inputProps={{}}
/> />
{touched.password && errors.password && ( {touched.passwd && errors.passwd && (
<FormHelperText error id="standard-weight-helper-text-password-login"> <FormHelperText error id="standard-weight-helper-text-password-login">
{errors.password} {errors.passwd}
</FormHelperText> </FormHelperText>
)} )}
</FormControl> </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'; import { Divider, Grid, Typography, useMediaQuery } from '@mui/material';
// project imports // project imports
import AuthWrapper1 from '../AuthWrapper1'; import AuthWrapper from '../AuthWrapper';
import AuthCardWrapper from '../AuthCardWrapper'; import AuthCardWrapper from '../AuthCardWrapper';
import Logo from 'ui-component/Logo'; import Logo from 'ui-component/Logo';
import AuthForgotPassword from '../auth-forms/AuthForgotPassword'; import AuthForgotPassword from '../auth-forms/AuthForgotPassword';
@ -20,7 +20,7 @@ const ForgotPassword = () => {
const matchDownSM = useMediaQuery(theme.breakpoints.down('md')); const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
return ( return (
<AuthWrapper1> <AuthWrapper>
<Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}> <Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}>
<Grid item xs={12}> <Grid item xs={12}>
<Grid container justifyContent="center" alignItems="center" sx={{ minHeight: 'calc(100vh - 68px)' }}> <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}> <Grid item container direction="column" alignItems="center" xs={12}>
<Typography <Typography
component={Link} component={Link}
to={isLoggedIn ? '/pages/login/login3' : '/login'} to={isLoggedIn ? '/pages/login/login' : '/login'}
variant="subtitle1" variant="subtitle1"
sx={{ textDecoration: 'none' }} sx={{ textDecoration: 'none' }}
> >
@ -73,7 +73,7 @@ const ForgotPassword = () => {
<AuthFooter /> <AuthFooter />
</Grid> </Grid>
</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'; import { Link } from 'react-router-dom';
// material-ui // material-ui
import { useTheme } from '@mui/material/styles'; import { Divider, Grid, Typography } from '@mui/material';
import { Divider, Grid, Stack, Typography, useMediaQuery } from '@mui/material';
// project imports // project imports
import AuthWrapper1 from '../AuthWrapper1'; import AuthWrapper from '../AuthWrapper';
import AuthCardWrapper from '../AuthCardWrapper'; import AuthCardWrapper from '../AuthCardWrapper';
import AuthLogin from '../auth-forms/AuthLogin'; import AuthLogin from '../auth-forms/AuthLogin';
import Logo from 'ui-component/Logo'; import Logo from 'ui-component/Logo';
@ -17,12 +16,10 @@ import useAuth from 'hooks/useAuth';
// ================================|| AUTH3 - LOGIN ||================================ // // ================================|| AUTH3 - LOGIN ||================================ //
const Login = () => { const Login = () => {
const theme = useTheme();
const { isLoggedIn } = useAuth(); const { isLoggedIn } = useAuth();
const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
return ( return (
<AuthWrapper1> <AuthWrapper>
<Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}> <Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}>
<Grid item xs={12}> <Grid item xs={12}>
<Grid container justifyContent="center" alignItems="center" sx={{ minHeight: 'calc(100vh - 68px)' }}> <Grid container justifyContent="center" alignItems="center" sx={{ minHeight: 'calc(100vh - 68px)' }}>
@ -34,20 +31,6 @@ const Login = () => {
<Logo /> <Logo />
</Link> </Link>
</Grid> </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}> <Grid item xs={12}>
<AuthLogin /> <AuthLogin />
</Grid> </Grid>
@ -58,7 +41,7 @@ const Login = () => {
<Grid item container direction="column" alignItems="center" xs={12}> <Grid item container direction="column" alignItems="center" xs={12}>
<Typography <Typography
component={Link} component={Link}
to={isLoggedIn ? '/pages/register/register3' : '/register'} to={isLoggedIn ? '/pages/register/register' : '/register'}
variant="subtitle1" variant="subtitle1"
sx={{ textDecoration: 'none' }} sx={{ textDecoration: 'none' }}
> >
@ -75,7 +58,7 @@ const Login = () => {
<AuthFooter /> <AuthFooter />
</Grid> </Grid>
</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'; import { Divider, Grid, Stack, Typography, useMediaQuery } from '@mui/material';
// project imports // project imports
import AuthWrapper1 from '../AuthWrapper1'; import AuthWrapper from '../AuthWrapper';
import AuthCardWrapper from '../AuthCardWrapper'; import AuthCardWrapper from '../AuthCardWrapper';
import Logo from 'ui-component/Logo'; import Logo from 'ui-component/Logo';
import AuthRegister from '../auth-forms/AuthRegister'; import AuthRegister from '../auth-forms/AuthRegister';
@ -22,7 +22,7 @@ const Register = () => {
const matchDownSM = useMediaQuery(theme.breakpoints.down('md')); const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
return ( return (
<AuthWrapper1> <AuthWrapper>
<Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}> <Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}>
<Grid item xs={12}> <Grid item xs={12}>
<Grid container justifyContent="center" alignItems="center" sx={{ minHeight: 'calc(100vh - 68px)' }}> <Grid container justifyContent="center" alignItems="center" sx={{ minHeight: 'calc(100vh - 68px)' }}>
@ -75,7 +75,7 @@ const Register = () => {
<AuthFooter /> <AuthFooter />
</Grid> </Grid>
</Grid> </Grid>
</AuthWrapper1> </AuthWrapper>
); );
}; };
Write Preview
Loading…
Cancel
Save