@mbpockets/shared-ui 0.1.20 → 0.2.0

package/dist/EventPage/index.cjs

@@ -12,12 +12,18 @@ var CancelIcon = require('@mui/icons-material/Cancel');
 var CheckCircleIcon = require('@mui/icons-material/CheckCircle');
 var Box2 = require('@mui/material/Box');
 var Grid5 = require('@mui/material/Grid');
-var Card4 = require('@mui/material/Card');
-var CardContent4 = require('@mui/material/CardContent');
+var Card3 = require('@mui/material/Card');
+var CardContent3 = require('@mui/material/CardContent');
 var CardHeader = require('@mui/material/CardHeader');
 var Divider = require('@mui/material/Divider');
+var Typography4 = require('@mui/material/Typography');
+var Pagination = require('@mui/material/Pagination');
 var Avatar = require('@mui/material/Avatar');
-var CasinoIcon = require('@mui/icons-material/Casino');
+var Chip2 = require('@mui/material/Chip');
+var LinearProgress = require('@mui/material/LinearProgress');
+var PersonIcon = require('@mui/icons-material/Person');
+var SupervisorAccountIcon = require('@mui/icons-material/SupervisorAccount');
+var TableRestaurantIcon = require('@mui/icons-material/TableRestaurant');
 var CalendarTodayIcon = require('@mui/icons-material/CalendarToday');
 var LocationOnIcon = require('@mui/icons-material/LocationOn');
 var EventIcon = require('@mui/icons-material/Event');
@@ -32,12 +38,18 @@ var CancelIcon__default = /*#__PURE__*/_interopDefault(CancelIcon);
 var CheckCircleIcon__default = /*#__PURE__*/_interopDefault(CheckCircleIcon);
 var Box2__default = /*#__PURE__*/_interopDefault(Box2);
 var Grid5__default = /*#__PURE__*/_interopDefault(Grid5);
-var Card4__default = /*#__PURE__*/_interopDefault(Card4);
-var CardContent4__default = /*#__PURE__*/_interopDefault(CardContent4);
+var Card3__default = /*#__PURE__*/_interopDefault(Card3);
+var CardContent3__default = /*#__PURE__*/_interopDefault(CardContent3);
 var CardHeader__default = /*#__PURE__*/_interopDefault(CardHeader);
 var Divider__default = /*#__PURE__*/_interopDefault(Divider);
+var Typography4__default = /*#__PURE__*/_interopDefault(Typography4);
+var Pagination__default = /*#__PURE__*/_interopDefault(Pagination);
 var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
-var CasinoIcon__default = /*#__PURE__*/_interopDefault(CasinoIcon);
+var Chip2__default = /*#__PURE__*/_interopDefault(Chip2);
+var LinearProgress__default = /*#__PURE__*/_interopDefault(LinearProgress);
+var PersonIcon__default = /*#__PURE__*/_interopDefault(PersonIcon);
+var SupervisorAccountIcon__default = /*#__PURE__*/_interopDefault(SupervisorAccountIcon);
+var TableRestaurantIcon__default = /*#__PURE__*/_interopDefault(TableRestaurantIcon);
 var CalendarTodayIcon__default = /*#__PURE__*/_interopDefault(CalendarTodayIcon);
 var LocationOnIcon__default = /*#__PURE__*/_interopDefault(LocationOnIcon);
 var EventIcon__default = /*#__PURE__*/_interopDefault(EventIcon);
