RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'feature/routing' (#2) from feature/routing into develop

Browse Source 
Reviewed-on: #2
This commit was merged in pull request #2.
This commit is contained in:
aminghasempoor
2026-06-13 08:21:42 +00:00
parent a975bd1f88 dec752bc17
commit be0922cfcc
66 changed files with 2903 additions and 2422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -15,6 +15,7 @@
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@hookform/resolvers": "^3.9.0",
"@mapbox/polyline": "^1.2.1",
"@mui/icons-material": "^5.16.7",
"@mui/lab": "^5.0.0-alpha.173",
"@mui/material": "^5.16.7",

18
public/icons/destination-icon.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="-63" y="-64" width="146" height="149"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(32.5px);clip-path:url(#bgblur_0_2302_1310_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_2302_1310)" data-figma-bg-blur-radius="65">
<path d="M9.38305 1.02444C15.543 0.551472 19.9197 7.03396 17.1518 12.6025C15.8547 15.2112 13.6759 15.7958 11.9558 17.881C11.6271 18.2796 10.7507 19.7126 10.4472 19.8829C9.98265 20.1439 9.56634 19.9365 9.25987 19.5758C8.76416 18.992 8.37012 18.2543 7.83732 17.6549C6.56763 16.2249 4.84751 15.4187 3.69508 13.9418C-0.231962 8.90724 3.07767 1.50856 9.38305 1.02444ZM9.55002 5.15175C6.61587 5.45517 5.13915 8.92434 6.86743 11.3212C8.38571 13.4272 11.6293 13.425 13.1468 11.3212C15.1415 8.554 12.925 4.80298 9.55076 5.15175H9.55002Z" fill="#EF4444"/>
</g>
<defs>
<filter id="filter0_d_2302_1310" x="-63" y="-64" width="146" height="149" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.25098 0 0 0 0 0.262745 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2302_1310"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2302_1310" result="shape"/>
</filter>
<clipPath id="bgblur_0_2302_1310_clip_path" transform="translate(63 64)"><path d="M9.38305 1.02444C15.543 0.551472 19.9197 7.03396 17.1518 12.6025C15.8547 15.2112 13.6759 15.7958 11.9558 17.881C11.6271 18.2796 10.7507 19.7126 10.4472 19.8829C9.98265 20.1439 9.56634 19.9365 9.25987 19.5758C8.76416 18.992 8.37012 18.2543 7.83732 17.6549C6.56763 16.2249 4.84751 15.4187 3.69508 13.9418C-0.231962 8.90724 3.07767 1.50856 9.38305 1.02444ZM9.55002 5.15175C6.61587 5.45517 5.13915 8.92434 6.86743 11.3212C8.38571 13.4272 11.6293 13.425 13.1468 11.3212C15.1415 8.554 12.925 4.80298 9.55076 5.15175H9.55002Z"/>
</clipPath></defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

18
public/icons/origin-icon.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="-42.6271" y="-43.6271" width="105.045" height="105.045"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(22.31px);clip-path:url(#bgblur_0_2302_1307_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_2302_1307)" data-figma-bg-blur-radius="44.6271">
<path d="M10.3018 1.00977C14.4733 1.22136 17.7908 4.67141 17.791 8.89551C17.7908 13.2559 14.2559 16.7908 9.89551 16.791C5.67141 16.7908 2.22136 13.4733 2.00977 9.30176L2 8.89551L2.00977 8.48926C2.22119 4.31755 5.6713 1.00017 9.89551 1L10.3018 1.00977ZM9.89551 5.80566C8.18945 5.80584 6.80584 7.18945 6.80566 8.89551L6.80957 9.05371C6.89208 10.6863 8.2425 11.9842 9.89551 11.9844C11.5485 11.9842 12.898 10.6863 12.9805 9.05371L12.9844 8.89551L12.9805 8.73633C12.9003 7.1565 11.6336 5.88942 10.0537 5.80957L9.89551 5.80566Z" fill="#16A795"/>
</g>
<defs>
<filter id="filter0_d_2302_1307" x="-42.6271" y="-43.6271" width="105.045" height="105.045" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.686571"/>
<feGaussianBlur stdDeviation="0.686571"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.25098 0 0 0 0 0.262745 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2302_1307"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2302_1307" result="shape"/>
</filter>
<clipPath id="bgblur_0_2302_1307_clip_path" transform="translate(42.6271 43.6271)"><path d="M10.3018 1.00977C14.4733 1.22136 17.7908 4.67141 17.791 8.89551C17.7908 13.2559 14.2559 16.7908 9.89551 16.791C5.67141 16.7908 2.22136 13.4733 2.00977 9.30176L2 8.89551L2.00977 8.48926C2.22119 4.31755 5.6713 1.00017 9.89551 1L10.3018 1.00977ZM9.89551 5.80566C8.18945 5.80584 6.80584 7.18945 6.80566 8.89551L6.80957 9.05371C6.89208 10.6863 8.2425 11.9842 9.89551 11.9844C11.5485 11.9842 12.898 10.6863 12.9805 9.05371L12.9844 8.89551L12.9805 8.73633C12.9003 7.1565 11.6336 5.88942 10.0537 5.80957L9.89551 5.80566Z"/>
</clipPath></defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

14
src/app/(withAuth)/(dashboardLayout)/dashboard/machines/loading.jsx
View File

@@ -1,7 +1,7 @@
"use client";
import PageLoading from "@/core/components/PageLoading";
const Loading = () => {
return <PageLoading />;
};
export default Loading;
"use client";
import PageLoading from "@/core/components/PageLoading";
const Loading = () => {
return <PageLoading />;
};
export default Loading;

34
src/app/(withAuth)/(dashboardLayout)/dashboard/machines/page.jsx
View File

@@ -1,17 +1,17 @@
import WithPermission from "@/core/middlewares/withPermission";
import MachinesPage from "@/components/dashboard/machines";
export const metadata = {
title: "کارتابل ماشین‌ها",
};
const Page = () => {
return (
<>
<WithPermission permission_name={["all"]}>
<MachinesPage />
</WithPermission>
</>
);
};
export default Page;
import WithPermission from "@/core/middlewares/withPermission";
import MachinesPage from "@/components/dashboard/machines";
export const metadata = {
title: "کارتابل ماشین‌ها",
};
const Page = () => {
return (
<>
<WithPermission permission_name={["all"]}>
<MachinesPage />
</WithPermission>
</>
);
};
export default Page;

36
src/app/(withAuth)/(dashboardLayout)/dashboard/road-missions/reports/missionsReports/page.js
View File

@@ -1,18 +1,18 @@
import WithPermission from "@/core/middlewares/withPermission";
import MissionsReportPage from "@/components/dashboard/roadMissions/reports/taradodReports";
export const metadata = {
title: "کارتابل گزارش ترددها",
};
const Page = () => {
return (
<WithPermission
permission_name={[
"all", // TODO : change permission
]}
>
<MissionsReportPage />
</WithPermission>
);
};
export default Page;
import WithPermission from "@/core/middlewares/withPermission";
import MissionsReportPage from "@/components/dashboard/roadMissions/reports/taradodReports";
export const metadata = {
title: "کارتابل گزارش ترددها",
};
const Page = () => {
return (
<WithPermission
permission_name={[
"all", // TODO : change permission
]}
>
<MissionsReportPage />
</WithPermission>
);
};
export default Page;

36
src/app/(withAuth)/(dashboardLayout)/dashboard/road-missions/reports/violationsReports/page.js
View File

@@ -1,18 +1,18 @@
import ViolationsReportsPage from "@/components/dashboard/roadMissions/reports/violationsReports";
import WithPermission from "@/core/middlewares/withPermission";
export const metadata = {
title: "کارتابل گزارش تخلفات",
};
export default function Page() {
return (
<WithPermission
permission_name={[
"all", // TODO : change permission
]}
>
<ViolationsReportsPage />
</WithPermission>
);
}
import ViolationsReportsPage from "@/components/dashboard/roadMissions/reports/violationsReports";
import WithPermission from "@/core/middlewares/withPermission";
export const metadata = {
title: "کارتابل گزارش تخلفات",
};
export default function Page() {
return (
<WithPermission
permission_name={[
"all", // TODO : change permission
]}
>
<ViolationsReportsPage />
</WithPermission>
);
}

18
src/assets/images/destination-icon.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="-63" y="-64" width="146" height="149"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(32.5px);clip-path:url(#bgblur_0_2302_1310_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_2302_1310)" data-figma-bg-blur-radius="65">
<path d="M9.38305 1.02444C15.543 0.551472 19.9197 7.03396 17.1518 12.6025C15.8547 15.2112 13.6759 15.7958 11.9558 17.881C11.6271 18.2796 10.7507 19.7126 10.4472 19.8829C9.98265 20.1439 9.56634 19.9365 9.25987 19.5758C8.76416 18.992 8.37012 18.2543 7.83732 17.6549C6.56763 16.2249 4.84751 15.4187 3.69508 13.9418C-0.231962 8.90724 3.07767 1.50856 9.38305 1.02444ZM9.55002 5.15175C6.61587 5.45517 5.13915 8.92434 6.86743 11.3212C8.38571 13.4272 11.6293 13.425 13.1468 11.3212C15.1415 8.554 12.925 4.80298 9.55076 5.15175H9.55002Z" fill="#EF4444"/>
</g>
<defs>
<filter id="filter0_d_2302_1310" x="-63" y="-64" width="146" height="149" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.25098 0 0 0 0 0.262745 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2302_1310"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2302_1310" result="shape"/>
</filter>
<clipPath id="bgblur_0_2302_1310_clip_path" transform="translate(63 64)"><path d="M9.38305 1.02444C15.543 0.551472 19.9197 7.03396 17.1518 12.6025C15.8547 15.2112 13.6759 15.7958 11.9558 17.881C11.6271 18.2796 10.7507 19.7126 10.4472 19.8829C9.98265 20.1439 9.56634 19.9365 9.25987 19.5758C8.76416 18.992 8.37012 18.2543 7.83732 17.6549C6.56763 16.2249 4.84751 15.4187 3.69508 13.9418C-0.231962 8.90724 3.07767 1.50856 9.38305 1.02444ZM9.55002 5.15175C6.61587 5.45517 5.13915 8.92434 6.86743 11.3212C8.38571 13.4272 11.6293 13.425 13.1468 11.3212C15.1415 8.554 12.925 4.80298 9.55076 5.15175H9.55002Z"/>
</clipPath></defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

21
src/assets/images/prev-destination-icon.svg Normal file
View File

@@ -0,0 +1,21 @@
<svg width="42" height="66" viewBox="0 0 42 66" fill="#F15152" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" d="M21 66C23.7614 66 26 64.8807 26 63.5C26 62.1193 23.7614 61 21 61C18.2386 61 16 62.1193 16 63.5C16 64.8807 18.2386 66 21 66Z" fill="#F15152"/>
<path fill-rule="#F15152" clip-rule="evenodd" d="M21 0C32.598 0 42 9.40202 42 21C42 31.9234 33.6599 40.8989 23 41.906V62C23 63.1046 22.1046 64 21 64C19.8954 64 19 63.1046 19 62V41.906C8.34014 40.8989 0 31.9234 0 21C0 9.40202 9.40202 0 21 0Z" fill="#F15152"/>
<foreignObject x="-61" y="-61" width="164" height="164"></foreignObject><g filter="url(#filter0_d_173_69)" data-figma-bg-blur-radius="65">
<path d="M38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38C30.3888 38 38 30.3888 38 21Z" fill="#F15152"/>
</g>
<path d="M28 21C28 17.134 24.866 14 21 14C17.134 14 14 17.134 14 21C14 24.866 17.134 28 21 28C24.866 28 28 24.866 28 21Z" fill="white"/>
<defs>
<filter id="filter0_d_173_69" x="-61" y="-61" width="164" height="164" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.25098 0 0 0 0 0.262745 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_173_69"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_173_69" result="shape"/>
</filter>
<clipPath id="bgblur_0_173_69_clip_path" transform="translate(61 61)"><path d="M38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38C30.3888 38 38 30.3888 38 21Z"/>
</clipPath></defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

21
src/assets/images/prev-source-icon.svg Normal file
View File

@@ -0,0 +1,21 @@
<svg width="42" height="66" viewBox="0 0 42 66" fill="#2A8A7E" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" d="M21 66C23.7614 66 26 64.8807 26 63.5C26 62.1193 23.7614 61 21 61C18.2386 61 16 62.1193 16 63.5C16 64.8807 18.2386 66 21 66Z" fill="#2A8A7E"/>
<path fill-rule="#2A8A7E" clip-rule="evenodd" d="M21 0C32.598 0 42 9.40202 42 21C42 31.9234 33.6599 40.8989 23 41.906V62C23 63.1046 22.1046 64 21 64C19.8954 64 19 63.1046 19 62V41.906C8.34014 40.8989 0 31.9234 0 21C0 9.40202 9.40202 0 21 0Z" fill="#2A8A7E"/>
<foreignObject x="-61" y="-61" width="164" height="164"></foreignObject><g filter="url(#filter0_d_173_69)" data-figma-bg-blur-radius="65">
<path d="M38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38C30.3888 38 38 30.3888 38 21Z" fill="#2A8A7E"/>
</g>
<path d="M28 21C28 17.134 24.866 14 21 14C17.134 14 14 17.134 14 21C14 24.866 17.134 28 21 28C24.866 28 28 24.866 28 21Z" fill="white"/>
<defs>
<filter id="filter0_d_173_69" x="-61" y="-61" width="164" height="164" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.25098 0 0 0 0 0.262745 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_173_69"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_173_69" result="shape"/>
</filter>
<clipPath id="bgblur_0_173_69_clip_path" transform="translate(61 61)"><path d="M38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38C30.3888 38 38 30.3888 38 21Z"/>
</clipPath></defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

18
src/assets/images/source-icon.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="-42.6271" y="-43.6271" width="105.045" height="105.045"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(22.31px);clip-path:url(#bgblur_0_2302_1307_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_2302_1307)" data-figma-bg-blur-radius="44.6271">
<path d="M10.3018 1.00977C14.4733 1.22136 17.7908 4.67141 17.791 8.89551C17.7908 13.2559 14.2559 16.7908 9.89551 16.791C5.67141 16.7908 2.22136 13.4733 2.00977 9.30176L2 8.89551L2.00977 8.48926C2.22119 4.31755 5.6713 1.00017 9.89551 1L10.3018 1.00977ZM9.89551 5.80566C8.18945 5.80584 6.80584 7.18945 6.80566 8.89551L6.80957 9.05371C6.89208 10.6863 8.2425 11.9842 9.89551 11.9844C11.5485 11.9842 12.898 10.6863 12.9805 9.05371L12.9844 8.89551L12.9805 8.73633C12.9003 7.1565 11.6336 5.88942 10.0537 5.80957L9.89551 5.80566Z" fill="#16A795"/>
</g>
<defs>
<filter id="filter0_d_2302_1307" x="-42.6271" y="-43.6271" width="105.045" height="105.045" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.686571"/>
<feGaussianBlur stdDeviation="0.686571"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.25098 0 0 0 0 0.262745 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2302_1307"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2302_1307" result="shape"/>
</filter>
<clipPath id="bgblur_0_2302_1307_clip_path" transform="translate(42.6271 43.6271)"><path d="M10.3018 1.00977C14.4733 1.22136 17.7908 4.67141 17.791 8.89551C17.7908 13.2559 14.2559 16.7908 9.89551 16.791C5.67141 16.7908 2.22136 13.4733 2.00977 9.30176L2 8.89551L2.00977 8.48926C2.22119 4.31755 5.6713 1.00017 9.89551 1L10.3018 1.00977ZM9.89551 5.80566C8.18945 5.80584 6.80584 7.18945 6.80566 8.89551L6.80957 9.05371C6.89208 10.6863 8.2425 11.9842 9.89551 11.9844C11.5485 11.9842 12.898 10.6863 12.9805 9.05371L12.9844 8.89551L12.9805 8.73633C12.9003 7.1565 11.6336 5.88942 10.0537 5.80957L9.89551 5.80566Z"/>
</clipPath></defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

268
src/components/dashboard/machines/MachinesList.jsx
View File

@@ -1,134 +1,134 @@
"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { GET_MACHINES_LIST } from "@/core/utils/routes";
import { Box, Typography } from "@mui/material";
import { useMemo } from "react";
import RowActions from "./RowActions";
const statusOptions = [
{ value: "", label: "همه وضعیت ها" },
{ value: 1, label: "آماده" },
{ value: 2, label: "رزرو" },
{ value: 3, label: "در ماموریت" },
{ value: 4, label: "خارج از رده" },
{ value: 5, label: "در تعمیر" },
{ value: 6, label: "فروخته شده" },
{ value: 7, label: "نیاز به تعمیر" },
];
const MachinesList = () => {
const columns = useMemo(() => {
return [
{
accessorKey: "id",
header: "کد یکتا", // Unique Code
id: "id",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 50,
},
{
header: "اطلاعات ماشین‌ها",
id: "machines_info",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
columns: [
{
accessorKey: "car_name",
header: "نام ماشین",
id: "car_name",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "car_type",
header: "نوع ماشین",
id: "car_type",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "machine_code",
header: "کد ماشین",
id: "machine_code",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "plak_number",
header: "پلاک",
id: "plak_number",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "status",
header: "وضعیت",
id: "status",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
grow: false,
size: 100,
columnSelectOption: () => {
return statusOptions.map((status) => ({
value: status.value,
label: status.label,
}));
},
Cell: ({ row }) => {
const status = statusOptions.find((option) => option.value == row.original.status);
return <Typography variant="body2">{status?.label || ""}</Typography>;
},
},
],
},
];
}, []);
return (
<>
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
need_filter={true}
columns={columns}
table_url={GET_MACHINES_LIST}
page_name={"machines"}
table_name={"machinesList"}
sorting={[{ id: "id", desc: true }]}
enableRowActions
positionActionsColumn={"first"}
RowActions={RowActions}
/>
</Box>
</>
);
};
export default MachinesList;
"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { GET_MACHINES_LIST } from "@/core/utils/routes";
import { Box, Typography } from "@mui/material";
import { useMemo } from "react";
import RowActions from "./RowActions";
const statusOptions = [
{ value: "", label: "همه وضعیت ها" },
{ value: 1, label: "آماده" },
{ value: 2, label: "رزرو" },
{ value: 3, label: "در ماموریت" },
{ value: 4, label: "خارج از رده" },
{ value: 5, label: "در تعمیر" },
{ value: 6, label: "فروخته شده" },
{ value: 7, label: "نیاز به تعمیر" },
];
const MachinesList = () => {
const columns = useMemo(() => {
return [
{
accessorKey: "id",
header: "کد یکتا", // Unique Code
id: "id",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 50,
},
{
header: "اطلاعات ماشین‌ها",
id: "machines_info",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
columns: [
{
accessorKey: "car_name",
header: "نام ماشین",
id: "car_name",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "car_type",
header: "نوع ماشین",
id: "car_type",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "machine_code",
header: "کد ماشین",
id: "machine_code",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "plak_number",
header: "پلاک",
id: "plak_number",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "status",
header: "وضعیت",
id: "status",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
grow: false,
size: 100,
columnSelectOption: () => {
return statusOptions.map((status) => ({
value: status.value,
label: status.label,
}));
},
Cell: ({ row }) => {
const status = statusOptions.find((option) => option.value == row.original.status);
return <Typography variant="body2">{status?.label || ""}</Typography>;
},
},
],
},
];
}, []);
return (
<>
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
need_filter={true}
columns={columns}
table_url={GET_MACHINES_LIST}
page_name={"machines"}
table_name={"machinesList"}
sorting={[{ id: "id", desc: true }]}
enableRowActions
positionActionsColumn={"first"}
RowActions={RowActions}
/>
</Box>
</>
);
};
export default MachinesList;

78
src/components/dashboard/machines/RowActions/DeleteDialog/DeleteContent.jsx
View File

@@ -1,39 +1,39 @@
import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
import React, { useState } from "react";
import useRequest from "@/lib/hooks/useRequest";
import { DELETE_TOLL_HOUSE_ITEM } from "@/core/utils/routes";
const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
const [submitting, setSubmitting] = useState(false);
const requestServer = useRequest({ notificationSuccess: true });
const handleClick = () => {
setSubmitting(true);
requestServer(`${DELETE_TOLL_HOUSE_ITEM}/${rowId}`, "delete")
.then(() => {
mutate();
setOpenDeleteDialog(false);
setSubmitting(false);
})
.catch(() => {
setSubmitting(false);
});
};
return (
<>
<DialogContent>
<Stack alignItems="center" spacing={2}>
<Typography mt={2}>آیا از حذف راهدارخانه اطمینان دارید؟</Typography>
</Stack>
</DialogContent>
<DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
<Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="secondary">
خیر !
</Button>
<Button onClick={handleClick} variant="contained" color="error" disabled={submitting}>
{submitting ? "درحال حذف..." : "بله اطمینان دارم"}
</Button>
</DialogActions>
</>
);
};
export default DeleteContent;
import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
import React, { useState } from "react";
import useRequest from "@/lib/hooks/useRequest";
import { DELETE_TOLL_HOUSE_ITEM } from "@/core/utils/routes";
const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
const [submitting, setSubmitting] = useState(false);
const requestServer = useRequest({ notificationSuccess: true });
const handleClick = () => {
setSubmitting(true);
requestServer(`${DELETE_TOLL_HOUSE_ITEM}/${rowId}`, "delete")
.then(() => {
mutate();
setOpenDeleteDialog(false);
setSubmitting(false);
})
.catch(() => {
setSubmitting(false);
});
};
return (
<>
<DialogContent>
<Stack alignItems="center" spacing={2}>
<Typography mt={2}>آیا از حذف راهدارخانه اطمینان دارید؟</Typography>
</Stack>
</DialogContent>
<DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
<Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="secondary">
خیر !
</Button>
<Button onClick={handleClick} variant="contained" color="error" disabled={submitting}>
{submitting ? "درحال حذف..." : "بله اطمینان دارم"}
</Button>
</DialogActions>
</>
);
};
export default DeleteContent;

68
src/components/dashboard/machines/RowActions/DeleteDialog/index.jsx
View File

@@ -1,34 +1,34 @@
import DeleteIcon from "@mui/icons-material/Delete";
import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import DeleteContent from "./DeleteContent";
const DeleteDialog = ({ rowId, mutate }) => {
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
return (
<>
<Tooltip title="حذف">
<IconButton color="error" onClick={() => setOpenDeleteDialog(true)}>
<DeleteIcon />
</IconButton>
</Tooltip>
<Dialog
open={openDeleteDialog}
onClose={() => setOpenDeleteDialog(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
dir="rtl"
maxWidth={"md"}
>
<DialogTitle>حذف راهدارخانه</DialogTitle>
{openDeleteDialog && (
<DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
)}
</Dialog>
</>
);
};
export default DeleteDialog;
import DeleteIcon from "@mui/icons-material/Delete";
import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import DeleteContent from "./DeleteContent";
const DeleteDialog = ({ rowId, mutate }) => {
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
return (
<>
<Tooltip title="حذف">
<IconButton color="error" onClick={() => setOpenDeleteDialog(true)}>
<DeleteIcon />
</IconButton>
</Tooltip>
<Dialog
open={openDeleteDialog}
onClose={() => setOpenDeleteDialog(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
dir="rtl"
maxWidth={"md"}
>
<DialogTitle>حذف راهدارخانه</DialogTitle>
{openDeleteDialog && (
<DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
)}
</Dialog>
</>
);
};
export default DeleteDialog;

562
src/components/dashboard/machines/RowActions/Edit/Form/index.jsx
View File

@@ -1,281 +1,281 @@
import StyledForm from "@/core/components/StyledForm";
import {
GET_CITIES_LIST,
GET_PROVINCES_LIST,
GET_STATIONS_LIST,
UPDATE_MACHINE_STATUS_AND_LOCATION,
} from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { Beenhere, ExitToApp } from "@mui/icons-material";
import {
Button,
CircularProgress,
DialogActions,
DialogContent,
DialogTitle,
FormControl,
InputLabel,
MenuItem,
Select,
Stack,
} from "@mui/material";
import { DialogHeader } from "next/dist/client/components/react-dev-overlay/internal/components/Dialog";
import { useEffect, useState } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { number, object } from "yup";
const statusOptions = [
{ value: 1, label: "آماده" },
{ value: 2, label: "رزرو" },
{ value: 3, label: "در ماموریت" },
{ value: 4, label: "خارج از رده" },
{ value: 5, label: "در تعمیر" },
{ value: 6, label: "فروخته شده" },
{ value: 7, label: "نیاز به تعمیر" },
];
const validationSchema = object({
status: number().required("انتخاب وضعیت الزامی است"),
province_id: number().required("انتخاب استان الزامی است"),
city_id: number().required("انتخاب شهر الزامی است"),
station_id: number().required("انتخاب راهداری الزامی است"),
});
const EditFormContent = ({ row, rowId, mutate, setOpen }) => {
const requestServer = useRequest();
const [provinces, setProvinces] = useState([]);
const [cities, setCities] = useState([]);
const [stations, setStations] = useState([]);
const [loadingProvinces, setLoadingProvinces] = useState(false);
const [loadingCities, setLoadingCities] = useState(false);
const [loadingStations, setLoadingStations] = useState(false);
const {
control,
handleSubmit,
setValue,
formState: { isSubmitting },
} = useForm({
defaultValues: {
status: row.original.status,
province_id: row.original.province_id,
city_id: row.original.city_id,
station_id: row.original.station_id,
},
resolver: yupResolver(validationSchema),
mode: "all",
});
const provinceId = useWatch({
control,
name: "province_id",
});
const cityId = useWatch({
control,
name: "city_id",
});
const loadProvinces = async () => {
try {
setLoadingProvinces(true);
const response = await requestServer(GET_PROVINCES_LIST, "get");
setProvinces(response.data?.data || []);
} finally {
setLoadingProvinces(false);
}
};
const loadCities = async (provinceId) => {
if (!provinceId) return;
try {
setLoadingCities(true);
const response = await requestServer(`${GET_CITIES_LIST}?province_id=${provinceId}`, "get");
setCities(response.data?.data || []);
} finally {
setLoadingCities(false);
}
};
const loadStations = async (cityId) => {
if (!cityId) return;
try {
setLoadingStations(true);
const response = await requestServer(`${GET_STATIONS_LIST}/search_by_city?city_id=${cityId}`, "get");
setStations(response.data?.data || []);
} finally {
setLoadingStations(false);
}
};
useEffect(() => {
loadProvinces();
}, []);
/**
* Initial edit mode loading
*/
useEffect(() => {
if (row.original.province_id) {
loadCities(row.original.province_id);
}
if (row.original.city_id) {
loadStations(row.original.city_id);
}
}, []);
useEffect(() => {
if (!provinceId) return;
loadCities(provinceId);
if (provinceId !== row.original.province_id) {
setValue("city_id", "");
setValue("station_id", "");
setStations([]);
}
}, [provinceId]);
useEffect(() => {
if (!cityId) return;
loadStations(cityId);
if (cityId !== row.original.city_id) {
setValue("station_id", "");
}
}, [cityId]);
const onSubmit = async (data) => {
const formData = new FormData();
formData.append("status", String(data.status));
formData.append("province_id", String(data.province_id));
formData.append("city_id", String(data.city_id));
formData.append("station_id", String(data.station_id));
try {
await requestServer(`${UPDATE_MACHINE_STATUS_AND_LOCATION}/${rowId}`, "post", {
data: formData,
});
mutate();
setOpen(false);
} catch (error) {}
};
return (
<>
<DialogHeader>
<DialogTitle>ویرایش ماشین</DialogTitle>
</DialogHeader>
<DialogContent dividers>
<StyledForm id="updateMachineForm" onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Controller
name="province_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>استان</InputLabel>
<Select {...field} label="استان" disabled={loadingProvinces}>
{provinces.map((province) => (
<MenuItem key={province.id} value={province.id}>
{province.name_fa}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="city_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>شهر</InputLabel>
<Select {...field} label="شهر" disabled={!provinceId || loadingCities}>
{cities.map((city) => (
<MenuItem key={city.id} value={city.id}>
{city.name_fa}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="station_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>راهداری</InputLabel>
<Select {...field} label="راهداری" disabled={!cityId || loadingStations}>
{stations.map((station) => (
<MenuItem key={station.id} value={station.id}>
{station.name}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="status"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>وضعیت</InputLabel>
<Select {...field} label="وضعیت">
{statusOptions.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
{(loadingCities || loadingStations) && (
<Stack direction="row" justifyContent="center">
<CircularProgress size={24} />
</Stack>
)}
</Stack>
</StyledForm>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpen(false)} variant="outlined" color="secondary" startIcon={<ExitToApp />}>
بستن
</Button>
<Button
variant="contained"
disabled={isSubmitting}
type="submit"
form="updateMachineForm"
endIcon={<Beenhere />}
>
{isSubmitting ? "در حال ویرایش" : "ویرایش ماشین"}
</Button>
</DialogActions>
</>
);
};
export default EditFormContent;
import StyledForm from "@/core/components/StyledForm";
import {
GET_CITIES_LIST,
GET_PROVINCES_LIST,
GET_STATIONS_LIST,
UPDATE_MACHINE_STATUS_AND_LOCATION,
} from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { Beenhere, ExitToApp } from "@mui/icons-material";
import {
Button,
CircularProgress,
DialogActions,
DialogContent,
DialogTitle,
FormControl,
InputLabel,
MenuItem,
Select,
Stack,
} from "@mui/material";
import { DialogHeader } from "next/dist/client/components/react-dev-overlay/internal/components/Dialog";
import { useEffect, useState } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { number, object } from "yup";
const statusOptions = [
{ value: 1, label: "آماده" },
{ value: 2, label: "رزرو" },
{ value: 3, label: "در ماموریت" },
{ value: 4, label: "خارج از رده" },
{ value: 5, label: "در تعمیر" },
{ value: 6, label: "فروخته شده" },
{ value: 7, label: "نیاز به تعمیر" },
];
const validationSchema = object({
status: number().required("انتخاب وضعیت الزامی است"),
province_id: number().required("انتخاب استان الزامی است"),
city_id: number().required("انتخاب شهر الزامی است"),
station_id: number().required("انتخاب راهداری الزامی است"),
});
const EditFormContent = ({ row, rowId, mutate, setOpen }) => {
const requestServer = useRequest();
const [provinces, setProvinces] = useState([]);
const [cities, setCities] = useState([]);
const [stations, setStations] = useState([]);
const [loadingProvinces, setLoadingProvinces] = useState(false);
const [loadingCities, setLoadingCities] = useState(false);
const [loadingStations, setLoadingStations] = useState(false);
const {
control,
handleSubmit,
setValue,
formState: { isSubmitting },
} = useForm({
defaultValues: {
status: row.original.status,
province_id: row.original.province_id,
city_id: row.original.city_id,
station_id: row.original.station_id,
},
resolver: yupResolver(validationSchema),
mode: "all",
});
const provinceId = useWatch({
control,
name: "province_id",
});
const cityId = useWatch({
control,
name: "city_id",
});
const loadProvinces = async () => {
try {
setLoadingProvinces(true);
const response = await requestServer(GET_PROVINCES_LIST, "get");
setProvinces(response.data?.data || []);
} finally {
setLoadingProvinces(false);
}
};
const loadCities = async (provinceId) => {
if (!provinceId) return;
try {
setLoadingCities(true);
const response = await requestServer(`${GET_CITIES_LIST}?province_id=${provinceId}`, "get");
setCities(response.data?.data || []);
} finally {
setLoadingCities(false);
}
};
const loadStations = async (cityId) => {
if (!cityId) return;
try {
setLoadingStations(true);
const response = await requestServer(`${GET_STATIONS_LIST}/search_by_city?city_id=${cityId}`, "get");
setStations(response.data?.data || []);
} finally {
setLoadingStations(false);
}
};
useEffect(() => {
loadProvinces();
}, []);
/**
* Initial edit mode loading
*/
useEffect(() => {
if (row.original.province_id) {
loadCities(row.original.province_id);
}
if (row.original.city_id) {
loadStations(row.original.city_id);
}
}, []);
useEffect(() => {
if (!provinceId) return;
loadCities(provinceId);
if (provinceId !== row.original.province_id) {
setValue("city_id", "");
setValue("station_id", "");
setStations([]);
}
}, [provinceId]);
useEffect(() => {
if (!cityId) return;
loadStations(cityId);
if (cityId !== row.original.city_id) {
setValue("station_id", "");
}
}, [cityId]);
const onSubmit = async (data) => {
const formData = new FormData();
formData.append("status", String(data.status));
formData.append("province_id", String(data.province_id));
formData.append("city_id", String(data.city_id));
formData.append("station_id", String(data.station_id));
try {
await requestServer(`${UPDATE_MACHINE_STATUS_AND_LOCATION}/${rowId}`, "post", {
data: formData,
});
mutate();
setOpen(false);
} catch (error) {}
};
return (
<>
<DialogHeader>
<DialogTitle>ویرایش ماشین</DialogTitle>
</DialogHeader>
<DialogContent dividers>
<StyledForm id="updateMachineForm" onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Controller
name="province_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>استان</InputLabel>
<Select {...field} label="استان" disabled={loadingProvinces}>
{provinces.map((province) => (
<MenuItem key={province.id} value={province.id}>
{province.name_fa}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="city_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>شهر</InputLabel>
<Select {...field} label="شهر" disabled={!provinceId || loadingCities}>
{cities.map((city) => (
<MenuItem key={city.id} value={city.id}>
{city.name_fa}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="station_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>راهداری</InputLabel>
<Select {...field} label="راهداری" disabled={!cityId || loadingStations}>
{stations.map((station) => (
<MenuItem key={station.id} value={station.id}>
{station.name}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="status"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>وضعیت</InputLabel>
<Select {...field} label="وضعیت">
{statusOptions.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
{(loadingCities || loadingStations) && (
<Stack direction="row" justifyContent="center">
<CircularProgress size={24} />
</Stack>
)}
</Stack>
</StyledForm>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpen(false)} variant="outlined" color="secondary" startIcon={<ExitToApp />}>
بستن
</Button>
<Button
variant="contained"
disabled={isSubmitting}
type="submit"
form="updateMachineForm"
endIcon={<Beenhere />}
>
{isSubmitting ? "در حال ویرایش" : "ویرایش ماشین"}
</Button>
</DialogActions>
</>
);
};
export default EditFormContent;

88
src/components/dashboard/machines/RowActions/Edit/index.jsx
View File

@@ -1,44 +1,44 @@
import { SwapHoriz } from "@mui/icons-material";
import CloseIcon from "@mui/icons-material/Close";
import { Dialog, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import EditFormContent from "./Form";
const Edit = ({ row, mutate, rowId }) => {
const [openEditDialog, setOpenEditDialog] = useState(false);
return (
<>
<Tooltip title="ویرایش" arrow placement="right">
<IconButton
color="primary"
sx={{ textTransform: "unset", alignSelf: "center" }}
onClick={() => {
setOpenEditDialog(true);
}}
>
<SwapHoriz />
</IconButton>
</Tooltip>
<Dialog open={openEditDialog} fullWidth maxWidth="xs">
<IconButton
aria-label="close"
onClick={() => setOpenEditDialog(false)}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
zIndex: 50,
color: theme.palette.grey[500],
})}
>
<CloseIcon />
</IconButton>
{openEditDialog && (
<EditFormContent rowId={rowId} row={row} setOpen={setOpenEditDialog} mutate={mutate} />
)}
</Dialog>
</>
);
};
export default Edit;
import { SwapHoriz } from "@mui/icons-material";
import CloseIcon from "@mui/icons-material/Close";
import { Dialog, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import EditFormContent from "./Form";
const Edit = ({ row, mutate, rowId }) => {
const [openEditDialog, setOpenEditDialog] = useState(false);
return (
<>
<Tooltip title="ویرایش" arrow placement="right">
<IconButton
color="primary"
sx={{ textTransform: "unset", alignSelf: "center" }}
onClick={() => {
setOpenEditDialog(true);
}}
>
<SwapHoriz />
</IconButton>
</Tooltip>
<Dialog open={openEditDialog} fullWidth maxWidth="xs">
<IconButton
aria-label="close"
onClick={() => setOpenEditDialog(false)}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
zIndex: 50,
color: theme.palette.grey[500],
})}
>
<CloseIcon />
</IconButton>
{openEditDialog && (
<EditFormContent rowId={rowId} row={row} setOpen={setOpenEditDialog} mutate={mutate} />
)}
</Dialog>
</>
);
};
export default Edit;

28
src/components/dashboard/machines/RowActions/index.jsx
View File

@@ -1,14 +1,14 @@
import { usePermissions } from "@/lib/hooks/usePermissions";
import { Box } from "@mui/material";
import Edit from "./Edit";
const RowActions = ({ row, mutate }) => {
const { data: userPermissions } = usePermissions();
const hasEditPermission = userPermissions.some((item) => ["update-machine"].includes(item));
return (
<Box sx={{ display: "flex", gap: 1 }}>
{hasEditPermission && <Edit row={row} mutate={mutate} rowId={row.getValue("id")} />}
</Box>
);
};
export default RowActions;
import { usePermissions } from "@/lib/hooks/usePermissions";
import { Box } from "@mui/material";
import Edit from "./Edit";
const RowActions = ({ row, mutate }) => {
const { data: userPermissions } = usePermissions();
const hasEditPermission = userPermissions.some((item) => ["update-machine"].includes(item));
return (
<Box sx={{ display: "flex", gap: 1 }}>
{hasEditPermission && <Edit row={row} mutate={mutate} rowId={row.getValue("id")} />}
</Box>
);
};
export default RowActions;

58
src/components/dashboard/machines/ShowProjectArea/ShowBound.jsx
View File

@@ -1,29 +1,29 @@
import { useEffect, useRef } from "react";
import { FeatureGroup, useMap } from "react-leaflet";
const ShowBound = ({ bound }) => {
const map = useMap();
const featureRef = useRef(null);
const safeFitBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.fitBounds(latLngs, {
paddingTopLeft: [20, 20],
paddingBottomRight: [20, 20],
});
} catch (e) {
console.warn("fitBounds failed:", e);
}
};
useEffect(() => {
bound?.editing?.disable();
featureRef.current.addLayer(bound);
safeFitBounds(bound);
}, []);
return <FeatureGroup ref={featureRef} />;
};
export default ShowBound;
import { useEffect, useRef } from "react";
import { FeatureGroup, useMap } from "react-leaflet";
const ShowBound = ({ bound }) => {
const map = useMap();
const featureRef = useRef(null);
const safeFitBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.fitBounds(latLngs, {
paddingTopLeft: [20, 20],
paddingBottomRight: [20, 20],
});
} catch (e) {
console.warn("fitBounds failed:", e);
}
};
useEffect(() => {
bound?.editing?.disable();
featureRef.current.addLayer(bound);
safeFitBounds(bound);
}, []);
return <FeatureGroup ref={featureRef} />;
};
export default ShowBound;

130
src/components/dashboard/machines/ShowProjectArea/index.jsx
View File

@@ -1,65 +1,65 @@
const { IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent } = require("@mui/material");
import MapLayer from "@/core/components/MapLayer";
import CloseIcon from "@mui/icons-material/Close";
import LayersIcon from "@mui/icons-material/Layers";
import L from "leaflet";
import { useMemo, useState } from "react";
import ShowBound from "./ShowBound";
const ShowProjectArea = ({ primaryArea }) => {
const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
const bound = useMemo(() => {
const coordinates = Object.values(primaryArea.coordinates);
const latLngCoords = coordinates.map(([lat, lng]) => [parseFloat(lng), parseFloat(lat)]);
return primaryArea.type === "polygon"
? L.polygon(latLngCoords, { color: "#ff5555" })
: L.polyline(latLngCoords);
}, [primaryArea]);
return (
<Box>
<Tooltip title="نمایش پلیگان" placement="right" arrow>
<IconButton size="small" color="primary" onClick={() => setOpenShowAreaDialog(true)}>
<LayersIcon />
</IconButton>
</Tooltip>
<Dialog
open={openShowAreaDialog}
onClose={() => setOpenShowAreaDialog(false)}
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",
borderRadius: 2,
padding: 1,
},
}}
maxWidth="sm"
fullWidth
dir="rtl"
>
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
محدوده طرح
</Typography>
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{ flex: 1 }}>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowBound bound={bound} />
</MapLayer>
</Box>
</Box>
</DialogContent>
</Dialog>
</Box>
);
};
export default ShowProjectArea;
const { IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent } = require("@mui/material");
import MapLayer from "@/core/components/MapLayer";
import CloseIcon from "@mui/icons-material/Close";
import LayersIcon from "@mui/icons-material/Layers";
import L from "leaflet";
import { useMemo, useState } from "react";
import ShowBound from "./ShowBound";
const ShowProjectArea = ({ primaryArea }) => {
const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
const bound = useMemo(() => {
const coordinates = Object.values(primaryArea.coordinates);
const latLngCoords = coordinates.map(([lat, lng]) => [parseFloat(lng), parseFloat(lat)]);
return primaryArea.type === "polygon"
? L.polygon(latLngCoords, { color: "#ff5555" })
: L.polyline(latLngCoords);
}, [primaryArea]);
return (
<Box>
<Tooltip title="نمایش پلیگان" placement="right" arrow>
<IconButton size="small" color="primary" onClick={() => setOpenShowAreaDialog(true)}>
<LayersIcon />
</IconButton>
</Tooltip>
<Dialog
open={openShowAreaDialog}
onClose={() => setOpenShowAreaDialog(false)}
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",
borderRadius: 2,
padding: 1,
},
}}
maxWidth="sm"
fullWidth
dir="rtl"
>
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
محدوده طرح
</Typography>
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{ flex: 1 }}>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowBound bound={bound} />
</MapLayer>
</Box>
</Box>
</DialogContent>
</Dialog>
</Box>
);
};
export default ShowProjectArea;

28
src/components/dashboard/machines/index.jsx
View File

@@ -1,14 +1,14 @@
"use client";
import PageTitle from "@/core/components/PageTitle";
import { Stack } from "@mui/material";
import MachinesList from "./MachinesList";
const MachinesPage = () => {
return (
<Stack spacing={1}>
<PageTitle title={"لیست ماشین ها"} />
<MachinesList />
</Stack>
);
};
export default MachinesPage;
"use client";
import PageTitle from "@/core/components/PageTitle";
import { Stack } from "@mui/material";
import MachinesList from "./MachinesList";
const MachinesPage = () => {
return (
<Stack spacing={1}>
<PageTitle title={"لیست ماشین ها"} />
<MachinesList />
</Stack>
);
};
export default MachinesPage;

211
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/MapControlPolyline/index.jsx
View File

@@ -1,116 +1,113 @@
import { Delete, Route } from "@mui/icons-material";
import { Box, Button, Stack, Typography } from "@mui/material";
import { useReducer } from "react";
import DrawBound from "./DrawBound";
"use client";
const statusType = [
{
id: 0,
message: "برای آغاز ترسیم مسیر، کلیک کنید!",
buttons: [
{
label: "شروع ترسیم مسیر",
key: "start",
color: "primary",
icon: <Route />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 1 });
},
},
],
},
{
id: 1,
message: "مسیر موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطه‌ی پایانی کلیک کنید!",
buttons: [],
},
{
id: 2,
message: "برای اصلاح مسیر، گوشه‌ها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
buttons: [
{
label: "حذف",
key: "end",
color: "error",
icon: <Delete />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 0 });
},
},
],
},
];
import { useEffect, useState } from "react";
import { Marker, Polyline, useMap } from "react-leaflet";
import L from "leaflet";
const createInitialState = (bound) => {
if (bound) {
return { status: 2 };
}
return { status: 0 };
};
// ===== Icons =====
const originIcon = new L.Icon({
iconUrl: "/icons/origin-icon.svg",
iconSize: [32, 32],
iconAnchor: [16, 32],
});
const reducer = (state, action) => {
switch (action.type) {
case "SET_STATUS":
return { ...state, status: action.status };
default:
return state;
}
};
const destinationIcon = new L.Icon({
iconUrl: "/icons/destination-icon.svg",
iconSize: [32, 32],
iconAnchor: [16, 32],
});
const MapControlPolyline = ({ bound, setBound }) => {
const [control, controlDispach] = useReducer(reducer, bound, createInitialState);
// ===== Track Center =====
function MapCenterTracker({ setCenter }) {
const map = useMap();
useEffect(() => {
const updateCenter = () => {
setCenter(map.getCenter());
};
updateCenter();
map.on("move", updateCenter);
return () => {
map.off("move", updateCenter);
};
}, [map, setCenter]);
return null;
}
// ===== Fixed Center Marker =====
function FixedCenterMarker() {
return (
<div
style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -100%)",
zIndex: 1000,
pointerEvents: "none",
}}
>
<img src="/icons/origin-icon.svg" width={40} height={40} alt="center" />
</div>
);
}
export default function Example() {
const [center, setCenter] = useState(null);
const [origin, setOrigin] = useState(null);
const [destination, setDestination] = useState(null);
const [step, setStep] = useState("origin");
const handleOk = () => {
if (!center) return;
if (step === "origin") {
setOrigin(center);
setStep("destination");
return;
}
if (step === "destination") {
setDestination(center);
setStep("done");
}
};
return (
<>
<DrawBound bound={bound} setBound={setBound} control={control} controlDispach={controlDispach} />
<Stack
direction={"row"}
justifyContent={"center"}
sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
>
<Box
sx={{
background: (theme) => theme.palette.info.main,
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
py: 0.5,
px: 2,
}}
>
<Typography align="center" component={"div"} variant="caption" color={"#fff"}>
{statusType.find((st) => st.id == control.status).message}
</Typography>
</Box>
</Stack>
<Box
sx={{
position: "absolute",
left: 0,
bottom: 0,
zIndex: 2000,
width: "100%",
py: 1,
background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
<div>
<div
style={{
position: "relative",
height: "400px",
}}
>
<Stack direction={"row"} justifyContent={"center"} spacing={2}>
{statusType
.find((st) => st.id == control.status)
.buttons.map((button) => (
<Button
size="small"
key={button.key}
variant="contained"
onClick={() => button.onclick(controlDispach)}
color={button.color}
startIcon={button.icon}
>
{button.label}
</Button>
))}
</Stack>
</Box>
</>
<MapCenterTracker setCenter={setCenter} />
{/* saved markers */}
{origin && <Marker position={origin} icon={originIcon} />}
{destination && <Marker position={destination} icon={destinationIcon} />}
{/* route line */}
{origin && destination && <Polyline positions={[origin, destination]} />}
{/* fixed center pin */}
{step !== "done" && <FixedCenterMarker />}
</div>
<div style={{ marginTop: 16, position: "absolute", z: 50, top: 5 }}>
<button onClick={handleOk}>
{step === "origin" && "Set Origin"}
{step === "destination" && "Set Destination"}
{step === "done" && "Completed"}
</button>
</div>
</div>
);
};
export default MapControlPolyline;
}

28
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/AlarmText.jsx Normal file
View File

@@ -0,0 +1,28 @@
import { Box, Typography } from "@mui/material";
const AlarmText = ({ isSource }) => {
if (isSource) return null;
return (
<Box
sx={{
position: "absolute",
top: 5,
left: 5,
zIndex: 1000,
border: "1px solid #ed0f02",
backgroundColor: "#f19898",
py: 0.5,
px: 1,
borderRadius: 2,
opacity: 0.8,
boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
}}
>
<Typography variant="caption" sx={{ fontWeight: "bold" }} color="#ed0f02">
با کلیک بر روی مارکر موقعیت را انتخاب کنید
</Typography>
</Box>
);
};
export default AlarmText;

53
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/DataBox.jsx Normal file
View File

@@ -0,0 +1,53 @@
import { Box, Button, TextField } from "@mui/material";
const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget, onEditSource, onEditDest }) => {
if (!isSource) return null;
return (
<Box
sx={{
position: "absolute",
bottom: 5,
left: 5,
zIndex: 1000,
backgroundColor: "white",
border: "1px solid #e1e1e1",
padding: 1,
borderRadius: 2,
opacity: 0.8,
gap: 1,
display: "flex",
flexDirection: "column",
}}
>
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
<TextField
variant="outlined"
size="small"
readOnly
value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
/>
{isSource && isDest && (
<Button variant="contained" color="success" size="small" onClick={onEditSource}>
ویرایش مبدا
</Button>
)}
</div>
{isDest && (
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
<TextField
size="small"
variant="outlined"
readOnly
value={destPosition ? `${destPosition.lat.toFixed(6)}, ${destPosition.lng.toFixed(6)}` : ""}
/>
<Button variant="contained" color="error" size="small" onClick={onEditDest}>
ویرایش مقصد
</Button>
</div>
)}
</Box>
);
};
export default DataBox;

