Disabled the editing of the country manager of a corporate from the payment record

src/components/UserCard.tsx

@@ -40,6 +40,9 @@ interface Props {
   onViewTeachers?: () => void;
   onViewCorporate?: () => void;
   disabled?: boolean;
+  disabledFields?: {
+    countryManager?: boolean;
+  };
 }
 
 const USER_STATUS_OPTIONS = [
@@ -75,6 +78,7 @@ const UserCard = ({
   onViewTeachers,
   onViewCorporate,
   disabled = false,
+  disabledFields = {},
 }: Props) => {
   const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(
     user.subscriptionExpirationDate,
@@ -359,7 +363,8 @@ const UserCard = ({
                 <Select
                   className={clsx(
                     "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-                    !["developer", "admin"].includes(loggedInUser.type) &&
+                    (!["developer", "admin"].includes(loggedInUser.type) ||
+                      disabledFields.countryManager) &&
                       "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
                   )}
                   options={[
@@ -400,7 +405,8 @@ const UserCard = ({
                   }}
                   // editing country manager should only be available for dev/admin
                   isDisabled={
-                    !["developer", "admin"].includes(loggedInUser.type)
+                    !["developer", "admin"].includes(loggedInUser.type) ||
+                    disabledFields.countryManager
                   }
                 />
               )}

src/pages/payment-record.tsx

@@ -9,7 +9,15 @@ import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import usePayments from "@/hooks/usePayments";
 import usePaypalPayments from "@/hooks/usePaypalPayments";
 import { Payment, PaypalPayment } from "@/interfaces/paypal";
-import {CellContext, createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, Table, useReactTable} from "@tanstack/react-table";
+import {
+  CellContext,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  HeaderGroup,
+  Table,
+  useReactTable,
+} from "@tanstack/react-table";
 import { CURRENCIES } from "@/resources/paypal";
 import { BsTrash } from "react-icons/bs";
 import axios from "axios";
@@ -42,7 +50,10 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
     };
   }
 
-	if (shouldRedirectHome(user) || !["admin", "developer", "agent", "corporate"].includes(user.type)) {
+  if (
+    shouldRedirectHome(user) ||
+    !["admin", "developer", "agent", "corporate"].includes(user.type)
+  ) {
     return {
       redirect: {
         destination: "/",
@@ -59,7 +70,15 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 const columnHelper = createColumnHelper<Payment>();
 const paypalColumnHelper = createColumnHelper<PaypalPaymentWithUserData>();
 
-const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () => void; reload: () => void; showComission: boolean}) => {
+const PaymentCreator = ({
+  onClose,
+  reload,
+  showComission = false,
+}: {
+  onClose: () => void;
+  reload: () => void;
+  showComission: boolean;
+}) => {
   const [corporate, setCorporate] = useState<CorporateUser>();
   const [date, setDate] = useState<Date>(new Date());
 
@@ -71,7 +90,9 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 
   const referralAgent = useMemo(() => {
     if (corporate?.corporateInformation?.referralAgent) {
-			return users.find((u) => u.id === corporate.corporateInformation.referralAgent);
+      return users.find(
+        (u) => u.id === corporate.corporateInformation.referralAgent,
+      );
     }
 
     return undefined;
@@ -104,16 +125,22 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
       <h1 className="text-2xl font-semibold">New Payment</h1>
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-3">
-					<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Corporate account *
+          </label>
           <Select
             className="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 bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
-						options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
+            options={(
+              users.filter((u) => u.type === "corporate") as CorporateUser[]
+            ).map((user) => ({
               value: user.id,
               meta: user,
               label: `${user.corporateInformation?.companyInformation?.name || user.name} - ${user.email}`,
             }))}
             defaultValue={{ value: "undefined", label: "Select an account" }}
-						onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
+            onChange={(value) =>
+              setCorporate((value as any)?.meta ?? undefined)
+            }
             menuPortalTarget={document?.body}
             styles={{
               menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -128,7 +155,11 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
               }),
               option: (styles, state) => ({
                 ...styles,
-								backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                backgroundColor: state.isFocused
+                  ? "#D5D9F0"
+                  : state.isSelected
+                    ? "#7872BF"
+                    : "white",
                 color: state.isFocused ? "black" : styles.color,
               }),
             }}
@@ -136,9 +167,19 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
         </div>
 
         <div className="flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Price *</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Price *
+          </label>
           <div className="w-full grid grid-cols-5 gap-2">
-						<Input name="paymentValue" onChange={() => {}} type="number" value={price} defaultValue={0} className="col-span-3" disabled />
+            <Input
+              name="paymentValue"
+              onChange={() => {}}
+              type="number"
+              value={price}
+              defaultValue={0}
+              className="col-span-3"
+              disabled
+            />
             <Select
               className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-mti-gray-platinum/40 text-mti-gray-dim cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
               options={CURRENCIES.map(({ label, currency }) => ({
@@ -147,12 +188,16 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
               }))}
               defaultValue={{
                 value: currency || "EUR",
-								label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro",
+                label:
+                  CURRENCIES.find((c) => c.currency === currency)?.label ||
+                  "Euro",
               }}
               onChange={() => {}}
               value={{
                 value: currency || "EUR",
-								label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro",
+                label:
+                  CURRENCIES.find((c) => c.currency === currency)?.label ||
+                  "Euro",
               }}
               menuPortalTarget={document?.body}
               styles={{
@@ -168,7 +213,11 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
                 }),
                 option: (styles, state) => ({
                   ...styles,
-									backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                  backgroundColor: state.isFocused
+                    ? "#D5D9F0"
+                    : state.isSelected
+                      ? "#7872BF"
+                      : "white",
                   color: state.isFocused ? "black" : styles.color,
                 }),
               }}
@@ -179,11 +228,22 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
         {showComission && (
           <div className="flex gap-4 w-full">
             <div className="flex flex-col w-full gap-3">
-							<label className="font-normal text-base text-mti-gray-dim">Commission *</label>
+              <label className="font-normal text-base text-mti-gray-dim">
-							<Input name="commission" onChange={() => {}} type="number" defaultValue={0} value={commission} disabled />
+                Commission *
+              </label>
+              <Input
+                name="commission"
+                onChange={() => {}}
+                type="number"
+                defaultValue={0}
+                value={commission}
+                disabled
+              />
             </div>
             <div className="flex flex-col w-full gap-3">
-							<label className="font-normal text-base text-mti-gray-dim">Commission Value*</label>
+              <label className="font-normal text-base text-mti-gray-dim">
+                Commission Value*
+              </label>
               <Input
                 name="commissionValue"
                 value={`${(commission! / 100) * price!} ${CURRENCIES.find((c) => c.currency === currency)?.label}`}
@@ -198,7 +258,9 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 
         <div className="flex gap-4">
           <div className="flex flex-col w-full gap-3">
-						<label className="font-normal text-base text-mti-gray-dim">Date *</label>
+            <label className="font-normal text-base text-mti-gray-dim">
+              Date *
+            </label>
             <ReactDatePicker
               className={clsx(
                 "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
@@ -212,10 +274,16 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
           </div>
 
           <div className="flex flex-col w-full gap-3">
-						<label className="font-normal text-base text-mti-gray-dim">Country Manager *</label>
+            <label className="font-normal text-base text-mti-gray-dim">
+              Country Manager *
+            </label>
             <Input
               name="referralAgent"
-							value={referralAgent ? `${referralAgent.name} - ${referralAgent.email}` : "No country manager"}
+              value={
+                referralAgent
+                  ? `${referralAgent.name} - ${referralAgent.email}`
+                  : "No country manager"
+              }
               onChange={() => null}
               type="text"
               defaultValue={"No country manager"}
@@ -224,10 +292,19 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
           </div>
         </div>
         <div className="flex w-full justify-end items-center gap-8 mt-4">
-					<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
+          <Button
+            variant="outline"
+            color="red"
+            className="w-full max-w-[200px]"
+            onClick={onClose}
+          >
             Cancel
           </Button>
-					<Button className="w-full max-w-[200px]" onClick={submit} disabled={!corporate || !price}>
+          <Button
+            className="w-full max-w-[200px]"
+            onClick={submit}
+            disabled={!corporate || !price}
+          >
             Submit
           </Button>
         </div>
@@ -266,9 +343,26 @@ const IS_FILE_SUBMITTED_OPTIONS = [
   },
 ];
 
-const CSV_PAYMENTS_WHITELISTED_KEYS = ["corporateId", "corporate", "date", "amount", "agent", "agentCommission", "agentValue", "isPaid"];
+const CSV_PAYMENTS_WHITELISTED_KEYS = [
+  "corporateId",
+  "corporate",
+  "date",
+  "amount",
+  "agent",
+  "agentCommission",
+  "agentValue",
+  "isPaid",
+];
 
-const CSV_PAYPAL_WHITELISTED_KEYS = ["orderId", "status", "name", "email", "value", "createdAt", "subscriptionExpirationDate"];
+const CSV_PAYPAL_WHITELISTED_KEYS = [
+  "orderId",
+  "status",
+  "name",
+  "email",
+  "value",
+  "createdAt",
+  "subscriptionExpirationDate",
+];
 
 interface SimpleCSVColumn {
   key: string;
@@ -286,7 +380,9 @@ export default function PaymentRecord() {
   const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
   const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
   const [isCreatingPayment, setIsCreatingPayment] = useState(false);
-	const [filters, setFilters] = useState<{filter: (p: Payment) => boolean; id: string}[]>([]);
+  const [filters, setFilters] = useState<
+    { filter: (p: Payment) => boolean; id: string }[]
+  >([]);
   const [displayPayments, setDisplayPayments] = useState<Payment[]>([]);
 
   const [corporate, setCorporate] = useState<User>();
@@ -295,12 +391,21 @@ export default function PaymentRecord() {
   const { user } = useUser({ redirectTo: "/login" });
   const { users, reload: reloadUsers } = useUsers();
   const { payments: originalPayments, reload: reloadPayment } = usePayments();
-	const {payments: paypalPayments, reload: reloadPaypalPayment} = usePaypalPayments();
+  const { payments: paypalPayments, reload: reloadPaypalPayment } =
-	const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
+    usePaypalPayments();
-	const [endDate, setEndDate] = useState<Date | null>(moment().endOf("day").toDate());
+  const [startDate, setStartDate] = useState<Date | null>(
+    moment("01/01/2023").toDate(),
+  );
+  const [endDate, setEndDate] = 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);
+  const [commissionTransfer, setCommissionTransfer] = useState<Boolean | null>(
-	const [corporateTransfer, setCorporateTransfer] = useState<Boolean | null>(IS_FILE_SUBMITTED_OPTIONS[0].value);
+    IS_FILE_SUBMITTED_OPTIONS[0].value,
+  );
+  const [corporateTransfer, setCorporateTransfer] = useState<Boolean | null>(
+    IS_FILE_SUBMITTED_OPTIONS[0].value,
+  );
   const reload = () => {
     reloadUsers();
     reloadPayment();
@@ -361,7 +466,9 @@ export default function PaymentRecord() {
   useEffect(() => {
     setFilters((prev) => [
       ...prev.filter((x) => x.id !== "paid"),
-			...(typeof paid !== "boolean" ? [] : [{id: "paid", filter: (p: Payment) => p.isPaid === paid}]),
+      ...(typeof paid !== "boolean"
+        ? []
+        : [{ id: "paid", filter: (p: Payment) => p.isPaid === paid }]),
     ]);
   }, [paid]);
 
@@ -373,7 +480,8 @@ export default function PaymentRecord() {
         : [
             {
               id: "commissionTransfer",
-							filter: (p: Payment) => !p.commissionTransfer === commissionTransfer,
+              filter: (p: Payment) =>
+                !p.commissionTransfer === commissionTransfer,
             },
           ]),
     ]);
@@ -387,7 +495,8 @@ export default function PaymentRecord() {
         : [
             {
               id: "corporateTransfer",
-							filter: (p: Payment) => !p.corporateTransfer === corporateTransfer,
+              filter: (p: Payment) =>
+                !p.corporateTransfer === corporateTransfer,
             },
           ]),
     ]);
@@ -418,7 +527,9 @@ export default function PaymentRecord() {
         }
 
         if (reason.response.status === 403) {
-					toast.error("You do not have permission to delete an approved payment record!");
+          toast.error(
+            "You do not have permission to delete an approved payment record!",
+          );
           return;
         }
 
@@ -429,7 +540,8 @@ export default function PaymentRecord() {
 
   const getFileAssetsColumns = () => {
     if (user) {
-			const containerClassName = "flex gap-2 text-mti-purple-light hover:text-mti-purple-dark ease-in-out duration-300 cursor-pointer";
+      const containerClassName =
+        "flex gap-2 text-mti-purple-light hover:text-mti-purple-dark ease-in-out duration-300 cursor-pointer";
       switch (user.type) {
         case "corporate":
           return [
@@ -548,7 +660,9 @@ export default function PaymentRecord() {
         return { value: `${value}%` };
       }
       case "agent": {
-				const user = users.find((x) => x.id === info.row.original.agent) as AgentUser;
+        const user = users.find(
+          (x) => x.id === info.row.original.agent,
+        ) as AgentUser;
         return {
           value: user?.name,
           user,
@@ -569,7 +683,8 @@ export default function PaymentRecord() {
         const user = users.find((x) => x.id === specificValue) as CorporateUser;
         return {
           user,
-					value: user?.corporateInformation.companyInformation.name || user?.name,
+          value:
+            user?.corporateInformation.companyInformation.name || user?.name,
         };
       }
       case "currency": {
@@ -599,7 +714,8 @@ export default function PaymentRecord() {
                 className={clsx(
                   "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
                 )}
-								onClick={() => setSelectedAgentUser(user)}>
+                onClick={() => setSelectedAgentUser(user)}
+              >
                 {value}
               </div>
             );
@@ -618,7 +734,9 @@ export default function PaymentRecord() {
           id: "agentValue",
           cell: (info) => {
             const { value } = columHelperValue(info.column.id, info);
-						const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
+            const currency = CURRENCIES.find(
+              (x) => x.currency === info.row.original.currency,
+            )?.label;
             const finalValue = `${value} ${currency}`;
             return <span>{finalValue}</span>;
           },
@@ -646,7 +764,8 @@ export default function PaymentRecord() {
             className={clsx(
               "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
             )}
-						onClick={() => setSelectedCorporateUser(user)}>
+            onClick={() => setSelectedCorporateUser(user)}
+          >
             {value}
           </div>
         );
@@ -665,7 +784,9 @@ export default function PaymentRecord() {
       id: "amount",
       cell: (info) => {
         const { value } = columHelperValue(info.column.id, info);
-				const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
+        const currency = CURRENCIES.find(
+          (x) => x.currency === info.row.original.currency,
+        )?.label;
         const finalValue = `${value} ${currency}`;
         return <span>{finalValue}</span>;
       },
@@ -681,13 +802,23 @@ export default function PaymentRecord() {
           <Checkbox
             isChecked={value}
             onChange={(e) => {
-							if (user?.type === agent || user?.type === "corporate" || value) return null;
+              if (user?.type === agent || user?.type === "corporate" || value)
-							if (!info.row.original.commissionTransfer || !info.row.original.corporateTransfer)
+                return null;
-								return alert("All files need to be uploaded to consider it paid!");
+              if (
-							if (!confirm(`Are you sure you want to consider this payment paid?`)) return null;
+                !info.row.original.commissionTransfer ||
+                !info.row.original.corporateTransfer
+              )
+                return alert(
+                  "All files need to be uploaded to consider it paid!",
+                );
+              if (
+                !confirm(`Are you sure you want to consider this payment paid?`)
+              )
+                return null;
 
               return updatePayment(info.row.original, "isPaid", e);
-						}}>
+            }}
+          >
             <span></span>
           </Checkbox>
         );
@@ -701,7 +832,11 @@ export default function PaymentRecord() {
         return (
           <div className="flex gap-4">
             {user?.type !== "agent" && (
-							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deletePayment(row.original.id)}>
+              <div
+                data-tip="Delete"
+                className="cursor-pointer tooltip"
+                onClick={() => deletePayment(row.original.id)}
+              >
                 <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
               </div>
             )}
@@ -764,7 +899,9 @@ export default function PaymentRecord() {
       id: "value",
       cell: (info) => {
         const { value } = columHelperValue(info.column.id, info);
-				const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
+        const currency = CURRENCIES.find(
+          (x) => x.currency === info.row.original.currency,
+        )?.label;
         const finalValue = `${value} ${currency}`;
         return <span>{finalValue}</span>;
       },
@@ -787,7 +924,10 @@ export default function PaymentRecord() {
     }),
   ];
 
-	const {rows: filteredRows, renderSearch} = useListSearch(paypalFilterRows, updatedPaypalPayments);
+  const { rows: filteredRows, renderSearch } = useListSearch(
+    paypalFilterRows,
+    updatedPaypalPayments,
+  );
 
   const paypalTable = useReactTable({
     data: filteredRows,
@@ -798,7 +938,10 @@ export default function PaymentRecord() {
     if (user) {
       if (selectedCorporateUser) {
         return (
-					<Modal isOpen={!!selectedCorporateUser} onClose={() => setSelectedCorporateUser(undefined)}>
+          <Modal
+            isOpen={!!selectedCorporateUser}
+            onClose={() => setSelectedCorporateUser(undefined)}
+          >
             <>
               {selectedCorporateUser && (
                 <div className="w-full flex flex-col gap-8">
@@ -810,6 +953,7 @@ export default function PaymentRecord() {
                     }}
                     user={selectedCorporateUser}
                     disabled
+                    disabledFields={{ countryManager: true }}
                   />
                 </div>
               )}
@@ -820,7 +964,10 @@ export default function PaymentRecord() {
 
       if (selectedAgentUser) {
         return (
-					<Modal isOpen={!!selectedAgentUser} onClose={() => setSelectedAgentUser(undefined)}>
+          <Modal
+            isOpen={!!selectedAgentUser}
+            onClose={() => setSelectedAgentUser(undefined)}
+          >
             <>
               {selectedAgentUser && (
                 <div className="w-full flex flex-col gap-8">
@@ -845,11 +992,17 @@ export default function PaymentRecord() {
 
   const getCSVData = () => {
     const tables = [table, paypalTable];
-		const whitelists = [CSV_PAYMENTS_WHITELISTED_KEYS, CSV_PAYPAL_WHITELISTED_KEYS];
+    const whitelists = [
+      CSV_PAYMENTS_WHITELISTED_KEYS,
+      CSV_PAYPAL_WHITELISTED_KEYS,
+    ];
     const currentTable = tables[selectedIndex];
     const whitelist = whitelists[selectedIndex];
-		const columns = (currentTable.getHeaderGroups() as any[]).reduce((accm: any[], group: any) => {
+    const columns = (currentTable.getHeaderGroups() as any[]).reduce(
-			const whitelistedColumns = group.headers.filter((header: any) => whitelist.includes(header.id));
+      (accm: any[], group: any) => {
+        const whitelistedColumns = group.headers.filter((header: any) =>
+          whitelist.includes(header.id),
+        );
 
         const data = whitelistedColumns.map((data: any) => ({
           key: data.column.columnDef.id,
@@ -857,7 +1010,9 @@ export default function PaymentRecord() {
         })) as SimpleCSVColumn[];
 
         return [...accm, ...data];
-		}, []);
+      },
+      [],
+    );
 
     const { rows } = currentTable.getRowModel();
 
@@ -895,7 +1050,12 @@ export default function PaymentRecord() {
           <tr key={headerGroup.id}>
             {headerGroup.headers.map((header) => (
               <th className="p-4 text-left" key={header.id}>
-								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
               </th>
             ))}
           </tr>
@@ -903,7 +1063,10 @@ export default function PaymentRecord() {
       </thead>
       <tbody className="px-2">
         {table.getRowModel().rows.map((row) => (
-					<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+          <tr
+            className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
+            key={row.id}
+          >
             {row.getVisibleCells().map((cell) => (
               <td className="px-4 py-2" key={cell.id}>
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -930,7 +1093,10 @@ export default function PaymentRecord() {
       {user && (
         <Layout user={user} className="gap-6">
           {getUserModal()}
-					<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
+          <Modal
+            isOpen={isCreatingPayment}
+            onClose={() => setIsCreatingPayment(false)}
+          >
             <PaymentCreator
               onClose={() => setIsCreatingPayment(false)}
               reload={reload}
@@ -941,15 +1107,26 @@ export default function PaymentRecord() {
           <div className="w-full flex flex-end justify-between p-2">
             <h1 className="text-2xl font-semibold">Payment Record</h1>
             <div className="flex justify-end gap-2">
-							{(user.type === "developer" || user.type === "admin" || user.type === "agent" || user.type === "corporate") && (
+              {(user.type === "developer" ||
+                user.type === "admin" ||
+                user.type === "agent" ||
+                user.type === "corporate") && (
                 <Button className="max-w-[200px]" variant="outline">
-									<CSVLink data={csvRows} headers={csvColumns} filename="payment-records.csv">
+                  <CSVLink
+                    data={csvRows}
+                    headers={csvColumns}
+                    filename="payment-records.csv"
+                  >
                     Download CSV
                   </CSVLink>
                 </Button>
               )}
               {(user.type === "developer" || user.type === "admin") && (
-								<Button className="max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
+                <Button
+                  className="max-w-[200px]"
+                  variant="outline"
+                  onClick={() => setIsCreatingPayment(true)}
+                >
                   New Payment
                 </Button>
               )}
@@ -963,9 +1140,12 @@ export default function PaymentRecord() {
                     "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",
+                    selected
+                      ? "bg-white shadow"
+                      : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
                   )
-								}>
+                }
+              >
                 Payments
               </Tab>
               {["admin", "developer"].includes(user.type) && (
@@ -975,25 +1155,40 @@ export default function PaymentRecord() {
                       "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",
+                      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">
-								<div className={clsx("grid grid-cols-1 md:grid-cols-2 gap-8 w-full", user.type !== "corporate" && "lg:grid-cols-3")}>
+                <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">Corporate account *</label>
+                    <label className="font-normal text-base text-mti-gray-dim">
+                      Corporate account *
+                    </label>
                     <Select
                       isClearable={user.type !== "corporate"}
                       className={clsx(
                         "px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-												user.type === "corporate" && "!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed",
+                        user.type === "corporate" &&
+                          "!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed",
                       )}
-											options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
+                      options={(
+                        users.filter(
+                          (u) => u.type === "corporate",
+                        ) as CorporateUser[]
+                      ).map((user) => ({
                         value: user.id,
                         meta: user,
                         label: `${user.corporateInformation?.companyInformation?.name || user.name} - ${user.email}`,
@@ -1010,7 +1205,9 @@ export default function PaymentRecord() {
                           : undefined
                       }
                       isDisabled={user.type === "corporate"}
-											onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
+                      onChange={(value) =>
+                        setCorporate((value as any)?.meta ?? undefined)
+                      }
                       menuPortalTarget={document?.body}
                       styles={{
                         menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -1025,7 +1222,11 @@ export default function PaymentRecord() {
                         }),
                         option: (styles, state) => ({
                           ...styles,
-													backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                          backgroundColor: state.isFocused
+                            ? "#D5D9F0"
+                            : state.isSelected
+                              ? "#7872BF"
+                              : "white",
                           color: state.isFocused ? "black" : styles.color,
                         }),
                       }}
@@ -1033,15 +1234,21 @@ export default function PaymentRecord() {
                   </div>
                   {user.type !== "corporate" && (
                     <div className="flex flex-col gap-3 w-full">
-											<label className="font-normal text-base text-mti-gray-dim">Country manager *</label>
+                      <label className="font-normal text-base text-mti-gray-dim">
+                        Country manager *
+                      </label>
                       <Select
                         isClearable
                         isDisabled={user.type === "agent"}
                         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={(users.filter((u) => u.type === "agent") as AgentUser[]).map((user) => ({
+                        options={(
+                          users.filter((u) => u.type === "agent") as AgentUser[]
+                        ).map((user) => ({
                           value: user.id,
                           meta: user,
                           label: `${user.name} - ${user.email}`,
@@ -1054,7 +1261,11 @@ export default function PaymentRecord() {
                               }
                             : undefined
                         }
-												onChange={(value) => setAgent(value !== null ? (value as any).meta : undefined)}
+                        onChange={(value) =>
+                          setAgent(
+                            value !== null ? (value as any).meta : undefined,
+                          )
+                        }
                         menuPortalTarget={document?.body}
                         styles={{
                           menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -1069,7 +1280,11 @@ export default function PaymentRecord() {
                           }),
                           option: (styles, state) => ({
                             ...styles,
-														backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                            backgroundColor: state.isFocused
+                              ? "#D5D9F0"
+                              : state.isSelected
+                                ? "#7872BF"
+                                : "white",
                             color: state.isFocused ? "black" : styles.color,
                           }),
                         }}
@@ -1077,12 +1292,16 @@ export default function PaymentRecord() {
                     </div>
                   )}
                   <div className="flex flex-col gap-3 w-full">
-										<label className="font-normal text-base text-mti-gray-dim">Paid</label>
+                    <label className="font-normal text-base text-mti-gray-dim">
+                      Paid
+                    </label>
                     <Select
                       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)}
@@ -1104,14 +1323,20 @@ export default function PaymentRecord() {
                         }),
                         option: (styles, state) => ({
                           ...styles,
-													backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                          backgroundColor: state.isFocused
+                            ? "#D5D9F0"
+                            : state.isSelected
+                              ? "#7872BF"
+                              : "white",
                           color: state.isFocused ? "black" : styles.color,
                         }),
                       }}
                     />
                   </div>
                   <div className="flex flex-col gap-3 w-full">
-										<label className="font-normal text-base text-mti-gray-dim">Date</label>
+                    <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"
@@ -1120,9 +1345,13 @@ export default function PaymentRecord() {
                       endDate={endDate}
                       selectsRange
                       showMonthDropdown
-											filterDate={(date: Date) => moment(date).isSameOrBefore(moment(new Date()))}
+                      filterDate={(date: Date) =>
+                        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
@@ -1135,14 +1364,18 @@ export default function PaymentRecord() {
                   </div>
                   {user.type !== "corporate" && (
                     <div className="flex flex-col gap-3 w-full">
-											<label className="font-normal text-base text-mti-gray-dim">Commission transfer</label>
+                      <label className="font-normal text-base text-mti-gray-dim">
+                        Commission transfer
+                      </label>
                       <Select
                         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",
                         )}
                         options={IS_FILE_SUBMITTED_OPTIONS}
-												value={IS_FILE_SUBMITTED_OPTIONS.find((e) => e.value === commissionTransfer)}
+                        value={IS_FILE_SUBMITTED_OPTIONS.find(
+                          (e) => e.value === commissionTransfer,
+                        )}
                         onChange={(value) => {
                           if (value) return setCommissionTransfer(value.value);
                           setCommissionTransfer(null);
@@ -1161,7 +1394,11 @@ export default function PaymentRecord() {
                           }),
                           option: (styles, state) => ({
                             ...styles,
-														backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                            backgroundColor: state.isFocused
+                              ? "#D5D9F0"
+                              : state.isSelected
+                                ? "#7872BF"
+                                : "white",
                             color: state.isFocused ? "black" : styles.color,
                           }),
                         }}
@@ -1169,14 +1406,18 @@ export default function PaymentRecord() {
                     </div>
                   )}
                   <div className="flex flex-col gap-3 w-full">
-										<label className="font-normal text-base text-mti-gray-dim">Corporate transfer</label>
+                    <label className="font-normal text-base text-mti-gray-dim">
+                      Corporate transfer
+                    </label>
                     <Select
                       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",
                       )}
                       options={IS_FILE_SUBMITTED_OPTIONS}
-											value={IS_FILE_SUBMITTED_OPTIONS.find((e) => e.value === corporateTransfer)}
+                      value={IS_FILE_SUBMITTED_OPTIONS.find(
+                        (e) => e.value === corporateTransfer,
+                      )}
                       onChange={(value) => {
                         if (value) return setCorporateTransfer(value.value);
                         setCorporateTransfer(null);
@@ -1195,7 +1436,11 @@ export default function PaymentRecord() {
                         }),
                         option: (styles, state) => ({
                           ...styles,
-													backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                          backgroundColor: state.isFocused
+                            ? "#D5D9F0"
+                            : state.isSelected
+                              ? "#7872BF"
+                              : "white",
                           color: state.isFocused ? "black" : styles.color,
                         }),
                       }}