update code

src/app/apis/Functions/dropdown.js

@@ -99,3 +99,8 @@ export const dropdownProvider = async (body) =>
     GetData(url.dropdownProvider, body)
         .then((res) => res)
         .catch((err) => null)
+
+export const dropdownListPayType = async (body) =>
+    GetData(url.dropdownListPayType, body)
+        .then((res) => res)
+        .catch((err) => null)

src/app/apis/Functions/reconciliation.js

@@ -36,3 +36,18 @@ export const updateSheetReconciliation = async (body) =>
     PostData(url.updateSheetReconciliation, body)
         .then((res) => res)
         .catch((err) => null)
+
+export const deleteTranInReconciliation = async (id, body) =>
+    PostData(`${url.deleteTranInReconciliation}/${id}`, body)
+        .then((res) => res)
+        .catch((err) => null)
+
+export const addTransInReconciliation = async (body) =>
+    PostData(url.addTransInReconciliation, body)
+        .then((res) => res)
+        .catch((err) => null)
+
+export const listTransSelect = async (body) =>
+    PostData(url.listTransSelect, body)
+        .then((res) => res)
+        .catch((err) => null)

src/app/apis/Functions/supplier.js

@@ -30,3 +30,13 @@ export const changeStatusSupplier = async (body) =>
     PostData(url.changeStatusSupplier, body)
         .then((res) => res)
         .catch((err) => null)
+
+export const piechartPaymentPartner = async (body) =>
+    PostData(url.piechartPaymentPartner, body)
+        .then((res) => res)
+        .catch((err) => null)
+
+export const linechartPaymentPartner = async (body) =>
+    PostData(url.linechartPaymentPartner, body)
+        .then((res) => res)
+        .catch((err) => null)

src/app/apis/url.js

@@ -126,6 +126,9 @@ export default {
     listProviderSetting: `${root}/provider/paging/setting`,
     detailProviderSetting: `${root}/reconciliation/setting`,
     updateProviderSetting: `${root}/reconciliation/setting/create`,
+    deleteTranInReconciliation: `${root}/reconciliation/delete/trans`,
+    addTransInReconciliation: `${root}/reconciliation/add/trans`,
+    listTransSelect: `${root}/reconciliation/list/trans`,
 
     //Log
     logAuth: `${root}/logging/listLogin`,
@@ -166,6 +169,9 @@ export default {
     urlDetailPriceProduct: `${root}/construction`,
     changeStatusPriceProduct: `${root}/construction/changeStatus`,
 
+    piechartPaymentPartner: `${root}/paymentpartner/piechart`,
+    linechartPaymentPartner: `${root}/paymentpartner/linegraph`,
+
     //dropdown
     dropdownFuntions: `${root}/dropdown/function`,
     dropdownPermission: `${root}/function/getFunctionTree`,
@@ -185,4 +191,5 @@ export default {
     dropdownFuncitonPackge: `${root}/dropdown/getlistfunctionpk`,
     dropdownStoreStatus: `${root}/dropdown/getlistStoreStatus`,
     dropdownProvider: `${root}/dropdown/Provider`,
+    dropdownListPayType: `${root}/dropdown/getListPayType`,
 }

src/app/components/Chart/LineChart.jsx

-import React from 'react'
-import ReactEcharts from 'echarts-for-react'
-import { useTheme } from '@material-ui/core/styles'
-
-const CustomLineChart = (props) => {
-    const { data, bg, height } = props
-    const option = {
-        title: {
-            text: 'textLeft',
-            right: 'auto',
-            padding: [5, 10],
-        },
-        // title: {
-        //     text: textRight,
-        //     textAlign: 'auto',
-        // },
-        grid: {
-            left: '0%',
-            right: '0%',
-            bottom: '10%',
-            containLabel: true,
-        },
-        xAxis: {
-            type: 'category',
-            axisLine: {
-                show: false,
-            },
-            splitLine: {
-                show: false,
-            },
-            axisTick: {
-                show: false,
-            },
-            axisLabel: {
-                fontSize: 13,
-                fontFamily: 'roboto',
-            },
-            axisPointer: {
-                snap: true,
-            },
-        },
-        yAxis: {
-            type: 'value',
-            axisLine: {
-                show: false,
-            },
-            axisTick: {
-                show: false,
-            },
-            splitLine: {
-                lineStyle: {
-                    opacity: 0.15,
-                },
-            },
-            axisLabel: {
-                show: false,
-                fontSize: 13,
-                fontFamily: 'roboto',
-            },
-        },
-        series: [
-            {
-                data: data,
-                type: 'line',
-                areaStyle: {},
-            },
-        ],
-        tooltip: {
-            show: true,
-            trigger: 'item',
-
-            formatter: function (a) {
-                const { value } = a
-                return `
-                  <div style="padding: 15px">
-                      <div style="white-space: nowrap;">30/12/111 - 30/12/111</div>
-                      <div style="margin-top: 10px">
-                      <span style="white-space: nowrap">ccc: <strong style="margin-left: 3px">${value}</strong></span>
-                  </div>
-                  <div style="margin-top: 10px">
-                      <span style="white-space: nowrap">hi: <strong style="margin-left: 3px">hu</strong></span>
-                  </div>
-                  </div>
-              `
-            },
-        },
-    }
-
-    return <ReactEcharts style={{ height: height }} option={option} />
-}
-
-export default CustomLineChart

src/app/components/Chart/LineChartCustom.jsx

+import React from 'react'
+import ReactEcharts from 'echarts-for-react'
+import { useTheme } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core'
+
+const CustomLineChart = ({ data, color }) => {
+    //const { textLeft, textRight, data, bg, height } = item
+    const option = {
+        color: color,
+        tooltip: {
+            show: true,
+        },
+        // legend: {
+        //     top: '50%',
+        //     left: 'center',
+
+        // },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['60%', '80%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center',
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 10,
+                        fontWeight: 'bold',
+                    },
+                },
+                labelLine: {
+                    show: false,
+                },
+                data: data,
+            },
+        ],
+    }
+
+    return <ReactEcharts style={{ height: 300 }} option={option} />
+}
+
+export default CustomLineChart

src/app/components/Chart/Test.jsx

+import React from 'react'
+import ReactEcharts from 'echarts-for-react'
+import { useTheme } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core'
+
+const CustomLineChart = ({ data, color }) => {
+    //const { textLeft, textRight, data, bg, height } = item
+    const option = {
+        color: color,
+        tooltip: {
+            show: true,
+        },
+        // legend: {
+        //     top: '50%',
+        //     left: 'center',
+
+        // },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['60%', '80%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center',
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 10,
+                        fontWeight: 'bold',
+                    },
+                },
+                labelLine: {
+                    show: false,
+                },
+                data: data,
+            },
+        ],
+    }
+
+    return <ReactEcharts style={{ height: 300 }} option={option} />
+}
+
+export default CustomLineChart

src/app/navigations.js