46
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/ShowRoute.jsx Normal file
View File

@@ -0,0 +1,46 @@
import { useEffect, useRef } from "react";
import { Marker, Polyline, useMap } from "react-leaflet";
import L from "leaflet";
import polyline from "@mapbox/polyline";
import SourceIcon from "@/assets/images/source-icon.svg";
import DestIcon from "@/assets/images/destination-icon.svg";
const ShowRoute = ({ area }) => {
const map = useMap();
const defaultIconSize = [35, 35];
const createCustomIcon = (size, iconUrl) => {
return L.icon({
iconUrl: iconUrl,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
popupAnchor: [0, -size[1]],
});
};
useEffect(() => {
if (coords.length > 0) {
map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
}
}, [area]);
const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
if (!area) return null;
const coords = polyline.decode(area, 6);
if (coords.length === 0) return null;
const sourcePosition = coords[0];
const destPosition = coords[coords.length - 1];
return (
<>
<Polyline positions={coords} color="#015688" weight={7} opacity={1} />
<Marker position={sourcePosition} icon={sourceIcon} />
<Marker position={destPosition} icon={destIcon} />
</>
);
};
export default ShowRoute;

219
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/index.jsx Normal file
View File

@@ -0,0 +1,219 @@
import { Marker, Polyline, useMapEvents } from "react-leaflet";
import L from "leaflet";
import polyline from "@mapbox/polyline";
import SourceIcon from "@/assets/images/source-icon.svg";
import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
import DestIcon from "@/assets/images/destination-icon.svg";
import { useEffect, useRef, useState } from "react";
import DataBox from "./DataBox";
import AlarmText from "./AlarmText";
const Routing = ({ setArea, setLocations, locations, area }) => {
const mapPrevSourceMarker = useRef();
const mapPrevDestMarker = useRef();
const mapRef = useRef(null);
const defaultIconSize = [35, 35];
const [isSource, setIsSource] = useState(false);
const [sourcePosition, setSourcePosition] = useState(null);
const [isDest, setIsDest] = useState(false);
const [destPosition, setDestPosition] = useState(null);
const [routeCoords, setRouteCoords] = useState([]);
const [alternateCoords, setAlternateCoords] = useState([]);
const [editingTarget, setEditingTarget] = useState(null);
const [selectedRoute, setSelectedRoute] = useState(null);
const createCustomIcon = (size, iconUrl) => {
return L.icon({
iconUrl: iconUrl,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
popupAnchor: [0, -size[1]],
});
};
const defaultIcon = createCustomIcon(
defaultIconSize,
isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
);
const prevDestIcon = createCustomIcon(
defaultIconSize,
isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
);
const isMovingSource = !isSource || editingTarget === "source";
const isMovingDest = isSource && (!isDest || editingTarget === "dest");
const map = useMapEvents({
move(e) {
if (isMovingSource) mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
if (isMovingDest && mapPrevDestMarker.current) mapPrevDestMarker.current.setLatLng(e.target.getCenter());
},
movestart() {
if (isMovingSource) mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
if (isMovingDest && mapPrevDestMarker.current)
mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
},
moveend() {
if (isMovingSource)
mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
if (isMovingDest && mapPrevDestMarker.current)
mapPrevDestMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevDestIcon.src));
},
});
useEffect(() => {
mapRef.current = map;
}, [map]);
useEffect(() => {
if (locations.length < 2) return;
const restoredSource = { lat: locations[0].lat, lng: locations[0].lon };
const restoredDest = { lat: locations[1].lat, lng: locations[1].lon };
setSourcePosition(restoredSource);
setDestPosition(restoredDest);
setIsSource(true);
setIsDest(true);
if (area) {
const decoded = polyline.decode(area, 6);
setRouteCoords(decoded);
setSelectedRoute({ index: "main", coords: decoded });
setTimeout(() => {
mapRef.current?.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
}, 100);
} else {
fetchRoute(restoredSource, restoredDest);
}
}, []);
const fetchRoute = async (source, dest) => {
const locs = [
{ lat: source.lat, lon: source.lng },
{ lat: dest.lat, lon: dest.lng },
];
try {
const response = await fetch("https://jouya.141.ir/api/router/drive", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ locations: locs }),
});
const data = await response.json();
const shape = data.trip.legs[0].shape;
setLocations(locs);
setArea(shape);
const decoded = polyline.decode(shape, 6);
setRouteCoords(decoded);
setSelectedRoute({ index: "main", coords: decoded });
if (data.alternates?.length > 0) {
const decodedAlternates = data.alternates.map((alt) => polyline.decode(alt.trip.legs[0].shape, 6));
setAlternateCoords(decodedAlternates);
} else {
setAlternateCoords([]);
}
map.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
} catch (error) {
console.error("Routing error:", error);
}
};
const handleMarkerClick = async () => {
if (!isSource || editingTarget === "source") {
const clickedPosition = mapPrevSourceMarker.current.getLatLng();
setSourcePosition(clickedPosition);
setIsSource(true);
setEditingTarget(null);
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
if (editingTarget === "source" && destPosition) {
await fetchRoute(clickedPosition, destPosition);
}
}
};
const handleDestMarkerClick = async () => {
if (!isDest || editingTarget === "dest") {
const clickedPosition = mapPrevDestMarker.current.getLatLng();
setDestPosition(clickedPosition);
setIsDest(true);
setEditingTarget(null);
await fetchRoute(sourcePosition, clickedPosition);
}
};
const handleEditSource = () => {
setEditingTarget("source");
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
};
const handleEditDest = () => {
setEditingTarget("dest");
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
};
const handleSelectRoute = (index, coords) => {
setSelectedRoute({ index, coords });
const encoded = polyline.encode(coords, 6);
setArea(encoded);
map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
};
return (
<>
<DataBox
isSource={isSource}
isDest={isDest}
sourcePosition={sourcePosition}
destPosition={destPosition}
editingTarget={editingTarget}
onEditSource={handleEditSource}
onEditDest={handleEditDest}
/>
<AlarmText isSource={isSource} />
<Marker
position={sourcePosition || map.getCenter()}
ref={mapPrevSourceMarker}
eventHandlers={{ click: handleMarkerClick }}
icon={defaultIcon}
/>
{isSource && (
<Marker
position={destPosition || map.getCenter()}
ref={mapPrevDestMarker}
eventHandlers={{ click: handleDestMarkerClick }}
icon={prevDestIcon}
/>
)}
{alternateCoords.map((coords, index) => (
<Polyline
key={`alternate-${index}-${selectedRoute?.index === index}`}
positions={coords}
color={selectedRoute?.index === index ? "#015688" : "#91B2C6"}
weight={selectedRoute?.index === index ? 7 : 6}
opacity={selectedRoute?.index === index ? 1 : 0.7}
eventHandlers={{ click: () => handleSelectRoute(index, coords) }}
/>
))}
{routeCoords.length > 0 && (
<Polyline
key={`main-${selectedRoute?.index === "main"}`}
positions={routeCoords}
color={selectedRoute?.index === "main" ? "#015688" : "#91B2C6"}
weight={selectedRoute?.index === "main" ? 7 : 6}
opacity={selectedRoute?.index === "main" ? 1 : 0.7}
eventHandlers={{ click: () => handleSelectRoute("main", routeCoords) }}
/>
)}
</>
);
};
export default Routing;

