diff --git a/package.json b/package.json index b59745d..3097485 100644 --- a/package.json +++ b/package.json @@ -49,4 +49,4 @@ "eslint-config-prettier": "^9.1.0", "prettier": "^3.3.2" } -} \ No newline at end of file +} diff --git a/src/app/(withAuth)/dashboard/car-details/page.js b/src/app/(withAuth)/dashboard/car-details/page.js new file mode 100644 index 0000000..b844158 --- /dev/null +++ b/src/app/(withAuth)/dashboard/car-details/page.js @@ -0,0 +1,7 @@ +import TestPage from "@/components/dashboard/carDetails"; + +const Page = () => { + return ; +}; + +export default Page; diff --git a/src/components/dashboard/carDetails/CarDetailsContent.jsx b/src/components/dashboard/carDetails/CarDetailsContent.jsx new file mode 100644 index 0000000..bce967d --- /dev/null +++ b/src/components/dashboard/carDetails/CarDetailsContent.jsx @@ -0,0 +1,187 @@ +import { + Button, Collapse, + DialogActions, + DialogContent, Grid, + Stack, TextField +} from "@mui/material"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; +import {useFormik} from "formik"; +import moment from "jalali-moment"; +import * as Yup from "yup"; +import {useState} from "react"; +import ApplicantRequestDetail from "@/core/components/ApplicantRequestDetail"; +import DetailMap from "@/core/components/ApplicantRequestDetail/DetailMap"; +import FlyToPolyline from "@/core/components/ApplicantRequestDetail/FlyToPolyline"; +import {MapContainer} from "react-leaflet"; +import dynamic from "next/dynamic"; +import MapLoading from "@/core/components/MapLayer/Loading"; +const MapLayer = dynamic(() => import("@/core/components/MapLayer"), { + loading: () => , + ssr: false, +}); + +const fakeData = { + id: 1, + shomareh_darkhast: "2124", + ostan: "ostan", + shahr: "shahr", + shahrestan: "shahrestan", + bakhsh: "bakhsh", + roosta: "roosta", + tarikh_darkhast: "tarikh_darkhast", + sazman: "sazman", + masahat_zamin: "masahat_zamin", + masahat_tarh: "masahat_tarh", + gorooh_tarh: "gorooh_tarh", + onvane_tarh: "onvane_tarh", + address: "کرج - فلان جا - جنب پاساژ - نزدیک اونجا - اونور خیابون - زیر رو گذر - روی زیر گذر", + file_mosavab: "file", + polyline: [ + [35.6892, 51.3890], + [35.7074, 51.3929], + ], +}; + +const CarDetailsContent = ({setOpenCarDialog}) => { + const [openCarDetailContent, setOpenCarDetailContent] = useState(false) + const initialValues = { + start_date: "", + end_date: "", + vehicle_code: "", + } + + const validationSchema = Yup.object().shape({ + start_date: Yup.string().required("تاریخ شروع الزامیست!!!"), + end_date: Yup.string().test( + "is-greater", + "تاریخ اتمام نمی‌تواند کمتر از تاریخ شروع باشد", + function (value) { + const {start_date} = this.parent; // Access other field values + if (!value || !start_date) return true; // Skip validation if either field is empty + return moment(value, "YYYY/MM/DD").isSameOrAfter( + moment(start_date, "YYYY/MM/DD") + ); + } + ).required("تاریخ اتمام الزامیست!!!"), + vehicle_code: Yup.mixed() + .test("is-number", "کد خودرو باید عدد باشد!!!", (value) => !isNaN(value)) + .test("positive", "کد خودرو باید مثبت باشد!!!", (value) => value >= 0) + .required("کد خودرو الزامیست!!!"), + }) + + const handleSubmit = async (values, props) => { + props.setSubmitting(true); + setOpenCarDetailContent(true) + console.log(values) + } + + const formik = useFormik({ + initialValues, + validationSchema, + onSubmit: handleSubmit, + }); + console.log(formik.errors) + return ( + <> + + + + + + { + if (!isNaN(event.target.value)) { + formik.setFieldValue("vehicle_code", event.target.value); + } else { + formik.setFieldValue("vehicle_code", formik.values.vehicle_code); + } + }} + size={"small"} + error={formik.touched.vehicle_code && Boolean(formik.errors.vehicle_code)} + helperText={formik.touched.vehicle_code && formik.errors.vehicle_code} + onBlur={formik.handleBlur("vehicle_code")} + fullWidth + /> + + + + + + + + + + + + + + + + {/**/} + + + + + + + + + ); +}; +export default CarDetailsContent; diff --git a/src/components/dashboard/carDetails/index.jsx b/src/components/dashboard/carDetails/index.jsx new file mode 100644 index 0000000..b7fe790 --- /dev/null +++ b/src/components/dashboard/carDetails/index.jsx @@ -0,0 +1,45 @@ +"use client"; +import PageTitle from "@/core/components/PageTitle"; +import {Dialog, DialogTitle, IconButton, Stack, Tooltip} from "@mui/material"; +import {useState} from "react"; +import DriveEtaIcon from "@mui/icons-material/DriveEta"; +import CarDetailsContent from "@/components/dashboard/carDetails/CarDetailsContent"; + +const TestPage = () => { + const [openCarDialog, setOpenCarDialog] = useState(false) + return ( + + + <> + + { + setOpenCarDialog(true); + }} + > + + + + setOpenCarDialog(false)} + fullWidth + open={openCarDialog} + 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={"lg"} + > + + نمایش اطلاعات خودرو + + + + + + ); +}; +export default TestPage; diff --git a/src/core/components/ApplicantRequestDetail/FlyToPolyline.jsx b/src/core/components/ApplicantRequestDetail/FlyToPolyline.jsx new file mode 100644 index 0000000..c26ddd6 --- /dev/null +++ b/src/core/components/ApplicantRequestDetail/FlyToPolyline.jsx @@ -0,0 +1,21 @@ +"use client"; + +import { Polyline, useMap } from "react-leaflet"; +import { useEffect } from "react"; +const purpleOptions = { color: "purple" }; + +const FlyToPolyline = ({ polyline }) => { + const map = useMap(); + + useEffect(() => { + if (map) { + const leafletPolyline = L.polyline(polyline); // Create a Leaflet polyline + const bounds = leafletPolyline.getBounds(); // Get bounds from the polyline + map.flyToBounds(bounds, { padding: [50, 50] }); // Fly to the polyline bounds + } + }, [map, polyline]); + + return ; // Render the polyline +}; + +export default FlyToPolyline; diff --git a/src/core/components/MuiDatePicker.jsx b/src/core/components/MuiDatePicker.jsx new file mode 100644 index 0000000..31c25ba --- /dev/null +++ b/src/core/components/MuiDatePicker.jsx @@ -0,0 +1,61 @@ +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 {Box, IconButton, FormControl, FormHelperText, InputAdornment, Stack} from "@mui/material"; +import ClearIcon from "@mui/icons-material/Clear"; + +export default function PickerWithButtonField({ + formik, + name, + value, + error, + touched, + disabled, + }) { + return ( + + + + { + const formattedDate = moment(newValue).locale("en").format("YYYY-MM-DD HH:mm"); + formik.setFieldValue(name, formattedDate); + }} + slotProps={{ + textField: { + placeholder: name === "start_date" + ? "تاریخ شروع را وارد کنید" + : "تاریخ اتمام را وارد کنید", + variant: "outlined", + disabled, + fullWidth: true, + error: !!error, + helperText : touched && error , + size: "small", // Ensure that the TextField is small + InputProps: { + endAdornment: ( + + formik.setFieldValue(name, null)} + > + + + + ), + }, + }, + }} + /> + + + + ); +} diff --git a/src/core/utils/pageMenu.js b/src/core/utils/pageMenu.js index ccc70d3..39e4120 100644 --- a/src/core/utils/pageMenu.js +++ b/src/core/utils/pageMenu.js @@ -19,6 +19,7 @@ import ReportIcon from "@mui/icons-material/Report"; import AssignmentLateIcon from "@mui/icons-material/AssignmentLate"; import LineAxisIcon from "@mui/icons-material/LineAxis"; import ScienceIcon from "@mui/icons-material/Science"; +import DriveEtaIcon from '@mui/icons-material/DriveEta'; import BiotechIcon from "@mui/icons-material/Biotech"; export const pageMenu = [ @@ -493,4 +494,12 @@ export const pageMenu = [ icon: , permissions: ["azmayesh-type-management"], }, + { + id: "CarDetails", + label: "اطلاعات خودرو", + type: "page", + route: "/dashboard/car-details", + icon: , + permissions: ["all"], + }, ];