@monarkmarkets/marketplace 1.0.0 → 1.0.1

package/dist/index.esm.js

@@ -0,0 +1,624 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useCallback, useMemo, useState, useEffect } from 'react';
+import { __awaiter, __generator } from 'tslib';
+import { Client } from '@monark-markets/api-client';
+
+var CompanyLogo = /*#__PURE__*/memo(function (_a) {
+  var logoURL = _a.logoURL,
+    name = _a.name;
+  if (logoURL) {
+    return jsx("img", {
+      src: logoURL,
+      alt: "".concat(name, " logo"),
+      className: "w-8 h-8 rounded-lg object-cover"
+    });
+  }
+  return jsx("div", {
+    className: "w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center",
+    children: jsx("span", {
+      className: "text-gray-400 text-sm font-medium",
+      children: name.charAt(0)
+    })
+  });
+});
+CompanyLogo.displayName = 'CompanyLogo';
+
+/**
+ * TableRow component renders a row in the IoITable component.
+ * It includes columns for company details, total funding, last round,
+ * price per share, and an action button to indicate interest.
+ */
+var TableRow$1 = /*#__PURE__*/memo(function (_a) {
+  var _b, _c, _d;
+  var ColumnOne = _a.ColumnOne,
+    ColumnTwo = _a.ColumnTwo,
+    ColumnThree = _a.ColumnThree,
+    ColumnFour = _a.ColumnFour,
+    _e = _a.buttonText,
+    buttonText = _e === void 0 ? "" : _e,
+    investorId = _a.investorId;
+    _a.tableType;
+    var onButtonClick = _a.onButtonClick;
+  var handleButtonClick = useCallback(function (e) {
+    e.preventDefault();
+    onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(ColumnOne.preIPOCompany.id, investorId);
+  }, [ColumnOne.preIPOCompany.id, investorId, onButtonClick]);
+  return jsxs("tr", {
+    className: "hover:bg-gray-50 transition-colors",
+    role: "row",
+    children: [jsx("td", {
+      className: "py-4 px-4 border-b border-gray-100",
+      role: "cell",
+      children: jsxs("div", {
+        className: "flex items-center gap-3",
+        children: [jsx(CompanyLogo, {
+          logoURL: ColumnOne.preIPOCompany.logoURL,
+          name: ColumnOne.name
+        }), jsxs("div", {
+          className: "flex flex-col",
+          children: [jsx("span", {
+            className: "font-medium text-gray-900",
+            children: ColumnOne.name
+          }), jsx("span", {
+            className: "text-sm text-gray-500",
+            children: ColumnOne.preIPOCompany.country
+          })]
+        })]
+      })
+    }), jsx("td", {
+      className: "py-4 px-4 border-b border-gray-100",
+      role: "cell",
+      children: jsx("span", {
+        className: "font-medium text-gray-900",
+        children: (_b = ColumnTwo === null || ColumnTwo === void 0 ? void 0 : ColumnTwo(ColumnOne)) !== null && _b !== void 0 ? _b : "N/A"
+      })
+    }), jsx("td", {
+      className: "py-4 px-4 border-b border-gray-100",
+      role: "cell",
+      children: jsx("span", {
+        className: "font-medium text-gray-900",
+        children: (_c = ColumnThree === null || ColumnThree === void 0 ? void 0 : ColumnThree(ColumnOne)) !== null && _c !== void 0 ? _c : "N/A"
+      })
+    }), jsx("td", {
+      className: "py-4 px-4 border-b border-gray-100",
+      role: "cell",
+      children: jsx("span", {
+        className: "font-medium text-gray-900",
+        children: (_d = ColumnFour === null || ColumnFour === void 0 ? void 0 : ColumnFour(ColumnOne)) !== null && _d !== void 0 ? _d : "N/A"
+      })
+    }), jsx("td", {
+      className: "py-4 px-4 border-b border-gray-100",
+      role: "cell",
+      children: jsx("button", {
+        onClick: handleButtonClick,
+        className: "bg-custom-blue hover:bg-custom-blue-dark text-white font-medium py-2 px-4 rounded-lg shadow-md transition-all duration-200",
+        "aria-label": "".concat(buttonText, " for ").concat(ColumnOne.name),
+        children: buttonText
+      })
+    })]
+  });
+});
+TableRow$1.displayName = 'TableRow';
+
+/**
+ * Common TableHeader component that can be configured for different table types.
+ * It renders a header row with configurable column titles and styling.
+ *
+ * @param columns - Array of column configurations with titles and optional widths
+ */
+var TableHeaders = /*#__PURE__*/memo(function (_a) {
+  var columns = _a.columns;
+  return jsx("thead", {
+    children: jsx("tr", {
+      className: "bg-gray-50 border-b border-gray-200",
+      role: "row",
+      children: columns.map(function (column, index) {
+        return jsx("th", {
+          className: "py-3 px-4 text-left text-sm font-semibold text-gray-900 ".concat(column.width || ''),
+          scope: "col",
+          role: "columnheader",
+          children: column.title
+        }, "".concat(column.title, "-").concat(index));
+      })
+    })
+  });
+});
+TableHeaders.displayName = 'TableHeader';
+
+var NavigationButton = /*#__PURE__*/memo(function (_a) {
+  var onClick = _a.onClick,
+    disabled = _a.disabled,
+    direction = _a.direction;
+  return jsx("button", {
+    onClick: onClick,
+    disabled: disabled,
+    className: "p-2 rounded-lg text-gray-600 hover:bg-gray-100 disabled:opacity-50 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors",
+    "aria-label": "".concat(direction, " page"),
+    children: jsx("svg", {
+      className: "w-5 h-5",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: jsx("path", {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: direction === 'previous' ? "M15 19l-7-7 7-7" : "M9 5l7 7-7 7"
+      })
+    })
+  });
+});
+NavigationButton.displayName = 'NavigationButton';
+var PageButton = /*#__PURE__*/memo(function (_a) {
+  var page = _a.page,
+    isCurrentPage = _a.isCurrentPage,
+    onClick = _a.onClick;
+  return jsx("button", {
+    onClick: onClick,
+    disabled: isCurrentPage,
+    className: "w-10 h-10 rounded-lg text-sm font-medium transition-colors ".concat(isCurrentPage ? 'bg-custom-blue text-white' : 'text-gray-600 hover:bg-gray-100'),
+    "aria-label": "Go to page ".concat(page),
+    "aria-current": isCurrentPage ? 'page' : undefined,
+    children: page
+  });
+});
+PageButton.displayName = 'PageButton';
+/**
+ * Pagination component renders pagination controls for the IoITable component.
+ * It includes navigation buttons for previous and next pages, and page number buttons.
+ */
+var Pagination = /*#__PURE__*/memo(function (_a) {
+  var currentPage = _a.currentPage,
+    totalPages = _a.totalPages,
+    onPageChange = _a.onPageChange;
+  var handlePrevious = useCallback(function () {
+    onPageChange(currentPage - 1);
+  }, [currentPage, onPageChange]);
+  var handleNext = useCallback(function () {
+    onPageChange(currentPage + 1);
+  }, [currentPage, onPageChange]);
+  var pageNumbers = useMemo(function () {
+    var pages = [];
+    var showEllipsis = totalPages > 7;
+    if (showEllipsis) {
+      if (currentPage <= 4) {
+        for (var i = 1; i <= 5; i++) {
+          pages.push(i);
+        }
+        pages.push('ellipsis');
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - 3) {
+        pages.push(1);
+        pages.push('ellipsis');
+        for (var i = totalPages - 4; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push('ellipsis');
+        for (var i = currentPage - 1; i <= currentPage + 1; i++) {
+          pages.push(i);
+        }
+        pages.push('ellipsis');
+        pages.push(totalPages);
+      }
+    } else {
+      for (var i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    }
+    return pages;
+  }, [currentPage, totalPages]);
+  return jsxs("nav", {
+    role: "navigation",
+    "aria-label": "Pagination",
+    className: "flex items-center justify-center gap-1",
+    children: [jsx(NavigationButton, {
+      onClick: handlePrevious,
+      disabled: currentPage <= 1,
+      direction: "previous"
+    }), jsx("div", {
+      className: "flex items-center gap-1 mx-2",
+      children: pageNumbers.map(function (page, index) {
+        return page === 'ellipsis' ? jsx("span", {
+          className: "w-10 h-10 flex items-center justify-center text-gray-500",
+          "aria-hidden": "true",
+          children: "..."
+        }, "ellipsis-".concat(index)) : jsx(PageButton, {
+          page: page,
+          isCurrentPage: page === currentPage,
+          onClick: function () {
+            return onPageChange(page);
+          }
+        }, page);
+      })
+    }), jsx(NavigationButton, {
+      onClick: handleNext,
+      disabled: currentPage >= totalPages,
+      direction: "next"
+    })]
+  });
+});
+Pagination.displayName = 'Pagination';
+
+var formatLargeNumber = function (value) {
+  if (value >= 1000000000) {
+    return "$".concat((value / 1000000000).toFixed(1), "B");
+  } else if (value >= 1000000) {
+    return "$".concat((value / 1000000).toFixed(1), "M");
+  }
+  return "$".concat(value.toLocaleString());
+};
+var formatCurrency = function (value, decimals) {
+  if (decimals === void 0) {
+    decimals = 2;
+  }
+  if (value === undefined || value === null) return 'N/A';
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: decimals,
+    minimumFractionDigits: decimals
+  }).format(value);
+};
+
+var iotColumns = [{
+  title: 'Company',
+  width: 'w-1/3'
+}, {
+  title: 'Total Funding'
+}, {
+  title: 'Last Round'
+}, {
+  title: 'Last Round Price/Share'
+}, {
+  title: 'Indicate Interest'
+}];
+/**
+ * IoITable component displays a table of pre-IPO companies with pagination and loading states.
+ * It includes table headers, rows, and pagination controls.
+ */
+var IoITable = function (_a) {
+  var companies = _a.companies,
+    investorId = _a.investorId,
+    onButtonClick = _a.onButtonClick,
+    _b = _a.buttonText,
+    buttonText = _b === void 0 ? "Submit IOI" : _b,
+    currentPage = _a.currentPage,
+    totalPages = _a.totalPages,
+    onPageChange = _a.onPageChange,
+    _c = _a.isLoading,
+    isLoading = _c === void 0 ? false : _c;
+  var LoadingSpinner = function () {
+    return jsxs("svg", {
+      className: "animate-spin h-8 w-8 text-custom-blue",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      children: [jsx("circle", {
+        className: "opacity-25",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        strokeWidth: "4"
+      }), jsx("path", {
+        className: "opacity-75",
+        fill: "currentColor",
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      })]
+    });
+  };
+  if (!companies || companies.length === 0) {
+    return jsx("div", {
+      className: "bg-white rounded-lg shadow-sm p-8 text-center",
+      children: jsx("p", {
+        className: "text-gray-500",
+        children: "No companies available"
+      })
+    });
+  }
+  return jsxs("div", {
+    className: "space-y-4",
+    children: [jsxs("div", {
+      className: "relative",
+      children: [isLoading && jsx("div", {
+        className: "absolute inset-0 bg-white/50 flex items-center justify-center z-10",
+        children: jsx(LoadingSpinner, {})
+      }), jsx("div", {
+        className: "bg-white rounded-lg shadow-sm overflow-hidden",
+        children: jsxs("table", {
+          className: "w-full table-fixed",
+          children: [jsx(TableHeaders, {
+            columns: iotColumns
+          }), jsx("tbody", {
+            className: "relative",
+            children: companies.map(function (company) {
+              return jsx(TableRow$1, {
+                ColumnOne: {
+                  preIPOCompany: company,
+                  name: company.name || ''
+                },
+                ColumnTwo: function (company) {
+                  return formatLargeNumber(company.preIPOCompany.totalFunding || 0);
+                },
+                ColumnThree: function (company) {
+                  return company.preIPOCompany.lastFundingSeries ? "".concat(company.preIPOCompany.lastFundingSeries) : 'Unknown';
+                },
+                ColumnFour: function (company) {
+                  return company.preIPOCompany.lastSharePrice ? "$".concat(company.preIPOCompany.lastSharePrice.toFixed(2)) : 'Not Available';
+                },
+                buttonText: buttonText,
+                investorId: investorId,
+                tableType: "private",
+                onButtonClick: onButtonClick
+              }, company.id);
+            })
+          })]
+        })
+      })]
+    }), jsx(Pagination, {
+      currentPage: currentPage,
+      totalPages: totalPages,
+      onPageChange: onPageChange
+    })]
+  });
+};
+
+var PreIPOCompanyService = /** @class */function () {
+  function PreIPOCompanyService() {
+    this._client = new Client("/api");
+  }
+  PreIPOCompanyService.prototype.GetCompanyLogoAndCountry = function (preIPOCompanyId) {
+    return __awaiter(this, void 0, void 0, function () {
+      var company, error_1;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 2,, 3]);
+            return [4 /*yield*/, this._client.preIpoCompany(preIPOCompanyId)];
+          case 1:
+            company = _a.sent();
+            if (company) {
+              return [2 /*return*/, {
+                logoURL: company.logoURL || '',
+                location: company.country || 'Location not available'
+              }];
+            }
+            return [2 /*return*/, null];
+          case 2:
+            error_1 = _a.sent();
+            console.error("Failed to retrieve company logo and location for ID ".concat(preIPOCompanyId, ":"), error_1);
+            return [2 /*return*/, null];
+          case 3:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  return PreIPOCompanyService;
+}();
+
+/**
+ * TableRow component renders a row in the PrimaryTable component.
+ * It includes columns for company details, price per share, minimum investment,
+ * price per share, and an action to invest.
+ */
+var TableRow = /*#__PURE__*/memo(function (_a) {
+  var _b, _c, _d;
+  var ColumnOne = _a.ColumnOne,
+    ColumnTwo = _a.ColumnTwo,
+    ColumnThree = _a.ColumnThree,
+    ColumnFour = _a.ColumnFour,
+    _e = _a.buttonText,
+    buttonText = _e === void 0 ? "" : _e,
+    investorId = _a.investorId,
+    onButtonClick = _a.onButtonClick;
+  var handleButtonClick = useCallback(function (e) {
+    e.preventDefault();
+    onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(ColumnOne.preIPOCompanySpv.id, investorId);
+  }, [ColumnOne.preIPOCompanySpv.id, investorId, onButtonClick]);
+  var _f = useState(null),
+    companyDetails = _f[0],
+    setCompanyDetails = _f[1];
+  var _g = useState(true),
+    isLoading = _g[0],
+    setIsLoading = _g[1];
+  useEffect(function () {
+    var fetchCompanyDetails = function () {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var service, details, error_1;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              setIsLoading(true);
+              service = new PreIPOCompanyService();
+              _a.label = 1;
+            case 1:
+              _a.trys.push([1, 3, 4, 5]);
+              return [4 /*yield*/, service.GetCompanyLogoAndCountry(ColumnOne.preIPOCompanySpv.preIPOCompanyId, investorId)];
+            case 2:
+              details = _a.sent();
+              setCompanyDetails(details);
+              return [3 /*break*/, 5];
+            case 3:
+              error_1 = _a.sent();
+              console.error('Error fetching company details:', error_1);
+              return [3 /*break*/, 5];
+            case 4:
+              setIsLoading(false);
+              return [7 /*endfinally*/];
+            case 5:
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+    fetchCompanyDetails();
+  }, [ColumnOne.preIPOCompanySpv.preIPOCompanyId, investorId]);
+  return jsxs("tr", {
+    className: "hover:bg-gray-50 transition-colors",
+    role: "row",
+    children: [jsx("td", {
+      className: "py-4 px-4 border-b border-gray-100",
+      role: "cell",
+      children: jsxs("div", {
+        className: "flex items-center gap-3",
+        children: [isLoading ? jsx("div", {
+          className: "w-8 h-8 animate-pulse bg-gray-200 rounded-lg"
+        }) : jsx(CompanyLogo, {
+          logoURL: companyDetails === null || companyDetails === void 0 ? void 0 : companyDetails.logoURL,
+          name: ColumnOne.name
+        }), jsxs("div", {
+          className: "flex flex-col",
+          children: [jsx("span", {
+            className: "font-medium text-gray-900",
+            children: ColumnOne.name
+          }), jsx("span", {
+            className: "text-sm text-gray-500",
+            children: isLoading ? jsx("div", {
+              className: "h-4 w-24 animate-pulse bg-gray-200 rounded"
+            }) : (companyDetails === null || companyDetails === void 0 ? void 0 : companyDetails.location) || 'Location not available'
+          })]
+        })]
+      })
+    }), jsx("td", {
+      className: "py-4 px-4 border-b border-gray-100",
+      role: "cell",
+      children: jsx("span", {
+        className: "font-medium text-gray-900",
+        children: (_b = ColumnTwo === null || ColumnTwo === void 0 ? void 0 : ColumnTwo(ColumnOne)) !== null && _b !== void 0 ? _b : "N/A"
+      })
+    }), jsx("td", {
+      className: "py-4 px-4 border-b border-gray-100",
+      role: "cell",
+      children: jsx("span", {
+        className: "font-medium text-gray-900",
+        children: (_c = ColumnThree === null || ColumnThree === void 0 ? void 0 : ColumnThree(ColumnOne)) !== null && _c !== void 0 ? _c : "N/A"
+      })
+    }), jsx("td", {
+      className: "py-4 px-4 border-b border-gray-100",
+      role: "cell",
+      children: jsx("span", {
+        className: "font-medium text-gray-900",
+        children: (_d = ColumnFour === null || ColumnFour === void 0 ? void 0 : ColumnFour(ColumnOne)) !== null && _d !== void 0 ? _d : "N/A"
+      })
+    }), jsx("td", {
+      className: "py-4 px-4 border-b border-gray-100",
+      role: "cell",
+      children: jsx("button", {
+        onClick: handleButtonClick,
+        className: "bg-custom-blue hover:bg-custom-blue-dark text-white font-medium py-2 px-4 rounded-lg shadow-md transition-all duration-200",
+        "aria-label": "".concat(buttonText, " for ").concat(ColumnOne.name),
+        children: buttonText
+      })
+    })]
+  });
+});
+TableRow.displayName = 'TableRow';
+
+var primaryColumns = [{
+  title: 'Company',
+  width: 'w-1/3'
+}, {
+  title: 'Price Per Share'
+}, {
+  title: 'Minimum Investment'
+}, {
+  title: 'Fees'
+}, {
+  title: 'Invest'
+}];
+/**
+ * PrimaryTable component displays a table of SPV investment opportunities.
+ * It includes table headers and rows.
+ */
+var PrimaryTable = function (_a) {
+  var companies = _a.companies,
+    investorId = _a.investorId,
+    onButtonClick = _a.onButtonClick,
+    _b = _a.buttonText,
+    buttonText = _b === void 0 ? "Invest" : _b,
+    _c = _a.isLoading,
+    isLoading = _c === void 0 ? false : _c,
+    currentPage = _a.currentPage,
+    totalPages = _a.totalPages,
+    onPageChange = _a.onPageChange;
+  var LoadingSpinner = function () {
+    return jsxs("svg", {
+      className: "animate-spin h-8 w-8 text-custom-blue",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      children: [jsx("circle", {
+        className: "opacity-25",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        strokeWidth: "4"
+      }), jsx("path", {
+        className: "opacity-75",
+        fill: "currentColor",
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      })]
+    });
+  };
+  if (!companies || companies.length === 0) {
+    return jsx("div", {
+      className: "bg-white rounded-lg shadow-sm p-8 text-center",
+      children: jsx("p", {
+        className: "text-gray-500",
+        children: "No companies available"
+      })
+    });
+  }
+  return jsxs("div", {
+    className: "space-y-4",
+    children: [jsxs("div", {
+      className: "relative",
+      children: [isLoading && jsx("div", {
+        className: "absolute inset-0 bg-white/50 flex items-center justify-center z-10",
+        children: jsx(LoadingSpinner, {})
+      }), jsx("div", {
+        className: "bg-white rounded-lg shadow-sm overflow-hidden",
+        children: jsxs("table", {
+          className: "w-full table-fixed",
+          children: [jsx(TableHeaders, {
+            columns: primaryColumns
+          }), jsx("tbody", {
+            className: "relative",
+            children: companies.map(function (company) {
+              return jsx(TableRow, {
+                ColumnOne: {
+                  preIPOCompanySpv: company,
+                  name: company.name || ''
+                },
+                ColumnTwo: function (company) {
+                  return formatCurrency(company.preIPOCompanySpv.allInPricePerShare || 0);
+                },
+                ColumnThree: function (company) {
+                  return company.preIPOCompanySpv.minCommitmentAmount ? formatCurrency(company.preIPOCompanySpv.minCommitmentAmount) : 'Unknown';
+                },
+                ColumnFour: function (company) {
+                  return company.preIPOCompanySpv.managementFee ? "".concat(company.preIPOCompanySpv.managementFee, "%") : 'Not Available';
+                },
+                buttonText: buttonText,
+                investorId: investorId,
+                onButtonClick: onButtonClick
+              }, company.id);
+            })
+          })]
+        })
+      })]
+    }), jsx(Pagination, {
+      currentPage: currentPage,
+      totalPages: totalPages,
+      onPageChange: onPageChange
+    })]
+  });
+};
+
+export { IoITable, PrimaryTable };
+//# sourceMappingURL=index.esm.js.map