recode and add editor config file
This commit is contained in:
Amirhossein Mahmoodi
@@ -1,184 +1,177 @@
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {
|
||||
Button,
|
||||
Typography,
|
||||
Stack,
|
||||
Paper,
|
||||
Container,
|
||||
Box,
|
||||
} from "@mui/material";
|
||||
import {Box, Button, Container, Paper, Stack, Typography,} from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import { Formik } from "formik";
|
||||
import {Formik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {useTranslations} from "next-intl";
|
||||
import PasswordField from "@/core/components/PasswordField";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { CHANGE_PASSWORD } from "@/core/data/apiRoutes";
|
||||
import {CHANGE_PASSWORD} from "@/core/data/apiRoutes";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import axios from "axios";
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import { toast } from "react-toastify";
|
||||
import {toast} from "react-toastify";
|
||||
|
||||
const DashboardChangePasswordComponent = () => {
|
||||
const t = useTranslations();
|
||||
const { token } = useUser();
|
||||
const { directionApp } = useDirection();
|
||||
const t = useTranslations();
|
||||
const {token} = useUser();
|
||||
const {directionApp} = useDirection();
|
||||
|
||||
const handleSubmit = (values, { setSubmitting, resetForm }) => {
|
||||
toast.dismiss();
|
||||
const pendingToast = toast(t("notifications.pending"), {
|
||||
position: directionApp === "ltr" ? "top-left" : "top-right",
|
||||
autoClose: false,
|
||||
closeOnClick: false,
|
||||
draggable: false,
|
||||
const handleSubmit = (values, {setSubmitting, resetForm}) => {
|
||||
toast.dismiss();
|
||||
const pendingToast = toast(t("notifications.pending"), {
|
||||
position: directionApp === "ltr" ? "top-left" : "top-right",
|
||||
autoClose: false,
|
||||
closeOnClick: false,
|
||||
draggable: false,
|
||||
});
|
||||
axios
|
||||
.post(
|
||||
CHANGE_PASSWORD,
|
||||
{
|
||||
current_password: values.current_password,
|
||||
new_password: values.new_password,
|
||||
new_password_confirmation: values.new_password_confirmation,
|
||||
},
|
||||
{
|
||||
headers: {authorization: `Bearer ${token}`},
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
toast.dismiss(pendingToast); // Dismiss the pending toast notification
|
||||
Notifications(directionApp, response, t);
|
||||
resetForm();
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.dismiss(pendingToast); // Dismiss the pending toast notification
|
||||
Notifications(directionApp, error.response, t);
|
||||
})
|
||||
.finally(() => {
|
||||
setSubmitting(false); // Set `setSubmitting` to false after the API request completes
|
||||
});
|
||||
};
|
||||
const initialValues = {
|
||||
current_password: "",
|
||||
new_password: "",
|
||||
new_password_confirmation: "",
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
current_password: Yup.string().required(
|
||||
t("ChangePassword.error_message_required")
|
||||
),
|
||||
new_password: Yup.string()
|
||||
.min(8, t("ChangePassword.error_message_password_length"))
|
||||
.required(t("ChangePassword.error_message_required")),
|
||||
new_password_confirmation: Yup.string()
|
||||
.required(t("ChangePassword.error_message_required"))
|
||||
.test(
|
||||
t("ChangePassword.error_message_password_match"),
|
||||
t("ChangePassword.error_message_password_not_match"),
|
||||
function (value) {
|
||||
return this.parent.new_password === value;
|
||||
}
|
||||
),
|
||||
});
|
||||
axios
|
||||
.post(
|
||||
CHANGE_PASSWORD,
|
||||
{
|
||||
current_password: values.current_password,
|
||||
new_password: values.new_password,
|
||||
new_password_confirmation: values.new_password_confirmation,
|
||||
},
|
||||
{
|
||||
headers: { authorization: `Bearer ${token}` },
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
toast.dismiss(pendingToast); // Dismiss the pending toast notification
|
||||
Notifications(directionApp, response, t);
|
||||
resetForm();
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.dismiss(pendingToast); // Dismiss the pending toast notification
|
||||
Notifications(directionApp, error.response, t);
|
||||
})
|
||||
.finally(() => {
|
||||
setSubmitting(false); // Set `setSubmitting` to false after the API request completes
|
||||
});
|
||||
};
|
||||
const initialValues = {
|
||||
current_password: "",
|
||||
new_password: "",
|
||||
new_password_confirmation: "",
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
current_password: Yup.string().required(
|
||||
t("ChangePassword.error_message_required")
|
||||
),
|
||||
new_password: Yup.string()
|
||||
.min(8, t("ChangePassword.error_message_password_length"))
|
||||
.required(t("ChangePassword.error_message_required")),
|
||||
new_password_confirmation: Yup.string()
|
||||
.required(t("ChangePassword.error_message_required"))
|
||||
.test(
|
||||
t("ChangePassword.error_message_password_match"),
|
||||
t("ChangePassword.error_message_password_not_match"),
|
||||
function (value) {
|
||||
return this.parent.new_password === value;
|
||||
}
|
||||
),
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<StyledForm
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
props.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<Paper elevation={0}>
|
||||
<Stack spacing={3} sx={{ p: 5 }} component="div">
|
||||
<Box
|
||||
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
<Image fill src="/images/change-password.svg" alt="" />
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("ChangePassword.typography_change_password")}
|
||||
</Typography>
|
||||
<Stack spacing={1} component="div">
|
||||
<PasswordField
|
||||
name="current_password"
|
||||
label={t("ChangePassword.label_current_password")}
|
||||
error={
|
||||
props.touched.current_password &&
|
||||
props.errors.current_password
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.current_password
|
||||
? props.errors.current_password
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack spacing={1} component="div">
|
||||
<PasswordField
|
||||
name="new_password"
|
||||
label={t("ChangePassword.label_new_password")}
|
||||
error={
|
||||
props.touched.new_password &&
|
||||
props.errors.new_password
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.new_password
|
||||
? props.errors.new_password
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack spacing={1} component="div">
|
||||
<PasswordField
|
||||
name="new_password_confirmation"
|
||||
label={t("ChangePassword.label_confirm_password")}
|
||||
error={
|
||||
props.touched.new_password_confirmation &&
|
||||
props.errors.new_password_confirmation
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.new_password_confirmation
|
||||
? props.errors.new_password_confirmation
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{props.isSubmitting
|
||||
? t("SubmitButton.button_while_submit")
|
||||
: t("SubmitButton.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</StyledForm>
|
||||
)}
|
||||
</Formik>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
{(props) => (
|
||||
<StyledForm
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
props.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<Paper elevation={0}>
|
||||
<Stack spacing={3} sx={{p: 5}} component="div">
|
||||
<Box
|
||||
sx={{position: "relative", width: "100%", height: 200}}
|
||||
>
|
||||
<Image fill src="/images/change-password.svg" alt=""/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("ChangePassword.typography_change_password")}
|
||||
</Typography>
|
||||
<Stack spacing={1} component="div">
|
||||
<PasswordField
|
||||
name="current_password"
|
||||
label={t("ChangePassword.label_current_password")}
|
||||
error={
|
||||
props.touched.current_password &&
|
||||
props.errors.current_password
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.current_password
|
||||
? props.errors.current_password
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack spacing={1} component="div">
|
||||
<PasswordField
|
||||
name="new_password"
|
||||
label={t("ChangePassword.label_new_password")}
|
||||
error={
|
||||
props.touched.new_password &&
|
||||
props.errors.new_password
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.new_password
|
||||
? props.errors.new_password
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack spacing={1} component="div">
|
||||
<PasswordField
|
||||
name="new_password_confirmation"
|
||||
label={t("ChangePassword.label_confirm_password")}
|
||||
error={
|
||||
props.touched.new_password_confirmation &&
|
||||
props.errors.new_password_confirmation
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.new_password_confirmation
|
||||
? props.errors.new_password_confirmation
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{props.isSubmitting
|
||||
? t("SubmitButton.button_while_submit")
|
||||
: t("SubmitButton.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</StyledForm>
|
||||
)}
|
||||
</Formik>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
};
|
||||
export default DashboardChangePasswordComponent;
|
||||
|
||||
@@ -2,277 +2,268 @@ import StyledForm from "@/core/components/StyledForm";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Grid,
|
||||
Paper,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {Box, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import * as Yup from "yup";
|
||||
import { Field, Formik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import AvatarUpload from "@/core/components/AvatarUpload";
|
||||
import axios from "axios";
|
||||
import { UPDATE_PROFILE, UPDATE_AVATAR } from "@/core/data/apiRoutes";
|
||||
import {UPDATE_AVATAR} from "@/core/data/apiRoutes";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import ImageResizer from "@/core/components/ImageConvertor";
|
||||
|
||||
const DashboardEditProfile = () => {
|
||||
const t = useTranslations();
|
||||
const { user, token, getUser, changeUser } = useUser();
|
||||
console.log(user);
|
||||
const { directionApp } = useDirection();
|
||||
const t = useTranslations();
|
||||
const {user, token, getUser, changeUser} = useUser();
|
||||
console.log(user);
|
||||
const {directionApp} = useDirection();
|
||||
|
||||
const editAvatar = async (avatar) => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
const editAvatar = async (avatar) => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
|
||||
if (avatar != null) {
|
||||
var resizedAvatar;
|
||||
resizedAvatar = await ImageResizer(avatar);
|
||||
formData.append("avatar", resizedAvatar);
|
||||
}
|
||||
if (avatar != null) {
|
||||
var resizedAvatar;
|
||||
resizedAvatar = await ImageResizer(avatar);
|
||||
formData.append("avatar", resizedAvatar);
|
||||
}
|
||||
|
||||
await axios.post(UPDATE_AVATAR, formData, {
|
||||
headers: {
|
||||
authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
Notifications(directionApp, error.response, t);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const handleSubmit = (values, { setSubmitting }) => {
|
||||
// const formData = new FormData();
|
||||
// formData.append("email", values.expert_email);
|
||||
// if (values.change_avatar !== false) {
|
||||
// editAvatar(values.expert_avatar)
|
||||
// .then(() => {
|
||||
// return axios.post(UPDATE_PROFILE, formData, {
|
||||
// headers: {
|
||||
// authorization: `Bearer ${token}`,
|
||||
// "Content-Type": "multipart/form-data",
|
||||
// },
|
||||
// });
|
||||
// })
|
||||
// .then((response) => {
|
||||
// Notifications(directionApp, response, t);
|
||||
// getUser((data) => {
|
||||
// changeUser(data);
|
||||
// });
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// Notifications(directionApp, error.response, t);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// setSubmitting(false);
|
||||
// });
|
||||
// } else {
|
||||
// axios
|
||||
// .post(UPDATE_PROFILE, formData, {
|
||||
// headers: {
|
||||
// authorization: `Bearer ${token}`,
|
||||
// "Content-Type": "multipart/form-data",
|
||||
// },
|
||||
// })
|
||||
// .then((response) => {
|
||||
// Notifications(directionApp, response, t);
|
||||
// getUser((data) => {
|
||||
// changeUser(data);
|
||||
// });
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// Notifications(directionApp, error.response, t);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// setSubmitting(false);
|
||||
// });
|
||||
// }
|
||||
};
|
||||
const initialValues = {
|
||||
expert_avatar: null,
|
||||
username: user.username,
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
province_name: user.province_name,
|
||||
position: user.position,
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
// username: Yup.string().required(t("UpdateProfile.error_message_required")),
|
||||
// name: Yup.string().required(t("UpdateProfile.error_message_required")),
|
||||
// email: Yup.string()
|
||||
// .email(t("UpdateProfile.error_invalid_email"))
|
||||
// .required(t("UpdateProfile.error_message_required")),
|
||||
// province_name: Yup.string().required(
|
||||
// t("UpdateProfile.error_message_required")
|
||||
// ),
|
||||
// position: Yup.string().required(t("UpdateProfile.error_message_required")),
|
||||
});
|
||||
await axios.post(UPDATE_AVATAR, formData, {
|
||||
headers: {
|
||||
authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
Notifications(directionApp, error.response, t);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const handleSubmit = (values, {setSubmitting}) => {
|
||||
// const formData = new FormData();
|
||||
// formData.append("email", values.expert_email);
|
||||
// if (values.change_avatar !== false) {
|
||||
// editAvatar(values.expert_avatar)
|
||||
// .then(() => {
|
||||
// return axios.post(UPDATE_PROFILE, formData, {
|
||||
// headers: {
|
||||
// authorization: `Bearer ${token}`,
|
||||
// "Content-Type": "multipart/form-data",
|
||||
// },
|
||||
// });
|
||||
// })
|
||||
// .then((response) => {
|
||||
// Notifications(directionApp, response, t);
|
||||
// getUser((data) => {
|
||||
// changeUser(data);
|
||||
// });
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// Notifications(directionApp, error.response, t);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// setSubmitting(false);
|
||||
// });
|
||||
// } else {
|
||||
// axios
|
||||
// .post(UPDATE_PROFILE, formData, {
|
||||
// headers: {
|
||||
// authorization: `Bearer ${token}`,
|
||||
// "Content-Type": "multipart/form-data",
|
||||
// },
|
||||
// })
|
||||
// .then((response) => {
|
||||
// Notifications(directionApp, response, t);
|
||||
// getUser((data) => {
|
||||
// changeUser(data);
|
||||
// });
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// Notifications(directionApp, error.response, t);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// setSubmitting(false);
|
||||
// });
|
||||
// }
|
||||
};
|
||||
const initialValues = {
|
||||
expert_avatar: null,
|
||||
username: user.username,
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
province_name: user.province_name,
|
||||
position: user.position,
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
// username: Yup.string().required(t("UpdateProfile.error_message_required")),
|
||||
// name: Yup.string().required(t("UpdateProfile.error_message_required")),
|
||||
// email: Yup.string()
|
||||
// .email(t("UpdateProfile.error_invalid_email"))
|
||||
// .required(t("UpdateProfile.error_message_required")),
|
||||
// province_name: Yup.string().required(
|
||||
// t("UpdateProfile.error_message_required")
|
||||
// ),
|
||||
// position: Yup.string().required(t("UpdateProfile.error_message_required")),
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<StyledForm
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
props.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<Paper elevation={0}>
|
||||
<Stack spacing={3} sx={{ p: 5 }} component="div">
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("UpdateProfile.typography_edit_profile")}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
<AvatarUpload
|
||||
user={user}
|
||||
setFieldValue={props.setFieldValue}
|
||||
valueAvatar="expert_avatar"
|
||||
changeFlag="change_avatar"
|
||||
/>
|
||||
</Box>
|
||||
<Grid container spacing={2} sx={{ pb: 2 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="username"
|
||||
label={t("UpdateProfile.text_field_username")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.username && props.errors.username
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.username
|
||||
? props.errors.username
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="name"
|
||||
label={t("UpdateProfile.text_field_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.name && props.errors.name
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.name ? props.errors.name : null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="email"
|
||||
label={t("UpdateProfile.text_field_email")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.email && props.errors.email
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.email ? props.errors.email : null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
{(props) => (
|
||||
<StyledForm
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
props.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<Paper elevation={0}>
|
||||
<Stack spacing={3} sx={{p: 5}} component="div">
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("UpdateProfile.typography_edit_profile")}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<AvatarUpload
|
||||
user={user}
|
||||
setFieldValue={props.setFieldValue}
|
||||
valueAvatar="expert_avatar"
|
||||
changeFlag="change_avatar"
|
||||
/>
|
||||
</Box>
|
||||
<Grid container spacing={2} sx={{pb: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="username"
|
||||
label={t("UpdateProfile.text_field_username")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.username && props.errors.username
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.username
|
||||
? props.errors.username
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="name"
|
||||
label={t("UpdateProfile.text_field_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.name && props.errors.name
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.name ? props.errors.name : null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="email"
|
||||
label={t("UpdateProfile.text_field_email")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.email && props.errors.email
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.email ? props.errors.email : null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="province_name"
|
||||
label={t("UpdateProfile.text_field_province_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.province_name &&
|
||||
props.errors.province_name
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.province_name
|
||||
? props.errors.province_name
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="position"
|
||||
label={t("UpdateProfile.text_field_position")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.position && props.errors.position
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.position
|
||||
? props.errors.position
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* <Button
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="province_name"
|
||||
label={t("UpdateProfile.text_field_province_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.province_name &&
|
||||
props.errors.province_name
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.province_name
|
||||
? props.errors.province_name
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="position"
|
||||
label={t("UpdateProfile.text_field_position")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.position && props.errors.position
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.position
|
||||
? props.errors.position
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* <Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
@@ -285,15 +276,15 @@ const DashboardEditProfile = () => {
|
||||
? t("SubmitButton.button_while_submit")
|
||||
: t("SubmitButton.button_submit")}
|
||||
</Button> */}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</StyledForm>
|
||||
)}
|
||||
</Formik>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
</Stack>
|
||||
</Paper>
|
||||
</StyledForm>
|
||||
)}
|
||||
</Formik>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardEditProfile;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
|
||||
const DashboardFirstComponent = () => {
|
||||
return <DashboardLayouts></DashboardLayouts>;
|
||||
return <DashboardLayouts></DashboardLayouts>;
|
||||
};
|
||||
|
||||
export default DashboardFirstComponent;
|
||||
|
||||
@@ -1,140 +1,132 @@
|
||||
import { CONFIRM_MACHINARY_OFFICE } from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import { useFormik } from "formik";
|
||||
import {CONFIRM_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
|
||||
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const t = useTranslations();
|
||||
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 ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
|
||||
const t = useTranslations();
|
||||
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);
|
||||
|
||||
//formik
|
||||
const validationSchema = Yup.object().shape({
|
||||
proposed_amount: Yup.string().required(t("ConfirmDialog.amount_error")),
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
proposed_amount: "",
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("proposed_amount", proposedAmount);
|
||||
if (description != "") formData.append("expert_description", description);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_MACHINARY_OFFICE, rowId, formData);
|
||||
},
|
||||
});
|
||||
//formik
|
||||
const validationSchema = Yup.object().shape({
|
||||
proposed_amount: Yup.string().required(t("ConfirmDialog.amount_error")),
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
proposed_amount: "",
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("proposed_amount", proposedAmount);
|
||||
if (description != "") formData.append("expert_description", description);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_MACHINARY_OFFICE, rowId, formData);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
};
|
||||
const handleAmountChange = (event) => {
|
||||
if (/^\d*$/.test(event.target.value)) {
|
||||
setProposedAmount(event.target.value);
|
||||
}
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
};
|
||||
const handleAmountChange = (event) => {
|
||||
if (/^\d*$/.test(event.target.value)) {
|
||||
setProposedAmount(event.target.value);
|
||||
}
|
||||
formik.handleChange(event);
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={t("ConfirmDialog.description")}
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
name="proposed_amount"
|
||||
label={t("ConfirmDialog.proposed_amount")}
|
||||
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
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={t("ConfirmDialog.description")}
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
<TextField
|
||||
name="proposed_amount"
|
||||
label={t("ConfirmDialog.proposed_amount")}
|
||||
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
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
export default ConfirmForm;
|
||||
|
||||
@@ -1,116 +1,108 @@
|
||||
import { REJECT_MACHINARY_OFFICE } from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useFormik } from "formik";
|
||||
import {REJECT_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
|
||||
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useState } from "react";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const t = useTranslations();
|
||||
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 RejectForm = ({open, handleClose, rowId, rejectData}) => {
|
||||
const t = useTranslations();
|
||||
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 validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
rejectData(REJECT_MACHINARY_OFFICE, rowId, formData);
|
||||
},
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
rejectData(REJECT_MACHINARY_OFFICE, rowId, formData);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={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 }}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={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}}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default RejectForm;
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import { Box, IconButton, Tooltip } from "@mui/material";
|
||||
import { useContext } from "react";
|
||||
import {Box, IconButton, Tooltip} from "@mui/material";
|
||||
import {useContext} from "react";
|
||||
import ConfirmForm from "./Form/ConfirmForm";
|
||||
import RejectForm from "./Form/RejectForm";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { DataTableContext } from "@/lib/app/contexts/DatatableContext";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
|
||||
|
||||
const TableRowActions = ({ row }) => {
|
||||
const t = useTranslations();
|
||||
const {
|
||||
openConfirmDialog,
|
||||
openRejectDialog,
|
||||
handleOpenConfirmDialog,
|
||||
handleOpenRejectDialog,
|
||||
handleCloseConfirmDialog,
|
||||
handleCloseRejectDialog,
|
||||
rowId,
|
||||
confirmData,
|
||||
rejectData,
|
||||
} = useContext(DataTableContext);
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
handleOpenConfirmDialog(row);
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openConfirmDialog && (
|
||||
<ConfirmForm
|
||||
rowId={rowId}
|
||||
open={openConfirmDialog}
|
||||
handleClose={handleCloseConfirmDialog}
|
||||
confirmData={confirmData}
|
||||
/>
|
||||
)}
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
|
||||
<ThumbDownIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openRejectDialog && (
|
||||
<RejectForm
|
||||
rowId={rowId}
|
||||
open={openRejectDialog}
|
||||
handleClose={handleCloseRejectDialog}
|
||||
rejectData={rejectData}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
const TableRowActions = ({row}) => {
|
||||
const t = useTranslations();
|
||||
const {
|
||||
openConfirmDialog,
|
||||
openRejectDialog,
|
||||
handleOpenConfirmDialog,
|
||||
handleOpenRejectDialog,
|
||||
handleCloseConfirmDialog,
|
||||
handleCloseRejectDialog,
|
||||
rowId,
|
||||
confirmData,
|
||||
rejectData,
|
||||
} = useContext(DataTableContext);
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
handleOpenConfirmDialog(row);
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openConfirmDialog && (
|
||||
<ConfirmForm
|
||||
rowId={rowId}
|
||||
open={openConfirmDialog}
|
||||
handleClose={handleCloseConfirmDialog}
|
||||
confirmData={confirmData}
|
||||
/>
|
||||
)}
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openRejectDialog && (
|
||||
<RejectForm
|
||||
rowId={rowId}
|
||||
open={openRejectDialog}
|
||||
handleClose={handleCloseRejectDialog}
|
||||
rejectData={rejectData}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableRowActions;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { Stack, Tooltip } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Stack, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
function TableToolbar() {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default TableToolbar;
|
||||
|
||||
@@ -1,244 +1,241 @@
|
||||
import DataTableStructure from "@/core/components/DatatableStructure";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import { Box, IconButton, Typography } from "@mui/material";
|
||||
import {Box, IconButton, Typography} from "@mui/material";
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import { useMemo } from "react";
|
||||
import {useMemo} from "react";
|
||||
// import TableToolbar from "./TableTollbar";
|
||||
import { GET_MACHINARY_OFFICE } from "@/core/data/apiRoutes";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
|
||||
import {useTranslations} from "next-intl";
|
||||
import TableRowActions from "./TableRowActions";
|
||||
import {
|
||||
LocalizationProvider,
|
||||
MobileDateTimePicker,
|
||||
} from "@mui/x-date-pickers";
|
||||
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
|
||||
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import moment from "jalali-moment";
|
||||
import { faIR } from "@mui/x-date-pickers/locales";
|
||||
import {faIR} from "@mui/x-date-pickers/locales";
|
||||
|
||||
function DashboardMachinaryOfficeComponent() {
|
||||
const t = useTranslations();
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("PassengerOffice.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
const t = useTranslations();
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("PassengerOffice.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: "name",
|
||||
header: t("MachinaryOffice.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("MachinaryOffice.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("MachinaryOffice.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("MachinaryOffice.created_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
filterFn: "lessThan",
|
||||
minSize: 200,
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({renderedCellValue}) => {
|
||||
return <Typography variant="body2">{renderedCellValue}</Typography>;
|
||||
},
|
||||
Header: ({column}) => <em>{column.columnDef.header}</em>,
|
||||
Filter: ({column}) => {
|
||||
const filterFnValue = column.columnDef._filterFn;
|
||||
return (
|
||||
<Box sx={{display: "flex", alignItems: "start"}}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDateFnsJalali}
|
||||
localeText={
|
||||
faIR.components.MuiLocalizationProvider.defaultProps
|
||||
.localeText
|
||||
}
|
||||
>
|
||||
<MobileDateTimePicker
|
||||
ampm={false}
|
||||
onChange={(newValue) => {
|
||||
const date = new Date(newValue);
|
||||
const formattedDate = moment(date)
|
||||
.locale("en")
|
||||
.format("YYYY-MM-DD HH:mm");
|
||||
column.setFilterValue(formattedDate);
|
||||
}}
|
||||
slotProps={{
|
||||
textField: {
|
||||
placeholder: "تاریخ خود را وارد کنید",
|
||||
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
||||
sx: {minWidth: "120px"},
|
||||
variant: "standard",
|
||||
},
|
||||
}}
|
||||
value={
|
||||
column.getFilterValue()
|
||||
? new Date(column.getFilterValue())
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
column.setFilterValue(null);
|
||||
}}
|
||||
sx={{
|
||||
color: column.getFilterValue()
|
||||
? "rgba(0, 0, 0, 0.54)"
|
||||
: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
<ClearIcon/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("MachinaryOffice.updated_at"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.navgan_id,
|
||||
id: "navgan_id",
|
||||
header: t("MachinaryOffice.navgan_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.vehicle_type,
|
||||
id: "vehicle_type",
|
||||
header: t("MachinaryOffice.vehicle_type"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.state_name,
|
||||
id: "state_id",
|
||||
header: t("MachinaryOffice.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
minSize: 300,
|
||||
// filterFn: "equals",
|
||||
// filterSelectOptions: [
|
||||
// ],
|
||||
// filterVariant: "select",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: "name",
|
||||
header: t("MachinaryOffice.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("MachinaryOffice.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("MachinaryOffice.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("MachinaryOffice.created_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
filterFn: "lessThan",
|
||||
minSize: 200,
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({ renderedCellValue }) => {
|
||||
return <Typography variant="body2">{renderedCellValue}</Typography>;
|
||||
},
|
||||
Header: ({ column }) => <em>{column.columnDef.header}</em>,
|
||||
Filter: ({ column }) => {
|
||||
const filterFnValue = column.columnDef._filterFn;
|
||||
return (
|
||||
<Box sx={{ display: "flex", alignItems: "start" }}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDateFnsJalali}
|
||||
localeText={
|
||||
faIR.components.MuiLocalizationProvider.defaultProps
|
||||
.localeText
|
||||
}
|
||||
>
|
||||
<MobileDateTimePicker
|
||||
ampm={false}
|
||||
onChange={(newValue) => {
|
||||
const date = new Date(newValue);
|
||||
const formattedDate = moment(date)
|
||||
.locale("en")
|
||||
.format("YYYY-MM-DD HH:mm");
|
||||
column.setFilterValue(formattedDate);
|
||||
}}
|
||||
slotProps={{
|
||||
textField: {
|
||||
placeholder: "تاریخ خود را وارد کنید",
|
||||
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
||||
sx: { minWidth: "120px" },
|
||||
variant: "standard",
|
||||
},
|
||||
}}
|
||||
value={
|
||||
column.getFilterValue()
|
||||
? new Date(column.getFilterValue())
|
||||
: null
|
||||
}
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTableStructure
|
||||
tableUrl={GET_MACHINARY_OFFICE}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
// CustomToolbar={<TableToolbar />}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={true}
|
||||
enableColumnFilters={true}
|
||||
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
|
||||
enableRowActions={true}
|
||||
renderRowActions={({row}) => <TableRowActions row={row}/>}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
column.setFilterValue(null);
|
||||
}}
|
||||
sx={{
|
||||
color: column.getFilterValue()
|
||||
? "rgba(0, 0, 0, 0.54)"
|
||||
: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("MachinaryOffice.updated_at"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.navgan_id,
|
||||
id: "navgan_id",
|
||||
header: t("MachinaryOffice.navgan_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.vehicle_type,
|
||||
id: "vehicle_type",
|
||||
header: t("MachinaryOffice.vehicle_type"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.state_name,
|
||||
id: "state_id",
|
||||
header: t("MachinaryOffice.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
minSize: 300,
|
||||
// filterFn: "equals",
|
||||
// filterSelectOptions: [
|
||||
// ],
|
||||
// filterVariant: "select",
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{ px: 3 }}>
|
||||
<DataTableStructure
|
||||
tableUrl={GET_MACHINARY_OFFICE}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
// CustomToolbar={<TableToolbar />}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={true}
|
||||
enableColumnFilters={true}
|
||||
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
|
||||
enableRowActions={true}
|
||||
renderRowActions={({ row }) => <TableRowActions row={row} />}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
</DashboardLayouts>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardMachinaryOfficeComponent;
|
||||
|
||||
@@ -1,142 +1,134 @@
|
||||
import { CONFIRM_PASSENGER_BOSS } from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import { useFormik } from "formik";
|
||||
import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes";
|
||||
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const t = useTranslations();
|
||||
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 ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
|
||||
const t = useTranslations();
|
||||
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);
|
||||
|
||||
//formik
|
||||
const validationSchema = Yup.object().shape({
|
||||
proposed_amount: Yup.string().required(
|
||||
t("ConfirmDialog.approved_amount_error")
|
||||
),
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
proposed_amount: "",
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("approved_amount", proposedAmount);
|
||||
if (description != "") formData.append("expert_description", description);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_PASSENGER_BOSS, rowId, formData);
|
||||
},
|
||||
});
|
||||
//formik
|
||||
const validationSchema = Yup.object().shape({
|
||||
proposed_amount: Yup.string().required(
|
||||
t("ConfirmDialog.approved_amount_error")
|
||||
),
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
proposed_amount: "",
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("approved_amount", proposedAmount);
|
||||
if (description != "") formData.append("expert_description", description);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_PASSENGER_BOSS, rowId, formData);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
};
|
||||
const handleAmountChange = (event) => {
|
||||
if (/^\d*$/.test(event.target.value)) {
|
||||
setProposedAmount(event.target.value);
|
||||
}
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
};
|
||||
const handleAmountChange = (event) => {
|
||||
if (/^\d*$/.test(event.target.value)) {
|
||||
setProposedAmount(event.target.value);
|
||||
}
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={t("ConfirmDialog.description")}
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
name="proposed_amount"
|
||||
label={t("ConfirmDialog.approved_amount")}
|
||||
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
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={t("ConfirmDialog.description")}
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
<TextField
|
||||
name="proposed_amount"
|
||||
label={t("ConfirmDialog.approved_amount")}
|
||||
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
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
export default ConfirmForm;
|
||||
|
||||
@@ -1,116 +1,108 @@
|
||||
import { REJECT_PASSENGER_BOSS } from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useFormik } from "formik";
|
||||
import {REJECT_PASSENGER_BOSS} from "@/core/data/apiRoutes";
|
||||
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useState } from "react";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const t = useTranslations();
|
||||
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 RejectForm = ({open, handleClose, rowId, rejectData}) => {
|
||||
const t = useTranslations();
|
||||
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 validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
rejectData(REJECT_PASSENGER_BOSS, rowId, formData);
|
||||
},
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
rejectData(REJECT_PASSENGER_BOSS, rowId, formData);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={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 }}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={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}}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default RejectForm;
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import { Box, IconButton, Tooltip } from "@mui/material";
|
||||
import { useContext } from "react";
|
||||
import {Box, IconButton, Tooltip} from "@mui/material";
|
||||
import {useContext} from "react";
|
||||
import ConfirmForm from "./Form/ConfirmForm";
|
||||
import RejectForm from "./Form/RejectForm";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { DataTableContext } from "@/lib/app/contexts/DatatableContext";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
|
||||
|
||||
const TableRowActions = ({ row }) => {
|
||||
const t = useTranslations();
|
||||
const {
|
||||
openConfirmDialog,
|
||||
openRejectDialog,
|
||||
handleOpenConfirmDialog,
|
||||
handleOpenRejectDialog,
|
||||
handleCloseConfirmDialog,
|
||||
handleCloseRejectDialog,
|
||||
rowId,
|
||||
confirmData,
|
||||
rejectData,
|
||||
} = useContext(DataTableContext);
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
handleOpenConfirmDialog(row);
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openConfirmDialog && (
|
||||
<ConfirmForm
|
||||
rowId={rowId}
|
||||
open={openConfirmDialog}
|
||||
handleClose={handleCloseConfirmDialog}
|
||||
confirmData={confirmData}
|
||||
/>
|
||||
)}
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
|
||||
<ThumbDownIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openRejectDialog && (
|
||||
<RejectForm
|
||||
rowId={rowId}
|
||||
open={openRejectDialog}
|
||||
handleClose={handleCloseRejectDialog}
|
||||
rejectData={rejectData}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
const TableRowActions = ({row}) => {
|
||||
const t = useTranslations();
|
||||
const {
|
||||
openConfirmDialog,
|
||||
openRejectDialog,
|
||||
handleOpenConfirmDialog,
|
||||
handleOpenRejectDialog,
|
||||
handleCloseConfirmDialog,
|
||||
handleCloseRejectDialog,
|
||||
rowId,
|
||||
confirmData,
|
||||
rejectData,
|
||||
} = useContext(DataTableContext);
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
handleOpenConfirmDialog(row);
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openConfirmDialog && (
|
||||
<ConfirmForm
|
||||
rowId={rowId}
|
||||
open={openConfirmDialog}
|
||||
handleClose={handleCloseConfirmDialog}
|
||||
confirmData={confirmData}
|
||||
/>
|
||||
)}
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openRejectDialog && (
|
||||
<RejectForm
|
||||
rowId={rowId}
|
||||
open={openRejectDialog}
|
||||
handleClose={handleCloseRejectDialog}
|
||||
rejectData={rejectData}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableRowActions;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { Stack, Tooltip } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Stack, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
function TableToolbar() {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default TableToolbar;
|
||||
|
||||
@@ -1,245 +1,242 @@
|
||||
import DataTableStructure from "@/core/components/DatatableStructure";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import { Box, IconButton, Typography } from "@mui/material";
|
||||
import {Box, IconButton, Typography} from "@mui/material";
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import { useMemo } from "react";
|
||||
import {useMemo} from "react";
|
||||
// import TableToolbar from "./TableTollbar";
|
||||
import { GET_PASSENGER_BOSS } from "@/core/data/apiRoutes";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {GET_PASSENGER_BOSS} from "@/core/data/apiRoutes";
|
||||
import {useTranslations} from "next-intl";
|
||||
import TableRowActions from "./TableRowActions";
|
||||
import {
|
||||
LocalizationProvider,
|
||||
MobileDateTimePicker,
|
||||
} from "@mui/x-date-pickers";
|
||||
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
|
||||
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import moment from "jalali-moment";
|
||||
import { faIR } from "@mui/x-date-pickers/locales";
|
||||
import {faIR} from "@mui/x-date-pickers/locales";
|
||||
|
||||
function DashboardPassengerOfficeComponent() {
|
||||
const t = useTranslations();
|
||||
const t = useTranslations();
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("PassengerBoss.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("PassengerBoss.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: "name",
|
||||
header: t("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.created_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
filterFn: "lessThan",
|
||||
minSize: 200,
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({renderedCellValue}) => {
|
||||
return <Typography variant="body2">{renderedCellValue}</Typography>;
|
||||
},
|
||||
Header: ({column}) => <em>{column.columnDef.header}</em>,
|
||||
Filter: ({column}) => {
|
||||
const filterFnValue = column.columnDef._filterFn;
|
||||
return (
|
||||
<Box sx={{display: "flex", alignItems: "start"}}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDateFnsJalali}
|
||||
localeText={
|
||||
faIR.components.MuiLocalizationProvider.defaultProps
|
||||
.localeText
|
||||
}
|
||||
>
|
||||
<MobileDateTimePicker
|
||||
ampm={false}
|
||||
onChange={(newValue) => {
|
||||
const date = new Date(newValue);
|
||||
const formattedDate = moment(date)
|
||||
.locale("en")
|
||||
.format("YYYY-MM-DD HH:mm");
|
||||
column.setFilterValue(formattedDate);
|
||||
}}
|
||||
slotProps={{
|
||||
textField: {
|
||||
placeholder: "تاریخ خود را وارد کنید",
|
||||
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
||||
sx: {minWidth: "120px"},
|
||||
variant: "standard",
|
||||
},
|
||||
}}
|
||||
value={
|
||||
column.getFilterValue()
|
||||
? new Date(column.getFilterValue())
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
column.setFilterValue(null);
|
||||
}}
|
||||
sx={{
|
||||
color: column.getFilterValue()
|
||||
? "rgba(0, 0, 0, 0.54)"
|
||||
: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
<ClearIcon/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("PassengerBoss.updated_at"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.navgan_id,
|
||||
id: "navgan_id",
|
||||
header: t("PassengerBoss.navgan_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.vehicle_type,
|
||||
id: "vehicle_type",
|
||||
header: t("PassengerBoss.vehicle_type"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.state_name,
|
||||
id: "state_id",
|
||||
header: t("PassengerBoss.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
minSize: 300,
|
||||
// filterFn: "equals",
|
||||
// filterSelectOptions: [
|
||||
// ],
|
||||
// filterVariant: "select",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: "name",
|
||||
header: t("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.created_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
filterFn: "lessThan",
|
||||
minSize: 200,
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({ renderedCellValue }) => {
|
||||
return <Typography variant="body2">{renderedCellValue}</Typography>;
|
||||
},
|
||||
Header: ({ column }) => <em>{column.columnDef.header}</em>,
|
||||
Filter: ({ column }) => {
|
||||
const filterFnValue = column.columnDef._filterFn;
|
||||
return (
|
||||
<Box sx={{ display: "flex", alignItems: "start" }}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDateFnsJalali}
|
||||
localeText={
|
||||
faIR.components.MuiLocalizationProvider.defaultProps
|
||||
.localeText
|
||||
}
|
||||
>
|
||||
<MobileDateTimePicker
|
||||
ampm={false}
|
||||
onChange={(newValue) => {
|
||||
const date = new Date(newValue);
|
||||
const formattedDate = moment(date)
|
||||
.locale("en")
|
||||
.format("YYYY-MM-DD HH:mm");
|
||||
column.setFilterValue(formattedDate);
|
||||
}}
|
||||
slotProps={{
|
||||
textField: {
|
||||
placeholder: "تاریخ خود را وارد کنید",
|
||||
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
||||
sx: { minWidth: "120px" },
|
||||
variant: "standard",
|
||||
},
|
||||
}}
|
||||
value={
|
||||
column.getFilterValue()
|
||||
? new Date(column.getFilterValue())
|
||||
: null
|
||||
}
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTableStructure
|
||||
tableUrl={GET_PASSENGER_BOSS}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
// CustomToolbar={<TableToolbar />}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={true}
|
||||
enableColumnFilters={true}
|
||||
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
|
||||
enableRowActions={true}
|
||||
renderRowActions={({row}) => <TableRowActions row={row}/>}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
column.setFilterValue(null);
|
||||
}}
|
||||
sx={{
|
||||
color: column.getFilterValue()
|
||||
? "rgba(0, 0, 0, 0.54)"
|
||||
: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("PassengerBoss.updated_at"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.navgan_id,
|
||||
id: "navgan_id",
|
||||
header: t("PassengerBoss.navgan_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.vehicle_type,
|
||||
id: "vehicle_type",
|
||||
header: t("PassengerBoss.vehicle_type"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.state_name,
|
||||
id: "state_id",
|
||||
header: t("PassengerBoss.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
minSize: 300,
|
||||
// filterFn: "equals",
|
||||
// filterSelectOptions: [
|
||||
// ],
|
||||
// filterVariant: "select",
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{ px: 3 }}>
|
||||
<DataTableStructure
|
||||
tableUrl={GET_PASSENGER_BOSS}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
// CustomToolbar={<TableToolbar />}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={true}
|
||||
enableColumnFilters={true}
|
||||
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
|
||||
enableRowActions={true}
|
||||
renderRowActions={({ row }) => <TableRowActions row={row} />}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
</DashboardLayouts>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardPassengerOfficeComponent;
|
||||
|
||||
@@ -1,106 +1,98 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import { CONFIRM_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
|
||||
import {CONFIRM_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useFormik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRef, useState } from "react";
|
||||
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
|
||||
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const t = useTranslations();
|
||||
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 ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
|
||||
const t = useTranslations();
|
||||
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 formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
if (description !== "")
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_PASSENGER_OFFICE, rowId, formData);
|
||||
},
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
if (description !== "")
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_PASSENGER_OFFICE, rowId, formData);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={t("ConfirmDialog.description")}
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={t("ConfirmDialog.description")}
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
export default ConfirmForm;
|
||||
|
||||
@@ -1,114 +1,106 @@
|
||||
import { REJECT_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useFormik } from "formik";
|
||||
import {REJECT_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
|
||||
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useState } from "react";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const t = useTranslations();
|
||||
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 RejectForm = ({open, handleClose, rowId, rejectData}) => {
|
||||
const t = useTranslations();
|
||||
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 validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
rejectData(REJECT_PASSENGER_OFFICE, rowId, formData);
|
||||
},
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
rejectData(REJECT_PASSENGER_OFFICE, rowId, formData);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={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 }}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={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}}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default RejectForm;
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import { Box, IconButton, Tooltip } from "@mui/material";
|
||||
import { useContext } from "react";
|
||||
import {Box, IconButton, Tooltip} from "@mui/material";
|
||||
import {useContext} from "react";
|
||||
import ConfirmForm from "./Form/ConfirmForm";
|
||||
import RejectForm from "./Form/RejectForm";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { DataTableContext } from "@/lib/app/contexts/DatatableContext";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
|
||||
|
||||
const TableRowActions = ({ row }) => {
|
||||
const t = useTranslations();
|
||||
const {
|
||||
openConfirmDialog,
|
||||
openRejectDialog,
|
||||
handleOpenConfirmDialog,
|
||||
handleOpenRejectDialog,
|
||||
handleCloseConfirmDialog,
|
||||
handleCloseRejectDialog,
|
||||
rowId,
|
||||
confirmData,
|
||||
rejectData,
|
||||
} = useContext(DataTableContext);
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
handleOpenConfirmDialog(row);
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openConfirmDialog && (
|
||||
<ConfirmForm
|
||||
rowId={rowId}
|
||||
open={openConfirmDialog}
|
||||
handleClose={handleCloseConfirmDialog}
|
||||
confirmData={confirmData}
|
||||
/>
|
||||
)}
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
|
||||
<ThumbDownIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openRejectDialog && (
|
||||
<RejectForm
|
||||
rowId={rowId}
|
||||
open={openRejectDialog}
|
||||
handleClose={handleCloseRejectDialog}
|
||||
rejectData={rejectData}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
const TableRowActions = ({row}) => {
|
||||
const t = useTranslations();
|
||||
const {
|
||||
openConfirmDialog,
|
||||
openRejectDialog,
|
||||
handleOpenConfirmDialog,
|
||||
handleOpenRejectDialog,
|
||||
handleCloseConfirmDialog,
|
||||
handleCloseRejectDialog,
|
||||
rowId,
|
||||
confirmData,
|
||||
rejectData,
|
||||
} = useContext(DataTableContext);
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
handleOpenConfirmDialog(row);
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openConfirmDialog && (
|
||||
<ConfirmForm
|
||||
rowId={rowId}
|
||||
open={openConfirmDialog}
|
||||
handleClose={handleCloseConfirmDialog}
|
||||
confirmData={confirmData}
|
||||
/>
|
||||
)}
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openRejectDialog && (
|
||||
<RejectForm
|
||||
rowId={rowId}
|
||||
open={openRejectDialog}
|
||||
handleClose={handleCloseRejectDialog}
|
||||
rejectData={rejectData}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableRowActions;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { Stack, Tooltip } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Stack, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
function TableToolbar() {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default TableToolbar;
|
||||
|
||||
@@ -1,247 +1,243 @@
|
||||
import DataTableStructure from "@/core/components/DatatableStructure";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import { Box, IconButton, Typography } from "@mui/material";
|
||||
import {Box, IconButton, Typography} from "@mui/material";
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import { useMemo } from "react";
|
||||
import { faIR } from "@mui/x-date-pickers/locales";
|
||||
import {useMemo} from "react";
|
||||
import {faIR} from "@mui/x-date-pickers/locales";
|
||||
// import TableToolbar from "./TableTollbar";
|
||||
import { GET_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
|
||||
import {useTranslations} from "next-intl";
|
||||
import TableRowActions from "./TableRowActions";
|
||||
import {
|
||||
LocalizationProvider,
|
||||
MobileDateTimePicker,
|
||||
} from "@mui/x-date-pickers";
|
||||
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
|
||||
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import moment from "jalali-moment";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
function DashboardPassengerOfficeComponent() {
|
||||
const t = useTranslations();
|
||||
const t = useTranslations();
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("PassengerOffice.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
maxSize: 100,
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("PassengerOffice.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
maxSize: 100,
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: "name",
|
||||
header: t("PassengerOffice.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("PassengerOffice.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("PassengerOffice.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("PassengerOffice.created_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
filterFn: "lessThan",
|
||||
minSize: 200,
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({renderedCellValue}) => {
|
||||
return <Typography variant="body2">{renderedCellValue}</Typography>;
|
||||
},
|
||||
Header: ({column}) => <em>{column.columnDef.header}</em>,
|
||||
Filter: ({column}) => {
|
||||
const filterFnValue = column.columnDef._filterFn;
|
||||
return (
|
||||
<Box sx={{display: "flex", alignItems: "start"}}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDateFnsJalali}
|
||||
localeText={
|
||||
faIR.components.MuiLocalizationProvider.defaultProps
|
||||
.localeText
|
||||
}
|
||||
>
|
||||
<MobileDateTimePicker
|
||||
ampm={false}
|
||||
onChange={(newValue) => {
|
||||
const date = new Date(newValue);
|
||||
const formattedDate = moment(date)
|
||||
.locale("en")
|
||||
.format("YYYY-MM-DD HH:mm");
|
||||
column.setFilterValue(formattedDate);
|
||||
}}
|
||||
slotProps={{
|
||||
textField: {
|
||||
placeholder: "تاریخ خود را وارد کنید",
|
||||
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
||||
sx: {minWidth: "120px"},
|
||||
variant: "standard",
|
||||
actionBar: {actions: ["accept", "today"]},
|
||||
},
|
||||
}}
|
||||
value={
|
||||
column.getFilterValue()
|
||||
? new Date(column.getFilterValue())
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
column.setFilterValue(null);
|
||||
}}
|
||||
sx={{
|
||||
color: column.getFilterValue()
|
||||
? "rgba(0, 0, 0, 0.54)"
|
||||
: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
<ClearIcon/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("PassengerOffice.updated_at"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.navgan_id,
|
||||
id: "navgan_id",
|
||||
header: t("PassengerOffice.navgan_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
maxSize: 100,
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.vehicle_type,
|
||||
id: "vehicle_type",
|
||||
header: t("PassengerOffice.vehicle_type"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.state_name,
|
||||
id: "state_id",
|
||||
header: t("PassengerOffice.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
minSize: 300,
|
||||
// filterFn: "equals",
|
||||
// filterSelectOptions: [
|
||||
// ],
|
||||
// filterVariant: "select",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: "name",
|
||||
header: t("PassengerOffice.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("PassengerOffice.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("PassengerOffice.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("PassengerOffice.created_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
filterFn: "lessThan",
|
||||
minSize: 200,
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({ renderedCellValue }) => {
|
||||
return <Typography variant="body2">{renderedCellValue}</Typography>;
|
||||
},
|
||||
Header: ({ column }) => <em>{column.columnDef.header}</em>,
|
||||
Filter: ({ column }) => {
|
||||
const filterFnValue = column.columnDef._filterFn;
|
||||
return (
|
||||
<Box sx={{ display: "flex", alignItems: "start" }}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDateFnsJalali}
|
||||
localeText={
|
||||
faIR.components.MuiLocalizationProvider.defaultProps
|
||||
.localeText
|
||||
}
|
||||
>
|
||||
<MobileDateTimePicker
|
||||
ampm={false}
|
||||
onChange={(newValue) => {
|
||||
const date = new Date(newValue);
|
||||
const formattedDate = moment(date)
|
||||
.locale("en")
|
||||
.format("YYYY-MM-DD HH:mm");
|
||||
column.setFilterValue(formattedDate);
|
||||
}}
|
||||
slotProps={{
|
||||
textField: {
|
||||
placeholder: "تاریخ خود را وارد کنید",
|
||||
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
||||
sx: { minWidth: "120px" },
|
||||
variant: "standard",
|
||||
actionBar: { actions: ["accept", "today"] },
|
||||
},
|
||||
}}
|
||||
value={
|
||||
column.getFilterValue()
|
||||
? new Date(column.getFilterValue())
|
||||
: null
|
||||
}
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTableStructure
|
||||
tableUrl={GET_PASSENGER_OFFICE}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
// CustomToolbar={<TableToolbar />}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={true}
|
||||
enableColumnFilters={true}
|
||||
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
|
||||
enableRowActions={true}
|
||||
renderRowActions={({row}) => <TableRowActions row={row}/>}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
column.setFilterValue(null);
|
||||
}}
|
||||
sx={{
|
||||
color: column.getFilterValue()
|
||||
? "rgba(0, 0, 0, 0.54)"
|
||||
: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("PassengerOffice.updated_at"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.navgan_id,
|
||||
id: "navgan_id",
|
||||
header: t("PassengerOffice.navgan_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
maxSize: 100,
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.vehicle_type,
|
||||
id: "vehicle_type",
|
||||
header: t("PassengerOffice.vehicle_type"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.state_name,
|
||||
id: "state_id",
|
||||
header: t("PassengerOffice.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
minSize: 300,
|
||||
// filterFn: "equals",
|
||||
// filterSelectOptions: [
|
||||
// ],
|
||||
// filterVariant: "select",
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{ px: 3 }}>
|
||||
<DataTableStructure
|
||||
tableUrl={GET_PASSENGER_OFFICE}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
// CustomToolbar={<TableToolbar />}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={true}
|
||||
enableColumnFilters={true}
|
||||
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
|
||||
enableRowActions={true}
|
||||
renderRowActions={({ row }) => <TableRowActions row={row} />}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
</DashboardLayouts>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardPassengerOfficeComponent;
|
||||
|
||||
@@ -1,106 +1,98 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import { CONFIRM_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
|
||||
import {CONFIRM_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useFormik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRef, useState } from "react";
|
||||
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
|
||||
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const t = useTranslations();
|
||||
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 ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
|
||||
const t = useTranslations();
|
||||
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 formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
if (description !== "")
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_PROVINCE_MANAGER, rowId, formData);
|
||||
},
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
if (description !== "")
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_PROVINCE_MANAGER, rowId, formData);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={t("ConfirmDialog.description")}
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={t("ConfirmDialog.description")}
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
export default ConfirmForm;
|
||||
|
||||
@@ -1,115 +1,107 @@
|
||||
import { REJECT_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useFormik } from "formik";
|
||||
import {REJECT_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
|
||||
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useState } from "react";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const t = useTranslations();
|
||||
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 RejectForm = ({open, handleClose, rowId, rejectData}) => {
|
||||
const t = useTranslations();
|
||||
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 validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
rejectData(REJECT_PROVINCE_MANAGER, rowId, formData);
|
||||
},
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
rejectData(REJECT_PROVINCE_MANAGER, rowId, formData);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={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 }}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={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}}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default RejectForm;
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import { Box, IconButton, Tooltip } from "@mui/material";
|
||||
import { useContext } from "react";
|
||||
import {Box, IconButton, Tooltip} from "@mui/material";
|
||||
import {useContext} from "react";
|
||||
import ConfirmForm from "./Form/ConfirmForm";
|
||||
import RejectForm from "./Form/RejectForm";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { DataTableContext } from "@/lib/app/contexts/DatatableContext";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
|
||||
|
||||
const TableRowActions = ({ row }) => {
|
||||
const t = useTranslations();
|
||||
const {
|
||||
openConfirmDialog,
|
||||
openRejectDialog,
|
||||
handleOpenConfirmDialog,
|
||||
handleOpenRejectDialog,
|
||||
handleCloseConfirmDialog,
|
||||
handleCloseRejectDialog,
|
||||
rowId,
|
||||
confirmData,
|
||||
rejectData,
|
||||
} = useContext(DataTableContext);
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
handleOpenConfirmDialog(row);
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openConfirmDialog && (
|
||||
<ConfirmForm
|
||||
rowId={rowId}
|
||||
open={openConfirmDialog}
|
||||
handleClose={handleCloseConfirmDialog}
|
||||
confirmData={confirmData}
|
||||
/>
|
||||
)}
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
|
||||
<ThumbDownIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openRejectDialog && (
|
||||
<RejectForm
|
||||
rowId={rowId}
|
||||
open={openRejectDialog}
|
||||
handleClose={handleCloseRejectDialog}
|
||||
rejectData={rejectData}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
const TableRowActions = ({row}) => {
|
||||
const t = useTranslations();
|
||||
const {
|
||||
openConfirmDialog,
|
||||
openRejectDialog,
|
||||
handleOpenConfirmDialog,
|
||||
handleOpenRejectDialog,
|
||||
handleCloseConfirmDialog,
|
||||
handleCloseRejectDialog,
|
||||
rowId,
|
||||
confirmData,
|
||||
rejectData,
|
||||
} = useContext(DataTableContext);
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
handleOpenConfirmDialog(row);
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openConfirmDialog && (
|
||||
<ConfirmForm
|
||||
rowId={rowId}
|
||||
open={openConfirmDialog}
|
||||
handleClose={handleCloseConfirmDialog}
|
||||
confirmData={confirmData}
|
||||
/>
|
||||
)}
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openRejectDialog && (
|
||||
<RejectForm
|
||||
rowId={rowId}
|
||||
open={openRejectDialog}
|
||||
handleClose={handleCloseRejectDialog}
|
||||
rejectData={rejectData}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableRowActions;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { Stack, Tooltip } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Stack, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
function TableToolbar() {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default TableToolbar;
|
||||
|
||||
@@ -1,245 +1,242 @@
|
||||
import DataTableStructure from "@/core/components/DatatableStructure";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import { Box, IconButton, Typography } from "@mui/material";
|
||||
import {Box, IconButton, Typography} from "@mui/material";
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import { useMemo } from "react";
|
||||
import {useMemo} from "react";
|
||||
// import TableToolbar from "./TableTollbar";
|
||||
import { GET_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {GET_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
|
||||
import {useTranslations} from "next-intl";
|
||||
import TableRowActions from "./TableRowActions";
|
||||
import {
|
||||
LocalizationProvider,
|
||||
MobileDateTimePicker,
|
||||
} from "@mui/x-date-pickers";
|
||||
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
|
||||
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import moment from "jalali-moment";
|
||||
import { faIR } from "@mui/x-date-pickers/locales";
|
||||
import {faIR} from "@mui/x-date-pickers/locales";
|
||||
|
||||
function DashboardProvinceManagerComponent() {
|
||||
const t = useTranslations();
|
||||
const t = useTranslations();
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("ProvinceManager.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("ProvinceManager.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: "name",
|
||||
header: t("ProvinceManager.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("ProvinceManager.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("ProvinceManager.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("ProvinceManager.created_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
filterFn: "lessThan",
|
||||
minSize: 200,
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({renderedCellValue}) => {
|
||||
return <Typography variant="body2">{renderedCellValue}</Typography>;
|
||||
},
|
||||
Header: ({column}) => <em>{column.columnDef.header}</em>,
|
||||
Filter: ({column}) => {
|
||||
const filterFnValue = column.columnDef._filterFn;
|
||||
return (
|
||||
<Box sx={{display: "flex", alignItems: "start"}}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDateFnsJalali}
|
||||
localeText={
|
||||
faIR.components.MuiLocalizationProvider.defaultProps
|
||||
.localeText
|
||||
}
|
||||
>
|
||||
<MobileDateTimePicker
|
||||
ampm={false}
|
||||
onChange={(newValue) => {
|
||||
const date = new Date(newValue);
|
||||
const formattedDate = moment(date)
|
||||
.locale("en")
|
||||
.format("YYYY-MM-DD HH:mm");
|
||||
column.setFilterValue(formattedDate);
|
||||
}}
|
||||
slotProps={{
|
||||
textField: {
|
||||
placeholder: "تاریخ خود را وارد کنید",
|
||||
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
||||
sx: {minWidth: "120px"},
|
||||
variant: "standard",
|
||||
},
|
||||
}}
|
||||
value={
|
||||
column.getFilterValue()
|
||||
? new Date(column.getFilterValue())
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
column.setFilterValue(null);
|
||||
}}
|
||||
sx={{
|
||||
color: column.getFilterValue()
|
||||
? "rgba(0, 0, 0, 0.54)"
|
||||
: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
<ClearIcon/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("ProvinceManager.updated_at"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.navgan_id,
|
||||
id: "navgan_id",
|
||||
header: t("ProvinceManager.navgan_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.vehicle_type,
|
||||
id: "vehicle_type",
|
||||
header: t("ProvinceManager.vehicle_type"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.state_name,
|
||||
id: "state_id",
|
||||
header: t("ProvinceManager.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
minSize: 300,
|
||||
// filterFn: "equals",
|
||||
// filterSelectOptions: [
|
||||
// ],
|
||||
// filterVariant: "select",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: "name",
|
||||
header: t("ProvinceManager.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("ProvinceManager.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("ProvinceManager.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("ProvinceManager.created_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
filterFn: "lessThan",
|
||||
minSize: 200,
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({ renderedCellValue }) => {
|
||||
return <Typography variant="body2">{renderedCellValue}</Typography>;
|
||||
},
|
||||
Header: ({ column }) => <em>{column.columnDef.header}</em>,
|
||||
Filter: ({ column }) => {
|
||||
const filterFnValue = column.columnDef._filterFn;
|
||||
return (
|
||||
<Box sx={{ display: "flex", alignItems: "start" }}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDateFnsJalali}
|
||||
localeText={
|
||||
faIR.components.MuiLocalizationProvider.defaultProps
|
||||
.localeText
|
||||
}
|
||||
>
|
||||
<MobileDateTimePicker
|
||||
ampm={false}
|
||||
onChange={(newValue) => {
|
||||
const date = new Date(newValue);
|
||||
const formattedDate = moment(date)
|
||||
.locale("en")
|
||||
.format("YYYY-MM-DD HH:mm");
|
||||
column.setFilterValue(formattedDate);
|
||||
}}
|
||||
slotProps={{
|
||||
textField: {
|
||||
placeholder: "تاریخ خود را وارد کنید",
|
||||
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
||||
sx: { minWidth: "120px" },
|
||||
variant: "standard",
|
||||
},
|
||||
}}
|
||||
value={
|
||||
column.getFilterValue()
|
||||
? new Date(column.getFilterValue())
|
||||
: null
|
||||
}
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTableStructure
|
||||
tableUrl={GET_PROVINCE_MANAGER}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
// CustomToolbar={<TableToolbar />}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={true}
|
||||
enableColumnFilters={true}
|
||||
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
|
||||
enableRowActions={true}
|
||||
renderRowActions={({row}) => <TableRowActions row={row}/>}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
column.setFilterValue(null);
|
||||
}}
|
||||
sx={{
|
||||
color: column.getFilterValue()
|
||||
? "rgba(0, 0, 0, 0.54)"
|
||||
: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("ProvinceManager.updated_at"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.navgan_id,
|
||||
id: "navgan_id",
|
||||
header: t("ProvinceManager.navgan_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.vehicle_type,
|
||||
id: "vehicle_type",
|
||||
header: t("ProvinceManager.vehicle_type"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.state_name,
|
||||
id: "state_id",
|
||||
header: t("ProvinceManager.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
minSize: 300,
|
||||
// filterFn: "equals",
|
||||
// filterSelectOptions: [
|
||||
// ],
|
||||
// filterVariant: "select",
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{ px: 3 }}>
|
||||
<DataTableStructure
|
||||
tableUrl={GET_PROVINCE_MANAGER}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
// CustomToolbar={<TableToolbar />}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={true}
|
||||
enableColumnFilters={true}
|
||||
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
|
||||
enableRowActions={true}
|
||||
renderRowActions={({ row }) => <TableRowActions row={row} />}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
</DashboardLayouts>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardProvinceManagerComponent;
|
||||
|
||||
@@ -1,102 +1,94 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import { CONFIRM_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
|
||||
import {CONFIRM_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useFormik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
|
||||
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
|
||||
const t = useTranslations();
|
||||
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 ConfirmForm = ({open, handleClose, rowId, confirmData}) => {
|
||||
const t = useTranslations();
|
||||
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 formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
if (description != "") formData.append("expert_description", description);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_TRANSPORTATION_ASSISTANCE, rowId, formData);
|
||||
},
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
if (description != "") formData.append("expert_description", description);
|
||||
handleClose();
|
||||
confirmData(CONFIRM_TRANSPORTATION_ASSISTANCE, rowId, formData);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={t("ConfirmDialog.description")}
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={t("ConfirmDialog.description")}
|
||||
value={description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
export default ConfirmForm;
|
||||
|
||||
@@ -1,113 +1,105 @@
|
||||
import { REJECT_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useFormik } from "formik";
|
||||
import {REJECT_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
|
||||
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField,} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useState } from "react";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
|
||||
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
|
||||
const [description, setDescription] = useState("");
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const RejectForm = ({open, handleClose, rowId, rejectData}) => {
|
||||
const [description, setDescription] = useState("");
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
rejectData(REJECT_TRANSPORTATION_ASSISTANCE, rowId, formData);
|
||||
},
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: () => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", description);
|
||||
handleClose();
|
||||
rejectData(REJECT_TRANSPORTATION_ASSISTANCE, rowId, formData);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={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 }}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
const handleDescriptionChange = (event) => {
|
||||
setDescription(event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(directionApp, t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Dialog open={open}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("RejectDialog.context")}</DialogContentText>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder={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}}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="secondary" autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} color="primary">
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
export default RejectForm;
|
||||
|
||||
@@ -1,61 +1,61 @@
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import { Box, IconButton, Tooltip } from "@mui/material";
|
||||
import { useContext } from "react";
|
||||
import {Box, IconButton, Tooltip} from "@mui/material";
|
||||
import {useContext} from "react";
|
||||
import ConfirmForm from "./Form/ConfirmForm";
|
||||
import RejectForm from "./Form/RejectForm";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { DataTableContext } from "@/lib/app/contexts/DatatableContext";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
|
||||
|
||||
const TableRowActions = ({ row }) => {
|
||||
const t = useTranslations();
|
||||
const TableRowActions = ({row}) => {
|
||||
const t = useTranslations();
|
||||
|
||||
const {
|
||||
openConfirmDialog,
|
||||
openRejectDialog,
|
||||
handleOpenConfirmDialog,
|
||||
handleOpenRejectDialog,
|
||||
handleCloseConfirmDialog,
|
||||
handleCloseRejectDialog,
|
||||
rowId,
|
||||
confirmData,
|
||||
rejectData,
|
||||
} = useContext(DataTableContext);
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
handleOpenConfirmDialog(row);
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openConfirmDialog && (
|
||||
<ConfirmForm
|
||||
rowId={rowId}
|
||||
open={openConfirmDialog}
|
||||
handleClose={handleCloseConfirmDialog}
|
||||
confirmData={confirmData}
|
||||
/>
|
||||
)}
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
|
||||
<ThumbDownIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openRejectDialog && (
|
||||
<RejectForm
|
||||
rowId={rowId}
|
||||
open={openRejectDialog}
|
||||
handleClose={handleCloseRejectDialog}
|
||||
rejectData={rejectData}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
const {
|
||||
openConfirmDialog,
|
||||
openRejectDialog,
|
||||
handleOpenConfirmDialog,
|
||||
handleOpenRejectDialog,
|
||||
handleCloseConfirmDialog,
|
||||
handleCloseRejectDialog,
|
||||
rowId,
|
||||
confirmData,
|
||||
rejectData,
|
||||
} = useContext(DataTableContext);
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
handleOpenConfirmDialog(row);
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openConfirmDialog && (
|
||||
<ConfirmForm
|
||||
rowId={rowId}
|
||||
open={openConfirmDialog}
|
||||
handleClose={handleCloseConfirmDialog}
|
||||
confirmData={confirmData}
|
||||
/>
|
||||
)}
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{openRejectDialog && (
|
||||
<RejectForm
|
||||
rowId={rowId}
|
||||
open={openRejectDialog}
|
||||
handleClose={handleCloseRejectDialog}
|
||||
rejectData={rejectData}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableRowActions;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { Stack, Tooltip } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Stack, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
function TableToolbar() {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Tooltip title={t("add")} arrow placement="right"></Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default TableToolbar;
|
||||
|
||||
@@ -1,245 +1,242 @@
|
||||
import DataTableStructure from "@/core/components/DatatableStructure";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import { Box, IconButton, Typography } from "@mui/material";
|
||||
import {Box, IconButton, Typography} from "@mui/material";
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import { useMemo } from "react";
|
||||
import {useMemo} from "react";
|
||||
// import TableToolbar from "./TableTollbar";
|
||||
import { GET_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {GET_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
|
||||
import {useTranslations} from "next-intl";
|
||||
import TableRowActions from "./TableRowActions";
|
||||
import {
|
||||
LocalizationProvider,
|
||||
MobileDateTimePicker,
|
||||
} from "@mui/x-date-pickers";
|
||||
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import { faIR } from "@mui/x-date-pickers/locales";
|
||||
import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
|
||||
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import {faIR} from "@mui/x-date-pickers/locales";
|
||||
import moment from "jalali-moment";
|
||||
|
||||
function DashboardTransportationAssistanceComponent() {
|
||||
const t = useTranslations();
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("TransportationAssistance.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: "name",
|
||||
header: t("TransportationAssistance.name"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
const t = useTranslations();
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("TransportationAssistance.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
id: "name",
|
||||
header: t("TransportationAssistance.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("TransportationAssistance.national_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
{
|
||||
accessorFn: (row) => row.national_id,
|
||||
id: "national_id",
|
||||
header: t("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.created_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
minSize: 200,
|
||||
filterFn: "lessThan",
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
Header: ({column}) => <em>{column.columnDef.header}</em>,
|
||||
Filter: ({column}) => {
|
||||
const filterFnValue = column.columnDef._filterFn;
|
||||
return (
|
||||
<Box sx={{display: "flex", alignItems: "start"}}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDateFnsJalali}
|
||||
localeText={
|
||||
faIR.components.MuiLocalizationProvider.defaultProps
|
||||
.localeText
|
||||
}
|
||||
>
|
||||
<MobileDateTimePicker
|
||||
ampm={false}
|
||||
onChange={(newValue) => {
|
||||
const date = new Date(newValue);
|
||||
const formattedDate = moment(date)
|
||||
.locale("en")
|
||||
.format("YYYY-MM-DD HH:mm");
|
||||
column.setFilterValue(formattedDate);
|
||||
}}
|
||||
slotProps={{
|
||||
textField: {
|
||||
placeholder: "تاریخ خود را وارد کنید",
|
||||
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
||||
sx: {minWidth: "120px"},
|
||||
variant: "standard",
|
||||
},
|
||||
}}
|
||||
value={
|
||||
column.getFilterValue()
|
||||
? new Date(column.getFilterValue())
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
column.setFilterValue(null);
|
||||
}}
|
||||
sx={{
|
||||
color: column.getFilterValue()
|
||||
? "rgba(0, 0, 0, 0.54)"
|
||||
: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
<ClearIcon/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("TransportationAssistance.updated_at"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.navgan_id,
|
||||
id: "navgan_id",
|
||||
header: t("TransportationAssistance.navgan_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.vehicle_type,
|
||||
id: "vehicle_type",
|
||||
header: t("TransportationAssistance.vehicle_type"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.state_name,
|
||||
id: "state_id",
|
||||
header: t("TransportationAssistance.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
minSize: 300,
|
||||
// filterFn: "equals",
|
||||
// filterSelectOptions: [
|
||||
// ],
|
||||
// filterVariant: "select",
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.phone_number,
|
||||
id: "phone_number",
|
||||
header: t("TransportationAssistance.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("TransportationAssistance.created_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
minSize: 200,
|
||||
filterFn: "lessThan",
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
Header: ({ column }) => <em>{column.columnDef.header}</em>,
|
||||
Filter: ({ column }) => {
|
||||
const filterFnValue = column.columnDef._filterFn;
|
||||
return (
|
||||
<Box sx={{ display: "flex", alignItems: "start" }}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDateFnsJalali}
|
||||
localeText={
|
||||
faIR.components.MuiLocalizationProvider.defaultProps
|
||||
.localeText
|
||||
}
|
||||
>
|
||||
<MobileDateTimePicker
|
||||
ampm={false}
|
||||
onChange={(newValue) => {
|
||||
const date = new Date(newValue);
|
||||
const formattedDate = moment(date)
|
||||
.locale("en")
|
||||
.format("YYYY-MM-DD HH:mm");
|
||||
column.setFilterValue(formattedDate);
|
||||
}}
|
||||
slotProps={{
|
||||
textField: {
|
||||
placeholder: "تاریخ خود را وارد کنید",
|
||||
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
||||
sx: { minWidth: "120px" },
|
||||
variant: "standard",
|
||||
},
|
||||
}}
|
||||
value={
|
||||
column.getFilterValue()
|
||||
? new Date(column.getFilterValue())
|
||||
: null
|
||||
}
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTableStructure
|
||||
tableUrl={GET_TRANSPORTATION_ASSISTANCE}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
// CustomToolbar={<TableToolbar />}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={true}
|
||||
enableColumnFilters={true}
|
||||
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
|
||||
enableRowActions={true}
|
||||
renderRowActions={({row}) => <TableRowActions row={row}/>}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
column.setFilterValue(null);
|
||||
}}
|
||||
sx={{
|
||||
color: column.getFilterValue()
|
||||
? "rgba(0, 0, 0, 0.54)"
|
||||
: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("TransportationAssistance.updated_at"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.navgan_id,
|
||||
id: "navgan_id",
|
||||
header: t("TransportationAssistance.navgan_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
maxSize: 100,
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.vehicle_type,
|
||||
id: "vehicle_type",
|
||||
header: t("TransportationAssistance.vehicle_type"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.state_name,
|
||||
id: "state_id",
|
||||
header: t("TransportationAssistance.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
minSize: 300,
|
||||
// filterFn: "equals",
|
||||
// filterSelectOptions: [
|
||||
// ],
|
||||
// filterVariant: "select",
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{ px: 3 }}>
|
||||
<DataTableStructure
|
||||
tableUrl={GET_TRANSPORTATION_ASSISTANCE}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
// CustomToolbar={<TableToolbar />}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={true}
|
||||
enableColumnFilters={true}
|
||||
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
|
||||
enableRowActions={true}
|
||||
renderRowActions={({ row }) => <TableRowActions row={row} />}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
</DashboardLayouts>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardTransportationAssistanceComponent;
|
||||
|
||||
@@ -1,53 +1,53 @@
|
||||
import dahsboardImage from "&/images/dashboard.svg";
|
||||
import { NextLinkComposed } from "@/core/components/LinkRouting";
|
||||
import {NextLinkComposed} from "@/core/components/LinkRouting";
|
||||
import StyledImage from "@/core/components/StyledImage";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import { Button, Typography } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Button, Typography} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
const FirstComponent = () => {
|
||||
const t = useTranslations();
|
||||
const { isAuth } = useUser();
|
||||
const t = useTranslations();
|
||||
const {isAuth} = useUser();
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{ p: 1 }}>
|
||||
<CenterLayout spacing={3}>
|
||||
<StyledImage
|
||||
src={dahsboardImage}
|
||||
alt={t("app_name")}
|
||||
width={300}
|
||||
height={200}
|
||||
/>
|
||||
<Typography variant="h5" sx={{ textAlign: "center" }}>
|
||||
{t("app_name")}
|
||||
</Typography>
|
||||
{isAuth ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/dashboard",
|
||||
}}
|
||||
>
|
||||
{t("dashboard")}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
sx={{ mx: 2 }}
|
||||
variant="contained"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/login-expert",
|
||||
}}
|
||||
>
|
||||
{t("login_expert")}
|
||||
</Button>
|
||||
)}
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout spacing={3}>
|
||||
<StyledImage
|
||||
src={dahsboardImage}
|
||||
alt={t("app_name")}
|
||||
width={300}
|
||||
height={200}
|
||||
/>
|
||||
<Typography variant="h5" sx={{textAlign: "center"}}>
|
||||
{t("app_name")}
|
||||
</Typography>
|
||||
{isAuth ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/dashboard",
|
||||
}}
|
||||
>
|
||||
{t("dashboard")}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
sx={{mx: 2}}
|
||||
variant="contained"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/login-expert",
|
||||
}}
|
||||
>
|
||||
{t("login_expert")}
|
||||
</Button>
|
||||
)}
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default FirstComponent;
|
||||
|
||||
@@ -2,158 +2,149 @@ import LinkRouting from "@/core/components/LinkRouting";
|
||||
// import Notifications from "@/core/components/notifications";
|
||||
import PasswordField from "@/core/components/PasswordField";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { GET_USER_TOKEN } from "@/core/data/apiRoutes";
|
||||
import {GET_USER_TOKEN} from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import LoginIcon from "@mui/icons-material/Login";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Paper,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {Box, Button, Container, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import axios from "axios";
|
||||
import { Field, Formik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import Image from "next/image";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import {useSearchParams} from "next/navigation";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const LoginComponent = () => {
|
||||
const t = useTranslations();
|
||||
// const { directionApp } = useDirection(); // should delete because we dont have direction anymore
|
||||
const { setToken } = useUser(); // pass token to set token
|
||||
const t = useTranslations();
|
||||
// const { directionApp } = useDirection(); // should delete because we dont have direction anymore
|
||||
const {setToken} = useUser(); // pass token to set token
|
||||
|
||||
// gettin url query
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
// gettin url query
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
|
||||
//formik properties
|
||||
const handleSubmit = async (values, props) => {
|
||||
await axios
|
||||
.post(GET_USER_TOKEN, {
|
||||
username: values.username,
|
||||
password: values.password,
|
||||
})
|
||||
.then(function (response) {
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
// Notifications(directionApp, error.response, t);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
const initialValues = {
|
||||
username: "",
|
||||
password: "",
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
username: Yup.string().required(t("LoginPage.error_message_required")),
|
||||
password: Yup.string().required(t("LoginPage.error_message_required")),
|
||||
});
|
||||
//formik properties
|
||||
const handleSubmit = async (values, props) => {
|
||||
await axios
|
||||
.post(GET_USER_TOKEN, {
|
||||
username: values.username,
|
||||
password: values.password,
|
||||
})
|
||||
.then(function (response) {
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
// Notifications(directionApp, error.response, t);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
const initialValues = {
|
||||
username: "",
|
||||
password: "",
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
username: Yup.string().required(t("LoginPage.error_message_required")),
|
||||
password: Yup.string().required(t("LoginPage.error_message_required")),
|
||||
});
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{ p: 1 }}>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={0}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<Stack spacing={2} sx={{ p: 2 }}>
|
||||
<Box
|
||||
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||
>
|
||||
<Image fill src="/images/login.svg" alt={t("app_name")} />
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("login_expert")}
|
||||
</Typography>
|
||||
<StyledForm sx={{ width: "100%" }}>
|
||||
<Stack spacing={3} sx={{ p: 2 }}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="username"
|
||||
variant="outlined"
|
||||
label={t("LoginPage.text_field_user_name")}
|
||||
placeholder={t(
|
||||
"LoginPage.text_field_enter_your_username"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.username && props.errors.username
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.username ? props.errors.username : null
|
||||
}
|
||||
/>
|
||||
<PasswordField
|
||||
name="password"
|
||||
label={t("LoginPage.text_field_password")}
|
||||
error={
|
||||
props.touched.password && props.errors.password
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.password ? props.errors.password : null
|
||||
}
|
||||
placeholder={t(
|
||||
"LoginPage.text_field_enter_your_password"
|
||||
)}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
fullWidth
|
||||
size="medium"
|
||||
endIcon={<LoginIcon />}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={0}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{t("LoginPage.button_submit")}
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<LinkRouting
|
||||
sx={{ margin: 2 }}
|
||||
href={
|
||||
backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
|
||||
}
|
||||
>
|
||||
{t("LoginPage.link_routing_back_to")}{" "}
|
||||
{backUrlDecodedPath
|
||||
? t("LoginPage.link_routing_previuos_page")
|
||||
: t("LoginPage.link_routing_main_page")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
{(props) => (
|
||||
<Stack spacing={2} sx={{p: 2}}>
|
||||
<Box
|
||||
sx={{position: "relative", width: "100%", height: 200}}
|
||||
>
|
||||
<Image fill src="/images/login.svg" alt={t("app_name")}/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("login_expert")}
|
||||
</Typography>
|
||||
<StyledForm sx={{width: "100%"}}>
|
||||
<Stack spacing={3} sx={{p: 2}}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="username"
|
||||
variant="outlined"
|
||||
label={t("LoginPage.text_field_user_name")}
|
||||
placeholder={t(
|
||||
"LoginPage.text_field_enter_your_username"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.username && props.errors.username
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.username ? props.errors.username : null
|
||||
}
|
||||
/>
|
||||
<PasswordField
|
||||
name="password"
|
||||
label={t("LoginPage.text_field_password")}
|
||||
error={
|
||||
props.touched.password && props.errors.password
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.password ? props.errors.password : null
|
||||
}
|
||||
placeholder={t(
|
||||
"LoginPage.text_field_enter_your_password"
|
||||
)}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
fullWidth
|
||||
size="medium"
|
||||
endIcon={<LoginIcon/>}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{t("LoginPage.button_submit")}
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<LinkRouting
|
||||
sx={{margin: 2}}
|
||||
href={
|
||||
backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
|
||||
}
|
||||
>
|
||||
{t("LoginPage.link_routing_back_to")}{" "}
|
||||
{backUrlDecodedPath
|
||||
? t("LoginPage.link_routing_previuos_page")
|
||||
: t("LoginPage.link_routing_main_page")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginComponent;
|
||||
|
||||
Reference in New Issue
Block a user