16
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/index.jsx
View File

@@ -2,19 +2,21 @@ import MapLoading from "@/core/components/MapLayer/Loading";
import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
import dynamic from "next/dynamic";
import { useCallback, useState } from "react";
import MapControlPolyline from "./MapControlPolyline";
import Routing from "./Routing";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
});
const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
const [bound, setBound] = useState(allData.bound);
const [area, setArea] = useState(allData.area);
const [locations, setLocations] = useState(allData.locations);
const handleNext = useCallback(() => {
setAllData({ bound: bound });
setAllData({ area: area });
setAllData({ locations: locations });
setTabState((s) => s + 1);
}, [bound]);
}, [area]);
return (
<>
@@ -22,7 +24,7 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
<Stack spacing={2}>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<MapControlPolyline bound={bound} setBound={setBound} boundType={"polyline"} />
<Routing area={area} setArea={setArea} locations={locations} setLocations={setLocations} />
</MapLayer>
</Box>
</Stack>
@@ -31,8 +33,8 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
<Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
{"مرحله قبلی"}
</Button>
<Button variant="contained" size="large" disabled={!bound} onClick={handleNext}>
{!bound ? "در انتظار ترسیم" : "مرحله بعد"}
<Button variant="contained" size="large" disabled={!area} onClick={handleNext}>
{!area ? "در انتظار ترسیم" : "مرحله بعد"}
</Button>
</DialogActions>
</>

17
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Verify/index.jsx
View File

@@ -7,7 +7,7 @@ import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typogr
import moment from "jalali-moment";
import dynamic from "next/dynamic";
import { useCallback } from "react";
import ShowBound from "../../../showBound";
import ShowRoute from "../Area/Routing/ShowRoute";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
@@ -23,11 +23,16 @@ const Verify = ({ allData, handlePrev, submitForm, submitting }) => {
<DialogContent dividers>
<Box sx={{ flex: 1 }}>
<Stack spacing={2}>
<Box sx={{ width: "100%", height: "200px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowBound bound={allData.bound} />
</MapLayer>
</Box>
<Stack spacing={1}>
<Divider>
<Chip color="primary" variant="outlined" label="مسیر ماموریت" />
</Divider>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowRoute area={allData.area} />
</MapLayer>
</Box>
</Stack>
<Stack spacing={1}>
<Divider>
<Chip color="primary" variant="outlined" label="مشخصات ماموریت" />

11
src/components/dashboard/roadMissions/operator/Actions/Create/index.jsx
View File

@@ -19,8 +19,6 @@ const Create = ({ mutate }) => {
const submitForm = async (result) => {
setSubmitting(true);
const bound = result.bound.getLatLngs();
let area = bound.map((latlng) => [latlng.lng, latlng.lat]);
await requestServer(REQUEST_MISSION, "post", {
data: {
@@ -31,10 +29,7 @@ const Create = ({ mutate }) => {
road_observed_id: result.road_observed_id,
}
: {}),
area: {
type: result.bound_type,
coordinates: area,
},
encoded_route: result.area,
...(result.rahdaran.length != 0 ? { rahdaran: result.rahdaran.map((r) => r.id) } : {}),
requested_machines: result.requested_machines,
type: result.type,
@@ -101,8 +96,8 @@ const Create = ({ mutate }) => {
road_observed_id: "",
rahdaran: [],
requested_machines: [],
bound: null,
bound_type: "polyline",
area: null,
locations: [],
type: "",
start_date: "",
start_time: null,

18
src/components/dashboard/roadMissions/operator/OperatorList.jsx
View File

@@ -1,21 +1,21 @@
"use client";
import DescriptionDialog from "@/components/dashboard/roadMissions/operator/RowActions/DescriptionDialog";
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { missionCategoryTypes } from "@/core/utils/missionCategoryTypes";
import { missionRegions } from "@/core/utils/missionRegions";
import { missionTypes } from "@/core/utils/missionTypes";
import { GET_ROAD_MISSIONS_OPERATOR_LIST } from "@/core/utils/routes";
import useCities from "@/lib/hooks/useCities";
import useProvinces from "@/lib/hooks/useProvince";
import { Box, Stack } from "@mui/material";
import moment from "jalali-moment";
import { useMemo } from "react";
import ShowArea from "./Actions/showArea";
import RowActions from "./RowActions";
import MachinesDialog from "./RowActions/Machines";
import Toolbar from "./Toolbar";
import RahdaranDialog from "./RowActions/Rahdaran";
import DescriptionDialog from "@/components/dashboard/roadMissions/operator/RowActions/DescriptionDialog";
import useProvinces from "@/lib/hooks/useProvince";
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
import useCities from "@/lib/hooks/useCities";
import RouteDetail from "./RowActions/RouteDetail";
import Toolbar from "./Toolbar";
const OperatorList = () => {
const columns = useMemo(() => {
@@ -247,7 +247,7 @@ const OperatorList = () => {
},
{
header: "منطقه عملیاتی",
id: "area",
id: "encoded_route",
enableColumnFilter: false,
datatype: "numeric",
filterMode: "equals",
@@ -263,9 +263,9 @@ const OperatorList = () => {
},
},
Cell: ({ row }) =>
row.original.area ? (
row.original.encoded_route ? (
<Stack alignItems={"center"} justifyContent={"center"}>
<ShowArea area={row.original.area} />
<RouteDetail encoded_route={row.original.encoded_route} />
</Stack>
) : (
"-"

57
src/components/dashboard/roadMissions/operator/RowActions/RouteDetail/index.jsx Normal file
View File

@@ -0,0 +1,57 @@
import { Box, Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import MapIcon from "@mui/icons-material/Map";
import MapLayer from "@/core/components/MapLayer";
import ShowRoute from "../../Actions/Create/Form/Area/Routing/ShowRoute";
const RouteDetail = ({ encoded_route }) => {
const [openRouteDetailDialog, setOpenRouteDetailDialog] = useState(false);
return (
<>
<Tooltip title="مسیر انتخابی">
<IconButton color="primary" onClick={() => setOpenRouteDetailDialog(true)}>
<MapIcon />
</IconButton>
</Tooltip>
<Dialog
fullWidth
open={openRouteDetailDialog}
onClose={() => setOpenRouteDetailDialog(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
dir="rtl"
maxWidth={"sm"}
>
<DialogTitle sx={{ fontSize: "large" }}>مسیر انتخابی</DialogTitle>
<Box sx={{ mx: 1, borderRadius: "5px" }}>
<Box
sx={{
width: "100%",
height: "300px",
border: "1px solid #e1e1e1",
borderRadius: "5px",
}}
>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowRoute area={encoded_route} />
</MapLayer>
</Box>
</Box>
<DialogActions>
<Button
onClick={() => setOpenRouteDetailDialog(false)}
variant="outlined"
color="secondary"
autoFocus
>
بستن
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default RouteDetail;

154
src/components/dashboard/roadMissions/reports/taradodReports/ExcelPrint/index.jsx
View File

@@ -1,77 +1,77 @@
"use client";
import {
EXPORT_MISSIONS_REPORT_TARADOD_COUNTRY_EXCEL_ACTIVITY,
EXPORT_MISSIONS_REPORT_TARADOD_PROVINCE_EXCEL_ACTIVITY,
} from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { useTheme } from "@emotion/react";
import DescriptionIcon from "@mui/icons-material/Description";
import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
import FileSaver from "file-saver";
import moment from "jalali-moment";
import { useMemo, useState } from "react";
const PrintExcel = ({ table, filterData }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [loading, setLoading] = useState(false);
const requestServer = useRequest({ notificationSuccess: true });
const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
if (filter.value) {
acc.push({ id: filter.id, value: filter.value });
}
return acc;
}, []);
const filterParams = useMemo(() => {
const params = new URLSearchParams();
activeFilters.length > 0 &&
activeFilters.map((filter, index) => {
params.set(`${filter.id}`, filter.value);
});
return params;
}, [activeFilters]);
const clickHandler = () => {
setLoading(true);
const CountryOrProvince = activeFilters.find((item) => item.id === "province_id");
const requestUrl =
CountryOrProvince.value === "-1"
? EXPORT_MISSIONS_REPORT_TARADOD_COUNTRY_EXCEL_ACTIVITY
: EXPORT_MISSIONS_REPORT_TARADOD_PROVINCE_EXCEL_ACTIVITY;
requestServer(`${requestUrl}?${filterParams}`, "get", {
requestOptions: { responseType: "blob" },
})
.then((response) => {
const filename = `خروجی کارتابل گزارشات گشت راهداری تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
FileSaver.saveAs(response.data, filename);
})
.catch(() => {})
.finally(() => {
setLoading(false);
});
};
return (
<>
{isMobile ? (
<IconButton aria-label="خروجی اکسل" color="success" onClick={clickHandler}>
<DescriptionIcon sx={{ fontSize: "25px" }} />
</IconButton>
) : (
<Button
color="success"
variant="contained"
size="small"
disabled={loading}
sx={{ textTransform: "unset", alignSelf: "center" }}
startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
onClick={clickHandler}
>
خروجی اکسل
</Button>
)}
</>
);
};
export default PrintExcel;
"use client";
import {
EXPORT_MISSIONS_REPORT_TARADOD_COUNTRY_EXCEL_ACTIVITY,
EXPORT_MISSIONS_REPORT_TARADOD_PROVINCE_EXCEL_ACTIVITY,
} from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { useTheme } from "@emotion/react";
import DescriptionIcon from "@mui/icons-material/Description";
import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
import FileSaver from "file-saver";
import moment from "jalali-moment";
import { useMemo, useState } from "react";
const PrintExcel = ({ table, filterData }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [loading, setLoading] = useState(false);
const requestServer = useRequest({ notificationSuccess: true });
const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
if (filter.value) {
acc.push({ id: filter.id, value: filter.value });
}
return acc;
}, []);
const filterParams = useMemo(() => {
const params = new URLSearchParams();
activeFilters.length > 0 &&
activeFilters.map((filter, index) => {
params.set(`${filter.id}`, filter.value);
});
return params;
}, [activeFilters]);
const clickHandler = () => {
setLoading(true);
const CountryOrProvince = activeFilters.find((item) => item.id === "province_id");
const requestUrl =
CountryOrProvince.value === "-1"
? EXPORT_MISSIONS_REPORT_TARADOD_COUNTRY_EXCEL_ACTIVITY
: EXPORT_MISSIONS_REPORT_TARADOD_PROVINCE_EXCEL_ACTIVITY;
requestServer(`${requestUrl}?${filterParams}`, "get", {
requestOptions: { responseType: "blob" },
})
.then((response) => {
const filename = `خروجی کارتابل گزارشات گشت راهداری تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
FileSaver.saveAs(response.data, filename);
})
.catch(() => {})
.finally(() => {
setLoading(false);
});
};
return (
<>
{isMobile ? (
<IconButton aria-label="خروجی اکسل" color="success" onClick={clickHandler}>
<DescriptionIcon sx={{ fontSize: "25px" }} />
</IconButton>
) : (
<Button
color="success"
variant="contained"
size="small"
disabled={loading}
sx={{ textTransform: "unset", alignSelf: "center" }}
startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
onClick={clickHandler}
>
خروجی اکسل
</Button>
)}
</>
);
};
export default PrintExcel;

276
src/components/dashboard/roadMissions/reports/taradodReports/MissionsReportLists.jsx
View File

@@ -1,138 +1,138 @@
"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { Box } from "@mui/material";
import { useEffect, useMemo } from "react";
import Toolbar from "./Toolbar";
const TaradodReportLists = ({ data, specialFilter }) => {
const columns = useMemo(() => {
return [
{
accessorKey: "edare_name",
header: "اداره کل",
id: "edare_name",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
},
{
accessorKey: "total",
header: "کل ماموریت ها",
id: "total",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "khareg_mahdode",
header: "تردد خارج از محدوده",
id: "khareg_mahdode",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "durations",
header: "جمع ساعات ماموریت",
id: "duration",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "gps",
header: "جمع ساعات gps",
id: "gps",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "far_h",
header: "با فرایند ساعتی",
id: "far_h",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "far_d",
header: "با فرایند روزانه",
id: "far_d",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "un_far_h",
header: "بدون فرایند ساعتی",
id: "un_far_h",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "un_far_d",
header: "بدون فرایند روزانه",
id: "un_far_d",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "item",
header: "فعالیت روزانه",
id: "item",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
},
{
accessorKey: "patrol",
header: "گشت راهداری",
id: "patrol",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
},
];
}, []);
return (
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
TableToolbar={Toolbar}
columns={columns}
data={data.data}
page_name={"roadMissionReport"}
table_name={"roadMissionReportList"}
enablePagination={false}
specialFilter={specialFilter}
/>
</Box>
);
};
export default TaradodReportLists;
"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { Box } from "@mui/material";
import { useEffect, useMemo } from "react";
import Toolbar from "./Toolbar";
const TaradodReportLists = ({ data, specialFilter }) => {
const columns = useMemo(() => {
return [
{
accessorKey: "edare_name",
header: "اداره کل",
id: "edare_name",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
},
{
accessorKey: "total",
header: "کل ماموریت ها",
id: "total",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "khareg_mahdode",
header: "تردد خارج از محدوده",
id: "khareg_mahdode",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "durations",
header: "جمع ساعات ماموریت",
id: "duration",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "gps",
header: "جمع ساعات gps",
id: "gps",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "far_h",
header: "با فرایند ساعتی",
id: "far_h",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "far_d",
header: "با فرایند روزانه",
id: "far_d",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "un_far_h",
header: "بدون فرایند ساعتی",
id: "un_far_h",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "un_far_d",
header: "بدون فرایند روزانه",
id: "un_far_d",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "item",
header: "فعالیت روزانه",
id: "item",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
},
{
accessorKey: "patrol",
header: "گشت راهداری",
id: "patrol",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
},
];
}, []);
return (
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
TableToolbar={Toolbar}
columns={columns}
data={data.data}
page_name={"roadMissionReport"}
table_name={"roadMissionReportList"}
enablePagination={false}
specialFilter={specialFilter}
/>
</Box>
);
};
export default TaradodReportLists;

54
src/components/dashboard/roadMissions/reports/taradodReports/Search/FromDateController.jsx
View File

@@ -1,27 +1,27 @@
import MuiDatePicker from "@/core/components/MuiDatePicker";
import moment from "jalali-moment";
import { Controller } from "react-hook-form";
const FromDateController = ({ control }) => {
return (
<Controller
name="from_date"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<MuiDatePicker
name="from_date"
error={!!error}
value={value}
label={"تاریخ شروع (از تاریخ)"}
placeholder={"از تاریخ"}
setFieldValue={(name, newValue) => {
const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
onChange(formattedDate); // Update the field value in react-hook-form
}}
helperText={error ? error.message : null}
/>
)}
/>
);
};
export default FromDateController;
import MuiDatePicker from "@/core/components/MuiDatePicker";
import moment from "jalali-moment";
import { Controller } from "react-hook-form";
const FromDateController = ({ control }) => {
return (
<Controller
name="from_date"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<MuiDatePicker
name="from_date"
error={!!error}
value={value}
label={"تاریخ شروع (از تاریخ)"}
placeholder={"از تاریخ"}
setFieldValue={(name, newValue) => {
const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
onChange(formattedDate); // Update the field value in react-hook-form
}}
helperText={error ? error.message : null}
/>
)}
/>
);
};
export default FromDateController;

88
src/components/dashboard/roadMissions/reports/taradodReports/Search/SearchReportField.jsx
View File

@@ -1,44 +1,44 @@
import SearchIcon from "@mui/icons-material/Search";
import { Button, Grid } from "@mui/material";
import { Controller } from "react-hook-form";
import FromDateController from "./FromDateController";
import SelectProvince from "./SelectProvince";
import ToDateController from "./ToDateController";
const SearchReportField = ({ control, hasProvincesPermission }) => {
return (
<Grid container spacing={2} sx={{ py: 2 }}>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<FromDateController control={control} />
</Grid>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<ToDateController control={control} />
</Grid>
{hasProvincesPermission && (
<Grid item xs={12} md={3}>
<SelectProvince control={control} />
</Grid>
)}
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<Controller
name="submitButton"
control={control}
render={({ field: { value, onChange }, formState: { isSubmitting } }) => (
<Button
variant="contained"
size="medium"
type="submit"
disabled={isSubmitting}
endIcon={<SearchIcon />}
fullWidth
>
{isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"}
</Button>
)}
/>
</Grid>
</Grid>
);
};
export default SearchReportField;
import SearchIcon from "@mui/icons-material/Search";
import { Button, Grid } from "@mui/material";
import { Controller } from "react-hook-form";
import FromDateController from "./FromDateController";
import SelectProvince from "./SelectProvince";
import ToDateController from "./ToDateController";
const SearchReportField = ({ control, hasProvincesPermission }) => {
return (
<Grid container spacing={2} sx={{ py: 2 }}>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<FromDateController control={control} />
</Grid>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<ToDateController control={control} />
</Grid>
{hasProvincesPermission && (
<Grid item xs={12} md={3}>
<SelectProvince control={control} />
</Grid>
)}
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<Controller
name="submitButton"
control={control}
render={({ field: { value, onChange }, formState: { isSubmitting } }) => (
<Button
variant="contained"
size="medium"
type="submit"
disabled={isSubmitting}
endIcon={<SearchIcon />}
fullWidth
>
{isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"}
</Button>
)}
/>
</Grid>
</Grid>
);
};
export default SearchReportField;

90
src/components/dashboard/roadMissions/reports/taradodReports/Search/SelectProvince.jsx
View File

@@ -1,45 +1,45 @@
import useProvinces from "@/lib/hooks/useProvince";
import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
import { Controller } from "react-hook-form";
const SelectProvince = ({ control }) => {
const { provinces, loadingProvinces, errorProvinces } = useProvinces();
return (
<Controller
name="province_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl error={!!error} size="small" fullWidth>
<InputLabel id="demo-error-label">استان</InputLabel>
<Select
{...field}
labelId="demo-error-label"
id="province_id"
value={loadingProvinces ? "loading" : field.value || ""}
label="استان"
onChange={field.onChange}
>
{loadingProvinces ? (
<MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
) : errorProvinces ? (
<MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
) : (
[
<MenuItem key="-1" value={"-1"}>
کل کشور
</MenuItem>,
...provinces.map((province) => (
<MenuItem key={province.id} value={province.id}>
{province.name_fa}
</MenuItem>
)),
]
)}
</Select>
{error && <FormHelperText>{error.message}</FormHelperText>}
</FormControl>
)}
/>
);
};
export default SelectProvince;
import useProvinces from "@/lib/hooks/useProvince";
import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
import { Controller } from "react-hook-form";
const SelectProvince = ({ control }) => {
const { provinces, loadingProvinces, errorProvinces } = useProvinces();
return (
<Controller
name="province_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl error={!!error} size="small" fullWidth>
<InputLabel id="demo-error-label">استان</InputLabel>
<Select
{...field}
labelId="demo-error-label"
id="province_id"
value={loadingProvinces ? "loading" : field.value || ""}
label="استان"
onChange={field.onChange}
>
{loadingProvinces ? (
<MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
) : errorProvinces ? (
<MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
) : (
[
<MenuItem key="-1" value={"-1"}>
کل کشور
</MenuItem>,
...provinces.map((province) => (
<MenuItem key={province.id} value={province.id}>
{province.name_fa}
</MenuItem>
)),
]
)}
</Select>
{error && <FormHelperText>{error.message}</FormHelperText>}
</FormControl>
)}
/>
);
};
export default SelectProvince;

60
src/components/dashboard/roadMissions/reports/taradodReports/Search/ToDateController.jsx
View File

@@ -1,30 +1,30 @@
import MuiDatePicker from "@/core/components/MuiDatePicker";
import moment from "jalali-moment";
import { Controller, useWatch } from "react-hook-form";
const ToDateController = ({ control }) => {
const minDate = useWatch({ control, name: "from_date" });
return (
<Controller
name="date_to"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<MuiDatePicker
name="date_to"
minDate={minDate}
maxDate={new Date()}
error={!!error}
value={value}
label={"تاریخ پایان (تا تاریخ)"}
placeholder={"تا تاریخ"}
setFieldValue={(name, newValue) => {
const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
onChange(formattedDate); // Update the field value in react-hook-form
}}
helperText={error ? error.message : null}
/>
)}
/>
);
};
export default ToDateController;
import MuiDatePicker from "@/core/components/MuiDatePicker";
import moment from "jalali-moment";
import { Controller, useWatch } from "react-hook-form";
const ToDateController = ({ control }) => {
const minDate = useWatch({ control, name: "from_date" });
return (
<Controller
name="date_to"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<MuiDatePicker
name="date_to"
minDate={minDate}
maxDate={new Date()}
error={!!error}
value={value}
label={"تاریخ پایان (تا تاریخ)"}
placeholder={"تا تاریخ"}
setFieldValue={(name, newValue) => {
const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
onChange(formattedDate); // Update the field value in react-hook-form
}}
helperText={error ? error.message : null}
/>
)}
/>
);
};
export default ToDateController;

26
src/components/dashboard/roadMissions/reports/taradodReports/Search/index.jsx
View File

@@ -1,13 +1,13 @@
import StyledForm from "@/core/components/StyledForm";
import SearchReportField from "./SearchReportField";
const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesPermission }) => {
return (
<>
<StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
<SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
</StyledForm>
</>
);
};
export default SearchReportList;
import StyledForm from "@/core/components/StyledForm";
import SearchReportField from "./SearchReportField";
const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesPermission }) => {
return (
<>
<StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
<SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
</StyledForm>
</>
);
};
export default SearchReportList;

22
src/components/dashboard/roadMissions/reports/taradodReports/Toolbar.jsx
View File

@@ -1,11 +1,11 @@
import { Box } from "@mui/material";
import PrintExcel from "./ExcelPrint";
const Toolbar = ({ table, filterData, mutate }) => {
return (
<Box sx={{ display: "flex", gap: 1 }}>
<PrintExcel table={table} filterData={filterData} />
</Box>
);
};
export default Toolbar;
import { Box } from "@mui/material";
import PrintExcel from "./ExcelPrint";
const Toolbar = ({ table, filterData, mutate }) => {
return (
<Box sx={{ display: "flex", gap: 1 }}>
<PrintExcel table={table} filterData={filterData} />
</Box>
);
};
export default Toolbar;

284
src/components/dashboard/roadMissions/reports/taradodReports/index.jsx
View File

@@ -1,142 +1,142 @@
"use client";
import PageTitle from "@/core/components/PageTitle";
import {
GET_MISSIONS_REPORT_TARADOD_COUNTRY_ACTIVITY,
GET_MISSIONS_REPORT_TARADOD_PROVINCE_ACTIVITY,
} from "@/core/utils/routes";
import { useAuth } from "@/lib/contexts/auth";
import { usePermissions } from "@/lib/hooks/usePermissions";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { LinearProgress, Stack } from "@mui/material";
import moment from "jalali-moment";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import TaradodReportLists from "./MissionsReportLists";
import SearchReportList from "./Search";
const TaradodReportPage = () => {
const [data, setData] = useState(null);
const { data: userPermissions } = usePermissions();
const { user } = useAuth();
const requestServer = useRequest();
const [provinceId, setProvinceId] = useState(user.province_id || "-1");
const hasProvincesPermission = userPermissions?.includes("mission-report-country");
const defaultValues = {
from_date: moment(new Date()).format("YYYY-MM-DD"),
date_to: moment(new Date()).format("YYYY-MM-DD"),
province_id: provinceId,
};
const defaultFilter = [
{ value: `${defaultValues.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
{ value: `${defaultValues.from_date}`, datatype: "date", id: "from_date", fn: "between" },
{ value: `${defaultValues.date_to}`, datatype: "date", id: "date_to", fn: "between" },
];
const [specialFilter, setSpecialFilter] = useState(defaultFilter);
const onSearchSubmit = async (data) => {
const params = new URLSearchParams();
params.set("from_date", `${data.from_date}`);
params.set("date_to", `${data.date_to}`);
setSpecialFilter([
{ value: `${data.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
{ value: `${data.from_date}`, datatype: "date", id: "from_date", fn: "between" },
{ value: `${data.date_to}`, datatype: "date", id: "date_to", fn: "between" },
]);
if (data.province_id === "-1") {
try {
// params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_MISSIONS_REPORT_TARADOD_COUNTRY_ACTIVITY}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.province_id === "-1");
const nationalReport = {
edare_name: "کل کشور",
...nationalReportForItem,
};
setData({
data: [
nationalReport,
...result.provinces.map((province) => {
const filteredReports = result.activities.find(
(report) => report.province_id == province.id
);
return {
...filteredReports,
edare_name: province.name_fa,
};
}),
],
filters: data,
});
} catch (e) {}
} else {
try {
params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_MISSIONS_REPORT_TARADOD_PROVINCE_ACTIVITY}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.city_id === "-1");
const nationalReport = {
...nationalReportForItem,
edare_name: "کل استان",
};
setData({
data: [
nationalReport,
...result.city.map((city) => {
const filteredReports = result.activities.find((report) => report.city_id == city.id);
return {
edare_name: city.name_fa,
...filteredReports,
};
}),
],
filters: data,
});
} catch (e) {}
}
};
useEffect(() => {
if (!userPermissions) return;
onSearchSubmit(defaultValues);
}, [userPermissions]);
const validationSchema = yup.object().shape({
from_date: yup
.string()
.required("تاریخ شروع الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ شروع الزامی است!")
.test("is-valid-date", "تاریخ شروع معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
date_to: yup
.string()
.required("تاریخ پایان الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ پایان الزامی است!")
.test("is-valid-date", "تاریخ پایان معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
province_id: yup.string().nullable(),
});
const { control, handleSubmit } = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "all",
});
return (
<Stack spacing={1}>
<PageTitle title={"کارتابل گزارش تردد ها"} />
<SearchReportList
control={control}
hasProvincesPermission={hasProvincesPermission}
handleSubmit={handleSubmit}
onSearchSubmit={onSearchSubmit}
/>
{!data ? <LinearProgress /> : <TaradodReportLists specialFilter={specialFilter} data={data} />}
</Stack>
);
};
export default TaradodReportPage;
"use client";
import PageTitle from "@/core/components/PageTitle";
import {
GET_MISSIONS_REPORT_TARADOD_COUNTRY_ACTIVITY,
GET_MISSIONS_REPORT_TARADOD_PROVINCE_ACTIVITY,
} from "@/core/utils/routes";
import { useAuth } from "@/lib/contexts/auth";
import { usePermissions } from "@/lib/hooks/usePermissions";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { LinearProgress, Stack } from "@mui/material";
import moment from "jalali-moment";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import TaradodReportLists from "./MissionsReportLists";
import SearchReportList from "./Search";
const TaradodReportPage = () => {
const [data, setData] = useState(null);
const { data: userPermissions } = usePermissions();
const { user } = useAuth();
const requestServer = useRequest();
const [provinceId, setProvinceId] = useState(user.province_id || "-1");
const hasProvincesPermission = userPermissions?.includes("mission-report-country");
const defaultValues = {
from_date: moment(new Date()).format("YYYY-MM-DD"),
date_to: moment(new Date()).format("YYYY-MM-DD"),
province_id: provinceId,
};
const defaultFilter = [
{ value: `${defaultValues.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
{ value: `${defaultValues.from_date}`, datatype: "date", id: "from_date", fn: "between" },
{ value: `${defaultValues.date_to}`, datatype: "date", id: "date_to", fn: "between" },
];
const [specialFilter, setSpecialFilter] = useState(defaultFilter);
const onSearchSubmit = async (data) => {
const params = new URLSearchParams();
params.set("from_date", `${data.from_date}`);
params.set("date_to", `${data.date_to}`);
setSpecialFilter([
{ value: `${data.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
{ value: `${data.from_date}`, datatype: "date", id: "from_date", fn: "between" },
{ value: `${data.date_to}`, datatype: "date", id: "date_to", fn: "between" },
]);
if (data.province_id === "-1") {
try {
// params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_MISSIONS_REPORT_TARADOD_COUNTRY_ACTIVITY}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.province_id === "-1");
const nationalReport = {
edare_name: "کل کشور",
...nationalReportForItem,
};
setData({
data: [
nationalReport,
...result.provinces.map((province) => {
const filteredReports = result.activities.find(
(report) => report.province_id == province.id
);
return {
...filteredReports,
edare_name: province.name_fa,
};
}),
],
filters: data,
});
} catch (e) {}
} else {
try {
params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_MISSIONS_REPORT_TARADOD_PROVINCE_ACTIVITY}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.city_id === "-1");
const nationalReport = {
...nationalReportForItem,
edare_name: "کل استان",
};
setData({
data: [
nationalReport,
...result.city.map((city) => {
const filteredReports = result.activities.find((report) => report.city_id == city.id);
return {
edare_name: city.name_fa,
...filteredReports,
};
}),
],
filters: data,
});
} catch (e) {}
}
};
useEffect(() => {
if (!userPermissions) return;
onSearchSubmit(defaultValues);
}, [userPermissions]);
const validationSchema = yup.object().shape({
from_date: yup
.string()
.required("تاریخ شروع الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ شروع الزامی است!")
.test("is-valid-date", "تاریخ شروع معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
date_to: yup
.string()
.required("تاریخ پایان الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ پایان الزامی است!")
.test("is-valid-date", "تاریخ پایان معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
province_id: yup.string().nullable(),
});
const { control, handleSubmit } = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "all",
});
return (
<Stack spacing={1}>
<PageTitle title={"کارتابل گزارش تردد ها"} />
<SearchReportList
control={control}
hasProvincesPermission={hasProvincesPermission}
handleSubmit={handleSubmit}
onSearchSubmit={onSearchSubmit}
/>
{!data ? <LinearProgress /> : <TaradodReportLists specialFilter={specialFilter} data={data} />}
</Stack>
);
};
export default TaradodReportPage;

