Added search text to Paypal payments

Updated CSV Downlaod
Reordered the UI of the page

src/pages/payment-record.tsx

@@ -37,7 +37,7 @@ import PaymentAssetManager from "@/components/PaymentAssetManager";
 import { toFixedNumber } from "@/utils/number";
 import { CSVLink } from "react-csv";
 import { Tab } from "@headlessui/react";
-
+import { useListSearch } from "@/hooks/useListSearch";
 export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
   const user = req.session.user;
 
@@ -69,7 +69,7 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
 }, sessionOptions);
 
 const columnHelper = createColumnHelper<Payment>();
-const paypalColumnHelper = createColumnHelper<PaypalPayment>();
+const paypalColumnHelper = createColumnHelper<PaypalPaymentWithUserData>();
 
 const PaymentCreator = ({
   onClose,
@@ -348,7 +348,7 @@ const IS_FILE_SUBMITTED_OPTIONS = [
   },
 ];
 
-const CSV_WHITELISTED_KEYS = [
+const CSV_PAYMENTS_WHITELISTED_KEYS = [
   "corporateId",
   "corporate",
   "date",
@@ -359,12 +359,28 @@ const CSV_WHITELISTED_KEYS = [
   "isPaid",
 ];
 
+const CSV_PAYPAL_WHITELISTED_KEYS = [
+  "orderId",
+  "status",
+  "name",
+  "email",
+  "value",
+  "createdAt",
+  "subscriptionExpirationDate",
+];
+
 interface SimpleCSVColumn {
   key: string;
   label: string;
   index: number;
 }
 
+interface PaypalPaymentWithUserData extends PaypalPayment {
+  name: string;
+  email: string;
+}
+
+const paypalFilterRows = [["email"], ["name"]];
 export default function PaymentRecord() {
   const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
   const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
@@ -407,6 +423,8 @@ export default function PaymentRecord() {
     });
   }, [originalPayments, startDate, endDate]);
 
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
   useEffect(() => {
     setDisplayPayments(
       filters
@@ -839,6 +857,15 @@ export default function PaymentRecord() {
     getCoreRowModel: getCoreRowModel(),
   });
 
+  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]
+  );
+
   const paypalColumns = [
     paypalColumnHelper.accessor("orderId", {
       header: "Order ID",
@@ -856,24 +883,20 @@ export default function PaymentRecord() {
         return <span>{value}</span>;
       },
     }),
-    paypalColumnHelper.accessor("userId", {
+    paypalColumnHelper.accessor("name", {
       header: "User Name",
       id: "name",
       cell: (info) => {
-        const { value } = columHelperValue("userId", info);
+        const { value } = columHelperValue(info.column.id, info);
-
+        return <span>{value}</span>;
-        const user = users.find((x) => x.id === value) as User;
-        return <span>{user?.name}</span>;
       },
     }),
-    paypalColumnHelper.accessor("userId", {
+    paypalColumnHelper.accessor("email", {
       header: "Email",
       id: "email",
       cell: (info) => {
-        const { value } = columHelperValue("userId", info);
+        const { value } = columHelperValue(info.column.id, info);
-
+        return <span>{value}</span>;
-        const user = users.find((x) => x.id === value) as User;
-        return <span>{user?.email}</span>;
       },
     }),
     paypalColumnHelper.accessor("value", {
@@ -906,8 +929,13 @@ export default function PaymentRecord() {
     }),
   ];
 
+  const { rows: filteredRows, renderSearch } = useListSearch(
+    paypalFilterRows,
+    updatedPaypalPayments
+  );
+
   const paypalTable = useReactTable({
-    data: paypalPayments,
+    data: filteredRows,
     columns: paypalColumns,
     getCoreRowModel: getCoreRowModel(),
   });
@@ -967,11 +995,18 @@ export default function PaymentRecord() {
   };
 
   const getCSVData = () => {
-    const columns = table
+    const tables = [table, paypalTable];
+    const whitelists = [
+      CSV_PAYMENTS_WHITELISTED_KEYS,
+      CSV_PAYPAL_WHITELISTED_KEYS,
+    ];
+    const currentTable = tables[selectedIndex];
+    const whitelist = whitelists[selectedIndex];
+    const columns = currentTable
       .getHeaderGroups()
       .reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
         const whitelistedColumns = group.headers.filter((header) =>
-          CSV_WHITELISTED_KEYS.includes(header.id)
+        whitelist.includes(header.id)
         );
 
         const data = whitelistedColumns.map((data) => ({
@@ -982,7 +1017,7 @@ export default function PaymentRecord() {
         return [...accm, ...data];
       }, []);
 
-    const { rows } = table.getRowModel();
+    const { rows } = currentTable.getRowModel();
 
     const finalColumns = [
       ...columns,
@@ -1045,6 +1080,7 @@ export default function PaymentRecord() {
       </tbody>
     </table>
   );
+
   return (
     <>
       <Head>
@@ -1099,6 +1135,39 @@ export default function PaymentRecord() {
               )}
             </div>
           </div>
+          <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
+            <Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
+              <Tab
+                className={({ selected }) =>
+                  clsx(
+                    "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+                    "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+                    "transition duration-300 ease-in-out",
+                    selected
+                      ? "bg-white shadow"
+                      : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
+                  )
+                }
+              >
+                Payments
+              </Tab>
+              <Tab
+                className={({ selected }) =>
+                  clsx(
+                    "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+                    "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+                    "transition duration-300 ease-in-out",
+                    selected
+                      ? "bg-white shadow"
+                      : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
+                  )
+                }
+              >
+                Paypal
+              </Tab>
+            </Tab.List>
+            <Tab.Panels>
+              <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide gap-8 flex flex-col gap-8">
                 <div
                   className={clsx(
                     "grid grid-cols-1 md:grid-cols-2 gap-8 w-full",
@@ -1117,7 +1186,9 @@ export default function PaymentRecord() {
                           "!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed"
                       )}
                       options={(
-                  users.filter((u) => u.type === "corporate") as CorporateUser[]
+                        users.filter(
+                          (u) => u.type === "corporate"
+                        ) as CorporateUser[]
                       ).map((user) => ({
                         value: user.id,
                         meta: user,
@@ -1132,8 +1203,8 @@ export default function PaymentRecord() {
                               value: user.id,
                               meta: user,
                               label: `${
-                          user.corporateInformation?.companyInformation?.name ||
+                                user.corporateInformation?.companyInformation
-                          user.name
+                                  ?.name || user.name
                               } - ${user.email}`,
                             }
                           : undefined
@@ -1196,7 +1267,9 @@ export default function PaymentRecord() {
                             : undefined
                         }
                         onChange={(value) =>
-                    setAgent(value !== null ? (value as any).meta : undefined)
+                          setAgent(
+                            value !== null ? (value as any).meta : undefined
+                          )
                         }
                         menuPortalTarget={document?.body}
                         styles={{
@@ -1231,7 +1304,9 @@ export default function PaymentRecord() {
                       isClearable
                       className={clsx(
                         "px-4 py-4 w-full text-sm 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",
-                  user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white"
+                        user.type === "agent"
+                          ? "bg-mti-gray-platinum/40"
+                          : "bg-white"
                       )}
                       options={IS_PAID_OPTIONS}
                       value={IS_PAID_OPTIONS.find((e) => e.value === paid)}
@@ -1279,7 +1354,9 @@ export default function PaymentRecord() {
                         moment(date).isSameOrBefore(moment(new Date()))
                       }
                       onChange={([initialDate, finalDate]: [Date, Date]) => {
-                  setStartDate(initialDate ?? moment("01/01/2023").toDate());
+                        setStartDate(
+                          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
@@ -1375,43 +1452,11 @@ export default function PaymentRecord() {
                     />
                   </div>
                 </div>
-          <Tab.Group>
-            <Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
-              <Tab
-                className={({ selected }) =>
-                  clsx(
-                    "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-                    "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-                    "transition duration-300 ease-in-out",
-                    selected
-                      ? "bg-white shadow"
-                      : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
-                  )
-                }
-              >
-                Payments
-              </Tab>
-              <Tab
-                className={({ selected }) =>
-                  clsx(
-                    "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
-                    "ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
-                    "transition duration-300 ease-in-out",
-                    selected
-                      ? "bg-white shadow"
-                      : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
-                  )
-                }
-              >
-                Paypal
-              </Tab>
-            </Tab.List>
-            <Tab.Panels className="mt-2">
-              <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
                 {renderTable(table as Table<Payment>)}
               </Tab.Panel>
-              <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+              <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide flex flex-col gap-8">
-                {renderTable(paypalTable as Table<PaypalPayment>)}
+                {renderSearch()}
+                {renderTable(paypalTable as Table<PaypalPaymentWithUserData>)}
               </Tab.Panel>
             </Tab.Panels>
           </Tab.Group>