@@ -129,6 +141,13 @@ function Chip({ tag, removeCallback }) {
 function generateTagsDisplay(tag) {
   return /* @__PURE__ */ jsxRuntime.jsx(Chip, { tag }, tag.id);
 }
+function renderTagsFromIds(ids, legalTags) {
+  if (!ids || !legalTags || legalTags.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  const validTags = ids.map((id) => legalTags.find((tag) => tag.id === id)).filter((tag) => Boolean(tag));
+  return validTags.map((tag) => generateTagsDisplay(tag));
+}
 function EventBannerEdit({
   initialValue,
   onCancel,
@@ -937,6 +956,14 @@ var generateLink = function(link) {
     link.text
   );
 };
+var NextGameLabel = ({ nextGameTime }) => {
+  const date = typeof nextGameTime === "string" ? new Date(nextGameTime) : nextGameTime;
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { display: "block", mb: 1, color: "primary.main", fontWeight: "bold" }, children: [
+    "Next Game: ",
+    date.toLocaleString()
+  ] });
+};
+var NextGameLabel_default = NextGameLabel;
 var BaseSearchResultCard = ({
   result,
   onClick,
@@ -944,13 +971,19 @@ var BaseSearchResultCard = ({
   icon,
   tags
 }) => {
-  const handleClick = () => {
+  const handleClick = (e) => {
     if (onClick) {
-      onClick(result.id);
+      if (e.ctrlKey || e.metaKey || e.shiftKey) {
+        e.stopPropagation();
+        const url = `/${result.type}/${result.id}`;
+        window.open(url, "_blank");
+      } else {
+        onClick(result.id);
+      }
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Card,
+    Card3__default.default,
     {
       elevation: 6,
       sx: {
@@ -963,48 +996,21 @@ var BaseSearchResultCard = ({
         },
         marginBottom: 2
       },
-      onClick: handleClick,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { sx: { display: "flex", alignItems: "flex-start" }, children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mr: 2, display: "flex", alignItems: "center", pt: 0.5 }, children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { mb: 1 }, children: result.title }),
+      onClick: (e) => handleClick(e),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent3__default.default, { sx: { display: "flex", alignItems: "flex-start" }, children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { mr: 2, display: "flex", alignItems: "center", pt: 0.5 }, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "h6", sx: { mb: 1 }, children: result.title }),
+          result.nextGameTime && /* @__PURE__ */ jsxRuntime.jsx(NextGameLabel_default, { nextGameTime: result.nextGameTime }),
+          result.type === "table" && result.shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "body2", sx: { mb: 1 }, children: result.shortDescription }) : null,
           children,
-          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", children: result.description }),
-          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: {
-            display: "block",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "clip",
-            pl: 0.5
-            // Add some padding to prevent clipping of the leftmost tag
-          }, children: (() => {
-            const MAX_VISIBLE = 5;
-            const tagObjs = result.tags.map((tagId) => tags.find((t) => t.id === tagId)).filter((t) => Boolean(t));
-            const visible = tagObjs.slice(0, MAX_VISIBLE);
-            const hiddenCount = Math.max(tagObjs.length - visible.length, 0);
-            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              visible.map((tag) => generateTagsDisplay(tag)),
-              hiddenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
-                {
-                  className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
-                  style: {
-                    marginTop: "6px",
-                    marginRight: "6px",
-                    marginBottom: "6px",
-                    background: "#9e9e9e",
-                    color: "white",
-                    textShadow: "black 0.2em 0.2em 0.4em"
-                  },
-                  children: [
-                    "+",
-                    hiddenCount,
-                    " more"
-                  ]
-                }
-              )
-            ] });
-          })() }) })
+          result.type === "table" ? /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "body1", children: (() => {
+            var _a, _b;
+            const full = (_b = (_a = result.fullDescription) != null ? _a : result.description) != null ? _b : "";
+            const text = full || "";
+            return text.length > 200 ? `${text.slice(0, 200).trimEnd()}...` : text;
+          })() }) : /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "body1", children: result.description }),
+          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { mt: 1, display: "flex", flexWrap: "wrap", gap: 1 }, children: renderTagsFromIds(result.tags, tags) })
         ] })
       ] })
     }
@@ -1059,21 +1065,60 @@ var PlayerResultCard = ({
   return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: playerIcon, tags });
 };
 var PlayerResultCard_default = PlayerResultCard;