154
src/components/dashboard/roadMissions/reports/violationsReports/ExcelPrint/index.jsx
View File

@@ -1,77 +1,77 @@
"use client";
import {
EXPORT_MISSIONS_REPORT_VIOLATION_COUNTRY_EXCEL_ACTIVITY,
EXPORT_MISSIONS_REPORT_VIOLATION_PROVINCE_EXCEL_ACTIVITY,
} from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { useTheme } from "@emotion/react";
import DescriptionIcon from "@mui/icons-material/Description";
import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
import FileSaver from "file-saver";
import moment from "jalali-moment";
import { useMemo, useState } from "react";
const PrintExcel = ({ table, filterData }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [loading, setLoading] = useState(false);
const requestServer = useRequest({ notificationSuccess: true });
const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
if (filter.value) {
acc.push({ id: filter.id, value: filter.value });
}
return acc;
}, []);
const filterParams = useMemo(() => {
const params = new URLSearchParams();
activeFilters.length > 0 &&
activeFilters.map((filter, index) => {
params.set(`${filter.id}`, filter.value);
});
return params;
}, [activeFilters]);
const clickHandler = () => {
setLoading(true);
const CountryOrProvince = activeFilters.find((item) => item.id === "province_id");
const requestUrl =
CountryOrProvince.value === "-1"
? EXPORT_MISSIONS_REPORT_VIOLATION_COUNTRY_EXCEL_ACTIVITY
: EXPORT_MISSIONS_REPORT_VIOLATION_PROVINCE_EXCEL_ACTIVITY;
requestServer(`${requestUrl}?${filterParams}`, "get", {
requestOptions: { responseType: "blob" },
})
.then((response) => {
const filename = `خروجی کارتابل گزارشات گشت راهداری تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
FileSaver.saveAs(response.data, filename);
})
.catch(() => {})
.finally(() => {
setLoading(false);
});
};
return (
<>
{isMobile ? (
<IconButton aria-label="خروجی اکسل" color="success" onClick={clickHandler}>
<DescriptionIcon sx={{ fontSize: "25px" }} />
</IconButton>
) : (
<Button
color="success"
variant="contained"
size="small"
disabled={loading}
sx={{ textTransform: "unset", alignSelf: "center" }}
startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
onClick={clickHandler}
>
خروجی اکسل
</Button>
)}
</>
);
};
export default PrintExcel;
"use client";
import {
EXPORT_MISSIONS_REPORT_VIOLATION_COUNTRY_EXCEL_ACTIVITY,
EXPORT_MISSIONS_REPORT_VIOLATION_PROVINCE_EXCEL_ACTIVITY,
} from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { useTheme } from "@emotion/react";
import DescriptionIcon from "@mui/icons-material/Description";
import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
import FileSaver from "file-saver";
import moment from "jalali-moment";
import { useMemo, useState } from "react";
const PrintExcel = ({ table, filterData }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [loading, setLoading] = useState(false);
const requestServer = useRequest({ notificationSuccess: true });
const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
if (filter.value) {
acc.push({ id: filter.id, value: filter.value });
}
return acc;
}, []);
const filterParams = useMemo(() => {
const params = new URLSearchParams();
activeFilters.length > 0 &&
activeFilters.map((filter, index) => {
params.set(`${filter.id}`, filter.value);
});
return params;
}, [activeFilters]);
const clickHandler = () => {
setLoading(true);
const CountryOrProvince = activeFilters.find((item) => item.id === "province_id");
const requestUrl =
CountryOrProvince.value === "-1"
? EXPORT_MISSIONS_REPORT_VIOLATION_COUNTRY_EXCEL_ACTIVITY
: EXPORT_MISSIONS_REPORT_VIOLATION_PROVINCE_EXCEL_ACTIVITY;
requestServer(`${requestUrl}?${filterParams}`, "get", {
requestOptions: { responseType: "blob" },
})
.then((response) => {
const filename = `خروجی کارتابل گزارشات گشت راهداری تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
FileSaver.saveAs(response.data, filename);
})
.catch(() => {})
.finally(() => {
setLoading(false);
});
};
return (
<>
{isMobile ? (
<IconButton aria-label="خروجی اکسل" color="success" onClick={clickHandler}>
<DescriptionIcon sx={{ fontSize: "25px" }} />
</IconButton>
) : (
<Button
color="success"
variant="contained"
size="small"
disabled={loading}
sx={{ textTransform: "unset", alignSelf: "center" }}
startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
onClick={clickHandler}
>
خروجی اکسل
</Button>
)}
</>
);
};
export default PrintExcel;

