diff --git a/example.env.local b/example.env.local index c6b8c67..ff1832b 100644 --- a/example.env.local +++ b/example.env.local @@ -16,6 +16,6 @@ NEXT_PUBLIC_SECONDARY_DARK = "#ad3a07" NEXT_PUBLIC_API_URL = "http://Your IP:3000" -NEXT_PUBLIC_BASE_URL = "deploy api" +NEXT_PUBLIC_BASE_URL = "https://loan.witel.ir" NODE_ENV = "development" \ No newline at end of file diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 9da4be5..9bca403 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -111,7 +111,7 @@ "notifications": { "code": "کد", "error": "خطا", - "warning": "خطر", + "warning": "خطا", "success": "موفق", "error_static_text": "عملیات شما با خطا مواجه شد", "warning_static_text": "خطا سرور", diff --git a/src/components/dashboard/change-password/index.jsx b/src/components/dashboard/change-password/index.jsx index 477ec00..fac3c15 100644 --- a/src/components/dashboard/change-password/index.jsx +++ b/src/components/dashboard/change-password/index.jsx @@ -20,13 +20,7 @@ const DashboardChangePasswordComponent = () => { const {directionApp} = useDirection(); const handleSubmit = (values, {setSubmitting, resetForm}) => { - toast.dismiss(); - const pendingToast = toast(t("notifications.pending"), { - position: directionApp === "ltr" ? "top-left" : "top-right", - autoClose: false, - closeOnClick: false, - draggable: false, - }); + Notifications(directionApp, t); axios .post( CHANGE_PASSWORD, @@ -41,12 +35,12 @@ const DashboardChangePasswordComponent = () => { ) .then((response) => { toast.dismiss(pendingToast); // Dismiss the pending toast notification - Notifications(directionApp, response, t); + Notifications(directionApp, t, response); resetForm(); }) .catch((error) => { toast.dismiss(pendingToast); // Dismiss the pending toast notification - Notifications(directionApp, error.response, t); + Notifications(directionApp, t, error.response); }) .finally(() => { setSubmitting(false); // Set `setSubmitting` to false after the API request completes diff --git a/src/components/dashboard/edit-profile/index.jsx b/src/components/dashboard/edit-profile/index.jsx index 9391754..5884639 100644 --- a/src/components/dashboard/edit-profile/index.jsx +++ b/src/components/dashboard/edit-profile/index.jsx @@ -20,6 +20,7 @@ const DashboardEditProfile = () => { const {directionApp} = useDirection(); const editAvatar = async (avatar) => { + Notifications(directionApp, t); try { const formData = new FormData(); @@ -36,7 +37,7 @@ const DashboardEditProfile = () => { }, }); } catch (error) { - Notifications(directionApp, error.response, t); + Notifications(directionApp, t, error.response); throw error; } }; @@ -54,13 +55,13 @@ const DashboardEditProfile = () => { // }); // }) // .then((response) => { - // Notifications(directionApp, response, t); + // Notifications(directionApp, t, response); // getUser((data) => { // changeUser(data); // }); // }) // .catch((error) => { - // Notifications(directionApp, error.response, t); + // Notifications(directionApp, t, error.response); // }) // .finally(() => { // setSubmitting(false); @@ -74,13 +75,13 @@ const DashboardEditProfile = () => { // }, // }) // .then((response) => { - // Notifications(directionApp, response, t); + // Notifications(directionApp, t, response); // getUser((data) => { // changeUser(data); // }); // }) // .catch((error) => { - // Notifications(directionApp, error.response, t); + // Notifications(directionApp, t, error.response); // }) // .finally(() => { // setSubmitting(false); diff --git a/src/components/dashboard/machinary-office/TableRowActions.jsx b/src/components/dashboard/machinary-office/TableRowActions.jsx index 13c6e7b..303fd0c 100644 --- a/src/components/dashboard/machinary-office/TableRowActions.jsx +++ b/src/components/dashboard/machinary-office/TableRowActions.jsx @@ -1,58 +1,92 @@ import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; import ThumbDownIcon from "@mui/icons-material/ThumbDown"; import {Box, IconButton, Tooltip} from "@mui/material"; -import {useContext} from "react"; import ConfirmForm from "./Form/ConfirmForm"; import RejectForm from "./Form/RejectForm"; import {useTranslations} from "next-intl"; -import {DataTableContext} from "@/lib/app/contexts/DatatableContext"; +import {useCallback, useState} from "react"; +import axios from "axios"; +import Notifications from "@/core/components/notifications"; +import useUser from "@/lib/app/hooks/useUser"; +import useDirection from "@/lib/app/hooks/useDirection"; -const TableRowActions = ({row}) => { +const TableRowActions = ({row, mutate, fetchUrl}) => { const t = useTranslations(); - const { - openConfirmDialog, - openRejectDialog, - handleOpenConfirmDialog, - handleOpenRejectDialog, - handleCloseConfirmDialog, - handleCloseRejectDialog, - rowId, - confirmData, - rejectData, - } = useContext(DataTableContext); + const {token} = useUser(); + const {directionApp} = useDirection(); + + // Confirm + const [openConfirmDialog, setOpenConfirmDialog] = useState(false); + const handleCloseConfirmDialog = () => { + setOpenConfirmDialog(false); + }; + const confirmData = useCallback((url, rowID, values) => { + Notifications(directionApp, t, undefined) + axios + .post(`${url}/${rowID}`, values, { + headers: {authorization: `Bearer ${token}`}, + }) + .then((response) => { + Notifications(directionApp, t, response); + mutate(fetchUrl) + }) + .catch((error) => { + Notifications(directionApp, t, error.response); + }); + }, []); + // End Confirm + + // Reject + const [openRejectDialog, setOpenRejectDialog] = useState(false); + const handleCloseRejectDialog = () => { + setOpenRejectDialog(false); + }; + + const rejectData = useCallback((url, rowID, values) => { + Notifications(directionApp, t) + axios + .post(`${url}/${rowID}`, values, { + headers: {authorization: `Bearer ${token}`}, + }) + .then((response) => { + Notifications(directionApp, t, response); + mutate(fetchUrl) + }) + .catch((error) => { + Notifications(directionApp, t, error.response); + }); + }, []); + // End Reject + return ( { - handleOpenConfirmDialog(row); + setOpenConfirmDialog(true) }} > - {openConfirmDialog && ( - - )} + - handleOpenRejectDialog(row)}> + setOpenRejectDialog(true)}> - {openRejectDialog && ( - - )} + ); }; diff --git a/src/components/dashboard/machinary-office/index.jsx b/src/components/dashboard/machinary-office/index.jsx index 63061ce..908c412 100644 --- a/src/components/dashboard/machinary-office/index.jsx +++ b/src/components/dashboard/machinary-office/index.jsx @@ -1,9 +1,7 @@ -import DataTableStructure from "@/core/components/DatatableStructure"; import DashboardLayouts from "@/layouts/dashboardLayouts"; import {Box, IconButton, Typography} from "@mui/material"; import ClearIcon from "@mui/icons-material/Clear"; import {useMemo} from "react"; -// import TableToolbar from "./TableTollbar"; import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; @@ -11,6 +9,7 @@ import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; import {faIR} from "@mui/x-date-pickers/locales"; +import DataTable from "@/core/components/DataTable"; function DashboardMachinaryOfficeComponent() { const t = useTranslations(); @@ -23,7 +22,6 @@ function DashboardMachinaryOfficeComponent() { enableColumnFilter: true, datatype: "numeric", filterFn: "equals", - maxSize: 100, columnFilterModeOptions: [ "equals", "notEquals", @@ -94,7 +92,6 @@ function DashboardMachinaryOfficeComponent() { enableColumnFilter: true, datatype: "date", filterFn: "lessThan", - minSize: 200, columnFilterModeOptions: ["lessThan", "greaterThan"], Cell: ({renderedCellValue}) => { return {renderedCellValue}; @@ -170,7 +167,6 @@ function DashboardMachinaryOfficeComponent() { enableColumnFilter: true, datatype: "numeric", filterFn: "equals", - maxSize: 100, columnFilterModeOptions: [ "equals", "notEquals", @@ -201,7 +197,6 @@ function DashboardMachinaryOfficeComponent() { header: t("MachinaryOffice.state_name"), enableColumnFilter: false, datatype: "numeric", - minSize: 300, // filterFn: "equals", // filterSelectOptions: [ // ], @@ -216,22 +211,22 @@ function DashboardMachinaryOfficeComponent() { return ( - } enableLastUpdate={true} enablePinning={true} - enableDensityToggle={true} + enableDensityToggle={false} + initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large) enableColumnFilters={true} enableHiding={true} enableFullScreenToggle={false} enableGlobalFilter={false} enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions enableRowActions={true} - renderRowActions={({row}) => } + TableRowAction={TableRowActions} /> diff --git a/src/components/dashboard/passenger-boss/TableRowActions.jsx b/src/components/dashboard/passenger-boss/TableRowActions.jsx index 13c6e7b..4071b91 100644 --- a/src/components/dashboard/passenger-boss/TableRowActions.jsx +++ b/src/components/dashboard/passenger-boss/TableRowActions.jsx @@ -1,58 +1,92 @@ import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; import ThumbDownIcon from "@mui/icons-material/ThumbDown"; import {Box, IconButton, Tooltip} from "@mui/material"; -import {useContext} from "react"; +import {useCallback, useState} from "react"; import ConfirmForm from "./Form/ConfirmForm"; import RejectForm from "./Form/RejectForm"; import {useTranslations} from "next-intl"; -import {DataTableContext} from "@/lib/app/contexts/DatatableContext"; +import Notifications from "@/core/components/notifications"; +import useUser from "@/lib/app/hooks/useUser"; +import useDirection from "@/lib/app/hooks/useDirection"; +import axios from "axios"; -const TableRowActions = ({row}) => { +const TableRowActions = ({row, mutate, fetchUrl}) => { const t = useTranslations(); - const { - openConfirmDialog, - openRejectDialog, - handleOpenConfirmDialog, - handleOpenRejectDialog, - handleCloseConfirmDialog, - handleCloseRejectDialog, - rowId, - confirmData, - rejectData, - } = useContext(DataTableContext); + const {token} = useUser(); + const {directionApp} = useDirection(); + + // Confirm + const [openConfirmDialog, setOpenConfirmDialog] = useState(false); + const handleCloseConfirmDialog = () => { + setOpenConfirmDialog(false); + }; + const confirmData = useCallback((url, rowID, values) => { + Notifications(directionApp, t, undefined) + axios + .post(`${url}/${rowID}`, values, { + headers: {authorization: `Bearer ${token}`}, + }) + .then((response) => { + Notifications(directionApp, t, response); + mutate(fetchUrl) + }) + .catch((error) => { + Notifications(directionApp, t, error.response); + }); + }, []); + // End Confirm + + // Reject + const [openRejectDialog, setOpenRejectDialog] = useState(false); + const handleCloseRejectDialog = () => { + setOpenRejectDialog(false); + }; + + const rejectData = useCallback((url, rowID, values) => { + Notifications(directionApp, t) + axios + .post(`${url}/${rowID}`, values, { + headers: {authorization: `Bearer ${token}`}, + }) + .then((response) => { + Notifications(directionApp, t, response); + mutate(fetchUrl) + }) + .catch((error) => { + Notifications(directionApp, t, error.response); + }); + }, []); + // End Reject + return ( { - handleOpenConfirmDialog(row); + setOpenConfirmDialog(true) }} > - {openConfirmDialog && ( - - )} + - handleOpenRejectDialog(row)}> + setOpenRejectDialog(true)}> - {openRejectDialog && ( - - )} + ); }; diff --git a/src/components/dashboard/passenger-boss/index.jsx b/src/components/dashboard/passenger-boss/index.jsx index 72f567e..b78a7c5 100644 --- a/src/components/dashboard/passenger-boss/index.jsx +++ b/src/components/dashboard/passenger-boss/index.jsx @@ -1,16 +1,15 @@ -import DataTableStructure from "@/core/components/DatatableStructure"; import DashboardLayouts from "@/layouts/dashboardLayouts"; import {Box, IconButton, Typography} from "@mui/material"; import ClearIcon from "@mui/icons-material/Clear"; import {useMemo} from "react"; -// import TableToolbar from "./TableTollbar"; -import {GET_PASSENGER_BOSS} from "@/core/data/apiRoutes"; +import {GET_PASSENGER_BOSS, GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; import {faIR} from "@mui/x-date-pickers/locales"; +import DataTable from "@/core/components/DataTable"; function DashboardPassengerOfficeComponent() { const t = useTranslations(); @@ -24,7 +23,6 @@ function DashboardPassengerOfficeComponent() { enableColumnFilter: true, datatype: "numeric", filterFn: "equals", - maxSize: 100, columnFilterModeOptions: [ "equals", "notEquals", @@ -95,7 +93,6 @@ function DashboardPassengerOfficeComponent() { enableColumnFilter: true, datatype: "date", filterFn: "lessThan", - minSize: 200, columnFilterModeOptions: ["lessThan", "greaterThan"], Cell: ({renderedCellValue}) => { return {renderedCellValue}; @@ -171,7 +168,6 @@ function DashboardPassengerOfficeComponent() { enableColumnFilter: true, datatype: "numeric", filterFn: "equals", - maxSize: 100, columnFilterModeOptions: [ "equals", "notEquals", @@ -202,7 +198,6 @@ function DashboardPassengerOfficeComponent() { header: t("PassengerBoss.state_name"), enableColumnFilter: false, datatype: "numeric", - minSize: 300, // filterFn: "equals", // filterSelectOptions: [ // ], @@ -217,7 +212,7 @@ function DashboardPassengerOfficeComponent() { return ( - } enableLastUpdate={true} enablePinning={true} - enableDensityToggle={true} + enableDensityToggle={false} + initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large) enableColumnFilters={true} enableHiding={true} enableFullScreenToggle={false} enableGlobalFilter={false} enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions enableRowActions={true} - renderRowActions={({row}) => } + TableRowAction={TableRowActions} /> diff --git a/src/components/dashboard/passenger-office/TableRowActions.jsx b/src/components/dashboard/passenger-office/TableRowActions.jsx index 13c6e7b..fea0ad3 100644 --- a/src/components/dashboard/passenger-office/TableRowActions.jsx +++ b/src/components/dashboard/passenger-office/TableRowActions.jsx @@ -1,58 +1,92 @@ import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; import ThumbDownIcon from "@mui/icons-material/ThumbDown"; import {Box, IconButton, Tooltip} from "@mui/material"; -import {useContext} from "react"; +import {useCallback, useState} from "react"; import ConfirmForm from "./Form/ConfirmForm"; import RejectForm from "./Form/RejectForm"; import {useTranslations} from "next-intl"; -import {DataTableContext} from "@/lib/app/contexts/DatatableContext"; +import axios from "axios"; +import Notifications from "@/core/components/notifications"; +import useUser from "@/lib/app/hooks/useUser"; +import useDirection from "@/lib/app/hooks/useDirection"; -const TableRowActions = ({row}) => { +const TableRowActions = ({row, mutate, fetchUrl}) => { const t = useTranslations(); - const { - openConfirmDialog, - openRejectDialog, - handleOpenConfirmDialog, - handleOpenRejectDialog, - handleCloseConfirmDialog, - handleCloseRejectDialog, - rowId, - confirmData, - rejectData, - } = useContext(DataTableContext); + const {token} = useUser(); + const {directionApp} = useDirection(); + + // Confirm + const [openConfirmDialog, setOpenConfirmDialog] = useState(false); + const handleCloseConfirmDialog = () => { + setOpenConfirmDialog(false); + }; + const confirmData = useCallback((url, rowID, values) => { + Notifications(directionApp, t, undefined) + axios + .post(`${url}/${rowID}`, values, { + headers: {authorization: `Bearer ${token}`}, + }) + .then((response) => { + Notifications(directionApp, t, response); + mutate(fetchUrl) + }) + .catch((error) => { + Notifications(directionApp, t, error.response); + }); + }, []); + // End Confirm + + // Reject + const [openRejectDialog, setOpenRejectDialog] = useState(false); + const handleCloseRejectDialog = () => { + setOpenRejectDialog(false); + }; + + const rejectData = useCallback((url, rowID, values) => { + Notifications(directionApp, t) + axios + .post(`${url}/${rowID}`, values, { + headers: {authorization: `Bearer ${token}`}, + }) + .then((response) => { + Notifications(directionApp, t, response); + mutate(fetchUrl) + }) + .catch((error) => { + Notifications(directionApp, t, error.response); + }); + }, []); + // End Reject + return ( { - handleOpenConfirmDialog(row); + setOpenConfirmDialog(true) }} > - {openConfirmDialog && ( - - )} + - handleOpenRejectDialog(row)}> + setOpenRejectDialog(true)}> - {openRejectDialog && ( - - )} + ); }; diff --git a/src/components/dashboard/passenger-office/index.jsx b/src/components/dashboard/passenger-office/index.jsx index 5f8ddc5..051f04b 100644 --- a/src/components/dashboard/passenger-office/index.jsx +++ b/src/components/dashboard/passenger-office/index.jsx @@ -1,16 +1,15 @@ -import DataTableStructure from "@/core/components/DatatableStructure"; import DashboardLayouts from "@/layouts/dashboardLayouts"; import {Box, IconButton, Typography} from "@mui/material"; import ClearIcon from "@mui/icons-material/Clear"; import {useMemo} from "react"; import {faIR} from "@mui/x-date-pickers/locales"; -// import TableToolbar from "./TableTollbar"; import {GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; +import DataTable from "@/core/components/DataTable"; function DashboardPassengerOfficeComponent() { const t = useTranslations(); @@ -23,7 +22,6 @@ function DashboardPassengerOfficeComponent() { header: t("PassengerOffice.id"), enableColumnFilter: true, datatype: "numeric", - maxSize: 100, filterFn: "equals", columnFilterModeOptions: [ "equals", @@ -95,7 +93,6 @@ function DashboardPassengerOfficeComponent() { enableColumnFilter: true, datatype: "date", filterFn: "lessThan", - minSize: 200, columnFilterModeOptions: ["lessThan", "greaterThan"], Cell: ({renderedCellValue}) => { return {renderedCellValue}; @@ -127,7 +124,7 @@ function DashboardPassengerOfficeComponent() { helperText: `${t("filter_mode")}: ${t(filterFnValue)}`, sx: {minWidth: "120px"}, variant: "standard", - actionBar: {actions: ["accept", "today"]}, + actionbar: {actions: ["accept", "today"]}, }, }} value={ @@ -171,7 +168,6 @@ function DashboardPassengerOfficeComponent() { header: t("PassengerOffice.navgan_id"), enableColumnFilter: true, datatype: "numeric", - maxSize: 100, filterFn: "equals", columnFilterModeOptions: [ "equals", @@ -203,7 +199,6 @@ function DashboardPassengerOfficeComponent() { header: t("PassengerOffice.state_name"), enableColumnFilter: false, datatype: "numeric", - minSize: 300, // filterFn: "equals", // filterSelectOptions: [ // ], @@ -218,7 +213,7 @@ function DashboardPassengerOfficeComponent() { return ( - } enableLastUpdate={true} enablePinning={true} - enableDensityToggle={true} + enableDensityToggle={false} + initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large) enableColumnFilters={true} enableHiding={true} enableFullScreenToggle={false} enableGlobalFilter={false} enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions enableRowActions={true} - renderRowActions={({row}) => } + TableRowAction={TableRowActions} /> diff --git a/src/components/dashboard/province-manager/TableRowActions.jsx b/src/components/dashboard/province-manager/TableRowActions.jsx index 13c6e7b..4071b91 100644 --- a/src/components/dashboard/province-manager/TableRowActions.jsx +++ b/src/components/dashboard/province-manager/TableRowActions.jsx @@ -1,58 +1,92 @@ import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; import ThumbDownIcon from "@mui/icons-material/ThumbDown"; import {Box, IconButton, Tooltip} from "@mui/material"; -import {useContext} from "react"; +import {useCallback, useState} from "react"; import ConfirmForm from "./Form/ConfirmForm"; import RejectForm from "./Form/RejectForm"; import {useTranslations} from "next-intl"; -import {DataTableContext} from "@/lib/app/contexts/DatatableContext"; +import Notifications from "@/core/components/notifications"; +import useUser from "@/lib/app/hooks/useUser"; +import useDirection from "@/lib/app/hooks/useDirection"; +import axios from "axios"; -const TableRowActions = ({row}) => { +const TableRowActions = ({row, mutate, fetchUrl}) => { const t = useTranslations(); - const { - openConfirmDialog, - openRejectDialog, - handleOpenConfirmDialog, - handleOpenRejectDialog, - handleCloseConfirmDialog, - handleCloseRejectDialog, - rowId, - confirmData, - rejectData, - } = useContext(DataTableContext); + const {token} = useUser(); + const {directionApp} = useDirection(); + + // Confirm + const [openConfirmDialog, setOpenConfirmDialog] = useState(false); + const handleCloseConfirmDialog = () => { + setOpenConfirmDialog(false); + }; + const confirmData = useCallback((url, rowID, values) => { + Notifications(directionApp, t, undefined) + axios + .post(`${url}/${rowID}`, values, { + headers: {authorization: `Bearer ${token}`}, + }) + .then((response) => { + Notifications(directionApp, t, response); + mutate(fetchUrl) + }) + .catch((error) => { + Notifications(directionApp, t, error.response); + }); + }, []); + // End Confirm + + // Reject + const [openRejectDialog, setOpenRejectDialog] = useState(false); + const handleCloseRejectDialog = () => { + setOpenRejectDialog(false); + }; + + const rejectData = useCallback((url, rowID, values) => { + Notifications(directionApp, t) + axios + .post(`${url}/${rowID}`, values, { + headers: {authorization: `Bearer ${token}`}, + }) + .then((response) => { + Notifications(directionApp, t, response); + mutate(fetchUrl) + }) + .catch((error) => { + Notifications(directionApp, t, error.response); + }); + }, []); + // End Reject + return ( { - handleOpenConfirmDialog(row); + setOpenConfirmDialog(true) }} > - {openConfirmDialog && ( - - )} + - handleOpenRejectDialog(row)}> + setOpenRejectDialog(true)}> - {openRejectDialog && ( - - )} + ); }; diff --git a/src/components/dashboard/province-manager/index.jsx b/src/components/dashboard/province-manager/index.jsx index 5054e02..f1173e9 100644 --- a/src/components/dashboard/province-manager/index.jsx +++ b/src/components/dashboard/province-manager/index.jsx @@ -1,9 +1,7 @@ -import DataTableStructure from "@/core/components/DatatableStructure"; import DashboardLayouts from "@/layouts/dashboardLayouts"; import {Box, IconButton, Typography} from "@mui/material"; import ClearIcon from "@mui/icons-material/Clear"; import {useMemo} from "react"; -// import TableToolbar from "./TableTollbar"; import {GET_PROVINCE_MANAGER} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; @@ -11,6 +9,7 @@ import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import moment from "jalali-moment"; import {faIR} from "@mui/x-date-pickers/locales"; +import DataTable from "@/core/components/DataTable"; function DashboardProvinceManagerComponent() { const t = useTranslations(); @@ -24,7 +23,6 @@ function DashboardProvinceManagerComponent() { enableColumnFilter: true, datatype: "numeric", filterFn: "equals", - maxSize: 100, columnFilterModeOptions: [ "equals", "notEquals", @@ -95,7 +93,6 @@ function DashboardProvinceManagerComponent() { enableColumnFilter: true, datatype: "date", filterFn: "lessThan", - minSize: 200, columnFilterModeOptions: ["lessThan", "greaterThan"], Cell: ({renderedCellValue}) => { return {renderedCellValue}; @@ -171,7 +168,6 @@ function DashboardProvinceManagerComponent() { enableColumnFilter: true, datatype: "numeric", filterFn: "equals", - maxSize: 100, columnFilterModeOptions: [ "equals", "notEquals", @@ -202,7 +198,6 @@ function DashboardProvinceManagerComponent() { header: t("ProvinceManager.state_name"), enableColumnFilter: false, datatype: "numeric", - minSize: 300, // filterFn: "equals", // filterSelectOptions: [ // ], @@ -217,22 +212,22 @@ function DashboardProvinceManagerComponent() { return ( - } enableLastUpdate={true} enablePinning={true} - enableDensityToggle={true} + enableDensityToggle={false} + initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large) enableColumnFilters={true} enableHiding={true} enableFullScreenToggle={false} enableGlobalFilter={false} enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions enableRowActions={true} - renderRowActions={({row}) => } + TableRowAction={TableRowActions} /> diff --git a/src/components/dashboard/transportation-assistance/TableRowActions.jsx b/src/components/dashboard/transportation-assistance/TableRowActions.jsx index 1306d2c..4071b91 100644 --- a/src/components/dashboard/transportation-assistance/TableRowActions.jsx +++ b/src/components/dashboard/transportation-assistance/TableRowActions.jsx @@ -1,59 +1,92 @@ import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; import ThumbDownIcon from "@mui/icons-material/ThumbDown"; import {Box, IconButton, Tooltip} from "@mui/material"; -import {useContext} from "react"; +import {useCallback, useState} from "react"; import ConfirmForm from "./Form/ConfirmForm"; import RejectForm from "./Form/RejectForm"; import {useTranslations} from "next-intl"; -import {DataTableContext} from "@/lib/app/contexts/DatatableContext"; +import Notifications from "@/core/components/notifications"; +import useUser from "@/lib/app/hooks/useUser"; +import useDirection from "@/lib/app/hooks/useDirection"; +import axios from "axios"; -const TableRowActions = ({row}) => { +const TableRowActions = ({row, mutate, fetchUrl}) => { const t = useTranslations(); + const {token} = useUser(); + const {directionApp} = useDirection(); + + // Confirm + const [openConfirmDialog, setOpenConfirmDialog] = useState(false); + const handleCloseConfirmDialog = () => { + setOpenConfirmDialog(false); + }; + const confirmData = useCallback((url, rowID, values) => { + Notifications(directionApp, t, undefined) + axios + .post(`${url}/${rowID}`, values, { + headers: {authorization: `Bearer ${token}`}, + }) + .then((response) => { + Notifications(directionApp, t, response); + mutate(fetchUrl) + }) + .catch((error) => { + Notifications(directionApp, t, error.response); + }); + }, []); + // End Confirm + + // Reject + const [openRejectDialog, setOpenRejectDialog] = useState(false); + const handleCloseRejectDialog = () => { + setOpenRejectDialog(false); + }; + + const rejectData = useCallback((url, rowID, values) => { + Notifications(directionApp, t) + axios + .post(`${url}/${rowID}`, values, { + headers: {authorization: `Bearer ${token}`}, + }) + .then((response) => { + Notifications(directionApp, t, response); + mutate(fetchUrl) + }) + .catch((error) => { + Notifications(directionApp, t, error.response); + }); + }, []); + // End Reject - const { - openConfirmDialog, - openRejectDialog, - handleOpenConfirmDialog, - handleOpenRejectDialog, - handleCloseConfirmDialog, - handleCloseRejectDialog, - rowId, - confirmData, - rejectData, - } = useContext(DataTableContext); return ( { - handleOpenConfirmDialog(row); + setOpenConfirmDialog(true) }} > - {openConfirmDialog && ( - - )} + - handleOpenRejectDialog(row)}> + setOpenRejectDialog(true)}> - {openRejectDialog && ( - - )} + ); }; diff --git a/src/components/dashboard/transportation-assistance/index.jsx b/src/components/dashboard/transportation-assistance/index.jsx index 51b780d..f776118 100644 --- a/src/components/dashboard/transportation-assistance/index.jsx +++ b/src/components/dashboard/transportation-assistance/index.jsx @@ -1,9 +1,7 @@ -import DataTableStructure from "@/core/components/DatatableStructure"; import DashboardLayouts from "@/layouts/dashboardLayouts"; import {Box, IconButton, Typography} from "@mui/material"; import ClearIcon from "@mui/icons-material/Clear"; import {useMemo} from "react"; -// import TableToolbar from "./TableTollbar"; import {GET_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes"; import {useTranslations} from "next-intl"; import TableRowActions from "./TableRowActions"; @@ -11,6 +9,7 @@ import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers"; import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; import {faIR} from "@mui/x-date-pickers/locales"; import moment from "jalali-moment"; +import DataTable from "@/core/components/DataTable"; function DashboardTransportationAssistanceComponent() { const t = useTranslations(); @@ -23,7 +22,6 @@ function DashboardTransportationAssistanceComponent() { enableColumnFilter: true, datatype: "numeric", filterFn: "equals", - maxSize: 100, columnFilterModeOptions: [ "equals", "notEquals", @@ -94,7 +92,6 @@ function DashboardTransportationAssistanceComponent() { header: t("TransportationAssistance.created_at"), enableColumnFilter: true, datatype: "date", - minSize: 200, filterFn: "lessThan", columnFilterModeOptions: ["lessThan", "greaterThan"], Cell: ({renderedCellValue}) => ( @@ -171,7 +168,6 @@ function DashboardTransportationAssistanceComponent() { enableColumnFilter: true, datatype: "numeric", filterFn: "equals", - maxSize: 100, columnFilterModeOptions: [ "equals", "notEquals", @@ -202,7 +198,6 @@ function DashboardTransportationAssistanceComponent() { header: t("TransportationAssistance.state_name"), enableColumnFilter: false, datatype: "numeric", - minSize: 300, // filterFn: "equals", // filterSelectOptions: [ // ], @@ -217,22 +212,22 @@ function DashboardTransportationAssistanceComponent() { return ( - } enableLastUpdate={true} enablePinning={true} - enableDensityToggle={true} + enableDensityToggle={false} + initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large) enableColumnFilters={true} enableHiding={true} enableFullScreenToggle={false} enableGlobalFilter={false} enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions enableRowActions={true} - renderRowActions={({row}) => } + TableRowAction={TableRowActions} /> diff --git a/src/components/login-expert/index.jsx b/src/components/login-expert/index.jsx index 30c84e6..293f9f9 100644 --- a/src/components/login-expert/index.jsx +++ b/src/components/login-expert/index.jsx @@ -64,7 +64,7 @@ const LoginComponent = () => { - {t("app_name")} + {t("app_name")}/ {t("login_expert")} diff --git a/src/core/components/Datatable.jsx b/src/core/components/DataTable.jsx similarity index 84% rename from src/core/components/Datatable.jsx rename to src/core/components/DataTable.jsx index 060e089..8b56c14 100644 --- a/src/core/components/Datatable.jsx +++ b/src/core/components/DataTable.jsx @@ -1,23 +1,21 @@ -import {ReloadDataTableContext} from "@/lib/app/contexts/ReloadDatatableContext"; -import useLanguage from "@/lib/app/hooks/useLanguage"; -import {Typography} from "@mui/material"; -import axios from "axios"; -import MaterialReactTable from "material-react-table"; -import moment from "moment-jalaali"; import {useTranslations} from "next-intl"; -import {useContext, useEffect, useMemo, useState} from "react"; +import useLanguage from "@/lib/app/hooks/useLanguage"; +import {useEffect, useMemo, useState} from "react"; +import moment from "moment-jalaali"; import useSWR from "swr"; +import {Typography} from "@mui/material"; +import MaterialReactTable from "material-react-table"; +import axios from "axios"; +import useUser from "@/lib/app/hooks/useUser"; +import {css} from "@emotion/react"; -const DataTable = (props) => { - const {reloadDataTable, setReloadDataTable} = useContext( - ReloadDataTableContext - ); - +function DataTable(props) { + const {token} = useUser(); const fetcher = (...args) => { return axios .get(args, { headers: { - Authorization: `Bearer ${props.token}`, + Authorization: `Bearer ${token}`, }, }) .then((res) => { @@ -28,6 +26,9 @@ const DataTable = (props) => { const t = useTranslations(); const {languageApp, languageList} = useLanguage(); const [columnFilters, setColumnFilters] = useState([]); + const [sorting, setSorting] = useState([]); + const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10}); + const [rowCount, setRowCount] = useState(0); const [columnFilterFns, setColumnFilterFns] = useState(() => { let output = {}; const list = props.columns.map((item) => @@ -41,9 +42,7 @@ const DataTable = (props) => { } return output; }); - const [sorting, setSorting] = useState([]); - const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10}); - const [rowCount, setRowCount] = useState(0); + const [updateTime, setupdateTime] = useState( moment().format("HH:mm | jYYYY/jM/jD") ); @@ -55,7 +54,7 @@ const DataTable = (props) => { ); const fetchUrl = useMemo(() => { - const url = new URL(props.tableUrl /* send your api */); + const url = new URL(props.tableUrl); url.searchParams.set( "start", `${pagination.pageIndex * pagination.pageSize}` @@ -85,18 +84,11 @@ const DataTable = (props) => { sorting, props.columns, ]); - const {data, isLoading, isValidating, mutate} = useSWR(fetchUrl, fetcher, { + + const {data, isValidating, mutate} = useSWR(fetchUrl, fetcher, { revalidateOnFocus: false, }); - useEffect(() => { - if (reloadDataTable) { - mutate(fetchUrl).then(() => { - setReloadDataTable(false); // Set reloadDataTable to false after mutation is complete - }); - } - }, [reloadDataTable, setReloadDataTable]); - useEffect(() => { setupdateTime(moment().format("HH:mm | jYYYY/jM/jD")); }, [isValidating, languageApp]); @@ -104,7 +96,6 @@ const DataTable = (props) => { return ( { enableRowSelection={props.selectableRow} /* send condition */ enablePinning={props.enablePinning} /* send condition */ enableColumnFilters={props.enableColumnFilters} /* send condition */ - enableDensityToggle={props.enableDensityToggle} /* send condition */ + enableDensityToggle={props.enableDensityToggle} enableHiding={props.enableHiding} /* send condition */ enableFullScreenToggle={props.enableFullScreenToggle} /* send condition */ enableColumnResizing={props.enableColumnResizing} muiTableHeadCellProps={{ sx: { color: "primary.main", + borderLeft: "1px solid #e1e1e1", + "&:first-of-type": { + borderLeft: "unset" + }, "& .Mui-TableHeadCell-Content": {justifyContent: "space-between"}, }, }} + muiTableBodyCellProps={{ + sx: { + borderLeft: "1px solid #e1e1e1", + "&:first-of-type": { + borderLeft: "unset" + } + }, + }} enableColumnFilterModes muiTablePaperProps={{elevation: 0}} rowCount={rowCount} @@ -158,7 +161,7 @@ const DataTable = (props) => { )} state={{ - isLoading, + isLoading: isValidating, columnFilters, columnFilterFns, pagination, @@ -166,9 +169,10 @@ const DataTable = (props) => { }} positionActionsColumn={"last"} enableRowActions={props.enableRowActions} + renderRowActions={({row}) => } {...props} /> ); -}; +} -export default DataTable; +export default DataTable; \ No newline at end of file diff --git a/src/core/components/DatatableStructure.jsx b/src/core/components/DatatableStructure.jsx deleted file mode 100644 index ae97461..0000000 --- a/src/core/components/DatatableStructure.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import {DataTableProvider} from "@/lib/app/contexts/DatatableContext"; -import DataTable from "./Datatable"; -import {ReloadDataTableProvider} from "@/lib/app/contexts/ReloadDatatableContext"; - -function DataTableStructure(props) { - return ( - - - - - - ); -} - -export default DataTableStructure; diff --git a/src/core/components/notifications/ErrorNotification.jsx b/src/core/components/notifications/ErrorNotification.jsx index e6ac204..e503607 100644 --- a/src/core/components/notifications/ErrorNotification.jsx +++ b/src/core/components/notifications/ErrorNotification.jsx @@ -2,7 +2,7 @@ import DangerousIcon from "@mui/icons-material/Dangerous"; import {Box, Typography} from "@mui/material"; import {toast} from "react-toastify"; -const ErrorNotification = (directionApp, status, t, message) => { +const ErrorNotification = (directionApp, t, status, message) => { toast( () => ( <> diff --git a/src/core/components/notifications/SuccessNotification.jsx b/src/core/components/notifications/SuccessNotification.jsx index 085b154..d45e0ae 100644 --- a/src/core/components/notifications/SuccessNotification.jsx +++ b/src/core/components/notifications/SuccessNotification.jsx @@ -2,7 +2,7 @@ import BeenhereIcon from "@mui/icons-material/Beenhere"; import {Box, Typography} from "@mui/material"; import {toast} from "react-toastify"; -const SuccessNotification = (directionApp, status, t) => { +const SuccessNotification = (directionApp, t, status) => { toast( () => ( <> diff --git a/src/core/components/notifications/WarningNotification.jsx b/src/core/components/notifications/WarningNotification.jsx index 8e3280e..b8b72a6 100644 --- a/src/core/components/notifications/WarningNotification.jsx +++ b/src/core/components/notifications/WarningNotification.jsx @@ -2,7 +2,7 @@ import ReportIcon from "@mui/icons-material/Report"; import {Box, Typography} from "@mui/material"; import {toast} from "react-toastify"; -const WarningNotification = (directionApp, status, t) => { +const WarningNotification = (directionApp, t, status) => { toast( () => ( <> diff --git a/src/core/components/notifications/index.jsx b/src/core/components/notifications/index.jsx index 41a1896..bf76d37 100644 --- a/src/core/components/notifications/index.jsx +++ b/src/core/components/notifications/index.jsx @@ -1,39 +1,55 @@ +import {toast} from "react-toastify"; import ErrorNotification from "./ErrorNotification"; import WarningNotification from "./WarningNotification"; import SuccessNotification from "./SuccessNotification"; -const Notifications = async (directionApp, response, t) => { - const {status, data} = response; - +const Notifications = async (directionApp, t, response) => { + const {status, data} = response != undefined ? response : "" + toast.dismiss(); switch (status) { case 200: - SuccessNotification(directionApp, status, t); + SuccessNotification(directionApp, t, status); break; case 400: - ErrorNotification(directionApp, status, t); + ErrorNotification(directionApp, t, status); break; case 401: - ErrorNotification(directionApp, status, t); + ErrorNotification(directionApp, t, status); break; case 403: - ErrorNotification(directionApp, status, t); + ErrorNotification(directionApp, t, status); break; case 422: - ErrorNotification(directionApp, status, t, data.message); + ErrorNotification(directionApp, t, status, data.message); break; case 500: - WarningNotification(directionApp, status, t); + WarningNotification(directionApp, t, status); break; case 503: - WarningNotification(directionApp, status, t); + WarningNotification(directionApp, t, status); break; case 504: - WarningNotification(directionApp, status, t); + WarningNotification(directionApp, t, status); break; default: - // Handle other cases if needed + toast(t("notifications.pending"), { + position: directionApp === "ltr" ? "top-left" : "top-right", + autoClose: false, + closeOnClick: false, + draggable: false, + }); break; } }; export default Notifications; + +/* +usage document + +** for pending use ( Notifications(directionApp, t, undefined) ) this before your request. +** for success use ( Notifications(directionApp, t, response) ) this inside .then() of your request. +** for Error and Warning use ( Notifications(directionApp, t, error.response) ) this inside .catche() of your request. + +end usage document +*/ diff --git a/src/layouts/MuiLayout.jsx b/src/layouts/MuiLayout.jsx index 2614ac2..52f3f53 100644 --- a/src/layouts/MuiLayout.jsx +++ b/src/layouts/MuiLayout.jsx @@ -30,8 +30,7 @@ const MuiLayout = ({children, isBot}) => { height: "8px", }, "*::-webkit-scrollbar-thumb": { - background: "#e1e1e1", - borderRadius: "3px", + background: `${theme.palette.primary.light}80`, }, "*:not(.MuiTableContainer-root)": { scrollbarWidth: "thin", @@ -44,7 +43,7 @@ const MuiLayout = ({children, isBot}) => { }, "*::-moz-scrollbar-thumb": { - backgroundColor: "#e1e1e1", + backgroundColor: `${theme.palette.primary.light}80`, }, [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: { "*::-webkit-scrollbar": { diff --git a/src/lib/app/contexts/DatatableContext.jsx b/src/lib/app/contexts/DatatableContext.jsx deleted file mode 100644 index 27fa6ac..0000000 --- a/src/lib/app/contexts/DatatableContext.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import {createContext} from "react"; -import useDataTable from "../hooks/useDatatable"; - -export const DataTableContext = createContext(); - -export const DataTableProvider = (props) => { - const contextValue = useDataTable(); - - return ( - - {props.children} - - ); -}; diff --git a/src/lib/app/contexts/ReloadDatatableContext.jsx b/src/lib/app/contexts/ReloadDatatableContext.jsx deleted file mode 100644 index de359c5..0000000 --- a/src/lib/app/contexts/ReloadDatatableContext.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import {createContext, useState} from "react"; - -export const ReloadDataTableContext = createContext(); - -export const ReloadDataTableProvider = ({children}) => { - const [reloadDataTable, setReloadDataTable] = useState(false); - - return ( - - {children} - - ); -}; diff --git a/src/lib/app/hooks/useDatatable.jsx b/src/lib/app/hooks/useDatatable.jsx deleted file mode 100644 index ff44b61..0000000 --- a/src/lib/app/hooks/useDatatable.jsx +++ /dev/null @@ -1,113 +0,0 @@ -import axios from "axios"; -import {useCallback, useContext, useReducer, useState} from "react"; -import {ReloadDataTableContext} from "../contexts/ReloadDatatableContext"; -import useUser from "./useUser"; -import Notifications from "@/core/components/notifications"; -import useDirection from "./useDirection"; -import {useTranslations} from "next-intl"; - -const initialValues = { - url: "", - rowID: "", - values: {}, -}; - -const reducer = (state, action) => { - switch (action.type) { - case "CONFIRM_DATA": - return { - ...state, - url: action.url, - rowID: action.rowID, - }; - case "REJECT_DATA": - return { - ...state, - url: action.url, - rowID: action.rowID, - values: {}, - }; - default: - return state; - } -}; - -const useDataTable = () => { - const {setReloadDataTable} = useContext(ReloadDataTableContext); - const [state, dispatch] = useReducer(reducer, initialValues); - const [openConfirmDialog, setOpenConfirmDialog] = useState(false); - const [openRejectDialog, setOpenRejectDialog] = useState(false); - const [rowId, setRowId] = useState(null); - const {directionApp} = useDirection(); - const t = useTranslations(); - - const {token} = useUser(); - - const confirmData = useCallback(async (url, rowID, values) => { - dispatch({type: "CONFIRM_DATA", url: url, rowID: rowID, values: values}); - axios - .post(`${url}/${rowID}`, values, { - headers: {authorization: `Bearer ${token}`}, - }) - .then((response) => { - setReloadDataTable(true); - Notifications(directionApp, response, t); - }) - .catch((error) => { - Notifications(directionApp, error.response, t); - }); - }, []); - - const rejectData = useCallback(async (url, rowID, values) => { - dispatch({type: "REJECT_DATA", url: url, rowID: rowID, values: values}); - axios - .post(`${url}/${rowID}`, values, { - headers: {authorization: `Bearer ${token}`}, - }) - .then((response) => { - setReloadDataTable(true); - Notifications(directionApp, response, t); - }) - .catch((error) => { - console.log(error); - Notifications(directionApp, error.response, t); - }); - }, []); - - //Confirm Data - const handleOpenConfirmDialog = (row) => { - setRowId(row.getValue("id")); - setOpenConfirmDialog(true); - }; - - const handleCloseConfirmDialog = () => { - setOpenConfirmDialog(false); - }; - //End Confirm Data - - // Reject Data - const handleOpenRejectDialog = (row) => { - setRowId(row.getValue("id")); - setOpenRejectDialog(true); - }; - - const handleCloseRejectDialog = () => { - setOpenRejectDialog(false); - }; - // End Reject Data - - const contextValue = { - handleOpenConfirmDialog, - handleCloseConfirmDialog, - handleOpenRejectDialog, - handleCloseRejectDialog, - rowId, - openConfirmDialog, - openRejectDialog, - rejectData, - confirmData, - }; - return contextValue; -}; - -export default useDataTable;