@mbpockets/shared-ui 0.1.20 → 0.2.0

package/dist/SearchPage/index.mjs

@@ -1,32 +1,58 @@
 "use client";
-import Typography2 from '@mui/material/Typography';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Box8 from '@mui/material/Box';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Typography6 from '@mui/material/Typography';
 import FormControl from '@mui/material/FormControl';
 import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React from 'react';
-import Box2 from '@mui/material/Box';
+import React, { useEffect, useState } from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import Popper from '@mui/material/Popper';
-import Divider from '@mui/material/Divider';
+import Divider2 from '@mui/material/Divider';
 import FormGroup from '@mui/material/FormGroup';
-import Checkbox from '@mui/material/Checkbox';
 import Button from '@mui/material/Button';
 import SearchIcon from '@mui/icons-material/Search';
+import Pagination from '@mui/material/Pagination';
 import Avatar from '@mui/material/Avatar';
-import { Card, CardContent, Box, Typography, Chip as Chip$1, LinearProgress, useTheme, useMediaQuery } from '@mui/material';
-import CasinoIcon from '@mui/icons-material/Casino';
+import Card2 from '@mui/material/Card';
+import CardContent2 from '@mui/material/CardContent';
+import { useTheme, useMediaQuery, Typography } from '@mui/material';
+import Chip2 from '@mui/material/Chip';
+import LinearProgress from '@mui/material/LinearProgress';
+import PersonIcon from '@mui/icons-material/Person';
+import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
+import TableRestaurantIcon from '@mui/icons-material/TableRestaurant';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
 import EventIcon from '@mui/icons-material/Event';
 import Grid from '@mui/material/Grid';
-import Card2 from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
-import CardContent2 from '@mui/material/CardContent';
+import CircularProgress from '@mui/material/CircularProgress';
 