54
src/components/dashboard/roadMissions/reports/violationsReports/Search/FromDateController.jsx
View File

@@ -1,27 +1,27 @@
import MuiDatePicker from "@/core/components/MuiDatePicker";
import moment from "jalali-moment";
import { Controller } from "react-hook-form";
const FromDateController = ({ control }) => {
return (
<Controller
name="from_date"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<MuiDatePicker
name="from_date"
error={!!error}
value={value}
label={"تاریخ شروع (از تاریخ)"}
placeholder={"از تاریخ"}
setFieldValue={(name, newValue) => {
const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
onChange(formattedDate); // Update the field value in react-hook-form
}}
helperText={error ? error.message : null}
/>
)}
/>
);
};
export default FromDateController;
import MuiDatePicker from "@/core/components/MuiDatePicker";
import moment from "jalali-moment";
import { Controller } from "react-hook-form";
const FromDateController = ({ control }) => {
return (
<Controller
name="from_date"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<MuiDatePicker
name="from_date"
error={!!error}
value={value}
label={"تاریخ شروع (از تاریخ)"}
placeholder={"از تاریخ"}
setFieldValue={(name, newValue) => {
const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
onChange(formattedDate); // Update the field value in react-hook-form
}}
helperText={error ? error.message : null}
/>
)}
/>
);
};
export default FromDateController;