-var TableResultCard = ({ result, tags, onClick }) => {
-  const capacity = result.capacity || 1;
-  const numPlayers = result.numPlayers || 0;
-  const occupancy = numPlayers / capacity * 100;
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard, { result, tags, onClick, icon: /* @__PURE__ */ jsxRuntime.jsx(CasinoIcon__default.default, { color: "primary" }), children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", children: [
-        "Players: ",
-        numPlayers,
-        " / ",
-        capacity
+var TableResultCard = ({
+  result,
+  onClick,
+  tags
+}) => {
+  const rawCapacity = result.capacity;
+  const hasDefinedCapacity = typeof rawCapacity === "number" && Number.isFinite(rawCapacity) && rawCapacity > 0;
+  const capacity = hasDefinedCapacity ? rawCapacity : 0;
+  const activePlayers = typeof result.numPlayers === "number" ? result.numPlayers : 0;
+  const availableSlots = Math.max(capacity - activePlayers, 0);
+  const hasDM = typeof result.hasDM === "boolean" ? result.hasDM : Boolean(result.dungeonMaster);
+  const occupancyPercentage = hasDefinedCapacity ? activePlayers / capacity * 100 : 100;
+  const tableIcon = /* @__PURE__ */ jsxRuntime.jsx(
+    TableRestaurantIcon__default.default,
+    {
+      sx: {
+        fontSize: 40,
+        color: "primary.main"
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: tableIcon, tags, children: /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography4__default.default, { variant: "body2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Players:" }),
+        " ",
+        hasDefinedCapacity ? `${activePlayers}/${capacity}` : activePlayers
       ] }),
-      result.dungeonMaster ? /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
+      typeof hasDM === "boolean" && /* @__PURE__ */ jsxRuntime.jsx(
+        Chip2__default.default,
+        {
+          icon: hasDM ? /* @__PURE__ */ jsxRuntime.jsx(SupervisorAccountIcon__default.default, {}) : /* @__PURE__ */ jsxRuntime.jsx(PersonIcon__default.default, {}),
+          label: hasDM ? "DM Present" : "No DM",
+          color: hasDM ? "success" : "warning",
+          size: "small"
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(material.LinearProgress, { variant: "determinate", value: occupancy, sx: { height: 8, borderRadius: 4 } })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LinearProgress__default.default,
+      {
+        variant: "determinate",
+        value: occupancyPercentage,
+        sx: {
+          height: 10,
+          borderRadius: 5,
+          backgroundColor: "#e0e0e0",
+          "& .MuiLinearProgress-bar": {
+            backgroundColor: hasDefinedCapacity ? availableSlots > 0 ? "#4caf50" : "#f44336" : "#2196f3"
+          }
+        }
+      }
+    ),
+    hasDefinedCapacity && /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "body2", sx: { mt: 0.5, textAlign: "right" }, children: availableSlots > 0 ? `${availableSlots} slot${availableSlots !== 1 ? "s" : ""} available` : "Table full" })
   ] }) });
 };
 var TableResultCard_default = TableResultCard;
@@ -1092,20 +1137,42 @@ var EventResultCard = ({
     try {
       const date = new Date(dateString);
       return date.toLocaleDateString("en-US", options);
-    } catch {
+    } catch (error) {
       return dateString;
     }
   };
   const formattedDate = result.date ? formatDate(result.date) : "Date TBD";
   const location = result.location || "Location TBD";
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: /* @__PURE__ */ jsxRuntime.jsx(EventIcon__default.default, { color: "primary" }), tags, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CalendarTodayIcon__default.default, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: formattedDate })
+  const eventIcon = /* @__PURE__ */ jsxRuntime.jsx(
+    EventIcon__default.default,
+    {
+      sx: {
+        fontSize: 40,
+        color: "primary.main"
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: eventIcon, tags, children: /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { display: "flex", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CalendarTodayIcon__default.default, { sx: { mr: 1, color: "primary.main" } }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography4__default.default, { variant: "body2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Date:" }),
+        " ",
+        formattedDate
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", mb: 1 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(LocationOnIcon__default.default, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: location })
+    /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LocationOnIcon__default.default, { sx: { mr: 1, color: "primary.main" } }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography4__default.default, { variant: "body2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Location:" }),
+        " ",
+        location
+      ] })
+    ] }),
+    result.organizer && /* @__PURE__ */ jsxRuntime.jsxs(Typography4__default.default, { variant: "body2", sx: { mt: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Organizer:" }),
+      " ",
+      result.organizer
     ] })
   ] }) });
 };
