update code

package.json

@@ -43,6 +43,7 @@
     "node-sass": "^7.0.1",
     "notistack": "^0.8.8",
     "prop-types": "^15.7.2",
+    "react-date-range": "^1.4.0",
     "qwest": "^4.5.0",
     "react": "^16.8.6",
     "react-apexcharts": "^1.3.7",

src/app/RootRoutes.jsx

@@ -11,8 +11,9 @@ import MyAccountRouters from './views/MyAccount/MyAccountRoute'
 import FuntionRouters from './views/Company/Function/FuntionRoutes'
 import SystemRouters from './views/System/SystemRouters'
 import  ProductRoutes from './views/product/ProductRouters'
- 
- 
+import TransactionRouters from './views/Transaction/TransactionRouters'
+import FeeRouters from './views/Fee/FeeRouters'
+import MerchantRoutes from './views/Merchant/MerchantRoutes'
 
 const redirectRoute = [
     {
@@ -29,6 +30,9 @@ const errorRoute = [
 ]
 
 const routes = [
+    ...MerchantRoutes,
+    ...FeeRouters,
+    ...TransactionRouters,
     ...ProductRoutes,
     ...SystemRouters,
     ...FuntionRouters,

src/app/apis/Functions/dropdown.js

@@ -44,3 +44,13 @@ export const dropdownProductType = async (body) =>
     GetData(url.dropdownProductType, body)
         .then((res) => res)
         .catch((err) => null)
+
+export const dropdownStore = async (id) =>
+    GetData(`${url.dropdownStore}/${id}`, {})
+        .then((res) => res)
+        .catch((err) => null)
+
+export const dropdownMerchant = async (body) =>
+    GetData(url.dropdownMerchant, body)
+        .then((res) => res)
+        .catch((err) => null)

src/app/apis/Functions/transaction.js

+/* eslint-disable handle-callback-err */
+import { PostData, GetURL, GetData } from '../helpers'
+import url from '../url'
+
+export const listTransaction = async (body) =>
+    PostData(url.listTransaction, body)
+        .then((res) => res)
+        .catch((err) => null)
+
+export const listFee = async (body) =>
+    PostData(url.listFee, body)
+        .then((res) => res)
+        .catch((err) => null)

src/app/apis/url.js

@@ -61,12 +61,16 @@ export default {
     urlDeleteProduct: `${root}/product/delete`,
     urlDetailProduct: `${root}/product`,
     changeStatusProduct: `${root}/product/changeStatus`,
-
+    listTransaction: `${root}/paymentTrans/list`,
     //Log
     logAuth: `${root}/logging/listLogin`,
     logApi: `${root}/logging/listCallApi`,
     logAction: `${root}/logging/listAction`,
 
+    urlUploadFile: `${root}/upload/uploadfile`,
+
+    listFee: `${root}/discountFee/list`,
+
     //dropdown
     dropdownFuntions: `${root}/dropdown/function`,
     dropdownPermission: `${root}/function/getFunctionTree`,
@@ -75,4 +79,7 @@ export default {
     dropdownUserGroup: `${root}/dropdown/usergroup`,
     dropdownListActive: `${root}/dropdown/status`,
     dropdownProductType: `${root}/dropdown/productType`,
+    dropdownProduct: `${root}/dropdown/productList`,
+    dropdownStore: `${root}/dropdown/listStore`,
+    dropdownMerchant: `${root}/dropdown/listmerchant`,
 }

src/app/components/Input/DateHome.js

+import React, { useState, useEffect } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import Popover from '@material-ui/core/Popover'
+import Typography from '@material-ui/core/Typography'
+import Button from '@material-ui/core/Button'
+import { DateRangePicker } from 'react-date-range'
+import { convertDate } from 'app/config/Function'
+import 'react-date-range/dist/styles.css' // main css file
+import 'react-date-range/dist/theme/default.css' // theme css file
+const useStyles = makeStyles((theme) => ({
+    typography: {
+        padding: theme.spacing(2),
+    },
+}))
+
+export default function SimplePopover(props) {
+    const classes = useStyles()
+    const [anchorEl, setAnchorEl] = React.useState(null)
+
+    // useEffect(() => {
+    //     getInitDate()
+    // }, [])
+
+    // const getInitDate = () => {
+    //     let dateOffset = 24 * 60 * 60 * 1000 * 5 //5 days
+    //     let myDate = new Date()
+    //     myDate.setTime(myDate.getTime() - dateOffset)
+    //     if (myDate)
+    //         setSelectionRange({
+    //             startDate: myDate,
+    //             endDate: new Date(),
+    //         })
+    // }
+
+    const [selectionRange, setSelectionRange] = useState({
+        startDate: new Date(),
+        endDate: new Date(),
+    })
+
+    const handleSelect = (date) => {
+        setSelectionRange(date.range1)
+    }
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget)
+    }
+
+    const handleClose = () => {
+        setAnchorEl(null)
+    }
+
+    const onPress = () => {
+        props.changeDateRange(selectionRange.startDate, selectionRange.endDate)
+        setAnchorEl(null)
+    }
+    const onCancel = () => {
+        props.changeDateRange(null, null)
+        setAnchorEl(null)
+    }
+    const open = Boolean(anchorEl)
+    const id = open ? 'simple-popover' : undefined
+
+    return (
+        <div>
+            <Button
+                style={{
+                    padding: 10,
+                    height: 40,
+                    width: '100%',
+                }}
+                variant={'outlined'}
+                onClick={handleClick}
+            >
+                {props.date ? (
+                    <p>
+                        {convertDate(selectionRange.startDate)} -{' '}
+                        {convertDate(selectionRange.endDate)}{' '}
+                    </p>
+                ) : (
+                    <p>dd/mm/YY-dd/mm/YY</p>
+                )}
+            </Button>
+
+            <Popover
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'center',
+                }}
+            >
+                <DateRangePicker
+                    ranges={[selectionRange]}
+                    onChange={handleSelect}
+                />
+                <div
+                    style={{
+                        justifyContent: 'right',
+                        alignItems: 'flex-end',
+                        display: 'flex',
+                        paddingRight: 10,
+                        paddingBottom: 15,
+                    }}
+                >
+                    <Button
+                        style={{
+                            width: 100,
+                            height: 30,
+                            marginRight: 20,
+                        }}
+                        onClick={() => onCancel()}
+                        variant="contained"
+                    >
+                        <Typography variant={'caption'}>Huỷ</Typography>
+                    </Button>
+                    <Button
+                        style={{
+                            width: 100,
+                            height: 30,
+                        }}
+                        onClick={() => onPress()}
+                        variant="contained"
+                        color="primary"
+                    >
+                        <Typography variant={'caption'}>Áp dụng</Typography>
+                    </Button>
+                </div>
+            </Popover>
+        </div>
+    )
+}

src/app/config/Function.js

@@ -14,6 +14,20 @@ export function objectMap(object, mapFn) {
     }, {})
 }
 