88
src/components/dashboard/roadMissions/reports/violationsReports/Search/SearchReportField.jsx
View File

@@ -1,44 +1,44 @@
import SearchIcon from "@mui/icons-material/Search";
import { Button, Grid } from "@mui/material";
import { Controller } from "react-hook-form";
import FromDateController from "./FromDateController";
import SelectProvince from "./SelectProvince";
import ToDateController from "./ToDateController";
const SearchReportField = ({ control, hasProvincesPermission }) => {
return (
<Grid container spacing={2} sx={{ py: 2 }}>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<FromDateController control={control} />
</Grid>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<ToDateController control={control} />
</Grid>
{hasProvincesPermission && (
<Grid item xs={12} md={3}>
<SelectProvince control={control} />
</Grid>
)}
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<Controller
name="submitButton"
control={control}
render={({ field: { value, onChange }, formState: { isSubmitting } }) => (
<Button
variant="contained"
size="medium"
type="submit"
disabled={isSubmitting}
endIcon={<SearchIcon />}
fullWidth
>
{isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"}
</Button>
)}
/>
</Grid>
</Grid>
);
};
export default SearchReportField;
import SearchIcon from "@mui/icons-material/Search";
import { Button, Grid } from "@mui/material";
import { Controller } from "react-hook-form";
import FromDateController from "./FromDateController";
import SelectProvince from "./SelectProvince";
import ToDateController from "./ToDateController";
const SearchReportField = ({ control, hasProvincesPermission }) => {
return (
<Grid container spacing={2} sx={{ py: 2 }}>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<FromDateController control={control} />
</Grid>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<ToDateController control={control} />
</Grid>
{hasProvincesPermission && (
<Grid item xs={12} md={3}>
<SelectProvince control={control} />
</Grid>
)}
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<Controller
name="submitButton"
control={control}
render={({ field: { value, onChange }, formState: { isSubmitting } }) => (
<Button
variant="contained"
size="medium"
type="submit"
disabled={isSubmitting}
endIcon={<SearchIcon />}
fullWidth
>
{isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"}
</Button>
)}
/>
</Grid>
</Grid>
);
};
export default SearchReportField;

90
src/components/dashboard/roadMissions/reports/violationsReports/Search/SelectProvince.jsx
View File

@@ -1,45 +1,45 @@
import useProvinces from "@/lib/hooks/useProvince";
import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
import { Controller } from "react-hook-form";
const SelectProvince = ({ control }) => {
const { provinces, loadingProvinces, errorProvinces } = useProvinces();
return (
<Controller
name="province_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl error={!!error} size="small" fullWidth>
<InputLabel id="demo-error-label">استان</InputLabel>
<Select
{...field}
labelId="demo-error-label"
id="province_id"
value={loadingProvinces ? "loading" : field.value || ""}
label="استان"
onChange={field.onChange}
>
{loadingProvinces ? (
<MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
) : errorProvinces ? (
<MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
) : (
[
<MenuItem key="-1" value={"-1"}>
کل کشور
</MenuItem>,
...provinces.map((province) => (
<MenuItem key={province.id} value={province.id}>
{province.name_fa}
</MenuItem>
)),
]
)}
</Select>
{error && <FormHelperText>{error.message}</FormHelperText>}
</FormControl>
)}
/>
);
};
export default SelectProvince;
import useProvinces from "@/lib/hooks/useProvince";
import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
import { Controller } from "react-hook-form";
const SelectProvince = ({ control }) => {
const { provinces, loadingProvinces, errorProvinces } = useProvinces();
return (
<Controller
name="province_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl error={!!error} size="small" fullWidth>
<InputLabel id="demo-error-label">استان</InputLabel>
<Select
{...field}
labelId="demo-error-label"
id="province_id"
value={loadingProvinces ? "loading" : field.value || ""}
label="استان"
onChange={field.onChange}
>
{loadingProvinces ? (
<MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
) : errorProvinces ? (
<MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
) : (
[
<MenuItem key="-1" value={"-1"}>
کل کشور
</MenuItem>,
...provinces.map((province) => (
<MenuItem key={province.id} value={province.id}>
{province.name_fa}
</MenuItem>
)),
]
)}
</Select>
{error && <FormHelperText>{error.message}</FormHelperText>}
</FormControl>
)}
/>
);
};
export default SelectProvince;

60
src/components/dashboard/roadMissions/reports/violationsReports/Search/ToDateController.jsx
View File

@@ -1,30 +1,30 @@
import MuiDatePicker from "@/core/components/MuiDatePicker";
import moment from "jalali-moment";
import { Controller, useWatch } from "react-hook-form";
const ToDateController = ({ control }) => {
const minDate = useWatch({ control, name: "from_date" });
return (
<Controller
name="date_to"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<MuiDatePicker
name="date_to"
minDate={minDate}
maxDate={new Date()}
error={!!error}
value={value}
label={"تاریخ شروع (تا تاریخ)"}
placeholder={"تا تاریخ"}
setFieldValue={(name, newValue) => {
const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
onChange(formattedDate); // Update the field value in react-hook-form
}}
helperText={error ? error.message : null}
/>
)}
/>
);
};
export default ToDateController;
import MuiDatePicker from "@/core/components/MuiDatePicker";
import moment from "jalali-moment";
import { Controller, useWatch } from "react-hook-form";
const ToDateController = ({ control }) => {
const minDate = useWatch({ control, name: "from_date" });
return (
<Controller
name="date_to"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<MuiDatePicker
name="date_to"
minDate={minDate}
maxDate={new Date()}
error={!!error}
value={value}
label={"تاریخ شروع (تا تاریخ)"}
placeholder={"تا تاریخ"}
setFieldValue={(name, newValue) => {
const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
onChange(formattedDate); // Update the field value in react-hook-form
}}
helperText={error ? error.message : null}
/>
)}
/>
);
};
export default ToDateController;

26
src/components/dashboard/roadMissions/reports/violationsReports/Search/index.jsx
View File

@@ -1,13 +1,13 @@
import StyledForm from "@/core/components/StyledForm";
import SearchReportField from "./SearchReportField";
const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesPermission }) => {
return (
<>
<StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
<SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
</StyledForm>
</>
);
};
export default SearchReportList;
import StyledForm from "@/core/components/StyledForm";
import SearchReportField from "./SearchReportField";
const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesPermission }) => {
return (
<>
<StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
<SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
</StyledForm>
</>
);
};
export default SearchReportList;

22
src/components/dashboard/roadMissions/reports/violationsReports/Toolbar.jsx
View File

@@ -1,11 +1,11 @@
import { Box } from "@mui/material";
import PrintExcel from "./ExcelPrint";
const Toolbar = ({ table, filterData, mutate }) => {
return (
<Box sx={{ display: "flex", gap: 1 }}>
<PrintExcel table={table} filterData={filterData} />
</Box>
);
};
export default Toolbar;
import { Box } from "@mui/material";
import PrintExcel from "./ExcelPrint";
const Toolbar = ({ table, filterData, mutate }) => {
return (
<Box sx={{ display: "flex", gap: 1 }}>
<PrintExcel table={table} filterData={filterData} />
</Box>
);
};
export default Toolbar;

196
src/components/dashboard/roadMissions/reports/violationsReports/ViolationsReportsList.jsx
View File

@@ -1,98 +1,98 @@
"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { Box } from "@mui/material";
import { useEffect, useMemo } from "react";
import Toolbar from "./Toolbar";
const ViolationsReportsList = ({ data, specialFilter }) => {
const columns = useMemo(() => {
return [
{
accessorKey: "edare_name",
header: "اداره کل",
id: "edare_name",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
},
{
accessorKey: "total",
header: "کل تخلفات",
id: "total",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "done",
header: "اقدام شده",
id: "done",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "undone",
header: "اقدام نشده",
id: "un_done",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "gps",
header: "GPS",
id: "gps",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "herasat",
header: "ثبت حراست",
id: "herasat",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "mil_gps",
header: "کیلومتر GPS",
id: "mil_gps",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
];
}, []);
return (
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
TableToolbar={Toolbar}
columns={columns}
data={data.data}
page_name={"roadMissionReport"}
table_name={"roadMissionReportList"}
enablePagination={false}
specialFilter={specialFilter}
/>
</Box>
);
};
export default ViolationsReportsList;
"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { Box } from "@mui/material";
import { useEffect, useMemo } from "react";
import Toolbar from "./Toolbar";
const ViolationsReportsList = ({ data, specialFilter }) => {
const columns = useMemo(() => {
return [
{
accessorKey: "edare_name",
header: "اداره کل",
id: "edare_name",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
},
{
accessorKey: "total",
header: "کل تخلفات",
id: "total",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "done",
header: "اقدام شده",
id: "done",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "undone",
header: "اقدام نشده",
id: "un_done",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "gps",
header: "GPS",
id: "gps",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "herasat",
header: "ثبت حراست",
id: "herasat",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
{
accessorKey: "mil_gps",
header: "کیلومتر GPS",
id: "mil_gps",
enableColumnFilter: false,
enableSorting: false,
datatype: "numeric",
grow: false,
size: 50,
},
];
}, []);
return (
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
TableToolbar={Toolbar}
columns={columns}
data={data.data}
page_name={"roadMissionReport"}
table_name={"roadMissionReportList"}
enablePagination={false}
specialFilter={specialFilter}
/>
</Box>
);
};
export default ViolationsReportsList;

282
src/components/dashboard/roadMissions/reports/violationsReports/index.jsx
View File

@@ -1,141 +1,141 @@
"use client";
import PageTitle from "@/core/components/PageTitle";
import {
GET_MISSIONS_REPORT_VIOLATION_COUNTRY_ACTIVITY,
GET_MISSIONS_REPORT_VIOLATION_PROVINCE_ACTIVITY,
} from "@/core/utils/routes";
import { useAuth } from "@/lib/contexts/auth";
import { usePermissions } from "@/lib/hooks/usePermissions";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { LinearProgress, Stack } from "@mui/material";
import moment from "jalali-moment";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import ViolationsReportsList from "./ViolationsReportsList";
import SearchReportList from "./Search";
const ViolationsReportsPage = () => {
const [data, setData] = useState(null);
const { data: userPermissions } = usePermissions();
const { user } = useAuth();
const requestServer = useRequest();
const hasProvincesPermission = userPermissions?.includes("mission-report-country");
const defaultValues = {
from_date: moment(new Date()).format("YYYY-MM-DD"),
date_to: moment(new Date()).format("YYYY-MM-DD"),
province_id: user.province_id || "-1",
};
const defaultFilter = [
{ value: `${defaultValues.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
{ value: `${defaultValues.from_date}`, datatype: "date", id: "from_date", fn: "between" },
{ value: `${defaultValues.date_to}`, datatype: "date", id: "date_to", fn: "between" },
];
const [specialFilter, setSpecialFilter] = useState(defaultFilter);
const onSearchSubmit = async (data) => {
const params = new URLSearchParams();
params.set("from_date", `${data.from_date}`);
params.set("date_to", `${data.date_to}`);
setSpecialFilter([
{ value: `${data.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
{ value: `${data.from_date}`, datatype: "date", id: "from_date", fn: "between" },
{ value: `${data.date_to}`, datatype: "date", id: "date_to", fn: "between" },
]);
if (data.province_id === "-1") {
try {
// params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_MISSIONS_REPORT_VIOLATION_COUNTRY_ACTIVITY}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.province_id === "-1");
const nationalReport = {
edare_name: "کل کشور",
...nationalReportForItem,
};
setData({
data: [
nationalReport,
...result.provinces.map((province) => {
const filteredReports = result.activities.find(
(report) => report.province_id == province.id
);
return {
...filteredReports,
edare_name: province.name_fa,
};
}),
],
filters: data,
});
} catch (e) {}
} else {
try {
params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_MISSIONS_REPORT_VIOLATION_PROVINCE_ACTIVITY}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.city_id === "-1");
const nationalReport = {
...nationalReportForItem,
edare_name: "کل استان",
};
setData({
data: [
nationalReport,
...result.city.map((city) => {
const filteredReports = result.activities.find((report) => report.city_id == city.id);
return {
edare_name: city.name_fa,
...filteredReports,
};
}),
],
filters: data,
});
} catch (e) {}
}
};
useEffect(() => {
if (!userPermissions) return;
onSearchSubmit(defaultValues);
}, [userPermissions]);
const validationSchema = yup.object().shape({
from_date: yup
.string()
.required("تاریخ شروع الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ شروع الزامی است!")
.test("is-valid-date", "تاریخ شروع معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
date_to: yup
.string()
.required("تاریخ پایان الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ پایان الزامی است!")
.test("is-valid-date", "تاریخ پایان معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
province_id: yup.string().nullable(),
});
const { control, handleSubmit } = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "all",
});
return (
<Stack spacing={1}>
<PageTitle title={"کارتابل گزارش ماموریت"} />
<SearchReportList
control={control}
hasProvincesPermission={hasProvincesPermission}
handleSubmit={handleSubmit}
onSearchSubmit={onSearchSubmit}
/>
{!data ? <LinearProgress /> : <ViolationsReportsList specialFilter={specialFilter} data={data} />}
</Stack>
);
};
export default ViolationsReportsPage;
"use client";
import PageTitle from "@/core/components/PageTitle";
import {
GET_MISSIONS_REPORT_VIOLATION_COUNTRY_ACTIVITY,
GET_MISSIONS_REPORT_VIOLATION_PROVINCE_ACTIVITY,
} from "@/core/utils/routes";
import { useAuth } from "@/lib/contexts/auth";
import { usePermissions } from "@/lib/hooks/usePermissions";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { LinearProgress, Stack } from "@mui/material";
import moment from "jalali-moment";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import ViolationsReportsList from "./ViolationsReportsList";
import SearchReportList from "./Search";
const ViolationsReportsPage = () => {
const [data, setData] = useState(null);
const { data: userPermissions } = usePermissions();
const { user } = useAuth();
const requestServer = useRequest();
const hasProvincesPermission = userPermissions?.includes("mission-report-country");
const defaultValues = {
from_date: moment(new Date()).format("YYYY-MM-DD"),
date_to: moment(new Date()).format("YYYY-MM-DD"),
province_id: user.province_id || "-1",
};
const defaultFilter = [
{ value: `${defaultValues.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
{ value: `${defaultValues.from_date}`, datatype: "date", id: "from_date", fn: "between" },
{ value: `${defaultValues.date_to}`, datatype: "date", id: "date_to", fn: "between" },
];
const [specialFilter, setSpecialFilter] = useState(defaultFilter);
const onSearchSubmit = async (data) => {
const params = new URLSearchParams();
params.set("from_date", `${data.from_date}`);
params.set("date_to", `${data.date_to}`);
setSpecialFilter([
{ value: `${data.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
{ value: `${data.from_date}`, datatype: "date", id: "from_date", fn: "between" },
{ value: `${data.date_to}`, datatype: "date", id: "date_to", fn: "between" },
]);
if (data.province_id === "-1") {
try {
// params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_MISSIONS_REPORT_VIOLATION_COUNTRY_ACTIVITY}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.province_id === "-1");
const nationalReport = {
edare_name: "کل کشور",
...nationalReportForItem,
};
setData({
data: [
nationalReport,
...result.provinces.map((province) => {
const filteredReports = result.activities.find(
(report) => report.province_id == province.id
);
return {
...filteredReports,
edare_name: province.name_fa,
};
}),
],
filters: data,
});
} catch (e) {}
} else {
try {
params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_MISSIONS_REPORT_VIOLATION_PROVINCE_ACTIVITY}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.city_id === "-1");
const nationalReport = {
...nationalReportForItem,
edare_name: "کل استان",
};
setData({
data: [
nationalReport,
...result.city.map((city) => {
const filteredReports = result.activities.find((report) => report.city_id == city.id);
return {
edare_name: city.name_fa,
...filteredReports,
};
}),
],
filters: data,
});
} catch (e) {}
}
};
useEffect(() => {
if (!userPermissions) return;
onSearchSubmit(defaultValues);
}, [userPermissions]);
const validationSchema = yup.object().shape({
from_date: yup
.string()
.required("تاریخ شروع الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ شروع الزامی است!")
.test("is-valid-date", "تاریخ شروع معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
date_to: yup
.string()
.required("تاریخ پایان الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ پایان الزامی است!")
.test("is-valid-date", "تاریخ پایان معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
province_id: yup.string().nullable(),
});
const { control, handleSubmit } = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "all",
});
return (
<Stack spacing={1}>
<PageTitle title={"کارتابل گزارش ماموریت"} />
<SearchReportList
control={control}
hasProvincesPermission={hasProvincesPermission}
handleSubmit={handleSubmit}
onSearchSubmit={onSearchSubmit}
/>
{!data ? <LinearProgress /> : <ViolationsReportsList specialFilter={specialFilter} data={data} />}
</Stack>
);
};
export default ViolationsReportsPage;

