parent
530fd10c9a
commit
408ec70720
@ -1,39 +1,39 @@
|
|||||||
// third-party
|
// // third-party
|
||||||
import { FormattedMessage } from 'react-intl';
|
// import { FormattedMessage } from 'react-intl';
|
||||||
|
//
|
||||||
// assets
|
// // assets
|
||||||
import { IconDashboard, IconDeviceAnalytics } from '@tabler/icons';
|
// import { IconDashboard, IconDeviceAnalytics } from '@tabler/icons';
|
||||||
|
//
|
||||||
// constant
|
// // constant
|
||||||
const icons = {
|
// const icons = {
|
||||||
IconDashboard,
|
// IconDashboard,
|
||||||
IconDeviceAnalytics
|
// IconDeviceAnalytics
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
// ==============================|| DASHBOARD MENU ITEMS ||============================== //
|
// // ==============================|| DASHBOARD MENU ITEMS ||============================== //
|
||||||
|
//
|
||||||
const dashboard = {
|
// const dashboard = {
|
||||||
id: 'dashboard',
|
// id: 'dashboard',
|
||||||
title: <FormattedMessage id="dashboard" />,
|
// title: <FormattedMessage id="dashboard" />,
|
||||||
type: 'group',
|
// type: 'group',
|
||||||
children: [
|
// children: [
|
||||||
{
|
// {
|
||||||
id: 'default',
|
// id: 'default',
|
||||||
title: <FormattedMessage id="default" />,
|
// title: <FormattedMessage id="default" />,
|
||||||
type: 'item',
|
// type: 'item',
|
||||||
url: '/dashboard/default',
|
// url: '/dashboard/default',
|
||||||
icon: icons.IconDashboard,
|
// icon: icons.IconDashboard,
|
||||||
breadcrumbs: false
|
// breadcrumbs: false
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 'analytics',
|
// id: 'analytics',
|
||||||
title: <FormattedMessage id="analytics" />,
|
// title: <FormattedMessage id="analytics" />,
|
||||||
type: 'item',
|
// type: 'item',
|
||||||
url: '/dashboard/analytics',
|
// url: '/dashboard/analytics',
|
||||||
icon: icons.IconDeviceAnalytics,
|
// icon: icons.IconDeviceAnalytics,
|
||||||
breadcrumbs: false
|
// breadcrumbs: false
|
||||||
}
|
// }
|
||||||
]
|
// ]
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
export default dashboard;
|
// export default dashboard;
|
||||||
|
|||||||
@ -1,93 +0,0 @@
|
|||||||
// third-party
|
|
||||||
import { createSlice } from '@reduxjs/toolkit';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import axios from 'utils/axios';
|
|
||||||
import { dispatch } from '../index';
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
|
||||||
|
|
||||||
const initialState = {
|
|
||||||
error: null,
|
|
||||||
events: []
|
|
||||||
};
|
|
||||||
|
|
||||||
const slice = createSlice({
|
|
||||||
name: 'calendar',
|
|
||||||
initialState,
|
|
||||||
reducers: {
|
|
||||||
// HAS ERROR
|
|
||||||
hasError(state, action) {
|
|
||||||
state.error = action.payload;
|
|
||||||
},
|
|
||||||
|
|
||||||
// GET EVENTS
|
|
||||||
getEventsSuccess(state, action) {
|
|
||||||
state.events = action.payload;
|
|
||||||
},
|
|
||||||
|
|
||||||
// ADD EVENT
|
|
||||||
addEventSuccess(state, action) {
|
|
||||||
state.events = action.payload;
|
|
||||||
},
|
|
||||||
|
|
||||||
// UPDATE EVENT
|
|
||||||
updateEventSuccess(state, action) {
|
|
||||||
state.events = action.payload;
|
|
||||||
},
|
|
||||||
|
|
||||||
// REMOVE EVENT
|
|
||||||
removeEventSuccess(state, action) {
|
|
||||||
state.events = action.payload;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Reducer
|
|
||||||
export default slice.reducer;
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
|
||||||
|
|
||||||
export function getEvents() {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.get('/api/calendar/events');
|
|
||||||
dispatch(slice.actions.getEventsSuccess(response.data.events));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function addEvent(event) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/calendar/events/new', event);
|
|
||||||
dispatch(slice.actions.addEventSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateEvent(event) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/calendar/events/update', event);
|
|
||||||
dispatch(slice.actions.updateEventSuccess(response.data.events));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function removeEvent(eventId) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/calendar/events/remove', { eventId });
|
|
||||||
dispatch(slice.actions.removeEventSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,242 +0,0 @@
|
|||||||
// third-party
|
|
||||||
import { createSlice } from '@reduxjs/toolkit';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import axios from 'utils/axios';
|
|
||||||
import { dispatch } from '../index';
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
|
||||||
|
|
||||||
const initialState = {
|
|
||||||
error: null,
|
|
||||||
checkout: {
|
|
||||||
step: 0,
|
|
||||||
products: [],
|
|
||||||
subtotal: 0,
|
|
||||||
total: 0,
|
|
||||||
discount: 0,
|
|
||||||
shipping: 0,
|
|
||||||
billing: null,
|
|
||||||
payment: {
|
|
||||||
type: 'free',
|
|
||||||
method: 'cod',
|
|
||||||
card: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const slice = createSlice({
|
|
||||||
name: 'cart',
|
|
||||||
initialState,
|
|
||||||
reducers: {
|
|
||||||
// HAS ERROR
|
|
||||||
hasError(state, action) {
|
|
||||||
state.error = action.payload;
|
|
||||||
},
|
|
||||||
|
|
||||||
// ADD PRODUCT
|
|
||||||
addProductSuccess(state, action) {
|
|
||||||
state.checkout.products = action.payload.products;
|
|
||||||
state.checkout.subtotal += action.payload.subtotal;
|
|
||||||
state.checkout.total += action.payload.subtotal;
|
|
||||||
},
|
|
||||||
|
|
||||||
// REMOVE PRODUCT
|
|
||||||
removeProductSuccess(state, action) {
|
|
||||||
state.checkout.products = action.payload.products;
|
|
||||||
state.checkout.subtotal += -action.payload.subtotal;
|
|
||||||
state.checkout.total += -action.payload.subtotal;
|
|
||||||
},
|
|
||||||
|
|
||||||
// UPDATE PRODUCT
|
|
||||||
updateProductSuccess(state, action) {
|
|
||||||
state.checkout.products = action.payload.products;
|
|
||||||
state.checkout.subtotal = state.checkout.subtotal - action.payload.oldSubTotal + action.payload.subtotal;
|
|
||||||
state.checkout.total = state.checkout.total - action.payload.oldSubTotal + action.payload.subtotal;
|
|
||||||
},
|
|
||||||
|
|
||||||
// SET STEP
|
|
||||||
setStepSuccess(state, action) {
|
|
||||||
state.checkout.step = action.payload;
|
|
||||||
},
|
|
||||||
|
|
||||||
// SET NEXT STEP
|
|
||||||
setNextStepSuccess(state) {
|
|
||||||
state.checkout.step += 1;
|
|
||||||
},
|
|
||||||
|
|
||||||
// SET BACK STEP
|
|
||||||
setBackStepSuccess(state) {
|
|
||||||
state.checkout.step -= 1;
|
|
||||||
},
|
|
||||||
|
|
||||||
// SET BILLING ADDRESS
|
|
||||||
setBillingAddressSuccess(state, action) {
|
|
||||||
state.checkout.billing = action.payload.billing;
|
|
||||||
},
|
|
||||||
|
|
||||||
// SET DISCOUNT
|
|
||||||
setDiscountSuccess(state, action) {
|
|
||||||
let difference = 0;
|
|
||||||
if (state.checkout.discount > 0) {
|
|
||||||
difference = state.checkout.discount;
|
|
||||||
}
|
|
||||||
|
|
||||||
state.checkout.discount = action.payload.amount;
|
|
||||||
state.checkout.total = state.checkout.total + difference - action.payload.amount;
|
|
||||||
},
|
|
||||||
|
|
||||||
// SET SHIPPING CHARGE
|
|
||||||
setShippingChargeSuccess(state, action) {
|
|
||||||
state.checkout.shipping = action.payload.shipping;
|
|
||||||
state.checkout.total += action.payload.newShipping;
|
|
||||||
state.checkout.payment = {
|
|
||||||
...state.checkout.payment,
|
|
||||||
type: action.payload.type
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
// SET PAYMENT METHOD
|
|
||||||
setPaymentMethodSuccess(state, action) {
|
|
||||||
state.checkout.payment = {
|
|
||||||
...state.checkout.payment,
|
|
||||||
method: action.payload.method
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
// SET PAYMENT CARD
|
|
||||||
setPaymentCardSuccess(state, action) {
|
|
||||||
state.checkout.payment = {
|
|
||||||
...state.checkout.payment,
|
|
||||||
card: action.payload.card
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
// RESET CART
|
|
||||||
resetCardSuccess(state) {
|
|
||||||
state.checkout = initialState.checkout;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Reducer
|
|
||||||
export default slice.reducer;
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
|
||||||
|
|
||||||
export function addProduct(product, products) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/cart/add', { product, products });
|
|
||||||
dispatch(slice.actions.addProductSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function removeProduct(id, products) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/cart/remove', { id, products });
|
|
||||||
dispatch(slice.actions.removeProductSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateProduct(id, quantity, products) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/cart/update', { id, quantity, products });
|
|
||||||
dispatch(slice.actions.updateProductSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setStep(step) {
|
|
||||||
return () => {
|
|
||||||
dispatch(slice.actions.setStepSuccess(step));
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setNextStep() {
|
|
||||||
return () => {
|
|
||||||
dispatch(slice.actions.setNextStepSuccess({}));
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setBackStep() {
|
|
||||||
return () => {
|
|
||||||
dispatch(slice.actions.setBackStepSuccess({}));
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setBillingAddress(address) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/cart/billing-address', { address });
|
|
||||||
dispatch(slice.actions.setBillingAddressSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setDiscount(code, total) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/cart/discount', { code, total });
|
|
||||||
dispatch(slice.actions.setDiscountSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setShippingCharge(charge, shipping) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/cart/shipping-charge', { charge, shipping });
|
|
||||||
dispatch(slice.actions.setShippingChargeSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setPaymentMethod(method) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/cart/payment-method', { method });
|
|
||||||
dispatch(slice.actions.setPaymentMethodSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setPaymentCard(card) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/cart/payment-card', { card });
|
|
||||||
dispatch(slice.actions.setPaymentCardSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function resetCart() {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/cart/reset');
|
|
||||||
dispatch(slice.actions.resetCardSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
// third-party
|
|
||||||
import { createSlice } from '@reduxjs/toolkit';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import axios from 'utils/axios';
|
|
||||||
import { dispatch } from '../index';
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
|
||||||
|
|
||||||
const initialState = {
|
|
||||||
error: null,
|
|
||||||
chats: [],
|
|
||||||
user: {},
|
|
||||||
users: []
|
|
||||||
};
|
|
||||||
|
|
||||||
const slice = createSlice({
|
|
||||||
name: 'chat',
|
|
||||||
initialState,
|
|
||||||
reducers: {
|
|
||||||
// HAS ERROR
|
|
||||||
hasError(state, action) {
|
|
||||||
state.error = action.payload;
|
|
||||||
},
|
|
||||||
|
|
||||||
// GET USER
|
|
||||||
getUserSuccess(state, action) {
|
|
||||||
state.user = action.payload;
|
|
||||||
},
|
|
||||||
|
|
||||||
// GET USER CHATS
|
|
||||||
getUserChatsSuccess(state, action) {
|
|
||||||
state.chats = action.payload;
|
|
||||||
},
|
|
||||||
|
|
||||||
// GET USERS
|
|
||||||
getUsersSuccess(state, action) {
|
|
||||||
state.users = action.payload;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Reducer
|
|
||||||
export default slice.reducer;
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
|
||||||
|
|
||||||
export function getUser(id) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/chat/users/id', { id });
|
|
||||||
dispatch(slice.actions.getUserSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getUserChats(user) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post('/api/chat/filter', { user });
|
|
||||||
dispatch(slice.actions.getUserChatsSuccess(response.data));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function insertChat(chat) {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
await axios.post('/api/chat/insert', chat);
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getUsers() {
|
|
||||||
return async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.get('/api/chat/users');
|
|
||||||
dispatch(slice.actions.getUsersSuccess(response.data.users));
|
|
||||||
} catch (error) {
|
|
||||||
dispatch(slice.actions.hasError(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,127 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { Box, Button, Grid, Menu, MenuItem, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// third party
|
|
||||||
import Chart from 'react-apexcharts';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import MainCard from './MainCard';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
|
|
||||||
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
|
|
||||||
|
|
||||||
// ==========================|| ANALYTICS CHART CARD ||========================== //
|
|
||||||
|
|
||||||
const AnalyticsChartCard = ({ title, chartData, dropData, listData }) => {
|
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
|
||||||
|
|
||||||
let dropHtml;
|
|
||||||
if (dropData) {
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event?.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
dropHtml = (
|
|
||||||
<>
|
|
||||||
<Button variant="text" disableElevation size="small" aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
|
|
||||||
{dropData.title}
|
|
||||||
</Button>
|
|
||||||
<Menu
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
id="simple-menu"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
>
|
|
||||||
{dropData?.options.map((option, index) => (
|
|
||||||
<MenuItem key={index} onClick={handleClose}>
|
|
||||||
{option.label}
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</Menu>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let listItem;
|
|
||||||
if (listData) {
|
|
||||||
listItem = listData.map((item, index) => (
|
|
||||||
<Grid item key={index} sm={12}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
color: item.color
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container spacing={2} justifyContent="center">
|
|
||||||
<Grid item>{item.icon}</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="subtitle1">{item.value}%</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
{item.state === 1 && <ArrowUpwardIcon fontSize="inherit" color="inherit" />}
|
|
||||||
{item.state === 0 && <ArrowDownwardIcon fontSize="inherit" color="inherit" />}
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="subtitle1" color="inherit">
|
|
||||||
{item.percentage}%
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Box>
|
|
||||||
</Grid>
|
|
||||||
));
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MainCard>
|
|
||||||
<Grid container justifyContent="space-between" alignItems="center">
|
|
||||||
{title && (
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="subtitle1">{title}</Typography>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
<Grid item>{dropHtml}</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid container justifyContent="center" alignItems="center">
|
|
||||||
<Grid item container direction="column" spacing={1} xs={12} sm={6}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
mt: 3,
|
|
||||||
display: 'block'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{listItem}
|
|
||||||
</Box>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={6}>
|
|
||||||
<Chart {...chartData} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</MainCard>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
AnalyticsChartCard.propTypes = {
|
|
||||||
title: PropTypes.string,
|
|
||||||
chartData: PropTypes.object,
|
|
||||||
dropData: PropTypes.object,
|
|
||||||
listData: PropTypes.array
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnalyticsChartCard;
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Card, CardContent, CardMedia, Grid, Typography } from '@mui/material';
|
|
||||||
import { gridSpacing } from 'store/constant';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import DownloadForOfflineTwoToneIcon from '@mui/icons-material/DownloadForOfflineTwoTone';
|
|
||||||
|
|
||||||
const backImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
// ==============================|| ATTACHMENT CARD ||============================== //
|
|
||||||
|
|
||||||
const AttachmentCard = ({ title, image }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const backProfile = image && backImage(`./${image}`).default;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card sx={{ bgcolor: theme.palette.mode === 'dark' ? 'dark.dark' : 'grey.100' }}>
|
|
||||||
<CardMedia component="img" image={backProfile} title="Slider5 image" />
|
|
||||||
<CardContent sx={{ p: 2, pb: '16px !important' }}>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Typography variant="h5" component="div" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<DownloadForOfflineTwoToneIcon sx={{ cursor: 'pointer' }} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
AttachmentCard.propTypes = {
|
|
||||||
image: PropTypes.string,
|
|
||||||
title: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object])
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AttachmentCard;
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { Grid, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// third-party
|
|
||||||
import Slider from 'react-slick';
|
|
||||||
|
|
||||||
const AuthSlider = ({ items }) => {
|
|
||||||
const settings = {
|
|
||||||
autoplay: true,
|
|
||||||
arrows: false,
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
speed: 500,
|
|
||||||
slidesToShow: 1,
|
|
||||||
slidesToScroll: 1
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Slider {...settings}>
|
|
||||||
{items.map((item, i) => (
|
|
||||||
<Grid key={i} container direction="column" alignItems="center" spacing={3} textAlign="center">
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="h1">{item.title}</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="subtitle2">{item.description}</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
))}
|
|
||||||
</Slider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
AuthSlider.propTypes = {
|
|
||||||
items: PropTypes.array.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AuthSlider;
|
|
||||||
@ -1,132 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Button, Card, Grid, Menu, MenuItem, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import Avatar from '../extended/Avatar';
|
|
||||||
import { gridSpacing } from 'store/constant';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
|
|
||||||
import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
|
|
||||||
import PhoneTwoToneIcon from '@mui/icons-material/PhoneTwoTone';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/users', true);
|
|
||||||
|
|
||||||
// ==============================|| USER CONTACT CARD ||============================== //
|
|
||||||
|
|
||||||
const ContactCard = ({ avatar, contact, email, name, location, onActive, role }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
|
|
||||||
|
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event?.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
p: 2,
|
|
||||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
|
||||||
border: theme.palette.mode === 'dark' ? 'none' : '1px solid',
|
|
||||||
borderColor: theme.palette.grey[100]
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs zeroMinWidth onClick={() => onActive && onActive()} style={{ cursor: 'pointer' }}>
|
|
||||||
<Avatar alt={name} size="lg" src={avatarProfile} sx={{ width: 72, height: 72 }} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<MoreHorizOutlinedIcon
|
|
||||||
fontSize="small"
|
|
||||||
sx={{ color: theme.palette.grey[500], cursor: 'pointer' }}
|
|
||||||
aria-controls="menu-user-details-card"
|
|
||||||
aria-haspopup="true"
|
|
||||||
onClick={handleClick}
|
|
||||||
/>
|
|
||||||
<Menu
|
|
||||||
id="menu-user-details-card"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleClose}> Today</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}> This Month</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}> This Year </MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="h3" component="div">
|
|
||||||
{name}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="caption">{role}</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="caption">Email</Typography>
|
|
||||||
<Typography variant="h6">{email}</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Typography variant="caption">Phone</Typography>
|
|
||||||
<Typography variant="h6">{contact}</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Typography variant="caption">Location</Typography>
|
|
||||||
<Typography variant="h6">{location}</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Button variant="outlined" sx={{ width: '100%' }} startIcon={<ChatBubbleTwoToneIcon />}>
|
|
||||||
Message
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Button variant="outlined" color="secondary" sx={{ width: '100%' }} startIcon={<PhoneTwoToneIcon />}>
|
|
||||||
Call
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
ContactCard.propTypes = {
|
|
||||||
avatar: PropTypes.string,
|
|
||||||
contact: PropTypes.string,
|
|
||||||
email: PropTypes.string,
|
|
||||||
location: PropTypes.string,
|
|
||||||
name: PropTypes.string,
|
|
||||||
onActive: PropTypes.func,
|
|
||||||
role: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ContactCard;
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { styled, useTheme } from '@mui/material/styles';
|
|
||||||
import { Button, Grid, Tooltip, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import Avatar from '../extended/Avatar';
|
|
||||||
import { gridSpacing } from 'store/constant';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
|
|
||||||
import PhoneTwoToneIcon from '@mui/icons-material/PhoneTwoTone';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/users', true);
|
|
||||||
|
|
||||||
// styles
|
|
||||||
const ListWrapper = styled('div')(({ theme }) => ({
|
|
||||||
padding: '15px 0',
|
|
||||||
borderBottom: theme.palette.mode === 'dark' ? 'none' : '1px solid',
|
|
||||||
borderTop: theme.palette.mode === 'dark' ? 'none' : '1px solid',
|
|
||||||
borderColor: `${theme.palette.grey[100]}!important`
|
|
||||||
}));
|
|
||||||
|
|
||||||
// ==============================|| USER CONTACT LIST ||============================== //
|
|
||||||
|
|
||||||
const ContactList = ({ avatar, name, role, onActive }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ListWrapper>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing}>
|
|
||||||
<Grid item xs={12} sm={6} onClick={() => onActive && onActive()} style={{ cursor: 'pointer' }}>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing} sx={{ flexWrap: 'nowrap' }}>
|
|
||||||
<Grid item>
|
|
||||||
<Avatar alt={name} src={avatarProfile} sx={{ width: 48, height: 48 }} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item sm zeroMinWidth>
|
|
||||||
<Grid container spacing={0}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="h4" component="div">
|
|
||||||
{name}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="caption">{role}</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={6}>
|
|
||||||
<Grid container spacing={1} sx={{ justifyContent: 'flex-end', [theme.breakpoints.down('md')]: { justifyContent: 'flex-start' } }}>
|
|
||||||
<Grid item>
|
|
||||||
<Tooltip placement="top" title="Message">
|
|
||||||
<Button variant="outlined" sx={{ minWidth: 32, height: 32, p: 0 }}>
|
|
||||||
<ChatBubbleTwoToneIcon fontSize="small" />
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Tooltip placement="top" title="Call">
|
|
||||||
<Button variant="outlined" color="secondary" sx={{ minWidth: 32, height: 32, p: 0 }}>
|
|
||||||
<PhoneTwoToneIcon fontSize="small" />
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</ListWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
ContactList.propTypes = {
|
|
||||||
avatar: PropTypes.string,
|
|
||||||
name: PropTypes.string,
|
|
||||||
onActive: PropTypes.func,
|
|
||||||
role: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ContactList;
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import { sum } from 'lodash';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
import { useSelector } from 'store';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme, styled } from '@mui/material/styles';
|
|
||||||
import { Fab, Badge, IconButton } from '@mui/material';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import ShoppingCartTwoToneIcon from '@mui/icons-material/ShoppingCartTwoTone';
|
|
||||||
|
|
||||||
const StyledBadge = styled(Badge)(({ theme }) => ({
|
|
||||||
'& .MuiBadge-badge': {
|
|
||||||
right: 0,
|
|
||||||
top: 3,
|
|
||||||
border: `2px solid ${theme.palette.background.paper}`,
|
|
||||||
padding: '0 4px'
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
|
|
||||||
// ==============================|| CART ITEMS - FLOATING BUTTON ||============================== //
|
|
||||||
|
|
||||||
const FloatingCart = () => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const cart = useSelector((state) => state.cart);
|
|
||||||
const totalQuantity = sum(cart.checkout.products.map((item) => item.quantity));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Fab
|
|
||||||
component={Link}
|
|
||||||
to="/e-commerce/checkout"
|
|
||||||
size="large"
|
|
||||||
sx={{
|
|
||||||
top: '50%',
|
|
||||||
position: 'fixed',
|
|
||||||
right: 0,
|
|
||||||
zIndex: theme.zIndex.speedDial,
|
|
||||||
boxShadow: theme.customShadows.warning,
|
|
||||||
bgcolor: 'warning.main',
|
|
||||||
color: 'warning.light',
|
|
||||||
borderRadius: '8px',
|
|
||||||
borderTopRightRadius: 0,
|
|
||||||
borderBottomRightRadius: 0,
|
|
||||||
'&:hover': {
|
|
||||||
bgcolor: 'warning.dark',
|
|
||||||
color: 'warning.light'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IconButton disableRipple aria-label="cart" sx={{ '&:hover': { bgcolor: 'transparent' } }} size="large">
|
|
||||||
<StyledBadge showZero badgeContent={totalQuantity} color="error">
|
|
||||||
<ShoppingCartTwoToneIcon sx={{ color: 'grey.800' }} />
|
|
||||||
</StyledBadge>
|
|
||||||
</IconButton>
|
|
||||||
</Fab>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FloatingCart;
|
|
||||||
@ -1,141 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Avatar, Button, Card, Grid, ListItemIcon, Menu, MenuItem, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
|
|
||||||
import PersonAddTwoToneIcon from '@mui/icons-material/PersonAddTwoTone';
|
|
||||||
import PeopleAltTwoToneIcon from '@mui/icons-material/PeopleAltTwoTone';
|
|
||||||
import PinDropTwoToneIcon from '@mui/icons-material/PinDropTwoTone';
|
|
||||||
|
|
||||||
import FavoriteTwoToneIcon from '@mui/icons-material/FavoriteTwoTone';
|
|
||||||
import DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone';
|
|
||||||
import GroupTwoToneIcon from '@mui/icons-material/GroupTwoTone';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
// ==============================|| SOCIAL PROFILE - FOLLOWER CARD ||============================== //
|
|
||||||
|
|
||||||
const FollowerCard = ({ avatar, follow, location, name }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
|
|
||||||
|
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event?.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
padding: '16px',
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
|
||||||
border: '1px solid',
|
|
||||||
borderColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[100],
|
|
||||||
'&:hover': {
|
|
||||||
border: `1px solid${theme.palette.primary.main}`
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item>
|
|
||||||
<Avatar alt="User 1" src={avatarProfile} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
component="div"
|
|
||||||
sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="subtitle2"
|
|
||||||
sx={{ mt: 0.25, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}
|
|
||||||
>
|
|
||||||
<PinDropTwoToneIcon sx={{ mr: '6px', fontSize: '16px', verticalAlign: 'text-top' }} />
|
|
||||||
{location}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<MoreHorizOutlinedIcon
|
|
||||||
fontSize="small"
|
|
||||||
sx={{
|
|
||||||
color: theme.palette.primary[200],
|
|
||||||
cursor: 'pointer'
|
|
||||||
}}
|
|
||||||
aria-controls="menu-followers-card"
|
|
||||||
aria-haspopup="true"
|
|
||||||
onClick={handleClick}
|
|
||||||
/>
|
|
||||||
<Menu
|
|
||||||
id="menu-followers-card"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<FavoriteTwoToneIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
Favorites
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<GroupTwoToneIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
Edit Friend List
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<DeleteTwoToneIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
Removed
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
{follow === 2 ? (
|
|
||||||
<Button variant="contained" fullWidth startIcon={<PersonAddTwoToneIcon />}>
|
|
||||||
Follow Back
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button variant="outlined" fullWidth startIcon={<PeopleAltTwoToneIcon />}>
|
|
||||||
Followed
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
FollowerCard.propTypes = {
|
|
||||||
avatar: PropTypes.string,
|
|
||||||
follow: PropTypes.number,
|
|
||||||
location: PropTypes.string,
|
|
||||||
name: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FollowerCard;
|
|
||||||
@ -1,141 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Avatar, Button, Card, Grid, IconButton, ListItemIcon, Menu, MenuItem, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project import
|
|
||||||
import { gridSpacing } from 'store/constant';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
|
|
||||||
import FavoriteTwoToneIcon from '@mui/icons-material/FavoriteTwoTone';
|
|
||||||
import DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone';
|
|
||||||
import GroupTwoToneIcon from '@mui/icons-material/GroupTwoTone';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
// ==============================|| SOCIAL PROFILE - FRIEND REQUEST CARD ||============================== //
|
|
||||||
|
|
||||||
const FriendRequestCard = ({ avatar, name, mutual }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
|
|
||||||
|
|
||||||
const btnSX = {
|
|
||||||
borderColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[200],
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.background.paper
|
|
||||||
};
|
|
||||||
|
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event?.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
p: 2,
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
|
||||||
border: '1px solid',
|
|
||||||
borderColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[100],
|
|
||||||
'&:hover': {
|
|
||||||
border: `1px solid${theme.palette.primary.main}`
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item>
|
|
||||||
<Avatar alt="User 1" src={avatarProfile} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Typography variant="h5" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>
|
|
||||||
{name}
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="subtitle2"
|
|
||||||
sx={{ mt: 0.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}
|
|
||||||
>
|
|
||||||
{mutual} mutual friends
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<IconButton size="small" sx={{ mt: -0.75, mr: -0.75 }} onClick={handleClick}>
|
|
||||||
<MoreHorizOutlinedIcon
|
|
||||||
fontSize="small"
|
|
||||||
color="primary"
|
|
||||||
aria-controls="menu-friend-card"
|
|
||||||
aria-haspopup="true"
|
|
||||||
sx={{ opacity: 0.6 }}
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
id="menu-friend-card"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<FavoriteTwoToneIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
Favorites
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<GroupTwoToneIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
Edit Friend List
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<DeleteTwoToneIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
Unfriend
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Button variant="outlined" fullWidth sx={btnSX}>
|
|
||||||
Confirm
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Button variant="outlined" fullWidth color="error" sx={btnSX}>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
FriendRequestCard.propTypes = {
|
|
||||||
avatar: PropTypes.string,
|
|
||||||
mutual: PropTypes.number,
|
|
||||||
name: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FriendRequestCard;
|
|
||||||
@ -1,151 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Avatar, Button, Card, Grid, IconButton, ListItemIcon, Menu, MenuItem, Typography, Tooltip } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import { gridSpacing } from 'store/constant';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
|
|
||||||
import PinDropTwoToneIcon from '@mui/icons-material/PinDropTwoTone';
|
|
||||||
import VideoCallTwoToneIcon from '@mui/icons-material/VideoCallTwoTone';
|
|
||||||
import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
|
|
||||||
|
|
||||||
import FavoriteTwoToneIcon from '@mui/icons-material/FavoriteTwoTone';
|
|
||||||
import DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone';
|
|
||||||
import GroupTwoToneIcon from '@mui/icons-material/GroupTwoTone';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
// ==============================|| SOCIAL PROFILE - FRIENDS CARD ||============================== //
|
|
||||||
|
|
||||||
const FriendsCard = ({ avatar, location, name }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
|
|
||||||
|
|
||||||
const btnSX = {
|
|
||||||
borderColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[200],
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.background.paper
|
|
||||||
};
|
|
||||||
|
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event?.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
p: 2,
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
|
||||||
border: '1px solid',
|
|
||||||
borderColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[100],
|
|
||||||
'&:hover': {
|
|
||||||
border: `1px solid${theme.palette.primary.main}`
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item>
|
|
||||||
<Avatar alt="User 1" src={avatarProfile} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Typography variant="h5" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>
|
|
||||||
{name}
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="subtitle2"
|
|
||||||
sx={{ mt: 0.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}
|
|
||||||
>
|
|
||||||
<PinDropTwoToneIcon fontSize="inherit" sx={{ mr: 0.5, fontSize: '0.875rem', verticalAlign: 'text-top' }} />
|
|
||||||
{location}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<IconButton size="small" sx={{ mt: -0.75, mr: -0.75 }} onClick={handleClick}>
|
|
||||||
<MoreHorizOutlinedIcon
|
|
||||||
fontSize="small"
|
|
||||||
aria-controls="menu-friend-card"
|
|
||||||
aria-haspopup="true"
|
|
||||||
color="primary"
|
|
||||||
sx={{ opacity: 0.6 }}
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
id="menu-friend-card"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<FavoriteTwoToneIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
Favorites
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<GroupTwoToneIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
Edit Friend List
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<DeleteTwoToneIcon fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
Unfriend
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Tooltip title="Video Call" placement="top">
|
|
||||||
<Button variant="outlined" color="secondary" fullWidth sx={btnSX}>
|
|
||||||
<VideoCallTwoToneIcon fontSize="small" />
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Tooltip title="Message" placement="top">
|
|
||||||
<Button variant="outlined" fullWidth sx={btnSX}>
|
|
||||||
<ChatBubbleTwoToneIcon fontSize="small" />
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
FriendsCard.propTypes = {
|
|
||||||
avatar: PropTypes.string,
|
|
||||||
location: PropTypes.string,
|
|
||||||
name: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FriendsCard;
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { ButtonBase, Card, CardContent, CardMedia, Grid, Menu, MenuItem, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import Avatar from 'ui-component/extended/Avatar';
|
|
||||||
import { gridSpacing } from 'store/constant';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone';
|
|
||||||
import EventTwoToneIcon from '@mui/icons-material/EventTwoTone';
|
|
||||||
|
|
||||||
const backImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
// ==============================|| SOCIAL PROFILE - GALLERY CARD ||============================== //
|
|
||||||
|
|
||||||
const GalleryCard = ({ dateTime, image, title }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const backProfile = image && backImage(`./${image}`).default;
|
|
||||||
|
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event?.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
|
||||||
border: theme.palette.mode === 'dark' ? 'none' : '1px solid',
|
|
||||||
borderColor: theme.palette.grey[100]
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardMedia component="img" image={backProfile} title="Slider5 image" />
|
|
||||||
<CardContent sx={{ p: 2, pb: '16px !important' }}>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
sx={{
|
|
||||||
overflow: 'hidden',
|
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
mb: 0.5
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="caption" sx={{ mt: 1, fontSize: '12px' }}>
|
|
||||||
<EventTwoToneIcon sx={{ mr: 0.5, fontSize: '0.875rem', verticalAlign: 'text-top' }} />
|
|
||||||
{dateTime}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<ButtonBase sx={{ borderRadius: '12px' }} onClick={handleClick}>
|
|
||||||
<Avatar
|
|
||||||
variant="rounded"
|
|
||||||
sx={{
|
|
||||||
...theme.typography.commonAvatar,
|
|
||||||
...theme.typography.mediumAvatar,
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
|
|
||||||
color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.secondary.dark,
|
|
||||||
zIndex: 1,
|
|
||||||
transition: 'all .2s ease-in-out',
|
|
||||||
'&[aria-controls="menu-list-grow"],&:hover': {
|
|
||||||
background: theme.palette.secondary.main,
|
|
||||||
color: theme.palette.secondary.light
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
aria-controls="menu-post"
|
|
||||||
aria-haspopup="true"
|
|
||||||
>
|
|
||||||
<MoreVertTwoToneIcon fontSize="inherit" />
|
|
||||||
</Avatar>
|
|
||||||
</ButtonBase>
|
|
||||||
|
|
||||||
<Menu
|
|
||||||
id="menu-gallery-card"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleClose}> Remove Tag</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}> Download</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}> Make Profile Picture </MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}> Make Cover Photo </MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}> Find Support or Report Photo </MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
GalleryCard.propTypes = {
|
|
||||||
dateTime: PropTypes.string,
|
|
||||||
image: PropTypes.string,
|
|
||||||
title: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default GalleryCard;
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { Grid, Stack, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import MainCard from './MainCard';
|
|
||||||
|
|
||||||
// ============================|| HOVER DATA CARD ||============================ //
|
|
||||||
|
|
||||||
const HoverDataCard = ({ title, iconPrimary, primary, secondary, color }) => {
|
|
||||||
const IconPrimary = iconPrimary;
|
|
||||||
const primaryIcon = iconPrimary !== undefined ? <IconPrimary fontSize="large" sx={{ width: 20, height: 20, color }} /> : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MainCard>
|
|
||||||
<Grid container justifyContent="space-between" direction="column" alignItems="center">
|
|
||||||
<Grid item sm={12}>
|
|
||||||
<Typography variant="h5" color="inherit">
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item sm={12}>
|
|
||||||
<Stack direction="row" alignItems="center" spacing={0.5} sx={{ my: 1.75, mx: 'auto' }}>
|
|
||||||
{primaryIcon}
|
|
||||||
<Typography variant="h3">{primary}</Typography>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid item sm={12}>
|
|
||||||
<Typography variant="body2" color="textSecondary">
|
|
||||||
{secondary}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</MainCard>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
HoverDataCard.propTypes = {
|
|
||||||
title: PropTypes.string,
|
|
||||||
iconPrimary: PropTypes.object,
|
|
||||||
primary: PropTypes.number,
|
|
||||||
secondary: PropTypes.string,
|
|
||||||
color: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HoverDataCard;
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { Card, CardContent, Grid, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// ===========================|| HOVER SOCIAL CARD ||=========================== //
|
|
||||||
|
|
||||||
const HoverSocialCard = ({ primary, secondary, iconPrimary, color }) => {
|
|
||||||
const IconPrimary = iconPrimary;
|
|
||||||
const primaryIcon = iconPrimary ? <IconPrimary fontSize="large" /> : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
background: color,
|
|
||||||
position: 'relative',
|
|
||||||
color: '#fff',
|
|
||||||
'&:hover svg': {
|
|
||||||
opacity: '1',
|
|
||||||
transform: 'scale(1.1)'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardContent>
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
position: 'absolute',
|
|
||||||
right: 15,
|
|
||||||
top: 25,
|
|
||||||
color: '#fff',
|
|
||||||
'&> svg': {
|
|
||||||
width: 40,
|
|
||||||
height: 40,
|
|
||||||
opacity: '0.4',
|
|
||||||
transition: 'all .3s ease-in-out'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{primaryIcon}
|
|
||||||
</Typography>
|
|
||||||
<Grid container spacing={0}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="h3" color="inherit">
|
|
||||||
{secondary}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="subtitle2" color="inherit">
|
|
||||||
{primary}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
HoverSocialCard.propTypes = {
|
|
||||||
primary: PropTypes.string,
|
|
||||||
secondary: PropTypes.string,
|
|
||||||
iconPrimary: PropTypes.object,
|
|
||||||
color: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HoverSocialCard;
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { Grid, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import MainCard from './MainCard';
|
|
||||||
|
|
||||||
// =============================|| ICON NUMBER CARD ||============================= //
|
|
||||||
|
|
||||||
const IconNumberCard = ({ title, primary, color, iconPrimary }) => {
|
|
||||||
const IconPrimary = iconPrimary;
|
|
||||||
const primaryIcon = iconPrimary ? <IconPrimary /> : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MainCard>
|
|
||||||
<Grid container spacing={2} alignItems="center">
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container justifyContent="space-between" alignItems="center">
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="subtitle2" sx={{ color }}>
|
|
||||||
{primaryIcon}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="h5" color="inherit">
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="h3">{primary}</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</MainCard>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
IconNumberCard.propTypes = {
|
|
||||||
title: PropTypes.string,
|
|
||||||
primary: PropTypes.string,
|
|
||||||
color: PropTypes.string,
|
|
||||||
iconPrimary: PropTypes.object
|
|
||||||
};
|
|
||||||
|
|
||||||
export default IconNumberCard;
|
|
||||||
@ -1,133 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { Button, CardContent, CardMedia, Grid, Rating, Stack, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project import
|
|
||||||
import MainCard from './MainCard';
|
|
||||||
import SkeletonProductPlaceholder from 'ui-component/cards/Skeleton/ProductPlaceholder';
|
|
||||||
import { useDispatch, useSelector } from 'store';
|
|
||||||
import { addProduct } from 'store/slices/cart';
|
|
||||||
import { openSnackbar } from 'store/slices/snackbar';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import ShoppingCartTwoToneIcon from '@mui/icons-material/ShoppingCartTwoTone';
|
|
||||||
|
|
||||||
const prodImage = require.context('assets/images/e-commerce', true);
|
|
||||||
|
|
||||||
// ==============================|| PRODUCT CARD ||============================== //
|
|
||||||
|
|
||||||
const ProductCard = ({ id, color, name, image, description, offerPrice, salePrice, rating }) => {
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
|
|
||||||
const prodProfile = image && prodImage(`./${image}`).default;
|
|
||||||
const [productRating] = useState(rating);
|
|
||||||
const cart = useSelector((state) => state.cart);
|
|
||||||
|
|
||||||
const addCart = () => {
|
|
||||||
dispatch(addProduct({ id, name, image, salePrice, offerPrice, color, size: 8, quantity: 1 }, cart.checkout.products));
|
|
||||||
dispatch(
|
|
||||||
openSnackbar({
|
|
||||||
open: true,
|
|
||||||
message: 'Add To Cart Success',
|
|
||||||
variant: 'alert',
|
|
||||||
alert: {
|
|
||||||
color: 'success'
|
|
||||||
},
|
|
||||||
close: false
|
|
||||||
})
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [isLoading, setLoading] = useState(true);
|
|
||||||
useEffect(() => {
|
|
||||||
setLoading(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{isLoading ? (
|
|
||||||
<SkeletonProductPlaceholder />
|
|
||||||
) : (
|
|
||||||
<MainCard
|
|
||||||
content={false}
|
|
||||||
boxShadow
|
|
||||||
sx={{
|
|
||||||
'&:hover': {
|
|
||||||
transform: 'scale3d(1.02, 1.02, 1)',
|
|
||||||
transition: 'all .4s ease-in-out'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardMedia
|
|
||||||
sx={{ height: 220 }}
|
|
||||||
image={prodProfile}
|
|
||||||
title="Contemplative Reptile"
|
|
||||||
component={Link}
|
|
||||||
to={`/e-commerce/product-details/${id}`}
|
|
||||||
/>
|
|
||||||
<CardContent sx={{ p: 2 }}>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography component={Link} to={`/e-commerce/product-details/${id}`} variant="subtitle1" sx={{ textDecoration: 'none' }}>
|
|
||||||
{name}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
{description && (
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
overflow: 'hidden',
|
|
||||||
height: 45
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{description}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
<Grid item xs={12} sx={{ pt: '8px !important' }}>
|
|
||||||
<Stack direction="row" alignItems="center" spacing={1}>
|
|
||||||
<Rating precision={0.5} name="size-small" value={productRating} size="small" readOnly />
|
|
||||||
<Typography variant="caption">({offerPrice}+)</Typography>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="h4">${offerPrice}</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="h6" sx={{ color: 'grey.500', textDecoration: 'line-through' }}>
|
|
||||||
${salePrice}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Button variant="contained" sx={{ minWidth: 0 }} onClick={addCart}>
|
|
||||||
<ShoppingCartTwoToneIcon fontSize="small" />
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</MainCard>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
ProductCard.propTypes = {
|
|
||||||
id: PropTypes.number,
|
|
||||||
color: PropTypes.string,
|
|
||||||
name: PropTypes.string,
|
|
||||||
image: PropTypes.string,
|
|
||||||
description: PropTypes.string,
|
|
||||||
offerPrice: PropTypes.number,
|
|
||||||
salePrice: PropTypes.number,
|
|
||||||
rating: PropTypes.number
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProductCard;
|
|
||||||
@ -1,123 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { Divider, Grid, Menu, MenuItem, Rating, Stack, Tooltip, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// third-party
|
|
||||||
import { format } from 'date-fns';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import Avatar from '../extended/Avatar';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import StarTwoToneIcon from '@mui/icons-material/StarTwoTone';
|
|
||||||
import StarBorderTwoToneIcon from '@mui/icons-material/StarBorderTwoTone';
|
|
||||||
import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
|
|
||||||
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
|
|
||||||
import DirectionsRunIcon from '@mui/icons-material/DirectionsRun';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
// ==============================|| PRODUCT DETAILS - REVIEW ||============================== //
|
|
||||||
|
|
||||||
const ProductReview = ({ avatar, date, name, status, rating, review }) => {
|
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event?.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12} md={4} lg={3} xl={2}>
|
|
||||||
<Stack direction="row" alignItems="center" spacing={2}>
|
|
||||||
<Avatar alt={name} src={avatar && avatarImage(`./${avatar}`).default} />
|
|
||||||
<Stack spacing={0.5}>
|
|
||||||
<Stack spacing={1} direction="row" alignItems="center">
|
|
||||||
<Typography variant="subtitle1" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>
|
|
||||||
{name}
|
|
||||||
</Typography>
|
|
||||||
{status && (
|
|
||||||
<Tooltip title="Purchased Verified">
|
|
||||||
<VerifiedUserIcon fontSize="small" sx={{ color: 'success.dark' }} />
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
{!status && (
|
|
||||||
<Tooltip title="Goodwill">
|
|
||||||
<DirectionsRunIcon fontSize="small" sx={{ color: 'error.main' }} />
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
<Typography variant="caption">{format(new Date(date), 'E, MMM d yyyy')}</Typography>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={8} lg={9} xl={10}>
|
|
||||||
<Grid container alignItems="center" spacing={2}>
|
|
||||||
<Grid item xs={11}>
|
|
||||||
<Stack spacing={1}>
|
|
||||||
<Rating
|
|
||||||
size="small"
|
|
||||||
name="simple-controlled"
|
|
||||||
value={rating < 4 ? rating + 1 : rating}
|
|
||||||
icon={<StarTwoToneIcon fontSize="inherit" />}
|
|
||||||
emptyIcon={<StarBorderTwoToneIcon fontSize="inherit" />}
|
|
||||||
precision={0.1}
|
|
||||||
readOnly
|
|
||||||
/>
|
|
||||||
<Typography variant="body2">{review}</Typography>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={1}>
|
|
||||||
<Stack justifyContent="flex-end">
|
|
||||||
<MoreHorizOutlinedIcon
|
|
||||||
fontSize="small"
|
|
||||||
aria-controls="menu-popular-card"
|
|
||||||
aria-haspopup="true"
|
|
||||||
onClick={handleClick}
|
|
||||||
sx={{ color: 'grey.500', cursor: 'pointer' }}
|
|
||||||
/>
|
|
||||||
<Menu
|
|
||||||
id="menu-popular-card"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleClose}> Edit</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}> Delete</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Divider />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
ProductReview.propTypes = {
|
|
||||||
avatar: PropTypes.string,
|
|
||||||
date: PropTypes.string,
|
|
||||||
name: PropTypes.string,
|
|
||||||
status: PropTypes.bool,
|
|
||||||
rating: PropTypes.number,
|
|
||||||
review: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProductReview;
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { Grid, Stack, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import MainCard from './MainCard';
|
|
||||||
|
|
||||||
// ==============================|| REPORT CARD ||============================== //
|
|
||||||
|
|
||||||
const ReportCard = ({ primary, secondary, iconPrimary, color }) => {
|
|
||||||
const IconPrimary = iconPrimary;
|
|
||||||
const primaryIcon = iconPrimary ? <IconPrimary fontSize="large" /> : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MainCard>
|
|
||||||
<Grid container justifyContent="space-between" alignItems="center">
|
|
||||||
<Grid item>
|
|
||||||
<Stack spacing={1}>
|
|
||||||
<Typography variant="h3">{primary}</Typography>
|
|
||||||
<Typography variant="body1">{secondary}</Typography>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="h2" style={{ color }}>
|
|
||||||
{primaryIcon}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</MainCard>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
ReportCard.propTypes = {
|
|
||||||
primary: PropTypes.string,
|
|
||||||
secondary: PropTypes.string,
|
|
||||||
iconPrimary: PropTypes.object,
|
|
||||||
color: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ReportCard;
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Card, CardContent, Grid, Typography, useMediaQuery } from '@mui/material';
|
|
||||||
|
|
||||||
// =============================|| REVENUE CARD ||============================= //
|
|
||||||
|
|
||||||
const RevenueCard = ({ primary, secondary, content, iconPrimary, color }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const matchDownXs = useMediaQuery(theme.breakpoints.down('sm'));
|
|
||||||
|
|
||||||
const IconPrimary = iconPrimary;
|
|
||||||
const primaryIcon = iconPrimary ? <IconPrimary fontSize="large" /> : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card sx={{ background: color, position: 'relative', color: '#fff' }}>
|
|
||||||
<CardContent>
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
position: 'absolute',
|
|
||||||
right: 13,
|
|
||||||
top: 14,
|
|
||||||
color: '#fff',
|
|
||||||
'&> svg': { width: 100, height: 100, opacity: '0.5' },
|
|
||||||
[theme.breakpoints.down('sm')]: {
|
|
||||||
top: 13,
|
|
||||||
'&> svg': { width: 80, height: 80 }
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{primaryIcon}
|
|
||||||
</Typography>
|
|
||||||
<Grid container direction={matchDownXs ? 'column' : 'row'} spacing={1}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="h5" color="inherit">
|
|
||||||
{primary}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="h3" color="inherit">
|
|
||||||
{secondary}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="subtitle2" color="inherit">
|
|
||||||
{content}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
RevenueCard.propTypes = {
|
|
||||||
primary: PropTypes.string,
|
|
||||||
secondary: PropTypes.string,
|
|
||||||
content: PropTypes.string,
|
|
||||||
iconPrimary: PropTypes.object,
|
|
||||||
color: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RevenueCard;
|
|
||||||
@ -1,102 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Box, Card, Grid, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// third party
|
|
||||||
import Chart from 'react-apexcharts';
|
|
||||||
|
|
||||||
// ============================|| SALES LINE CARD ||============================ //
|
|
||||||
|
|
||||||
const SalesLineChartCard = ({ bgColor, chartData, footerData, icon, title, percentage }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
let footerHtml;
|
|
||||||
if (footerData) {
|
|
||||||
footerHtml = footerData.map((item, index) => (
|
|
||||||
<Grid item key={index}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
mt: 3,
|
|
||||||
mb: 3,
|
|
||||||
p: 1
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container direction="column" spacing={1} alignItems="center">
|
|
||||||
<Typography variant="h3" sx={{ mb: 1 }}>
|
|
||||||
{item.value}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1">{item.label}</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Box>
|
|
||||||
</Grid>
|
|
||||||
));
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
color: '#fff',
|
|
||||||
bgcolor: bgColor || theme.palette.primary.dark,
|
|
||||||
p: 3
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container direction="column" spacing={1}>
|
|
||||||
<Grid item container justifyContent="space-between" alignItems="center">
|
|
||||||
{title && (
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="subtitle1" color="inherit">
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
<Grid item>
|
|
||||||
<Grid container alignItems="center">
|
|
||||||
{icon && (
|
|
||||||
<Box
|
|
||||||
component="span"
|
|
||||||
sx={{
|
|
||||||
mr: 2
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{icon}
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
{percentage && (
|
|
||||||
<Typography variant="subtitle1" color="inherit">
|
|
||||||
{percentage}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
{chartData && (
|
|
||||||
<Grid item>
|
|
||||||
<Chart {...chartData} />
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
</Box>
|
|
||||||
{footerData && (
|
|
||||||
<Grid container justifyContent="space-around" alignItems="center">
|
|
||||||
{footerHtml}
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
SalesLineChartCard.propTypes = {
|
|
||||||
title: PropTypes.string,
|
|
||||||
chartData: PropTypes.object,
|
|
||||||
footerData: PropTypes.array,
|
|
||||||
dropData: PropTypes.object,
|
|
||||||
listData: PropTypes.object,
|
|
||||||
bgColor: PropTypes.string,
|
|
||||||
icon: PropTypes.element,
|
|
||||||
percentage: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SalesLineChartCard;
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Box, Grid, Typography, useMediaQuery } from '@mui/material';
|
|
||||||
|
|
||||||
// third party
|
|
||||||
import Chart from 'react-apexcharts';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import MainCard from './MainCard';
|
|
||||||
|
|
||||||
// =============================|| SEO CHART CARD ||============================= //
|
|
||||||
|
|
||||||
const SeoChartCard = ({ chartData, value, title, icon, type }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const matchDownMd = useMediaQuery(theme.breakpoints.down('lg'));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MainCard>
|
|
||||||
<Grid container justifyContent="space-between" spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container direction={type === 1 ? 'column-reverse' : 'column'} spacing={type === 1 ? 0 : 1}>
|
|
||||||
{value && (
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant={matchDownMd ? 'h4' : 'h3'}>{value}</Typography>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
{(title || icon) && (
|
|
||||||
<Grid item container justifyContent="flex-start" alignContent="center">
|
|
||||||
{title && <Typography variant="body1">{title}</Typography>}
|
|
||||||
{icon && (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
ml: 1
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{icon}
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
{chartData && (
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Chart {...chartData} />
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
</MainCard>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
SeoChartCard.propTypes = {
|
|
||||||
chartData: PropTypes.object,
|
|
||||||
title: PropTypes.string,
|
|
||||||
icon: PropTypes.element,
|
|
||||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
||||||
type: PropTypes.number
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SeoChartCard;
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Card, Grid, Typography, useMediaQuery } from '@mui/material';
|
|
||||||
|
|
||||||
// =============================|| SIDE ICON CARD ||============================= //
|
|
||||||
|
|
||||||
const SideIconCard = ({ iconPrimary, primary, secondary, secondarySub, color, bgcolor }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const matchDownXs = useMediaQuery(theme.breakpoints.down('sm'));
|
|
||||||
|
|
||||||
const IconPrimary = iconPrimary;
|
|
||||||
const primaryIcon = iconPrimary !== undefined ? <IconPrimary /> : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card sx={{ bgcolor: bgcolor || '', position: 'relative' }}>
|
|
||||||
<Grid container justifyContent="space-between" alignItems="center">
|
|
||||||
<Grid item xs={4} sx={{ background: color, py: 3.5, px: 0 }}>
|
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
sx={{
|
|
||||||
textAlign: 'center',
|
|
||||||
color: '#fff',
|
|
||||||
'& > svg': {
|
|
||||||
width: 32,
|
|
||||||
height: 32
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
align="center"
|
|
||||||
>
|
|
||||||
{primaryIcon}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={8}>
|
|
||||||
<Grid container direction="column" justifyContent="space-between" spacing={1} alignItems={matchDownXs ? 'center' : 'flex-start'}>
|
|
||||||
<Grid item sm={12}>
|
|
||||||
<Typography variant="h3" sx={{ color: bgcolor ? '#fff' : '', ml: 2 }}>
|
|
||||||
{primary}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item sm={12}>
|
|
||||||
<Typography variant="body2" align="left" sx={{ color: bgcolor ? '#fff' : 'grey.700', ml: 2 }}>
|
|
||||||
{secondary} <span style={{ color }}>{secondarySub}</span>{' '}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
SideIconCard.propTypes = {
|
|
||||||
iconPrimary: PropTypes.object,
|
|
||||||
primary: PropTypes.string,
|
|
||||||
secondary: PropTypes.string,
|
|
||||||
secondarySub: PropTypes.string,
|
|
||||||
color: PropTypes.string,
|
|
||||||
bgcolor: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SideIconCard;
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
// material-ui
|
|
||||||
import { Card, CardContent, Grid } from '@mui/material';
|
|
||||||
import Skeleton from '@mui/material/Skeleton';
|
|
||||||
|
|
||||||
// ==============================|| SKELETON - EARNING CARD ||============================== //
|
|
||||||
|
|
||||||
const EarningCard = () => (
|
|
||||||
<Card>
|
|
||||||
<CardContent>
|
|
||||||
<Grid container direction="column">
|
|
||||||
<Grid item>
|
|
||||||
<Grid container justifyContent="space-between">
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" width={44} height={44} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" width={34} height={34} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" sx={{ my: 2 }} height={40} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" height={30} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default EarningCard;
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
// material-ui
|
|
||||||
import Skeleton from '@mui/material/Skeleton';
|
|
||||||
|
|
||||||
// ==============================|| SKELETON IMAGE CARD ||============================== //
|
|
||||||
|
|
||||||
const ImagePlaceholder = ({ ...others }) => <Skeleton variant="rectangular" {...others} animation="wave" />;
|
|
||||||
|
|
||||||
export default ImagePlaceholder;
|
|
||||||
@ -1,155 +0,0 @@
|
|||||||
// material-ui
|
|
||||||
import { Card, CardContent, Grid } from '@mui/material';
|
|
||||||
import Skeleton from '@mui/material/Skeleton';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import { gridSpacing } from 'store/constant';
|
|
||||||
|
|
||||||
// ==============================|| SKELETON - POPULAR CARD ||============================== //
|
|
||||||
|
|
||||||
const PopularCard = () => (
|
|
||||||
<Card>
|
|
||||||
<CardContent>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container alignItems="center" justifyContent="space-between" spacing={gridSpacing}>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" height={20} width={20} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rectangular" height={150} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" height={16} width={16} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" height={16} width={16} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" height={16} width={16} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" height={16} width={16} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Grid container alignItems="center" spacing={gridSpacing} justifyContent="space-between">
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" height={16} width={16} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
<CardContent sx={{ p: 1.25, display: 'flex', pt: 0, justifyContent: 'center' }}>
|
|
||||||
<Skeleton variant="rectangular" height={25} width={75} />
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default PopularCard;
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
// material-ui
|
|
||||||
import { CardContent, Grid, Skeleton, Stack } from '@mui/material';
|
|
||||||
|
|
||||||
// project import
|
|
||||||
import MainCard from '../MainCard';
|
|
||||||
|
|
||||||
// ===========================|| SKELETON TOTAL GROWTH BAR CHART ||=========================== //
|
|
||||||
|
|
||||||
const ProductPlaceholder = () => (
|
|
||||||
<MainCard content={false} boxShadow>
|
|
||||||
<Skeleton variant="rectangular" height={220} />
|
|
||||||
<CardContent sx={{ p: 2 }}>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rectangular" height={45} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sx={{ pt: '8px !important' }}>
|
|
||||||
<Stack direction="row" alignItems="center" spacing={1}>
|
|
||||||
<Skeleton variant="rectangular" height={20} width={90} />
|
|
||||||
<Skeleton variant="rectangular" height={20} width={38} />
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" height={20} width={40} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" height={17} width={20} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Skeleton variant="rectangular" height={32} width={47} />
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</MainCard>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default ProductPlaceholder;
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
// material-ui
|
|
||||||
import { Card, CardContent, Grid } from '@mui/material';
|
|
||||||
import Skeleton from '@mui/material/Skeleton';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import { gridSpacing } from 'store/constant';
|
|
||||||
|
|
||||||
// ==============================|| SKELETON TOTAL GROWTH BAR CHART ||============================== //
|
|
||||||
|
|
||||||
const TotalGrowthBarChart = () => (
|
|
||||||
<Card>
|
|
||||||
<CardContent>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container alignItems="center" justifyContent="space-between" spacing={gridSpacing}>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="text" />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rectangular" height={20} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Skeleton variant="rectangular" height={50} width={80} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rectangular" height={530} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default TotalGrowthBarChart;
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
// material-ui
|
|
||||||
import { Card, List, ListItem, ListItemAvatar, ListItemText, Skeleton } from '@mui/material';
|
|
||||||
|
|
||||||
// ==============================|| SKELETON - TOTAL INCOME DARK/LIGHT CARD ||============================== //
|
|
||||||
|
|
||||||
const TotalIncomeCard = () => (
|
|
||||||
<Card sx={{ p: 2 }}>
|
|
||||||
<List sx={{ py: 0 }}>
|
|
||||||
<ListItem alignItems="center" disableGutters sx={{ py: 0 }}>
|
|
||||||
<ListItemAvatar>
|
|
||||||
<Skeleton variant="rectangular" width={44} height={44} />
|
|
||||||
</ListItemAvatar>
|
|
||||||
<ListItemText sx={{ py: 0 }} primary={<Skeleton variant="rectangular" height={20} />} secondary={<Skeleton variant="text" />} />
|
|
||||||
</ListItem>
|
|
||||||
</List>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default TotalIncomeCard;
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Box, Card, Grid, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// third party
|
|
||||||
import Chart from 'react-apexcharts';
|
|
||||||
|
|
||||||
// ============================|| TOTAL LINE CHART CARD ||============================ //
|
|
||||||
|
|
||||||
const TotalLineChartCard = ({ bgColor, chartData, title, percentage, value }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<Box sx={{ color: '#fff', bgcolor: bgColor || theme.palette.primary.dark }}>
|
|
||||||
<Box sx={{ p: 2.5 }}>
|
|
||||||
<Grid container direction="column">
|
|
||||||
<Grid item container justifyContent="space-between" alignItems="center">
|
|
||||||
{value && (
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="h3" color="inherit">
|
|
||||||
{value}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
{percentage && (
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="body2" color="inherit">
|
|
||||||
{percentage}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
{title && (
|
|
||||||
<Grid item>
|
|
||||||
<Typography variant="body2" color="inherit">
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
</Box>
|
|
||||||
{chartData && <Chart {...chartData} />}
|
|
||||||
</Box>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
TotalLineChartCard.propTypes = {
|
|
||||||
bgColor: PropTypes.string,
|
|
||||||
chartData: PropTypes.object,
|
|
||||||
title: PropTypes.string,
|
|
||||||
percentage: PropTypes.string,
|
|
||||||
value: PropTypes.number
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TotalLineChartCard;
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { styled } from '@mui/material/styles';
|
|
||||||
import { Card, CardContent, Grid, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// styles
|
|
||||||
const IconWrapper = styled('div')({
|
|
||||||
position: 'absolute',
|
|
||||||
left: '-17px',
|
|
||||||
bottom: '-27px',
|
|
||||||
color: '#fff',
|
|
||||||
transform: 'rotate(25deg)',
|
|
||||||
'&> svg': {
|
|
||||||
width: '100px',
|
|
||||||
height: '100px',
|
|
||||||
opacity: '0.35'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// =============================|| USER NUM CARD ||============================= //
|
|
||||||
|
|
||||||
const UserCountCard = ({ primary, secondary, iconPrimary, color }) => {
|
|
||||||
const IconPrimary = iconPrimary;
|
|
||||||
const primaryIcon = iconPrimary ? <IconPrimary fontSize="large" /> : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card sx={{ background: color, position: 'relative', color: '#fff' }}>
|
|
||||||
<CardContent>
|
|
||||||
<IconWrapper>{primaryIcon}</IconWrapper>
|
|
||||||
<Grid container direction="column" justifyContent="center" alignItems="center" spacing={1}>
|
|
||||||
<Grid item sm={12}>
|
|
||||||
<Typography variant="h3" align="center" color="inherit">
|
|
||||||
{secondary}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item sm={12}>
|
|
||||||
<Typography variant="body1" align="center" color="inherit">
|
|
||||||
{primary}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
UserCountCard.propTypes = {
|
|
||||||
primary: PropTypes.string,
|
|
||||||
secondary: PropTypes.string,
|
|
||||||
iconPrimary: PropTypes.object,
|
|
||||||
color: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserCountCard;
|
|
||||||
@ -1,139 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import { Button, Card, Grid, IconButton, Menu, MenuItem, Typography } from '@mui/material';
|
|
||||||
|
|
||||||
// project imports
|
|
||||||
import { gridSpacing } from 'store/constant';
|
|
||||||
import Avatar from '../extended/Avatar';
|
|
||||||
|
|
||||||
// assets
|
|
||||||
import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
|
|
||||||
import NotInterestedTwoToneIcon from '@mui/icons-material/NotInterestedTwoTone';
|
|
||||||
import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
|
|
||||||
|
|
||||||
const avatarImage = require.context('assets/images/profile', true);
|
|
||||||
|
|
||||||
// ==============================|| USER DETAILS CARD ||============================== //
|
|
||||||
|
|
||||||
const UserDetailsCard = ({ about, avatar, contact, email, location, name, role }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
|
|
||||||
|
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event?.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
p: 2,
|
|
||||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
|
||||||
border: theme.palette.mode === 'dark' ? '1px solid transparent' : `1px solid${theme.palette.grey[100]}`,
|
|
||||||
'&:hover': {
|
|
||||||
borderColor: theme.palette.primary.main
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs zeroMinWidth>
|
|
||||||
<Avatar alt={name} size="lg" src={avatarProfile} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<IconButton size="small" sx={{ mt: -0.75, mr: -0.75 }} onClick={handleClick}>
|
|
||||||
<MoreHorizOutlinedIcon
|
|
||||||
fontSize="small"
|
|
||||||
color="inherit"
|
|
||||||
aria-controls="menu-friend-card"
|
|
||||||
aria-haspopup="true"
|
|
||||||
sx={{ opacity: 0.6 }}
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
id="menu-user-details-card"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorEl)}
|
|
||||||
onClose={handleClose}
|
|
||||||
variant="selectedMenu"
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleClose}>Edit</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>Delete</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="h3" component="div">
|
|
||||||
{name}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="caption">{role}</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="subtitle2" sx={{ color: theme.palette.grey[700] }}>
|
|
||||||
{about}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography variant="caption">Email</Typography>
|
|
||||||
<Typography variant="h6">{email}</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={gridSpacing}>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Typography variant="caption">Phone</Typography>
|
|
||||||
<Typography variant="h6">{contact}</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Typography variant="caption">Location</Typography>
|
|
||||||
<Typography variant="h6">{location}</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Button variant="outlined" fullWidth startIcon={<ChatBubbleTwoToneIcon />}>
|
|
||||||
Message
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Button variant="outlined" color="error" fullWidth startIcon={<NotInterestedTwoToneIcon />}>
|
|
||||||
Block
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
UserDetailsCard.propTypes = {
|
|
||||||
about: PropTypes.string,
|
|
||||||
avatar: PropTypes.string,
|
|
||||||
contact: PropTypes.string,
|
|
||||||
email: PropTypes.string,
|
|
||||||
location: PropTypes.string,
|
|
||||||
name: PropTypes.string,
|
|
||||||
role: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserDetailsCard;
|
|
||||||
@ -1,166 +1,166 @@
|
|||||||
// material-ui
|
// // material-ui
|
||||||
import { useTheme } from '@mui/material/styles';
|
// import { useTheme } from '@mui/material/styles';
|
||||||
import { Grid, Typography, useMediaQuery } from '@mui/material';
|
// import { Grid, Typography, useMediaQuery } from '@mui/material';
|
||||||
|
//
|
||||||
// project imports
|
// // project imports
|
||||||
import MarketShareAreaChartCard from './MarketShareAreaChartCard';
|
// import MarketShareAreaChartCard from './MarketShareAreaChartCard';
|
||||||
import TotalRevenueCard from './TotalRevenueCard';
|
// import TotalRevenueCard from './TotalRevenueCard';
|
||||||
import LatestCustomerTableCard from './LatestCustomerTableCard';
|
// import LatestCustomerTableCard from './LatestCustomerTableCard';
|
||||||
import MainCard from 'ui-component/cards/MainCard';
|
// import MainCard from 'ui-component/cards/MainCard';
|
||||||
import RevenueCard from 'ui-component/cards/RevenueCard';
|
// import RevenueCard from 'ui-component/cards/RevenueCard';
|
||||||
import UserCountCard from 'ui-component/cards/UserCountCard';
|
// import UserCountCard from 'ui-component/cards/UserCountCard';
|
||||||
import { gridSpacing } from 'store/constant';
|
// import { gridSpacing } from 'store/constant';
|
||||||
|
//
|
||||||
// assets
|
// // assets
|
||||||
import { IconShare, IconAccessPoint, IconCircles, IconCreditCard } from '@tabler/icons';
|
// import { IconShare, IconAccessPoint, IconCircles, IconCreditCard } from '@tabler/icons';
|
||||||
import MonetizationOnTwoToneIcon from '@mui/icons-material/MonetizationOnTwoTone';
|
// import MonetizationOnTwoToneIcon from '@mui/icons-material/MonetizationOnTwoTone';
|
||||||
import AccountCircleTwoTone from '@mui/icons-material/AccountCircleTwoTone';
|
// import AccountCircleTwoTone from '@mui/icons-material/AccountCircleTwoTone';
|
||||||
import DescriptionTwoToneIcon from '@mui/icons-material/DescriptionTwoTone';
|
// 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 container spacing={gridSpacing}>
|
||||||
<Grid item xs={12} lg={8} md={6}>
|
// <Grid item xs={12} lg={8} md={6}>
|
||||||
<Grid container spacing={gridSpacing}>
|
// <Grid container spacing={gridSpacing}>
|
||||||
<Grid item xs={12}>
|
// <Grid item xs={12}>
|
||||||
<MarketShareAreaChartCard />
|
// <MarketShareAreaChartCard />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item xs={12} lg={6}>
|
// <Grid item xs={12} lg={6}>
|
||||||
<RevenueCard
|
// <RevenueCard
|
||||||
primary="Revenue"
|
// primary="Revenue"
|
||||||
secondary="$42,562"
|
// secondary="$42,562"
|
||||||
content="$50,032 Last Month"
|
// content="$50,032 Last Month"
|
||||||
iconPrimary={MonetizationOnTwoToneIcon}
|
// iconPrimary={MonetizationOnTwoToneIcon}
|
||||||
color={theme.palette.secondary.main}
|
// color={theme.palette.secondary.main}
|
||||||
/>
|
// />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item xs={12} lg={6}>
|
// <Grid item xs={12} lg={6}>
|
||||||
<RevenueCard
|
// <RevenueCard
|
||||||
primary="Orders Received"
|
// primary="Orders Received"
|
||||||
secondary="486"
|
// secondary="486"
|
||||||
content="20% Increase"
|
// content="20% Increase"
|
||||||
iconPrimary={AccountCircleTwoTone}
|
// iconPrimary={AccountCircleTwoTone}
|
||||||
color={theme.palette.primary.main}
|
// color={theme.palette.primary.main}
|
||||||
/>
|
// />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item xs={12}>
|
// <Grid item xs={12}>
|
||||||
<LatestCustomerTableCard title="Latest Customers" />
|
// <LatestCustomerTableCard title="Latest Customers" />
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item xs={12} lg={4} md={6}>
|
// <Grid item xs={12} lg={4} md={6}>
|
||||||
<Grid container spacing={gridSpacing}>
|
// <Grid container spacing={gridSpacing}>
|
||||||
<Grid item xs={12}>
|
// <Grid item xs={12}>
|
||||||
<MainCard
|
// <MainCard
|
||||||
content={false}
|
// content={false}
|
||||||
sx={{
|
// sx={{
|
||||||
'& svg': {
|
// '& svg': {
|
||||||
width: 50,
|
// width: 50,
|
||||||
height: 50,
|
// height: 50,
|
||||||
color: theme.palette.secondary.main,
|
// color: theme.palette.secondary.main,
|
||||||
borderRadius: '14px',
|
// borderRadius: '14px',
|
||||||
p: 1.25,
|
// p: 1.25,
|
||||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.background.default : 'primary.light'
|
// bgcolor: theme.palette.mode === 'dark' ? theme.palette.background.default : 'primary.light'
|
||||||
}
|
// }
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
<Grid container alignItems="center" spacing={0}>
|
// <Grid container alignItems="center" spacing={0}>
|
||||||
<Grid item xs={12} sm={6} sx={blockSX}>
|
// <Grid item xs={12} sm={6} sx={blockSX}>
|
||||||
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
// <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||||
<Grid item>
|
// <Grid item>
|
||||||
<IconShare stroke={1.5} />
|
// <IconShare stroke={1.5} />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item sm zeroMinWidth>
|
// <Grid item sm zeroMinWidth>
|
||||||
<Typography variant="h5" align="center">
|
// <Typography variant="h5" align="center">
|
||||||
1000
|
// 1000
|
||||||
</Typography>
|
// </Typography>
|
||||||
<Typography variant="subtitle2" align="center">
|
// <Typography variant="subtitle2" align="center">
|
||||||
SHARES
|
// SHARES
|
||||||
</Typography>
|
// </Typography>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item xs={12} sm={6} sx={blockSX}>
|
// <Grid item xs={12} sm={6} sx={blockSX}>
|
||||||
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
// <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||||
<Grid item>
|
// <Grid item>
|
||||||
<IconAccessPoint stroke={1.5} />
|
// <IconAccessPoint stroke={1.5} />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item sm zeroMinWidth>
|
// <Grid item sm zeroMinWidth>
|
||||||
<Typography variant="h5" align="center">
|
// <Typography variant="h5" align="center">
|
||||||
600
|
// 600
|
||||||
</Typography>
|
// </Typography>
|
||||||
<Typography variant="subtitle2" align="center">
|
// <Typography variant="subtitle2" align="center">
|
||||||
NETWORK
|
// NETWORK
|
||||||
</Typography>
|
// </Typography>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid container alignItems="center" spacing={0}>
|
// <Grid container alignItems="center" spacing={0}>
|
||||||
<Grid item xs={12} sm={6} sx={blockSX}>
|
// <Grid item xs={12} sm={6} sx={blockSX}>
|
||||||
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
// <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||||
<Grid item>
|
// <Grid item>
|
||||||
<IconCircles stroke={1.5} />
|
// <IconCircles stroke={1.5} />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item sm zeroMinWidth>
|
// <Grid item sm zeroMinWidth>
|
||||||
<Typography variant="h5" align="center">
|
// <Typography variant="h5" align="center">
|
||||||
3550
|
// 3550
|
||||||
</Typography>
|
// </Typography>
|
||||||
<Typography variant="subtitle2" align="center">
|
// <Typography variant="subtitle2" align="center">
|
||||||
RETURNS
|
// RETURNS
|
||||||
</Typography>
|
// </Typography>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item xs={12} sm={6} sx={blockSX}>
|
// <Grid item xs={12} sm={6} sx={blockSX}>
|
||||||
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
// <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||||
<Grid item>
|
// <Grid item>
|
||||||
<IconCreditCard stroke={1.5} />
|
// <IconCreditCard stroke={1.5} />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item sm zeroMinWidth>
|
// <Grid item sm zeroMinWidth>
|
||||||
<Typography variant="h5" align="center">
|
// <Typography variant="h5" align="center">
|
||||||
100%
|
// 100%
|
||||||
</Typography>
|
// </Typography>
|
||||||
<Typography variant="subtitle2" align="center">
|
// <Typography variant="subtitle2" align="center">
|
||||||
ORDER
|
// ORDER
|
||||||
</Typography>
|
// </Typography>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</MainCard>
|
// </MainCard>
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item xs={12}>
|
// <Grid item xs={12}>
|
||||||
<TotalRevenueCard title="Total Revenue" />
|
// <TotalRevenueCard title="Total Revenue" />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item xs={12}>
|
// <Grid item xs={12}>
|
||||||
<UserCountCard primary="Daily user" secondary="1,658" iconPrimary={AccountCircleTwoTone} color={theme.palette.secondary.main} />
|
// <UserCountCard primary="Daily user" secondary="1,658" iconPrimary={AccountCircleTwoTone} color={theme.palette.secondary.main} />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item xs={12}>
|
// <Grid item xs={12}>
|
||||||
<UserCountCard
|
// <UserCountCard
|
||||||
primary="Daily page view"
|
// primary="Daily page view"
|
||||||
secondary="1K"
|
// secondary="1K"
|
||||||
iconPrimary={DescriptionTwoToneIcon}
|
// iconPrimary={DescriptionTwoToneIcon}
|
||||||
color={theme.palette.primary.main}
|
// color={theme.palette.primary.main}
|
||||||
/>
|
// />
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
);
|
// );
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
export default Analytics;
|
// export default Analytics;
|
||||||
|
|||||||
@ -1,59 +1,59 @@
|
|||||||
import { useEffect, useState } from 'react';
|
// import { useEffect, useState } from 'react';
|
||||||
|
//
|
||||||
// material-ui
|
// // material-ui
|
||||||
import { Grid } from '@mui/material';
|
// import { Grid } from '@mui/material';
|
||||||
|
//
|
||||||
// project imports
|
// // project imports
|
||||||
import EarningCard from './EarningCard';
|
// import EarningCard from './EarningCard';
|
||||||
import PopularCard from './PopularCard';
|
// import PopularCard from './PopularCard';
|
||||||
import TotalOrderLineChartCard from './TotalOrderLineChartCard';
|
// import TotalOrderLineChartCard from './TotalOrderLineChartCard';
|
||||||
import TotalIncomeDarkCard from './TotalIncomeDarkCard';
|
// import TotalIncomeDarkCard from './TotalIncomeDarkCard';
|
||||||
import TotalIncomeLightCard from './TotalIncomeLightCard';
|
// import TotalIncomeLightCard from './TotalIncomeLightCard';
|
||||||
import TotalGrowthBarChart from './TotalGrowthBarChart';
|
// import TotalGrowthBarChart from './TotalGrowthBarChart';
|
||||||
import { gridSpacing } from 'store/constant';
|
// 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 container spacing={gridSpacing}>
|
||||||
<Grid item xs={12}>
|
// <Grid item xs={12}>
|
||||||
<Grid container spacing={gridSpacing}>
|
// <Grid container spacing={gridSpacing}>
|
||||||
<Grid item lg={4} md={6} sm={6} xs={12}>
|
// <Grid item lg={4} md={6} sm={6} xs={12}>
|
||||||
<EarningCard isLoading={isLoading} />
|
// <EarningCard isLoading={isLoading} />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item lg={4} md={6} sm={6} xs={12}>
|
// <Grid item lg={4} md={6} sm={6} xs={12}>
|
||||||
<TotalOrderLineChartCard isLoading={isLoading} />
|
// <TotalOrderLineChartCard isLoading={isLoading} />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item lg={4} md={12} sm={12} xs={12}>
|
// <Grid item lg={4} md={12} sm={12} xs={12}>
|
||||||
<Grid container spacing={gridSpacing}>
|
// <Grid container spacing={gridSpacing}>
|
||||||
<Grid item sm={6} xs={12} md={6} lg={12}>
|
// <Grid item sm={6} xs={12} md={6} lg={12}>
|
||||||
<TotalIncomeDarkCard isLoading={isLoading} />
|
// <TotalIncomeDarkCard isLoading={isLoading} />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item sm={6} xs={12} md={6} lg={12}>
|
// <Grid item sm={6} xs={12} md={6} lg={12}>
|
||||||
<TotalIncomeLightCard isLoading={isLoading} />
|
// <TotalIncomeLightCard isLoading={isLoading} />
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item xs={12}>
|
// <Grid item xs={12}>
|
||||||
<Grid container spacing={gridSpacing}>
|
// <Grid container spacing={gridSpacing}>
|
||||||
<Grid item xs={12} md={8}>
|
// <Grid item xs={12} md={8}>
|
||||||
<TotalGrowthBarChart isLoading={isLoading} />
|
// <TotalGrowthBarChart isLoading={isLoading} />
|
||||||
</Grid>
|
// </Grid>
|
||||||
<Grid item xs={12} md={4}>
|
// <Grid item xs={12} md={4}>
|
||||||
<PopularCard isLoading={isLoading} />
|
// <PopularCard isLoading={isLoading} />
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
</Grid>
|
// </Grid>
|
||||||
);
|
// );
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
export default Dashboard;
|
// export default Dashboard;
|
||||||
|
|||||||
Loading…
Reference in New Issue