Merged in ENCOA-79_PaymentRecordsFilters (pull request #61)

ENCOA-79 PaymentRecordsFilters

Approved-by: Tiago Ribeiro

src/hooks/useListSearch.tsx

@@ -27,6 +27,10 @@ export function useListSearch<T>(fields: string[][], rows: T[]) {
 				if (typeof value === "string") {
 					return value.toLowerCase().includes(searchText);
 				}
+
+				if (typeof value === "number") {
+					return (value as Number).toString().includes(searchText);
+				}
 			});
 		});
 	}, [fields, rows, text]);

src/pages/payment-record.tsx

@@ -390,7 +390,7 @@ interface PaypalPaymentWithUserData extends PaypalPayment {
   email: string;
 }
 
-const paypalFilterRows = [["email"], ["name"]];
+const paypalFilterRows = [["email"], ["name"], ["orderId"], ["value"]];
 export default function PaymentRecord() {
   const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
   const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
@@ -414,6 +414,14 @@ export default function PaymentRecord() {
   const [endDate, setEndDate] = useState<Date | null>(
     moment().endOf("day").toDate()
   );
+
+  const [startDatePaymob, setStartDatePaymob] = useState<Date | null>(
+    moment("01/01/2023").toDate()
+  );
+  const [endDatePaymob, setEndDatePaymob] = useState<Date | null>(
+    moment().endOf("day").toDate()
+  );
+
   const [paid, setPaid] = useState<Boolean | null>(IS_PAID_OPTIONS[0].value);
   const [commissionTransfer, setCommissionTransfer] = useState<Boolean | null>(
     IS_FILE_SUBMITTED_OPTIONS[0].value
@@ -866,11 +874,16 @@ export default function PaymentRecord() {
 
   const updatedPaypalPayments = useMemo(
     () =>
-      paypalPayments.map((p) => {
-        const user = users.find((x) => x.id === p.userId) as User;
-        return { ...p, name: user?.name, email: user?.email };
-      }),
-    [paypalPayments, users]
+      paypalPayments
+        .filter((p) => {
+          const date = moment(p.createdAt);
+          return date.isAfter(startDatePaymob) && date.isBefore(endDatePaymob);
+        })
+        .map((p) => {
+          const user = users.find((x) => x.id === p.userId) as User;
+          return { ...p, name: user?.name, email: user?.email };
+        }),
+    [paypalPayments, users, startDatePaymob, endDatePaymob]
   );
 
   const paypalColumns = [
@@ -1469,6 +1482,44 @@ export default function PaymentRecord() {
                 {renderTable(table as Table<Payment>)}
               </Tab.Panel>
               <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide flex flex-col gap-8">
+                <div
+                  className={clsx(
+                    "grid grid-cols-1 md:grid-cols-2 gap-8 w-full",
+                    user.type !== "corporate" && "lg:grid-cols-3"
+                  )}
+                >
+                  <div className="flex flex-col gap-3 w-full">
+                    <label className="font-normal text-base text-mti-gray-dim">
+                      Date
+                    </label>
+                    <ReactDatePicker
+                      dateFormat="dd/MM/yyyy"
+                      className="px-4 py-6 w-full text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
+                      selected={startDatePaymob}
+                      startDate={startDatePaymob}
+                      endDate={endDatePaymob}
+                      selectsRange
+                      showMonthDropdown
+                      filterDate={(date: Date) =>
+                        moment(date).isSameOrBefore(moment(new Date()))
+                      }
+                      onChange={([initialDate, finalDate]: [Date, Date]) => {
+                        setStartDatePaymob(
+                          initialDate ?? moment("01/01/2023").toDate()
+                        );
+                        if (finalDate) {
+                          // basicly selecting a final day works as if I'm selecting the first
+                          // minute of that day. this way it covers the whole day
+                          setEndDatePaymob(
+                            moment(finalDate).endOf("day").toDate()
+                          );
+                          return;
+                        }
+                        setEndDatePaymob(null);
+                      }}
+                    />
+                  </div>
+                </div>
                 {renderSearch()}
                 {renderTable(paypalTable as Table<PaypalPaymentWithUserData>)}
               </Tab.Panel>