-// src/components/SearchPage/Filters/SortOptions.tsx
+// src/components/SearchPage/Filters/ExpiredTablesFilter.tsx
+var ExpiredTablesFilter = ({
+  includeExpiredTables,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsx(Box8, { sx: { mt: 2 }, children: /* @__PURE__ */ jsx(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: includeExpiredTables,
+          onChange: (e) => onChange(e.target.checked),
+          color: "primary"
+        }
+      ),
+      label: "Show expired tables"
+    }
+  ) });
+};
+var ExpiredTablesFilter_default = ExpiredTablesFilter;
 var SORT_OPTIONS = [
   { id: "relevance", label: "Relevance" },
   { id: "newest", label: "Newest" },
@@ -40,7 +66,7 @@ var SortOptions = ({
     onChange == null ? void 0 : onChange(event.target.value);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography2, { variant: "h6", gutterBottom: true, children: "Sort By" }),
+    /* @__PURE__ */ jsx(Typography6, { variant: "h6", gutterBottom: true, children: "Sort By" }),
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(RadioGroup, { defaultValue, onChange: handleSortChange, children: SORT_OPTIONS.map((option) => /* @__PURE__ */ jsx(
       FormControlLabel,
       {
@@ -53,13 +79,53 @@ var SortOptions = ({
   ] });
 };
 var SortOptions_default = SortOptions;
+function Chip({ tag, removeCallback }) {
+  var _a;
+  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
+      style: {
+        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
+        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
+        textShadow: "black 1.5px 1px 1.5px",
+        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
+      },
+      children: [
+        tag.label,
+        removeCallback && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeCallback(tag.id),
+            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
+            style: {
+              textShadow: "black 1px 1px 1px"
+            },
+            children: "X"
+          }
+        )
+      ]
+    },
+    tag.id
+  ) });
+}
 var TagsFilter = ({
   onChange,
-  tags: Tags = []
+  tags: Tags = [],
+  initialSelectedTags
 }) => {
-  const [mustHaveTags, setMustHaveTags] = React.useState([]);
-  const [mustNotHaveTags, setMustNotHaveTags] = React.useState([]);
-  const [shouldHaveAtLeastOneTags, setShouldHaveAtLeastOneTags] = React.useState([]);
+  const [mustHaveTags, setMustHaveTags] = React.useState((initialSelectedTags == null ? void 0 : initialSelectedTags.mustHave) || []);
+  const [mustNotHaveTags, setMustNotHaveTags] = React.useState((initialSelectedTags == null ? void 0 : initialSelectedTags.mustNotHave) || []);
+  const [shouldHaveAtLeastOneTags, setShouldHaveAtLeastOneTags] = React.useState((initialSelectedTags == null ? void 0 : initialSelectedTags.shouldHaveAtLeastOne) || []);
+  React.useEffect(() => {
+    if (initialSelectedTags) {
+      setMustHaveTags(initialSelectedTags.mustHave || []);
+      setMustNotHaveTags(initialSelectedTags.mustNotHave || []);
+      setShouldHaveAtLeastOneTags(initialSelectedTags.shouldHaveAtLeastOne || []);
+    }
+  }, [initialSelectedTags]);
   Tags = !!Tags ? Tags : [];
   const [inputValues, setInputValues] = React.useState({
     mustHave: "",
@@ -69,7 +135,7 @@ var TagsFilter = ({
   const tagOptions = React.useMemo(() => {
     console.log("available tags: " + JSON.stringify(Tags));
     console.log(!Tags);
-    if (!Tags || Tags.length == 0 || !Tags.map) return [];
+    if (!Tags || Tags.length === 0 || !Tags.map) return [];
     return Tags.map((tag) => ({
       value: tag.id,
       label: tag.label
@@ -101,7 +167,7 @@ var TagsFilter = ({
   };
   const renderSelectedTags = (selectedTags, category) => {
     const tagValues = [];
-    if (!Tags || Tags.length == 0 || !Tags.map) return null;
+    if (!Tags || Tags.length === 0 || !Tags.map) return null;
     Tags.forEach((tag) => {
       if (selectedTags.includes(tag.id)) {
         tagValues.push(tag);
@@ -110,27 +176,11 @@ var TagsFilter = ({
     if (tagValues.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ jsx(Box2, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: tagValues.map((tag) => /* @__PURE__ */ jsxs(
-      "span",
+    return /* @__PURE__ */ jsx(Box8, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: tagValues.map((tag) => /* @__PURE__ */ jsx(
+      Chip,
       {
-        className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
-        style: {
-          background: tag.color || "#bfbcbb",
-          color: "white",
-          textShadow: "black 0.2em 0.2em 0.4em"
-        },
-        children: [
-          tag.label,
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleTagChange(tag.id, category),
-              className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
-              children: "\xD7"
-            }
-          )
-        ]
+        tag,
+        removeCallback: (tagId) => handleTagChange(tagId, category)
       },
       tag.id
     )) });
@@ -138,7 +188,7 @@ var TagsFilter = ({
   const createTagSelector = (category, label) => {
     const selectedTags = category === "mustHave" ? mustHaveTags : category === "mustNotHave" ? mustNotHaveTags : shouldHaveAtLeastOneTags;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Typography2, { variant: "subtitle1", gutterBottom: true, sx: { mt: 2 }, children: label }),
+      /* @__PURE__ */ jsx(Typography6, { variant: "subtitle1", gutterBottom: true, sx: { mt: 2 }, children: label }),
       renderSelectedTags(selectedTags, category),
       /* @__PURE__ */ jsx(
         Autocomplete,
@@ -191,11 +241,11 @@ var TagsFilter = ({
     ] });
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography2, { variant: "h6", gutterBottom: true, children: "Tags" }),
+    /* @__PURE__ */ jsx(Typography6, { variant: "h6", gutterBottom: true, children: "Tags" }),
     createTagSelector("mustHave", "Must Have Tags"),
-    /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsx(Divider2, { sx: { my: 2 } }),
     createTagSelector("mustNotHave", "Must Not Have Tags"),
-    /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsx(Divider2, { sx: { my: 2 } }),
     createTagSelector("shouldHaveAtLeastOne", "Should Contain At Least One Tag")
   ] });
 };
@@ -225,21 +275,80 @@ var CustomPopper = (props) => {
   );
 };
 var TagsFilter_default = TagsFilter;
-var FILTER_TYPES = [
-  { id: "player", label: "Players" },
-  { id: "event", label: "Events", disabled: true },
-  { id: "table", label: "Tables", disabled: true }
-];
-var TypeFilter = ({ onChange }) => {
-  const [selectedTypes, setSelectedTypes] = React.useState([]);
+var TextSearchCard = ({ onChange, selectedTypes, initialTextSearch }) => {
+  const [query, setQuery] = React.useState((initialTextSearch == null ? void 0 : initialTextSearch.query) || "");
+  const [titleOnly, setTitleOnly] = React.useState((initialTextSearch == null ? void 0 : initialTextSearch.titleOnly) || false);
+  useEffect(() => {
+    if (initialTextSearch) {
+      setQuery(initialTextSearch.query || "");
+      setTitleOnly(initialTextSearch.titleOnly || false);
+    }
+  }, [initialTextSearch]);
+  const shouldShow = selectedTypes.includes("table") || selectedTypes.includes("event");
+  if (!shouldShow) {
+    return null;
+  }
+  const handleQueryChange = (e) => {
+    const newQuery = e.target.value;
+    setQuery(newQuery);
+    if (onChange) {
+      onChange({ query: newQuery, titleOnly });
+    }
+  };
+  const handleTitleOnlyChange = (e) => {
+    const newTitleOnly = e.target.checked;
+    setTitleOnly(newTitleOnly);
+    if (onChange) {
+      onChange({ query, titleOnly: newTitleOnly });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography6, { variant: "h6", gutterBottom: true, children: "Text Search" }),
+    /* @__PURE__ */ jsxs(Box8, { sx: { mb: 2 }, children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          label: "Search in title and description",
+          variant: "outlined",
+          value: query,
+          onChange: handleQueryChange,
+          placeholder: "Enter search terms...",
+          sx: { mb: 1 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: titleOnly,
+              onChange: handleTitleOnlyChange
+            }
+          ),
+          label: "Search in title only"
+        }
+      )
+    ] })
+  ] });
+};
+var TextSearchCard_default = TextSearchCard;
+var TypeFilter = ({ types, initialSelectedTypes = [], onChange }) => {
+  const [selectedTypes, setSelectedTypes] = React.useState(initialSelectedTypes);
+  useEffect(() => {
+    setSelectedTypes(initialSelectedTypes);
+  }, [initialSelectedTypes]);
   const handleTypeChange = (typeId) => {
     const newSelectedTypes = selectedTypes.includes(typeId) ? selectedTypes.filter((id) => id !== typeId) : [...selectedTypes, typeId];
     setSelectedTypes(newSelectedTypes);
-    onChange == null ? void 0 : onChange(newSelectedTypes);
+    if (onChange) {
+      onChange(newSelectedTypes);
+    }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography2, { variant: "h6", gutterBottom: true, children: "Type" }),
-    /* @__PURE__ */ jsx(FormGroup, { children: FILTER_TYPES.map((type) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Typography6, { variant: "h6", gutterBottom: true, children: "Type" }),
+    /* @__PURE__ */ jsx(FormGroup, { children: types.map((type) => /* @__PURE__ */ jsx(
       FormControlLabel,
       {
         control: /* @__PURE__ */ jsx(
@@ -247,7 +356,8 @@ var TypeFilter = ({ onChange }) => {
           {
             checked: selectedTypes.includes(type.id),
             onChange: () => handleTypeChange(type.id),
-            disabled: type.disabled
+            disabled: type.id === "event",
+            title: type.id === "event" ? "Coming soon! Currently only player and table search are supported." : ""
           }
         ),
         label: type.label
@@ -258,23 +368,68 @@ var TypeFilter = ({ onChange }) => {
 };
 var TypeFilter_default = TypeFilter;
 var FiltersContainer = ({
+  initialSelectedTypes = [],
+  initialSelectedTags,
+  initialTextSearch,
+  includeExpiredTables = false,
   onTypeChange,
   onTagChange,
+  onTextSearchChange,
+  onIncludeExpiredTablesChange,
   onSubmit,
-  tags
+  tags,
+  searchTypes
 }) => {
-  return /* @__PURE__ */ jsxs(Box2, { children: [
-    /* @__PURE__ */ jsx(TypeFilter_default, { onChange: onTypeChange }),
-    /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
+  const [selectedTypes, setSelectedTypes] = React.useState(initialSelectedTypes);
+  useEffect(() => {
+    setSelectedTypes(initialSelectedTypes);
+  }, [initialSelectedTypes]);
+  const handleTypeChange = (types) => {
+    setSelectedTypes(types);
+    if (onTypeChange) {
+      onTypeChange(types);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box8, { children: [
+    /* @__PURE__ */ jsx(
+      TypeFilter_default,
+      {
+        types: searchTypes,
+        initialSelectedTypes,
+        onChange: handleTypeChange
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider2, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsx(
+      TextSearchCard_default,
+      {
+        selectedTypes,
+        initialTextSearch,
+        onChange: onTextSearchChange
+      }
+    ),
+    (selectedTypes.includes("table") || selectedTypes.includes("event")) && /* @__PURE__ */ jsx(Divider2, { sx: { my: 2 } }),
     /* @__PURE__ */ jsx(
       TagsFilter_default,
       {
         tags,
+        initialSelectedTags,
         onChange: onTagChange
       }
     ),
-    /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
-    /* @__PURE__ */ jsx(Box2, { sx: { display: "flex", justifyContent: "center", mt: 2 }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Divider2, { sx: { my: 2 } }),
+    selectedTypes.includes("table") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ExpiredTablesFilter_default,
+        {
+          includeExpiredTables,
+          onChange: onIncludeExpiredTablesChange || (() => {
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider2, { sx: { my: 2 } })
+    ] }),
+    /* @__PURE__ */ jsx(Box8, { sx: { display: "flex", justifyContent: "center", mt: 2 }, children: /* @__PURE__ */ jsx(
       Button,
       {
         variant: "contained",
@@ -299,41 +454,24 @@ var FiltersContainer = ({
   ] });
 };
 var FiltersContainer_default = FiltersContainer;
-function Chip({ tag, removeCallback }) {
-  var _a;
-  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
-      style: {
-        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
-        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
-        textShadow: "black 1.5px 1px 1.5px",
-        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
-      },
-      children: [
-        tag.label,
-        removeCallback && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => removeCallback(tag.id),
-            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
-            style: {
-              textShadow: "black 1px 1px 1px"
-            },
-            children: "X"
-          }
-        )
-      ]
-    },
-    tag.id
-  ) });
-}
+var NextGameLabel = ({ nextGameTime }) => {
+  const date = typeof nextGameTime === "string" ? new Date(nextGameTime) : nextGameTime;
+  return /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { display: "block", mb: 1, color: "primary.main", fontWeight: "bold" }, children: [
+    "Next Game: ",
+    date.toLocaleString()
+  ] });
+};
+var NextGameLabel_default = NextGameLabel;
 function generateTagsDisplay(tag) {
   return /* @__PURE__ */ jsx(Chip, { tag }, tag.id);
 }
+function renderTagsFromIds(ids, legalTags) {
+  if (!ids || !legalTags || legalTags.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  const validTags = ids.map((id) => legalTags.find((tag) => tag.id === id)).filter((tag) => Boolean(tag));
+  return validTags.map((tag) => generateTagsDisplay(tag));
+}
 var BaseSearchResultCard = ({
   result,
   onClick,
@@ -341,13 +479,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__ */ jsx(
-    Card,
+    Card2,
     {
       elevation: 6,
       sx: {
@@ -360,48 +504,21 @@ var BaseSearchResultCard = ({
         },
         marginBottom: 2
       },
-      onClick: handleClick,
-      children: /* @__PURE__ */ jsxs(CardContent, { sx: { display: "flex", alignItems: "flex-start" }, children: [
-        icon && /* @__PURE__ */ jsx(Box, { sx: { mr: 2, display: "flex", alignItems: "center", pt: 0.5 }, children: icon }),
-        /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { mb: 1 }, children: result.title }),
+      onClick: (e) => handleClick(e),
+      children: /* @__PURE__ */ jsxs(CardContent2, { sx: { display: "flex", alignItems: "flex-start" }, children: [
+        icon && /* @__PURE__ */ jsx(Box8, { sx: { mr: 2, display: "flex", alignItems: "center", pt: 0.5 }, children: icon }),
+        /* @__PURE__ */ jsxs(Box8, { sx: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Typography6, { variant: "h6", sx: { mb: 1 }, children: result.title }),
+          result.nextGameTime && /* @__PURE__ */ jsx(NextGameLabel_default, { nextGameTime: result.nextGameTime }),
+          result.type === "table" && result.shortDescription ? /* @__PURE__ */ jsx(Typography6, { variant: "body2", sx: { mb: 1 }, children: result.shortDescription }) : null,
           children,
-          /* @__PURE__ */ jsx(Typography, { variant: "body1", children: result.description }),
-          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(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__ */ jsxs(Fragment, { children: [
-              visible.map((tag) => generateTagsDisplay(tag)),
-              hiddenCount > 0 && /* @__PURE__ */ 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__ */ jsx(Typography6, { 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__ */ jsx(Typography6, { variant: "body1", children: result.description }),
+          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsx(Box8, { sx: { mt: 1, display: "flex", flexWrap: "wrap", gap: 1 }, children: renderTagsFromIds(result.tags, tags) })
         ] })
       ] })
     }
@@ -456,21 +573,60 @@ var PlayerResultCard = ({
   return /* @__PURE__ */ 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__ */ jsx(BaseSearchResultCard, { result, tags, onClick, icon: /* @__PURE__ */ jsx(CasinoIcon, { color: "primary" }), children: /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsxs(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__ */ jsx(
+    TableRestaurantIcon,
+    {
+      sx: {
+        fontSize: 40,
+        color: "primary.main"
+      }
+    }
+  );
+  return /* @__PURE__ */ jsx(BaseSearchResultCard_default, { result, onClick, icon: tableIcon, tags, children: /* @__PURE__ */ jsxs(Box8, { sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsxs(Box8, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsxs(Typography6, { variant: "body2", children: [
+        /* @__PURE__ */ jsx("strong", { children: "Players:" }),
+        " ",
+        hasDefinedCapacity ? `${activePlayers}/${capacity}` : activePlayers
       ] }),
-      result.dungeonMaster ? /* @__PURE__ */ jsx(Chip$1, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsx(Chip$1, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
+      typeof hasDM === "boolean" && /* @__PURE__ */ jsx(
+        Chip2,
+        {
+          icon: hasDM ? /* @__PURE__ */ jsx(SupervisorAccountIcon, {}) : /* @__PURE__ */ jsx(PersonIcon, {}),
+          label: hasDM ? "DM Present" : "No DM",
+          color: hasDM ? "success" : "warning",
+          size: "small"
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: occupancy, sx: { height: 8, borderRadius: 4 } })
+    /* @__PURE__ */ jsx(
+      LinearProgress,
+      {
+        variant: "determinate",
+        value: occupancyPercentage,
+        sx: {
+          height: 10,
+          borderRadius: 5,
+          backgroundColor: "#e0e0e0",
+          "& .MuiLinearProgress-bar": {
+            backgroundColor: hasDefinedCapacity ? availableSlots > 0 ? "#4caf50" : "#f44336" : "#2196f3"
+          }
+        }
+      }
+    ),
+    hasDefinedCapacity && /* @__PURE__ */ jsx(Typography6, { variant: "body2", sx: { mt: 0.5, textAlign: "right" }, children: availableSlots > 0 ? `${availableSlots} slot${availableSlots !== 1 ? "s" : ""} available` : "Table full" })
   ] }) });
 };
 var TableResultCard_default = TableResultCard;
@@ -489,20 +645,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__ */ jsx(BaseSearchResultCard_default, { result, onClick, icon: /* @__PURE__ */ jsx(EventIcon, { color: "primary" }), tags, children: /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsx(CalendarTodayIcon, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: formattedDate })
+  const eventIcon = /* @__PURE__ */ jsx(
+    EventIcon,
+    {
+      sx: {
+        fontSize: 40,
+        color: "primary.main"
+      }
+    }
+  );
+  return /* @__PURE__ */ jsx(BaseSearchResultCard_default, { result, onClick, icon: eventIcon, tags, children: /* @__PURE__ */ jsxs(Box8, { sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsxs(Box8, { sx: { display: "flex", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsx(CalendarTodayIcon, { sx: { mr: 1, color: "primary.main" } }),
+      /* @__PURE__ */ jsxs(Typography6, { variant: "body2", children: [
+        /* @__PURE__ */ jsx("strong", { children: "Date:" }),
+        " ",
+        formattedDate
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box8, { sx: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(LocationOnIcon, { sx: { mr: 1, color: "primary.main" } }),
+      /* @__PURE__ */ jsxs(Typography6, { variant: "body2", children: [
+        /* @__PURE__ */ jsx("strong", { children: "Location:" }),
+        " ",
+        location
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", mb: 1 }, children: [
-      /* @__PURE__ */ jsx(LocationOnIcon, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: location })
+    result.organizer && /* @__PURE__ */ jsxs(Typography6, { variant: "body2", sx: { mt: 1 }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Organizer:" }),
+      " ",
+      result.organizer
     ] })
   ] }) });
 };
@@ -510,10 +688,12 @@ var EventResultCard_default = EventResultCard;
 var ResultsContainer = ({
   results,
   onResultClick,
-  tags
+  tags,
+  pagination,
+  onPacketChange
 }) => {
-  if (results.length === 0 || !results.map) {
-    return /* @__PURE__ */ jsx(Box2, { sx: { textAlign: "center", py: 4 }, children: "No results found. Try adjusting your filters." });
+  if (!results || results.length === 0 || !results.map) {
+    return /* @__PURE__ */ jsx(Box8, { sx: { textAlign: "center", py: 4 }, children: "No results found. Try adjusting your filters." });
   }
   const onPlayerClick = (id) => {
     onResultClick == null ? void 0 : onResultClick(id, "player");
@@ -524,43 +704,68 @@ var ResultsContainer = ({
   const onEventClick = (id) => {
     onResultClick == null ? void 0 : onResultClick(id, "event");
   };
-  return /* @__PURE__ */ jsx(Box2, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: results.map((result) => {
-    switch (result.type) {
-      case "player":
-        return /* @__PURE__ */ jsx(
-          PlayerResultCard_default,
-          {
-            result,
-            onClick: onPlayerClick,
-            tags
-          },
-          result.id
-        );
-      case "table":
-        return /* @__PURE__ */ jsx(
-          TableResultCard_default,
-          {
-            result,
-            onClick: onTableClick,
-            tags
-          },
-          result.id
-        );
-      case "event":
-        return /* @__PURE__ */ 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__ */ jsxs(Box8, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+    pagination && /* @__PURE__ */ jsx(Box8, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: /* @__PURE__ */ jsxs(Typography6, { variant: "body2", color: "text.secondary", children: [
+      "Showing ",
+      startResult,
+      "-",
+      endResult,
+      " of ",
+      pagination.totalResults,
+      " results"
+    ] }) }),
+    results.map((result) => {
+      switch (result.type) {
+        case "player":
+          return /* @__PURE__ */ jsx(
+            PlayerResultCard_default,
+            {
+              result,
+              onClick: onPlayerClick,
+              tags
+            },
+            result.id
+          );
+        case "table":
+          return /* @__PURE__ */ jsx(
+            TableResultCard_default,
+            {
+              result,
+              onClick: onTableClick,
+              tags
+            },
+            result.id
+          );
+        case "event":
+          return /* @__PURE__ */ jsx(
+            EventResultCard_default,
+            {
+              result,
+              onClick: onEventClick,
+              tags
+            },
+            result.id
+          );
+        default:
+          console.error(`Unknown result type: ${result.type}`);
+          return null;
+      }
+    }),
+    pagination && pagination.totalPackets > 1 && /* @__PURE__ */ jsx(Box8, { sx: { display: "flex", justifyContent: "center", mt: 4 }, children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        count: pagination.totalPackets,
+        page: pagination.currentPacket,
+        onChange: handlePacketChange,
+        color: "primary"
+      }
+    ) })
+  ] });
 };
 var ResultsContainer_default = ResultsContainer;
 var ScrollableResultsList = ({
@@ -571,7 +776,7 @@ var ScrollableResultsList = ({
   emptyText
 }) => {
   const hasResults = Array.isArray(results) && results.length > 0;
-  return /* @__PURE__ */ jsx(Box2, { sx: { maxHeight, overflowY: "auto", pr: 1 }, children: hasResults ? /* @__PURE__ */ jsx(ResultsContainer_default, { results, onResultClick, tags }) : /* @__PURE__ */ jsx(Box2, { sx: { textAlign: "center", py: 2 }, children: emptyText || "No results to display." }) });
+  return /* @__PURE__ */ jsx(Box8, { sx: { maxHeight, overflowY: "auto", pr: 1 }, children: hasResults ? /* @__PURE__ */ jsx(ResultsContainer_default, { results, onResultClick, tags }) : /* @__PURE__ */ jsx(Box8, { sx: { textAlign: "center", py: 2 }, children: emptyText || "No results to display." }) });
 };
 var ScrollableResultsList_default = ScrollableResultsList;
 var PlayersScrollableList = ({
@@ -606,17 +811,76 @@ var SearchResultCard_default = SearchResultCard;
 function SearchPageLayout({
   results,
   title = "Search Results",
+  initialSelectedTypes = [],
+  initialSelectedTags = {
+    mustHave: [],
+    mustNotHave: [],
+    shouldHaveAtLeastOne: []
+  },
+  initialTextSearch = {
+    query: "",
+    titleOnly: false
+  },
+  includeExpiredTables: initialIncludeExpiredTables = false,
   onTypeChange,
   onTagChange,
+  onTextSearchChange,
+  onIncludeExpiredTablesChange,
   onSubmit,
   onResultClick,
+  onPacketChange,
+  pagination,
   validTags,
-  allTags
+  allTags,
+  searchTypes,
+  isLoading = false
 }) {
-  "use client";
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-  return /* @__PURE__ */ jsxs(Box2, { sx: { padding: 2 }, children: [
+  const [selectedTypes, setSelectedTypes] = useState(initialSelectedTypes);
+  const [selectedTags, setSelectedTags] = useState(initialSelectedTags);
+  const [textSearch, setTextSearch] = useState(initialTextSearch);
+  const [includeExpiredTables, setIncludeExpiredTables] = useState(initialIncludeExpiredTables);
+  useEffect(() => {
+    setSelectedTypes(initialSelectedTypes);
+  }, [initialSelectedTypes]);
+  useEffect(() => {
+    setSelectedTags(initialSelectedTags);
+  }, [initialSelectedTags]);
+  useEffect(() => {
+    setTextSearch(initialTextSearch);
+  }, [initialTextSearch]);
+  useEffect(() => {
+    setIncludeExpiredTables(initialIncludeExpiredTables);
+  }, [initialIncludeExpiredTables]);
+  const handleTypeChange = (types) => {
+    setSelectedTypes(types);
+    if (onTypeChange) onTypeChange(types);
+  };
+  const handleTagChange = (tags) => {
+    setSelectedTags(tags);
+    if (onTagChange) onTagChange(tags);
+  };
+  const handleTextSearchChange = (ts) => {
+    setTextSearch(ts);
+    if (onTextSearchChange) onTextSearchChange(ts);
+  };
+  const handleIncludeExpiredTablesChange = (include) => {
+    setIncludeExpiredTables(include);
+    if (onIncludeExpiredTablesChange) onIncludeExpiredTablesChange(include);
+  };
+  const handleSubmit = () => {
+    const currentCriteria = {
+      selectedTypes,
+      selectedTags,
+      textSearch,
+      includeExpiredTables
+    };
+    if (onSubmit) {
+      onSubmit(currentCriteria);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box8, { sx: { padding: 2 }, children: [
     /* @__PURE__ */ jsx(Card2, { sx: { marginBottom: 2 }, children: /* @__PURE__ */ jsx(
       CardHeader,
       {
@@ -646,10 +910,17 @@ function SearchPageLayout({
         /* @__PURE__ */ jsx(CardContent2, { children: /* @__PURE__ */ jsx(
           FiltersContainer_default,
           {
-            onTypeChange,
-            onTagChange,
-            onSubmit,
-            tags: validTags
+            initialSelectedTypes: selectedTypes,
+            initialSelectedTags: selectedTags,
+            initialTextSearch: textSearch,
+            includeExpiredTables,
+            onTypeChange: handleTypeChange,
+            onTagChange: handleTagChange,
+            onTextSearchChange: handleTextSearchChange,
+            onIncludeExpiredTablesChange: handleIncludeExpiredTablesChange,
+            onSubmit: handleSubmit,
+            tags: validTags,
+            searchTypes
           }
         ) })
       ] }) }),
@@ -666,10 +937,12 @@ function SearchPageLayout({
             }
           }
         ),
-        /* @__PURE__ */ jsx(CardContent2, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(CardContent2, { children: isLoading ? /* @__PURE__ */ jsx(Box8, { sx: { display: "flex", justifyContent: "center", py: 8 }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 60, thickness: 4 }) }) : /* @__PURE__ */ jsx(
           ResultsContainer_default,
           {
             results,
+            pagination,
+            onPacketChange,
             onResultClick,
             tags: allTags
           }
@@ -682,21 +955,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__ */ jsx(
     ScrollableResultsList_default,
     {
-      results: sortedTables,
+      results: tables,
       tags,
       maxHeight,
       onResultClick: (id, type) => {
@@ -707,6 +973,6 @@ var TablesScrollableList = ({
 };
 var TablesScrollableList_default = TablesScrollableList;
 
-export { BaseSearchResultCard_default as BaseSearchResultCard, EventResultCard_default as EventResultCard, FiltersContainer_default as FiltersContainer, PlayerResultCard_default as PlayerResultCard, PlayersScrollableList_default as PlayersScrollableList, ResultsContainer_default as ResultsContainer, ScrollableResultsList_default as ScrollableResultsList, SearchPageLayout, SearchResultCard_default as SearchResultCard, SortOptions_default as SortOptions, TableResultCard_default as TableResultCard, TablesScrollableList_default as TablesScrollableList, TagsFilter_default as TagsFilter, TypeFilter_default as TypeFilter };
+export { BaseSearchResultCard_default as BaseSearchResultCard, EventResultCard_default as EventResultCard, ExpiredTablesFilter_default as ExpiredTablesFilter, FiltersContainer_default as FiltersContainer, PlayerResultCard_default as PlayerResultCard, PlayersScrollableList_default as PlayersScrollableList, ResultsContainer_default as ResultsContainer, ScrollableResultsList_default as ScrollableResultsList, SearchPageLayout, SearchResultCard_default as SearchResultCard, SortOptions_default as SortOptions, TableResultCard_default as TableResultCard, TablesScrollableList_default as TablesScrollableList, TagsFilter_default as TagsFilter, TextSearchCard_default as TextSearchCard, TypeFilter_default as TypeFilter };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map