Skip to content

Commit

Permalink
Change bg color
Browse files Browse the repository at this point in the history
  • Loading branch information
HoaAyWK committed Nov 12, 2022
1 parent 645f2b7 commit 664c52d
Show file tree
Hide file tree
Showing 31 changed files with 716 additions and 349 deletions.
7 changes: 6 additions & 1 deletion src/app/slices/categorySlice.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createSlice, createAsyncThunk, createEntityAdapter } from '@reduxjs/toolkit';
import { createSlice, createAsyncThunk, createEntityAdapter, createSelector } from '@reduxjs/toolkit';
import axios from 'axios';

import { action_status, BASE_API_URL, MESSAGE_VARIANT } from '../constants';
Expand Down Expand Up @@ -155,4 +155,9 @@ export const {
const { reducer, actions } = categorySlice;
export const { refresh } = actions;

export const selectRootCategories = createSelector(
[selectAllCategories],
(categories) => categories.filter(category => !category.parent)
);

export default reducer;
82 changes: 82 additions & 0 deletions src/app/slices/transactionSlice.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { createSlice, createEntityAdapter, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

import { action_status, BASE_API_URL } from '../constants';
import { setMessage } from './messageSlice';
import { MESSAGE_VARIANT } from '../constants';

const transactionsAdapter = createEntityAdapter();

const initialState = transactionsAdapter.getInitialState({
status: action_status.IDLE,
error: null,
isUpdated: false
});

export const getTransactions = createAsyncThunk(
'transactions/getTransactions',
async () => {
const { data } = await axios.get(`${BASE_API_URL}/admin/transactions/all`, { withCredentials: true });
return data;
}
);

export const updateTransaction = createAsyncThunk(
'transactions/update',
async (id, thunkApi) => {
try {
const { data } = await axios.put(`${BASE_API_URL}/admin/transactions/${id}`, '',{ withCredentials: true });

return data;
} catch (error) {
const message = (error.response && error.response.data && error.response.data.message)
|| error.message || error.toString();

thunkApi.dispatch(setMessage({ message, variant: MESSAGE_VARIANT.ERROR }));

return thunkApi.rejectWithValue();
}
}
)

const transactionSlice = createSlice({
name: 'transactions',
initialState,
reducers: {
refresh: (state, action) => {
state.isUpdated = false;
}
},
extraReducers: (builder) => {
builder
.addCase(getTransactions.pending, (state, action) => {
state.status = action_status.LOADING;
})
.addCase(getTransactions.fulfilled, (state, action) => {
state.status = action_status.SUCCEEDED;
transactionsAdapter.setAll(state, action.payload.transactions);
})
.addCase(getTransactions.rejected, (state, action) => {
state.status = action_status.FAILED;
state.error = action.error;
})
.addCase(updateTransaction.pending, (state, action) => {
state.isUpdated = false;
})
.addCase(updateTransaction.fulfilled, (state, action) => {
state.isUpdated = true;
})
}
});

const { reducer, actions } = transactionSlice;

export const {
selectAll: selectAllTransactions,
selectById: selectTransactionById,
selectIds: selectTransactionIds
} = transactionsAdapter.getSelectors((state) => state.transactions);

export const { refresh } = actions;

export default reducer;
6 changes: 4 additions & 2 deletions src/app/store.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import paymentReducer from './slices/paymentSlice';
import statisticReducer from './slices/statisticSlice';
import feedbackReducer from './slices/feedbackSlice';
import commentReducer from './slices/commentSlice';
import offerReducer from './slices/offerSlice'
import offerReducer from './slices/offerSlice';
import transactionReducer from './slices/transactionSlice';

export const store = configureStore({
reducer: {
Expand All @@ -23,6 +24,7 @@ export const store = configureStore({
statistic: statisticReducer,
feedbacks: feedbackReducer,
comments: commentReducer,
offers: offerReducer
offers: offerReducer,
transactions: transactionReducer
},
});
1 change: 1 addition & 0 deletions src/assets/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions src/components/AlertDialog.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
import { styled } from '@mui/material/styles';

const ButtonStyle = styled(Button)(({ theme }) => ({
backgroundColor: 'none',
color: theme.palette.grey[600],
'&:hover': {
backgroundColor: theme.palette.grey[500_24]
}
}));

const AlertDialog = (props) => {
const { open, handleClose, handleConfirm, title, content, itemId, color } = props;

const handleClick = () => {
handleConfirm(itemId);
handleClose();
};

return (
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{title}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{content}
</DialogContentText>
</DialogContent>
<DialogActions>
<ButtonStyle onClick={handleClose}>Cancel</ButtonStyle>
<Button onClick={handleClick} autoFocus color={color} >Confirm</Button>
</DialogActions>
</Dialog>
)
};

export default AlertDialog;
4 changes: 2 additions & 2 deletions src/components/LetterAvatar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function stringToColor(string) {
let i;

/* eslint-disable no-bitwise */
for (i = 0; i < string.length; i += 1) {
for (i = 0; i < string?.length; i += 1) {
hash = string.charCodeAt(i) + ((hash << 5) - hash);
}

Expand All @@ -26,7 +26,7 @@ function stringAvatar(name) {
sx: {
bgcolor: stringToColor(name),
},
children: `${name[0]}`,
children: `${name ? name[0] : '' }`,
};
}

Expand Down
43 changes: 4 additions & 39 deletions src/components/Logo.jsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link as RouterLink } from 'react-router-dom';

import { useTheme } from '@mui/material/styles';
import { Box } from '@mui/material';

const Logo = ({ disabledLink = false, sx }) => {
const theme = useTheme();
import { ReactComponent as AppLogo } from '../assets/logo.svg';

const PRIMARY_LIGHT = theme.palette.primary.light;
const PRIMARY_MAIN = theme.palette.primary.main;
const PRIMARY_DARK = theme.palette.primary.dark;
const Logo = ({ disabledLink = false, sx }) => {
const logo = (
<Box sx={{ width: 40, height: 40, ...sx }}>
<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 512 512'>
<defs>
<linearGradient id='BG1' x1='100%' xs='50%' y1='9.946%' y2='50%'>
<stop offset='0%' stopColor={PRIMARY_DARK} />
<stop offset='100%' stopColor={PRIMARY_MAIN} />
</linearGradient>
<linearGradient id='BG2' x1='50%' x2='50%' y1='0%' y2='100%'>
<stop offset='0%' stopColor={PRIMARY_LIGHT} />
<stop offset='100%' stopColor={PRIMARY_MAIN} />
</linearGradient>
<linearGradient id='BG3' x1='50%' x2='50%' y1='0%' y2='100%'>
<stop offset='0%' stopColor={PRIMARY_LIGHT} />
<stop offset='100%' stopColor={PRIMARY_MAIN} />
</linearGradient>
</defs>

<g fill={PRIMARY_MAIN} fillRule='evenodd' stroke='none' strokeWidth='1'>
<path
fill='url(#BG1)'
d='M183.168 285.573l-2.918 5.298-2.973 5.363-2.846 5.095-2.274 4.043-2.186 3.857-2.506 4.383-1.6 2.774-2.294 3.939-1.099 1.869-1.416 2.388-1.025 1.713-1.317 2.18-.95 1.558-1.514 2.447-.866 1.38-.833 1.312-.802 1.246-.77 1.18-.739 1.111-.935 1.38-.664.956-.425.6-.41.572-.59.8-.376.497-.537.69-.171.214c-10.76 13.37-22.496 23.493-36.93 29.334-30.346 14.262-68.07 14.929-97.202-2.704l72.347-124.682 2.8-1.72c49.257-29.326 73.08 1.117 94.02 40.927z'
/>
<path
fill='url(#BG2)'
d='M444.31 229.726c-46.27-80.956-94.1-157.228-149.043-45.344-7.516 14.384-12.995 42.337-25.267 42.337v-.142c-12.272 0-17.75-27.953-25.265-42.337C189.79 72.356 141.96 148.628 95.69 229.584c-3.483 6.106-6.828 11.932-9.69 16.996 106.038-67.127 97.11 135.667 184 137.278V384c86.891-1.611 77.962-204.405 184-137.28-2.86-5.062-6.206-10.888-9.69-16.994'
/>
<path
fill='url(#BG3)'
d='M450 384c26.509 0 48-21.491 48-48s-21.491-48-48-48-48 21.491-48 48 21.491 48 48 48'
/>
</g>
</svg>
<Box sx={{ width: 80, height: 80, ...sx }}>
<AppLogo />
</Box>
);

Expand Down
4 changes: 2 additions & 2 deletions src/components/NavSection.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ const NavItem = ({ item, active }) => {
};

const activeRootStyle = {
color: 'primary.main',
color: 'success.dark',
fontWeight: 'fontWeightMedium',
bgcolor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
bgcolor: alpha(theme.palette.success.main, theme.palette.action.selectedOpacity),
};

const activeSubStyle = {
Expand Down
2 changes: 1 addition & 1 deletion src/components/chart/EarningChart.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const EarningChart = (props) => {
useEffect(() => {
setOptions((prevState) => ({
...prevState,
colors: [theme.palette.primary.main, theme.palette.primary[700]],
colors: [theme.palette.success.main, theme.palette.success[700]],
xaxis: {
categories:
slot === 'month'
Expand Down
57 changes: 16 additions & 41 deletions src/components/tables/SimpleTableListToolbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const RootStyle = styled(Toolbar)(({ theme }) => ({
height: 96,
display: 'flex',
justifyContent: 'space-between',
paddingInlineStart: theme.spacing(2)
}));

const SearchStyle = styled(OutlinedInput)(({ theme }) => ({
Expand All @@ -24,56 +25,30 @@ const SearchStyle = styled(OutlinedInput)(({ theme }) => ({
},
}));

const TableListToolbar = ({ numSelected, filterName, onFilterName, title }) => {
const SimpleTableListToolbar = ({ filterName, onFilterName, title }) => {
return (
<RootStyle
sx={{
...(numSelected > 0 && {
color: 'primary.main',
bgcolor: 'primary.lighter',
}),
}}
disableGutters
>
{numSelected > 0 ? (
<Typography component="div" variant="subtitle1">
{numSelected} selected
</Typography>
) : (
<SearchStyle
value={filterName}
onChange={onFilterName}
placeholder={`Search ${title}...`}
startAdornment={
<InputAdornment position="start">
<Iconify icon="eva:search-fill" sx={{ color: 'text.disabled', width: 20, height: 20 }} />
</InputAdornment>
}
/>
)}

{numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton>
<Iconify icon="eva:trash-2-fill" />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
<IconButton>
<Iconify icon="ic:round-filter-list" />
</IconButton>
</Tooltip>
)}
>
<SearchStyle
value={filterName}
onChange={onFilterName}
placeholder={`Search ${title}...`}
startAdornment={
<InputAdornment position="start">
<Iconify icon="eva:search-fill" sx={{ color: 'text.disabled', width: 20, height: 20 }} />
</InputAdornment>
}
/>
<div></div>
</RootStyle>
);
};

TableListToolbar.propTypes = {
numSelected: PropTypes.number,
SimpleTableListToolbar.propTypes = {
filterName: PropTypes.string,
onFilterName: PropTypes.func,
title: PropTypes.string,
};

export default TableListToolbar;
export default SimpleTableListToolbar;
4 changes: 3 additions & 1 deletion src/components/tables/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export { default as TableListHead } from './TableListHead';
export { default as TableListToolbar } from './TableListToolbar';
export { default as MoreMenu } from './MoreMenu';
export { default as MoreMenu } from './MoreMenu';
export { default as SimpleTableListToolbar } from './SimpleTableListToolbar';
export { default as SimpleTableListHead } from './SimpleTableListHead';
12 changes: 10 additions & 2 deletions src/features/account/AccountForm.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,14 @@ const PaperStyle = styled(Paper)(({theme}) => ({
zIndex: 0
}));

const LoadingButtonStyle = styled(LoadingButton)(({ theme }) => ({
backgroundColor: theme.palette.success.dark,
'&:hover': {
backgroundColor: theme.palette.success.main,
},
color: '#fff'
}));

const BoxFieldStyle = styled('div')(({theme}) => ({
gap: '24px 16px',
display: 'grid',
Expand Down Expand Up @@ -125,9 +133,9 @@ const AccountForm = (props) => {
<Box
sx={{ display: 'flex', justifyContent: 'flex-end' }}
>
<LoadingButton size="large" type="submit" variant="contained" loading={updateStatus === action_status.LOADING ? true : false}>
<LoadingButtonStyle size="large" type="submit" variant="contained" loading={updateStatus === action_status.LOADING ? true : false}>
Save Changes
</LoadingButton>
</LoadingButtonStyle>
</Box>
</PaperStyle>
</Grid>
Expand Down
Loading

0 comments on commit 664c52d

Please sign in to comment.