@@ -244,7 +244,7 @@ export const navigationsAdmin = [
 
     {
         name: 'Đối soát',
-        icon: 'wb_iridescent',
+        icon: 'verified',
         hide: false,
         children: [
             {

src/app/views/PaymentSupplier/LineChartCustom.js

+import React from 'react'
+import ReactEcharts from 'echarts-for-react'
+import { useTheme } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core'
+
+const CustomLineChart = ({ data, color }) => {
+    console.log('data linechart', data)
+    const option = {
+        color: color,
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: data?.xAxis,
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985',
+                },
+            },
+        },
+        yAxis: {
+            type: 'value',
+        },
+        series: [
+            {
+                data: data?.series,
+                type: 'line',
+                smooth: true,
+                areaStyle: {},
+            },
+        ],
+    }
+
+    return <ReactEcharts style={{ height: 400 }} option={option} />
+}
+
+export default CustomLineChart

src/app/views/PaymentSupplier/ListTrans/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 { listTransReconciliation } from 'app/apis/Functions/reconciliation'
+import { useHistory, useLocation } 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 { useTranslation } from 'react-i18next'
-import { dropdownMerchant, dropdownStore } from 'app/apis/Functions/dropdown'
+import {
+    dropdownProduct,
+    dropdownProvider,
+    dropdownListPayType,
+} from 'app/apis/Functions/dropdown'
 
 const ToolNotificate = (props) => {
+    const location = useLocation()
     const [txtSearch, setTxtSearch] = useState('')
     const [applications, setApplications] = useState('')
     const [pageIndex, setPageIndex] = useState(0)
@@ -24,13 +29,22 @@ const ToolNotificate = (props) => {
     const [data, setData] = useState([])
     const [type, setType] = useState()
     const [listType, setListType] = useState([])
-    const [merchant, setMerchant] = useState()
-    const [listMerchant, setListMerchant] = useState([])
-    const [store, setStore] = useState()
-    const [listStore, setListStore] = useState([])
+    const [listProvide, setListProvide] = useState([])
+    const [provide, setProvide] = useState()
+    const [listProduct, setListProduct] = useState([])
+    const [product, setProduct] = useState()
+    const [status, setStatus] = useState()
 
     useEffect(() => {
-        getDataMerchant()
+        getData(false)
+    }, [pageIndex])
+
+    useEffect(() => {
+        getData(true)
+    }, [searchDebount, startDate, type, provide, product, status])
+
+    useEffect(() => {
+        getDataDropdown()
     }, [])
 
     const changeDateRange = (start, end) => {
@@ -38,44 +52,50 @@ const ToolNotificate = (props) => {
         setEndDate(end)
     }
 
+    const renderStatusName = (status) => {
+        if (status == 3) return 'Đã đối soát'
+        if (status == 2) return 'Đang đối soát'
+        return 'Chưa đối soát'
+    }
+
     const getData = async (init) => {
-        props.showLoading()
         let res
         if (init) {
             setPageIndex(0)
-            res = await listTransaction({
-                order_code: searchDebount,
-                applications,
+            res = await listTransReconciliation({
                 page_no: 0,
                 page_size: pageSize,
-                from_date: startDate ? convertDate(startDate) : null,
-                to_date: endDate ? convertDate(endDate) : null,
-                type_code: type,
-                merchant_id: merchant,
-                store_id: store,
-
-                // gasoline_id: '57dd1a73-d847-4d73-9791-08dc0841e7a9',
+                date_from: startDate ? convertDate(startDate) : null,
+                date_to: endDate ? convertDate(endDate) : null,
+                product_code: product ? product : null,
+                payment_gate_code: location.state?.provider_code,
+                statusReconciliation: status ? status : 0,
+                type_payment: type ? type : null,
             })
         } else {
-            res = await listTransaction({
-                order_code: searchDebount,
-                applications,
+            res = await listTransReconciliation({
                 page_no: pageIndex + 1,
                 page_size: pageSize,
-                from_date: startDate ? convertDate(startDate) : null,
-                to_date: endDate ? convertDate(endDate) : null,
-                type_code: type,
-                merchant_id: merchant,
-                store_id: store,
-
-                // gasoline_id: '57dd1a73-d847-4d73-9791-08dc0841e7a9',
+                date_from: startDate ? convertDate(startDate) : null,
+                date_to: endDate ? convertDate(endDate) : null,
+                product_code: product ? product : null,
+                payment_gate_code: location.state?.provider_code,
+                statusReconciliation: status ? status : 0,
+                type_payment: type ? type : null,
             })
         }
 
-        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 }
+            const newList = res.data.data?.data?.map((e, i) => {
+                return {
+                    ...e,
+
+                    statusReconciliationName: renderStatusName(
+                        e?.statusReconciliation
+                    ),
+
+                    index: i + 1 + pageIndex * pageSize,
+                }
             })
             setData(newList)
             setTotalRecord(res.data.data.total_elements)
@@ -90,49 +110,23 @@ const ToolNotificate = (props) => {
         }
     }
 
-    useEffect(() => {
-        getData(false)
-    }, [pageIndex])
-
-    useEffect(() => {
-        getData(true)
-    }, [searchDebount, startDate, type, merchant, store])
-
-    useEffect(() => {
-        if (merchant) {
-            getDropdownStore(merchant)
-        }
-        setStore()
-    }, [merchant])
-
-    const getDataMerchant = async () => {
-        const res = await dropdownMerchant({})
-
-        if (res.data.code == 200 && res.data.data) {
-            const newList = res.data.data.map((e) => {
-                return { ...e, name: e.merchant_name }
-            })
-            setListMerchant(newList)
-        } else {
-            toast.error(t(res.data.error), {
-                theme: 'colored',
+    const getDataDropdown = async () => {
+        const resPro = await dropdownProduct({})
+        if (resPro.data.code == 200 && resPro.data.data) {
+            const newList = resPro.data.data.map((e) => {
+                return { ...e, id: e.product_code, name: e?.product_name }
             })
+            setListProduct(newList)
         }
-    }
 
-    const getDropdownStore = async (id) => {
-        const res = await dropdownStore(id)
+        const resType = await dropdownListPayType()
 
-        if (res.data.code == 200 && res.data.data) {
-            console.log('res.data.data', res.data.data)
-            const newList = res.data.data.map((e) => {
-                return { ...e, name: e.store_name }
-            })
-            setListStore(newList)
-        } else {
-            toast.error(t(res.data.error), {
-                theme: 'colored',
+        if (resType.data.code == 200 && resType.data.data) {
+            const newList = resType.data.data.map((item) => {
+                return { ...item }
             })
+
+            setListType(newList)
         }
     }
 
@@ -150,12 +144,14 @@ const ToolNotificate = (props) => {
             type={type}
             setType={setType}
             listType={listType}
-            merchant={merchant}
-            setMerchant={setMerchant}
-            listMerchant={listMerchant}
-            store={store}
-            setStore={setStore}
-            listStore={listStore}
+            listProvide={listProvide}
+            listProduct={listProduct}
+            provide={provide}
+            setProvide={setProvide}
+            product={product}
+            setProduct={setProduct}
+            status={status}
+            setStatus={setStatus}
         />
     )
 }

src/app/views/PaymentSupplier/ListTrans/Table.js

@@ -12,13 +12,14 @@ import {
     MenuItem,
     Tooltip,
     Icon,
+    Typography,
 } from '@material-ui/core'
 import EditIcon from '@material-ui/icons/Edit'
 import DeleteIcon from '@material-ui/icons/Delete'
 import colors from 'app/assets/Color'
 import useStyles from 'app/styles/Table'
 import { Breadcrumb, SimpleCard } from 'app/components'
-
+import { toPriceVnd } from 'app/config/Function'
 const columns = [
     {
         id: 'index',
@@ -26,38 +27,25 @@ const columns = [
         align: 'center',
         minWidth: 80,
     },
-
     {
-        id: 'store_name',
-        label: 'Cây xăng',
+        id: 'created_date',
+        label: 'Thời gian giao dịch',
         align: 'left',
-        minWidth: 160,
+        minWidth: 110,
     },
-    // {
-    //     id: 'application',
-    //     label: 'Mã NV',
-    //     align: 'left',
-    //     minWidth: 140,
-    // },
     {
         id: 'order_code',
         label: 'Mã hoá đơn',
         align: 'left',
         minWidth: 160,
     },
+
     {
-        id: 'created_date',
-        label: 'Ngày giao dịch',
+        id: 'store_name',
+        label: 'Cây xăng',
         align: 'left',
-        minWidth: 110,
+        minWidth: 160,
     },
-
-    // {
-    //     id: 'IP',
-    //     label: 'Loại nhiên liệu',
-    //     align: 'left',
-    //     minWidth: 140,
-    // },
     {
         id: 'product_name',
         label: 'Sản phẩm',
@@ -69,28 +57,34 @@ const columns = [
         label: 'Đơn giá',
         align: 'left',
         minWidth: 80,
+        isMonney: true,
     },
     {
         id: 'quantity',
         label: 'Lượng nhiên liệu',
         align: 'left',
         minWidth: 80,
+        isMonney: true,
     },
     {
         id: 'price',
         label: 'Thành tiền',
         align: 'left',
         minWidth: 80,
+        isMonney: true,
     },
+
     {
-        id: 'type_payment',
-        label: 'Phương thức thanh toán',
+        id: 'commission',
+        label: 'Hoa hồng',
         align: 'left',
-        minWidth: 100,
+        minWidth: 80,
+        isMonney: true,
     },
+
     {
-        id: 'status_text',
-        label: 'Trạng thái',
+        id: 'type_payment',
+        label: 'Phương thức thanh toán',
         align: 'left',
         minWidth: 100,
     },
@@ -117,6 +111,18 @@ function TableList(props) {
         setPageSize(event.target.value)
     }
 
+    const renderStatusBg = (status) => {
+        if (status == 3) return '#ECFDF3'
+        if (status == 2) return '#FFDC98'
+        return '#F2F4F7'
+    }
+
+    const renderStatusColor = (status) => {
+        if (status == 3) return '#027A48'
+        if (status == 2) return '#F1AA1F'
+        return '#344054'
+    }
+
     return (
         <Paper className={classes.root}>
             <TableContainer className={classes.container}>
@@ -135,6 +141,14 @@ function TableList(props) {
                                     {column.label}
                                 </TableCell>
                             ))}
+                            <TableCell
+                                style={{
+                                    width: 120,
+                                    backgroundColor: colors.headerTable,
+                                }}
+                            >
+                                Trạng thái đối soát
+                            </TableCell>
                         </TableRow>
                     </TableHead>
                     <TableBody className={classes.columnTable}>
@@ -147,28 +161,47 @@ function TableList(props) {
                                     key={row.id}
                                 >
                                     {columns.map((column) => {
-                                        const avatar = row[column.id]
-
+                                        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.format ? (
-                                                    <img
-                                                        src={column.format(
-                                                            avatar
-                                                        )}
-                                                        className={
-                                                            classes.image
-                                                        }
-                                                    />
-                                                ) : (
-                                                    avatar
-                                                )}
+                                                {column.isMonney
+                                                    ? toPriceVnd(data)
+                                                    : data}
                                             </TableCell>
                                         )
                                     })}
+                                    <TableCell
+                                        style={{
+                                            textAlign: 'center',
+                                        }}
+                                    >
+                                        <Typography
+                                            style={{
+                                                padding: 5,
+                                                backgroundColor: renderStatusBg(
+                                                    row?.statusReconciliation
+                                                ),
+                                                color: renderStatusColor(
+                                                    row?.statusReconciliation
+                                                ),
+                                                borderRadius: 10,
+                                            }}
+                                        >
+                                            {row?.statusReconciliationName}
+                                        </Typography>
+                                    </TableCell>
                                 </TableRow>
                             )
                         })}

src/app/views/PaymentSupplier/ListTrans/View.js

@@ -42,6 +42,14 @@ function CustomerView(props) {
         store,
         setStore,
         listStore,
+        listProvide,
+        listProduct,
+        provide,
+        setProvide,
+        product,
+        setProduct,
+        status,
+        setStatus,
     } = props
 
     const handleChange = (event) => {
@@ -51,7 +59,8 @@ function CustomerView(props) {
         <Fragment>
             <Grid
                 style={{
-                    marginBottom: 20,
+                    padding: 10,
+                    marginBottom: 10,
                 }}
                 //justify={'space-between'}
                 alignItems={'center'}
@@ -70,15 +79,15 @@ function CustomerView(props) {
                     />
                 </Grid>
 
-                <Grid item lg={3} md={3} sm={3} xs={3}>
+                <Grid item lg={2} md={2} sm={3} xs={3}>
                     <FormControl variant="outlined" fullWidth>
                         <InputLabel htmlFor="outlined-age-native-simple">
-                            Phương thức thanh toán
+                            Sản phẩm
                         </InputLabel>
                         <Select
-                            label="Phương thức thanh toán"
-                            value={type}
-                            onChange={(e) => setType(e.target.value)}
+                            label="Sản phẩm"
+                            value={product}
+                            onChange={(e) => setProduct(e.target.value)}
                             inputProps={{
                                 name: 'age',
                                 id: 'outlined-age-native-simple',
@@ -87,34 +96,22 @@ function CustomerView(props) {
                             <MenuItem value="">
                                 <em>Tất cả</em>
                             </MenuItem>
-                            {[
-                                {
-                                    id: 'QR',
-                                    name: 'QR',
-                                },
-                                {
-                                    id: 'CASH',
-                                    name: 'Tiền mặt',
-                                },
-                                {
-                                    id: 'DEBT',
-                                    name: 'Công nợ',
-                                },
-                            ].map((e) => (
+                            {listProduct.map((e) => (
                                 <MenuItem value={e.id}>{e.name}</MenuItem>
                             ))}
                         </Select>
                     </FormControl>
                 </Grid>
-                <Grid item lg={3} md={3} sm={3} xs={3}>
+
+                <Grid item lg={2} md={2} sm={3} xs={3}>
                     <FormControl variant="outlined" fullWidth>
                         <InputLabel htmlFor="outlined-age-native-simple">
-                            Pháp nhân
+                            PT thanh toán
                         </InputLabel>
                         <Select
-                            label="Pháp nhân"
-                            value={merchant}
-                            onChange={(e) => setMerchant(e.target.value)}
+                            label="PT thanh toán"
+                            value={type}
+                            onChange={(e) => setType(e.target.value)}
                             inputProps={{
                                 name: 'age',
                                 id: 'outlined-age-native-simple',
@@ -123,21 +120,22 @@ function CustomerView(props) {
                             <MenuItem value="">
                                 <em>Tất cả</em>
                             </MenuItem>
-                            {listMerchant.map((e) => (
+                            {listType.map((e) => (
                                 <MenuItem value={e.id}>{e.name}</MenuItem>
                             ))}
                         </Select>
                     </FormControl>
                 </Grid>
-                <Grid item lg={3} md={3} sm={3} xs={3}>
+
+                <Grid item lg={2} md={2} sm={3} xs={3}>
                     <FormControl variant="outlined" fullWidth>
                         <InputLabel htmlFor="outlined-age-native-simple">
-                            Cây xăng
+                            Trạng thái
                         </InputLabel>
                         <Select
-                            label="Cây xăng"
-                            value={store}
-                            onChange={(e) => setStore(e.target.value)}
+                            label="Trạng thái"
+                            value={status}
+                            onChange={(e) => setStatus(e.target.value)}
                             inputProps={{
                                 name: 'age',
                                 id: 'outlined-age-native-simple',
@@ -146,13 +144,30 @@ function CustomerView(props) {
                             <MenuItem value="">
                                 <em>Tất cả</em>
                             </MenuItem>
-                            {listStore.map((e) => (
+                            {[
+                                {
+                                    name: 'Chưa đối soát',
+                                    value: 1,
+                                    id: 1,
+                                },
+                                {
+                                    name: 'Đang đối soát',
+                                    value: 2,
+                                    id: 2,
+                                },
+                                {
+                                    name: 'Đã đối soát',
+                                    value: 3,
+                                    id: 3,
+                                },
+                            ].map((e) => (
                                 <MenuItem value={e.id}>{e.name}</MenuItem>
                             ))}
                         </Select>
                     </FormControl>
                 </Grid>
-                <Grid item lg={3} md={3} sm={3} xs={3}>
+
+                <Grid item lg={2} md={2} sm={3} xs={3}>
                     <DateRange
                         date={startDate}
                         changeDateRange={changeDateRange}

src/app/views/PaymentSupplier/PieChartReport.js

@@ -20,58 +20,15 @@ import { KeyboardDatePicker } from '@material-ui/pickers'
 
 //import { reportStorePieChart } from 'app/apis/Functions/dashboard'
 
-const ReportQuantity = ({ user }) => {
+const ReportQuantity = ({ data }) => {
     const [state, setState] = useState([])
     const [status, setStatus] = useState(1)
     const [startDate, setStartDate] = useState(new Date())
     const color = ['#73DDFF', '#45C8F1', '#659FEA', '#124F9F']
 
-    useEffect(() => {
-        //  getData()
-    }, [startDate, status])
-    const handleDateChangeLast = (date) => {
-        console.log('date', date)
-        setStartDate(date)
-    }
-
-    // const getData = async () => {
-    //     if (startDate) {
-    //         const res = await reportStorePieChart({
-    //             month: parseInt(convertDate(startDate).substring(3, 5)),
-    //             year: parseInt(convertDate(startDate).substring(6, 10)),
-    //             type_chart: status,
-    //             store_id: user?.store_id,
-    //         })
-    //         if (res.data.code == 200 && res.data.data) {
-    //             const newList = res.data.data.map((e) => {
-    //                 return {
-    //                     ...e,
-    //                     value: e?.total_revenue,
-    //                     name: e?.product_name,
-    //                 }
-    //             })
-    //             setState(newList)
-    //         } else {
-    //             setState([])
-    //         }
-    //     }
-    // }
-
     return (
         <div className="mb-sm-20">
-            <CustomPieChart
-                data={[
-                    {
-                        value: 20,
-                        name: 'hêleo',
-                    },
-                    {
-                        value: 26,
-                        name: 'hêleo12',
-                    },
-                ]}
-                color={color}
-            />
+            <CustomPieChart data={data} color={color} />
 
             {/* <Grid
                         style={{

src/app/views/PaymentSupplier/SheetCheck/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 {
+    listSheetReconciliation,
+    updateSheetReconciliation,
+} from 'app/apis/Functions/reconciliation'
+import { useHistory, useLocation } 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 { useTranslation } from 'react-i18next'
-import { dropdownMerchant, dropdownStore } from 'app/apis/Functions/dropdown'
+import { dropdownMerchant, dropdownProvider } from 'app/apis/Functions/dropdown'
 
 const ToolNotificate = (props) => {
+    const location = useLocation()
     const [txtSearch, setTxtSearch] = useState('')
     const [applications, setApplications] = useState('')
     const [pageIndex, setPageIndex] = useState(0)
@@ -22,15 +26,13 @@ const ToolNotificate = (props) => {
     const [endDate, setEndDate] = useState()
     const { t } = useTranslation()
     const [data, setData] = useState([])
-    const [type, setType] = useState()
-    const [listType, setListType] = useState([])
-    const [merchant, setMerchant] = useState()
-    const [listMerchant, setListMerchant] = useState([])
-    const [store, setStore] = useState()
-    const [listStore, setListStore] = useState([])
+
+    const [status, setStatus] = useState()
+    const [listProvide, setListProvide] = useState([])
+    const [provide, setProvide] = useState()
 
     useEffect(() => {
-        getDataMerchant()
+        getDataDropdown()
     }, [])
 
     const changeDateRange = (start, end) => {
@@ -39,40 +41,30 @@ const ToolNotificate = (props) => {
     }
 
     const getData = async (init) => {
-        props.showLoading()
         let res
         if (init) {
             setPageIndex(0)
-            res = await listTransaction({
+            res = await listSheetReconciliation({
                 order_code: searchDebount,
-                applications,
                 page_no: 0,
                 page_size: pageSize,
-                from_date: startDate ? convertDate(startDate) : null,
-                to_date: endDate ? convertDate(endDate) : null,
-                type_code: type,
-                merchant_id: merchant,
-                store_id: store,
-
-                // gasoline_id: '57dd1a73-d847-4d73-9791-08dc0841e7a9',
+                date_from: startDate ? convertDate(startDate) : null,
+                date_to: endDate ? convertDate(endDate) : null,
+                status: status ? status : 0,
+                idPaymentPartner: location.state?.provider_code,
             })
         } else {
-            res = await listTransaction({
+            res = await listSheetReconciliation({
                 order_code: searchDebount,
-                applications,
                 page_no: pageIndex + 1,
                 page_size: pageSize,
                 from_date: startDate ? convertDate(startDate) : null,
                 to_date: endDate ? convertDate(endDate) : null,
-                type_code: type,
-                merchant_id: merchant,
-                store_id: store,
-
-                // gasoline_id: '57dd1a73-d847-4d73-9791-08dc0841e7a9',
+                status: status ? status : 0,
+                idPaymentPartner: location.state?.provider_code,
             })
         }
 
-        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 }
@@ -96,39 +88,34 @@ const ToolNotificate = (props) => {
 
     useEffect(() => {
         getData(true)
-    }, [searchDebount, startDate, type, merchant, store])
-
-    useEffect(() => {
-        if (merchant) {
-            getDropdownStore(merchant)
-        }
-        setStore()
-    }, [merchant])
-
-    const getDataMerchant = async () => {
-        const res = await dropdownMerchant({})
+    }, [searchDebount, startDate, status, provide])
 
+    const getDataDropdown = async () => {
+        const res = await dropdownProvider({})
         if (res.data.code == 200 && res.data.data) {
             const newList = res.data.data.map((e) => {
-                return { ...e, name: e.merchant_name }
-            })
-            setListMerchant(newList)
-        } else {
-            toast.error(t(res.data.error), {
-                theme: 'colored',
+                return { ...e, id: e.code }
             })
+            setListProvide(newList)
         }
     }
-
-    const getDropdownStore = async (id) => {
-        const res = await dropdownStore(id)
-
-        if (res.data.code == 200 && res.data.data) {
-            console.log('res.data.data', res.data.data)
-            const newList = res.data.data.map((e) => {
-                return { ...e, name: e.store_name }
-            })
-            setListStore(newList)
+    const removeItem = async (id) => {
+        props.showLoading()
+        const res = await updateSheetReconciliation({
+            id: id,
+            status: 3,
+        })
+        getData(false)
+        props.hideLoading()
+        if (res.data.code == 200) {
+            if (res.data.code == 200) {
+                toast.success(
+                    'Cập nhật trạng thái phiếu đối soát thành công!',
+                    {
+                        theme: 'colored',
+                    }
+                )
+            }
         } else {
             toast.error(t(res.data.error), {
                 theme: 'colored',
@@ -147,15 +134,12 @@ const ToolNotificate = (props) => {
             applications={applications}
             startDate={startDate}
             changeDateRange={changeDateRange}
-            type={type}
-            setType={setType}
-            listType={listType}
-            merchant={merchant}
-            setMerchant={setMerchant}
-            listMerchant={listMerchant}
-            store={store}
-            setStore={setStore}
-            listStore={listStore}
+            listProvide={listProvide}
+            provide={provide}
+            setProvide={setProvide}
+            status={status}
+            setStatus={setStatus}
+            removeItem={removeItem}
         />
     )
 }

src/app/views/PaymentSupplier/SheetCheck/Table.js

@@ -12,12 +12,18 @@ import {
     MenuItem,
     Tooltip,
     Icon,
+    Typography,
 } from '@material-ui/core'
 import EditIcon from '@material-ui/icons/Edit'
 import DeleteIcon from '@material-ui/icons/Delete'
 import colors from 'app/assets/Color'
 import useStyles from 'app/styles/Table'
 import { Breadcrumb, SimpleCard } from 'app/components'
+import { toPriceVnd } from 'app/config/Function'
+import { checkRole } from 'app/config/Function'
+import useAuth from 'app/hooks/useAuth'
+import { useHistory } from 'react-router-dom'
+import DialogTransition from 'app/components/dialog/DialogTransition'
 
 const columns = [
     {
@@ -26,73 +32,44 @@ const columns = [
         align: 'center',
         minWidth: 80,
     },
-
     {
-        id: 'store_name',
-        label: 'Cây xăng',
+        id: 'code',
+        label: 'Mã phiếu đối soát',
         align: 'left',
         minWidth: 160,
     },
-    // {
-    //     id: 'application',
-    //     label: 'Mã NV',
-    //     align: 'left',
-    //     minWidth: 140,
-    // },
     {
-        id: 'order_code',
-        label: 'Mã hoá đơn',
+        id: 'idPaymentPartner',
+        label: 'Đối tác',
         align: 'left',
-        minWidth: 160,
-    },
-    {
-        id: 'created_date',
-        label: 'Ngày giao dịch',
-        align: 'left',
-        minWidth: 110,
+        minWidth: 80,
     },
 
-    // {
-    //     id: 'IP',
-    //     label: 'Loại nhiên liệu',
-    //     align: 'left',
-    //     minWidth: 140,
-    // },
     {
-        id: 'product_name',
-        label: 'Sản phẩm',
+        id: 'create_date',
+        label: 'Ngày tạo phiếu',
         align: 'left',
-        minWidth: 120,
+        minWidth: 110,
     },
     {
-        id: 'unit_price',
-        label: 'Đơn giá',
+        id: 'update_date',
+        label: 'Ngày cập nhật',
         align: 'left',
-        minWidth: 80,
+        minWidth: 110,
     },
     {
-        id: 'quantity',
-        label: 'Lượng nhiên liệu',
+        id: 'date_reconciliation',
+        label: 'Ngày đối soát',
         align: 'left',
-        minWidth: 80,
+        minWidth: 110,
     },
+
     {
-        id: 'price',
-        label: 'Thành tiền',
+        id: 'totalCommission',
+        label: 'Hoa hồng',
         align: 'left',
         minWidth: 80,
-    },
-    {
-        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,
+        isMonney: true,
     },
 ]
 
@@ -109,6 +86,14 @@ function TableList(props) {
         pageIndex,
         totalRecords,
     } = props
+    let history = useHistory()
+    const [open, setOpen] = React.useState(false)
+    const [selected, setSelected] = useState({
+        name: '',
+        id: '',
+        title: '',
+        content: '',
+    })
 
     const handleChangePage = (event, newPage) => {
         setPageIndex(newPage)
@@ -116,7 +101,22 @@ function TableList(props) {
     const handleChangeRowsPerPage = (event) => {
         setPageSize(event.target.value)
     }
+    const renderStatusBg = (status) => {
+        if (status == 3) return '#ECFDF3'
+        if (status == 2) return '#FFDC98'
+        return '#F2F4F7'
+    }
+
+    const renderStatusColor = (status) => {
+        if (status == 3) return '#027A48'
+        if (status == 2) return '#F1AA1F'
+        return '#344054'
+    }
+    const handleClose = () => {
+        setOpen(false)
+    }
 
+    const { user } = useAuth()
     return (
         <Paper className={classes.root}>
             <TableContainer className={classes.container}>
@@ -135,6 +135,14 @@ function TableList(props) {
                                     {column.label}
                                 </TableCell>
                             ))}
+                            <TableCell
+                                style={{
+                                    width: 100,
+                                    backgroundColor: colors.headerTable,
+                                }}
+                            >
+                                Trạng thái
+                            </TableCell>
                         </TableRow>
                     </TableHead>
                     <TableBody className={classes.columnTable}>
@@ -147,28 +155,44 @@ function TableList(props) {
                                     key={row.id}
                                 >
                                     {columns.map((column) => {
-                                        const avatar = row[column.id]
-
+                                        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.format ? (
-                                                    <img
-                                                        src={column.format(
-                                                            avatar
-                                                        )}
-                                                        className={
-                                                            classes.image
-                                                        }
-                                                    />
-                                                ) : (
-                                                    avatar
-                                                )}
+                                                {column.isMonney
+                                                    ? toPriceVnd(data)
+                                                    : data}
                                             </TableCell>
                                         )
                                     })}
+                                    <TableCell align={'center'}>
+                                        <Typography
+                                            style={{
+                                                padding: 5,
+                                                backgroundColor: renderStatusBg(
+                                                    row?.status
+                                                ),
+                                                color: renderStatusColor(
+                                                    row?.status
+                                                ),
+                                                borderRadius: 10,
+                                                textAlign: 'center',
+                                            }}
+                                        >
+                                            {row?.status_name}
+                                        </Typography>
+                                    </TableCell>
                                 </TableRow>
                             )
                         })}
@@ -184,6 +208,15 @@ function TableList(props) {
                 onChangePage={handleChangePage}
                 onChangeRowsPerPage={handleChangeRowsPerPage}
             />
+            <DialogTransition
+                data={selected}
+                open={open}
+                handleClose={handleClose}
+                onAgree={() => {
+                    removeItem(selected.id)
+                    handleClose()
+                }}
+            />
         </Paper>
     )
 }

src/app/views/PaymentSupplier/SheetCheck/View.js

@@ -33,15 +33,13 @@ function CustomerView(props) {
         applications,
         startDate,
         changeDateRange,
-        type,
-        setType,
-        listType,
-        listMerchant,
-        setMerchant,
-        merchant,
-        store,
-        setStore,
-        listStore,
+
+        status,
+        setStatus,
+        provide,
+        setProvide,
+        listProvide,
+        removeItem,
     } = props
 
     const handleChange = (event) => {
@@ -49,140 +47,92 @@ function CustomerView(props) {
     }
     return (
         <Fragment>
-            <div className="m-sm-30">
-                <div className="mb-sm-30">
-                    <Breadcrumb
-                        routeSegments={[
-                            {
-                                name: 'Danh sách giao dịch',
-                                path: '/transations',
-                            },
-                        ]}
+            <Grid
+                style={{
+                    padding: 10,
+                    marginBottom: 20,
+                }}
+                //justify={'space-between'}
+                alignItems={'center'}
+                container
+                spacing={3}
+            >
+                <Grid item lg={3} md={3} sm={4} xs={4}>
+                    <TextField
+                        variant="outlined"
+                        className="w-full"
+                        label="Tìm kiếm"
+                        onChange={(e) => {
+                            const text = e.target.value
+                            setTxtSearch(text)
+                        }}
                     />
-                </div>
+                </Grid>
 
-                <Grid
-                    style={{
-                        padding: 10,
-                        marginBottom: 20,
-                    }}
-                    //justify={'space-between'}
-                    alignItems={'center'}
-                    container
-                    spacing={3}
-                >
-                    <Grid item lg={3} md={3} sm={3} xs={3}>
-                        <TextField
-                            variant="outlined"
-                            className="w-full"
-                            label="Tìm kiếm"
-                            onChange={(e) => {
-                                const text = e.target.value
-                                setTxtSearch(text)
+                <Grid item lg={3} md={3} sm={3} xs={3}>
+                    <FormControl variant="outlined" fullWidth>
+                        <InputLabel htmlFor="outlined-age-native-simple">
+                            Trạng thái
+                        </InputLabel>
+                        <Select
+                            label="Trạng thái"
+                            value={status}
+                            onChange={(e) => setStatus(e.target.value)}
+                            inputProps={{
+                                name: 'age',
+                                id: 'outlined-age-native-simple',
                             }}
-                        />
-                    </Grid>
+                        >
+                            <MenuItem value="">
+                                <em>Tất cả</em>
+                            </MenuItem>
+                            {[
+                                {
+                                    name: 'Nháp',
+                                    value: 1,
+                                    id: 1,
+                                },
 
-                    <Grid item lg={3} md={3} sm={3} xs={3}>
-                        <FormControl variant="outlined" fullWidth>
-                            <InputLabel htmlFor="outlined-age-native-simple">
-                                Phương thức thanh toán
-                            </InputLabel>
-                            <Select
-                                label="Phương thức thanh toán"
-                                value={type}
-                                onChange={(e) => setType(e.target.value)}
-                                inputProps={{
-                                    name: 'age',
-                                    id: 'outlined-age-native-simple',
-                                }}
-                            >
-                                <MenuItem value="">
-                                    <em>Tất cả</em>
-                                </MenuItem>
-                                {[
-                                    {
-                                        id: 'QR',
-                                        name: 'QR',
-                                    },
-                                    {
-                                        id: 'CASH',
-                                        name: 'Tiền mặt',
-                                    },
-                                    {
-                                        id: 'DEBT',
-                                        name: 'Công nợ',
-                                    },
-                                ].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">
-                                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ây xăng
-                            </InputLabel>
-                            <Select
-                                label="Cây xăng"
-                                value={store}
-                                onChange={(e) => setStore(e.target.value)}
-                                inputProps={{
-                                    name: 'age',
-                                    id: 'outlined-age-native-simple',
-                                }}
-                            >
-                                <MenuItem value="">
-                                    <em>Tất cả</em>
-                                </MenuItem>
-                                {listStore.map((e) => (
-                                    <MenuItem value={e.id}>{e.name}</MenuItem>
-                                ))}
-                            </Select>
-                        </FormControl>
-                    </Grid>
-                    <Grid item lg={3} md={3} sm={3} xs={3}>
-                        <DateRange
-                            date={startDate}
-                            changeDateRange={changeDateRange}
-                        />
-                    </Grid>
+                                {
+                                    name: 'Chưa đối soát',
+                                    value: 2,
+                                    id: 2,
+                                },
+                                {
+                                    name: 'Đang đối soát',
+                                    value: 3,
+                                    id: 3,
+                                },
+                                {
+                                    name: 'Đã đối soát',
+                                    value: 4,
+                                    id: 4,
+                                },
+                            ].map((e) => (
+                                <MenuItem value={e.id}>{e.name}</MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+                </Grid>
+
+                <Grid item lg={3} md={3} sm={3} xs={3}>
+                    <DateRange
+                        date={startDate}
+                        changeDateRange={changeDateRange}
+                    />
                 </Grid>
+            </Grid>
 
-                <Table
-                    data={data}
-                    changeActive={changeActive}
-                    setChangeActive={setChangeActive}
-                    handeChangeActive={handeChangeActive}
-                    pageIndex={pageIndex}
-                    setPageIndex={setPageIndex}
-                    totalRecords={totalRecords}
-                />
-            </div>
+            <Table
+                data={data}
+                changeActive={changeActive}
+                setChangeActive={setChangeActive}
+                handeChangeActive={handeChangeActive}
+                pageIndex={pageIndex}
+                setPageIndex={setPageIndex}
+                totalRecords={totalRecords}
+                removeItem={removeItem}
+            />
         </Fragment>
     )
 }

src/app/views/PaymentSupplier/Table.js

@@ -251,13 +251,13 @@ function TableList(props) {
                                             user,
                                             '/payment-supplier/update'
                                         ) ? (
-                                            <Tooltip title="Cập nhật">
+                                            <Tooltip title="Chi tiết">
                                                 <IconButton
                                                     onClick={() => {
                                                         history.push({
                                                             pathname:
                                                                 '/payment-supplier/detail',
-                                                            state: row.id,
+                                                            state: row,
                                                         })
                                                     }}
                                                     className={classes.button}

src/app/views/Reconciliation/ListTrans/Index.js

@@ -8,7 +8,11 @@ import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
 import { toast } from 'react-toastify'
 import useDebounce from 'app/hooks/useDebounce'
 import { useTranslation } from 'react-i18next'
-import { dropdownProduct, dropdownProvider } from 'app/apis/Functions/dropdown'
+import {
+    dropdownProduct,
+    dropdownProvider,
+    dropdownListPayType,
+} from 'app/apis/Functions/dropdown'
 
 const ToolNotificate = (props) => {
     const [txtSearch, setTxtSearch] = useState('')
@@ -29,6 +33,7 @@ const ToolNotificate = (props) => {
     const [listProduct, setListProduct] = useState([])
     const [product, setProduct] = useState()
     const [status, setStatus] = useState()
+
     useEffect(() => {
         getData(false)
     }, [pageIndex])
@@ -122,6 +127,16 @@ const ToolNotificate = (props) => {
             })
             setListProduct(newList)
         }
+
+        const resType = await dropdownListPayType()
+
+        if (resType.data.code == 200 && resType.data.data) {
+            const newList = resType.data.data.map((item) => {
+                return { ...item }
+            })
+
+            setListType(newList)
+        }
     }
 
     return (

src/app/views/Reconciliation/ListTrans/Table.js

@@ -149,7 +149,7 @@ function TableList(props) {
                             ))}
                             <TableCell
                                 style={{
-                                    width: 110,
+                                    width: 120,
                                     backgroundColor: colors.headerTable,
                                 }}
                             >

src/app/views/Reconciliation/ListTrans/View.js

@@ -154,20 +154,7 @@ function CustomerView(props) {
                                 <MenuItem value="">
                                     <em>Tất cả</em>
                                 </MenuItem>
-                                {[
-                                    {
-                                        id: 'QR',
-                                        name: 'QR',
-                                    },
-                                    {
-                                        id: 'CASH',
-                                        name: 'Tiền mặt',
-                                    },
-                                    {
-                                        id: 'DEBT',
-                                        name: 'Công nợ',
-                                    },
-                                ].map((e) => (
+                                {listType.map((e) => (
                                     <MenuItem value={e.id}>{e.name}</MenuItem>
                                 ))}
                             </Select>

src/app/views/Reconciliation/Setting/Update.js

@@ -236,7 +236,6 @@ const SimpleForm = (props) => {
         reconciliationTime,
         percent,
     } = state
-    console.log('reconciliationTime', reconciliationTime)
 
     return (
         <div className="m-sm-30">

src/app/views/Reconciliation/Sheet/Detail.js

@@ -33,13 +33,21 @@ import { createSupplier } from 'app/apis/Functions/supplier'
 import { useTranslation } from 'react-i18next'
 import useAuth from 'app/hooks/useAuth'
 import ListTrans from './ListTrans/Index'
+import {
+    detailSheetReconciliation,
+    updateSheetReconciliation,
+} from 'app/apis/Functions/reconciliation'
 
 const SimpleForm = (props) => {
     const [state, setState] = useState({})
-
+    const location = useLocation()
     const [listDrop, setListDrop] = useState([])
     const [listAction, setListAction] = useState([])
 
+    useEffect(() => {
+        getDataDefault()
+    }, [])
+
     const { user } = useAuth()
 
     const { t } = useTranslation()
@@ -49,19 +57,21 @@ const SimpleForm = (props) => {
     const handleSubmit = async (event) => {
         const newValue = trimObject(state)
         props.showLoading()
-        const res = await createSupplier({
-            ...newValue,
-            type: '3',
-            status: 1,
+        const res = await updateSheetReconciliation({
+            id: location.state?.id,
+            status: 3,
         })
 
         props.hideLoading()
         if (res.data.code == 200) {
             history.push('/reconciliation/sheet')
             if (res.data.code == 200) {
-                toast.success('Tạo nhà cung cấp thiết bị thành công!', {
-                    theme: 'colored',
-                })
+                toast.success(
+                    'Cập nhật trạng thái phiếu đối soát thành công!',
+                    {
+                        theme: 'colored',
+                    }
+                )
             }
         } else {
             toast.error(t(res.data.error), {
@@ -70,6 +80,21 @@ const SimpleForm = (props) => {
         }
     }
 
+    const getDataDefault = async () => {
+        props.showLoading()
+        try {
+            const res = await detailSheetReconciliation(location.state?.id, {})
+            if (res.data.data) {
+                setState({ ...res.data.data })
+            }
+        } catch (err) {
+            toast.error(t(err), {
+                theme: 'colored',
+            })
+        }
+        props.hideLoading()
+    }
+
     const handleChange = (event) => {
         event.persist()
         setState({
@@ -78,7 +103,16 @@ const SimpleForm = (props) => {
         })
     }
 
-    const { provider_code, provider_name, phone, email, address } = state
+    const {
+        code,
+        idPaymentPartner,
+        create_by,
+        note,
+        date_reconciliation,
+        update_date,
+        create_date,
+        status,
+    } = state
     return (
         <div className="m-sm-30">
             <div className="mb-sm-30">
@@ -116,7 +150,7 @@ const SimpleForm = (props) => {
                                 <Link to="/reconciliation/sheet">
                                     <Button
                                         style={{
-                                            marginRight: 20,
+                                            marginRight: status != 3 ? 20 : 0,
                                         }}
                                         color="inherit"
                                         variant="contained"
@@ -127,13 +161,17 @@ const SimpleForm = (props) => {
                                         </span>
                                     </Button>
                                 </Link>
-                                <Button
-                                    color="primary"
-                                    variant="contained"
-                                    type="submit"
-                                >
-                                    <span className="capitalize">Đối soát</span>
-                                </Button>
+                                {status != 3 ? (
+                                    <Button
+                                        color="primary"
+                                        variant="contained"
+                                        type="submit"
+                                    >
+                                        <span className="capitalize">
+                                            Đối soát
+                                        </span>
+                                    </Button>
+                                ) : null}
                             </Grid>
                             <Grid
                                 item
@@ -166,7 +204,7 @@ const SimpleForm = (props) => {
                                                 marginBottom: 10,
                                             }}
                                         >
-                                            hêhh
+                                            {code}
                                         </Typography>
 
                                         <Typography
@@ -184,7 +222,7 @@ const SimpleForm = (props) => {
                                                 marginBottom: 10,
                                             }}
                                         >
-                                            hêhh
+                                            {idPaymentPartner}
                                         </Typography>
 
                                         <Typography
@@ -201,7 +239,7 @@ const SimpleForm = (props) => {
                                                 fontSize: 14,
                                             }}
                                         >
-                                            hêhh
+                                            {create_by}
                                         </Typography>
                                     </Card>
                                 </Grid>
@@ -227,7 +265,7 @@ const SimpleForm = (props) => {
                                                 marginBottom: 10,
                                             }}
                                         >
-                                            hêhh
+                                            {create_date}
                                         </Typography>
 
                                         <Typography
@@ -245,7 +283,7 @@ const SimpleForm = (props) => {
                                                 marginBottom: 10,
                                             }}
                                         >
-                                            hêhh
+                                            {update_date}
                                         </Typography>
 
                                         <Typography
@@ -262,7 +300,7 @@ const SimpleForm = (props) => {
                                                 fontSize: 14,
                                             }}
                                         >
-                                            hêhh
+                                            {date_reconciliation}
                                         </Typography>
                                     </Card>
                                 </Grid>
@@ -289,9 +327,7 @@ const SimpleForm = (props) => {
                                                 height: 130,
                                             }}
                                         >
-                                            Phải có ít nhất một bồn bể!Phải có
-                                            ít nhất một bồn bể!Phải có ít nhất
-                                            một bồn bể!Phải có ít nhất một bồn
+                                            {note}
                                         </Typography>
                                     </Card>
                                 </Grid>
@@ -306,7 +342,13 @@ const SimpleForm = (props) => {
                                 container
                                 spacing={2}
                             >
-                                <ListTrans isDetail={true} />
+                                <ListTrans
+                                    isDetail={true}
+                                    idReconciliation={location.state?.id}
+                                    idPaymentPartner={
+                                        location.state?.idPaymentPartner
+                                    }
+                                />
                             </Grid>
                         </Grid>
                     </ValidatorForm>

src/app/views/Reconciliation/Sheet/Dialog/Dialog.js

@@ -9,6 +9,7 @@ import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from '@material-ui/icons/Close'
 import Typography from '@material-ui/core/Typography'
 import CustomerList from './Index'
+import { stubFalse } from 'lodash'
 
 const styles = (theme) => ({
     root: {
@@ -55,7 +56,8 @@ const DialogActions = withStyles((theme) => ({
 }))(MuiDialogActions)
 
 const CustomizedDialogs = (props) => {
-    const { onSelectCustomer, cusomterSelect, idPaymentPartner } = props
+    const { onSelectCustomer, cusomterSelect, idPaymentPartner, onAddTrans } =
+        props
     const [open, setOpen] = useState(false)
 
     const handleClickOpen = () => {
@@ -105,6 +107,11 @@ const CustomizedDialogs = (props) => {
                         handleClose={handleClose}
                         idPaymentPartner={idPaymentPartner}
                         open={open}
+                        onAddTrans={(list) => {
+                            console.log('run')
+                            onAddTrans(list)
+                            handleClose()
+                        }}
                     />
                 </DialogContent>
             </Dialog>

src/app/views/Reconciliation/Sheet/Dialog/Index.js

 import React, { useState, useEffect } from 'react'
 import LogAuth from './View'
-import { listTransReconciliation } from 'app/apis/Functions/reconciliation'
+import { listTransSelect } from 'app/apis/Functions/reconciliation'
 import { useHistory } from 'react-router-dom'
 import { toPriceVnd, convertDate } from 'app/config/Function'
 import { connect } from 'react-redux'
@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next'
 import { dropdownMerchant, dropdownStore } from 'app/apis/Functions/dropdown'
 
 const ToolNotificate = (props) => {
-    const { customSelect, handleClose, idPaymentPartner } = props
+    const { customSelect, handleClose, idPaymentPartner, onAddTrans } = props
     const [listSelected, setListSelected] = useState([])
     const [txtSearch, setTxtSearch] = useState('')
     const [applications, setApplications] = useState('')
@@ -39,10 +39,11 @@ const ToolNotificate = (props) => {
 
             props.showLoading()
 
-            const res = await listTransReconciliation({
+            const res = await listTransSelect({
+                text: searchDebount,
                 date_from: startDate ? convertDate(startDate) : null,
                 date_to: endDate ? convertDate(endDate) : null,
-                statusReconciliation: 1,
+                statusReconciliation: 0,
                 payment_gate_code: props?.idPaymentPartner,
                 order_code: searchDebount,
                 type_payment: type || type,
@@ -51,16 +52,10 @@ const ToolNotificate = (props) => {
             console.log('res.data', res.data)
             props.hideLoading()
             if (res.data.code == 200 && res.data.data) {
-                console.log('idPaymentPartner', res.data.data)
-                const newList = res.data.data?.data?.map((e, i) => {
+                const newList = res.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(t(res.data.error), {
                     theme: 'colored',
@@ -70,8 +65,6 @@ const ToolNotificate = (props) => {
     }
 
     useEffect(() => {
-        console.log('props?.open', props?.open)
-        console.log('props?.open', props?.idPaymentPartner)
         if (props?.open) {
             console.log('run')
             getData(true)
@@ -79,7 +72,13 @@ const ToolNotificate = (props) => {
     }, [searchDebount, startDate, type, props])
 
     const onAdd = () => {
-        console.log('listSelected', listSelected)
+        if (listSelected.length > 0) {
+            onAddTrans(listSelected)
+        } else {
+            toast.warning('Mời bạn chọn giao dịch', {
+                theme: 'colored',
+            })
+        }
     }
 
     return (

src/app/views/Reconciliation/Sheet/Dialog/Table.js

@@ -222,24 +222,6 @@ function TableList(props) {
                     </TableBody>
                 </Table>
             </TableContainer>
-            <TablePagination
-                component="div"
-                page={pageIndex}
-                count={totalRecords}
-                rowsPerPage={10}
-                rowsPerPageOptions={[]}
-                onChangePage={handleChangePage}
-                onChangeRowsPerPage={handleChangeRowsPerPage}
-            />
-            <DialogTransition
-                data={selected}
-                open={open}
-                handleClose={handleClose}
-                onAgree={() => {
-                    removeItem(selected.id)
-                    handleClose()
-                }}
-            />
         </Paper>
     )
 }

src/app/views/Reconciliation/Sheet/Index.js

 import React, { useState, useEffect } from 'react'
 import LogAuth from './View'
-import { listSheetReconciliation } from 'app/apis/Functions/reconciliation'
+import {
+    listSheetReconciliation,
+    updateSheetReconciliation,
+} from 'app/apis/Functions/reconciliation'
 import { useHistory } from 'react-router-dom'
 import { toPriceVnd, convertDate } from 'app/config/Function'
 import { connect } from 'react-redux'
@@ -97,6 +100,29 @@ const ToolNotificate = (props) => {
             setListProvide(newList)
         }
     }
+    const removeItem = async (id) => {
+        props.showLoading()
+        const res = await updateSheetReconciliation({
+            id: id,
+            status: 3,
+        })
+        getData(false)
+        props.hideLoading()
+        if (res.data.code == 200) {
+            if (res.data.code == 200) {
+                toast.success(
+                    'Cập nhật trạng thái phiếu đối soát thành công!',
+                    {
+                        theme: 'colored',
+                    }
+                )
+            }
+        } else {
+            toast.error(t(res.data.error), {
+                theme: 'colored',
+            })
+        }
+    }
 
     return (
         <LogAuth
@@ -114,6 +140,7 @@ const ToolNotificate = (props) => {
             setProvide={setProvide}
             status={status}
             setStatus={setStatus}
+            removeItem={removeItem}
         />
     )
 }

src/app/views/Reconciliation/Sheet/ListTrans/Index.js

 import React, { useState, useEffect } from 'react'
 import LogAuth from './View'
-import { listTransReconciliation } from 'app/apis/Functions/reconciliation'
+import {
+    listTransReconciliation,
+    deleteTranInReconciliation,
+    addTransInReconciliation,
+} from 'app/apis/Functions/reconciliation'
 import { useHistory } from 'react-router-dom'
 import { toPriceVnd, convertDate } from 'app/config/Function'
 import { connect } from 'react-redux'
@@ -28,6 +32,7 @@ const ToolNotificate = (props) => {
     const [listMerchant, setListMerchant] = useState([])
     const [store, setStore] = useState()
     const [listStore, setListStore] = useState([])
+    const [total, setTotal] = useState(0)
 
     useEffect(() => {
         getDataMerchant()
@@ -38,11 +43,8 @@ const ToolNotificate = (props) => {
         setEndDate(end)
     }
 
-    console.log('props?.idReconciliation', props?.idReconciliation)
-
     const getData = async (init) => {
         if (props?.idReconciliation) {
-            props.showLoading()
             let res
             if (init) {
                 setPageIndex(0)
@@ -57,6 +59,7 @@ const ToolNotificate = (props) => {
                     type_payment: null,
                     idReconciliation: props?.idReconciliation,
                     is_reconciliation: true,
+                    text: searchDebount,
                 })
             } else {
                 res = await listTransReconciliation({
@@ -70,10 +73,10 @@ const ToolNotificate = (props) => {
                     type_payment: null,
                     idReconciliation: props?.idReconciliation,
                     is_reconciliation: true,
+                    text: searchDebount,
                 })
             }
 
-            props.hideLoading()
             if (res.data.code == 200 && res.data.data) {
                 console.log(' res.data.data', res.data.data)
                 const newList = res.data.data?.data?.map((e, i) => {
@@ -81,6 +84,7 @@ const ToolNotificate = (props) => {
                 })
                 setData(newList)
                 setTotalRecord(res.data.data.total_elements)
+                setTotal(res.data.data.total_commision)
             } else if (res.data.code == 401) {
                 setTimeout(() => {
                     history.push('/')
@@ -139,6 +143,42 @@ const ToolNotificate = (props) => {
         }
     }
 
+    const removeItem = async (id) => {
+        props.showLoading()
+        const res = await deleteTranInReconciliation(id)
+        props.hideLoading()
+        if (res.data.code == 200) {
+            getData(true)
+            toast.success('Xoá giao dịch trong phiếu đối soát thành công!', {
+                theme: 'colored',
+            })
+        } else {
+            toast.error('Xoá bản ghi thất bại!', {
+                theme: 'colored',
+            })
+        }
+    }
+    const onAddTrans = async (listTrans) => {
+        if (listTrans.length > 0) {
+            props.showLoading()
+            const res = await addTransInReconciliation({
+                id: props?.idReconciliation,
+                idTrans: listTrans,
+            })
+            props.hideLoading()
+            if (res.data.code == 200) {
+                getData(true)
+                toast.success('Thêm giao dịch vào phiếu đối soát thành công!', {
+                    theme: 'colored',
+                })
+            } else {
+                toast.error('Thêm giao dịch vào phiếu đối soát thất bại!', {
+                    theme: 'colored',
+                })
+            }
+        }
+    }
+
     return (
         <LogAuth
             data={data}
@@ -161,6 +201,9 @@ const ToolNotificate = (props) => {
             listStore={listStore}
             isDetail={props.isDetail}
             idPaymentPartner={props?.idPaymentPartner}
+            removeItem={removeItem}
+            onAddTrans={onAddTrans}
+            total={total}
         />
     )
 }

src/app/views/Reconciliation/Sheet/ListTrans/View.js

@@ -19,6 +19,7 @@ import { Link } from 'react-router-dom'
 import { Autocomplete, createFilterOptions } from '@material-ui/lab'
 import DateRange from 'app/components/Input/DateHome'
 import DialogTrans from '../Dialog/Dialog'
+import { toPriceVnd } from 'app/config/Function'
 
 function CustomerView(props) {
     const [age, setAge] = React.useState('')
@@ -46,6 +47,9 @@ function CustomerView(props) {
         listStore,
         isDetail,
         idPaymentPartner,
+        removeItem,
+        onAddTrans,
+        total,
     } = props
 
     const handleChange = (event) => {
@@ -79,7 +83,10 @@ function CustomerView(props) {
                             fullWidth
                             name="money"
                             variant="outlined"
-                            onChange={(event) => {}}
+                            onChange={(e) => {
+                                const text = e.target.value
+                                setTxtSearch(text)
+                            }}
                         />
                         {/* 
                     <Button
@@ -94,7 +101,10 @@ function CustomerView(props) {
                         Chọn giao dịch
                     </Button> */}
 
-                        <DialogTrans idPaymentPartner={idPaymentPartner} />
+                        <DialogTrans
+                            idPaymentPartner={idPaymentPartner}
+                            onAddTrans={onAddTrans}
+                        />
                     </Grid>
                 ) : null}
 
@@ -118,7 +128,8 @@ function CustomerView(props) {
                             color: '#027A48',
                         }}
                     >
-                        Số giao dịch: 20; Số hoa hồng: 5.300.000 VNĐ
+                        Số giao dịch: {toPriceVnd(totalRecords)}; Số hoa hồng:{' '}
+                        {toPriceVnd(total)} VNĐ
                     </Typography>
                 </Grid>
             </Grid>
@@ -132,6 +143,7 @@ function CustomerView(props) {
                 setPageIndex={setPageIndex}
                 totalRecords={totalRecords}
                 isDetail={isDetail}
+                removeItem={removeItem}
             />
         </Fragment>
     )

src/app/views/Reconciliation/Sheet/Table.js

@@ -23,6 +23,8 @@ import { toPriceVnd } from 'app/config/Function'
 import { checkRole } from 'app/config/Function'
 import useAuth from 'app/hooks/useAuth'
 import { useHistory } from 'react-router-dom'
+import DialogTransition from 'app/components/dialog/DialogTransition'
+
 const columns = [
     {
         id: 'index',
@@ -85,6 +87,14 @@ function TableList(props) {
         totalRecords,
     } = props
     let history = useHistory()
+    const [open, setOpen] = React.useState(false)
+    const [selected, setSelected] = useState({
+        name: '',
+        id: '',
+        title: '',
+        content: '',
+    })
+
     const handleChangePage = (event, newPage) => {
         setPageIndex(newPage)
     }
@@ -102,6 +112,9 @@ function TableList(props) {
         if (status == 2) return '#F1AA1F'
         return '#344054'
     }
+    const handleClose = () => {
+        setOpen(false)
+    }
 
     const { user } = useAuth()
     return (
@@ -124,7 +137,7 @@ function TableList(props) {
                             ))}
                             <TableCell
                                 style={{
-                                    width: 110,
+                                    width: 100,
                                     backgroundColor: colors.headerTable,
                                 }}
                             >
@@ -134,7 +147,7 @@ function TableList(props) {
                                 style={{
                                     textAlign: 'center',
                                     backgroundColor: colors.headerTable,
-                                    width: 60,
+                                    width: 160,
                                 }}
                             >
                                 Hành động
@@ -172,11 +185,7 @@ function TableList(props) {
                                             </TableCell>
                                         )
                                     })}
-                                    <TableCell
-                                        style={{
-                                            textAlign: 'center',
-                                        }}
-                                    >
+                                    <TableCell align={'center'}>
                                         <Typography
                                             style={{
                                                 padding: 5,
@@ -187,6 +196,7 @@ function TableList(props) {
                                                     row?.status
                                                 ),
                                                 borderRadius: 10,
+                                                textAlign: 'center',
                                             }}
                                         >
                                             {row?.status_name}
@@ -196,7 +206,7 @@ function TableList(props) {
                                         {checkRole(
                                             user,
                                             '/reconciliation/sheet'
-                                        ) ? (
+                                        ) && row.status != 3 ? (
                                             <Tooltip title="Cập nhật">
                                                 <IconButton
                                                     onClick={() => {
@@ -215,6 +225,55 @@ function TableList(props) {
                                                 </IconButton>
                                             </Tooltip>
                                         ) : null}
+                                        {checkRole(
+                                            user,
+                                            '/reconciliation/sheet'
+                                        ) ? (
+                                            <Tooltip title="Chi tiết">
+                                                <IconButton
+                                                    onClick={() => {
+                                                        history.push({
+                                                            pathname:
+                                                                '/reconciliation/sheet/detail',
+                                                            state: { ...row },
+                                                        })
+                                                    }}
+                                                    className={classes.button}
+                                                    aria-label="edit"
+                                                >
+                                                    <Icon color="primary">
+                                                        visibility
+                                                    </Icon>
+                                                </IconButton>
+                                            </Tooltip>
+                                        ) : null}
+                                        {checkRole(
+                                            user,
+                                            '/reconciliation/sheet'
+                                        ) && row.status != 3 ? (
+                                            <Tooltip title="Phê duyệt">
+                                                <IconButton
+                                                    onClick={() => {
+                                                        setSelected({
+                                                            ...row,
+                                                            title: 'Phê duyệt phiếu đối soát',
+                                                            content: `Bạn có muốn Phê duyệt phiếu đối soát ${row.code} trong phiếu đối soát hay không?`,
+                                                        })
+                                                        setOpen(true)
+                                                    }}
+                                                    className={classes.button}
+                                                    aria-label="Delete"
+                                                >
+                                                    <Icon
+                                                        style={{
+                                                            color: '#027A48',
+                                                        }}
+                                                    >
+                                                        check_circle
+                                                    </Icon>
+                                                </IconButton>
+                                            </Tooltip>
+                                        ) : null}
                                     </TableCell>
                                 </TableRow>
                             )
@@ -231,6 +290,15 @@ function TableList(props) {
                 onChangePage={handleChangePage}
                 onChangeRowsPerPage={handleChangeRowsPerPage}
             />
+            <DialogTransition
+                data={selected}
+                open={open}
+                handleClose={handleClose}
+                onAgree={() => {
+                    removeItem(selected.id)
+                    handleClose()
+                }}
+            />
         </Paper>
     )
 }

src/app/views/Reconciliation/Sheet/Update.js

@@ -74,7 +74,7 @@ const SimpleForm = (props) => {
         props.showLoading()
         const res = await updateSheetReconciliation({
             ...newValue,
-            type: '3',
+
             status: 1,
         })
 
@@ -82,7 +82,7 @@ const SimpleForm = (props) => {
         if (res.data.code == 200) {
             history.push('/reconciliation/sheet')
             if (res.data.code == 200) {
-                toast.success('Tạo nhà cung cấp thiết bị thành công!', {
+                toast.success('Cập nhật phiếu đối soát thành công!', {
                     theme: 'colored',
                 })
             }

src/app/views/Reconciliation/Sheet/View.js

@@ -39,6 +39,7 @@ function CustomerView(props) {
         provide,
         setProvide,
         listProvide,
+        removeItem,
     } = props
 
     const handleChange = (event) => {
@@ -165,6 +166,7 @@ function CustomerView(props) {
                     pageIndex={pageIndex}
                     setPageIndex={setPageIndex}
                     totalRecords={totalRecords}
+                    removeItem={removeItem}
                 />
             </div>
         </Fragment>