Add payment number and date. IO-610

client/src/components/accounting-payments-table/accounting-payments-table.component.jsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import PaymentExportButton from "../payment-export-button/payment-export-button.component";
 import { PaymentsExportAllButton } from "../payments-export-all-button/payments-export-all-button.component";
@@ -37,7 +37,23 @@ export default function AccountingPayablesTableComponent({
         <Link to={"/manage/jobs/" + record.job.id}>{record.job.ro_number}</Link>
       ),
     },
-
+    {
+      title: t("payments.fields.date"),
+      dataIndex: "date",
+      key: "date",
+      sorter: (a, b) => alphaSort(a.date, b.date),
+      sortOrder:
+        state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
+      render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
+    },
+    {
+      title: t("payments.fields.date"),
+      dataIndex: "date",
+      key: "date",
+      sorter: (a, b) => alphaSort(a.date, b.date),
+      sortOrder:
+        state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
+    },
     {
       title: t("jobs.fields.owner"),
       dataIndex: "owner",

client/src/components/payment-form/payment-form.component.jsx

@@ -6,6 +6,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import Alert from "../alert/alert.component";
+import DatePickerFormItem from "../form-date-picker/form-date-picker.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 
@@ -63,7 +64,18 @@ export function PaymentFormComponent({
       <Form.Item label={t("payments.fields.memo")} name="memo">
         <Input disabled={disabled} />
       </Form.Item>
-
+      <Form.Item
+        label={t("payments.fields.date")}
+        name="date"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}
+      >
+        <DatePickerFormItem disabled={disabled} />
+      </Form.Item>
       <Form.Item
         label={t("payments.fields.payer")}
         name="payer"

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -5,7 +5,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 
 import { connect } from "react-redux";
@@ -51,7 +51,13 @@ export function PaymentsListPaginated({
         </Link>
       ),
     },
-
+    {
+      title: t("payments.fields.paymentnum"),
+      dataIndex: "paymentnum",
+      key: "paymentnum",
+      sorter: (a, b) => alphaSort(a.paymentnum, b.paymentnum),
+      sortOrder: sortcolumn === "paymentnum" && sortorder,
+    },
     {
       title: t("jobs.fields.owner"),
       dataIndex: "owner",
@@ -73,6 +79,15 @@ export function PaymentsListPaginated({
         );
       },
     },
+    {
+      title: t("payments.fields.date"),
+      dataIndex: "date",
+      key: "date",
+      sorter: (a, b) => alphaSort(a.date, b.date),
+      sortOrder:
+        state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
+      render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
+    },
     {
       title: t("payments.fields.amount"),
       dataIndex: "amount",