@@ -1113,9 +1180,11 @@ var EventResultCard_default = EventResultCard;
 var ResultsContainer = ({
   results,
   onResultClick,
-  tags
+  tags,
+  pagination,
+  onPacketChange
 }) => {
-  if (results.length === 0 || !results.map) {
+  if (!results || results.length === 0 || !results.map) {
     return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { textAlign: "center", py: 4 }, children: "No results found. Try adjusting your filters." });
   }
   const onPlayerClick = (id) => {
@@ -1127,43 +1196,68 @@ var ResultsContainer = ({
   const onEventClick = (id) => {
     onResultClick == null ? void 0 : onResultClick(id, "event");
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: results.map((result) => {
-    switch (result.type) {
-      case "player":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          PlayerResultCard_default,
-          {
-            result,
-            onClick: onPlayerClick,
-            tags
-          },
-          result.id
-        );
-      case "table":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          TableResultCard_default,
-          {
-            result,
-            onClick: onTableClick,
-            tags
-          },
-          result.id
-        );
-      case "event":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          EventResultCard_default,
-          {
-            result,
-            onClick: onEventClick,
-            tags
-          },
-          result.id
-        );
-      default:
-        console.error(`Unknown result type: ${result.type}`);
-        return null;
-    }
-  }) });
+  const handlePacketChange = (_event, packet) => {
+    onPacketChange == null ? void 0 : onPacketChange(packet);
+  };
+  const startResult = pagination ? (pagination.currentPacket - 1) * pagination.packetSize + 1 : 1;
+  const endResult = pagination ? Math.min(pagination.currentPacket * pagination.packetSize, pagination.totalResults) : results.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+    pagination && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Typography4__default.default, { variant: "body2", color: "text.secondary", children: [
+      "Showing ",
+      startResult,
+      "-",
+      endResult,
+      " of ",
+      pagination.totalResults,
+      " results"
+    ] }) }),
+    results.map((result) => {
+      switch (result.type) {
+        case "player":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            PlayerResultCard_default,
+            {
+              result,
+              onClick: onPlayerClick,
+              tags
+            },
+            result.id
+          );
+        case "table":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TableResultCard_default,
+            {
+              result,
+              onClick: onTableClick,
+              tags
+            },
+            result.id
+          );
+        case "event":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            EventResultCard_default,
+            {
+              result,
+              onClick: onEventClick,
+              tags
+            },
+            result.id
+          );
+        default:
+          console.error(`Unknown result type: ${result.type}`);
+          return null;
+      }
+    }),
+    pagination && pagination.totalPackets > 1 && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", justifyContent: "center", mt: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Pagination__default.default,
+      {
+        count: pagination.totalPackets,
+        page: pagination.currentPacket,
+        onChange: handlePacketChange,
+        color: "primary"
+      }
+    ) })
+  ] });
 };
 var ResultsContainer_default = ResultsContainer;
 var ScrollableResultsList = ({
@@ -1181,21 +1275,14 @@ var TablesScrollableList = ({
   results,
   tags,
   maxHeight,
-  onResultClick,
-  sortBy = "availability"
+  onResultClick
 }) => {
   const tables = (results || []).filter((r) => (r == null ? void 0 : r.type) === "table");
-  const getAvailableSlots = (r) => {
-    const capacity = typeof r.capacity === "number" ? r.capacity : 0;
-    const playersCount = typeof r.numPlayers === "number" ? r.numPlayers : 0;
-    return Math.max(capacity - playersCount, 0);
-  };
-  const sortedTables = sortBy === "availability" ? [...tables].sort((a, b) => getAvailableSlots(b) - getAvailableSlots(a)) : tables;
   const handleClick = (id) => onResultClick == null ? void 0 : onResultClick(id);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ScrollableResultsList_default,
     {
-      results: sortedTables,
+      results: tables,
       tags,
       maxHeight,
       onResultClick: (id, type) => {
@@ -1211,10 +1298,10 @@ var EventTablesCard = ({
   maxHeight = 450,
   onTableClick
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card4__default.default, { elevation: 6, sx: { width: "100%", boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.15)" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card3__default.default, { elevation: 6, sx: { width: "100%", boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.15)" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(CardHeader__default.default, { title: "Tables" }),
     /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent4__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(TablesScrollableList_default, { results: tables, tags, maxHeight, onResultClick: onTableClick, sortBy: "availability" }) })
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent3__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(TablesScrollableList_default, { results: tables, tags, maxHeight, onResultClick: onTableClick }) })
   ] });
 };
 var EventTablesCard_default = EventTablesCard;