Skip to content

C
CmsPetrolPay
Commit 7d28f6b0 by tdgiang
Options

update build

parent 2c5d250a
Showing with 3977 additions and 3 deletions
src/app/RootRoutes.jsx
...@@ -22,6 +22,7 @@ import Package from './views/package/routers' ...@@ -22,6 +22,7 @@ import Package from './views/package/routers'
import NccRouter from './views/Ncc/router' import NccRouter from './views/Ncc/router'
import LandingpageRouter from './views/landingpage/router' import LandingpageRouter from './views/landingpage/router'
import PaymentSupplier from './views/PaymentSupplier/routes' import PaymentSupplier from './views/PaymentSupplier/routes'
import ReconciliationRouters from './views/Reconciliation/router'
const redirectRoute = [ const redirectRoute = [
{ {
...@@ -38,6 +39,7 @@ const errorRoute = [ ...@@ -38,6 +39,7 @@ const errorRoute = [
] ]
const routes = [ const routes = [
...ReconciliationRouters,
...PaymentSupplier, ...PaymentSupplier,
...LandingpageRouter, ...LandingpageRouter,
...NccRouter, ...NccRouter,
......
src/app/apis/Functions/reconciliation.js 0 → 100644
/* eslint-disable handle-callback-err */
import { PostData, GetURL } from '../helpers'
import url from '../url'
export const listTransReconciliation = async (body) =>
PostData(url.listTransReconciliation, body)
.then((res) => res)
.catch((err) => null)
src/app/apis/url.js
...@@ -118,6 +118,9 @@ export default { ...@@ -118,6 +118,9 @@ export default {
urlDetailSupplier: `${root}/provider`, urlDetailSupplier: `${root}/provider`,
changeStatusSupplier: `${root}/provider/changeStatus`, changeStatusSupplier: `${root}/provider/changeStatus`,
//reconciliation
listTransReconciliation: `${root}/reconciliation/list/trans`,
//Log //Log
logAuth: `${root}/logging/listLogin`, logAuth: `${root}/logging/listLogin`,
logApi: `${root}/logging/listCallApi`, logApi: `${root}/logging/listCallApi`,
......
src/app/components/Chart/LineChart.jsx 0 → 100644
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/PieChart.jsx 0 → 100644
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
...@@ -243,6 +243,35 @@ export const navigationsAdmin = [ ...@@ -243,6 +243,35 @@ export const navigationsAdmin = [
}, },
{ {
name: 'Đối soát',
icon: 'wb_iridescent',
hide: false,
children: [
{
name: 'Danh sách giao dịch',
iconText: 'IV',
path: '/reconciliation/transations',
hide: false,
id: 'INVOICE',
},
{
name: 'Phiếu đối soát',
iconText: 'IV',
path: '/reconciliation/sheet',
hide: false,
id: 'INVOICE_SUPPLIER',
},
{
name: 'Cấu hình đối soát',
iconText: 'IV',
path: '/reconciliation/setting',
hide: false,
id: 'INVOICE_SUPPLIER',
},
],
},
{
name: 'Nhà cung cấp', name: 'Nhà cung cấp',
icon: 'wb_iridescent', icon: 'wb_iridescent',
hide: false, hide: false,
......
src/app/views/PaymentSupplier/Create.js
...@@ -174,7 +174,7 @@ const SimpleForm = (props) => { ...@@ -174,7 +174,7 @@ const SimpleForm = (props) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid container justify={'flex-end'}> <Grid container justify={'flex-end'}>
<Link to="/invoice-supplier"> <Link to="/payment-supplier">
<Button <Button
style={{ style={{
marginRight: 20, marginRight: 20,
......
src/app/views/PaymentSupplier/ListTrans/Index.js 0 → 100644
import React, { useState, useEffect } from 'react'
import LogAuth from './View'
import { listTransaction } from 'app/apis/Functions/transaction'
import { useHistory } from 'react-router-dom'
import { toPriceVnd, convertDate } from 'app/config/Function'
import { connect } from 'react-redux'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import useDebounce from 'app/hooks/useDebounce'
import { useTranslation } from 'react-i18next'
import { dropdownMerchant, dropdownStore } from 'app/apis/Functions/dropdown'
const ToolNotificate = (props) => {
const [txtSearch, setTxtSearch] = useState('')
const [applications, setApplications] = useState('')
const [pageIndex, setPageIndex] = useState(0)
const [pageSize] = useState(10)
const [totalRecords, setTotalRecord] = useState(0)
const history = useHistory()
const searchDebount = useDebounce(txtSearch, 1000)
const [startDate, setStartDate] = useState()
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([])
useEffect(() => {
getDataMerchant()
}, [])
const changeDateRange = (start, end) => {
setStartDate(start)
setEndDate(end)
}
const getData = async (init) => {
props.showLoading()
let res
if (init) {
setPageIndex(0)
res = await listTransaction({
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',
})
} else {
res = await listTransaction({
order_code: searchDebount,
applications,
page_no: pageIndex + 1,
page_size: pageSize,
from_date: startDate ? convertDate(startDate) : null,
to_date: endDate ? convertDate(endDate) : null,
type_code: type,
merchant_id: merchant,
store_id: store,
// gasoline_id: '57dd1a73-d847-4d73-9791-08dc0841e7a9',
})
}
props.hideLoading()
if (res.data.code == 200 && res.data.data) {
const newList = res.data.data.data.map((e, i) => {
return { ...e, index: i + 1 + pageIndex * pageSize }
})
setData(newList)
setTotalRecord(res.data.data.total_elements)
} else if (res.data.code == 401) {
setTimeout(() => {
history.push('/')
}, 100)
} else {
toast.error(t(res.data.error), {
theme: 'colored',
})
}
}
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 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)
} else {
toast.error(t(res.data.error), {
theme: 'colored',
})
}
}
return (
<LogAuth
data={data}
setTxtSearch={setTxtSearch}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
totalRecords={totalRecords}
setApplications={setApplications}
applications={applications}
startDate={startDate}
changeDateRange={changeDateRange}
type={type}
setType={setType}
listType={listType}
merchant={merchant}
setMerchant={setMerchant}
listMerchant={listMerchant}
store={store}
setStore={setStore}
listStore={listStore}
/>
)
}
const mapStateToProps = (state) => {
return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
ToolNotificate
)
src/app/views/PaymentSupplier/ListTrans/Table.js 0 → 100644
import React, { useState } from 'react'
import {
Paper,
Table,
TableBody,
TableCell,
TableHead,
TableContainer,
TablePagination,
TableRow,
IconButton,
MenuItem,
Tooltip,
Icon,
} from '@material-ui/core'
import EditIcon from '@material-ui/icons/Edit'
import DeleteIcon from '@material-ui/icons/Delete'
import colors from 'app/assets/Color'
import useStyles from 'app/styles/Table'
import { Breadcrumb, SimpleCard } from 'app/components'
const columns = [
{
id: 'index',
label: 'STT',
align: 'center',
minWidth: 80,
},
{
id: 'store_name',
label: 'Cây xăng',
align: 'left',
minWidth: 160,
},
// {
// 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',
align: 'left',
minWidth: 110,
},
// {
// id: 'IP',
// label: 'Loại nhiên liệu',
// align: 'left',
// minWidth: 140,
// },
{
id: 'product_name',
label: 'Sản phẩm',
align: 'left',
minWidth: 120,
},
{
id: 'unit_price',
label: 'Đơn giá',
align: 'left',
minWidth: 80,
},
{
id: 'quantity',
label: 'Lượng nhiên liệu',
align: 'left',
minWidth: 80,
},
{
id: 'price',
label: 'Thành tiền',
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,
},
]
function TableList(props) {
const classes = useStyles()
const {
data,
handeChangeActive,
removeItem,
changeActive,
setChangeActive,
setPageIndex,
setPageSize,
pageIndex,
totalRecords,
} = props
const handleChangePage = (event, newPage) => {
setPageIndex(newPage)
}
const handleChangeRowsPerPage = (event) => {
setPageSize(event.target.value)
}
return (
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={'center'}
style={{
width: column.minWidth,
backgroundColor: colors.headerTable,
}}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody className={classes.columnTable}>
{data.map((row) => {
return (
<TableRow
hover
role="checkbox"
tabIndex={-1}
key={row.id}
>
{columns.map((column) => {
const avatar = row[column.id]
return (
<TableCell
key={column.id}
align={column.align}
>
{column.format ? (
<img
src={column.format(
avatar
)}
className={
classes.image
}
/>
) : (
avatar
)}
</TableCell>
)
})}
</TableRow>
)
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
component="div"
page={pageIndex}
count={totalRecords}
rowsPerPage={10}
rowsPerPageOptions={[]}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
)
}
export default TableList
src/app/views/PaymentSupplier/ListTrans/View.js 0 → 100644
import React, { Fragment, useState, useEffect } from 'react'
import {
TextField,
Icon,
Button,
StepLabel,
Step,
Stepper,
Grid,
FormControl,
InputLabel,
Select,
MenuItem,
} from '@material-ui/core'
import Table from './Table'
import { Breadcrumb } from 'app/components'
import { Link } from 'react-router-dom'
import { Autocomplete, createFilterOptions } from '@material-ui/lab'
import DateRange from 'app/components/Input/DateHome'
function CustomerView(props) {
const [age, setAge] = React.useState('')
const {
data,
setTxtSearch,
changeActive,
setChangeActive,
handeChangeActive,
setPageIndex,
pageIndex,
totalRecords,
setApplications,
applications,
startDate,
changeDateRange,
type,
setType,
listType,
listMerchant,
setMerchant,
merchant,
store,
setStore,
listStore,
} = props
const handleChange = (event) => {
setAge(event.target.value)
}
return (
<Fragment>
<Grid
style={{
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>
<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>
</Grid>
<Table
data={data}
changeActive={changeActive}
setChangeActive={setChangeActive}
handeChangeActive={handeChangeActive}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
totalRecords={totalRecords}
/>
</Fragment>
)
}
export default CustomerView
src/app/views/PaymentSupplier/PieChartReport.js 0 → 100644
import React, { useEffect, useState } from 'react'
import {
Button,
FormControl,
Grid,
InputLabel,
Select,
TextField,
Icon,
Typography,
Card,
MenuItem,
} from '@material-ui/core'
import { Breadcrumb, SimpleCard } from 'app/components'
import 'date-fns'
import CustomPieChart from 'app/components/Chart/PieChart'
import { toPriceVnd, convertDate } from 'app/config/Function'
import DateRange from 'app/components/Input/DateHome'
import { KeyboardDatePicker } from '@material-ui/pickers'
//import { reportStorePieChart } from 'app/apis/Functions/dashboard'
const ReportQuantity = ({ user }) => {
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}
/>
{/* <Grid
style={{
marginTop: 20,
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
}}
lg={4}
md={4}
sm={4}
xs={4}
>
<div
style={{
alignItems: 'center',
justifyContent: 'center',
marginBottom: 20,
}}
>
<Typography
style={{
fontSize: 20,
marginBottom: 30,
textAlign: 'center',
lineHeight: 1,
}}
>
Cơ cấu doanh số theo sản phẩm
</Typography>
{state?.map((e, i) => (
<div
style={{
display: 'flex',
}}
>
<div
style={{
width: 14,
height: 14,
backgroundColor: color[i],
borderRadius: 10,
marginRight: 10,
marginTop: 2,
}}
/>
<Typography
style={{
fontSize: 12,
color: '#4B5563',
}}
>
{e?.name}
</Typography>
</div>
))}
</div>
</Grid> */}
</div>
)
}
export default ReportQuantity
src/app/views/PaymentSupplier/SheetCheck/Index.js 0 → 100644
import React, { useState, useEffect } from 'react'
import LogAuth from './View'
import { listTransaction } from 'app/apis/Functions/transaction'
import { useHistory } from 'react-router-dom'
import { toPriceVnd, convertDate } from 'app/config/Function'
import { connect } from 'react-redux'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import useDebounce from 'app/hooks/useDebounce'
import { useTranslation } from 'react-i18next'
import { dropdownMerchant, dropdownStore } from 'app/apis/Functions/dropdown'
const ToolNotificate = (props) => {
const [txtSearch, setTxtSearch] = useState('')
const [applications, setApplications] = useState('')
const [pageIndex, setPageIndex] = useState(0)
const [pageSize] = useState(10)
const [totalRecords, setTotalRecord] = useState(0)
const history = useHistory()
const searchDebount = useDebounce(txtSearch, 1000)
const [startDate, setStartDate] = useState()
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([])
useEffect(() => {
getDataMerchant()
}, [])
const changeDateRange = (start, end) => {
setStartDate(start)
setEndDate(end)
}
const getData = async (init) => {
props.showLoading()
let res
if (init) {
setPageIndex(0)
res = await listTransaction({
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',
})
} else {
res = await listTransaction({
order_code: searchDebount,
applications,
page_no: pageIndex + 1,
page_size: pageSize,
from_date: startDate ? convertDate(startDate) : null,
to_date: endDate ? convertDate(endDate) : null,
type_code: type,
merchant_id: merchant,
store_id: store,
// gasoline_id: '57dd1a73-d847-4d73-9791-08dc0841e7a9',
})
}
props.hideLoading()
if (res.data.code == 200 && res.data.data) {
const newList = res.data.data.data.map((e, i) => {
return { ...e, index: i + 1 + pageIndex * pageSize }
})
setData(newList)
setTotalRecord(res.data.data.total_elements)
} else if (res.data.code == 401) {
setTimeout(() => {
history.push('/')
}, 100)
} else {
toast.error(t(res.data.error), {
theme: 'colored',
})
}
}
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 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)
} else {
toast.error(t(res.data.error), {
theme: 'colored',
})
}
}
return (
<LogAuth
data={data}
setTxtSearch={setTxtSearch}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
totalRecords={totalRecords}
setApplications={setApplications}
applications={applications}
startDate={startDate}
changeDateRange={changeDateRange}
type={type}
setType={setType}
listType={listType}
merchant={merchant}
setMerchant={setMerchant}
listMerchant={listMerchant}
store={store}
setStore={setStore}
listStore={listStore}
/>
)
}
const mapStateToProps = (state) => {
return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
ToolNotificate
)
src/app/views/PaymentSupplier/SheetCheck/Table.js 0 → 100644
import React, { useState } from 'react'
import {
Paper,
Table,
TableBody,
TableCell,
TableHead,
TableContainer,
TablePagination,
TableRow,
IconButton,
MenuItem,
Tooltip,
Icon,
} from '@material-ui/core'
import EditIcon from '@material-ui/icons/Edit'
import DeleteIcon from '@material-ui/icons/Delete'
import colors from 'app/assets/Color'
import useStyles from 'app/styles/Table'
import { Breadcrumb, SimpleCard } from 'app/components'
const columns = [
{
id: 'index',
label: 'STT',
align: 'center',
minWidth: 80,
},
{
id: 'store_name',
label: 'Cây xăng',
align: 'left',
minWidth: 160,
},
// {
// 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',
align: 'left',
minWidth: 110,
},
// {
// id: 'IP',
// label: 'Loại nhiên liệu',
// align: 'left',
// minWidth: 140,
// },
{
id: 'product_name',
label: 'Sản phẩm',
align: 'left',
minWidth: 120,
},
{
id: 'unit_price',
label: 'Đơn giá',
align: 'left',
minWidth: 80,
},
{
id: 'quantity',
label: 'Lượng nhiên liệu',
align: 'left',
minWidth: 80,
},
{
id: 'price',
label: 'Thành tiền',
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,
},
]
function TableList(props) {
const classes = useStyles()
const {
data,
handeChangeActive,
removeItem,
changeActive,
setChangeActive,
setPageIndex,
setPageSize,
pageIndex,
totalRecords,
} = props
const handleChangePage = (event, newPage) => {
setPageIndex(newPage)
}
const handleChangeRowsPerPage = (event) => {
setPageSize(event.target.value)
}
return (
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={'center'}
style={{
width: column.minWidth,
backgroundColor: colors.headerTable,
}}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody className={classes.columnTable}>
{data.map((row) => {
return (
<TableRow
hover
role="checkbox"
tabIndex={-1}
key={row.id}
>
{columns.map((column) => {
const avatar = row[column.id]
return (
<TableCell
key={column.id}
align={column.align}
>
{column.format ? (
<img
src={column.format(
avatar
)}
className={
classes.image
}
/>
) : (
avatar
)}
</TableCell>
)
})}
</TableRow>
)
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
component="div"
page={pageIndex}
count={totalRecords}
rowsPerPage={10}
rowsPerPageOptions={[]}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
)
}
export default TableList
src/app/views/PaymentSupplier/SheetCheck/View.js 0 → 100644
import React, { Fragment, useState, useEffect } from 'react'
import {
TextField,
Icon,
Button,
StepLabel,
Step,
Stepper,
Grid,
FormControl,
InputLabel,
Select,
MenuItem,
} from '@material-ui/core'
import Table from './Table'
import { Breadcrumb } from 'app/components'
import { Link } from 'react-router-dom'
import { Autocomplete, createFilterOptions } from '@material-ui/lab'
import DateRange from 'app/components/Input/DateHome'
function CustomerView(props) {
const [age, setAge] = React.useState('')
const {
data,
setTxtSearch,
changeActive,
setChangeActive,
handeChangeActive,
setPageIndex,
pageIndex,
totalRecords,
setApplications,
applications,
startDate,
changeDateRange,
type,
setType,
listType,
listMerchant,
setMerchant,
merchant,
store,
setStore,
listStore,
} = props
const handleChange = (event) => {
setAge(event.target.value)
}
return (
<Fragment>
<div className="m-sm-30">
<div className="mb-sm-30">
<Breadcrumb
routeSegments={[
{
name: 'Danh sách giao dịch',
path: '/transations',
},
]}
/>
</div>
<Grid
style={{
padding: 10,
marginBottom: 20,
}}
//justify={'space-between'}
alignItems={'center'}
container
spacing={3}
>
<Grid 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>
<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>
</Grid>
<Table
data={data}
changeActive={changeActive}
setChangeActive={setChangeActive}
handeChangeActive={handeChangeActive}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
totalRecords={totalRecords}
/>
</div>
</Fragment>
)
}
export default CustomerView
src/app/views/PaymentSupplier/TabTrans/index.js 0 → 100644
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles'
import AppBar from '@material-ui/core/AppBar'
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab'
import Typography from '@material-ui/core/Typography'
import Box from '@material-ui/core/Box'
import { Breadcrumb, SimpleCard } from 'app/components'
import ListTrans from '../ListTrans/Index'
import SheetCheck from '../SheetCheck/Index'
function TabPanel(props) {
const { children, value, index, ...other } = props
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
)
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
}
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
}
}
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
}))
export default function SimpleTabs() {
const classes = useStyles()
const [value, setValue] = React.useState(0)
const [state, setState] = useState({})
const handleChange = (event, newValue) => {
setValue(newValue)
}
return (
<div className={classes.root}>
<AppBar position="static" color="default">
<Tabs
value={value}
onChange={handleChange}
indicatorColor="primary"
textColor="primary"
aria-label="simple tabs example"
>
<Tab label="Giao dịch thanh toán" {...a11yProps(0)} />
<Tab label="Phiếu đối soát" {...a11yProps(1)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<ListTrans />
</TabPanel>
<TabPanel value={value} index={1}>
<SheetCheck />
</TabPanel>
</div>
)
}
src/app/views/PaymentSupplier/Table.js
...@@ -140,7 +140,7 @@ function TableList(props) { ...@@ -140,7 +140,7 @@ function TableList(props) {
style={{ style={{
textAlign: 'center', textAlign: 'center',
backgroundColor: colors.headerTable, backgroundColor: colors.headerTable,
width: 120, width: 160,
}} }}
> >
Hành động Hành động
...@@ -247,6 +247,28 @@ function TableList(props) { ...@@ -247,6 +247,28 @@ function TableList(props) {
</IconButton> </IconButton>
</Tooltip> </Tooltip>
) : null} ) : null}
{checkRole(
user,
'/payment-supplier/update'
) ? (
<Tooltip title="Cập nhật">
<IconButton
onClick={() => {
history.push({
pathname:
'/payment-supplier/detail',
state: row.id,
})
}}
className={classes.button}
aria-label="edit"
>
<Icon color="primary">
visibility
</Icon>
</IconButton>
</Tooltip>
) : null}
</TableCell> </TableCell>
</TableRow> </TableRow>
) )
......
src/app/views/PaymentSupplier/Update.js
...@@ -191,7 +191,7 @@ const SimpleForm = (props) => { ...@@ -191,7 +191,7 @@ const SimpleForm = (props) => {
container container
justify={'flex-end'} justify={'flex-end'}
> >
<Link to="/invoice-supplier"> <Link to="/payment-supplier">
<Button <Button
style={{ style={{
marginRight: 20, marginRight: 20,
......
src/app/views/PaymentSupplier/detail.js 0 → 100644
import React, { useState, useEffect } from 'react'
import {
ValidatorForm,
TextValidator,
SelectValidator,
} from 'react-material-ui-form-validator'
import {
Button,
Grid,
MenuItem,
FormControlLabel,
Checkbox,
Typography,
FormControl,
InputLabel,
Select,
} from '@material-ui/core'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import { Breadcrumb, SimpleCard } from 'app/components'
import { Link, useHistory, useLocation } from 'react-router-dom'
import {
trimObject,
encryString,
convertDate,
convertTimeApi,
} from 'app/config/Function'
import { connect } from 'react-redux'
import PieChartReport from './PieChartReport'
import CustomLineChart from 'app/components/Chart/LineChart'
import TabTrans from './TabTrans/index'
import { detailSupplier, updateSupplier } from 'app/apis/Functions/supplier'
import { useTranslation } from 'react-i18next'
import useAuth from 'app/hooks/useAuth'
const SimpleForm = (props) => {
const [state, setState] = useState({})
const location = useLocation()
const [image, setImage] = useState()
const { user } = useAuth()
const [date, setDate] = useState(null)
const { t } = useTranslation()
useEffect(() => {
getDataDefault()
}, [])
const history = useHistory()
const getDataDefault = async () => {
props.showLoading()
try {
const res = await detailSupplier(location.state, {})
setState({ ...res.data.data })
} catch (err) {
toast.error(t(err), {
theme: 'colored',
})
}
props.hideLoading()
}
const handleSubmit = async (event) => {
const newValue = trimObject(state)
props.showLoading()
const res = await updateSupplier({
...newValue,
})
console.log(res)
props.hideLoading()
if (res.data.code == 200) {
history.push('/payment-supplier')
if (res.data.code == 200) {
toast.success('Cập nhật đối tác thanh toán thành công!', {
theme: 'colored',
})
}
} else {
toast.error(t(res.data.error), {
theme: 'colored',
})
}
}
const handleChange = (event) => {
event.persist()
setState({
...state,
[event.target.name]: event.target.value,
})
}
const { provider_code, provider_name, phone, email, address } = state
return (
<div className="m-sm-30">
<div className="mb-sm-30">
<div className="mb-sm-30">
<Breadcrumb
routeSegments={[
{
name: 'Đối tác thanh toán',
path: '/payment-supplier',
},
{ name: 'Chi tiết' },
]}
/>
</div>
<SimpleCard>
<ValidatorForm onSubmit={handleSubmit} onError={() => null}>
<Grid container spacing={3}>
<Grid xs={4} item>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
}}
>
<img
src={
'https://image.bnews.vn/MediaUpload/Org/2022/04/26/logo-bidv-20220426071253.jpg'
}
style={{
width: 150,
height: 150,
backgroundColor: '#000',
borderRadius: 75,
}}
/>
</div>
</Grid>
<Grid xs={8} item container>
<Grid container spacing={3}>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Mã đối tác *"
onChange={handleChange}
type="text"
name="provider_code"
disabled={true}
value={provider_code || ''}
validators={['required']}
errorMessages={[
'Không được để trống trường này',
]}
/>
</Grid>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Tên đối tác *"
onChange={handleChange}
disabled={true}
type="text"
name="provider_name"
value={provider_name || ''}
validators={['required']}
errorMessages={[
'Không được để trống trường này',
]}
/>
</Grid>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Số điện thoại *"
onChange={handleChange}
disabled={true}
type="text"
name="phone"
value={phone || ''}
validators={[
'required',
'isNumber',
'minStringLength:10',
'maxStringLength:15',
]}
errorMessages={[
'Không được để trống trường này',
'Trường này phải nhập số ',
'Số điện thoại phải có ít nhất 10 chữ số',
'Số điện thoại nhiều nhất chỉ có 15 chữ số',
]}
/>
</Grid>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Email *"
onChange={handleChange}
disabled={true}
type="text"
name="email"
value={email || ''}
validators={['required', 'isEmail']}
errorMessages={[
'Không được để trống trường này',
'Email không hợp lệ',
]}
/>
</Grid>
<Grid item lg={12} md={12} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Địa chỉ"
onChange={handleChange}
disabled={true}
type="text"
name="address"
value={address || ''}
/>
</Grid>
</Grid>
</Grid>
</Grid>
</ValidatorForm>
</SimpleCard>
<div style={{ height: 10 }} />
<SimpleCard>
<Grid container spacing={3}>
<Grid
item
lg={12}
md={12}
sm={12}
xs={12}
container
justify={'flex-end'}
spacing={3}
>
<Grid item lg={2} md={2} sm={4} xs={4}>
<FormControl variant="outlined" fullWidth>
<Select
//value={store}
onChange={(e) => {
//setStore(e.target.value)
}}
inputProps={{
name: 'age',
id: 'outlined-age-native-simple',
}}
>
{[].map((e) => (
<MenuItem value={e.id}>
{e.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item lg={2} md={2} sm={4} xs={4}>
<FormControl variant="outlined" fullWidth>
<Select
//value={store}
onChange={(e) => {
//setStore(e.target.value)
}}
inputProps={{
name: 'age',
id: 'outlined-age-native-simple',
}}
>
{[].map((e) => (
<MenuItem value={e.id}>
{e.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</Grid>
<Grid xs={4} item>
<PieChartReport />
</Grid>
<Grid xs={8} item container>
<CustomLineChart
data={{
legend: [],
xAxis: [],
series: [],
}}
color={[]}
/>
</Grid>
</Grid>
</SimpleCard>
<div style={{ height: 10 }} />
<SimpleCard>
<TabTrans />
</SimpleCard>
<Grid style={{ marginTop: 20 }} container justify={'flex-end'}>
<Link to="/payment-supplier">
<Button
style={{
marginRight: 20,
}}
color="inherit"
variant="contained"
onClick={() => {}}
>
<span className="capitalize">Quay lại</span>
</Button>
</Link>
</Grid>
</div>
</div>
)
}
const mapStateToProps = (state) => {
return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
SimpleForm
)
src/app/views/PaymentSupplier/routes.js
...@@ -2,6 +2,11 @@ import React from 'react' ...@@ -2,6 +2,11 @@ import React from 'react'
const routes = [ const routes = [
{ {
path: '/payment-supplier/detail',
component: React.lazy(() => import('./detail')),
},
{
path: '/payment-supplier/update', path: '/payment-supplier/update',
component: React.lazy(() => import('./Update')), component: React.lazy(() => import('./Update')),
}, },
......
src/app/views/Reconciliation/ListTrans/Index.js 0 → 100644
import React, { useState, useEffect } from 'react'
import LogAuth from './View'
import { listTransReconciliation } from 'app/apis/Functions/reconciliation'
import { useHistory } from 'react-router-dom'
import { toPriceVnd, convertDate } from 'app/config/Function'
import { connect } from 'react-redux'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import useDebounce from 'app/hooks/useDebounce'
import { useTranslation } from 'react-i18next'
import { dropdownMerchant, dropdownStore } from 'app/apis/Functions/dropdown'
const ToolNotificate = (props) => {
const [txtSearch, setTxtSearch] = useState('')
const [applications, setApplications] = useState('')
const [pageIndex, setPageIndex] = useState(0)
const [pageSize] = useState(10)
const [totalRecords, setTotalRecord] = useState(0)
const history = useHistory()
const searchDebount = useDebounce(txtSearch, 1000)
const [startDate, setStartDate] = useState()
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([])
useEffect(() => {
getDataMerchant()
}, [])
const changeDateRange = (start, end) => {
setStartDate(start)
setEndDate(end)
}
const getData = async (init) => {
props.showLoading()
let res
if (init) {
setPageIndex(0)
res = await listTransReconciliation({
page_no: 0,
page_size: pageSize,
date_from: startDate ? convertDate(startDate) : null,
date_to: endDate ? convertDate(endDate) : null,
product_code: null,
payment_gate_code: null,
statusReconciliation: 0,
type_payment: null,
})
} else {
res = await listTransReconciliation({
page_no: pageIndex + 1,
page_size: pageSize,
date_from: startDate ? convertDate(startDate) : null,
date_to: endDate ? convertDate(endDate) : null,
product_code: null,
payment_gate_code: null,
statusReconciliation: 0,
type_payment: null,
})
}
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) => {
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',
})
}
}
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 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)
} else {
toast.error(t(res.data.error), {
theme: 'colored',
})
}
}
return (
<LogAuth
data={data}
setTxtSearch={setTxtSearch}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
totalRecords={totalRecords}
setApplications={setApplications}
applications={applications}
startDate={startDate}
changeDateRange={changeDateRange}
type={type}
setType={setType}
listType={listType}
merchant={merchant}
setMerchant={setMerchant}
listMerchant={listMerchant}
store={store}
setStore={setStore}
listStore={listStore}
/>
)
}
const mapStateToProps = (state) => {
return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
ToolNotificate
)
src/app/views/Reconciliation/ListTrans/Table.js 0 → 100644
import React, { useState } from 'react'
import {
Paper,
Table,
TableBody,
TableCell,
TableHead,
TableContainer,
TablePagination,
TableRow,
IconButton,
MenuItem,
Tooltip,
Icon,
} from '@material-ui/core'
import EditIcon from '@material-ui/icons/Edit'
import DeleteIcon from '@material-ui/icons/Delete'
import colors from 'app/assets/Color'
import useStyles from 'app/styles/Table'
import { Breadcrumb, SimpleCard } from 'app/components'
const columns = [
{
id: 'index',
label: 'STT',
align: 'center',
minWidth: 80,
},
{
id: 'store_name',
label: 'Cây xăng',
align: 'left',
minWidth: 160,
},
// {
// 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',
align: 'left',
minWidth: 110,
},
// {
// id: 'IP',
// label: 'Loại nhiên liệu',
// align: 'left',
// minWidth: 140,
// },
{
id: 'product_name',
label: 'Sản phẩm',
align: 'left',
minWidth: 120,
},
{
id: 'unit_price',
label: 'Đơn giá',
align: 'left',
minWidth: 80,
},
{
id: 'quantity',
label: 'Lượng nhiên liệu',
align: 'left',
minWidth: 80,
},
{
id: 'price',
label: 'Thành tiền',
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,
},
]
function TableList(props) {
const classes = useStyles()
const {
data,
handeChangeActive,
removeItem,
changeActive,
setChangeActive,
setPageIndex,
setPageSize,
pageIndex,
totalRecords,
} = props
const handleChangePage = (event, newPage) => {
setPageIndex(newPage)
}
const handleChangeRowsPerPage = (event) => {
setPageSize(event.target.value)
}
return (
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={'center'}
style={{
width: column.minWidth,
backgroundColor: colors.headerTable,
}}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody className={classes.columnTable}>
{data.map((row) => {
return (
<TableRow
hover
role="checkbox"
tabIndex={-1}
key={row.id}
>
{columns.map((column) => {
const avatar = row[column.id]
return (
<TableCell
key={column.id}
align={column.align}
>
{column.format ? (
<img
src={column.format(
avatar
)}
className={
classes.image
}
/>
) : (
avatar
)}
</TableCell>
)
})}
</TableRow>
)
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
component="div"
page={pageIndex}
count={totalRecords}
rowsPerPage={10}
rowsPerPageOptions={[]}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
)
}
export default TableList
src/app/views/Reconciliation/ListTrans/View.js 0 → 100644
import React, { Fragment, useState, useEffect } from 'react'
import {
TextField,
Icon,
Button,
StepLabel,
Step,
Stepper,
Grid,
FormControl,
InputLabel,
Select,
MenuItem,
} from '@material-ui/core'
import Table from './Table'
import { Breadcrumb } from 'app/components'
import { Link } from 'react-router-dom'
import { Autocomplete, createFilterOptions } from '@material-ui/lab'
import DateRange from 'app/components/Input/DateHome'
function CustomerView(props) {
const [age, setAge] = React.useState('')
const {
data,
setTxtSearch,
changeActive,
setChangeActive,
handeChangeActive,
setPageIndex,
pageIndex,
totalRecords,
setApplications,
applications,
startDate,
changeDateRange,
type,
setType,
listType,
listMerchant,
setMerchant,
merchant,
store,
setStore,
listStore,
} = props
const handleChange = (event) => {
setAge(event.target.value)
}
return (
<Fragment>
<div className="m-sm-30">
<div className="mb-sm-30">
<Breadcrumb
routeSegments={[
{
name: 'Danh sách giao dịch qua bên thứ 3',
path: '/reconciliation/transations',
},
]}
/>
</div>
<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>
<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>
</Grid>
<Table
data={data}
changeActive={changeActive}
setChangeActive={setChangeActive}
handeChangeActive={handeChangeActive}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
totalRecords={totalRecords}
/>
</div>
</Fragment>
)
}
export default CustomerView
src/app/views/Reconciliation/Setting/Create.js 0 → 100644
import React, { useState, useEffect } from 'react'
import {
ValidatorForm,
TextValidator,
SelectValidator,
} from 'react-material-ui-form-validator'
import {
Button,
Grid,
MenuItem,
FormControlLabel,
Checkbox,
Typography,
} from '@material-ui/core'
import { createFunction } from 'app/apis/Functions/function'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import { Breadcrumb, SimpleCard } from 'app/components'
import { Link, useHistory, useLocation } from 'react-router-dom'
import { trimObject, encryString, convertDate } from 'app/config/Function'
import { connect } from 'react-redux'
import { KeyboardDatePicker } from '@material-ui/pickers'
import {
dropdownDepartment,
dropdownUserGroup,
dropdownStore,
} from 'app/apis/Functions/dropdown'
import PickerImage from 'app/components/Input/PickerImage'
import { createSupplier } from 'app/apis/Functions/supplier'
import { useTranslation } from 'react-i18next'
import useAuth from 'app/hooks/useAuth'
const SimpleForm = (props) => {
const [state, setState] = useState({})
const [listDrop, setListDrop] = useState([])
const [listAction, setListAction] = useState([])
const { user } = useAuth()
const { t } = useTranslation()
const history = useHistory()
const handleSubmit = async (event) => {
const newValue = trimObject(state)
props.showLoading()
const res = await createSupplier({
...newValue,
type: '3',
status: 1,
})
props.hideLoading()
if (res.data.code == 200) {
history.push('/ncc')
if (res.data.code == 200) {
toast.success('Tạo nhà cung cấp thiết bị thành công!', {
theme: 'colored',
})
}
} else {
toast.error(t(res.data.error), {
theme: 'colored',
})
}
}
const handleChange = (event) => {
event.persist()
setState({
...state,
[event.target.name]: event.target.value,
})
}
const { provider_code, provider_name, phone, email, address } = state
return (
<div className="m-sm-30">
<div className="mb-sm-30">
<div className="mb-sm-30">
<Breadcrumb
routeSegments={[
{
name: 'Cấu hình đối soát',
path: '/reconciliation/setting',
},
{ name: 'Thêm mới' },
]}
/>
</div>
<SimpleCard>
<ValidatorForm onSubmit={handleSubmit} onError={() => null}>
<Grid container spacing={3}>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Mã nhà cung cấp *"
onChange={handleChange}
type="text"
name="provider_code"
value={provider_code || ''}
validators={['required']}
errorMessages={[
'Không được để trống trường này',
]}
/>
</Grid>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Tên nhà cung cấp *"
onChange={handleChange}
type="text"
name="provider_name"
value={provider_name || ''}
validators={['required']}
errorMessages={[
'Không được để trống trường này',
]}
/>
</Grid>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Số điện thoại *"
onChange={handleChange}
type="text"
name="phone"
value={phone || ''}
validators={[
'required',
'isNumber',
'minStringLength:10',
'maxStringLength:15',
]}
errorMessages={[
'Không được để trống trường này',
'Trường này phải nhập số ',
'Số điện thoại phải có ít nhất 10 chữ số',
'Số điện thoại nhiều nhất chỉ có 15 chữ số',
]}
/>
</Grid>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Email *"
onChange={handleChange}
type="text"
name="email"
value={email || ''}
validators={['required', 'isEmail']}
errorMessages={[
'Không được để trống trường này',
'Email không hợp lệ',
]}
/>
</Grid>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Địa chỉ"
onChange={handleChange}
type="text"
name="address"
value={address || ''}
/>
</Grid>
</Grid>
<Grid container justify={'flex-end'}>
<Link to="/reconciliation/setting">
<Button
style={{
marginRight: 20,
}}
color="inherit"
variant="contained"
onClick={() => {}}
>
<span className="capitalize">Quay lại</span>
</Button>
</Link>
<Button
color="primary"
variant="contained"
type="submit"
>
<span className="capitalize">Thêm mới</span>
</Button>
</Grid>
</ValidatorForm>
</SimpleCard>
</div>
</div>
)
}
const mapStateToProps = (state) => {
return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
SimpleForm
)
src/app/views/Reconciliation/Setting/Index.js 0 → 100644
import React, { useState, useEffect } from 'react'
import ToolUserView from './View'
import {
getListSupplier,
deleteSupplier,
changeStatusSupplier,
} from 'app/apis/Functions/supplier'
import { useHistory } from 'react-router-dom'
import KEY from 'app/assets/Key'
import { connect } from 'react-redux'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import useDebounce from 'app/hooks/useDebounce'
import useAuth from 'app/hooks/useAuth'
const ToolNotificate = (props) => {
const [txtSearch, setTxtSearch] = useState('')
const [activeSelected, setActiveSeleted] = useState(null)
const [changeActive, setChangeActive] = useState(1)
const searchDebount = useDebounce(txtSearch, 1000)
const [pageIndex, setPageIndex] = useState(0)
const [pageSize] = useState(10)
const [totalRecords, setTotalRecord] = useState(0)
const [status, setStatus] = useState()
const [listDrop, setListDrop] = useState([])
const [store, setStore] = useState()
const history = useHistory()
const [listGroup, setListGroup] = useState([])
const [group, setGroup] = useState()
const { user } = useAuth()
const [data, setData] = useState([])
const handeChangeActive = async (id, status_id) => {
props.showLoading()
const res = await changeStatusSupplier({ id, status_id })
props.hideLoading()
if (res.data.code == 200) {
getData()
toast.success('Thay đổi trạng thái thành công!', {
theme: 'colored',
})
} else {
toast.error('Thay đổi trạng thái thất bại!', {
theme: 'colored',
})
}
}
console.log('user', user)
const getData = async (isInit) => {
props.showLoading()
let res
if (isInit) {
setPageIndex(0)
res = await getListSupplier({
provider_name: searchDebount,
page_no: 0,
page_size: pageSize,
status,
type: 3,
})
} else {
res = await getListSupplier({
provider_name: searchDebount,
page_no: pageIndex + 1,
page_size: pageSize,
status,
type: 3,
})
}
props.hideLoading()
if (res.data.code == 200 && res.data.data) {
const newList = res.data.data.data.map((e, i) => {
return { ...e, index: i + 1 + pageIndex * pageSize }
})
setData(newList)
setTotalRecord(res.data.data.total_elements)
} else if (res.data.code == 401) {
localStorage.removeItem(KEY.API_TOKEN)
setTimeout(() => {
history.push('/')
}, 100)
} else {
// enqueueSnackbar('Error!', { variant: 'error' })
}
}
useEffect(() => {
getData(false)
}, [pageIndex])
useEffect(() => {
getData(true)
}, [searchDebount, status, store, group])
const removeItem = async (id) => {
props.showLoading()
const res = await deleteSupplier({ id })
props.hideLoading()
if (res.data.code == 200) {
getData(true)
toast.success('Xoá bản ghi thành công!', {
theme: 'colored',
})
} else if (res.data.code == 401) {
localStorage.removeItem(KEY.API_TOKEN)
setTimeout(() => {
history.push('/')
}, 100)
} else {
toast.error('Xoá bản ghi thất bại!', {
theme: 'colored',
})
}
}
return (
<ToolUserView
data={data}
removeItem={removeItem}
setTxtSearch={setTxtSearch}
setActiveSeleted={setActiveSeleted}
pageIndex={pageIndex}
changeActive={changeActive}
setChangeActive={setChangeActive}
setPageIndex={setPageIndex}
activeSelected={activeSelected}
handeChangeActive={handeChangeActive}
totalRecords={totalRecords}
status={status}
setStatus={setStatus}
listDrop={listDrop}
store={store}
setStore={setStore}
listGroup={listGroup}
group={group}
setGroup={setGroup}
/>
)
}
const mapStateToProps = (state) => {
return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
ToolNotificate
)
src/app/views/Reconciliation/Setting/Table.js 0 → 100644
import React, { useState } from 'react'
import {
Paper,
Table,
TableBody,
TableCell,
TableHead,
TableContainer,
TablePagination,
TableRow,
IconButton,
MenuItem,
Select,
Modal,
Fade,
Grid,
Backdrop,
Link,
Button,
Tooltip,
Icon,
} from '@material-ui/core'
import EditIcon from '@material-ui/icons/Edit'
import DeleteIcon from '@material-ui/icons/Delete'
import colors from 'app/assets/Color'
import useStyles from 'app/styles/Table'
import { Breadcrumb, SimpleCard } from 'app/components'
import DialogTransition from 'app/components/dialog/DialogTransition'
import { useHistory } from 'react-router-dom'
import useAuth from 'app/hooks/useAuth'
import { checkRole } from 'app/config/Function'
const columns = [
{
id: 'index',
label: 'STT',
align: 'center',
minWidth: 50,
},
{
id: 'provider_code',
label: 'Mã nhà cung cấp',
align: 'center',
minWidth: 150,
},
{
id: 'provider_name',
label: 'Tên nhà cung cấp',
align: 'left',
minWidth: 200,
},
{
id: 'phone',
label: 'Số điện thoại',
align: 'left',
minWidth: 'auto',
minWidth: 100,
},
{
id: 'email',
label: 'Email',
align: 'left',
minWidth: 'auto',
minWidth: 150,
},
{
id: 'address',
label: 'Địa chỉ',
align: 'left',
minWidth: 'auto',
minWidth: 250,
},
]
function TableList(props) {
const {
data,
handeChangeActive,
removeItem,
changeActive,
setChangeActive,
setPageIndex,
setPageSize,
pageIndex,
totalRecords,
permissions,
} = props
const classes = useStyles()
let history = useHistory()
const [selected, setSelected] = useState({
name: '',
id: '',
title: '',
content: '',
})
const [open, setOpen] = React.useState(false)
const handleChangePage = (event, newPage) => {
setPageIndex(newPage)
}
const handleChangeRowsPerPage = (event) => {
setPageSize(event.target.value)
}
const handleClose = () => {
setOpen(false)
}
const { user } = useAuth()
return (
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={'center'}
style={{
width: column.minWidth,
backgroundColor: colors.headerTable,
}}
>
{column.label}
</TableCell>
))}
<TableCell
style={{
backgroundColor: colors.headerTable,
width: 145,
}}
>
Trạng thái
</TableCell>
<TableCell
style={{
textAlign: 'center',
backgroundColor: colors.headerTable,
width: 120,
}}
>
Hành động
</TableCell>
</TableRow>
</TableHead>
<TableBody className={classes.columnTable}>
{data.map((row) => {
return (
<TableRow
hover
role="checkbox"
tabIndex={-1}
key={row.id}
>
{columns.map((column) => {
const imageUrl = row[column.id]
return (
<TableCell
key={column.id}
align={column.align}
>
{column.format ? (
<img
src={column.format(
imageUrl
)}
className={
classes.image
}
/>
) : (
imageUrl
)}
</TableCell>
)
})}
<TableCell className={classes.border}>
<Select
variant={'outlined'}
labelId="demo-simple-select-placeholder-label-label"
id="demo-simple-select-placeholder-label"
onChange={(e) =>
handeChangeActive(
row.id,
e.target.value
)
}
displayEmpty
defaultValue={row.status}
className={classes.formControl}
>
<MenuItem value={1}>
Hoạt động
</MenuItem>
<MenuItem value={2}>Khóa</MenuItem>
</Select>
</TableCell>
<TableCell>
{checkRole(user, '/ncc/delete') ? (
<Tooltip title="Xoá">
<IconButton
onClick={() => {
setSelected({
...row,
title: 'Xóa NCC thiết bị',
content: `Bạn có muốn xóa NCC thiết bị ${row.provider_name} hay không?`,
})
setOpen(true)
}}
className={classes.button}
aria-label="Delete"
>
<Icon color="error">
delete
</Icon>
</IconButton>
</Tooltip>
) : null}
{checkRole(
user,
'/reconciliation/setting/update'
) ? (
<Tooltip title="Cập nhật">
<IconButton
onClick={() => {
history.push({
pathname:
'/reconciliation/setting/update',
state: row.id,
})
}}
className={classes.button}
aria-label="edit"
>
<Icon color="primary">
edit
</Icon>
</IconButton>
</Tooltip>
) : null}
</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</TableContainer>
<DialogTransition
data={selected}
open={open}
handleClose={handleClose}
onAgree={() => {
removeItem(selected.id)
handleClose()
}}
/>
<TablePagination
component="div"
page={pageIndex}
count={totalRecords}
rowsPerPage={10}
rowsPerPageOptions={[]}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
)
}
export default TableList
src/app/views/Reconciliation/Setting/Update.js 0 → 100644
import React, { useState, useEffect } from 'react'
import {
ValidatorForm,
TextValidator,
SelectValidator,
} from 'react-material-ui-form-validator'
import {
Button,
Grid,
MenuItem,
FormControlLabel,
Checkbox,
Typography,
} from '@material-ui/core'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import { Breadcrumb, SimpleCard } from 'app/components'
import { Link, useHistory, useLocation } from 'react-router-dom'
import {
trimObject,
encryString,
convertDate,
convertTimeApi,
} from 'app/config/Function'
import { connect } from 'react-redux'
import { detailSupplier, updateSupplier } from 'app/apis/Functions/supplier'
import { useTranslation } from 'react-i18next'
import useAuth from 'app/hooks/useAuth'
const SimpleForm = (props) => {
const [state, setState] = useState({})
const location = useLocation()
const [image, setImage] = useState()
const { user } = useAuth()
const [date, setDate] = useState(null)
const { t } = useTranslation()
useEffect(() => {
getDataDefault()
}, [])
const history = useHistory()
const getDataDefault = async () => {
props.showLoading()
try {
const res = await detailSupplier(location.state, {})
setState({ ...res.data.data })
} catch (err) {
toast.error(t(err), {
theme: 'colored',
})
}
props.hideLoading()
}
const handleSubmit = async (event) => {
const newValue = trimObject(state)
props.showLoading()
const res = await updateSupplier({
...newValue,
})
props.hideLoading()
if (res.data.code == 200) {
history.push('/ncc')
if (res.data.code == 200) {
toast.success('Cập nhật nhà cung cấp thiết bị thành công!', {
theme: 'colored',
})
}
} else {
toast.error(t(res.data.error), {
theme: 'colored',
})
}
}
const handleChange = (event) => {
event.persist()
setState({
...state,
[event.target.name]: event.target.value,
})
}
const { provider_code, provider_name, phone, email, address } = state
return (
<div className="m-sm-30">
<div className="mb-sm-30">
<div className="mb-sm-30">
<Breadcrumb
routeSegments={[
{
name: 'Cấu hình đối soát',
path: '/reconciliation/setting',
},
{ name: 'Cập nhật' },
]}
/>
</div>
<SimpleCard>
<ValidatorForm onSubmit={handleSubmit} onError={() => null}>
<Grid container spacing={3}>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Mã nhà cung cấp *"
onChange={handleChange}
type="text"
name="provider_code"
disabled={true}
value={provider_code || ''}
validators={['required']}
errorMessages={[
'Không được để trống trường này',
]}
/>
</Grid>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Tên nhà cung cấp *"
onChange={handleChange}
type="text"
name="provider_name"
value={provider_name || ''}
validators={['required']}
errorMessages={[
'Không được để trống trường này',
]}
/>
</Grid>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Số điện thoại *"
onChange={handleChange}
type="text"
name="phone"
value={phone || ''}
validators={[
'required',
'isNumber',
'minStringLength:10',
'maxStringLength:15',
]}
errorMessages={[
'Không được để trống trường này',
'Trường này phải nhập số ',
'Số điện thoại phải có ít nhất 10 chữ số',
'Số điện thoại nhiều nhất chỉ có 15 chữ số',
]}
/>
</Grid>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Email *"
onChange={handleChange}
type="text"
name="email"
value={email || ''}
validators={['required', 'isEmail']}
errorMessages={[
'Không được để trống trường này',
'Email không hợp lệ',
]}
/>
</Grid>
<Grid item lg={6} md={6} sm={12} xs={12}>
<TextValidator
variant="outlined"
className="mb-4 w-full"
label="Địa chỉ"
onChange={handleChange}
type="text"
name="address"
value={address || ''}
/>
</Grid>
</Grid>
<Grid
style={{ marginTop: 20 }}
container
justify={'flex-end'}
>
<Link to="/reconciliation/setting">
<Button
style={{
marginRight: 20,
}}
color="inherit"
variant="contained"
onClick={() => {}}
>
<span className="capitalize">Quay lại</span>
</Button>
</Link>
<Button
color="primary"
variant="contained"
type="submit"
>
<span className="capitalize">Cập nhật</span>
</Button>
</Grid>
</ValidatorForm>
</SimpleCard>
</div>
</div>
)
}
const mapStateToProps = (state) => {
return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
SimpleForm
)
src/app/views/Reconciliation/Setting/View.js 0 → 100644
import React, { Fragment, useState, useEffect } from 'react'
import {
TextField,
Icon,
Button,
StepLabel,
Step,
Stepper,
Grid,
FormControl,
InputLabel,
Select,
MenuItem,
} from '@material-ui/core'
import Table from './Table'
import { Breadcrumb } from 'app/components'
import { Link } from 'react-router-dom'
import { Autocomplete, createFilterOptions } from '@material-ui/lab'
import useAuth from 'app/hooks/useAuth'
import { checkRole } from 'app/config/Function'
function CustomerView(props) {
const [age, setAge] = React.useState('')
const {
data,
updateItem,
removeItem,
setTxtSearch,
changeActive,
setChangeActive,
handeChangeActive,
setPageIndex,
pageIndex,
totalRecords,
status,
setStatus,
store,
setStore,
listDrop,
listGroup,
group,
setGroup,
} = props
const handleChange = (event) => {
setAge(event.target.value)
}
const { user } = useAuth()
return (
<Fragment>
<div className="m-sm-30">
<div className="mb-sm-30">
<Breadcrumb
routeSegments={[
{
name: 'Cấu hình đối soát',
path: '/reconciliation/setting',
},
]}
/>
</div>
<Grid
style={{
padding: 10,
marginBottom: 20,
}}
justify={'space-between'}
alignItems={'center'}
container
spacing={3}
>
<Grid
spacing={3}
container
item
lg={8}
md={8}
sm={8}
xs={8}
>
<Grid item lg={3} md={3} sm={3} xs={3}>
<TextField
variant="outlined"
className="w-full"
label="Nhập từ khoá"
onChange={(e) => {
const text = e.target.value
setTimeout(() => {
setTxtSearch(text)
}, 1000)
}}
/>
</Grid>
<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',
}}
>
<MenuItem value="">
<em>Tất cả</em>
</MenuItem>
{[
{
id: 1,
name: 'Hoạt động',
},
{
id: 2,
name: 'Khoá',
},
].map((e) => (
<MenuItem value={e.id}>
{e.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</Grid>
{checkRole(user, '/reconciliation/setting/create') ? (
<Link to="/reconciliation/setting/create">
<Button
variant="contained"
className={'bg-light-primary'}
>
<span className={'text-primary'}>Thêm mới</span>
</Button>
</Link>
) : null}
</Grid>
<Table
data={data}
changeActive={changeActive}
setChangeActive={setChangeActive}
handeChangeActive={handeChangeActive}
updateItem={updateItem}
removeItem={removeItem}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
totalRecords={totalRecords}
/>
</div>
</Fragment>
)
}
export default CustomerView
src/app/views/Reconciliation/Sheet/Index.js 0 → 100644
import React, { useState, useEffect } from 'react'
import LogAuth from './View'
import { listTransaction } from 'app/apis/Functions/transaction'
import { useHistory } from 'react-router-dom'
import { toPriceVnd, convertDate } from 'app/config/Function'
import { connect } from 'react-redux'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import useDebounce from 'app/hooks/useDebounce'
import { useTranslation } from 'react-i18next'
import { dropdownMerchant, dropdownStore } from 'app/apis/Functions/dropdown'
const ToolNotificate = (props) => {
const [txtSearch, setTxtSearch] = useState('')
const [applications, setApplications] = useState('')
const [pageIndex, setPageIndex] = useState(0)
const [pageSize] = useState(10)
const [totalRecords, setTotalRecord] = useState(0)
const history = useHistory()
const searchDebount = useDebounce(txtSearch, 1000)
const [startDate, setStartDate] = useState()
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([])
useEffect(() => {
getDataMerchant()
}, [])
const changeDateRange = (start, end) => {
setStartDate(start)
setEndDate(end)
}
const getData = async (init) => {
props.showLoading()
let res
if (init) {
setPageIndex(0)
res = await listTransaction({
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',
})
} else {
res = await listTransaction({
order_code: searchDebount,
applications,
page_no: pageIndex + 1,
page_size: pageSize,
from_date: startDate ? convertDate(startDate) : null,
to_date: endDate ? convertDate(endDate) : null,
type_code: type,
merchant_id: merchant,
store_id: store,
// gasoline_id: '57dd1a73-d847-4d73-9791-08dc0841e7a9',
})
}
props.hideLoading()
if (res.data.code == 200 && res.data.data) {
const newList = res.data.data.data.map((e, i) => {
return { ...e, index: i + 1 + pageIndex * pageSize }
})
setData(newList)
setTotalRecord(res.data.data.total_elements)
} else if (res.data.code == 401) {
setTimeout(() => {
history.push('/')
}, 100)
} else {
toast.error(t(res.data.error), {
theme: 'colored',
})
}
}
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 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)
} else {
toast.error(t(res.data.error), {
theme: 'colored',
})
}
}
return (
<LogAuth
data={data}
setTxtSearch={setTxtSearch}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
totalRecords={totalRecords}
setApplications={setApplications}
applications={applications}
startDate={startDate}
changeDateRange={changeDateRange}
type={type}
setType={setType}
listType={listType}
merchant={merchant}
setMerchant={setMerchant}
listMerchant={listMerchant}
store={store}
setStore={setStore}
listStore={listStore}
/>
)
}
const mapStateToProps = (state) => {
return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
ToolNotificate
)
src/app/views/Reconciliation/Sheet/Table.js 0 → 100644
import React, { useState } from 'react'
import {
Paper,
Table,
TableBody,
TableCell,
TableHead,
TableContainer,
TablePagination,
TableRow,
IconButton,
MenuItem,
Tooltip,
Icon,
} from '@material-ui/core'
import EditIcon from '@material-ui/icons/Edit'
import DeleteIcon from '@material-ui/icons/Delete'
import colors from 'app/assets/Color'
import useStyles from 'app/styles/Table'
import { Breadcrumb, SimpleCard } from 'app/components'
const columns = [
{
id: 'index',
label: 'STT',
align: 'center',
minWidth: 80,
},
{
id: 'store_name',
label: 'Cây xăng',
align: 'left',
minWidth: 160,
},
// {
// 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',
align: 'left',
minWidth: 110,
},
// {
// id: 'IP',
// label: 'Loại nhiên liệu',
// align: 'left',
// minWidth: 140,
// },
{
id: 'product_name',
label: 'Sản phẩm',
align: 'left',
minWidth: 120,
},
{
id: 'unit_price',
label: 'Đơn giá',
align: 'left',
minWidth: 80,
},
{
id: 'quantity',
label: 'Lượng nhiên liệu',
align: 'left',
minWidth: 80,
},
{
id: 'price',
label: 'Thành tiền',
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,
},
]
function TableList(props) {
const classes = useStyles()
const {
data,
handeChangeActive,
removeItem,
changeActive,
setChangeActive,
setPageIndex,
setPageSize,
pageIndex,
totalRecords,
} = props
const handleChangePage = (event, newPage) => {
setPageIndex(newPage)
}
const handleChangeRowsPerPage = (event) => {
setPageSize(event.target.value)
}
return (
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={'center'}
style={{
width: column.minWidth,
backgroundColor: colors.headerTable,
}}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody className={classes.columnTable}>
{data.map((row) => {
return (
<TableRow
hover
role="checkbox"
tabIndex={-1}
key={row.id}
>
{columns.map((column) => {
const avatar = row[column.id]
return (
<TableCell
key={column.id}
align={column.align}
>
{column.format ? (
<img
src={column.format(
avatar
)}
className={
classes.image
}
/>
) : (
avatar
)}
</TableCell>
)
})}
</TableRow>
)
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
component="div"
page={pageIndex}
count={totalRecords}
rowsPerPage={10}
rowsPerPageOptions={[]}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
)
}
export default TableList
src/app/views/Reconciliation/Sheet/View.js 0 → 100644
import React, { Fragment, useState, useEffect } from 'react'
import {
TextField,
Icon,
Button,
StepLabel,
Step,
Stepper,
Grid,
FormControl,
InputLabel,
Select,
MenuItem,
} from '@material-ui/core'
import Table from './Table'
import { Breadcrumb } from 'app/components'
import { Link } from 'react-router-dom'
import { Autocomplete, createFilterOptions } from '@material-ui/lab'
import DateRange from 'app/components/Input/DateHome'
function CustomerView(props) {
const [age, setAge] = React.useState('')
const {
data,
setTxtSearch,
changeActive,
setChangeActive,
handeChangeActive,
setPageIndex,
pageIndex,
totalRecords,
setApplications,
applications,
startDate,
changeDateRange,
type,
setType,
listType,
listMerchant,
setMerchant,
merchant,
store,
setStore,
listStore,
} = props
const handleChange = (event) => {
setAge(event.target.value)
}
return (
<Fragment>
<div className="m-sm-30">
<div className="mb-sm-30">
<Breadcrumb
routeSegments={[
{
name: 'Danh sách phiếu đối soát',
path: '/reconciliation/sheet',
},
]}
/>
</div>
<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>
<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>
</Grid>
<Table
data={data}
changeActive={changeActive}
setChangeActive={setChangeActive}
handeChangeActive={handeChangeActive}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
totalRecords={totalRecords}
/>
</div>
</Fragment>
)
}
export default CustomerView
src/app/views/Reconciliation/router.js 0 → 100644
import React from 'react'
const ReconciliationRouters = [
{
path: '/reconciliation/transations',
component: React.lazy(() => import('./ListTrans/Index')),
},
{
path: '/reconciliation/setting/create',
component: React.lazy(() => import('./Setting/Create')),
},
{
path: '/reconciliation/setting/update',
component: React.lazy(() => import('./Setting/Update')),
},
{
path: '/reconciliation/setting',
component: React.lazy(() => import('./Setting/Index')),
},
{
path: '/reconciliation/sheet',
component: React.lazy(() => import('./Sheet/Index')),
},
]
export default ReconciliationRouters
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment