@mbpockets/shared-ui 0.2.0 → 0.2.6

package/dist/SearchPage/index.mjs

@@ -1,10 +1,12 @@
 "use client";
+import Typography7 from '@mui/material/Typography';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 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 Radio from '@mui/material/Radio';
 import React, { useEffect, useState } from 'react';
@@ -19,6 +21,7 @@ import Pagination from '@mui/material/Pagination';
 import Avatar from '@mui/material/Avatar';
 import Card2 from '@mui/material/Card';
 import CardContent2 from '@mui/material/CardContent';
+import { useRouter } from 'next/navigation';
 import { useTheme, useMediaQuery, Typography } from '@mui/material';
 import Chip2 from '@mui/material/Chip';
 import LinearProgress from '@mui/material/LinearProgress';
@@ -32,7 +35,25 @@ import Grid from '@mui/material/Grid';
 import CardHeader from '@mui/material/CardHeader';
 import CircularProgress from '@mui/material/CircularProgress';
 
-// src/components/SearchPage/Filters/ExpiredTablesFilter.tsx
+// src/components/SearchPage/Filters/DistanceFilter.tsx
+var DistanceFilter = ({ distances, selectedDistance, onChange }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography7, { variant: "h6", gutterBottom: true, children: "Distance" }),
+    /* @__PURE__ */ jsx(FormControl, { fullWidth: true, size: "small", children: /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: selectedDistance !== void 0 ? selectedDistance : "",
+        onChange: (e) => onChange(Number(e.target.value)),
+        displayEmpty: true,
+        children: [
+          /* @__PURE__ */ jsx(MenuItem, { value: "", children: /* @__PURE__ */ jsx("em", { children: "Any Distance" }) }),
+          distances.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, children: option.display }, option.value))
+        ]
+      }
+    ) })
+  ] });
+};
+var DistanceFilter_default = DistanceFilter;
 var ExpiredTablesFilter = ({
   includeExpiredTables,
   onChange
@@ -66,7 +87,7 @@ var SortOptions = ({
     onChange == null ? void 0 : onChange(event.target.value);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography6, { variant: "h6", gutterBottom: true, children: "Sort By" }),
+    /* @__PURE__ */ jsx(Typography7, { 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,
       {
@@ -133,13 +154,13 @@ var TagsFilter = ({
     shouldHaveAtLeastOne: ""
   });
   const tagOptions = React.useMemo(() => {
+    var _a;
     console.log("available tags: " + JSON.stringify(Tags));
     console.log(!Tags);
-    if (!Tags || Tags.length === 0 || !Tags.map) return [];
-    return Tags.map((tag) => ({
+    return (_a = Tags == null ? void 0 : Tags.map((tag) => ({
       value: tag.id,
       label: tag.label
-    }));
+    }))) != null ? _a : [];
   }, [Tags]);
   const handleTagChange = (tagId, category) => {
     let newTags = [];
@@ -167,8 +188,7 @@ var TagsFilter = ({
   };
   const renderSelectedTags = (selectedTags, category) => {
     const tagValues = [];
-    if (!Tags || Tags.length === 0 || !Tags.map) return null;
-    Tags.forEach((tag) => {
+    Tags == null ? void 0 : Tags.forEach((tag) => {
       if (selectedTags.includes(tag.id)) {
         tagValues.push(tag);
       }
@@ -188,7 +208,7 @@ var TagsFilter = ({
   const createTagSelector = (category, label) => {
     const selectedTags = category === "mustHave" ? mustHaveTags : category === "mustNotHave" ? mustNotHaveTags : shouldHaveAtLeastOneTags;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Typography6, { variant: "subtitle1", gutterBottom: true, sx: { mt: 2 }, children: label }),
+      /* @__PURE__ */ jsx(Typography7, { variant: "subtitle1", gutterBottom: true, sx: { mt: 2 }, children: label }),
       renderSelectedTags(selectedTags, category),
       /* @__PURE__ */ jsx(
         Autocomplete,
@@ -241,7 +261,7 @@ var TagsFilter = ({
     ] });
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography6, { variant: "h6", gutterBottom: true, children: "Tags" }),
+    /* @__PURE__ */ jsx(Typography7, { variant: "h6", gutterBottom: true, children: "Tags" }),
     createTagSelector("mustHave", "Must Have Tags"),
     /* @__PURE__ */ jsx(Divider2, { sx: { my: 2 } }),
     createTagSelector("mustNotHave", "Must Not Have Tags"),
@@ -303,7 +323,7 @@ var TextSearchCard = ({ onChange, selectedTypes, initialTextSearch }) => {
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography6, { variant: "h6", gutterBottom: true, children: "Text Search" }),
+    /* @__PURE__ */ jsx(Typography7, { variant: "h6", gutterBottom: true, children: "Text Search" }),
     /* @__PURE__ */ jsxs(Box8, { sx: { mb: 2 }, children: [
       /* @__PURE__ */ jsx(
         TextField,
@@ -347,7 +367,7 @@ var TypeFilter = ({ types, initialSelectedTypes = [], onChange }) => {
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography6, { variant: "h6", gutterBottom: true, children: "Type" }),
+    /* @__PURE__ */ jsx(Typography7, { variant: "h6", gutterBottom: true, children: "Type" }),
     /* @__PURE__ */ jsx(FormGroup, { children: types.map((type) => /* @__PURE__ */ jsx(
       FormControlLabel,
       {
@@ -355,9 +375,7 @@ var TypeFilter = ({ types, initialSelectedTypes = [], onChange }) => {
           Checkbox,
           {
             checked: selectedTypes.includes(type.id),
-            onChange: () => handleTypeChange(type.id),
-            disabled: type.id === "event",
-            title: type.id === "event" ? "Coming soon! Currently only player and table search are supported." : ""
+            onChange: () => handleTypeChange(type.id)
           }
         ),
         label: type.label
@@ -372,10 +390,13 @@ var FiltersContainer = ({
   initialSelectedTags,
   initialTextSearch,
   includeExpiredTables = false,
+  distance,
+  distances,
   onTypeChange,
   onTagChange,
   onTextSearchChange,
   onIncludeExpiredTablesChange,
+  onDistanceChange,
   onSubmit,
   tags,
   searchTypes
@@ -390,7 +411,10 @@ var FiltersContainer = ({
       onTypeChange(types);
     }
   };
-  return /* @__PURE__ */ jsxs(Box8, { children: [
+  return /* @__PURE__ */ jsxs(Box8, { component: "form", onSubmit: (e) => {
+    e.preventDefault();
+    if (onSubmit) onSubmit();
+  }, children: [
     /* @__PURE__ */ jsx(
       TypeFilter_default,
       {
@@ -400,6 +424,16 @@ var FiltersContainer = ({
       }
     ),
     /* @__PURE__ */ jsx(Divider2, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsx(
+      DistanceFilter_default,
+      {
+        distances,
+        selectedDistance: distance,
+        onChange: onDistanceChange || (() => {
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider2, { sx: { my: 2 } }),
     /* @__PURE__ */ jsx(
       TextSearchCard_default,
       {
@@ -432,11 +466,11 @@ var FiltersContainer = ({
     /* @__PURE__ */ jsx(Box8, { sx: { display: "flex", justifyContent: "center", mt: 2 }, children: /* @__PURE__ */ jsx(
       Button,
       {
+        type: "submit",
         variant: "contained",
         color: "primary",
         size: "large",
         startIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
-        onClick: onSubmit,
         sx: {
           width: "100%",
           py: 1.5,
@@ -454,6 +488,9 @@ var FiltersContainer = ({
   ] });
 };
 var FiltersContainer_default = FiltersContainer;
+
+// src/data/values.tsx
+var DEFAULT_PROFILE_PIC = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIHN0eWxlPSJzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMDsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgZmlsbDogbm9uZTsgZmlsbC1ydWxlOiBub256ZXJvOyBvcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS40MDY1OTM0MDY1OTM0MDE2IDEuNDA2NTkzNDA2NTkzNDAxNikgc2NhbGUoMi44MSAyLjgxKSI+Cgk8cGF0aCBkPSJNIDQ1IDg4IGMgLTExLjA0OSAwIC0yMS4xOCAtMi4wMDMgLTI5LjAyMSAtOC42MzQgQyA2LjIxMiA3MS4xMDUgMCA1OC43NjQgMCA0NSBDIDAgMjAuMTg3IDIwLjE4NyAwIDQ1IDAgYyAyNC44MTMgMCA0NSAyMC4xODcgNDUgNDUgYyAwIDEzLjc2NSAtNi4yMTIgMjYuMTA1IC0xNS45NzkgMzQuMzY2IEMgNjYuMTgxIDg1Ljk5OCA1Ni4wNDkgODggNDUgODggeiIgc3R5bGU9InN0cm9rZTogbm9uZTsgc3Ryb2tlLXdpZHRoOiAxOyBzdHJva2UtZGFzaGFycmF5OiBub25lOyBzdHJva2UtbGluZWNhcDogYnV0dDsgc3Ryb2tlLWxpbmVqb2luOiBtaXRlcjsgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOyBmaWxsOiByZ2IoMjE0LDIxNCwyMTQpOyBmaWxsLXJ1bGU6IG5vbnplcm87IG9wYWNpdHk6IDE7IiB0cmFuc2Zvcm09IiBtYXRyaXgoMSAwIDAgMSAwIDApICIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cgk8cGF0aCBkPSJNIDQ1IDYwLjcxIGMgLTExLjQ3OSAwIC0yMC44MTggLTkuMzM5IC0yMC44MTggLTIwLjgxNyBjIDAgLTExLjQ3OSA5LjMzOSAtMjAuODE4IDIwLjgxOCAtMjAuODE4IGMgMTEuNDc5IDAgMjAuODE3IDkuMzM5IDIwLjgxNyAyMC44MTggQyA2NS44MTcgNTEuMzcxIDU2LjQ3OSA2MC43MSA0NSA2MC43MSB6IiBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IGZpbGw6IHJnYigxNjUsMTY0LDE2NCk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiIHRyYW5zZm9ybT0iIG1hdHJpeCgxIDAgMCAxIDAgMCkgIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KCTxwYXRoIGQ9Ik0gNDUgOTAgYyAtMTAuNjEzIDAgLTIwLjkyMiAtMy43NzMgLTI5LjAyOCAtMTAuNjI1IGMgLTAuNjQ4IC0wLjU0OCAtMC44OCAtMS40NDQgLTAuNTc5IC0yLjIzNyBDIDIwLjAzNCA2NC45MTkgMzEuOTMzIDU2LjcxIDQ1IDU2LjcxIHMgMjQuOTY2IDguMjA5IDI5LjYwNyAyMC40MjggYyAwLjMwMSAwLjc5MyAwLjA2OSAxLjY4OSAtMC41NzkgMi4yMzcgQyA2NS45MjIgODYuMjI3IDU1LjYxMyA5MCA0NSA5MCB6IiBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IGZpbGw6IHJnYigxNjUsMTY0LDE2NCk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiIHRyYW5zZm9ybT0iIG1hdHJpeCgxIDAgMCAxIDAgMCkgIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9nPgo8L3N2Zz4=";
 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: [
@@ -465,29 +502,51 @@ var NextGameLabel_default = NextGameLabel;
 function generateTagsDisplay(tag) {
   return /* @__PURE__ */ jsx(Chip, { tag }, tag.id);
 }
-function renderTagsFromIds(ids, legalTags) {
+function renderTagsFromIds(ids, legalTags, options = {}) {
   if (!ids || !legalTags || legalTags.length === 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
+  const { showEventTag = false, eventTagId } = options;
   const validTags = ids.map((id) => legalTags.find((tag) => tag.id === id)).filter((tag) => Boolean(tag));
-  return validTags.map((tag) => generateTagsDisplay(tag));
+  const sortedTags = [...validTags].sort((a, b) => {
+    if (showEventTag && eventTagId !== void 0) {
+      if (a.id === eventTagId && b.id === eventTagId) return 0;
+      if (a.id === eventTagId) return -1;
+      if (b.id === eventTagId) return 1;
+    }
+    const priorityOrder = ["Organizer Run", "Display Only"];
+    const aIndex = priorityOrder.indexOf(a.label);
+    const bIndex = priorityOrder.indexOf(b.label);
+    if (aIndex !== -1 && bIndex !== -1) {
+      return aIndex - bIndex;
+    }
+    if (aIndex !== -1) return -1;
+    if (bIndex !== -1) return 1;
+    return 0;
+  });
+  return sortedTags.map((tag) => generateTagsDisplay(tag));
 }
 var BaseSearchResultCard = ({
   result,
   onClick,
   children,
   icon,
-  tags
+  tags,
+  showEventTag,
+  eventTagId
 }) => {
+  const router = useRouter();
   const handleClick = (e) => {
+    const url = `/${result.type}/${result.id}`;
+    if (e.ctrlKey || e.metaKey || e.shiftKey) {
+      e.stopPropagation();
+      window.open(url, "_blank");
+      return;
+    }
     if (onClick) {
-      if (e.ctrlKey || e.metaKey || e.shiftKey) {
-        e.stopPropagation();
-        const url = `/${result.type}/${result.id}`;
-        window.open(url, "_blank");
-      } else {
-        onClick(result.id);
-      }
+      onClick(result.id);
+    } else {
+      router.push(url);
     }
   };
   return /* @__PURE__ */ jsx(
@@ -496,7 +555,7 @@ var BaseSearchResultCard = ({
       elevation: 6,
       sx: {
         width: "100%",
-        cursor: onClick ? "pointer" : "default",
+        cursor: "pointer",
         boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.15)",
         transition: "box-shadow 0.3s ease-in-out",
         "&:hover": {
@@ -508,17 +567,17 @@ var BaseSearchResultCard = ({
       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 }),
+          /* @__PURE__ */ jsx(Typography7, { 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,
+          result.type === "table" && result.shortDescription ? /* @__PURE__ */ jsx(Typography7, { variant: "body2", sx: { mb: 1 }, children: result.shortDescription }) : null,
           children,
-          result.type === "table" ? /* @__PURE__ */ jsx(Typography6, { variant: "body1", children: (() => {
+          result.type === "table" ? /* @__PURE__ */ jsx(Typography7, { 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) })
+          })() }) : /* @__PURE__ */ jsx(Typography7, { 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, { showEventTag, eventTagId }) })
         ] })
       ] })
     }
@@ -528,7 +587,9 @@ var BaseSearchResultCard_default = BaseSearchResultCard;
 var PlayerResultCard = ({
   result,
   onClick,
-  tags
+  tags,
+  showEventTag,
+  eventTagId
 }) => {
   const firstLetter = result.title.charAt(0).toUpperCase();
   const getAvatarColor = (name) => {
@@ -560,7 +621,7 @@ var PlayerResultCard = ({
   const playerIcon = /* @__PURE__ */ jsx(
     Avatar,
     {
-      src: result.imageUrl,
+      src: result.imageUrl || DEFAULT_PROFILE_PIC,
       alt: result.title,
       sx: {
         width: 40,
@@ -570,13 +631,25 @@ var PlayerResultCard = ({
       children: !result.imageUrl && firstLetter
     }
   );
-  return /* @__PURE__ */ jsx(BaseSearchResultCard_default, { result, onClick, icon: playerIcon, tags });
+  return /* @__PURE__ */ jsx(
+    BaseSearchResultCard_default,
+    {
+      result,
+      onClick,
+      icon: playerIcon,
+      tags,
+      showEventTag,
+      eventTagId
+    }
+  );
 };
 var PlayerResultCard_default = PlayerResultCard;
 var TableResultCard = ({
   result,
   onClick,
-  tags
+  tags,
+  showEventTag,
+  eventTagId
 }) => {
   const rawCapacity = result.capacity;
   const hasDefinedCapacity = typeof rawCapacity === "number" && Number.isFinite(rawCapacity) && rawCapacity > 0;
@@ -594,46 +667,59 @@ var TableResultCard = ({
       }
     }
   );
-  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
-      ] }),
-      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: occupancyPercentage,
-        sx: {
-          height: 10,
-          borderRadius: 5,
-          backgroundColor: "#e0e0e0",
-          "& .MuiLinearProgress-bar": {
-            backgroundColor: hasDefinedCapacity ? availableSlots > 0 ? "#4caf50" : "#f44336" : "#2196f3"
+  return /* @__PURE__ */ jsx(
+    BaseSearchResultCard_default,
+    {
+      result,
+      onClick,
+      icon: tableIcon,
+      tags,
+      showEventTag,
+      eventTagId,
+      children: /* @__PURE__ */ jsxs(Box8, { sx: { mb: 2 }, children: [
+        /* @__PURE__ */ jsxs(Box8, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+          /* @__PURE__ */ jsxs(Typography7, { variant: "body2", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Players:" }),
+            " ",
+            hasDefinedCapacity ? `${activePlayers}/${capacity}` : activePlayers
+          ] }),
+          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: 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" })
-  ] }) });
+        ),
+        hasDefinedCapacity && /* @__PURE__ */ jsx(Typography7, { variant: "body2", sx: { mt: 0.5, textAlign: "right" }, children: availableSlots > 0 ? `${availableSlots} slot${availableSlots !== 1 ? "s" : ""} available` : "Table full" })
+      ] })
+    }
+  );
 };
 var TableResultCard_default = TableResultCard;
 var EventResultCard = ({
   result,
   onClick,
-  tags
+  tags,
+  showEventTag,
+  eventTagId
 }) => {
   const formatDate = (dateString) => {
     const options = {
@@ -645,7 +731,7 @@ var EventResultCard = ({
     try {
       const date = new Date(dateString);
       return date.toLocaleDateString("en-US", options);
-    } catch (error) {
+    } catch (__) {
       return dateString;
     }
   };
@@ -660,29 +746,40 @@ var EventResultCard = ({
       }
     }
   );
-  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
+  return /* @__PURE__ */ jsx(
+    BaseSearchResultCard_default,
+    {
+      result,
+      onClick,
+      icon: eventIcon,
+      tags,
+      showEventTag,
+      eventTagId,
+      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(Typography7, { 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(Typography7, { variant: "body2", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Location:" }),
+            " ",
+            location
+          ] })
+        ] }),
+        result.organizer && /* @__PURE__ */ jsxs(Typography7, { variant: "body2", sx: { mt: 1 }, children: [
+          /* @__PURE__ */ jsx("strong", { children: "Organizer:" }),
+          " ",
+          result.organizer
+        ] })
       ] })
-    ] }),
-    result.organizer && /* @__PURE__ */ jsxs(Typography6, { variant: "body2", sx: { mt: 1 }, children: [
-      /* @__PURE__ */ jsx("strong", { children: "Organizer:" }),
-      " ",
-      result.organizer
-    ] })
-  ] }) });
+    }
+  );
 };
 var EventResultCard_default = EventResultCard;
 var ResultsContainer = ({
@@ -690,27 +787,29 @@ var ResultsContainer = ({
   onResultClick,
   tags,
   pagination,
-  onPacketChange
+  onPacketChange,
+  showEventTag,
+  eventTagId
 }) => {
   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");
-  };
-  const onTableClick = (id) => {
-    onResultClick == null ? void 0 : onResultClick(id, "table");
-  };
-  const onEventClick = (id) => {
-    onResultClick == null ? void 0 : onResultClick(id, "event");
-  };
+  const onPlayerClick = onResultClick ? (id) => {
+    onResultClick(id, "player");
+  } : void 0;
+  const onTableClick = onResultClick ? (id) => {
+    onResultClick(id, "table");
+  } : void 0;
+  const onEventClick = onResultClick ? (id) => {
+    onResultClick(id, "event");
+  } : void 0;
   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: [
+    pagination && /* @__PURE__ */ jsx(Box8, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: /* @__PURE__ */ jsxs(Typography7, { variant: "body2", color: "text.secondary", children: [
       "Showing ",
       startResult,
       "-",
@@ -727,7 +826,9 @@ var ResultsContainer = ({
             {
               result,
               onClick: onPlayerClick,
-              tags
+              tags,
+              showEventTag,
+              eventTagId
             },
             result.id
           );
@@ -737,7 +838,9 @@ var ResultsContainer = ({
             {
               result,
               onClick: onTableClick,
-              tags
+              tags,
+              showEventTag,
+              eventTagId
             },
             result.id
           );
@@ -747,7 +850,9 @@ var ResultsContainer = ({
             {
               result,
               onClick: onEventClick,
-              tags
+              tags,
+              showEventTag,
+              eventTagId
             },
             result.id
           );
@@ -773,10 +878,21 @@ var ScrollableResultsList = ({
   tags,
   maxHeight = 400,
   onResultClick,
-  emptyText
+  emptyText,
+  showEventTag,
+  eventTagId
 }) => {
   const hasResults = Array.isArray(results) && results.length > 0;
-  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." }) });
+  return /* @__PURE__ */ jsx(Box8, { sx: { maxHeight, overflowY: "auto", pr: 1 }, children: hasResults ? /* @__PURE__ */ jsx(
+    ResultsContainer_default,
+    {
+      results,
+      onResultClick,
+      tags,
+      showEventTag,
+      eventTagId
+    }
+  ) : /* @__PURE__ */ jsx(Box8, { sx: { textAlign: "center", py: 2 }, children: emptyText || "No results to display." }) });
 };
 var ScrollableResultsList_default = ScrollableResultsList;
 var PlayersScrollableList = ({
@@ -786,16 +902,15 @@ var PlayersScrollableList = ({
   onResultClick
 }) => {
   const players = (results || []).filter((r) => (r == null ? void 0 : r.type) === "player");
-  const handleClick = (id) => onResultClick == null ? void 0 : onResultClick(id);
   return /* @__PURE__ */ jsx(
     ScrollableResultsList_default,
     {
       results: players,
       tags,
       maxHeight,
-      onResultClick: (id, type) => {
-        if (type === "player") handleClick(id);
-      }
+      onResultClick: onResultClick ? (id, type) => {
+        if (type === "player") onResultClick(id);
+      } : void 0
     }
   );
 };
@@ -821,11 +936,13 @@ function SearchPageLayout({
     query: "",
     titleOnly: false
   },
-  includeExpiredTables: initialIncludeExpiredTables = false,
+  initialDistance,
+  distances,
   onTypeChange,
   onTagChange,
   onTextSearchChange,
   onIncludeExpiredTablesChange,
+  onDistanceChange,
   onSubmit,
   onResultClick,
   onPacketChange,
@@ -833,14 +950,16 @@ function SearchPageLayout({
   validTags,
   allTags,
   searchTypes,
-  isLoading = false
+  isLoading = false,
+  eventTagId
 }) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const [selectedTypes, setSelectedTypes] = useState(initialSelectedTypes);
   const [selectedTags, setSelectedTags] = useState(initialSelectedTags);
   const [textSearch, setTextSearch] = useState(initialTextSearch);
-  const [includeExpiredTables, setIncludeExpiredTables] = useState(initialIncludeExpiredTables);
+  const [includeExpiredTables, setIncludeExpiredTables] = useState(false);
+  const [distance, setDistance] = useState(initialDistance);
   useEffect(() => {
     setSelectedTypes(initialSelectedTypes);
   }, [initialSelectedTypes]);
@@ -851,8 +970,8 @@ function SearchPageLayout({
     setTextSearch(initialTextSearch);
   }, [initialTextSearch]);
   useEffect(() => {
-    setIncludeExpiredTables(initialIncludeExpiredTables);
-  }, [initialIncludeExpiredTables]);
+    setDistance(initialDistance);
+  }, [initialDistance]);
   const handleTypeChange = (types) => {
     setSelectedTypes(types);
     if (onTypeChange) onTypeChange(types);
@@ -869,12 +988,17 @@ function SearchPageLayout({
     setIncludeExpiredTables(include);
     if (onIncludeExpiredTablesChange) onIncludeExpiredTablesChange(include);
   };
+  const handleDistanceChange = (dist) => {
+    setDistance(dist);
+    if (onDistanceChange) onDistanceChange(dist);
+  };
   const handleSubmit = () => {
     const currentCriteria = {
       selectedTypes,
       selectedTags,
       textSearch,
-      includeExpiredTables
+      includeExpiredTables,
+      distance
     };
     if (onSubmit) {
       onSubmit(currentCriteria);
@@ -914,10 +1038,13 @@ function SearchPageLayout({
             initialSelectedTags: selectedTags,
             initialTextSearch: textSearch,
             includeExpiredTables,
+            distance,
+            distances,
             onTypeChange: handleTypeChange,
             onTagChange: handleTagChange,
             onTextSearchChange: handleTextSearchChange,
             onIncludeExpiredTablesChange: handleIncludeExpiredTablesChange,
+            onDistanceChange: handleDistanceChange,
             onSubmit: handleSubmit,
             tags: validTags,
             searchTypes
@@ -944,7 +1071,9 @@ function SearchPageLayout({
             pagination,
             onPacketChange,
             onResultClick,
-            tags: allTags
+            tags: allTags,
+            showEventTag: true,
+            eventTagId
           }
         ) })
       ] }) })
@@ -955,24 +1084,27 @@ var TablesScrollableList = ({
   results,
   tags,
   maxHeight,
-  onResultClick
+  onResultClick,
+  showEventTag,
+  eventTagId
 }) => {
   const tables = (results || []).filter((r) => (r == null ? void 0 : r.type) === "table");
-  const handleClick = (id) => onResultClick == null ? void 0 : onResultClick(id);
   return /* @__PURE__ */ jsx(
     ScrollableResultsList_default,
     {
       results: tables,
       tags,
       maxHeight,
-      onResultClick: (id, type) => {
-        if (type === "table") handleClick(id);
-      }
+      onResultClick: onResultClick ? (id, type) => {
+        if (type === "table") onResultClick(id);
+      } : void 0,
+      showEventTag,
+      eventTagId
     }
   );
 };
 var TablesScrollableList_default = TablesScrollableList;
 
-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 };
+export { BaseSearchResultCard_default as BaseSearchResultCard, DistanceFilter_default as DistanceFilter, 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