TF-87 loan management refahi
This commit is contained in:
@@ -0,0 +1,150 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useContext, useState} from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
FormHelperText,
|
||||
IconButton,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip
|
||||
} from "@mui/material";
|
||||
import {useFormik} from "formik";
|
||||
import ChangeCircleIcon from '@mui/icons-material/ChangeCircle';
|
||||
import {UPDATE_LOAN_MANAGEMENT_REFAHI} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import * as Yup from "yup";
|
||||
import {LoanStateRefahiContext} from "@/lib/prefetchDataTable/hooks/LoanStateRefahi";
|
||||
|
||||
|
||||
const Update = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const detail = useContext(LoanStateRefahiContext);
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("UpdateDialog.description_error")),
|
||||
next_state_id: Yup.number().required(t("UpdateDialog.next-state-id-error"))
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
next_state_id: ""
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("description", values.description);
|
||||
formData.append("next_state_id", values.next_state_id);
|
||||
|
||||
requestServer(`${UPDATE_LOAN_MANAGEMENT_REFAHI}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
const handleNextStateIDChange = (event) => {
|
||||
formik.setFieldValue("next_state_id", event.target.value)
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("UpdateDialog.update-tooltip")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ChangeCircleIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("UpdateDialog.update")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("UpdateDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<FormControl
|
||||
error={
|
||||
formik.touched.next_state_id &&
|
||||
Boolean(formik.errors.next_state_id)
|
||||
} fullWidth>
|
||||
<InputLabel>{t("UpdateDialog.next-state-id")}</InputLabel>
|
||||
<Select
|
||||
labelId="next_state_id"
|
||||
id="next_state_id"
|
||||
value={formik.values.next_state_id}
|
||||
label={t("UpdateDialog.next-state-id")}
|
||||
onChange={handleNextStateIDChange}
|
||||
onBlur={formik.handleBlur("next_state_id")}
|
||||
helperText={
|
||||
formik.touched.next_state_id && formik.errors.next_state_id
|
||||
}
|
||||
>
|
||||
{detail.map((item) => {
|
||||
return (
|
||||
<MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
|
||||
)
|
||||
})}
|
||||
</Select>
|
||||
<FormHelperText>
|
||||
{formik.touched.next_state_id && formik.errors.next_state_id}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("UpdateDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("UpdateDialog.button-update")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Update;
|
||||
@@ -0,0 +1,17 @@
|
||||
import {Box} from "@mui/material";
|
||||
import Update from "./Form/UpdateForm"
|
||||
|
||||
const TableRowActions = ({row, mutate, fetchUrl}) => {
|
||||
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<Update
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableRowActions;
|
||||
157
src/components/dashboard/refahi-loan-management/index.jsx
Normal file
157
src/components/dashboard/refahi-loan-management/index.jsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_LOAN_MANAGEMENT_REFAHI} from "@/core/data/apiRoutes";
|
||||
import {useTranslations} from "next-intl";
|
||||
import TableRowActions from "./TableRowActions";
|
||||
import DataTable from "@/core/components/DataTable";
|
||||
import moment from "jalali-moment";
|
||||
import MuiDatePicker from "@/core/components/MuiDatePicker";
|
||||
import {LoanStateRefahiProvider} from "@/lib/prefetchDataTable/hooks/LoanStateRefahi";
|
||||
|
||||
function DashboardRefahiLoanManagementComponent() {
|
||||
const t = useTranslations();
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("RefahiLoanManagement.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: "name",
|
||||
header: t("RefahiLoanManagement.name"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.national_id,
|
||||
id: "national_id",
|
||||
header: t("RefahiLoanManagement.national_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.phone_number,
|
||||
id: "phone_number",
|
||||
header: t("RefahiLoanManagement.phone_number"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
||||
id: "created_at",
|
||||
header: t("RefahiLoanManagement.created_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
filterFn: "lessThan",
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({renderedCellValue}) => {
|
||||
return <Typography variant="body2">{renderedCellValue}</Typography>;
|
||||
},
|
||||
Header: ({column}) => <>{column.columnDef.header}</>,
|
||||
Filter: ({column}) => {
|
||||
return (
|
||||
<MuiDatePicker column={column}/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("RefahiLoanManagement.updated_at"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.state_name,
|
||||
id: "state_id",
|
||||
header: t("RefahiLoanManagement.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<LoanStateRefahiProvider>
|
||||
<DataTable
|
||||
tableUrl={GET_LOAN_MANAGEMENT_REFAHI}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
// CustomToolbar={<TableToolbar />}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</LoanStateRefahiProvider>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardRefahiLoanManagementComponent;
|
||||
Reference in New Issue
Block a user