update code

src/app/components/dialog/AcceptStore.jsx

+import React, { useState, useEffect, use } from 'react'
+import {
+    Button,
+    FormControl,
+    Grid,
+    InputLabel,
+    Select,
+    TextField,
+    Typography,
+    DialogActions,
+    Dialog,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    IconButton,
+    Icon,
+    Tooltip,
+    FormControlLabel,
+    Checkbox,
+} from '@material-ui/core'
+import { toast } from 'react-toastify'
+import { useTranslation } from 'react-i18next'
+import { hideLoading, showLoading } from 'app/redux/actions/loadingAction'
+import { connect } from 'react-redux'
+import { KeyboardDatePicker } from '@material-ui/pickers'
+
+function FormDialog(props) {
+    const { t } = useTranslation()
+
+    const { open, handleClose, data, onAgree } = props
+
+    const [forever, setForever] = useState(true)
+
+    const [name, setName] = useState()
+    const [date, setDate] = useState(addOneYear())
+
+    const handleDateChangeLast = (date) => {
+        setDate(date)
+    }
+
+    function addOneYear() {
+        // Create a new Date object from the provided date
+        let newDate = new Date()
+
+        // Add one year to the new date
+        newDate.setFullYear(newDate.getFullYear() + 1)
+
+        return newDate
+    }
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <DialogTitle id="form-dialog-title">
+                Bạn có chắc chắc muốn duyệt tạo cửa hàng này?
+            </DialogTitle>
+            <DialogContent>
+                <FormControlLabel
+                    className="min-w-88"
+                    control={
+                        <Checkbox
+                            size="small"
+                            color="primary"
+                            onChange={(event) => {
+                                setForever(event.target.checked)
+                            }}
+                            value={forever}
+                            checked={forever}
+                        />
+                    }
+                    label="Vô thời hạn"
+                />
+
+                {!forever && (
+                    <KeyboardDatePicker
+                        style={{
+                            marginTop: 15,
+                        }}
+                        placeholder="dd/MM/yyyy"
+                        label={'Thời gian hoạt động của cây xăng'}
+                        disableToolbar
+                        inputVariant={'outlined'}
+                        fullWidth
+                        minDate={new Date()}
+                        clearable={true}
+                        format="dd/MM/yyyy"
+                        value={date}
+                        onChange={handleDateChangeLast}
+                        KeyboardButtonProps={{
+                            'aria-label': 'change date',
+                        }}
+                    />
+                )}
+            </DialogContent>
+            <DialogActions>
+                <Button color="secondary" onClick={handleClose}>
+                    Thoát
+                </Button>
+                <Button
+                    onClick={() => {
+                        onAgree(forever, date)
+                    }}
+                    color="primary"
+                >
+                    Đồng ý
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
+
+const mapStateToProps = (state) => {
+    return {}
+}
+export default connect(mapStateToProps, { showLoading, hideLoading })(
+    FormDialog
+)

src/app/components/dialog/RejectStore.jsx

+import React, { useState, useEffect, use } from 'react'
+import {
+    Button,
+    FormControl,
+    Grid,
+    InputLabel,
+    Select,
+    TextField,
+    Typography,
+    DialogActions,
+    Dialog,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    IconButton,
+    Icon,
+    Tooltip,
+} from '@material-ui/core'
+import { toast } from 'react-toastify'
+import { useTranslation } from 'react-i18next'
+import { hideLoading, showLoading } from 'app/redux/actions/loadingAction'
+import { connect } from 'react-redux'
+
+function FormDialog(props) {
+    const { t } = useTranslation()
+
+    const { open, handleClose, data, onAgree } = props
+
+    const [name, setName] = useState()
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <DialogTitle id="form-dialog-title">
+                Không duyệt? Nhập lý do!
+            </DialogTitle>
+            <DialogContent>
+                <TextField
+                    style={{ marginBttom: 20, minWidth: 400 }}
+                    variant="outlined"
+                    autoFocus
+                    margin="dense"
+                    label="Nhập lý do không duyệt"
+                    fullWidth
+                    value={name || ''}
+                    onChange={(event) => setName(event.target.value)}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button color="secondary" onClick={handleClose}>
+                    Thoát
+                </Button>
+                <Button
+                    onClick={() => {
+                        onAgree(name)
+                        setName('')
+                    }}
+                    color="primary"
+                >
+                    Đồng ý
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
+
+const mapStateToProps = (state) => {
+    return {}
+}
+export default connect(mapStateToProps, { showLoading, hideLoading })(
+    FormDialog
+)

src/app/views/GasStation/Index.js

@@ -81,7 +81,12 @@ const ToolNotificate = (props) => {
         if (res.data.code == 200 && res.data.data) {
             console.log(res.data)
             const newList = res.data.data.data.map((e, i) => {
-                return { ...e, index: i + 1 + pageIndex * pageSize }
+                return {
+                    ...e,
+                    index: i + 1 + pageIndex * pageSize,
+                    date_expried: e?.expired ? e?.expired.substring(0, 10) : '',
+                    field: `${e?.total_fueld} trụ \n${e?.total_gas} vòi`,
+                }
             })
 
             setData(newList)

src/app/views/GasStation/Table.js

@@ -43,50 +43,58 @@ const columns = [
     //     align: 'center',
     //     minWidth: 50,
     // },
+    {
+        id: 'merchant_name',
+        label: 'Thuộc pháp nhân',
+        align: 'left',
+        minWidth: 160,
+    },
 
     {
         id: 'store_name',
         label: 'Tên cây xăng',
         align: 'left',
-        minWidth: 'auto',
+        minWidth: 160,
     },
     {
-        id: 'address',
-        label: 'Địa chỉ',
+        id: 'field',
+        label: 'Trụ/vòi',
         align: 'left',
-        minWidth: 'auto',
+        minWidth: 80,
     },
+
     {
-        id: 'merchant_name',
-        label: 'Thuộc pháp nhân',
+        id: 'address',
+        label: 'Địa chỉ',
         align: 'left',
-        minWidth: 'auto',
+        minWidth: 160,
     },
+
     {
         id: 'representative',
         label: 'Người đại diện',
         align: 'left',
-        minWidth: 'auto',
+        minWidth: 140,
     },
 
     {
-        id: 'email',
-        label: 'Email',
+        id: 'provice_name',
+        label: 'Tỉnh/Thành phố',
         align: 'left',
-        minWidth: 'auto',
+        minWidth: 120,
     },
 
     {
-        id: 'phone',
-        label: 'Số điện thoại',
+        id: 'date_expried',
+        label: 'Ngày hết hạn',
         align: 'left',
-        minWidth: 'auto',
+        minWidth: 100,
     },
     {
         id: 'status_text',
         label: 'Trạng thái',
         align: 'left',
-        minWidth: 'auto',
+        minWidth: 120,
     },
 ]
 

src/app/views/GasStation/detail.js

@@ -37,6 +37,8 @@ import TableRow from '@material-ui/core/TableRow'
 import Paper from '@material-ui/core/Paper'
 
 import { useTranslation } from 'react-i18next'
+import AcceptStore from 'app/components/dialog/AcceptStore'
+import RejectStore from 'app/components/dialog/RejectStore'
 
 const SimpleForm = (props) => {
     const [state, setState] = useState({})
@@ -47,6 +49,8 @@ const SimpleForm = (props) => {
     const [fountainSelected, setFountainSelected] = useState()
     const [openUpdate, setOpenUpdate] = useState()
     const [listProvince, setListProvince] = useState([])
+    const [openAccept, setOpenAccpet] = useState(false)
+    const [openReject, setOpenReject] = useState(false)
     const location = useLocation()
     const { t } = useTranslation()
     useEffect(() => {
@@ -539,7 +543,7 @@ const SimpleForm = (props) => {
                                     color="secondary"
                                     variant="contained"
                                     onClick={() => {
-                                        changeSatusStore(4)
+                                        setOpenReject(true)
                                     }}
                                 >
                                     <span
@@ -558,12 +562,32 @@ const SimpleForm = (props) => {
                                     color="primary"
                                     variant="contained"
                                     onClick={() => {
-                                        changeSatusStore(1)
+                                        setOpenAccpet(true)
                                     }}
                                 >
                                     <span className="capitalize">Duyệt</span>
                                 </Button>
                             )}
+
+                            <AcceptStore
+                                open={openAccept}
+                                handleClose={() => {
+                                    setOpenAccpet(false)
+                                }}
+                                onAgree={() => {
+                                    changeSatusStore(1)
+                                }}
+                            />
+
+                            <RejectStore
+                                open={openReject}
+                                handleClose={() => {
+                                    setOpenReject(false)
+                                }}
+                                onAgree={() => {
+                                    changeSatusStore(4)
+                                }}
+                            />
                         </Grid>
                     </ValidatorForm>
                 </SimpleCard>