parent
530fd10c9a
commit
408ec70720
@ -1,39 +1,39 @@
|
||||
// third-party
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
// assets
|
||||
import { IconDashboard, IconDeviceAnalytics } from '@tabler/icons';
|
||||
|
||||
// constant
|
||||
const icons = {
|
||||
IconDashboard,
|
||||
IconDeviceAnalytics
|
||||
};
|
||||
|
||||
// ==============================|| DASHBOARD MENU ITEMS ||============================== //
|
||||
|
||||
const dashboard = {
|
||||
id: 'dashboard',
|
||||
title: <FormattedMessage id="dashboard" />,
|
||||
type: 'group',
|
||||
children: [
|
||||
{
|
||||
id: 'default',
|
||||
title: <FormattedMessage id="default" />,
|
||||
type: 'item',
|
||||
url: '/dashboard/default',
|
||||
icon: icons.IconDashboard,
|
||||
breadcrumbs: false
|
||||
},
|
||||
{
|
||||
id: 'analytics',
|
||||
title: <FormattedMessage id="analytics" />,
|
||||
type: 'item',
|
||||
url: '/dashboard/analytics',
|
||||
icon: icons.IconDeviceAnalytics,
|
||||
breadcrumbs: false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default dashboard;
|
||||
// // third-party
|
||||
// import { FormattedMessage } from 'react-intl';
|
||||
//
|
||||
// // assets
|
||||
// import { IconDashboard, IconDeviceAnalytics } from '@tabler/icons';
|
||||
//
|
||||
// // constant
|
||||
// const icons = {
|
||||
// IconDashboard,
|
||||
// IconDeviceAnalytics
|
||||
// };
|
||||
//
|
||||
// // ==============================|| DASHBOARD MENU ITEMS ||============================== //
|
||||
//
|
||||
// const dashboard = {
|
||||
// id: 'dashboard',
|
||||
// title: <FormattedMessage id="dashboard" />,
|
||||
// type: 'group',
|
||||
// children: [
|
||||
// {
|
||||
// id: 'default',
|
||||
// title: <FormattedMessage id="default" />,
|
||||
// type: 'item',
|
||||
// url: '/dashboard/default',
|
||||
// icon: icons.IconDashboard,
|
||||
// breadcrumbs: false
|
||||
// },
|
||||
// {
|
||||
// id: 'analytics',
|
||||
// title: <FormattedMessage id="analytics" />,
|
||||
// type: 'item',
|
||||
// url: '/dashboard/analytics',
|
||||
// icon: icons.IconDeviceAnalytics,
|
||||
// breadcrumbs: false
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
//
|
||||
// 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
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { Grid, Typography, useMediaQuery } from '@mui/material';
|
||||
|
||||
// project imports
|
||||
import MarketShareAreaChartCard from './MarketShareAreaChartCard';
|
||||
import TotalRevenueCard from './TotalRevenueCard';
|
||||
import LatestCustomerTableCard from './LatestCustomerTableCard';
|
||||
import MainCard from 'ui-component/cards/MainCard';
|
||||
import RevenueCard from 'ui-component/cards/RevenueCard';
|
||||
import UserCountCard from 'ui-component/cards/UserCountCard';
|
||||
import { gridSpacing } from 'store/constant';
|
||||
|
||||
// assets
|
||||
import { IconShare, IconAccessPoint, IconCircles, IconCreditCard } from '@tabler/icons';
|
||||
import MonetizationOnTwoToneIcon from '@mui/icons-material/MonetizationOnTwoTone';
|
||||
import AccountCircleTwoTone from '@mui/icons-material/AccountCircleTwoTone';
|
||||
import DescriptionTwoToneIcon from '@mui/icons-material/DescriptionTwoTone';
|
||||
|
||||
// ==============================|| ANALYTICS DASHBOARD ||============================== //
|
||||
|
||||
const Analytics = () => {
|
||||
const theme = useTheme();
|
||||
const matchDownXs = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
|
||||
const blockSX = {
|
||||
p: 2.5,
|
||||
borderLeft: '1px solid ',
|
||||
borderBottom: '1px solid ',
|
||||
borderLeftColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[200],
|
||||
borderBottomColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[200]
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item xs={12} lg={8} md={6}>
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item xs={12}>
|
||||
<MarketShareAreaChartCard />
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={6}>
|
||||
<RevenueCard
|
||||
primary="Revenue"
|
||||
secondary="$42,562"
|
||||
content="$50,032 Last Month"
|
||||
iconPrimary={MonetizationOnTwoToneIcon}
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={6}>
|
||||
<RevenueCard
|
||||
primary="Orders Received"
|
||||
secondary="486"
|
||||
content="20% Increase"
|
||||
iconPrimary={AccountCircleTwoTone}
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LatestCustomerTableCard title="Latest Customers" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={4} md={6}>
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item xs={12}>
|
||||
<MainCard
|
||||
content={false}
|
||||
sx={{
|
||||
'& svg': {
|
||||
width: 50,
|
||||
height: 50,
|
||||
color: theme.palette.secondary.main,
|
||||
borderRadius: '14px',
|
||||
p: 1.25,
|
||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.background.default : 'primary.light'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Grid container alignItems="center" spacing={0}>
|
||||
<Grid item xs={12} sm={6} sx={blockSX}>
|
||||
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||
<Grid item>
|
||||
<IconShare stroke={1.5} />
|
||||
</Grid>
|
||||
<Grid item sm zeroMinWidth>
|
||||
<Typography variant="h5" align="center">
|
||||
1000
|
||||
</Typography>
|
||||
<Typography variant="subtitle2" align="center">
|
||||
SHARES
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} sx={blockSX}>
|
||||
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||
<Grid item>
|
||||
<IconAccessPoint stroke={1.5} />
|
||||
</Grid>
|
||||
<Grid item sm zeroMinWidth>
|
||||
<Typography variant="h5" align="center">
|
||||
600
|
||||
</Typography>
|
||||
<Typography variant="subtitle2" align="center">
|
||||
NETWORK
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container alignItems="center" spacing={0}>
|
||||
<Grid item xs={12} sm={6} sx={blockSX}>
|
||||
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||
<Grid item>
|
||||
<IconCircles stroke={1.5} />
|
||||
</Grid>
|
||||
<Grid item sm zeroMinWidth>
|
||||
<Typography variant="h5" align="center">
|
||||
3550
|
||||
</Typography>
|
||||
<Typography variant="subtitle2" align="center">
|
||||
RETURNS
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} sx={blockSX}>
|
||||
<Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||
<Grid item>
|
||||
<IconCreditCard stroke={1.5} />
|
||||
</Grid>
|
||||
<Grid item sm zeroMinWidth>
|
||||
<Typography variant="h5" align="center">
|
||||
100%
|
||||
</Typography>
|
||||
<Typography variant="subtitle2" align="center">
|
||||
ORDER
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MainCard>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TotalRevenueCard title="Total Revenue" />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<UserCountCard primary="Daily user" secondary="1,658" iconPrimary={AccountCircleTwoTone} color={theme.palette.secondary.main} />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<UserCountCard
|
||||
primary="Daily page view"
|
||||
secondary="1K"
|
||||
iconPrimary={DescriptionTwoToneIcon}
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default Analytics;
|
||||
// // material-ui
|
||||
// import { useTheme } from '@mui/material/styles';
|
||||
// import { Grid, Typography, useMediaQuery } from '@mui/material';
|
||||
//
|
||||
// // project imports
|
||||
// import MarketShareAreaChartCard from './MarketShareAreaChartCard';
|
||||
// import TotalRevenueCard from './TotalRevenueCard';
|
||||
// import LatestCustomerTableCard from './LatestCustomerTableCard';
|
||||
// import MainCard from 'ui-component/cards/MainCard';
|
||||
// import RevenueCard from 'ui-component/cards/RevenueCard';
|
||||
// import UserCountCard from 'ui-component/cards/UserCountCard';
|
||||
// import { gridSpacing } from 'store/constant';
|
||||
//
|
||||
// // assets
|
||||
// import { IconShare, IconAccessPoint, IconCircles, IconCreditCard } from '@tabler/icons';
|
||||
// import MonetizationOnTwoToneIcon from '@mui/icons-material/MonetizationOnTwoTone';
|
||||
// import AccountCircleTwoTone from '@mui/icons-material/AccountCircleTwoTone';
|
||||
// import DescriptionTwoToneIcon from '@mui/icons-material/DescriptionTwoTone';
|
||||
//
|
||||
// // ==============================|| ANALYTICS DASHBOARD ||============================== //
|
||||
//
|
||||
// const Analytics = () => {
|
||||
// const theme = useTheme();
|
||||
// const matchDownXs = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
//
|
||||
// const blockSX = {
|
||||
// p: 2.5,
|
||||
// borderLeft: '1px solid ',
|
||||
// borderBottom: '1px solid ',
|
||||
// borderLeftColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[200],
|
||||
// borderBottomColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[200]
|
||||
// };
|
||||
//
|
||||
// return (
|
||||
// <Grid container spacing={gridSpacing}>
|
||||
// <Grid item xs={12} lg={8} md={6}>
|
||||
// <Grid container spacing={gridSpacing}>
|
||||
// <Grid item xs={12}>
|
||||
// <MarketShareAreaChartCard />
|
||||
// </Grid>
|
||||
// <Grid item xs={12} lg={6}>
|
||||
// <RevenueCard
|
||||
// primary="Revenue"
|
||||
// secondary="$42,562"
|
||||
// content="$50,032 Last Month"
|
||||
// iconPrimary={MonetizationOnTwoToneIcon}
|
||||
// color={theme.palette.secondary.main}
|
||||
// />
|
||||
// </Grid>
|
||||
// <Grid item xs={12} lg={6}>
|
||||
// <RevenueCard
|
||||
// primary="Orders Received"
|
||||
// secondary="486"
|
||||
// content="20% Increase"
|
||||
// iconPrimary={AccountCircleTwoTone}
|
||||
// color={theme.palette.primary.main}
|
||||
// />
|
||||
// </Grid>
|
||||
// <Grid item xs={12}>
|
||||
// <LatestCustomerTableCard title="Latest Customers" />
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// <Grid item xs={12} lg={4} md={6}>
|
||||
// <Grid container spacing={gridSpacing}>
|
||||
// <Grid item xs={12}>
|
||||
// <MainCard
|
||||
// content={false}
|
||||
// sx={{
|
||||
// '& svg': {
|
||||
// width: 50,
|
||||
// height: 50,
|
||||
// color: theme.palette.secondary.main,
|
||||
// borderRadius: '14px',
|
||||
// p: 1.25,
|
||||
// bgcolor: theme.palette.mode === 'dark' ? theme.palette.background.default : 'primary.light'
|
||||
// }
|
||||
// }}
|
||||
// >
|
||||
// <Grid container alignItems="center" spacing={0}>
|
||||
// <Grid item xs={12} sm={6} sx={blockSX}>
|
||||
// <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||
// <Grid item>
|
||||
// <IconShare stroke={1.5} />
|
||||
// </Grid>
|
||||
// <Grid item sm zeroMinWidth>
|
||||
// <Typography variant="h5" align="center">
|
||||
// 1000
|
||||
// </Typography>
|
||||
// <Typography variant="subtitle2" align="center">
|
||||
// SHARES
|
||||
// </Typography>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// <Grid item xs={12} sm={6} sx={blockSX}>
|
||||
// <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||
// <Grid item>
|
||||
// <IconAccessPoint stroke={1.5} />
|
||||
// </Grid>
|
||||
// <Grid item sm zeroMinWidth>
|
||||
// <Typography variant="h5" align="center">
|
||||
// 600
|
||||
// </Typography>
|
||||
// <Typography variant="subtitle2" align="center">
|
||||
// NETWORK
|
||||
// </Typography>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// <Grid container alignItems="center" spacing={0}>
|
||||
// <Grid item xs={12} sm={6} sx={blockSX}>
|
||||
// <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||
// <Grid item>
|
||||
// <IconCircles stroke={1.5} />
|
||||
// </Grid>
|
||||
// <Grid item sm zeroMinWidth>
|
||||
// <Typography variant="h5" align="center">
|
||||
// 3550
|
||||
// </Typography>
|
||||
// <Typography variant="subtitle2" align="center">
|
||||
// RETURNS
|
||||
// </Typography>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// <Grid item xs={12} sm={6} sx={blockSX}>
|
||||
// <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
|
||||
// <Grid item>
|
||||
// <IconCreditCard stroke={1.5} />
|
||||
// </Grid>
|
||||
// <Grid item sm zeroMinWidth>
|
||||
// <Typography variant="h5" align="center">
|
||||
// 100%
|
||||
// </Typography>
|
||||
// <Typography variant="subtitle2" align="center">
|
||||
// ORDER
|
||||
// </Typography>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </MainCard>
|
||||
// </Grid>
|
||||
// <Grid item xs={12}>
|
||||
// <TotalRevenueCard title="Total Revenue" />
|
||||
// </Grid>
|
||||
// <Grid item xs={12}>
|
||||
// <UserCountCard primary="Daily user" secondary="1,658" iconPrimary={AccountCircleTwoTone} color={theme.palette.secondary.main} />
|
||||
// </Grid>
|
||||
// <Grid item xs={12}>
|
||||
// <UserCountCard
|
||||
// primary="Daily page view"
|
||||
// secondary="1K"
|
||||
// iconPrimary={DescriptionTwoToneIcon}
|
||||
// color={theme.palette.primary.main}
|
||||
// />
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// );
|
||||
// };
|
||||
//
|
||||
// export default Analytics;
|
||||
|
||||
@ -1,59 +1,59 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
// material-ui
|
||||
import { Grid } from '@mui/material';
|
||||
|
||||
// project imports
|
||||
import EarningCard from './EarningCard';
|
||||
import PopularCard from './PopularCard';
|
||||
import TotalOrderLineChartCard from './TotalOrderLineChartCard';
|
||||
import TotalIncomeDarkCard from './TotalIncomeDarkCard';
|
||||
import TotalIncomeLightCard from './TotalIncomeLightCard';
|
||||
import TotalGrowthBarChart from './TotalGrowthBarChart';
|
||||
import { gridSpacing } from 'store/constant';
|
||||
|
||||
// ==============================|| DEFAULT DASHBOARD ||============================== //
|
||||
|
||||
const Dashboard = () => {
|
||||
const [isLoading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item lg={4} md={6} sm={6} xs={12}>
|
||||
<EarningCard isLoading={isLoading} />
|
||||
</Grid>
|
||||
<Grid item lg={4} md={6} sm={6} xs={12}>
|
||||
<TotalOrderLineChartCard isLoading={isLoading} />
|
||||
</Grid>
|
||||
<Grid item lg={4} md={12} sm={12} xs={12}>
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item sm={6} xs={12} md={6} lg={12}>
|
||||
<TotalIncomeDarkCard isLoading={isLoading} />
|
||||
</Grid>
|
||||
<Grid item sm={6} xs={12} md={6} lg={12}>
|
||||
<TotalIncomeLightCard isLoading={isLoading} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item xs={12} md={8}>
|
||||
<TotalGrowthBarChart isLoading={isLoading} />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<PopularCard isLoading={isLoading} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
// import { useEffect, useState } from 'react';
|
||||
//
|
||||
// // material-ui
|
||||
// import { Grid } from '@mui/material';
|
||||
//
|
||||
// // project imports
|
||||
// import EarningCard from './EarningCard';
|
||||
// import PopularCard from './PopularCard';
|
||||
// import TotalOrderLineChartCard from './TotalOrderLineChartCard';
|
||||
// import TotalIncomeDarkCard from './TotalIncomeDarkCard';
|
||||
// import TotalIncomeLightCard from './TotalIncomeLightCard';
|
||||
// import TotalGrowthBarChart from './TotalGrowthBarChart';
|
||||
// import { gridSpacing } from 'store/constant';
|
||||
//
|
||||
// // ==============================|| DEFAULT DASHBOARD ||============================== //
|
||||
//
|
||||
// const Dashboard = () => {
|
||||
// const [isLoading, setLoading] = useState(true);
|
||||
// useEffect(() => {
|
||||
// setLoading(false);
|
||||
// }, []);
|
||||
//
|
||||
// return (
|
||||
// <Grid container spacing={gridSpacing}>
|
||||
// <Grid item xs={12}>
|
||||
// <Grid container spacing={gridSpacing}>
|
||||
// <Grid item lg={4} md={6} sm={6} xs={12}>
|
||||
// <EarningCard isLoading={isLoading} />
|
||||
// </Grid>
|
||||
// <Grid item lg={4} md={6} sm={6} xs={12}>
|
||||
// <TotalOrderLineChartCard isLoading={isLoading} />
|
||||
// </Grid>
|
||||
// <Grid item lg={4} md={12} sm={12} xs={12}>
|
||||
// <Grid container spacing={gridSpacing}>
|
||||
// <Grid item sm={6} xs={12} md={6} lg={12}>
|
||||
// <TotalIncomeDarkCard isLoading={isLoading} />
|
||||
// </Grid>
|
||||
// <Grid item sm={6} xs={12} md={6} lg={12}>
|
||||
// <TotalIncomeLightCard isLoading={isLoading} />
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// <Grid item xs={12}>
|
||||
// <Grid container spacing={gridSpacing}>
|
||||
// <Grid item xs={12} md={8}>
|
||||
// <TotalGrowthBarChart isLoading={isLoading} />
|
||||
// </Grid>
|
||||
// <Grid item xs={12} md={4}>
|
||||
// <PopularCard isLoading={isLoading} />
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// );
|
||||
// };
|
||||
//
|
||||
// export default Dashboard;
|
||||
|
||||
Loading…
Reference in New Issue