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

completing filtering of search and translation of that and styling

Browse Source
This commit is contained in:
Mohammad Jalali
2023-07-23 16:10:20 +03:30
parent f4f3041157
commit 1a6c13d769
9 changed files with 1014 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

786
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -23,6 +23,7 @@
"fs-extra": "^11.1.1",
"image-resize": "^1.3.2",
"image-to-file-converter": "^1.0.6",
"jalali-moment": "^3.3.11",
"material-react-table": "^1.11.1",
"moment": "^2.29.4",
"moment-jalaali": "^0.10.0",

73
src/components/dashboard/machinary-office/index.jsx
View File

@@ -1,18 +1,20 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import { Box, Typography } from "@mui/material";
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";
import { format } from "date-fns-jalali";
import {
LocalizationProvider,
MobileDateTimePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "moment";
import moment from "jalali-moment";
import { faIR } from "@mui/x-date-pickers/locales";
function DashboardMachinaryOfficeComponent() {
const t = useTranslations();
const columns = useMemo(
@@ -89,7 +91,7 @@ function DashboardMachinaryOfficeComponent() {
},
{
accessorFn: (row) =>
format(new Date(row.created_at), "HH:mm | yyyy/mm/dd"),
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("MachinaryOffice.created_at"),
enableColumnFilter: true,
@@ -102,34 +104,55 @@ function DashboardMachinaryOfficeComponent() {
},
Header: ({ column }) => <em>{column.columnDef.header}</em>,
Filter: ({ column }) => {
const filterFnValue = column.columnDef._filterFn;
return (
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
<MobileDateTimePicker
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
<Box sx={{ display: "flex", alignItems: "start" }}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: { minWidth: "120px" },
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
slotProps={{
textField: {
helperText: `Filter Mode: ${column.columnDef._filterFn}`,
sx: { minWidth: "120px" },
variant: "standard",
},
}}
value={moment(column.getFilterValue())
.locale("fa")
.format("yyyy/mm/dd HH:mm")}
/>
</LocalizationProvider>
sx={{color: column.getFilterValue() ? "rgba(0, 0, 0, 0.54)" : "#bfbfbf"}}
>
<ClearIcon />
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
format(new Date(row.updated_at), "HH:mm | yyyy/mm/dd"),
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("MachinaryOffice.updated_at"),
enableColumnFilter: false,

74
src/components/dashboard/passenger-boss/index.jsx
View File

@@ -1,18 +1,19 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import { Box, Typography } from "@mui/material";
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 { useTranslations } from "next-intl";
import TableRowActions from "./TableRowActions";
import { format } from "date-fns-jalali";
import {
LocalizationProvider,
MobileDateTimePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "moment";
import moment from "jalali-moment";
import { faIR } from "@mui/x-date-pickers/locales";
function DashboardPassengerOfficeComponent() {
const t = useTranslations();
@@ -91,7 +92,7 @@ function DashboardPassengerOfficeComponent() {
},
{
accessorFn: (row) =>
format(new Date(row.created_at), "HH:mm | yyyy/mm/dd"),
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("PassengerBoss.created_at"),
enableColumnFilter: true,
@@ -104,34 +105,59 @@ function DashboardPassengerOfficeComponent() {
},
Header: ({ column }) => <em>{column.columnDef.header}</em>,
Filter: ({ column }) => {
const filterFnValue = column.columnDef._filterFn;
return (
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
<MobileDateTimePicker
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
<Box sx={{ display: "flex", alignItems: "start" }}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: { minWidth: "120px" },
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
slotProps={{
textField: {
helperText: `Filter Mode: ${column.columnDef._filterFn}`,
sx: { minWidth: "120px" },
variant: "standard",
},
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
value={moment(column.getFilterValue())
.locale("fa")
.format("yyyy/mm/dd HH:mm")}
/>
</LocalizationProvider>
>
<ClearIcon />
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
format(new Date(row.updated_at), "HH:mm | yyyy/mm/dd"),
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("PassengerBoss.updated_at"),
enableColumnFilter: false,

33
src/components/dashboard/passenger-office/index.jsx
View File

@@ -3,17 +3,18 @@ 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 { format } from "date-fns-jalali";
import {
LocalizationProvider,
MobileDateTimePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "moment";
import moment from "jalali-moment";
import dayjs from "dayjs";
function DashboardPassengerOfficeComponent() {
const t = useTranslations();
@@ -92,7 +93,7 @@ function DashboardPassengerOfficeComponent() {
},
{
accessorFn: (row) =>
format(new Date(row.created_at), "HH:mm | yyyy/mm/dd"),
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("PassengerOffice.created_at"),
enableColumnFilter: true,
@@ -108,7 +109,13 @@ function DashboardPassengerOfficeComponent() {
const filterFnValue = column.columnDef._filterFn;
return (
<Box sx={{ display: "flex", alignItems: "start" }}>
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
onChange={(newValue) => {
const date = new Date(newValue);
@@ -119,14 +126,18 @@ function DashboardPassengerOfficeComponent() {
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: { minWidth: "120px" },
variant: "standard",
actionBar: { actions: ["accept", "today"] },
},
}}
value={moment(column.getFilterValue())
.locale("fa")
.format("yyyy/mm/dd HH:mm")}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
/>
</LocalizationProvider>
<IconButton
@@ -134,7 +145,11 @@ function DashboardPassengerOfficeComponent() {
onClick={() => {
column.setFilterValue(null);
}}
color="rgba(0, 0, 0, 0.54)"
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
>
<ClearIcon />
</IconButton>
@@ -144,7 +159,7 @@ function DashboardPassengerOfficeComponent() {
},
{
accessorFn: (row) =>
format(new Date(row.updated_at), "HH:mm | yyyy/mm/dd"),
moment(row.updated_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
id: "updated_at",
header: t("PassengerOffice.updated_at"),
enableColumnFilter: false,

74
src/components/dashboard/province-manager/index.jsx
View File

@@ -1,18 +1,19 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import { Box, Typography } from "@mui/material";
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";
import { format } from "date-fns-jalali";
import {
LocalizationProvider,
MobileDateTimePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "moment";
import moment from "jalali-moment";
import { faIR } from "@mui/x-date-pickers/locales";
function DashboardProvinceManagerComponent() {
const t = useTranslations();
@@ -91,7 +92,7 @@ function DashboardProvinceManagerComponent() {
},
{
accessorFn: (row) =>
format(new Date(row.created_at), "HH:mm | yyyy/mm/dd"),
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("ProvinceManager.created_at"),
enableColumnFilter: true,
@@ -104,34 +105,59 @@ function DashboardProvinceManagerComponent() {
},
Header: ({ column }) => <em>{column.columnDef.header}</em>,
Filter: ({ column }) => {
const filterFnValue = column.columnDef._filterFn;
return (
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
<MobileDateTimePicker
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
<Box sx={{ display: "flex", alignItems: "start" }}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: { minWidth: "120px" },
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
slotProps={{
textField: {
helperText: `Filter Mode: ${column.columnDef._filterFn}`,
sx: { minWidth: "120px" },
variant: "standard",
},
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
value={moment(column.getFilterValue())
.locale("fa")
.format("yyyy/mm/dd HH:mm")}
/>
</LocalizationProvider>
>
<ClearIcon />
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
format(new Date(row.updated_at), "HH:mm | yyyy/mm/dd"),
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("ProvinceManager.updated_at"),
enableColumnFilter: false,

75
src/components/dashboard/transportation-assistance/index.jsx
View File

@@ -1,18 +1,20 @@
import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import { Box, Typography } from "@mui/material";
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";
import { format } from "date-fns-jalali";
import {
LocalizationProvider,
MobileDateTimePicker,
} from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "moment";
import { faIR } from "@mui/x-date-pickers/locales";
import moment from "jalali-moment";
function DashboardTransportationAssistanceComponent() {
const t = useTranslations();
const columns = useMemo(
@@ -90,7 +92,7 @@ function DashboardTransportationAssistanceComponent() {
},
{
accessorFn: (row) =>
format(new Date(row.created_at), "HH:mm | yyyy/mm/dd"),
moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("TransportationAssistance.created_at"),
enableColumnFilter: true,
@@ -103,34 +105,59 @@ function DashboardTransportationAssistanceComponent() {
),
Header: ({ column }) => <em>{column.columnDef.header}</em>,
Filter: ({ column }) => {
const filterFnValue = column.columnDef._filterFn;
return (
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
<MobileDateTimePicker
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
<Box sx={{ display: "flex", alignItems: "start" }}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps
.localeText
}
>
<MobileDateTimePicker
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
column.setFilterValue(formattedDate);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
sx: { minWidth: "120px" },
variant: "standard",
},
}}
value={
column.getFilterValue()
? new Date(column.getFilterValue())
: null
}
/>
</LocalizationProvider>
<IconButton
size="small"
onClick={() => {
column.setFilterValue(null);
}}
slotProps={{
textField: {
helperText: `Filter Mode: ${column.columnDef._filterFn}`,
sx: { minWidth: "120px" },
variant: "standard",
},
sx={{
color: column.getFilterValue()
? "rgba(0, 0, 0, 0.54)"
: "#bfbfbf",
}}
value={moment(column.getFilterValue())
.locale("fa")
.format("yyyy/mm/dd HH:mm")}
/>
</LocalizationProvider>
>
<ClearIcon />
</IconButton>
</Box>
);
},
},
{
accessorFn: (row) =>
format(new Date(row.updated_at), "HH:mm | yyyy/mm/dd"),
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("TransportationAssistance.updated_at"),
enableColumnFilter: false,

2
src/core/components/MuiDatePicker.jsx
View File

@@ -1,6 +1,6 @@
import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "moment/moment";
import moment from "jalali-moment";
import { useTranslations } from "next-intl";
export default function MuiDatePicker({

3
src/core/utils/theme.jsx
View File

@@ -1,3 +1,5 @@
import { faIR } from "@mui/x-date-pickers/locales";
const theme = {
palette: {
primary: {
@@ -13,6 +15,7 @@ const theme = {
dark: "#ad3a07",
},
},
faIR,
};
export default theme;