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

Merge branch 'release/v1.28.3'

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2023-12-02 17:18:34 +03:30
parent e7cd85b182 d17c647ab9
commit 413c21ae4a
12 changed files with 608 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example.env.local
View File

@@ -1,5 +1,5 @@
NEXT_PUBLIC_API_NAME = "Loan Facilities Dashboard"
NEXT_PUBLIC_API_VERSION = "1.22.3"
NEXT_PUBLIC_API_VERSION = "1.28.3"
NEXT_PUBLIC_DEFAULT_LANGUAGE = "fa"
NEXT_PUBLIC_DEFAULT_DIRECTION = "rtl"

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

@@ -1,26 +1,79 @@
import UploadSystem from "@/core/components/UploadSystem";
import useNotification from "@/lib/app/hooks/useNotification";
import useRequest from "@/lib/app/hooks/useRequest";
import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
import {
Button,
DialogActions,
DialogContent,
FormHelperText,
Grid,
LinearProgress,
Stack,
TextField,
Typography
} from "@mui/material"
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {CONFIRM_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
import {useState} from "react";
import {
CONFIRM_MACHINARY_OFFICE,
CONFIRM_MACHINARY_OFFICE_DETAILS
} from "@/core/data/apiRoutes";
import {useEffect, useState} from "react";
import PriceField from "@/core/components/PriceField";
import * as Yup from "yup";
import CustomAccordion from "@/core/components/CustomAccordion";
import ImageContent from "@/core/components/ImageContent";
const vehicle_amount = {
"اتوبوس": 7000,
"مینی بوس": 2000,
}
const ConfirmContent = ({mutate, setOpenConfirmDialog, rowId, vehicle_type}) => {
const ConfirmContent = ({mutate, setOpenConfirmDialog, rowId, vehicle_type , handleSizeChangeClick}) => {
const t = useTranslations();
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const requestServer = useRequest({auth: true})
const requestServer = useRequest({auth: true , notification: false})
const {update_notification} = useNotification()
const [accordionStates, setAccordionStates] = useState([]);
const [hasImageShown, setHasImageShown] = useState(false);
const [imageLink, setImageLink] = useState(null);
const [detailsList, setDetailsData] = useState(null);
const [loading, setLoading] = useState(true);
const [isSkeleton, setIsSkeleton] = useState(false);
useEffect(() => {
requestServer(`${CONFIRM_MACHINARY_OFFICE_DETAILS}/${rowId}`, 'get')
.then((response) => {
const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false);
setAccordionStates(booleanData);
setDetailsData(response.data)
})
.catch(() => {
}).finally(() => {
setLoading(false);
});
}, []);
const handleAccordionChange = (index) => {
const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
setAccordionStates(newAccordionStates);
if (!newAccordionStates[index])
{
handleSizeChangeClick('sm');
setHasImageShown(false);
setIsSkeleton(false)
}
else {
handleSizeChangeClick('xl');
setHasImageShown(true);
setImageLink(detailsList.data.attachment_files[index])
setIsSkeleton(true)
}
};
const validationSchema = Yup.object().shape({
proposed_amount: Yup.mixed().test(
"is-number",
@@ -91,77 +144,104 @@ const ConfirmContent = ({mutate, setOpenConfirmDialog, rowId, vehicle_type}) =>
}
};
const renderCustomAccordions = () => {
if (detailsList && detailsList.data && detailsList.data.attachment_files) {
return detailsList.data.attachment_files.map((file, index) => (
<CustomAccordion
key={index}
title={`${file.title}`}
hasOpened={accordionStates[index]}
hasAccordionOpened={null}
handleAccordionChange={() => handleAccordionChange(index)}
accordionIndex={index}
downloadFile={file.attachment}
/>
));
}
return null;
};
return (
<>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<PriceField
name="proposed_amount"
label={<>
<span>{t("ConfirmDialog.proposed_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
type="text"
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
variant="outlined"
value={formik.values.proposed_amount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("proposed_amount")}
error={
formik.touched.proposed_amount &&
Boolean(formik.errors.proposed_amount)
}
helperText={
formik.touched.proposed_amount && formik.errors.proposed_amount
}
sx={{mt: 1}}
fullWidth
/>
</Stack>
<Stack>
<Typography>{t("MachinaryOffice.upload_file")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
onBlur={formik.handleBlur("confirm_img")}
error={
formik.touched.confirm_img &&
Boolean(formik.errors.confirm_img)
}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
<FormHelperText
error={Boolean(formik.errors.confirm_img)}
>
{formik.touched.confirm_img && formik.errors.confirm_img}
</FormHelperText>
</Stack>
</Stack>
<Grid container spacing={2}>
<Grid item xs={hasImageShown ? 6 : 12}>
{loading ? <LinearProgress /> : renderCustomAccordions()}
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<PriceField
name="proposed_amount"
label={<>
<span>{t("ConfirmDialog.proposed_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
type="text"
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
variant="outlined"
value={formik.values.proposed_amount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("proposed_amount")}
error={
formik.touched.proposed_amount &&
Boolean(formik.errors.proposed_amount)
}
helperText={
formik.touched.proposed_amount && formik.errors.proposed_amount
}
sx={{mt: 1}}
fullWidth
/>
</Stack>
<Stack>
<Typography>{t("MachinaryOffice.upload_file")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
onBlur={formik.handleBlur("confirm_img")}
error={
formik.touched.confirm_img &&
Boolean(formik.errors.confirm_img)
}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
<FormHelperText
error={Boolean(formik.errors.confirm_img)}
>
{formik.touched.confirm_img && formik.errors.confirm_img}
</FormHelperText>
</Stack>
</Stack>
</Grid>
<Grid item xs={6}>
<Stack sx={{ display: hasImageShown ? 'flex' : 'none', alignItems: 'center', gap: 0.5 , justifyContent:'center'}}>
<ImageContent imageLink={imageLink} isSkeleton={isSkeleton} setIsSkeleton={setIsSkeleton}/>
</Stack>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"

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

@@ -1,12 +1,25 @@
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {useEffect, useState} from "react";
import ConfirmContent from "./ConfirmContent";
import CallMadeIcon from '@mui/icons-material/CallMade';
const Confirm = ({rowId, mutate, vehicle_type}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const [dialogSize, setDialogSize] = useState('sm');
useEffect(() => {
if (!openConfirmDialog) {
setDialogSize('sm');
}
}, [openConfirmDialog]);
const handleSizeChangeClick = (size) => {
setDialogSize(size);
};
return (
<>
<Tooltip title={t("ConfirmDialog.confirm")}>
@@ -20,9 +33,9 @@ const Confirm = ({rowId, mutate, vehicle_type}) => {
</IconButton>
</Tooltip>
<Dialog fullWidth open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
PaperProps={{sx: {transition: 'all .3s' , boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}} maxWidth={dialogSize}>
<DialogTitle>{t("MachinaryOffice.confirm")}</DialogTitle>
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} handleSizeChangeClick={handleSizeChangeClick}
vehicle_type={vehicle_type}/>
</Dialog>
</>

205
src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx
View File

@@ -1,21 +1,43 @@
import UploadSystem from "@/core/components/UploadSystem";
import useNotification from "@/lib/app/hooks/useNotification";
import useRequest from "@/lib/app/hooks/useRequest";
import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
import {
Box,
Button,
DialogActions,
DialogContent,
FormHelperText,
Grid,
LinearProgress,
Stack,
TextField,
Typography
} from "@mui/material"
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {CONFIRM_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
import {useState} from "react";
import {
CONFIRM_NAVGAN_PROVINCE_MANAGER,
CONFIRM_PROVINCE_MANAGER_DETAILS
} from "@/core/data/apiRoutes";
import {useEffect, useState} from "react";
import * as Yup from "yup";
import CustomAccordion from "@/core/components/CustomAccordion";
import ImageContent from "@/core/components/ImageContent";
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeClick}) => {
const t = useTranslations();
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const requestServer = useRequest({auth: true})
const requestServer = useRequest({auth: true , notification: false})
const {update_notification} = useNotification()
const [accordionStates, setAccordionStates] = useState([]);
const [hasImageShown, setHasImageShown] = useState(false);
const [imageLink, setImageLink] = useState(null);
const [detailsList, setDetailsData] = useState(null);
const [loading, setLoading] = useState(true);
const [isSkeleton, setIsSkeleton] = useState(false);
const validationSchema = Yup.object().shape({
confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error"))
@@ -30,6 +52,37 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
})
})
useEffect(() => {
requestServer(`${CONFIRM_PROVINCE_MANAGER_DETAILS}/${rowId}`, 'get')
.then((response) => {
const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false);
setAccordionStates(booleanData);
setDetailsData(response.data)
})
.catch(() => {
}).finally(() => {
setLoading(false);
});
}, []);
const handleAccordionChange = (index) => {
const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
setAccordionStates(newAccordionStates);
if (!newAccordionStates[index])
{
handleSizeChangeClick('sm');
setHasImageShown(false);
setIsSkeleton(false)
}
else {
handleSizeChangeClick('xl');
setHasImageShown(true);
setImageLink(detailsList.data.attachment_files[index])
setIsSkeleton(true)
}
};
const formik = useFormik({
initialValues: {
description: "",
@@ -71,51 +124,109 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
setShowAddIcon(false);
}
};
const renderCustomAccordions = () => {
if (detailsList && detailsList.data && detailsList.data.attachment_files) {
return detailsList.data.attachment_files.map((file, index) => (
<CustomAccordion
key={index}
title={`${file.title}`}
hasOpened={accordionStates[index]}
hasAccordionOpened={null}
handleAccordionChange={() => handleAccordionChange(index)}
accordionIndex={index}
downloadFile={file.attachment}
/>
));
}
return null;
};
const numberShowBox = () => {
return (
<>
<Box sx={{ border: '1px solid #ccc' ,p:2 , mb:2 , borderRadius: '8px'}}>
<Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("sidebar.machinery-expert")}</Typography>
<Typography pt={1}>
{isNaN((detailsList?.data?.proposed_amount) / 10)
? ""
: ((detailsList?.data?.proposed_amount) / 10).toLocaleString()}{" "}
{t("ConfirmDialog.unit")}
</Typography>
</Box>
<Box sx={{ border: '1px solid #ccc' ,p:2 , mb:2 , borderRadius: '8px'}}>
<Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("secondary.passenger-boss")}</Typography>
<Typography pt={1}>
{isNaN((detailsList?.data?.approved_amount) / 10)
? ""
: ((detailsList?.data?.approved_amount) / 10).toLocaleString()}{" "}
{t("ConfirmDialog.unit")}
</Typography>
</Box>
</>
);
};
return (
<>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
onBlur={() => formik.handleBlur("confirm_img")}
error={
formik.touched.confirm_img &&
Boolean(formik.errors.confirm_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.confirm_img)}
>
{formik.touched.confirm_img && formik.errors.confirm_img}
</FormHelperText>
</Stack>
</Stack>
<Grid container spacing={2}>
<Grid item xs={hasImageShown ? 6 : 12}>
{loading ? <LinearProgress /> :
<>
{numberShowBox()}
{renderCustomAccordions()}
</>
}
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
onBlur={() => formik.handleBlur("confirm_img")}
error={
formik.touched.confirm_img &&
Boolean(formik.errors.confirm_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.confirm_img)}
>
{formik.touched.confirm_img && formik.errors.confirm_img}
</FormHelperText>
</Stack>
</Stack>
</Grid>
<Grid item xs={6}>
<Stack sx={{ display: hasImageShown ? 'flex' : 'none', alignItems: 'center', gap: 0.5 , justifyContent:'center'}}>
<ImageContent imageLink={imageLink} isSkeleton={isSkeleton} setIsSkeleton={setIsSkeleton}/>
</Stack>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"

17
src/components/dashboard/navgan-province-manager/Form/ConfirmForm/index.jsx
View File

@@ -1,11 +1,22 @@
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {useEffect, useState} from "react";
import ConfirmContent from "./ConfirmContent";
import CallMadeIcon from '@mui/icons-material/CallMade';
const Confirm = ({rowId, mutate}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const [dialogSize, setDialogSize] = useState('sm');
useEffect(() => {
if (!openConfirmDialog) {
setDialogSize('sm');
}
}, [openConfirmDialog]);
const handleSizeChangeClick = (size) => {
setDialogSize(size);
};
return (
<>
<Tooltip title={t("ConfirmDialog.confirm")}>
@@ -19,9 +30,9 @@ const Confirm = ({rowId, mutate}) => {
</IconButton>
</Tooltip>
<Dialog fullWidth open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
PaperProps={{sx: {transition: 'all .3s', boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}} maxWidth={dialogSize}>
<DialogTitle>{t("NavganProvinceManager.confirm")}</DialogTitle>
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} handleSizeChangeClick={handleSizeChangeClick}/>
</Dialog>
</>
)

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

@@ -1,26 +1,80 @@
import UploadSystem from "@/core/components/UploadSystem";
import useNotification from "@/lib/app/hooks/useNotification";
import useRequest from "@/lib/app/hooks/useRequest";
import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
import {
Box,
Button,
DialogActions,
DialogContent,
FormHelperText,
Grid,
LinearProgress,
Stack,
TextField,
Typography
} from "@mui/material"
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes";
import {useState} from "react";
import {
CONFIRM_PASSENGER_BOSS,
EXPORT_PASSENGER_BOSS_DETAILS,
} from "@/core/data/apiRoutes";
import {useEffect, useState} from "react";
import PriceField from "@/core/components/PriceField";
import * as Yup from "yup";
import CustomAccordion from "@/core/components/CustomAccordion";
import ImageContent from "@/core/components/ImageContent";
const vehicle_amount = {
"اتوبوس": 7000,
"مینی بوس": 2000,
}
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type}) => {
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type , handleSizeChangeClick}) => {
const t = useTranslations();
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const requestServer = useRequest({auth: true})
const {update_notification} = useNotification()
const requestServer = useRequest({auth: true ,notification: false})
const {update_notification} = useNotification();
const [accordionStates, setAccordionStates] = useState([]);
const [hasImageShown, setHasImageShown] = useState(false);
const [imageLink, setImageLink] = useState(null);
const [detailsList, setDetailsData] = useState(null);
const [loading, setLoading] = useState(true);
const [isSkeleton, setIsSkeleton] = useState(false);
useEffect(() => {
requestServer(`${EXPORT_PASSENGER_BOSS_DETAILS}/${rowId}`, 'get')
.then((response) => {
const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false);
setAccordionStates(booleanData);
setDetailsData(response.data)
})
.catch(() => {
}).finally(() => {
setLoading(false);
});
}, []);
const handleAccordionChange = (index) => {
const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
setAccordionStates(newAccordionStates);
if (!newAccordionStates[index])
{
handleSizeChangeClick('sm');
setHasImageShown(false);
setIsSkeleton(false)
}
else {
handleSizeChangeClick('xl');
setHasImageShown(true);
setImageLink(detailsList.data.attachment_files[index])
setIsSkeleton(true)
}
};
const validationSchema = Yup.object().shape({
approved_amount: Yup.mixed().test(
@@ -92,77 +146,125 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type}) =>
formik.setFieldValue("approved_amount", formik.values.approved_amount)
}
};
const renderCustomAccordions = () => {
if (detailsList && detailsList.data && detailsList.data.attachment_files) {
return detailsList.data.attachment_files.map((file, index) => (
<CustomAccordion
key={index}
title={`${file.title}`}
hasOpened={accordionStates[index]}
hasAccordionOpened={null}
handleAccordionChange={() => handleAccordionChange(index)}
accordionIndex={index}
downloadFile={file.attachment}
/>
));
}
return null;
};
const numberShowBox = () => {
return (
<>
<Box sx={{ border: '1px solid #ccc' ,p:2 , mb:2 , borderRadius: '8px'}}>
<Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("sidebar.machinery-expert")}</Typography>
<Typography pt={1}>
{isNaN((detailsList?.data?.proposed_amount) / 10)
? ""
: ((detailsList?.data?.proposed_amount) / 10).toLocaleString()}{" "}
{t("ConfirmDialog.unit")}
</Typography>
</Box>
</>
);
};
return (
<>
<DialogContent>
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<PriceField
name="approved_amount"
label={<>
<span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
type="text"
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
variant="outlined"
value={formik.values.approved_amount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("approved_amount")}
error={
formik.touched.approved_amount &&
Boolean(formik.errors.approved_amount)
}
helperText={
formik.touched.approved_amount && formik.errors.approved_amount
}
sx={{mt: 1}}
fullWidth
/>
</Stack>
<Stack>
<Typography>{t("PassengerBoss.upload_file")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
onBlur={() => formik.handleBlur("confirm_img")}
error={
formik.touched.confirm_img &&
Boolean(formik.errors.confirm_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.confirm_img)}
>
{formik.touched.confirm_img && formik.errors.confirm_img}
</FormHelperText>
</Stack>
</Stack>
<Grid container spacing={2}>
<Grid item xs={hasImageShown ? 6 : 12}>
{loading ? <LinearProgress /> :
<>
{numberShowBox()}
{renderCustomAccordions()}
</>
}
<Stack spacing={2}>
<Stack>
<TextField
name="description"
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{mt: 1}}
/>
</Stack>
<Stack>
<PriceField
name="approved_amount"
label={<>
<span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
type="text"
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
variant="outlined"
value={formik.values.approved_amount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("approved_amount")}
error={
formik.touched.approved_amount &&
Boolean(formik.errors.approved_amount)
}
helperText={
formik.touched.approved_amount && formik.errors.approved_amount
}
sx={{mt: 1}}
fullWidth
/>
</Stack>
<Stack>
<Typography>{t("PassengerBoss.upload_file")}</Typography>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
onBlur={() => formik.handleBlur("confirm_img")}
error={
formik.touched.confirm_img &&
Boolean(formik.errors.confirm_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.confirm_img)}
>
{formik.touched.confirm_img && formik.errors.confirm_img}
</FormHelperText>
</Stack>
</Stack>
</Grid>
<Grid item xs={6}>
<Stack sx={{ display: hasImageShown ? 'flex' : 'none', alignItems: 'center', gap: 0.5 , justifyContent:'center'}}>
<ImageContent imageLink={imageLink} isSkeleton={isSkeleton} setIsSkeleton={setIsSkeleton}/>
</Stack>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"

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

@@ -1,12 +1,24 @@
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
import {useTranslations} from "next-intl";
import {useState} from "react";
import {useEffect, useState} from "react";
import ConfirmContent from "./ConfirmContent";
import CallMadeIcon from '@mui/icons-material/CallMade';
const Confirm = ({rowId, mutate, vehicle_type}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const [dialogSize, setDialogSize] = useState('sm');
useEffect(() => {
if (!openConfirmDialog) {
setDialogSize('sm');
}
}, [openConfirmDialog]);
const handleSizeChangeClick = (size) => {
setDialogSize(size);
};
return (
<>
<Tooltip title={t("ConfirmDialog.confirm")}>
@@ -20,9 +32,9 @@ const Confirm = ({rowId, mutate, vehicle_type}) => {
</IconButton>
</Tooltip>
<Dialog fullWidth open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
PaperProps={{sx: {transition: 'all .3s' , boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}} maxWidth={dialogSize}>
<DialogTitle>{t("PassengerBoss.confirm")}</DialogTitle>
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} handleSizeChangeClick={handleSizeChangeClick}
vehicle_type={vehicle_type}/>
</Dialog>
</>

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

@@ -17,7 +17,7 @@ import {CONFIRM_TRANSPORTATION_ASSISTANCE, GET_TRANSPORTATION_ASSISTANCE_DETAILS
import {useEffect, useState} from "react";
import * as Yup from "yup";
import CustomAccordion from "@/core/components/CustomAccordion";
import ImageContent from "@/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent";
import ImageContent from "@/core/components/ImageContent";
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeClick}) => {
const t = useTranslations();
const [selectedImage, setSelectedImage] = useState("");
@@ -28,58 +28,44 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
const [accordionStates, setAccordionStates] = useState([]);
const [hasAccordionOpened, setHasAccordionOpened] = useState([]);
const {update_notification} = useNotification();
const [hasImageShown, sethasImageShown] = useState(false);
const [imageLink, setimageLink] = useState(null);
const [hasImageShown, setHasImageShown] = useState(false);
const [imageLink, setImageLink] = useState(null);
const [detailsList, setDetailsData] = useState(null);
const [loading, setLoading] = useState(true);
const [isSkeleton, setIsSkeleton] = useState(false);
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
useEffect(() => {
requestServer(`${GET_TRANSPORTATION_ASSISTANCE_DETAILS}/${rowId}`, 'get')
.then((response) => {
const booleanArray = Array.from({ length: response.data.data.attachment_files.length }, () => false);
setAccordionStates(booleanArray);
setHasAccordionOpened(booleanArray);
const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false);
setAccordionStates(booleanData);
setHasAccordionOpened(booleanData);
setDetailsData(response.data)
})
.catch((error) => {
.catch(() => {
}).finally(() => {
setLoading(false);
});
}, []);
useEffect(() => {
if (detailsList && detailsList.data && detailsList.data.attachment_files && detailsList.data.attachment_files.length !== 0) {
setIsButtonDisabled(true);
} else {
setIsButtonDisabled(false);
}
}, [detailsList]);
const handleAccordionChange = (index) => {
const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
setAccordionStates(newAccordionStates);
if (newAccordionStates[index]===false)
if (!newAccordionStates[index])
{
handleSizeChangeClick(index , false);
sethasImageShown(false);
handleSizeChangeClick('sm');
setHasImageShown(false);
setIsSkeleton(false)
}
else {
handleSizeChangeClick(index , true);
sethasImageShown(true);
setimageLink(detailsList.data.attachment_files[index])
handleSizeChangeClick('xl');
setHasImageShown(true);
setImageLink(detailsList.data.attachment_files[index])
setIsSkeleton(true)
const newHasAccordionOpened = [...hasAccordionOpened];
newHasAccordionOpened[index] = true;
setHasAccordionOpened(newHasAccordionOpened);
if (newHasAccordionOpened.every(opened => opened === true)) {
setIsButtonDisabled(false)
}
}
};
@@ -92,7 +78,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
})
.test('fileType', `${t("TransportationAssistance.upload_file_format")}`, (value) => {
if (!value) return true
const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']; // Define your allowed file types
const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf'];
return allowedTypes.includes(value.type);
})
})
@@ -149,37 +135,47 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
hasAccordionOpened={hasAccordionOpened[index]}
handleAccordionChange={() => handleAccordionChange(index)}
accordionIndex={index}
handleSizeChange={() => handleSizeChange(index)}
downloadFile={file.attachment}
/>
));
}
return null;
};
const numberShowBox = () => {
return (
<>
<Box sx={{ border: '1px solid #ccc' ,p:2 , mb:2 , borderRadius: '8px'}}>
<Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("sidebar.machinery-expert")}</Typography>
<Typography pt={1}>
{isNaN((detailsList?.data?.proposed_amount) / 10)
? ""
: ((detailsList?.data?.proposed_amount) / 10).toLocaleString()}{" "}
{t("ConfirmDialog.unit")}
</Typography>
</Box>
<Box sx={{ border: '1px solid #ccc' ,p:2 , mb:2 , borderRadius: '8px'}}>
<Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("secondary.passenger-boss")}</Typography>
<Typography pt={1}>
{isNaN((detailsList?.data?.approved_amount) / 10)
? ""
: ((detailsList?.data?.approved_amount) / 10).toLocaleString()}{" "}
{t("ConfirmDialog.unit")}
</Typography>
</Box>
</>
);
};
return (
<>
<DialogContent>
<Grid container spacing={2}>
<Grid item xs={hasImageShown ? 6 : 12}>
<Box sx={{ border: '1px solid #ccc' ,p:2 , mb:2 , borderRadius: '8px'}}>
<Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("sidebar.machinery-expert")}</Typography>
<Typography pt={1}>
{isNaN((detailsList?.data?.proposed_amount) / 10)
? ""
: ((detailsList?.data?.proposed_amount) / 10).toLocaleString()}{" "}
{t("ConfirmDialog.unit")}
</Typography>
</Box>
<Box sx={{ border: '1px solid #ccc' ,p:2 , mb:2 , borderRadius: '8px'}}>
<Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("secondary.passenger-boss")}</Typography>
<Typography pt={1}>
{isNaN((detailsList?.data?.approved_amount) / 10)
? ""
: ((detailsList?.data?.approved_amount) / 10).toLocaleString()}{" "}
{t("ConfirmDialog.unit")}
</Typography>
</Box>
{loading ? <LinearProgress /> : renderCustomAccordions()}
{loading ? <LinearProgress /> :
<>
{numberShowBox()}
{renderCustomAccordions()}
</>
}
<Stack spacing={2}>
<Stack>
<TextField
@@ -237,7 +233,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting || !formik.isValid ||
isButtonDisabled }
hasAccordionOpened.some((opened) => !opened) }
>
{t("ConfirmDialog.button-confirm")}
</Button>

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

@@ -14,14 +14,8 @@ const Confirm = ({rowId, mutate}) => {
}
}, [openConfirmDialog]);
const handleSizeChangeClick = (num , state) => {
if (state===true){
setDialogSize('xl');
}
else {
setDialogSize('sm');
}
const handleSizeChangeClick = (size) => {
setDialogSize(size);
};
return (
@@ -39,7 +33,7 @@ const Confirm = ({rowId, mutate}) => {
<Dialog fullWidth open={openConfirmDialog}
PaperProps={{sx: {transition: 'all .3s', boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}} maxWidth={dialogSize}>
<DialogTitle>{t("TransportationAssistance.confirm")}</DialogTitle>
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} setDialogSize={setDialogSize} handleSizeChangeClick={handleSizeChangeClick}/>
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} handleSizeChangeClick={handleSizeChangeClick}/>
</Dialog>
</>
)

23
src/core/components/CustomAccordion.jsx
View File

@@ -10,29 +10,18 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import VerifiedIcon from '@mui/icons-material/Verified';
import Check from "@mui/icons-material/Check";
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
import VisibilityRoundedIcon from "@mui/icons-material/VisibilityRounded";
import {useTranslations} from "next-intl";
import {useState} from "react";
const CustomAccordion = ({ title,
hasOpened,
hasAccordionOpened,
handleAccordionChange,
accordionIndex,
handleSizeChange }) => {
const t = useTranslations();
const CustomAccordion = ({ title, hasOpened, hasAccordionOpened, handleAccordionChange, accordionIndex , downloadFile}) => {
const [downloadStatus, setDownloadStatus] = useState('initial');
const handleDownloadClick = (setStatus) => {
console.log(setStatus)
const handleDownloadClick = (setStatus , url) => {
setStatus('downloading');
window.open(url, '_blank');
setTimeout(() => {
setStatus('completed');
setTimeout(() => {
setStatus('initial');
}, 2500);
}, 2000);
// Perform the actual download logic here
}, 1200);
}, 1000);
};
return(
<Accordion elevation={0} expanded={hasOpened || false} onChange={() => handleAccordionChange(accordionIndex)} sx={{
@@ -52,7 +41,7 @@ const CustomAccordion = ({ title,
<Grid container direction="column" alignItems="center">
<Grid item>
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button onClick={() => handleDownloadClick(setDownloadStatus)}>
<Button onClick={() => handleDownloadClick(setDownloadStatus , downloadFile)}>
{downloadStatus === 'completed' ? (
<Check sx={{ color: 'white' }} fontSize="small" />
) : downloadStatus === 'downloading' ? (

21
src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx → src/core/components/ImageContent.jsx
View File

@@ -1,29 +1,30 @@
import {Box, Skeleton, Stack} from "@mui/material";
import {useEffect} from "react";
const ImageContent = (link) => {
const ImageContent = (prop) => {
useEffect(() => {
const timer = setTimeout(() => {
link.setIsSkeleton(false);
}, 1000);
prop.setIsSkeleton(false);
}, 1500);
return () => clearTimeout(timer);
}, [link.isSkeleton]);
}, [prop.isSkeleton]);
const isPDF = link && link.imageLink && link.imageLink.attachment && link.imageLink.attachment.endsWith('.pdf');
const isPDF = prop.imageLink && prop.imageLink.attachment && prop.imageLink.attachment.endsWith('.pdf');
return (
<>
<Stack sx={{width :"100%"}}>
{link.isSkeleton && (
{prop.isSkeleton && (
<Box sx={{display:'flex' ,justifyContent:'center' , border: '1px solid #ccc' ,p:5 , height: '700px' , borderRadius: '8px' , width:'100%'}}>
<Skeleton variant="rectangular" animation="wave" sx={{ width: '100%', height: '100%' }} />
</Box>
)}
{isPDF ? (
<embed src={link.imageLink.attachment} type="application/pdf" width="100%" height="700px" style={{ display: link.isSkeleton ? 'none' : 'block' }}/>
<embed src={prop.imageLink.attachment} type="application/pdf" width="100%" height="700px" style={{ display: prop.isSkeleton ? 'none' : 'block' }}/>
) : (
link && link.imageLink && link.imageLink.attachment && (
<Box sx={{display: link.isSkeleton ? 'none' : 'flex' ,justifyContent:'center' , border: '1px solid #ccc' , p:5 , height: '700px' , borderRadius: '8px',}}>
<Box component="img" src={link.imageLink.attachment} alt="Image Preview" width="auto" height="auto" sx={{maxHeight: '700px' , maxWidth:'100%'}}></Box>
prop.imageLink && prop.imageLink.attachment && (
<Box sx={{display: prop.isSkeleton ? 'none' : 'flex' ,justifyContent:'center' , border: '1px solid #ccc' , p:5 , height: '700px' , borderRadius: '8px',}}>
<Box component="img" src={prop.imageLink.attachment} alt="Image Preview" width="auto" height="auto" sx={{maxHeight: '700px' , maxWidth:'100%'}}></Box>
</Box>
)
)}

9
src/core/data/apiRoutes.js
View File

@@ -37,6 +37,9 @@ export const REJECT_PASSENGER_BOSS =
BASE_URL + "/dashboard/province_working_group/reject";
export const EXPORT_PASSENGER_BOSS =
BASE_URL + "/dashboard/province_working_group/export";
export const EXPORT_PASSENGER_BOSS_DETAILS =
BASE_URL + "/dashboard/province_working_group";
//passenger boss
//transportation assistance
@@ -61,6 +64,9 @@ export const GET_MACHINARY_OFFICE =
export const CONFIRM_MACHINARY_OFFICE =
BASE_URL + "/dashboard/machinery_expert/confirm";
export const CONFIRM_MACHINARY_OFFICE_DETAILS =
BASE_URL + "/dashboard/machinery_expert";
export const REJECT_MACHINARY_OFFICE =
BASE_URL + "/dashboard/machinery_expert/reject";
export const EXPORT_MACHINARY_OFFICE =
@@ -89,6 +95,9 @@ export const REJECT_NAVGAN_PROVINCE_MANAGER =
BASE_URL + "/dashboard/province_manager/reject";
export const EXPORT_NAVGAN_PROVINCE_MANAGER =
BASE_URL + "/dashboard/province_manager/export";
export const CONFIRM_PROVINCE_MANAGER_DETAILS =
BASE_URL + "/dashboard/province_manager";
//navgan province manager
// refahi province manager