40
src/components/dashboard/roadMissions/transportation/RowActions/Allocation/Form/index.jsx
View File

@@ -14,16 +14,10 @@ import MachinesDialog from "./MachinesDialog";
import Reject from "./Reject";
import SelectBox from "@/core/components/SelectBox";
import { Controller, useForm } from "react-hook-form";
import RouteDetail from "../../RouteDetail";
import ShowRoute from "../../RouteDetail/ShowRoute";
const AllocationForm = ({ row, mutate, setOpenAllocationDialog }) => {
const latLngs = useMemo(() => {
return row.area.coordinates.map(([lng, lat]) => [lat, lng]);
}, [row.area.coordinates]);
const bound = useMemo(
() => (row.area.type === "polygon" ? L.polygon(latLngs) : L.polyline(latLngs)),
[row.area.type, latLngs]
);
const requestServer = useRequest({ notificationSuccess: true });
const [machine, setMachine] = useState();
const [driver, setDriver] = useState();
@@ -180,10 +174,32 @@ const AllocationForm = ({ row, mutate, setOpenAllocationDialog }) => {
)}
</Stack>
</Stack>
<Box sx={{ width: "100%", height: "200px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowBound bound={bound} />
</MapLayer>
<Box
sx={{
width: "100%",
height: "200px",
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
{row.encoded_route ? (
<MapLayer style={{ borderRadius: "4px" }}>
<ShowRoute area={row.encoded_route} />
</MapLayer>
) : (
<Typography
sx={{
color: "#ff4a4c",
fontSize: "16px",
fontWeight: "bold",
textAlign: "center",
letterSpacing: "1px",
}}
>
مختصات برای این ماموریت در دسترس نمیباشد
</Typography>
)}
</Box>
</Stack>
</Box>

46
src/components/dashboard/roadMissions/transportation/RowActions/RouteDetail/ShowRoute.jsx Normal file
View File

@@ -0,0 +1,46 @@
import { useEffect, useRef } from "react";
import { Marker, Polyline, useMap } from "react-leaflet";
import L from "leaflet";
import polyline from "@mapbox/polyline";
import SourceIcon from "@/assets/images/source-icon.svg";
import DestIcon from "@/assets/images/destination-icon.svg";
const ShowRoute = ({ area }) => {
const map = useMap();
const defaultIconSize = [35, 35];
const createCustomIcon = (size, iconUrl) => {
return L.icon({
iconUrl: iconUrl,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
popupAnchor: [0, -size[1]],
});
};
useEffect(() => {
if (coords.length > 0) {
map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
}
}, [area]);
const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
if (!area) return null;
const coords = polyline.decode(area, 6);
if (coords.length === 0) return null;
const sourcePosition = coords[0];
const destPosition = coords[coords.length - 1];
return (
<>
<Polyline positions={coords} color="#015688" weight={7} opacity={1} />
<Marker position={sourcePosition} icon={sourceIcon} />
<Marker position={destPosition} icon={destIcon} />
</>
);
};
export default ShowRoute;

57
src/components/dashboard/roadMissions/transportation/RowActions/RouteDetail/index.jsx Normal file
View File

@@ -0,0 +1,57 @@
import { Box, Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import MapIcon from "@mui/icons-material/Map";
import MapLayer from "@/core/components/MapLayer";
import ShowRoute from "./ShowRoute";
const RouteDetail = ({ encoded_route }) => {
const [openRouteDetailDialog, setOpenRouteDetailDialog] = useState(false);
return (
<>
<Tooltip title="مسیر انتخابی">
<IconButton color="primary" onClick={() => setOpenRouteDetailDialog(true)}>
<MapIcon />
</IconButton>
</Tooltip>
<Dialog
fullWidth
open={openRouteDetailDialog}
onClose={() => setOpenRouteDetailDialog(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
dir="rtl"
maxWidth={"sm"}
>
<DialogTitle sx={{ fontSize: "large" }}>مسیر انتخابی</DialogTitle>
<Box sx={{ mx: 1, borderRadius: "5px" }}>
<Box
sx={{
width: "100%",
height: "300px",
border: "1px solid #e1e1e1",
borderRadius: "5px",
}}
>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowRoute area={encoded_route} />
</MapLayer>
</Box>
</Box>
<DialogActions>
<Button
onClick={() => setOpenRouteDetailDialog(false)}
variant="outlined"
color="secondary"
autoFocus
>
بستن
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default RouteDetail;

6
src/components/dashboard/roadMissions/transportation/TransportationList.jsx
View File

@@ -4,13 +4,13 @@ import { GET_ROAD_MISSIONS_TRANSPORTATION_LIST } from "@/core/utils/routes";
import { Box, Stack } from "@mui/material";
import moment from "jalali-moment";
import { useMemo } from "react";
import ShowArea from "./Actions/showArea";
import RowActions from "./RowActions";
import { missionRegions } from "@/core/utils/missionRegions";
import { missionTypes } from "@/core/utils/missionTypes";
import useProvinces from "@/lib/hooks/useProvince";
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
import useCities from "@/lib/hooks/useCities";
import RouteDetail from "./RowActions/RouteDetail";
const TransportationList = () => {
const columns = useMemo(() => {
@@ -230,9 +230,9 @@ const TransportationList = () => {
},
},
Cell: ({ row }) =>
row.original.area ? (
row.original.encoded_route ? (
<Stack alignItems={"center"} justifyContent={"center"}>
<ShowArea area={row.original.area} />
<RouteDetail encoded_route={row.original.encoded_route} />
</Stack>
) : (
"-"

129
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/DrawBound/index.jsx
View File

@@ -1,129 +0,0 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import L from "leaflet";
import { FeatureGroup, useMap } from "react-leaflet";
import "leaflet-draw";
const DrawBound = ({ control, controlDispach, bound, setBound }) => {
const map = useMap();
const featureRef = useRef(null);
const [area, setArea] = useState();
const drawControlRef = useRef(null);
const safeFlyToBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.flyToBounds(latLngs, {
paddingTopLeft: [20, 35],
paddingBottomRight: [20, 55],
});
} catch (e) {
console.warn("flyToBounds failed:", e);
}
};
const safeFitBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.fitBounds(latLngs, {
paddingTopLeft: [20, 35],
paddingBottomRight: [20, 55],
});
} catch (e) {
console.warn("fitBounds failed:", e);
}
};
const bindEditEvent = (layer) => {
if (!layer) return;
layer.on("edit", function (e) {
const editedLayer = e.target;
setArea(editedLayer);
setBound(editedLayer);
safeFlyToBounds(editedLayer);
});
};
const handlerCreatedBound = useCallback((event) => {
const { layer } = event;
layer.editing.enable();
featureRef.current.addLayer(layer); // 🟢 اول اضافه به نقشه
setArea(layer);
setBound(layer);
safeFlyToBounds(layer);
bindEditEvent(layer);
controlDispach({ type: "SET_STATUS", status: 2 });
}, []);
useEffect(() => {
if (
control.status === 1 &&
drawControlRef.current &&
drawControlRef.current._toolbars?.draw?._modes?.polygon?.handler
) {
drawControlRef.current._toolbars.draw._modes.polygon.handler.enable();
}
}, [control.status]);
useEffect(() => {
if (control.status === 0 && area && featureRef.current) {
featureRef.current.removeLayer(area);
setArea(null);
setBound(null);
}
}, [control.status, area]);
useEffect(() => {
if (control.status === 2 && bound && featureRef.current) {
setArea(bound);
featureRef.current.addLayer(bound);
bound.editing.enable();
safeFitBounds(bound);
bindEditEvent(bound);
}
}, [control.status, bound]);
useEffect(() => {
if (!featureRef.current) return;
L.drawLocal.draw.handlers.polygon.tooltip.start = "برای شروع ترسیم محدوده، روی نقشه کلیک کنید";
L.drawLocal.draw.handlers.polygon.tooltip.cont = "برای ادامه ترسیم، نقاط بعدی را کلیک کنید";
L.drawLocal.draw.handlers.polygon.tooltip.end = "برای بستن محدوده، روی نقطه‌ی شروع کلیک کنید";
const drawControl = new L.Control.Draw({
draw: {
polygon: {
shapeOptions: {
color: "#3388ff",
weight: 3,
clickable: true,
},
},
polyline: false,
rectangle: false,
circle: false,
marker: false,
circlemarker: false,
},
edit: {
featureGroup: featureRef.current,
edit: true,
remove: false,
},
});
drawControlRef.current = drawControl;
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, handlerCreatedBound);
return () => {
map.off(L.Draw.Event.CREATED, handlerCreatedBound);
map.removeControl(drawControl);
};
}, [map, handlerCreatedBound]);
return <FeatureGroup ref={featureRef} />;
};
export default DrawBound;

116
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/index.jsx
View File

@@ -1,116 +0,0 @@
import { Delete, Route } from "@mui/icons-material";
import { Box, Button, Stack, Typography } from "@mui/material";
import { useReducer } from "react";
import DrawBound from "./DrawBound";
const statusType = [
{
id: 0,
message: "برای آغاز ترسیم محدوده، کلیک کنید!",
buttons: [
{
label: "شروع ترسیم محدوده",
key: "start",
color: "primary",
icon: <Route />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 1 });
},
},
],
},
{
id: 1,
message: "محدوده‌ی موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطه‌ی ابتدایی کلیک کنید!",
buttons: [],
},
{
id: 2,
message: "برای اصلاح محدوده، گوشه‌ها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
buttons: [
{
label: "حذف",
key: "end",
color: "error",
icon: <Delete />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 0 });
},
},
],
},
];
const createInitialState = (bound) => {
if (bound) {
return { status: 2 };
}
return { status: 0 };
};
const reducer = (state, action) => {
switch (action.type) {
case "SET_STATUS":
return { ...state, status: action.status };
default:
return state;
}
};
const MapControlPolygon = ({ bound, setBound }) => {
const [control, controlDispach] = useReducer(reducer, bound, createInitialState);
return (
<>
<DrawBound bound={bound} setBound={setBound} control={control} controlDispach={controlDispach} />
<Stack
direction={"row"}
justifyContent={"center"}
sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
>
<Box
sx={{
background: (theme) => theme.palette.info.main,
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
py: 0.5,
px: 2,
}}
>
<Typography align="center" component={"div"} variant="caption" color={"#fff"}>
{statusType.find((st) => st.id == control.status).message}
</Typography>
</Box>
</Stack>
<Box
sx={{
position: "absolute",
left: 0,
bottom: 0,
zIndex: 2000,
width: "100%",
py: 1,
background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
}}
>
<Stack direction={"row"} justifyContent={"center"} spacing={2}>
{statusType
.find((st) => st.id == control.status)
.buttons.map((button) => (
<Button
size="small"
key={button.key}
variant="contained"
onClick={() => button.onclick(controlDispach)}
color={button.color}
startIcon={button.icon}
>
{button.label}
</Button>
))}
</Stack>
</Box>
</>
);
};
export default MapControlPolygon;

129
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/DrawBound/index.jsx
View File

@@ -1,129 +0,0 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import L from "leaflet";
import { FeatureGroup, useMap } from "react-leaflet";
import "leaflet-draw";
const DrawBound = ({ control, controlDispach, bound, setBound }) => {
const map = useMap();
const featureRef = useRef(null);
const [area, setArea] = useState();
const drawControlRef = useRef(null);
const safeFlyToBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.flyToBounds(latLngs, {
paddingTopLeft: [20, 35],
paddingBottomRight: [20, 55],
});
} catch (e) {
console.warn("flyToBounds failed:", e);
}
};
const safeFitBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.fitBounds(latLngs, {
paddingTopLeft: [20, 35],
paddingBottomRight: [20, 55],
});
} catch (e) {
console.warn("fitBounds failed:", e);
}
};
const bindEditEvent = (layer) => {
if (!layer) return;
layer.on("edit", function (e) {
const editedLayer = e.target;
setArea(editedLayer);
setBound(editedLayer);
safeFlyToBounds(editedLayer);
});
};
const handlerCreatedBound = useCallback((event) => {
const { layer } = event;
layer.editing.enable();
featureRef.current.addLayer(layer); // 🟢 اول اضافه به نقشه
setArea(layer);
setBound(layer);
safeFlyToBounds(layer);
bindEditEvent(layer);
controlDispach({ type: "SET_STATUS", status: 2 });
}, []);
useEffect(() => {
if (
control.status === 1 &&
drawControlRef.current &&
drawControlRef.current._toolbars?.draw?._modes?.polyline?.handler
) {
drawControlRef.current._toolbars.draw._modes.polyline.handler.enable();
}
}, [control.status]);
useEffect(() => {
if (control.status === 0 && area && featureRef.current) {
featureRef.current.removeLayer(area);
setArea(null);
setBound(null);
}
}, [control.status, area]);
useEffect(() => {
if (control.status === 2 && bound && featureRef.current) {
setArea(bound);
featureRef.current.addLayer(bound);
bound.editing.enable();
safeFitBounds(bound);
bindEditEvent(bound);
}
}, [control.status, bound]);
useEffect(() => {
if (!featureRef.current) return;
L.drawLocal.draw.handlers.polyline.tooltip.start = "برای شروع ترسیم مسیر، روی نقشه کلیک کنید";
L.drawLocal.draw.handlers.polyline.tooltip.cont = "برای ادامه ترسیم، نقاط بعدی را کلیک کنید";
L.drawLocal.draw.handlers.polyline.tooltip.end = "برای بستن مسیر، روی نقطه پایانی کلیک کنید";
const drawControl = new L.Control.Draw({
draw: {
polyline: {
shapeOptions: {
color: "#3388ff",
weight: 3,
clickable: true,
},
},
polygon: false,
rectangle: false,
circle: false,
marker: false,
circlemarker: false,
},
edit: {
featureGroup: featureRef.current,
edit: true,
remove: false,
},
});
drawControlRef.current = drawControl;
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, handlerCreatedBound);
return () => {
map.off(L.Draw.Event.CREATED, handlerCreatedBound);
map.removeControl(drawControl);
};
}, [map, handlerCreatedBound]);
return <FeatureGroup ref={featureRef} />;
};
export default DrawBound;

116
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/index.jsx
View File

