update code

src/app/components/dialog/DialogReason.jsx

+import React from 'react'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import Slide from '@material-ui/core/Slide'
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+    return <Slide direction="up" ref={ref} {...props} />
+})
+
+export default function AlertDialogSlide(props) {
+    const { open, handleClose, data, onAgree } = props
+
+    return (
+        <Dialog
+            open={open}
+            maxWidth={'sm'}
+            fullWidth={true}
+            TransitionComponent={Transition}
+            keepMounted
+            onClose={handleClose}
+            aria-labelledby="alert-dialog-slide-title"
+            aria-describedby="alert-dialog-slide-description"
+        >
+            <DialogTitle id="alert-dialog-slide-title">
+                Lý do từ chối
+            </DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-slide-description">
+                    {data?.reason}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose} color="primary">
+                    Quay lại
+                </Button>
+                <Button
+                    onClick={() => {
+                        handleClose()
+                    }}
+                    color="primary"
+                >
+                    Đồng ý
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+}

src/app/views/GasStation/Table.js

@@ -29,6 +29,7 @@ import DialogTransition from 'app/components/dialog/DialogTransition'
 import { useHistory } from 'react-router-dom'
 import useAuth from 'app/hooks/useAuth'
 import { checkRole } from 'app/config/Function'
+import DialogReason from 'app/components/dialog/DialogReason'
 
 const columns = [
     {
@@ -120,6 +121,8 @@ function TableList(props) {
         content: '',
     })
     const [open, setOpen] = React.useState(false)
+    const [openReason, setOpenReason] = useState(false)
+
     const { user } = useAuth()
     const handleChangePage = (event, newPage) => {
         setPageIndex(newPage)
@@ -340,6 +343,28 @@ function TableList(props) {
                                                 </Icon>
                                             </IconButton>
                                         </Tooltip>
+                                        {row.status == 4 && (
+                                            <Tooltip title="Lý do từ chối ">
+                                                <IconButton
+                                                    onClick={() => {
+                                                        setSelected({
+                                                            ...row,
+                                                        })
+                                                        setOpenReason(true)
+                                                    }}
+                                                    className={classes.button}
+                                                    aria-label="edit"
+                                                >
+                                                    <Icon
+                                                        style={{
+                                                            color: '#FF9500',
+                                                        }}
+                                                    >
+                                                        info
+                                                    </Icon>
+                                                </IconButton>
+                                            </Tooltip>
+                                        )}
                                     </TableCell>
                                 </TableRow>
                             )
@@ -357,6 +382,17 @@ function TableList(props) {
                 }}
             />
 
+            <DialogReason
+                data={selected}
+                open={openReason}
+                handleClose={() => {
+                    setOpenReason(false)
+                }}
+                onAgree={() => {
+                    handleClose()
+                }}
+            />
+
             <TablePagination
                 component="div"
                 page={pageIndex}

src/app/views/GasStation/detail.js

@@ -35,7 +35,7 @@ import TableContainer from '@material-ui/core/TableContainer'
 import TableHead from '@material-ui/core/TableHead'
 import TableRow from '@material-ui/core/TableRow'
 import Paper from '@material-ui/core/Paper'
-
+import { convertDate } from 'app/config/Function'
 import { useTranslation } from 'react-i18next'
 import AcceptStore from 'app/components/dialog/AcceptStore'
 import RejectStore from 'app/components/dialog/RejectStore'
@@ -169,7 +169,7 @@ const SimpleForm = (props) => {
                 toast.success(
                     `${
                         status == 4 ? 'Từ chối phê duyệt' : 'Phê duyệt'
-                    } trụ xăng thành công`,
+                    } cây xăng thành công`,
                     {
                         theme: 'colored',
                     }
@@ -187,6 +187,48 @@ const SimpleForm = (props) => {
         }
     }
 
+    const acceptStoreSub = async (forever, date) => {
+        setOpenAccpet(false)
+        props.showLoading()
+        const res = await changeStatusStore({
+            id: location.state,
+            status_id: 1,
+            expired: forever ? null : convertDate(date),
+        })
+        props.hideLoading()
+        if (res.data.code == 200) {
+            toast.success(`${'Phê duyệt'} cây xăng thành công`, {
+                theme: 'colored',
+            })
+            history.push('/gas-station')
+        } else {
+            toast.error(t(res.data.error), {
+                theme: 'colored',
+            })
+        }
+    }
+
+    const rejectStoreSub = async (reason) => {
+        setOpenReject(false)
+        props.showLoading()
+        const res = await changeStatusStore({
+            id: location.state,
+            status_id: 4,
+            reason: reason,
+        })
+        props.hideLoading()
+        if (res.data.code == 200) {
+            toast.success(`${'Từ chối'} cây xăng thành công`, {
+                theme: 'colored',
+            })
+            history.push('/gas-station')
+        } else {
+            toast.error(t(res.data.error), {
+                theme: 'colored',
+            })
+        }
+    }
+
     const {
         store_name,
         province_id,
@@ -574,8 +616,8 @@ const SimpleForm = (props) => {
                                 handleClose={() => {
                                     setOpenAccpet(false)
                                 }}
-                                onAgree={() => {
-                                    changeSatusStore(1)
+                                onAgree={(forever, date) => {
+                                    acceptStoreSub(forever, date)
                                 }}
                             />
 
@@ -584,8 +626,8 @@ const SimpleForm = (props) => {
                                 handleClose={() => {
                                     setOpenReject(false)
                                 }}
-                                onAgree={() => {
-                                    changeSatusStore(4)
+                                onAgree={(reason) => {
+                                    rejectStoreSub(reason)
                                 }}
                             />
                         </Grid>