debug datatable

public/locales/fa/app.json

@@ -93,6 +93,7 @@
   },
   "PassengerOffice": {
     "name": "نام",
+    "id": "کد یکتا",
     "national_id": "کد ملی",
     "phone_number": "موبایل",
     "created_at": "تاریخ درخواست",
@@ -103,7 +104,8 @@
   },
   "TransportationAssistance": {
     "name": "نام",
-    "id": "کد ملی",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
     "phone_number": "موبایل",
     "created_at": "تاریخ درخواست",
     "updated_at": "تاریخ بروزرسانی",
@@ -113,6 +115,7 @@
   },
   "MachinaryOffice": {
     "name": "نام",
+    "id": "کد یکتا",
     "national_id": "کد ملی",
     "phone_number": "موبایل",
     "created_at": "تاریخ درخواست",

src/components/dashboard/machinary-office/index.jsx

@@ -6,11 +6,31 @@ import { useMemo } from "react";
 import { GET_MACHINARY_OFFICE } from "@/core/data/apiRoutes";
 import { useTranslations } from "next-intl";
 import TableRowActions from "./TableRowActions";
+import { format } from "date-fns-jalali";
 
 function DashboardMachinaryOfficeComponent() {
   const t = useTranslations();
   const columns = useMemo(
     () => [
+      {
+        accessorFn: (row) => row.id,
+        id: "id",
+        header: t("PassengerOffice.id"),
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: [
+          "equals",
+          "notEquals",
+          "contains",
+          "lessThan",
+          "greaterThan",
+          "between",
+        ],
+        Cell: ({ renderedCellValue }) => (
+          <Typography variant="body2">{renderedCellValue}</Typography>
+        ),
+      },
       {
         accessorFn: (row) => row.name,
         id: "name",
@@ -62,7 +82,7 @@ function DashboardMachinaryOfficeComponent() {
         ),
       },
       {
-        accessorFn: (row) => row.created_at,
+        accessorFn: (row) => format(new Date(row.created_at), "yyyy/mm/dd"),
         id: "created_at",
         header: t("MachinaryOffice.created_at"),
         enableColumnFilter: true,
@@ -81,7 +101,7 @@ function DashboardMachinaryOfficeComponent() {
         ),
       },
       {
-        accessorFn: (row) => row.updated_at,
+        accessorFn: (row) => format(new Date(row.updated_at), "yyyy/mm/dd"),
         id: "updated_at",
         header: t("MachinaryOffice.updated_at"),
         enableColumnFilter: true,
@@ -137,11 +157,9 @@ function DashboardMachinaryOfficeComponent() {
         enableColumnFilter: true,
         datatype: "numeric",
         filterFn: "equals",
-        filterSelectOptions: [
+        // filterSelectOptions: [
-          { text: "Active", value: "0" },
+        // ],
-          { text: "Deactive", value: "1" },
+        // filterVariant: "select",
-        ],
-        filterVariant: "select",
         Cell: ({ renderedCellValue }) => (
           <Typography variant="body2">{renderedCellValue}</Typography>
         ),

src/components/dashboard/passenger-office/index.jsx

@@ -6,11 +6,34 @@ import { useMemo } from "react";
 import { GET_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
 import { useTranslations } from "next-intl";
 import TableRowActions from "./TableRowActions";
+import { format } from "date-fns-jalali";
+import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "moment";
 
 function DashboardPassengerOfficeComponent() {
   const t = useTranslations();
   const columns = useMemo(
     () => [
+      {
+        accessorFn: (row) => row.id,
+        id: "id",
+        header: t("PassengerOffice.id"),
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: [
+          "equals",
+          "notEquals",
+          "contains",
+          "lessThan",
+          "greaterThan",
+          "between",
+        ],
+        Cell: ({ renderedCellValue }) => (
+          <Typography variant="body2">{renderedCellValue}</Typography>
+        ),
+      },
       {
         accessorFn: (row) => row.name,
         id: "name",
@@ -62,26 +85,54 @@ function DashboardPassengerOfficeComponent() {
         ),
       },
       {
-        accessorFn: (row) => row.created_at,
+        accessorFn: (row) =>
+          format(new Date(row.created_at), "yyyy/mm/dd HH:mm"),
         id: "created_at",
         header: t("PassengerOffice.created_at"),
         enableColumnFilter: true,
-        datatype: "numeric",
+        datatype: "date",
-        filterFn: "equals",
+        filterFn: "lessThan",
-        columnFilterModeOptions: [
+        columnFilterModeOptions: ["lessThan", "greaterThan"],
-          "equals",
+        Cell: ({ renderedCellValue }) => {
-          "notEquals",
+          return <Typography variant="body2">{renderedCellValue}</Typography>;
-          "contains",
+        },
-          "lessThan",
+        Header: ({ column }) => <em>{column.columnDef.header}</em>,
-          "greaterThan",
+        Filter: ({ column }) => {
-          "between",
+          return (
-        ],
+            <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
-        Cell: ({ renderedCellValue }) => (
+              <DateTimePicker
-          <Typography variant="body2">{renderedCellValue}</Typography>
+                onChange={(newValue) => {
-        ),
+                  console.log({ newValue });
+                  const date = new Date(newValue);
+                  console.log({ date });
+                  const formattedDate = moment(date)
+                    .locale("en")
+                    .format("YYYY-MM-DD HH:mm");
+                  console.log(formattedDate);
+                  // const formattedDate = format(date, "YYYY-MM-DD HH:mm");
+                  // console.log(
+                  //   "moment",
+                  //   moment(formattedDate)
+                  //     .locale("en")
+                  //     .format("YYYY-MM-DD HH:mm")
+                  // );
+                  column.setFilterValue(formattedDate);
+                }}
+                slotProps={{
+                  textField: {
+                    helperText: `Filter Mode: ${column.columnDef._filterFn}`,
+                    sx: { minWidth: "120px" },
+                    variant: "standard",
+                  },
+                }}
+                value={column.getFilterValue()}
+              />
+            </LocalizationProvider>
+          );
+        },
       },
       {
-        accessorFn: (row) => row.updated_at,
+        accessorFn: (row) => format(new Date(row.updated_at), "yyyy/mm/dd"),
         id: "updated_at",
         header: t("PassengerOffice.updated_at"),
         enableColumnFilter: true,
@@ -137,11 +188,9 @@ function DashboardPassengerOfficeComponent() {
         enableColumnFilter: true,
         datatype: "numeric",
         filterFn: "equals",
-        filterSelectOptions: [
+        // filterSelectOptions: [
-          { text: "Active", value: "0" },
+        // ],
-          { text: "Deactive", value: "1" },
+        // filterVariant: "select",
-        ],
-        filterVariant: "select",
         Cell: ({ renderedCellValue }) => (
           <Typography variant="body2">{renderedCellValue}</Typography>
         ),

src/components/dashboard/transportation-assistance/index.jsx

@@ -6,11 +6,31 @@ import { useMemo } from "react";
 import { GET_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
 import { useTranslations } from "next-intl";
 import TableRowActions from "./TableRowActions";
+import { format } from "date-fns-jalali";
 
 function DashboardTransportationAssistanceComponent() {
   const t = useTranslations();
   const columns = useMemo(
     () => [
+      {
+        accessorFn: (row) => row.id,
+        id: "id",
+        header: t("TransportationAssistance.id"),
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: [
+          "equals",
+          "notEquals",
+          "contains",
+          "lessThan",
+          "greaterThan",
+          "between",
+        ],
+        Cell: ({ renderedCellValue }) => (
+          <Typography variant="body2">{renderedCellValue}</Typography>
+        ),
+      },
       {
         accessorFn: (row) => row.name,
         id: "name",
@@ -23,10 +43,11 @@ function DashboardTransportationAssistanceComponent() {
           <Typography variant="body2">{renderedCellValue}</Typography>
         ),
       },
+
       {
-        accessorFn: (row) => row.id,
+        accessorFn: (row) => row.national_id,
-        id: "id",
+        id: "national_id",
-        header: t("TransportationAssistance.id"),
+        header: t("TransportationAssistance.national_id"),
         enableColumnFilter: true,
         datatype: "numeric",
         filterFn: "equals",
@@ -62,7 +83,7 @@ function DashboardTransportationAssistanceComponent() {
         ),
       },
       {
-        accessorFn: (row) => row.created_at,
+        accessorFn: (row) => format(new Date(row.created_at), "yyyy/mm/dd"),
         id: "created_at",
         header: t("TransportationAssistance.created_at"),
         enableColumnFilter: true,
@@ -81,7 +102,7 @@ function DashboardTransportationAssistanceComponent() {
         ),
       },
       {
-        accessorFn: (row) => row.updated_at,
+        accessorFn: (row) => format(new Date(row.updated_at), "yyyy/mm/dd"),
         id: "updated_at",
         header: t("TransportationAssistance.updated_at"),
         enableColumnFilter: true,
@@ -137,11 +158,9 @@ function DashboardTransportationAssistanceComponent() {
         enableColumnFilter: true,
         datatype: "numeric",
         filterFn: "equals",
-        filterSelectOptions: [
+        // filterSelectOptions: [
-          { text: "Active", value: "0" },
+        // ],
-          { text: "Deactive", value: "1" },
+        // filterVariant: "select",
-        ],
-        filterVariant: "select",
         Cell: ({ renderedCellValue }) => (
           <Typography variant="body2">{renderedCellValue}</Typography>
         ),