@@ -1,116 +0,0 @@
import { Delete, Route } from "@mui/icons-material";
import { Box, Button, Stack, Typography } from "@mui/material";
import { useReducer } from "react";
import DrawBound from "./DrawBound";
const statusType = [
{
id: 0,
message: "برای آغاز ترسیم مسیر، کلیک کنید!",
buttons: [
{
label: "شروع ترسیم مسیر",
key: "start",
color: "primary",
icon: <Route />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 1 });
},
},
],
},
{
id: 1,
message: "مسیر موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطه‌ی پایانی کلیک کنید!",
buttons: [],
},
{
id: 2,
message: "برای اصلاح مسیر، گوشه‌ها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
buttons: [
{
label: "حذف",
key: "end",
color: "error",
icon: <Delete />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 0 });
},
},
],
},
];
const createInitialState = (bound) => {
if (bound) {
return { status: 2 };
}
return { status: 0 };
};
const reducer = (state, action) => {
switch (action.type) {
case "SET_STATUS":
return { ...state, status: action.status };
default:
return state;
}
};
const MapControlPolyline = ({ bound, setBound }) => {
const [control, controlDispach] = useReducer(reducer, bound, createInitialState);
return (
<>
<DrawBound bound={bound} setBound={setBound} control={control} controlDispach={controlDispach} />
<Stack
direction={"row"}
justifyContent={"center"}
sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
>
<Box
sx={{
background: (theme) => theme.palette.info.main,
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
py: 0.5,
px: 2,
}}
>
<Typography align="center" component={"div"} variant="caption" color={"#fff"}>
{statusType.find((st) => st.id == control.status).message}
</Typography>
</Box>
</Stack>
<Box
sx={{
position: "absolute",
left: 0,
bottom: 0,
zIndex: 2000,
width: "100%",
py: 1,
background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
}}
>
<Stack direction={"row"} justifyContent={"center"} spacing={2}>
{statusType
.find((st) => st.id == control.status)
.buttons.map((button) => (
<Button
size="small"
key={button.key}
variant="contained"
onClick={() => button.onclick(controlDispach)}
color={button.color}
startIcon={button.icon}
>
{button.label}
</Button>
))}
</Stack>
</Box>
</>
);
};
export default MapControlPolyline;

28
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/AlarmText.jsx Normal file
View File

@@ -0,0 +1,28 @@
import { Box, Typography } from "@mui/material";
const AlarmText = ({ isSource }) => {
if (isSource) return null;
return (
<Box
sx={{
position: "absolute",
top: 5,
left: 5,
zIndex: 1000,
border: "1px solid #ed0f02",
backgroundColor: "#f19898",
py: 0.5,
px: 1,
borderRadius: 2,
opacity: 0.8,
boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
}}
>
<Typography variant="caption" sx={{ fontWeight: "bold" }} color="#ed0f02">
با کلیک بر روی مارکر موقعیت را انتخاب کنید
</Typography>
</Box>
);
};
export default AlarmText;

53
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/DataBox.jsx Normal file
View File

@@ -0,0 +1,53 @@
import { Box, Button, TextField } from "@mui/material";
const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget, onEditSource, onEditDest }) => {
if (!isSource) return null;
return (
<Box
sx={{
position: "absolute",
bottom: 5,
left: 5,
zIndex: 1000,
backgroundColor: "white",
border: "1px solid #e1e1e1",
padding: 1,
borderRadius: 2,
opacity: 0.8,
gap: 1,
display: "flex",
flexDirection: "column",
}}
>
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
<TextField
variant="outlined"
size="small"
readOnly
value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
/>
{isSource && isDest && (
<Button variant="contained" color="success" size="small" onClick={onEditSource}>
ویرایش مبدا
</Button>
)}
</div>
{isDest && (
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
<TextField
size="small"
variant="outlined"
readOnly
value={destPosition ? `${destPosition.lat.toFixed(6)}, ${destPosition.lng.toFixed(6)}` : ""}
/>
<Button variant="contained" color="error" size="small" onClick={onEditDest}>
ویرایش مقصد
</Button>
</div>
)}
</Box>
);
};
export default DataBox;

46
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/ShowRoute.jsx Normal file
View File

@@ -0,0 +1,46 @@
import { useEffect, useRef } from "react";
import { Marker, Polyline, useMap } from "react-leaflet";
import L from "leaflet";
import polyline from "@mapbox/polyline";
import SourceIcon from "@/assets/images/source-icon.svg";
import DestIcon from "@/assets/images/destination-icon.svg";
const ShowRoute = ({ area }) => {
const map = useMap();
const defaultIconSize = [35, 35];
const createCustomIcon = (size, iconUrl) => {
return L.icon({
iconUrl: iconUrl,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
popupAnchor: [0, -size[1]],
});
};
const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
useEffect(() => {
if (coords.length > 0) {
map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
}
}, [area]);
if (!area) return null;
const coords = polyline.decode(area, 6);
if (coords.length === 0) return null;
const sourcePosition = coords[0];
const destPosition = coords[coords.length - 1];
return (
<>
<Polyline positions={coords} color="#015688" weight={7} opacity={1} />
<Marker position={sourcePosition} icon={sourceIcon} />
<Marker position={destPosition} icon={destIcon} />
</>
);
};
export default ShowRoute;

219
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/index.jsx Normal file
View File

@@ -0,0 +1,219 @@
import { Marker, Polyline, useMapEvents } from "react-leaflet";
import L from "leaflet";
import polyline from "@mapbox/polyline";
import SourceIcon from "@/assets/images/source-icon.svg";
import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
import DestIcon from "@/assets/images/destination-icon.svg";
import { useEffect, useRef, useState } from "react";
import DataBox from "./DataBox";
import AlarmText from "./AlarmText";
const Routing = ({ setArea, setLocations, locations, area }) => {
const mapPrevSourceMarker = useRef();
const mapPrevDestMarker = useRef();
const mapRef = useRef(null);
const defaultIconSize = [35, 35];
const [isSource, setIsSource] = useState(false);
const [sourcePosition, setSourcePosition] = useState(null);
const [isDest, setIsDest] = useState(false);
const [destPosition, setDestPosition] = useState(null);
const [routeCoords, setRouteCoords] = useState([]);
const [alternateCoords, setAlternateCoords] = useState([]);
const [editingTarget, setEditingTarget] = useState(null);
const [selectedRoute, setSelectedRoute] = useState(null);
const createCustomIcon = (size, iconUrl) => {
return L.icon({
iconUrl: iconUrl,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
popupAnchor: [0, -size[1]],
});
};
const defaultIcon = createCustomIcon(
defaultIconSize,
isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
);
const prevDestIcon = createCustomIcon(
defaultIconSize,
isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
);
const isMovingSource = !isSource || editingTarget === "source";
const isMovingDest = isSource && (!isDest || editingTarget === "dest");
const map = useMapEvents({
move(e) {
if (isMovingSource) mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
if (isMovingDest && mapPrevDestMarker.current) mapPrevDestMarker.current.setLatLng(e.target.getCenter());
},
movestart() {
if (isMovingSource) mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
if (isMovingDest && mapPrevDestMarker.current)
mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
},
moveend() {
if (isMovingSource)
mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
if (isMovingDest && mapPrevDestMarker.current)
mapPrevDestMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevDestIcon.src));
},
});
useEffect(() => {
mapRef.current = map;
}, [map]);
useEffect(() => {
if (locations.length < 2) return;
const restoredSource = { lat: locations[0].lat, lng: locations[0].lon };
const restoredDest = { lat: locations[1].lat, lng: locations[1].lon };
setSourcePosition(restoredSource);
setDestPosition(restoredDest);
setIsSource(true);
setIsDest(true);
if (area) {
const decoded = polyline.decode(area, 6);
setRouteCoords(decoded);
setSelectedRoute({ index: "main", coords: decoded });
setTimeout(() => {
mapRef.current?.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
}, 100);
} else {
fetchRoute(restoredSource, restoredDest);
}
}, []);
const fetchRoute = async (source, dest) => {
const locs = [
{ lat: source.lat, lon: source.lng },
{ lat: dest.lat, lon: dest.lng },
];
try {
const response = await fetch("https://jouya.141.ir/api/router/drive", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ locations: locs }),
});
const data = await response.json();
const shape = data.trip.legs[0].shape;
setLocations(locs);
setArea(shape);
const decoded = polyline.decode(shape, 6);
setRouteCoords(decoded);
setSelectedRoute({ index: "main", coords: decoded });
if (data.alternates?.length > 0) {
const decodedAlternates = data.alternates.map((alt) => polyline.decode(alt.trip.legs[0].shape, 6));
setAlternateCoords(decodedAlternates);
} else {
setAlternateCoords([]);
}
map.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
} catch (error) {
console.error("Routing error:", error);
}
};
const handleMarkerClick = async () => {
if (!isSource || editingTarget === "source") {
const clickedPosition = mapPrevSourceMarker.current.getLatLng();
setSourcePosition(clickedPosition);
setIsSource(true);
setEditingTarget(null);
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
if (editingTarget === "source" && destPosition) {
await fetchRoute(clickedPosition, destPosition);
}
}
};
const handleDestMarkerClick = async () => {
if (!isDest || editingTarget === "dest") {
const clickedPosition = mapPrevDestMarker.current.getLatLng();
setDestPosition(clickedPosition);
setIsDest(true);
setEditingTarget(null);
await fetchRoute(sourcePosition, clickedPosition);
}
};
const handleEditSource = () => {
setEditingTarget("source");
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
};
const handleEditDest = () => {
setEditingTarget("dest");
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
};
const handleSelectRoute = (index, coords) => {
setSelectedRoute({ index, coords });
const encoded = polyline.encode(coords, 6);
setArea(encoded);
map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
};
return (
<>
<DataBox
isSource={isSource}
isDest={isDest}
sourcePosition={sourcePosition}
destPosition={destPosition}
editingTarget={editingTarget}
onEditSource={handleEditSource}
onEditDest={handleEditDest}
/>
<AlarmText isSource={isSource} />
<Marker
position={sourcePosition || map.getCenter()}
ref={mapPrevSourceMarker}
eventHandlers={{ click: handleMarkerClick }}
icon={defaultIcon}
/>
{isSource && (
<Marker
position={destPosition || map.getCenter()}
ref={mapPrevDestMarker}
eventHandlers={{ click: handleDestMarkerClick }}
icon={prevDestIcon}
/>
)}
{alternateCoords.map((coords, index) => (
<Polyline
key={`alternate-${index}-${selectedRoute?.index === index}`}
positions={coords}
color={selectedRoute?.index === index ? "#015688" : "#91B2C6"}
weight={selectedRoute?.index === index ? 7 : 6}
opacity={selectedRoute?.index === index ? 1 : 0.7}
eventHandlers={{ click: () => handleSelectRoute(index, coords) }}
/>
))}
{routeCoords.length > 0 && (
<Polyline
key={`main-${selectedRoute?.index === "main"}`}
positions={routeCoords}
color={selectedRoute?.index === "main" ? "#015688" : "#91B2C6"}
weight={selectedRoute?.index === "main" ? 7 : 6}
opacity={selectedRoute?.index === "main" ? 1 : 0.7}
eventHandlers={{ click: () => handleSelectRoute("main", routeCoords) }}
/>
)}
</>
);
};
export default Routing;

25
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/SelectBoundType/index.jsx
View File

@@ -1,25 +0,0 @@
import SelectBox from "@/core/components/SelectBox";
export const boundTypes = [
{ id: "polygon", name_fa: "محدوده" },
{ id: "polyline", name_fa: "مسیر" },
];
const SelectBoundType = ({ boundType, setBoundType, setBound, setAllData }) => {
return (
<>
<SelectBox
value={boundType}
label="نوع منطقه عملیاتی"
selectors={boundTypes}
schema={{ name: "name_fa", value: "id" }}
onChange={(newValue) => {
setBound(null);
setBoundType(newValue);
setAllData({ bound_type: newValue });
}}
/>
</>
);
};
export default SelectBoundType;

29
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/index.jsx
View File

@@ -2,40 +2,29 @@ import MapLoading from "@/core/components/MapLayer/Loading";
import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
import dynamic from "next/dynamic";
import { useCallback, useState } from "react";
import MapControlPolygon from "./MapControlPolygon";
import MapControlPolyline from "./MapControlPolyline";
import SelectBoundType from "./SelectBoundType";
import Routing from "./Routing";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
});
const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
const [bound, setBound] = useState(allData.bound);
const [boundType, setBoundType] = useState(allData.bound_type);
const [area, setArea] = useState(allData.area);
const [locations, setLocations] = useState(allData.locations);
const handleNext = useCallback(() => {
setAllData({ bound: bound });
setAllData({ area: area });
setAllData({ locations: locations });
setTabState((s) => s + 1);
}, [bound]);
}, [area]);
return (
<>
<DialogContent dividers>
<Stack spacing={2}>
<SelectBoundType
boundType={boundType}
setBoundType={setBoundType}
setBound={setBound}
setAllData={setAllData}
/>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
{boundType == "polygon" ? (
<MapControlPolygon bound={bound} setBound={setBound} boundType={boundType} />
) : (
<MapControlPolyline bound={bound} setBound={setBound} boundType={boundType} />
)}
<Routing area={area} setArea={setArea} locations={locations} setLocations={setLocations} />
</MapLayer>
</Box>
</Stack>
@@ -44,8 +33,8 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
<Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
{"مرحله قبلی"}
</Button>
<Button variant="contained" size="large" disabled={!bound} onClick={handleNext}>
{!bound ? "در انتظار ترسیم" : "مرحله بعد"}
<Button variant="contained" size="large" disabled={!area} onClick={handleNext}>
{!area ? "در انتظار ترسیم" : "مرحله بعد"}
</Button>
</DialogActions>
</>

12
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Verify/index.jsx
View File

@@ -5,7 +5,7 @@ import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typogr
import moment from "jalali-moment";
import dynamic from "next/dynamic";
import { useCallback } from "react";
import ShowBound from "../../../showBound";
import ShowRoute from "../Area/Routing/ShowRoute";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
@@ -22,6 +22,16 @@ const Verify = ({ allData, handlePrev, submitForm, submitting }) => {
<Box sx={{ flex: 1 }}>
<Stack spacing={2}>
<Stack spacing={1}>
<Stack spacing={1}>
<Divider>
<Chip color="primary" variant="outlined" label="مسیر ماموریت" />
</Divider>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowRoute area={allData.area} />
</MapLayer>
</Box>
</Stack>
<Divider>
<Chip color="primary" variant="outlined" label="مشخصات ماموریت" />
</Divider>

20
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/index.jsx
View File

@@ -1,4 +1,4 @@
import { AccessTime, Engineering, InsertDriveFile, Person, Verified } from "@mui/icons-material";
import { AccessTime, Engineering, InsertDriveFile, Person, Verified, Map } from "@mui/icons-material";
import { Box, Tab, Tabs } from "@mui/material";
import { useReducer, useState } from "react";
import GetDateTime from "./GetDateTime";
@@ -6,6 +6,7 @@ import GetItemInfo from "./GetItemInfo";
import MachineAndDriver from "./MachineAndDriver";
import Rahdaran from "./Rahdaran";
import Verify from "./Verify";
import Area from "./Area";
function TabPanel(props) {
const { children, value, index } = props;
@@ -61,8 +62,9 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
<Tab icon={<InsertDriveFile />} label="مشخصات" />
<Tab disabled={tabState < 1} icon={<AccessTime />} label="زمانبندی" />
<Tab disabled={tabState < 2} icon={<Person />} label="راننده" />
<Tab disabled={tabState < 3} icon={<Engineering />} label="همراهان" />
<Tab disabled={tabState < 4} icon={<Verified />} label="بررسی نهایی" />
<Tab disabled={tabState < 3} icon={<Map />} label="مختصات" />
<Tab disabled={tabState < 4} icon={<Engineering />} label="همراهان" />
<Tab disabled={tabState < 5} icon={<Verified />} label="بررسی نهایی" />
</Tabs>
<TabPanel value={tabState} index={0}>
<GetItemInfo
@@ -95,7 +97,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
/>
</TabPanel>
<TabPanel value={tabState} index={3}>
<Rahdaran
<Area
allData={allData}
setAllData={(data) => {
dispatch({ type: "changeData", data });
@@ -105,6 +107,16 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
/>
</TabPanel>
<TabPanel value={tabState} index={4}>
<Rahdaran
allData={allData}
setAllData={(data) => {
dispatch({ type: "changeData", data });
}}
handlePrev={handlePrev}
setTabState={setTabState}
/>
</TabPanel>
<TabPanel value={tabState} index={5}>
<Verify allData={allData} handlePrev={handlePrev} submitForm={submitForm} submitting={submitting} />
</TabPanel>
</>

5
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/index.jsx
View File

@@ -28,6 +28,7 @@ const CreateWithoutProcess = ({ row, mutate }) => {
start_date: `${result.start_date} ${moment(result.start_time).format("HH:mm")}`,
end_date: `${result.end_date} ${moment(result.end_time).format("HH:mm")}`,
driver: result.driver.id,
encoded_route: result.area,
},
hasSidebarUpdate: true,
})
@@ -49,7 +50,7 @@ const CreateWithoutProcess = ({ row, mutate }) => {
</IconButton>
</Tooltip>
<Dialog open={open} fullWidth maxWidth="sm">
<Dialog open={open} fullWidth maxWidth="md">
<IconButton
aria-label="close"
onClick={() => setOpen(false)}
@@ -77,6 +78,8 @@ const CreateWithoutProcess = ({ row, mutate }) => {
end_point: "",
region: "",
driver: null,
area: null,
locations: [],
}}
submitForm={submitForm}
submitting={submitting}

4
src/components/dashboard/roadPatrols/reports/index.jsx
View File

@@ -5,7 +5,7 @@ import SearchReportList from "./Search";
import { useEffect, useState } from "react";
import ReportLists from "./ReportLists";
import useRequest from "@/lib/hooks/useRequest";
import { GET_CITY_ACTIVITY_REPORT, GET_PROVINCE_ACTIVITY_REPORT } from "@/core/utils/routes";
import { GET_COUNTRY_ACTIVITY_REPORT, GET_PROVINCE_ACTIVITY_REPORT } from "@/core/utils/routes";
import moment from "jalali-moment";
import * as yup from "yup";
import { useForm } from "react-hook-form";
@@ -70,7 +70,7 @@ const ReportPage = () => {
} else {
try {
params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_CITY_ACTIVITY_REPORT}?${params}`);
const response = await requestServer(`${GET_COUNTRY_ACTIVITY_REPORT}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.edare_id === "-1");
const nationalReport = {