loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

debug confirm and reject fom

Browse Source
This commit is contained in:
Amin Ghasempoor
2023-08-08 15:21:35 +03:30
parent d7196c7b8d
commit ac33d3f861
16 changed files with 1031 additions and 1095 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
View File

@@ -1,60 +1,77 @@
import {CONFIRM_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
Stack,
TextField, Typography,
TextField,
Tooltip,
Typography
} from "@mui/material";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {useFormik} from "formik";
import * as Yup from "yup";
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import axios from "axios";
import {useFormik} from "formik";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import Notifications from "@/core/components/notifications";
import {CONFIRM_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
import * as Yup from "yup";
const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
const Confirm = ({rowId, fetchUrl, mutate}) => {
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
//formik
const validationSchema = Yup.object().shape({
proposed_amount: Yup.string().required(t("ConfirmDialog.amount_error")),
});
})
const formik = useFormik({
initialValues: {
proposed_amount: "",
description: "",
proposed_amount: "",
confirm_img: ""
},
validationSchema,
onSubmit: () => {
onSubmit: (values) => {
const formData = new FormData();
formData.append("proposed_amount", proposedAmount);
if (description != "") formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_MACHINARY_OFFICE, rowId, formData);
formData.append("proposed_amount", values.proposed_amount);
if (values.description != "") formData.append("expert_description", values.description);
Notifications(directionApp, t, undefined)
axios
.post(`${CONFIRM_MACHINARY_OFFICE}/${rowId}`, formData, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
formik.setSubmitting(false)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
formik.setSubmitting(false)
});
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.setFieldValue("description", event.target.value)
};
const handleAmountChange = (event) => {
if (/^\d*$/.test(event.target.value)) {
setProposedAmount(event.target.value);
formik.setFieldValue("proposed_amount", event.target.value);
}
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
@@ -64,6 +81,7 @@ const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
@@ -74,78 +92,92 @@ const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
}
};
return (
<Dialog fullWidth open={open}
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("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</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("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<TextField
name="proposed_amount"
label={<>
<span>{t("ConfirmDialog.proposed_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
type="number"
inputProps={{
min: 0,
inputMode: "numeric",
pattern: "[0-9]*",
}}
variant="outlined"
value={formik.values.proposed_amount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("proposed_amount")}
error={
formik.touched.proposed_amount &&
Boolean(formik.errors.proposed_amount)
}
helperText={
formik.touched.proposed_amount && formik.errors.proposed_amount
}
sx={{mt: 1}}
fullWidth
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
<Stack>
<TextField
name="proposed_amount"
label={<>
<span>{t("ConfirmDialog.proposed_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
type="number"
inputProps={{
min: 0,
inputMode: "numeric",
pattern: "[0-9]*",
}}
variant="outlined"
value={proposedAmount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("proposed_amount")}
error={
formik.touched.proposed_amount &&
Boolean(formik.errors.proposed_amount)
}
helperText={
formik.touched.proposed_amount && formik.errors.proposed_amount
}
sx={{mt: 1}}
fullWidth
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="outlined" color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default ConfirmForm;
export default Confirm;

154
src/components/dashboard/machinary-office/Form/RejectForm.jsx
View File

@@ -4,10 +4,12 @@ import {
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Stack,
TextField, Typography,
TextField,
Tooltip,
Typography,
} from "@mui/material";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
@@ -16,15 +18,20 @@ import {useState} from "react";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import Notifications from "@/core/components/notifications";
import axios from "axios";
import useUser from "@/lib/app/hooks/useUser";
const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const Reject = ({rowId, fetchUrl, mutate}) => {
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -33,21 +40,33 @@ const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const formik = useFormik({
initialValues: {
description: "",
reject_img: ""
},
validationSchema,
onSubmit: () => {
onSubmit: (values) => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_MACHINARY_OFFICE, rowId, formData);
formData.append("expert_description", values.description);
Notifications(directionApp, t, undefined)
axios
.post(`${REJECT_MACHINARY_OFFICE}/${rowId}`, formData, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
formik.setSubmitting(false)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
formik.setSubmitting(false)
});
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.setFieldValue("description", event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
@@ -66,59 +85,66 @@ const RejectForm = ({open, handleClose, rowId, rejectData}) => {
setShowAddIcon(false);
}
};
return (
<Dialog fullWidth open={open}
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("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
<Dialog fullWidth open={openRejectDialog}
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("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={t("RejectDialog.description")}
value={formik.values.description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="outlined" color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default RejectForm;
export default Reject;

89
src/components/dashboard/machinary-office/TableRowActions.jsx
View File

@@ -1,94 +1,23 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import {Box, IconButton, Tooltip} from "@mui/material";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import {useTranslations} from "next-intl";
import {useCallback, useState} from "react";
import axios from "axios";
import Notifications from "@/core/components/notifications";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import {Box} from "@mui/material";
import ConfirmForm from "./Form/ConfirmForm"
import RejectForm from "./Form/RejectForm"
const TableRowActions = ({row, mutate, fetchUrl}) => {
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
// Confirm
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
const confirmData = useCallback((url, rowID, values) => {
Notifications(directionApp, t, undefined)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Confirm
// Reject
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
const rejectData = useCallback((url, rowID, values) => {
Notifications(directionApp, t)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Reject
const TableRow = ({row, mutate, fetchUrl}) => {
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
<ConfirmForm
rowId={row.getValue("id")}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
mutate={mutate}
fetchUrl={fetchUrl}
/>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
<RejectForm
rowId={row.getValue("id")}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
fetchUrl={fetchUrl}
mutate={mutate}
/>
</Box>
);
};
export default TableRowActions;
export default TableRow;

219
src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
View File

@@ -1,33 +1,38 @@
import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Stack,
TextField, Typography,
TextField,
Tooltip,
Typography
} from "@mui/material";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {useFormik} from "formik";
import * as Yup from "yup";
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import axios from "axios";
import {useFormik} from "formik";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import Notifications from "@/core/components/notifications";
import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes";
import * as Yup from "yup";
const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
const Confirm = ({rowId, fetchUrl, mutate}) => {
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
const [approvedAmount, setApprovedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
//formik
const validationSchema = Yup.object().shape({
approved_amount: Yup.string().required(
t("ConfirmDialog.approved_amount_error")
@@ -35,27 +40,39 @@ const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
});
const formik = useFormik({
initialValues: {
approved_amount: "",
description: "",
approved_amount: "",
confirm_img: ""
},
validationSchema,
onSubmit: () => {
onSubmit: (values) => {
const formData = new FormData();
formData.append("approved_amount", approvedAmount);
if (description != "") formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_PASSENGER_BOSS, rowId, formData);
formData.append("approved_amount", values.approved_amount);
if (values.description != "") formData.append("expert_description", values.description);
Notifications(directionApp, t, undefined)
axios
.post(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, formData, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
formik.setSubmitting(false)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
formik.setSubmitting(false)
});
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.setFieldValue("description", event.target.value)
};
const handleAmountChange = (event) => {
if (/^\d*$/.test(event.target.value)) {
setApprovedAmount(event.target.value);
formik.setFieldValue("approved_amount", event.target.value);
}
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
@@ -66,6 +83,7 @@ const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
@@ -75,80 +93,93 @@ const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
setShowAddIcon(false);
}
};
return (
<Dialog fullWidth open={open}
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("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</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("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<TextField
name="approved_amount"
label={<>
<span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
type="number"
inputProps={{
min: 0,
inputMode: "numeric",
pattern: "[0-9]*",
}}
variant="outlined"
value={formik.values.approved_amount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("approved_amount")}
error={
formik.touched.approved_amount &&
Boolean(formik.errors.approved_amount)
}
helperText={
formik.touched.approved_amount && formik.errors.approved_amount
}
sx={{mt: 1}}
fullWidth
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
<Stack>
<TextField
name="approved_amount"
label={<>
<span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
type="number"
inputProps={{
min: 0,
inputMode: "numeric",
pattern: "[0-9]*",
}}
variant="outlined"
value={approvedAmount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("approved_amount")}
error={
formik.touched.approved_amount &&
Boolean(formik.errors.approved_amount)
}
helperText={
formik.touched.approved_amount && formik.errors.approved_amount
}
sx={{mt: 1}}
fullWidth
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="outlined" color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default ConfirmForm;
export default Confirm;

154
src/components/dashboard/passenger-boss/Form/RejectForm.jsx
View File

@@ -4,10 +4,12 @@ import {
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Stack,
TextField, Typography,
TextField,
Tooltip,
Typography,
} from "@mui/material";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
@@ -16,15 +18,20 @@ import {useState} from "react";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import Notifications from "@/core/components/notifications";
import axios from "axios";
import useUser from "@/lib/app/hooks/useUser";
const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const Reject = ({rowId, fetchUrl, mutate}) => {
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -33,21 +40,33 @@ const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const formik = useFormik({
initialValues: {
description: "",
reject_img: ""
},
validationSchema,
onSubmit: () => {
onSubmit: (values) => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_PASSENGER_BOSS, rowId, formData);
formData.append("expert_description", values.description);
Notifications(directionApp, t, undefined)
axios
.post(`${REJECT_PASSENGER_BOSS}/${rowId}`, formData, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
formik.setSubmitting(false)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
formik.setSubmitting(false)
});
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.setFieldValue("description", event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
@@ -66,59 +85,66 @@ const RejectForm = ({open, handleClose, rowId, rejectData}) => {
setShowAddIcon(false);
}
};
return (
<Dialog fullWidth open={open}
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("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
<Dialog fullWidth open={openRejectDialog}
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("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={t("RejectDialog.description")}
value={formik.values.description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="outlined" color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default RejectForm;
export default Reject;

89
src/components/dashboard/passenger-boss/TableRowActions.jsx
View File

@@ -1,94 +1,23 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useCallback, useState} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import {useTranslations} from "next-intl";
import Notifications from "@/core/components/notifications";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import axios from "axios";
import {Box} from "@mui/material";
import ConfirmForm from "./Form/ConfirmForm"
import RejectForm from "./Form/RejectForm"
const TableRowActions = ({row, mutate, fetchUrl}) => {
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
// Confirm
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
const confirmData = useCallback((url, rowID, values) => {
Notifications(directionApp, t, undefined)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Confirm
// Reject
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
const rejectData = useCallback((url, rowID, values) => {
Notifications(directionApp, t)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Reject
const TableRow = ({row, mutate, fetchUrl}) => {
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
<ConfirmForm
rowId={row.getValue("id")}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
mutate={mutate}
fetchUrl={fetchUrl}
/>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
<RejectForm
rowId={row.getValue("id")}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
fetchUrl={fetchUrl}
mutate={mutate}
/>
</Box>
);
};
export default TableRowActions;
export default TableRow;

163
src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
View File

@@ -1,48 +1,65 @@
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import {CONFIRM_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Stack,
TextField, Typography,
TextField,
Tooltip,
Typography
} from "@mui/material";
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import UploadSystem from "@/core/components/UploadSystem";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import axios from "axios";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {useState} from "react";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import Notifications from "@/core/components/notifications";
import {CONFIRM_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
const Confirm = ({rowId, fetchUrl, mutate}) => {
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const formik = useFormik({
initialValues: {
description: "",
confirm_img: ""
},
onSubmit: () => {
onSubmit: (values) => {
const formData = new FormData();
if (description !== "")
formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_PASSENGER_OFFICE, rowId, formData);
if (values.description != "") formData.append("expert_description", values.description);
Notifications(directionApp, t, undefined)
axios
.post(`${CONFIRM_PASSENGER_OFFICE}/${rowId}`, formData, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
formik.setSubmitting(false)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
formik.setSubmitting(false)
});
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
formik.setFieldValue("description", event.target.value)
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
@@ -52,6 +69,7 @@ const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
@@ -61,56 +79,67 @@ const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
setShowAddIcon(false);
}
};
return (
<Dialog fullWidth open={open}
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("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</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("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="outlined" color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default ConfirmForm;
export default Confirm;

152
src/components/dashboard/passenger-office/Form/RejectForm.jsx
View File

@@ -4,10 +4,12 @@ import {
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Stack,
TextField, Typography,
TextField,
Tooltip,
Typography,
} from "@mui/material";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
@@ -16,15 +18,20 @@ import {useState} from "react";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import Notifications from "@/core/components/notifications";
import axios from "axios";
import useUser from "@/lib/app/hooks/useUser";
const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const Reject = ({rowId, fetchUrl, mutate}) => {
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -33,18 +40,31 @@ const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const formik = useFormik({
initialValues: {
description: "",
reject_img: ""
},
validationSchema,
onSubmit: () => {
onSubmit: (values) => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_PASSENGER_OFFICE, rowId, formData);
formData.append("expert_description", values.description);
Notifications(directionApp, t, undefined)
axios
.post(`${REJECT_PASSENGER_OFFICE}/${rowId}`, formData, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
formik.setSubmitting(false)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
formik.setSubmitting(false)
});
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.setFieldValue("description", event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
@@ -66,57 +86,65 @@ const RejectForm = ({open, handleClose, rowId, rejectData}) => {
}
};
return (
<Dialog fullWidth open={open}
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("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
<Dialog fullWidth open={openRejectDialog}
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("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={t("RejectDialog.description")}
value={formik.values.description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="outlined" color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default RejectForm;
export default Reject;

89
src/components/dashboard/passenger-office/TableRowActions.jsx
View File

@@ -1,94 +1,23 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useCallback, useState} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import {useTranslations} from "next-intl";
import axios from "axios";
import Notifications from "@/core/components/notifications";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import {Box} from "@mui/material";
import ConfirmForm from "./Form/ConfirmForm"
import RejectForm from "./Form/RejectForm"
const TableRowActions = ({row, mutate, fetchUrl}) => {
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
// Confirm
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
const confirmData = useCallback((url, rowID, values) => {
Notifications(directionApp, t, undefined)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Confirm
// Reject
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
const rejectData = useCallback((url, rowID, values) => {
Notifications(directionApp, t)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Reject
const TableRow = ({row, mutate, fetchUrl}) => {
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
<ConfirmForm
rowId={row.getValue("id")}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
mutate={mutate}
fetchUrl={fetchUrl}
/>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
<RejectForm
rowId={row.getValue("id")}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
fetchUrl={fetchUrl}
mutate={mutate}
/>
</Box>
);
};
export default TableRowActions;
export default TableRow;

163
src/components/dashboard/province-manager/Form/ConfirmForm.jsx
View File

@@ -1,48 +1,65 @@
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import {CONFIRM_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Stack,
TextField, Typography,
TextField,
Tooltip,
Typography
} from "@mui/material";
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import UploadSystem from "@/core/components/UploadSystem";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import axios from "axios";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {useState} from "react";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import Notifications from "@/core/components/notifications";
import {CONFIRM_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
const Confirm = ({rowId, fetchUrl, mutate}) => {
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const formik = useFormik({
initialValues: {
description: "",
confirm_img: ""
},
onSubmit: () => {
onSubmit: (values) => {
const formData = new FormData();
if (description !== "")
formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_PROVINCE_MANAGER, rowId, formData);
if (values.description != "") formData.append("expert_description", values.description);
Notifications(directionApp, t, undefined)
axios
.post(`${CONFIRM_PROVINCE_MANAGER}/${rowId}`, formData, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
formik.setSubmitting(false)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
formik.setSubmitting(false)
});
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
formik.setFieldValue("description", event.target.value)
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
@@ -52,6 +69,7 @@ const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
event.target.value = "";
return;
}
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
@@ -61,56 +79,67 @@ const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
setShowAddIcon(false);
}
};
return (
<Dialog fullWidth open={open}
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("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</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("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="outlined" color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default ConfirmForm;
export default Confirm;

153
src/components/dashboard/province-manager/Form/RejectForm.jsx
View File

@@ -4,10 +4,12 @@ import {
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Stack,
TextField, Typography,
TextField,
Tooltip,
Typography,
} from "@mui/material";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
@@ -16,15 +18,20 @@ import {useState} from "react";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import Notifications from "@/core/components/notifications";
import axios from "axios";
import useUser from "@/lib/app/hooks/useUser";
const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const t = useTranslations();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const Reject = ({rowId, fetchUrl, mutate}) => {
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -33,18 +40,31 @@ const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const formik = useFormik({
initialValues: {
description: "",
reject_img: ""
},
validationSchema,
onSubmit: () => {
onSubmit: (values) => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_PROVINCE_MANAGER, rowId, formData);
formData.append("expert_description", values.description);
Notifications(directionApp, t, undefined)
axios
.post(`${REJECT_PROVINCE_MANAGER}/${rowId}`, formData, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
formik.setSubmitting(false)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
formik.setSubmitting(false)
});
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.setFieldValue("description", event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
@@ -65,59 +85,66 @@ const RejectForm = ({open, handleClose, rowId, rejectData}) => {
setShowAddIcon(false);
}
};
return (
<Dialog fullWidth open={open}
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("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
<Dialog fullWidth open={openRejectDialog}
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("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={t("RejectDialog.description")}
value={formik.values.description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="outlined" color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default RejectForm;
export default Reject;

89
src/components/dashboard/province-manager/TableRowActions.jsx
View File

@@ -1,94 +1,23 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useCallback, useState} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import {useTranslations} from "next-intl";
import Notifications from "@/core/components/notifications";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import axios from "axios";
import {Box} from "@mui/material";
import ConfirmForm from "./Form/ConfirmForm"
import RejectForm from "./Form/RejectForm"
const TableRowActions = ({row, mutate, fetchUrl}) => {
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
// Confirm
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
const confirmData = useCallback((url, rowID, values) => {
Notifications(directionApp, t, undefined)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Confirm
// Reject
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
const rejectData = useCallback((url, rowID, values) => {
Notifications(directionApp, t)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Reject
const TableRow = ({row, mutate, fetchUrl}) => {
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
<ConfirmForm
rowId={row.getValue("id")}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
mutate={mutate}
fetchUrl={fetchUrl}
/>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
<RejectForm
rowId={row.getValue("id")}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
fetchUrl={fetchUrl}
mutate={mutate}
/>
</Box>
);
};
export default TableRowActions;
export default TableRow;

154
src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx
View File

@@ -1,44 +1,64 @@
import UploadSystem from "@/core/components/UploadSystem";
import {CONFIRM_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Stack,
TextField, Typography,
TextField,
Tooltip,
Typography
} from "@mui/material";
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import UploadSystem from "@/core/components/UploadSystem";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import axios from "axios";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {useState} from "react";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import Notifications from "@/core/components/notifications";
import {CONFIRM_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
const Confirm = ({rowId, fetchUrl, mutate}) => {
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const formik = useFormik({
initialValues: {
description: "",
confirm_img: ""
},
onSubmit: () => {
onSubmit: (values) => {
const formData = new FormData();
if (description != "") formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_TRANSPORTATION_ASSISTANCE, rowId, formData);
if (values.description != "") formData.append("expert_description", values.description);
Notifications(directionApp, t, undefined)
axios
.post(`${CONFIRM_TRANSPORTATION_ASSISTANCE}/${rowId}`, formData, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
formik.setSubmitting(false)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
formik.setSubmitting(false)
});
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.setFieldValue("description", event.target.value)
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
@@ -60,52 +80,66 @@ const ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
}
};
return (
<Dialog fullWidth open={open}
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("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</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("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="outlined" color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default ConfirmForm;
export default Confirm;

147
src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
View File

@@ -4,10 +4,12 @@ import {
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Stack,
TextField, Typography,
TextField,
Tooltip,
Typography,
} from "@mui/material";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
@@ -16,15 +18,20 @@ import {useState} from "react";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import Notifications from "@/core/components/notifications";
import axios from "axios";
import useUser from "@/lib/app/hooks/useUser";
const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const [description, setDescription] = useState("");
const Reject = ({rowId, fetchUrl, mutate}) => {
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -33,18 +40,31 @@ const RejectForm = ({open, handleClose, rowId, rejectData}) => {
const formik = useFormik({
initialValues: {
description: "",
reject_img: ""
},
validationSchema,
onSubmit: () => {
onSubmit: (values) => {
const formData = new FormData();
formData.append("expert_description", description);
handleClose();
rejectData(REJECT_TRANSPORTATION_ASSISTANCE, rowId, formData);
formData.append("expert_description", values.description);
Notifications(directionApp, t, undefined)
axios
.post(`${REJECT_TRANSPORTATION_ASSISTANCE}/${rowId}`, formData, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
formik.setSubmitting(false)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
formik.setSubmitting(false)
});
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.setFieldValue("description", event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
@@ -66,56 +86,65 @@ const RejectForm = ({open, handleClose, rowId, rejectData}) => {
}
};
return (
<Dialog fullWidth open={open}
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("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={t("RejectDialog.description")}
value={description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
<>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
<Dialog fullWidth open={openRejectDialog}
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("RejectDialog.reject")}</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={t("RejectDialog.description")}
value={formik.values.description}
onChange={handleDescriptionChange}
onBlur={formik.handleBlur("description")}
error={
formik.touched.description && Boolean(formik.errors.description)
}
helperText={formik.touched.description && formik.errors.description}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="outlined" color="secondary" autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary">
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("RejectDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("RejectDialog.button-reject")}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default RejectForm;
export default Reject;

89
src/components/dashboard/transportation-assistance/TableRowActions.jsx
View File

@@ -1,94 +1,23 @@
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import {Box, IconButton, Tooltip} from "@mui/material";
import {useCallback, useState} from "react";
import ConfirmForm from "./Form/ConfirmForm";
import RejectForm from "./Form/RejectForm";
import {useTranslations} from "next-intl";
import Notifications from "@/core/components/notifications";
import useUser from "@/lib/app/hooks/useUser";
import useDirection from "@/lib/app/hooks/useDirection";
import axios from "axios";
import {Box} from "@mui/material";
import ConfirmForm from "./Form/ConfirmForm"
import RejectForm from "./Form/RejectForm"
const TableRowActions = ({row, mutate, fetchUrl}) => {
const t = useTranslations();
const {token} = useUser();
const {directionApp} = useDirection();
// Confirm
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const handleCloseConfirmDialog = () => {
setOpenConfirmDialog(false);
};
const confirmData = useCallback((url, rowID, values) => {
Notifications(directionApp, t, undefined)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Confirm
// Reject
const [openRejectDialog, setOpenRejectDialog] = useState(false);
const handleCloseRejectDialog = () => {
setOpenRejectDialog(false);
};
const rejectData = useCallback((url, rowID, values) => {
Notifications(directionApp, t)
axios
.post(`${url}/${rowID}`, values, {
headers: {authorization: `Bearer ${token}`},
})
.then((response) => {
Notifications(directionApp, t, response);
mutate(fetchUrl)
})
.catch((error) => {
Notifications(directionApp, t, error.response);
});
}, []);
// End Reject
const TableRow = ({row, mutate, fetchUrl}) => {
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Tooltip title={t("ConfirmDialog.confirm")}>
<IconButton
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<ThumbUpAltIcon/>
</IconButton>
</Tooltip>
<ConfirmForm
rowId={row.getValue("id")}
open={openConfirmDialog}
handleClose={handleCloseConfirmDialog}
confirmData={confirmData}
mutate={mutate}
fetchUrl={fetchUrl}
/>
<Tooltip title={t("RejectDialog.reject")}>
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
<ThumbDownIcon/>
</IconButton>
</Tooltip>
<RejectForm
rowId={row.getValue("id")}
open={openRejectDialog}
handleClose={handleCloseRejectDialog}
rejectData={rejectData}
fetchUrl={fetchUrl}
mutate={mutate}
/>
</Box>
);
};
export default TableRowActions;
export default TableRow;

2
src/components/dashboard/transportation-assistance/index.jsx
View File

@@ -225,7 +225,7 @@ function DashboardTransportationAssistanceComponent() {
enableHiding={true}
enableFullScreenToggle={false}
enableGlobalFilter={false}
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
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}
/>