+export const toPriceVndInput = (str) => {
+    if (str) {
+        let stringPrice = str.toString().split('.')
+        let headStringPrice = `${stringPrice[0].replace(
+            /(\d)(?=(\d{3})+(?!\d))/g,
+            '$1.'
+        )}`
+        return stringPrice.length === 1
+            ? headStringPrice
+            : headStringPrice.concat(`,${stringPrice[1]}`)
+    } else {
+        return null
+    }
+}
 export const trimObject = (object) => {
     var newObject = objectMap(object, function (value) {
         if (typeof value == 'string') return value.trim()

src/app/contexts/JWTAuthContext.js

@@ -158,11 +158,11 @@ export const AuthProvider = ({ children }) => {
                     if (res.data.code == 200 && res.data.data) {
                         const user = res.data.data
                         let listPath = []
-                        user.user_permissions.map((item) => {
-                            if (item.actions) {
-                                item.actions.map((e) => listPath.push(e.path))
-                            }
-                        })
+                        // user.user_permissions.map((item) => {
+                        //     if (item.actions) {
+                        //         item.actions.map((e) => listPath.push(e.path))
+                        //     }
+                        // })
                         dispatch({
                             type: 'INIT',
                             payload: {

src/app/navigations.js

@@ -56,6 +56,13 @@ export const navigations = [
             },
         ],
     },
+    {
+        name: 'Quản lý giao dịch',
+        path: '/transations',
+        icon: 'dashboard',
+        id: 'DASHBOARD',
+        hide: false,
+    },
 
     {
         name: 'Quản lý hệ thống',
@@ -125,11 +132,23 @@ export const navigationsAdmin = [
         id: 'DASHBOARD',
         hide: false,
     },
+
+    {
+        name: 'Quản lý merchant',
+        path: '/merchant',
+        icon: 'apartment',
+        id: 'MERCHANT',
+        hide: false,
+    },
+
     {
-        label: 'Khách hàng',
-        type: 'label',
+        name: 'Quản lý cây xăng',
+        path: '/gas-stations',
+        icon: 'local_gas_station',
+        id: 'GAS_STATION',
         hide: false,
     },
+
     {
         name: 'Quản lý sản phẩm',
         icon: 'wb_iridescent',
@@ -152,6 +171,21 @@ export const navigationsAdmin = [
             },
         ],
     },
+    {
+        name: 'Quản lý giao dịch',
+        path: '/transations',
+        icon: 'receipt_long',
+        id: 'DASHBOARD',
+        hide: false,
+    },
+
+    {
+        name: 'Quản lý thu phí',
+        path: '/list-fee',
+        icon: 'diamond',
+        id: 'DASHBOARD',
+        hide: false,
+    },
 
     {
         name: 'Quản lý hệ thống',

src/app/styles/Table.js

@@ -6,7 +6,7 @@ const useStyles = makeStyles((theme) => ({
     },
     container: {
         maxHeight: 580,
-        wordBreak: "break-word !important" ,
+        wordBreak: 'break-word !important',
     },
     action: {
         width: '130px',
@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({
         objectFitL: 'cover',
     },
     formControl: {
-        minWidth: 90,
+        minWidth: 110,
     },
     border: {
         borderRight: '0.05px solid #e0e0e0',

src/app/views/Company/Department/Table.js

@@ -122,7 +122,7 @@ function TableList(props) {
                             <TableCell
                                 style={{
                                     backgroundColor: colors.headerTable,
-                                    width: 105,
+                                    width: 125,
                                 }}
                             >
                                 Trạng thái

src/app/views/Company/Employee/Table.js

@@ -120,7 +120,7 @@ function TableList(props) {
                             <TableCell
                                 style={{
                                     backgroundColor: colors.headerTable,
-                                    width: 105,
+                                    width: 125,
                                 }}
                             >
                                 Trạng thái

src/app/views/Company/Function/Table.js

@@ -127,7 +127,7 @@ function TableList(props) {
                             <TableCell
                                 style={{
                                     backgroundColor: colors.headerTable,
-                                    width: 105,
+                                    width: 125,
                                 }}
                             >
                                 Trạng thái

src/app/views/Company/GroupRole/Table.js

@@ -119,7 +119,7 @@ function TableList(props) {
                             <TableCell
                                 style={{
                                     backgroundColor: colors.headerTable,
-                                    width: 105,
+                                    width: 125,
                                 }}
                             >
                                 Trạng thái

src/app/views/Company/Role/Table.js

@@ -127,7 +127,7 @@ function TableList(props) {
                             <TableCell
                                 style={{
                                     backgroundColor: colors.headerTable,
-                                    width: 105,
+                                    width: 125,
                                 }}
                             >
                                 Trạng thái

src/app/views/Fee/FeeRouters.js

+import React from 'react'
+
+const FeeRouters = [
+    {
+        path: '/list-fee',
+        component: React.lazy(() => import('./Index')),
+    },
+]
+
+export default FeeRouters

src/app/views/Fee/Index.js

+import React, { useState, useEffect } from 'react'
+import LogAuth from './View'
+import { listFee } from 'app/apis/Functions/transaction'
+import { useHistory } from 'react-router-dom'
+import { toPriceVnd, convertDate } from 'app/config/Function'
+import { connect } from 'react-redux'
+import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
+import { toast } from 'react-toastify'
+import useDebounce from 'app/hooks/useDebounce'
+import { dropdownStore, dropdownMerchant } from 'app/apis/Functions/dropdown'
+
+const ToolNotificate = (props) => {
+    const [txtSearch, setTxtSearch] = useState('')
+    const [applications, setApplications] = useState('')
+    const [pageIndex, setPageIndex] = useState(0)
+    const [pageSize] = useState(10)
+    const [totalRecords, setTotalRecord] = useState(0)
+    const history = useHistory()
+    const searchDebount = useDebounce(txtSearch, 1000)
+    const [startDate, setStartDate] = useState(new Date())
+    const [endDate, setEndDate] = useState(new Date())
+    const [report, setReport] = useState()
+
+    const [listModule, setListModule] = useState([])
+    const [listMerchant, setListMerchant] = useState([])
+    const [merchant, setMerchant] = useState()
+
+    const [module, setModule] = useState(null)
+
+    const [data, setData] = useState([])
+    useEffect(() => {
+        getDropDownMerchant()
+    }, [])
+
+    useEffect(() => {
+        setTimeout(() => {
+            setModule()
+        }, 500)
+
+        if (merchant) {
+            getDropDownStore(merchant)
+        }
+    }, [merchant])
+
+    const changeDateRange = (start, end) => {
+        setStartDate(start)
+        setEndDate(end)
+    }
+
+    const getDropDownStore = async (id) => {
+        try {
+            const res = await dropdownStore(id)
+            console.log(res)
+            setListModule(res.data.data)
+        } catch (err) {
+            //toast.error(t(err))
+        }
+    }
+
+    const getDropDownMerchant = async () => {
+        try {
+            const res = await dropdownMerchant()
+            console.log(res)
+            const newList = res.data.data.map((e) => {
+                return { ...e, name: e.merchant_name }
+            })
+            setListMerchant(newList)
+        } catch (err) {
+            //toast.error(t(err))
+        }
+    }
+
+    const getData = async () => {
+        props.showLoading()
+        const res = await listFee({
+            text_search: searchDebount,
+            page_no: pageIndex + 1,
+            page_size: pageSize,
+            from_date: startDate ? convertDate(startDate) : null,
+            to_date: endDate ? convertDate(endDate) : null,
+            store_id: module,
+            merchant_id: merchant,
+            status: null,
+        })
+        props.hideLoading()
+        console.log('res.data.data', res.data.data)
+
+        if (res.data.code == 200 && res.data.data) {
+            setReport(res.data.data.data)
+            const newList = res.data.data.data.details.map((e, i) => {
+                return { ...e, index: i + 1 + pageIndex * pageSize }
+            })
+            setData(newList)
+            setTotalRecord(res.data.data.total_elements)
+        } else if (res.data.code == 401) {
+            setTimeout(() => {
+                history.push('/')
+            }, 100)
+        } else {
+            toast.error('Lấy dữ liệu thất bại!', {
+                theme: 'colored',
+            })
+        }
+    }
+
+    useEffect(() => {
+        getData()
+    }, [searchDebount, pageIndex, startDate, module, merchant])
+
+    return (
+        <LogAuth
+            data={data}
+            setTxtSearch={setTxtSearch}
+            pageIndex={pageIndex}
+            setPageIndex={setPageIndex}
+            totalRecords={totalRecords}
+            setApplications={setApplications}
+            applications={applications}
+            startDate={startDate}
+            changeDateRange={changeDateRange}
+            listModule={listModule}
+            module={module}
+            setModule={setModule}
+            report={report}
+            listMerchant={listMerchant}
+            merchant={merchant}
+            setMerchant={setMerchant}
+        />
+    )
+}
+
+const mapStateToProps = (state) => {
+    return {}
+}
+export default connect(mapStateToProps, { showLoading, hideLoading })(
+    ToolNotificate
+)

src/app/views/Fee/Table.js

+import React, { useState } from 'react'
+import {
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableContainer,
+    TablePagination,
+    TableRow,
+    IconButton,
+    MenuItem,
+    Tooltip,
+    Icon,
+} from '@material-ui/core'
+import EditIcon from '@material-ui/icons/Edit'
+import DeleteIcon from '@material-ui/icons/Delete'
+import colors from '../../assets/Color'
+import useStyles from '../../styles/Table'
+import { Breadcrumb, SimpleCard } from 'app/components'
+import { toPriceVnd } from 'app/config/Function'
+const columns = [
+    {
+        id: 'index',
+        label: 'STT',
+        align: 'center',
+        minWidth: 80,
+    },
+
+    {
+        id: 'date_trans',
+        label: 'Ngày giao dịch',
+        align: 'left',
+        minWidth: 'auto',
+    },
+
+    {
+        id: 'store_name',
+        label: 'Tên cây xăng',
+        align: 'left',
+        minWidth: 'auto',
+    },
+    {
+        id: 'total_trans',
+        label: 'Tổng số giao dịch',
+        align: 'left',
+        minWidth: 'auto',
+    },
+
+    {
+        id: 'fee',
+        label: 'Tổng phí phải nộp',
+        align: 'left',
+        minWidth: 'auto',
+        isMonney: true,
+    },
+
+    {
+        id: 'status',
+        label: 'Trạng thái thu phí',
+        align: 'left',
+        minWidth: 160,
+    },
+]
+
+function TableList(props) {
+    const classes = useStyles()
+    const {
+        data,
+        handeChangeActive,
+        removeItem,
+        changeActive,
+        setChangeActive,
+        setPageIndex,
+        setPageSize,
+        pageIndex,
+        totalRecords,
+    } = props
+
+    const handleChangePage = (event, newPage) => {
+        setPageIndex(newPage)
+    }
+    const handleChangeRowsPerPage = (event) => {
+        setPageSize(event.target.value)
+    }
+
+    return (
+        <Paper className={classes.root}>
+            <TableContainer className={classes.container}>
+                <Table stickyHeader aria-label="sticky table">
+                    <TableHead>
+                        <TableRow>
+                            {columns.map((column) => (
+                                <TableCell
+                                    key={column.id}
+                                    align={'center'}
+                                    style={{
+                                        width: column.minWidth,
+                                        backgroundColor: colors.headerTable,
+                                    }}
+                                >
+                                    {column.label}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    </TableHead>
+                    <TableBody className={classes.columnTable}>
+                        {data.map((row) => {
+                            return (
+                                <TableRow
+                                    hover
+                                    role="checkbox"
+                                    tabIndex={-1}
+                                    key={row.code}
+                                >
+                                    {columns.map((column) => {
+                                        const data = row[column.id]
+                                        return (
+                                            <TableCell
+                                                key={column.id}
+                                                align={column.align}
+                                                style={{
+                                                    textAlign:
+                                                        column.id === 'index'
+                                                            ? 'center'
+                                                            : typeof data ==
+                                                              'string'
+                                                            ? 'left'
+                                                            : 'right',
+                                                }}
+                                            >
+                                                {column.isMonney
+                                                    ? toPriceVnd(data)
+                                                    : data}
+                                            </TableCell>
+                                        )
+                                    })}
+                                </TableRow>
+                            )
+                        })}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+            <TablePagination
+                component="div"
+                page={pageIndex}
+                count={totalRecords}
+                rowsPerPage={10}
+                rowsPerPageOptions={[]}
+                onChangePage={handleChangePage}
+                onChangeRowsPerPage={handleChangeRowsPerPage}
+            />
+        </Paper>
+    )
+}
+
+export default TableList

src/app/views/Fee/View.js

+import React, { Fragment, useState, useEffect } from 'react'
+import {
+    TextField,
+    Icon,
+    Button,
+    StepLabel,
+    Step,
+    Stepper,
+    Grid,
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+    Typography,
+} from '@material-ui/core'
+import Table from './Table'
+import { Breadcrumb } from 'app/components'
+import { Link } from 'react-router-dom'
+import { Autocomplete, createFilterOptions } from '@material-ui/lab'
+import DateRange from 'app/components/Input/DateHome'
+import { toPriceVnd, convertDate } from 'app/config/Function'
+function CustomerView(props) {
+    const [age, setAge] = React.useState('')
+    const {
+        data,
+        setTxtSearch,
+        changeActive,
+        setChangeActive,
+        handeChangeActive,
+        setPageIndex,
+        pageIndex,
+        totalRecords,
+        setApplications,
+        applications,
+        startDate,
+        changeDateRange,
+        listModule,
+        module,
+        setModule,
+        report,
+        listMerchant,
+        merchant,
+        setMerchant,
+    } = props
+
+    const handleChange = (event) => {
+        setAge(event.target.value)
+    }
+    return (
+        <Fragment>
+            <div className="m-sm-30">
+                <div className="mb-sm-30">
+                    <Breadcrumb
+                        routeSegments={[
+                            {
+                                name: 'Danh sách thu phí',
+                                path: '/list-fee',
+                            },
+                        ]}
+                    />
+                </div>
+
+                <Grid
+                    style={{
+                        padding: 10,
+                        marginBottom: 10,
+                    }}
+                    justify={'space-between'}
+                    alignItems={'center'}
+                    container
+                    spacing={3}
+                >
+                    <Grid
+                        container
+                        spacing={2}
+                        item
+                        lg={12}
+                        md={12}
+                        sm={12}
+                        xs={12}
+                    >
+                        <Grid lg={3} md={3} sm={3} xs={3} item>
+                            <TextField
+                                variant="outlined"
+                                className="w-full"
+                                label="Tìm kiếm"
+                                onChange={(e) => {
+                                    const text = e.target.value
+                                    setTxtSearch(text)
+                                }}
+                            />
+                        </Grid>
+                        <Grid lg={3} md={3} sm={3} xs={3} item>
+                            <DateRange
+                                date={startDate}
+                                changeDateRange={changeDateRange}
+                            />
+                        </Grid>
+                        <Grid item lg={3} md={3} sm={3} xs={3}>
+                            <FormControl variant="outlined" fullWidth>
+                                <InputLabel htmlFor="outlined-age-native-simple">
+                                    Pháp nhân
+                                </InputLabel>
+                                <Select
+                                    label="Pháp nhân"
+                                    value={merchant}
+                                    onChange={(e) =>
+                                        setMerchant(e.target.value)
+                                    }
+                                    inputProps={{
+                                        name: 'age',
+                                        id: 'outlined-age-native-simple',
+                                    }}
+                                >
+                                    <MenuItem value="">
+                                        <em>Tất cả</em>
+                                    </MenuItem>
+                                    {listMerchant.map((e) => (
+                                        <MenuItem value={e.id}>
+                                            {e.name}
+                                        </MenuItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                        </Grid>
+
+                        <Grid item lg={3} md={3} sm={3} xs={3}>
+                            <FormControl variant="outlined" fullWidth>
+                                <InputLabel htmlFor="outlined-age-native-simple">
+                                    Cửa hàng
+                                </InputLabel>
+                                <Select
+                                    label="Cửa hàng"
+                                    value={module}
+                                    onChange={(e) => setModule(e.target.value)}
+                                    inputProps={{
+                                        name: 'age',
+                                        id: 'outlined-age-native-simple',
+                                    }}
+                                >
+                                    <MenuItem value="">
+                                        <em>Tất cả</em>
+                                    </MenuItem>
+                                    {listModule.map((e) => (
+                                        <MenuItem value={e.id}>
+                                            {e.store_name}
+                                        </MenuItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                        </Grid>
+                    </Grid>
+                    <Grid
+                        container
+                        spacing={2}
+                        item
+                        lg={12}
+                        md={12}
+                        sm={12}
+                        xs={12}
+                    >
+                        <Grid lg={12} md={12} sm={12} xs={12}>
+                            <Typography>
+                                Tổng số giao dịch cần thanh toán phí :{' '}
+                                {toPriceVnd(report?.total_trans)}
+                            </Typography>
+                        </Grid>
+                        <Grid lg={12} md={12} sm={12} xs={12}>
+                            <Typography>
+                                Tổng phí phải thanh toán :{' '}
+                                {toPriceVnd(report?.total_fee)}
+                            </Typography>
+                        </Grid>
+                        <Grid lg={12} md={12} sm={12} xs={12}>
+                            <Typography>
+                                Tổng phí đã thanh toán :{' '}
+                                {toPriceVnd(report?.paid)}
+                            </Typography>
+                        </Grid>
+                        <Grid lg={12} md={12} sm={12} xs={12}>
+                            <Typography>
+                                Tổng phí chờ thanh toán :{' '}
+                                {toPriceVnd(report?.un_paid)}
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                </Grid>
+
+                <Table
+                    data={data}
+                    changeActive={changeActive}
+                    setChangeActive={setChangeActive}
+                    handeChangeActive={handeChangeActive}
+                    pageIndex={pageIndex}
+                    setPageIndex={setPageIndex}
+                    totalRecords={totalRecords}
+                />
+            </div>
+        </Fragment>
+    )
+}
+
+export default CustomerView

src/app/views/Merchant/Create.js

+import React, { useState, useEffect } from 'react'
+import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator'
+import { Button, Grid } from '@material-ui/core'
+
+import { createFunction } from 'app/apis/Functions/function'
+import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
+import { toast } from 'react-toastify'
+import { Breadcrumb, SimpleCard } from 'app/components'
+import { Link, useHistory, useLocation } from 'react-router-dom'
+import { trimObject } from 'app/config/Function'
+import { connect } from 'react-redux'
+const SimpleForm = (props) => {
+    const [state, setState] = useState({})
+    const history = useHistory()
+    const handleSubmit = async (event) => {
+        const newValue = trimObject(state)
+        props.showLoading()
+        const res = await createFunction({
+            ...newValue,
+            status: 1,
+            is_default: true,
+        })
+        props.hideLoading()
+        if (res.data.code == 200) {
+            history.push('/function')
+            if (res.data.code == 200) {
+                toast.success('Tạo hành động thành công!', {
+                    theme: 'colored',
+                })
+            }
+        } else {
+            toast.error('Tạo hành động thất bại!', {
+                theme: 'colored',
+            })
+        }
+    }
+
+    const handleChange = (event) => {
+        event.persist()
+        setState({
+            ...state,
+            [event.target.name]: event.target.value,
+        })
+    }
+
+    const handleDateChange = (date) => {
+        setState({ ...state, date })
+    }
+
+    const { description, name, code, url } = state
+
+    return (
+        <div className="m-sm-30">
+            <div className="mb-sm-30">
+                <div className="mb-sm-30">
+                    <Breadcrumb
+                        routeSegments={[
+                            {
+                                name: 'Danh sách chức năng',
+                                path: '/function',
+                            },
+                            { name: 'Thêm mới chức năng' },
+                        ]}
+                    />
+                </div>
+                <SimpleCard>
+                    <ValidatorForm onSubmit={handleSubmit} onError={() => null}>
+                        <Grid container spacing={3}>
+                            <Grid item lg={6} md={6} sm={12} xs={12}>
+                                <TextValidator
+                                    variant="outlined"
+                                    className="mb-4 w-full"
+                                    label="Tên chức năng *"
+                                    onChange={handleChange}
+                                    type="text"
+                                    name="name"
+                                    value={name || ''}
+                                    validators={['required']}
+                                    errorMessages={[
+                                        'Không được để trống trường này',
+                                    ]}
+                                />
+                            </Grid>
+                            <Grid item lg={6} md={6} sm={12} xs={12}>
+                                <TextValidator
+                                    variant="outlined"
+                                    className="mb-4 w-full"
+                                    label="Mã code *"
+                                    onChange={handleChange}
+                                    type="text"
+                                    name="code"
+                                    value={code || ''}
+                                    validators={['required']}
+                                    errorMessages={[
+                                        'Không được để trống trường này',
+                                    ]}
+                                />
+                            </Grid>
+
+                            <Grid item lg={6} md={6} sm={12} xs={12}>
+                                <TextValidator
+                                    variant="outlined"
+                                    className="mb-4 w-full"
+                                    label="Đường dẫn *"
+                                    onChange={handleChange}
+                                    type="text"
+                                    name="url"
+                                    value={url || ''}
+                                    validators={['required']}
+                                    errorMessages={[
+                                        'Không được để trống trường này',
+                                    ]}
+                                />
+                            </Grid>
+                            <Grid item lg={6} md={6} sm={12} xs={12}>
+                                <TextValidator
+                                    variant="outlined"
+                                    className="mb-4 w-full"
+                                    label="Mô tả"
+                                    onChange={handleChange}
+                                    type="text"
+                                    name="description"
+                                    value={description || ''}
+                                    // validators={['required']}
+                                    errorMessages={[
+                                        'Không được để trống trường này',
+                                    ]}
+                                />
+                            </Grid>
+                        </Grid>
+                        <Grid container justify={'flex-end'}>
+                            <Link to="function">
+                                <Button
+                                    style={{
+                                        marginRight: 20,
+                                    }}
+                                    color="inherit"
+                                    variant="contained"
+                                    onClick={() => {}}
+                                >
+                                    <span className="capitalize">Quay lại</span>
+                                </Button>
+                            </Link>
+                            <Button
+                                color="primary"
+                                variant="contained"
+                                type="submit"
+                            >
+                                <span className="capitalize">Thêm mới</span>
+                            </Button>
+                        </Grid>
+                    </ValidatorForm>
+                </SimpleCard>
+            </div>
+        </div>
+    )
+}
+
+const mapStateToProps = (state) => {
+    return {}
+}
+export default connect(mapStateToProps, { showLoading, hideLoading })(
+    SimpleForm
+)

src/app/views/Merchant/Index.js

+import React, { useState, useEffect } from 'react'
+import ToolUserView from './View'
+import {
+    getListFunction,
+    deleteFunction,
+    changeStatusFunction,
+} from 'app/apis/Functions/function'
+import { useHistory } from 'react-router-dom'
+import KEY from '../../assets/Key'
+import { connect } from 'react-redux'
+import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
+import { toast } from 'react-toastify'
+import useDebounce from 'app/hooks/useDebounce'
+
+const ToolNotificate = (props) => {
+    const [txtSearch, setTxtSearch] = useState('')
+    const searchDebount = useDebounce(txtSearch, 1000)
+
+    const [activeSelected, setActiveSeleted] = useState(null)
+    const [changeActive, setChangeActive] = useState(1)
+
+    const [pageIndex, setPageIndex] = useState(0)
+    const [pageSize] = useState(10)
+    const [totalRecords, setTotalRecord] = useState(0)
+
+    const history = useHistory()
+
+    const [data, setData] = useState([])
+    const [permissions, setPermissions] = useState([])
+    //   useEffect(() => {
+    //     getListPermission();
+    //   }, []);
+    //   const getListPermission = () => {
+    //     let temp = localStorage.getItem(KEY.LISTPATH);
+    //     let listPath = JSON.parse(temp);
+    //     if (listPath) {
+    //       const newlist = listPath.map((e) => {
+    //         if (e.function_code) return e.function_code;
+    //         return e.action_code;
+    //       });
+    //       setPermissions(newlist);
+    //     }
+    //   };
+
+    const handeChangeActive = async (id, status_id) => {
+        props.showLoading()
+        const res = await changeStatusFunction({ id, status_id })
+        props.hideLoading()
+        if (res.data.code == 200) {
+            getData()
+            toast.success('Thay đổi trạng thái thành công!', {
+                theme: 'colored',
+            })
+        } else {
+            toast.error('Thay đổi trạng thái thất bại!', {
+                theme: 'colored',
+            })
+        }
+    }
+
+    const getData = async () => {
+        props.showLoading()
+        const res = await getListFunction({
+            name: searchDebount,
+            page_no: pageIndex + 1,
+            page_size: pageSize,
+        })
+
+        props.hideLoading()
+
+        if (res.data.code == 200 && res.data.data) {
+            console.log(res.data)
+            const newList = res.data.data.data.map((e, i) => {
+                return { ...e, index: i + 1 + pageIndex * pageSize }
+            })
+
+            setData(newList)
+            setTotalRecord(res.data.data.total_elements)
+        } else if (res.data.code == 401) {
+            localStorage.removeItem(KEY.API_TOKEN)
+            setTimeout(() => {
+                history.push('/')
+            }, 100)
+        } else {
+            // enqueueSnackbar('Error!', { variant: 'error' })
+        }
+    }
+
+    useEffect(() => {
+        getData()
+    }, [searchDebount, pageIndex])
+
+    const removeItem = async (id) => {
+        props.showLoading()
+        const res = await deleteFunction({ id })
+        props.hideLoading()
+        if (res.data.code == 200) {
+            getData()
+            toast.success('Xoá bản ghi thành công!', {
+                theme: 'colored',
+            })
+        } else if (res.data.code == 401) {
+            localStorage.removeItem(KEY.API_TOKEN)
+            setTimeout(() => {
+                history.push('/')
+            }, 100)
+        } else {
+            toast.error('Xoá bản ghi thất bại!', {
+                theme: 'colored',
+            })
+        }
+    }
+
+    return (
+        <ToolUserView
+            data={data}
+            removeItem={removeItem}
+            setTxtSearch={setTxtSearch}
+            setActiveSeleted={setActiveSeleted}
+            pageIndex={pageIndex}
+            changeActive={changeActive}
+            setChangeActive={setChangeActive}
+            setPageIndex={setPageIndex}
+            activeSelected={activeSelected}
+            handeChangeActive={handeChangeActive}
+            totalRecords={totalRecords}
+            permissions={permissions}
+        />
+    )
+}
+
+const mapStateToProps = (state) => {
+    return {}
+}
+export default connect(mapStateToProps, { showLoading, hideLoading })(
+    ToolNotificate
+)

src/app/views/Merchant/MerchantRoutes.js

+import React from 'react'
+
+const GroupRoleRoutes = [
+    {
+        path: '/merchant/create',
+        component: React.lazy(() => import('./Create')),
+    },
+    {
+        path: '/merchant/update',
+        component: React.lazy(() => import('./Update')),
+    },
+    {
+        path: '/merchant',
+        component: React.lazy(() => import('./Index')),
+    },
+]
+
+export default GroupRoleRoutes

src/app/views/Merchant/Table.js

+import React, { useState } from 'react'
+import {
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableContainer,
+    TablePagination,
+    TableRow,
+    IconButton,
+    MenuItem,
+    Select,
+    Modal,
+    Fade,
+    Grid,
+    Backdrop,
+    Link,
+    Button,
+    Tooltip,
+    Icon,
+} from '@material-ui/core'
+import EditIcon from '@material-ui/icons/Edit'
+import DeleteIcon from '@material-ui/icons/Delete'
+import colors from '../../assets/Color'
+import useStyles from '../../styles/Table'
+import { Breadcrumb, SimpleCard } from 'app/components'
+import DialogTransition from 'app/components/dialog/DialogTransition'
+import { useHistory } from 'react-router-dom'
+import useAuth from 'app/hooks/useAuth'
+import { checkRole } from 'app/config/Function'
+
+const columns = [
+    {
+        id: 'index',
+        label: 'STT',
+        align: 'center',
+        minWidth: 50,
+    },
+
+    {
+        id: 'name',
+        label: 'Tên chức năng',
+        align: 'left',
+        minWidth: 'auto',
+    },
+    {
+        id: 'code',
+        label: 'Mã code',
+        align: 'left',
+        minWidth: 'auto',
+    },
+    {
+        id: 'url',
+        label: 'Đường dẫn',
+        align: 'left',
+        minWidth: 'auto',
+    },
+
+    {
+        id: 'description',
+        label: 'Mô tả',
+        align: 'left',
+        minWidth: 'auto',
+    },
+
+    {
+        id: 'date_created',
+        label: 'Ngày tạo',
+        align: 'left',
+        minWidth: 'auto',
+    },
+]
+
+function TableList(props) {
+    const {
+        data,
+        handeChangeActive,
+        removeItem,
+        changeActive,
+        setChangeActive,
+        setPageIndex,
+        setPageSize,
+        pageIndex,
+        totalRecords,
+        permissions,
+    } = props
+    const classes = useStyles()
+    let history = useHistory()
+    const [selected, setSelected] = useState({
+        name: '',
+        id: '',
+        title: '',
+        content: '',
+    })
+    const [open, setOpen] = React.useState(false)
+    const { user } = useAuth()
+    const handleChangePage = (event, newPage) => {
+        setPageIndex(newPage)
+    }
+    const handleChangeRowsPerPage = (event) => {
+        setPageSize(event.target.value)
+    }
+    const handleClose = () => {
+        setOpen(false)
+    }
+
+    return (
+        <Paper className={classes.root}>
+            <TableContainer className={classes.container}>
+                <Table stickyHeader aria-label="sticky table">
+                    <TableHead>
+                        <TableRow>
+                            {columns.map((column) => (
+                                <TableCell
+                                    key={column.id}
+                                    align={'center'}
+                                    style={{
+                                        width: column.minWidth,
+                                        backgroundColor: colors.headerTable,
+                                    }}
+                                >
+                                    {column.label}
+                                </TableCell>
+                            ))}
+
+                            <TableCell
+                                style={{
+                                    backgroundColor: colors.headerTable,
+                                    width: 125,
+                                }}
+                            >
+                                Trạng thái
+                            </TableCell>
+
+                            <TableCell
+                                style={{
+                                    textAlign: 'center',
+                                    backgroundColor: colors.headerTable,
+                                    width: 120,
+                                }}
+                            >
+                                Hành động
+                            </TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody className={classes.columnTable}>
+                        {data.map((row) => {
+                            return (
+                                <TableRow
+                                    hover
+                                    role="checkbox"
+                                    tabIndex={-1}
+                                    key={row.code}
+                                >
+                                    {columns.map((column) => {
+                                        const imageUrl = row[column.id]
+                                        return (
+                                            <TableCell
+                                                key={column.id}
+                                                align={column.align}
+                                            >
+                                                {column.format ? (
+                                                    <img
+                                                        src={column.format(
+                                                            imageUrl
+                                                        )}
+                                                        className={
+                                                            classes.image
+                                                        }
+                                                    />
+                                                ) : (
+                                                    imageUrl
+                                                )}
+                                            </TableCell>
+                                        )
+                                    })}
+
+                                    <TableCell className={classes.border}>
+                                        <Select
+                                            variant={'outlined'}
+                                            labelId="demo-simple-select-placeholder-label-label"
+                                            id="demo-simple-select-placeholder-label"
+                                            onChange={(e) =>
+                                                handeChangeActive(
+                                                    row.id,
+                                                    e.target.value
+                                                )
+                                            }
+                                            displayEmpty
+                                            defaultValue={row.status}
+                                            className={classes.formControl}
+                                        >
+                                            <MenuItem value={1}>
+                                                Hoạt động
+                                            </MenuItem>
+                                            <MenuItem value={2}>Khóa</MenuItem>
+                                        </Select>
+                                    </TableCell>
+                                    <TableCell>
+                                        {checkRole(user, '/function/delete') ? (
+                                            <Tooltip title="Xoá">
+                                                <IconButton
+                                                    onClick={() => {
+                                                        setSelected({
+                                                            ...row,
+                                                            title: 'Xóa chức năng',
+                                                            content: `Bạn có muốn xóa chức năng ${row.name} hay không?`,
+                                                        })
+                                                        setOpen(true)
+                                                    }}
+                                                    className={classes.button}
+                                                    aria-label="Delete"
+                                                >
+                                                    <Icon color="error">
+                                                        delete
+                                                    </Icon>
+                                                </IconButton>
+                                            </Tooltip>
+                                        ) : null}
+                                        {checkRole(user, '/function/update') ? (
+                                            <Tooltip title="Cập nhật">
+                                                <IconButton
+                                                    onClick={() => {
+                                                        history.push({
+                                                            pathname:
+                                                                '/function/update',
+                                                            state: row.id,
+                                                        })
+                                                    }}
+                                                    className={classes.button}
+                                                    aria-label="edit"
+                                                >
+                                                    <Icon color="primary">
+                                                        edit
+                                                    </Icon>
+                                                </IconButton>
+                                            </Tooltip>
+                                        ) : null}
+                                    </TableCell>
+                                </TableRow>
+                            )
+                        })}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+            <DialogTransition
+                data={selected}
+                open={open}
+                handleClose={handleClose}
+                onAgree={() => {
+                    removeItem(selected.id)
+                    handleClose()
+                }}
+            />
+
+            <TablePagination
+                component="div"
+                page={pageIndex}
+                count={totalRecords}
+                rowsPerPage={10}
+                rowsPerPageOptions={[]}
+                onChangePage={handleChangePage}
+                onChangeRowsPerPage={handleChangeRowsPerPage}
+            />
+        </Paper>
+    )
+}
+
+export default TableList

src/app/views/Merchant/Update.js

+import React, { useState, useEffect } from 'react'
+import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator'
+import { Button, Grid } from '@material-ui/core'
+
+import { detailFunction, updateFunction } from 'app/apis/Functions/function'
+import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
+import { toast } from 'react-toastify'
+import { Breadcrumb, SimpleCard } from 'app/components'
+import { Link, useHistory, useLocation } from 'react-router-dom'
+import { trimObject } from 'app/config/Function'
+import { connect } from 'react-redux'
+import localStorageService from 'app/services/localStorageService'
+
+const SimpleForm = (props) => {
+    const [state, setState] = useState({})
+    const history = useHistory()
+    const location = useLocation()
+    useEffect(() => {
+        getData()
+    }, [])
+
+    const getData = async () => {
+        props.showLoading()
+        const res = await detailFunction(location.state, {})
+        props.hideLoading()
+        if (res.data.code == 200 && res.data.data) {
+            setState(res.data.data)
+        } else if (res.data.code == 401) {
+            localStorageService.removeToken()
+            setTimeout(() => {
+                history.push('/')
+            }, 100)
+        } else {
+            toast.error('Lấy thông tin bản ghi thất bại!', {
+                theme: 'colored',
+            })
+        }
+    }
+
+    const handleSubmit = async (event) => {
+        const newValue = trimObject(state)
+        props.showLoading()
+        const res = await updateFunction({
+            ...newValue,
+            status: 1,
+            is_default: true,
+        })
+        props.hideLoading()
+        if (res.data.code == 200) {
+            history.push('/function')
+            if (res.data.code == 200) {
+                toast.success('Cập nhật hành động thành công!', {
+                    theme: 'colored',
+                })
+            }
+        } else {
+            toast.error('Cập nhật hành động thất bại!', {
+                theme: 'colored',
+            })
+        }
+    }
+
+    const handleChange = (event) => {
+        event.persist()
+        setState({
+            ...state,
+            [event.target.name]: event.target.value,
+        })
+    }
+
+    const handleDateChange = (date) => {
+        setState({ ...state, date })
+    }
+
+    const { description, name, code, url } = state
+
+    return (
+        <div className="m-sm-30">
+            <div className="mb-sm-30">
+                <div className="mb-sm-30">
+                    <Breadcrumb
+                        routeSegments={[
+                            {
+                                name: 'Danh sách chức năng',
+                                path: '/function',
+                            },
+                            { name: 'Cập nhật chức năng' },
+                        ]}
+                    />
+                </div>
+                <SimpleCard>
+                    <ValidatorForm onSubmit={handleSubmit} onError={() => null}>
+                        <Grid container spacing={3}>
+                            <Grid item lg={6} md={6} sm={12} xs={12}>
+                                <TextValidator
+                                    variant="outlined"
+                                    className="mb-4 w-full"
+                                    label="Tên chức năng *"
+                                    onChange={handleChange}
+                                    type="text"
+                                    name="name"
+                                    value={name || ''}
+                                    validators={['required']}
+                                    errorMessages={[
+                                        'Không được để trống trường này',
+                                    ]}
+                                />
+                            </Grid>
+                            <Grid item lg={6} md={6} sm={12} xs={12}>
+                                <TextValidator
+                                    variant="outlined"
+                                    className="mb-4 w-full"
+                                    label="Mã code *"
+                                    onChange={handleChange}
+                                    type="text"
+                                    name="code"
+                                    value={code || ''}
+                                    validators={['required']}
+                                    errorMessages={[
+                                        'Không được để trống trường này',
+                                    ]}
+                                />
+                            </Grid>
+
+                            <Grid item lg={6} md={6} sm={12} xs={12}>
+                                <TextValidator
+                                    variant="outlined"
+                                    className="mb-4 w-full"
+                                    label="Đường dẫn *"
+                                    onChange={handleChange}
+                                    type="text"
+                                    name="url"
+                                    value={url || ''}
+                                    validators={['required']}
+                                    errorMessages={[
+                                        'Không được để trống trường này',
+                                    ]}
+                                />
+                            </Grid>
+                            <Grid item lg={6} md={6} sm={12} xs={12}>
+                                <TextValidator
+                                    variant="outlined"
+                                    className="mb-4 w-full"
+                                    label="Mô tả "
+                                    onChange={handleChange}
+                                    type="text"
+                                    name="description"
+                                    value={description || ''}
+                                    //validators={['required']}
+                                    errorMessages={[
+                                        'Không được để trống trường này',
+                                    ]}
+                                />
+                            </Grid>
+                        </Grid>
+                        <Grid container justify={'flex-end'}>
+                            <Link to="function">
+                                <Button
+                                    style={{
+                                        marginRight: 20,
+                                    }}
+                                    color="inherit"
+                                    variant="contained"
+                                    onClick={() => {}}
+                                >
+                                    <span className="capitalize">Quay lại</span>
+                                </Button>
+                            </Link>
+                            <Button
+                                color="primary"
+                                variant="contained"
+                                type="submit"
+                            >
+                                <span className="capitalize">Cập nhật</span>
+                            </Button>
+                        </Grid>
+                    </ValidatorForm>
+                </SimpleCard>
+            </div>
+        </div>
+    )
+}
+
+const mapStateToProps = (state) => {
+    return {}
+}
+export default connect(mapStateToProps, { showLoading, hideLoading })(
+    SimpleForm
+)

src/app/views/Merchant/View.js

+import React, { Fragment, useState, useEffect } from 'react'
+import {
+    TextField,
+    Icon,
+    Button,
+    StepLabel,
+    Step,
+    Stepper,
+    Grid,
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+} from '@material-ui/core'
+import Table from './Table'
+import { Breadcrumb } from 'app/components'
+import { Link } from 'react-router-dom'
+import { Autocomplete, createFilterOptions } from '@material-ui/lab'
+import useAuth from 'app/hooks/useAuth'
+import { checkRole } from 'app/config/Function'
+function CustomerView(props) {
+    const {
+        data,
+        updateItem,
+        removeItem,
+        setTxtSearch,
+        changeActive,
+        setChangeActive,
+        handeChangeActive,
+        setPageIndex,
+        pageIndex,
+        totalRecords,
+        permissions,
+    } = props
+    const [age, setAge] = React.useState('')
+    const { user } = useAuth()
+    const handleChange = (event) => {
+        setAge(event.target.value)
+    }
+
+    return (
+        <Fragment>
+            <div className="m-sm-30">
+                <div className="mb-sm-30">
+                    <Breadcrumb
+                        routeSegments={[
+                            {
+                                name: 'Danh sách chức năng',
+                                path: '/function',
+                            },
+                        ]}
+                    />
+                </div>
+
+                <Grid
+                    style={{
+                        padding: 10,
+                        marginBottom: 20,
+                    }}
+                    justify={'space-between'}
+                    alignItems={'center'}
+                    container
+                    spacing={3}
+                >
+                    <Grid item lg={3} md={3} sm={6} xs={6}>
+                        <TextField
+                            variant="outlined"
+                            className="w-full"
+                            label="Tên chức năng"
+                            onChange={(e) => {
+                                const text = e.target.value
+                                setTimeout(() => {
+                                    setTxtSearch(text)
+                                }, 1000)
+                            }}
+                        />
+                    </Grid>
+                    {checkRole(user, '/function/create') ? (
+                        <Link to="/function/create">
+                            <Button
+                                variant="contained"
+                                className={'bg-light-primary'}
+                            >
+                                <span className={'text-primary'}>Thêm mới</span>
+                            </Button>
+                        </Link>
+                    ) : null}
+                </Grid>
+
+                <Table
+                    data={data}
+                    changeActive={changeActive}
+                    setChangeActive={setChangeActive}
+                    handeChangeActive={handeChangeActive}
+                    updateItem={updateItem}
+                    removeItem={removeItem}
+                    pageIndex={pageIndex}
+                    setPageIndex={setPageIndex}
+                    totalRecords={totalRecords}
+                    permissions={permissions}
+                />
+            </div>
+        </Fragment>
+    )
+}
+
+export default CustomerView

src/app/views/System/PageStatic/table.js

@@ -129,7 +129,7 @@ function TableList(props) {
                             <TableCell
                                 style={{
                                     backgroundColor: colors.headerTable,
-                                    width: 105,
+                                    width: 125,
                                 }}
                             >
                                 Trạng thái

src/app/views/Transaction/Index.js

+import React, { useState, useEffect } from 'react'
+import LogAuth from './View'
+import { listTransaction } from 'app/apis/Functions/transaction'
+import { useHistory } from 'react-router-dom'
+import { toPriceVnd, convertDate } from 'app/config/Function'
+import { connect } from 'react-redux'
+import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
+import { toast } from 'react-toastify'
+import useDebounce from 'app/hooks/useDebounce'
+
+const ToolNotificate = (props) => {
+    const [txtSearch, setTxtSearch] = useState('')
+    const [applications, setApplications] = useState('')
+    const [pageIndex, setPageIndex] = useState(0)
+    const [pageSize] = useState(10)
+    const [totalRecords, setTotalRecord] = useState(0)
+    const history = useHistory()
+    const searchDebount = useDebounce(txtSearch, 1000)
+    const [startDate, setStartDate] = useState()
+    const [endDate, setEndDate] = useState()
+
+    const [data, setData] = useState([])
+
+    const changeDateRange = (start, end) => {
+        setStartDate(start)
+        setEndDate(end)
+    }
+
+    const getData = async () => {
+        props.showLoading()
+        const res = await listTransaction({
+            order_code: searchDebount,
+            applications,
+            page_no: pageIndex + 1,
+            page_size: pageSize,
+            from_date: startDate ? convertDate(startDate) : null,
+            to_date: endDate ? convertDate(endDate) : null,
+            gasoline_id: '57dd1a73-d847-4d73-9791-08dc0841e7a9',
+        })
+        props.hideLoading()
+        if (res.data.code == 200 && res.data.data) {
+            const newList = res.data.data.data.map((e, i) => {
+                return { ...e, index: i + 1 + pageIndex * pageSize }
+            })
+            setData(newList)
+            setTotalRecord(res.data.data.total_elements)
+        } else if (res.data.code == 401) {
+            setTimeout(() => {
+                history.push('/')
+            }, 100)
+        } else {
+            toast.error('Lấy dữ liệu thất bại!', {
+                theme: 'colored',
+            })
+        }
+    }
+
+    useEffect(() => {
+        getData()
+    }, [searchDebount, pageIndex, startDate])
+
+    return (
+        <LogAuth
+            data={data}
+            setTxtSearch={setTxtSearch}
+            pageIndex={pageIndex}
+            setPageIndex={setPageIndex}
+            totalRecords={totalRecords}
+            setApplications={setApplications}
+            applications={applications}
+            startDate={startDate}
+            changeDateRange={changeDateRange}
+        />
+    )
+}
+
+const mapStateToProps = (state) => {
+    return {}
+}
+export default connect(mapStateToProps, { showLoading, hideLoading })(
+    ToolNotificate
+)

src/app/views/Transaction/Table.js

+import React, { useState } from 'react'
+import {
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableContainer,
+    TablePagination,
+    TableRow,
+    IconButton,
+    MenuItem,
+    Tooltip,
+    Icon,
+} from '@material-ui/core'
+import EditIcon from '@material-ui/icons/Edit'
+import DeleteIcon from '@material-ui/icons/Delete'
+import colors from '../../assets/Color'
+import useStyles from '../../styles/Table'
+import { Breadcrumb, SimpleCard } from 'app/components'
+
+const columns = [
+    {
+        id: 'index',
+        label: 'STT',
+        align: 'center',
+        minWidth: 80,
+    },
+
+    {
+        id: 'store_name',
+        label: 'Cây xăng',
+        align: 'left',
+        minWidth: 'auto',
+    },
+    // {
+    //     id: 'application',
+    //     label: 'Mã NV',
+    //     align: 'left',
+    //     minWidth: 140,
+    // },
+    {
+        id: 'order_code',
+        label: 'Mã hoá đơn',
+        align: 'left',
+        minWidth: 'auto',
+    },
+    {
+        id: 'created_date',
+        label: 'Ngày giao dịch',
+        align: 'left',
+        minWidth: 'auto',
+    },
+
+    // {
+    //     id: 'IP',
+    //     label: 'Loại nhiên liệu',
+    //     align: 'left',
+    //     minWidth: 140,
+    // },
+    {
+        id: 'product_name',
+        label: 'Sản phẩm',
+        align: 'left',
+        minWidth: 'auto',
+    },
+    {
+        id: 'unit_price',
+        label: 'Đơn giá',
+        align: 'left',
+        minWidth: 100,
+    },
+    {
+        id: 'quantity',
+        label: 'Lượng nhiên liệu',
+        align: 'left',
+        minWidth: 100,
+    },
+    {
+        id: 'price',
+        label: 'Thành tiền',
+        align: 'left',
+        minWidth: 100,
+    },
+    {
+        id: 'type_payment',
+        label: 'Phương thức thanh toán',
+        align: 'left',
+        minWidth: 100,
+    },
+    {
+        id: 'status_text',
+        label: 'Trạng thái',
+        align: 'left',
+        minWidth: 100,
+    },
+]
+
+function TableList(props) {
+    const classes = useStyles()
+    const {
+        data,
+        handeChangeActive,
+        removeItem,
+        changeActive,
+        setChangeActive,
+        setPageIndex,
+        setPageSize,
+        pageIndex,
+        totalRecords,
+    } = props
+
+    const handleChangePage = (event, newPage) => {
+        setPageIndex(newPage)
+    }
+    const handleChangeRowsPerPage = (event) => {
+        setPageSize(event.target.value)
+    }
+
+    return (
+        <Paper className={classes.root}>
+            <TableContainer className={classes.container}>
+                <Table stickyHeader aria-label="sticky table">
+                    <TableHead>
+                        <TableRow>
+                            {columns.map((column) => (
+                                <TableCell
+                                    key={column.id}
+                                    align={'center'}
+                                    style={{
+                                        width: column.minWidth,
+                                        backgroundColor: colors.headerTable,
+                                    }}
+                                >
+                                    {column.label}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    </TableHead>
+                    <TableBody className={classes.columnTable}>
+                        {data.map((row) => {
+                            return (
+                                <TableRow
+                                    hover
+                                    role="checkbox"
+                                    tabIndex={-1}
+                                    key={row.code}
+                                >
+                                    {columns.map((column) => {
+                                        const avatar = row[column.id]
+
+                                        return (
+                                            <TableCell
+                                                key={column.id}
+                                                align={column.align}
+                                            >
+                                                {column.format ? (
+                                                    <img
+                                                        src={column.format(
+                                                            avatar
+                                                        )}
+                                                        className={
+                                                            classes.image
+                                                        }
+                                                    />
+                                                ) : (
+                                                    avatar
+                                                )}
+                                            </TableCell>
+                                        )
+                                    })}
+                                </TableRow>
+                            )
+                        })}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+            <TablePagination
+                component="div"
+                page={pageIndex}
+                count={totalRecords}
+                rowsPerPage={10}
+                rowsPerPageOptions={[]}
+                onChangePage={handleChangePage}
+                onChangeRowsPerPage={handleChangeRowsPerPage}
+            />
+        </Paper>
+    )
+}
+
+export default TableList

src/app/views/Transaction/TransactionRouters.js

+import React from 'react'
+
+const TransactionRouters = [
+    {
+        path: '/transations',
+        component: React.lazy(() => import('./Index')),
+    },
+]
+
+export default TransactionRouters

src/app/views/Transaction/View.js

+import React, { Fragment, useState, useEffect } from 'react'
+import {
+    TextField,
+    Icon,
+    Button,
+    StepLabel,
+    Step,
+    Stepper,
+    Grid,
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+} from '@material-ui/core'
+import Table from './Table'
+import { Breadcrumb } from 'app/components'
+import { Link } from 'react-router-dom'
+import { Autocomplete, createFilterOptions } from '@material-ui/lab'
+import DateRange from 'app/components/Input/DateHome'
+
+function CustomerView(props) {
+    const [age, setAge] = React.useState('')
+    const {
+        data,
+        setTxtSearch,
+        changeActive,
+        setChangeActive,
+        handeChangeActive,
+        setPageIndex,
+        pageIndex,
+        totalRecords,
+        setApplications,
+        applications,
+        startDate,
+        changeDateRange,
+    } = props
+
+    const handleChange = (event) => {
+        setAge(event.target.value)
+    }
+    return (
+        <Fragment>
+            <div className="m-sm-30">
+                <div className="mb-sm-30">
+                    <Breadcrumb
+                        routeSegments={[
+                            {
+                                name: 'Danh sách giao dịch',
+                                path: '/transations',
+                            },
+                        ]}
+                    />
+                </div>
+
+                <Grid
+                    style={{
+                        padding: 10,
+                        marginBottom: 20,
+                    }}
+                    justify={'space-between'}
+                    alignItems={'center'}
+                    container
+                    spacing={3}
+                >
+                    <Grid
+                        container
+                        spacing={2}
+                        item
+                        lg={6}
+                        md={6}
+                        sm={6}
+                        xs={6}
+                    >
+                        <Grid item>
+                            <TextField
+                                variant="outlined"
+                                className="w-full"
+                                label="Tìm kiếm"
+                                onChange={(e) => {
+                                    const text = e.target.value
+                                    setTxtSearch(text)
+                                }}
+                            />
+                        </Grid>
+                        <Grid item>
+                            <DateRange
+                                date={startDate}
+                                changeDateRange={changeDateRange}
+                            />
+                        </Grid>
+                    </Grid>
+                </Grid>
+
+                <Table
+                    data={data}
+                    changeActive={changeActive}
+                    setChangeActive={setChangeActive}
+                    handeChangeActive={handeChangeActive}
+                    pageIndex={pageIndex}
+                    setPageIndex={setPageIndex}
+                    totalRecords={totalRecords}
+                />
+            </div>
+        </Fragment>
+    )
+}
+
+export default CustomerView

src/app/views/product/product/Create.js

@@ -23,7 +23,7 @@ import { Breadcrumb, SimpleCard } from 'app/components'
 import { dropdownProductType } from 'app/apis/Functions/dropdown'
 import { Link, useHistory, useLocation } from 'react-router-dom'
 import { toast } from 'react-toastify'
-import { trimObject } from 'app/config/Function'
+import { trimObject, toPriceVndInput } from 'app/config/Function'
 import { connect } from 'react-redux'
 import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
 import { createProduct } from 'app/apis/Functions/product'
@@ -79,6 +79,14 @@ const SimpleForm = (props) => {
 
     const handleChange = (event) => {
         event.persist()
+
+        if (event.target.name === 'price_default') {
+            if (event.target.value !== null)
+                setState({
+                    ...state,
+                    [event.target.name]: event.target.value.split('.').join(''),
+                })
+        } else
             setState({
                 ...state,
                 [event.target.name]: event.target.value,
@@ -169,11 +177,10 @@ const SimpleForm = (props) => {
                                     onChange={handleChange}
                                     type="text"
                                     name="price_default"
-                                    value={price_default || ''}
-                                    validators={['required', 'isNumber']}
+                                    value={toPriceVndInput(price_default) || ''}
+                                    validators={['required']}
                                     errorMessages={[
                                         'Không được để trống trường này',
-                                        'Trường này phải nhập số ',
                                     ]}
                                 />
                             </Grid>

src/app/views/product/product/Index.js

@@ -29,7 +29,7 @@ const ToolNotificate = (props) => {
 
     const handeChangeActive = async (id, status_id) => {
         props.showLoading()
-        const res = await changeStatusProduct({ idGuid: id, status_id })
+        const res = await changeStatusProduct({ id, status_id })
         props.hideLoading()
         if (res.data.code == 200) {
             getData()

src/app/views/product/product/Table.js

@@ -119,7 +119,7 @@ function TableList(props) {
                             <TableCell
                                 style={{
                                     backgroundColor: colors.headerTable,
-                                    width: 105,
+                                    width: 125,
                                 }}
                             >
                                 Trạng thái

src/app/views/product/product/Update.js

@@ -11,7 +11,7 @@ import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
 import { toast } from 'react-toastify'
 import { Breadcrumb, SimpleCard } from 'app/components'
 import { Link, useHistory, useLocation } from 'react-router-dom'
-import { trimObject } from 'app/config/Function'
+import { trimObject, toPriceVndInput } from 'app/config/Function'
 import { connect } from 'react-redux'
 import localStorageService from 'app/services/localStorageService'
 
@@ -88,12 +88,19 @@ const SimpleForm = (props) => {
 
     const handleChange = (event) => {
         event.persist()
+
+        if (event.target.name === 'price_default') {
+            if (event.target.value !== null)
+                setState({
+                    ...state,
+                    [event.target.name]: event.target.value.split('.').join(''),
+                })
+        } else
             setState({
                 ...state,
                 [event.target.name]: event.target.value,
             })
     }
-
     const handleDateChange = (date) => {
         setState({ ...state, date })
     }
@@ -178,11 +185,10 @@ const SimpleForm = (props) => {
                                     onChange={handleChange}
                                     type="text"
                                     name="price_default"
-                                    value={price_default || ''}
-                                    validators={['required', 'isNumber']}
+                                    value={toPriceVndInput(price_default) || ''}
+                                    validators={['required']}
                                     errorMessages={[
                                         'Không được để trống trường này',
-                                        'Trường này phải nhập số ',
                                     ]}
                                 />
                             </Grid>

src/app/views/product/type/Table.js

@@ -114,7 +114,7 @@ function TableList(props) {
                             <TableCell
                                 style={{
                                     backgroundColor: colors.headerTable,
-                                    width: 105,
+                                    width: 125,
                                 }}
                             >
                                 Trạng thái

yarn.lock

@@ -10836,6 +10836,15 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
+prop-types@15:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
@@ -11098,6 +11107,16 @@ react-beautiful-dnd@^11.0.4:
     tiny-invariant "^1.0.4"
     use-memo-one "^1.1.0"
 
+react-date-range@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-date-range/-/react-date-range-1.4.0.tgz#d2073b85bdb4185e4dde288ce29198dd90074045"
+  integrity sha512-+9t0HyClbCqw1IhYbpWecjsiaftCeRN5cdhsi9v06YdimwyMR2yYHWcgVn3URwtN/txhqKpEZB6UX1fHpvK76w==
+  dependencies:
+    classnames "^2.2.6"
+    prop-types "^15.7.2"
+    react-list "^0.8.13"
+    shallow-equal "^1.2.1"
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz"
@@ -11260,6 +11279,13 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-list@^0.8.13:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/react-list/-/react-list-0.8.17.tgz#49f55af2797cfdf3974ad2188a191e0ee919d254"
+  integrity sha512-pgmzGi0G5uGrdHzMhgO7KR1wx5ZXVvI3SsJUmkblSAKtewIhMwbQiMuQiTE83ozo04BQJbe0r3WIWzSO0dR1xg==
+  dependencies:
+    prop-types "15"
+
 react-material-ui-form-validator@^2.0.9:
   version "2.1.4"
   resolved "https://registry.npmjs.org/react-material-ui-form-validator/-/react-material-ui-form-validator-2.1.4.tgz"
@@ -12310,6 +12336,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallow-equal@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz"