@dcrackel/hematournamentui 1.0.701 → 1.0.702

package/dist/hematournamentui-tailwind.css

@@ -1187,6 +1187,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-20 {
+    min-width: calc(var(--spacing) * 20);
+  }
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
@@ -1295,6 +1298,9 @@
   .flex-row {
     flex-direction: row;
   }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -1810,6 +1816,9 @@
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
+  .pt-7 {
+    padding-top: calc(var(--spacing) * 7);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }

package/package.json

@@ -1,92 +1,92 @@
-{
-  "name": "@dcrackel/hematournamentui",
-  "private": false,
-  "version": "1.0.701",
-  "type": "module",
-  "main": "dist/HemaTournamentUI-lib.umd.js",
-  "module": "dist/HemaTournamentUI-lib.es.js",
-  "style": "dist/hematournamentui.css",
-  "exports": {
-    ".": {
-      "import": "./dist/HemaTournamentUI-lib.es.js",
-      "require": "./dist/HemaTournamentUI-lib.umd.js"
-    },
-    "./styles.css": "./dist/hematournamentui.css",
-    "./tailwind.css": "./dist/hematournamentui-tailwind.css"
-  },
-  "scripts": {
-    "dev-donotuse": "vite",
-    "build": "npm version patch && vite build && npm run build:package-css",
-    "build:package-css": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./dist/hematournamentui-tailwind.css",
-    "publish:package": "npm publish",
-    "preview": "vite preview",
-    "build-storybook": "npm run build:tailwind && storybook build",
-    "build:tailwind": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./tailwind/output.css",
-    "storybook": "concurrently \"npm run watch:tailwind\" \"npm run watch:storybook\"",
-    "watch:storybook": "storybook dev -p 6006",
-    "watch:tailwind": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./tailwind/output.css --watch",
-    "lint": "eslint --ext .ts,.vue .",
-    "test": "vitest",
-    "coverage": "vitest run --coverage",
-    "postinstall": "patch-package"
-  },
-  "dependencies": {
-    "@fontsource/fira-code": "^5.2.7",
-    "@fontsource/inter": "^5.2.8",
-    "@fontsource/roboto-mono": "^5.2.9",
-    "@storybook/icons": "^2.0.2",
-    "@tiptap/extension-bold": "^2.1.13",
-    "@tiptap/extension-highlight": "^2.1.13",
-    "@tiptap/extension-text-align": "^2.1.13",
-    "@tiptap/starter-kit": "^2.1.13",
-    "@tiptap/vue-3": "^2.1.13",
-    "cropperjs": "^2.1.1",
-    "font-awesome": "^4.7.0",
-    "glob": "^13.0.6",
-    "lru-cache": "^11.3.6",
-    "node-fetch": "^3.3.2",
-    "postcss-nesting": "^14.0.0",
-    "rimraf": "^6.1.3",
-    "vue": "^3.5.34",
-    "vue-avatar-cropper": "^6.1.1",
-    "vue-google-autocomplete": "^1.1.4",
-    "vue3-draggable": "^2.0.9",
-    "vuedraggable": "^4.1.0"
-  },
-  "devDependencies": {
-    "@babel/eslint-parser": "^7.28.6",
-    "@chromatic-com/storybook": "^5.2.1",
-    "@eslint/eslintrc": "^3.3.5",
-    "@storybook/addon-docs": "^10.4.0",
-    "@storybook/addon-links": "^10.4.0",
-    "@storybook/react": "^10.4.0",
-    "@storybook/vue3-vite": "^10.4.0",
-    "@tailwindcss/cli": "^4.3.0",
-    "@tailwindcss/postcss": "^4.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.59.3",
-    "@typescript-eslint/parser": "^8.59.3",
-    "@vitejs/plugin-vue": "^6.0.7",
-    "@vitest/coverage-v8": "^4.1.6",
-    "@vue/test-utils": "^2.4.10",
-    "@vuepic/vue-datepicker": "^12.1.0",
-    "autoprefixer": "^10.5.0",
-    "concurrently": "^9.2.1",
-    "eslint": "^9.9.0",
-    "eslint-plugin-jest": "^29.15.2",
-    "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "^10.4.0",
-    "eslint-plugin-vue": "^10.9.1",
-    "happy-dom": "^20.9.0",
-    "patch-package": "^8.0.1",
-    "postcss": "^8.5.14",
-    "storybook": "^10.4.0",
-    "storybook-vue3-router": "^7.0.0",
-    "tailwindcss": "^4.3.0",
-    "vite": "^8.0.13",
-    "vitest": "^4.1.6",
-    "vue-eslint-parser": "^10.4.0"
-  },
-  "overrides": {
-    "@storybook/preview-api": "^9.1.5"
-  }
-}
+{
+  "name": "@dcrackel/hematournamentui",
+  "private": false,
+  "version": "1.0.702",
+  "type": "module",
+  "main": "dist/HemaTournamentUI-lib.umd.js",
+  "module": "dist/HemaTournamentUI-lib.es.js",
+  "style": "dist/hematournamentui.css",
+  "exports": {
+    ".": {
+      "import": "./dist/HemaTournamentUI-lib.es.js",
+      "require": "./dist/HemaTournamentUI-lib.umd.js"
+    },
+    "./styles.css": "./dist/hematournamentui.css",
+    "./tailwind.css": "./dist/hematournamentui-tailwind.css"
+  },
+  "scripts": {
+    "dev-donotuse": "vite",
+    "build": "npm version patch && vite build && npm run build:package-css",
+    "build:package-css": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./dist/hematournamentui-tailwind.css",
+    "publish:package": "npm publish",
+    "preview": "vite preview",
+    "build-storybook": "npm run build:tailwind && storybook build",
+    "build:tailwind": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./tailwind/output.css",
+    "storybook": "concurrently \"npm run watch:tailwind\" \"npm run watch:storybook\"",
+    "watch:storybook": "storybook dev -p 6006",
+    "watch:tailwind": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./tailwind/output.css --watch",
+    "lint": "eslint --ext .ts,.vue .",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "postinstall": "patch-package"
+  },
+  "dependencies": {
+    "@fontsource/fira-code": "^5.2.7",
+    "@fontsource/inter": "^5.2.8",
+    "@fontsource/roboto-mono": "^5.2.9",
+    "@storybook/icons": "^2.0.2",
+    "@tiptap/extension-bold": "^2.1.13",
+    "@tiptap/extension-highlight": "^2.1.13",
+    "@tiptap/extension-text-align": "^2.1.13",
+    "@tiptap/starter-kit": "^2.1.13",
+    "@tiptap/vue-3": "^2.1.13",
+    "cropperjs": "^2.1.1",
+    "font-awesome": "^4.7.0",
+    "glob": "^13.0.6",
+    "lru-cache": "^11.3.6",
+    "node-fetch": "^3.3.2",
+    "postcss-nesting": "^14.0.0",
+    "rimraf": "^6.1.3",
+    "vue": "^3.5.34",
+    "vue-avatar-cropper": "^6.1.1",
+    "vue-google-autocomplete": "^1.1.4",
+    "vue3-draggable": "^2.0.9",
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.28.6",
+    "@chromatic-com/storybook": "^5.3.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@storybook/addon-docs": "^10.5.6",
+    "@storybook/addon-links": "^10.5.6",
+    "@storybook/react": "^10.5.6",
+    "@storybook/vue3-vite": "^10.5.6",
+    "@tailwindcss/cli": "^4.3.0",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.59.3",
+    "@typescript-eslint/parser": "^8.59.3",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitest/coverage-v8": "^4.1.6",
+    "@vue/test-utils": "^2.4.10",
+    "@vuepic/vue-datepicker": "^12.1.0",
+    "autoprefixer": "^10.5.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-jest": "^29.15.2",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-storybook": "^10.5.6",
+    "eslint-plugin-vue": "^10.9.1",
+    "happy-dom": "^20.9.0",
+    "patch-package": "^8.0.1",
+    "postcss": "^8.5.14",
+    "storybook": "^10.5.6",
+    "storybook-vue3-router": "^7.0.0",
+    "tailwindcss": "^4.3.0",
+    "vite": "^8.0.13",
+    "vitest": "^4.1.6",
+    "vue-eslint-parser": "^10.4.0"
+  },
+  "overrides": {
+    "@storybook/preview-api": "^9.1.5"
+  }
+}

package/src/stories/Molecules/Buttons/ButtonBar/ButtonBar.vue

@@ -7,7 +7,7 @@
         @click="selectButton(button.id)"
     >
       <div
-          class="w-20 py-2 transition-all duration-400 ease-in-out border border-dropdownSelect shadow-md"
+          class="min-w-20 px-4 py-2 transition-all duration-400 ease-in-out border border-dropdownSelect shadow-md"
           :class="{
           'rounded-l-lg': index === 0,
           'rounded-r-lg': index === buttons.length - 1,

package/src/stories/Organisms/Cards/KioskCard/KioskCard.vue

@@ -49,9 +49,18 @@
                 width="max-w-56"
                 @update:selectedItem="handleEventChange"
             />
-          </div>
-          <div class="flex justify-end w-full pr-4">
-            <ButtonBar
+          </div>
+          <div class="flex justify-end w-full pr-4">
+            <BaseButton
+                v-if="editableKiosk.Type === 'ScoreBoard'"
+                :label="isTestMode ? 'Testing' : 'Test'"
+                size="xs"
+                type="primary"
+                :selected="isTestMode"
+                class="mr-6 shrink-0"
+                @buttonClick="handleScoreboardTest"
+            />
+            <ButtonBar
                 v-if="userRole !== 'Director'"
                 :buttons="typeButtons"
                 :selected="editableKiosk.Type || 'Unassigned'"
@@ -131,7 +140,7 @@ const connectedColorByType = {
 export default {
   name: 'KioskCardPC',
   components: { BaseIcon, BaseText, DropDownMenu, ButtonBar, BaseButton },
-  emits: ['update:kiosk', 'update:ringChange', 'update:staffChange', 'update:eventChange', 'update:selectedType', 'update:assignToMe', 'update:editKiosk', 'remove:kiosk'],
+  emits: ['update:kiosk', 'update:ringChange', 'update:staffChange', 'update:eventChange', 'update:selectedType', 'update:assignToMe', 'update:editKiosk', 'test:scoreboard', 'remove:kiosk'],
   props: {
     displayObject: {
       type: Object,
@@ -177,7 +186,10 @@ export default {
       localSelectedEvent: { text: this.displayObject.Event?.EventName || 'Select Event', link: this.displayObject.Event?.EventId || '' }
     };
   },
-  computed: {
+  computed: {
+    isTestMode() {
+      return Boolean(this.displayObject.TestMode);
+    },
     getIcon() {
       const iconMap = this.editableKiosk.Connected ? connectedIconByType : disconnectedIconByType;
       return iconMap[this.editableKiosk.Type] || (this.editableKiosk.Connected ? 'fa-wifi-exclamation' : 'fa-wifi-slash');
@@ -270,8 +282,15 @@ export default {
       }
     }
   },
-  methods: {
-    handleRingChange(item) {
+  methods: {
+    handleScoreboardTest() {
+      this.$emit('test:scoreboard', {
+        ...this.displayObject,
+        ...this.editableKiosk,
+        TestMode: !this.isTestMode
+      });
+    },
+    handleRingChange(item) {
       this.localSelectedRing = item;
       this.editableKiosk.DisplayName = item.text;
       this.editableKiosk.AssignedTo = item.link;

package/src/stories/Organisms/Cards/WaitlistFencerCard/WaitlistFencerCard.vue

@@ -0,0 +1,129 @@
+<template>
+  <div v-if="person"
+       class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-poolBox hover:border-bright">
+    <div class="hidden md:block mr-4 border-r border-dropdownSelect h-20 w-10 items-center text-center pt-7">
+      <BaseText :text="queueLabel" size="md" color="quaternary" weight="bold"/>
+    </div>
+    <div class="block md:hidden mr-4 border-r border-dropdownSelect h-16 w-5 items-center text-center pt-5">
+      <BaseText :text="queueLabel" size="sm" color="quaternary" weight="bold"/>
+    </div>
+
+    <div class="hidden md:block mr-4">
+      <div v-if="!portraitURL" class="w-14 h-14 rounded-xl bg-dropdownSelect flex items-center justify-center">
+        <BaseText text="" size="sm" color="neutral" weight="bold"/>
+      </div>
+      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-14 h-14 rounded-xl">
+    </div>
+
+    <div class="flex flex-col w-3/4 md:w-4/12 justify-start">
+      <button class="flex justify-start overflow-hidden text-left" type="button" @click="handleForwardToProfile">
+        <BaseText :text="displayName" size="md" color="quaternary" weight="bold" class="text-sm md:text-xl truncate"/>
+      </button>
+      <span class="w-full flex justify-start">
+        <BaseText :text="clubName" size="md" color="quinary" weight="normal" class="hidden md:block"/>
+        <BaseText :text="clubShortName" size="xs" color="quinary" weight="normal" class="block md:hidden"/>
+      </span>
+
+      <div class="grid md:hidden grid-cols-2 gap-x-4 mr-10">
+        <div class="flex">
+          <BaseText text="M2: " size="xs" color="quaternary" weight="normal" class="mr-1"/>
+          <BaseText :text="M2Rating" size="xs" color="quinary" weight="bold" class="ml-1"/>
+        </div>
+        <div class="flex">
+          <BaseText text="HR: " size="xs" color="quaternary" weight="normal" class="mr-1"/>
+          <BaseText :text="HEMARating" size="xs" color="quinary" weight="bold" class="ml-1"/>
+        </div>
+      </div>
+    </div>
+
+    <div class="hidden md:grid grid-cols-1 gap-x-4 mr-4 w-36">
+      <div class="flex">
+        <BaseText text="M2Rating:" size="sm" color="quaternary" weight="normal" class="mr-2"/>
+        <BaseText :text="M2Rating" size="sm" color="quinary" weight="bold" class="pt-0.5"/>
+      </div>
+      <div class="flex">
+        <BaseText text="HemaRating:" size="sm" color="quaternary" weight="normal" class="mr-2"/>
+        <BaseText :text="HEMARating" size="sm" color="quinary" weight="bold"/>
+      </div>
+    </div>
+
+    <div class="mr-2 md:mr-4 md:ml-auto flex flex-row">
+      <div class="flex justify-center w-20">
+        <div class="hidden md:flex border border-dropdownSelect shadow-md rounded-lg bg-natural h-9 px-3 items-center">
+          <BaseText text="Unpaid" size="xs" color="quinary" weight="bold"/>
+        </div>
+      </div>
+      <div class="w-44 flex justify-end">
+        <BaseButton label="Move to Active" size="xs" type="primary" icon-name="fa-arrow-up-from-bracket"
+                    class="border border-dropdownSelect shadow-md rounded-l-lg bg-natural w-40 m-0! p-0! h-10"
+                    @buttonClick="handleMoveToActive"/>
+      </div>
+    </div>
+
+    <div
+        class="block md:ml-4 border-l border-dropdownSelect h-16 w-9 md:h-20 md:w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg pt-5 md:pt-6">
+      <BaseIcon icon-name="fa-circle-xmark" size="" color="quinary" hover="alarm"
+                @click="handleRemoveFencer" class="text-md md:text-2xl"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+
+export default {
+  name: 'WaitlistFencerCard',
+  components: {BaseButton, BaseIcon, BaseText},
+  emits: ['forward:toProfile', 'move:active', 'remove:fencer'],
+  props: {
+    person: {
+      type: Object,
+      required: true
+    },
+    queuePosition: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    queueLabel() {
+      return `#${this.queuePosition}`;
+    },
+    displayName() {
+      return this.person?.Person?.DisplayName || 'Unknown fencer';
+    },
+    clubName() {
+      return this.person?.Person?.Club?.Name || 'No club listed';
+    },
+    clubShortName() {
+      return this.person?.Person?.Club?.ShortName || this.clubName;
+    },
+    portraitURL() {
+      const images = this.person?.Person?.Images || [];
+      const portrait = images.find(image => image.Type === 'Portrait');
+      return portrait ? portrait.URL : '';
+    },
+    HEMARating() {
+      const rating = this.person?.Person?.HEMARatings?.[0]?.Rating;
+      return rating || 0;
+    },
+    M2Rating() {
+      const rating = this.person?.Person?.M2Ratings?.[0]?.Rating;
+      return rating || 'U';
+    }
+  },
+  methods: {
+    handleMoveToActive() {
+      this.$emit('move:active', {...this.person});
+    },
+    handleRemoveFencer() {
+      this.$emit('remove:fencer', {...this.person});
+    },
+    handleForwardToProfile() {
+      this.$emit('forward:toProfile', this.person.PersonId);
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Containers/KioskContainer/KioskContainer.vue

@@ -13,9 +13,9 @@
         </div>
       </section>
       <section v-if="localDisplays.length > 0" class="flex flex-col">
-        <div v-if="scoreboards.length > 0">
-          <BaseText text="Scoreboards" size="lg" color="quinary" weight="bold" class="w-full text-left"/>
-          <div class="border-b border-dropdownSelect mb-4"/>
+        <div v-if="scoreboards.length > 0">
+          <BaseText text="Scoreboards" size="lg" color="quinary" weight="bold" class="w-full text-left"/>
+          <div class="border-b border-dropdownSelect mb-4"/>
           <div v-for="scoreboard in scoreboards" :key="scoreboard.DisplayId + '-' + scoreboard.Type"
                class="flex flex-col py-2">
             <KioskCard :displayObject="scoreboard"
@@ -28,9 +28,10 @@
                        @update:ringChange="handeRingChange"
                        @remove:kiosk="handleRemove"
                        @update:assignToMe="handleAssignToMe"
-                       @update:selectedType="handleChangeType"
-                       @update:editKiosk="handleEditKiosk"
-            />
+                       @update:selectedType="handleChangeType"
+                       @update:editKiosk="handleEditKiosk"
+                       @test:scoreboard="handleScoreboardTest"
+            />
           </div>
         </div>
 
@@ -103,7 +104,7 @@ export default {
     BaseText,
     emptyDesertIcon
   },
-  emits: ['remove:kiosk', 'update:selectedStaff', 'update:selectedEvent', 'update:ringChange','update:selectedType', 'submit:kiosk', 'update:assignToMe'],
+  emits: ['remove:kiosk', 'test:scoreboard', 'update:selectedStaff', 'update:selectedEvent', 'update:ringChange','update:selectedType', 'submit:kiosk', 'update:assignToMe'],
   props: {
     displays: {
       type: Array,
@@ -158,8 +159,11 @@ export default {
       });
     }
   },
-  methods: {
-    transformAssignedTo(display) {
+  methods: {
+    handleScoreboardTest(display) {
+      this.$emit('test:scoreboard', display);
+    },
+    transformAssignedTo(display) {
       if (display.Person) {
         if (display.Person.DisplayName === 'BYE') {
           return {text: 'Unassigned', link: 'Unassigned'};

package/src/stories/Organisms/Headers/AttendanceSummary/AttendanceSummary.vue

@@ -5,17 +5,19 @@
       <BaseText :text="event.RuleSummary" size="" color="quinary" weight="normal" class="text-xs md:text-md" />
       <span class="hidden md:h-8"></span>
     </section>
-    <section class="hidden md:flex flex-col">
-      <div class="flex justify-center items-center">
-        <BaseText text="Fencer Counts" size="sm" color="quinary"  />
-      </div>
-      <div class="flex">
-        <EventStatusBox :status-count="absent" status-label="ABSENT" box-color="bg-eventBoxBlue" />
-        <EventStatusBox :status-count="present" status-label="PRESENT" box-color="bg-eventBoxGreen" />
-      </div>
-    </section>
-  </div>
-</template>
+    <section class="hidden md:flex flex-col">
+      <div class="flex justify-center items-center">
+        <BaseText text="Fencer Counts" size="sm" color="quinary"  />
+      </div>
+      <div class="flex flex-row flex-nowrap">
+        <EventStatusBox :status-count="absent" status-label="ABSENT" box-color="bg-eventBoxBlue" />
+        <EventStatusBox :status-count="present" status-label="PRESENT" box-color="bg-eventBoxGreen" />
+        <EventStatusBox v-if="showRosterCounts" :status-count="activeRosterLabel" status-label="ACTIVE" box-color="bg-eventBoxBlueTwo" />
+        <EventStatusBox v-if="showRosterCounts" :status-count="waitlistCount" status-label="WAITLIST" box-color="bg-eventBoxGreenTwo" />
+      </div>
+    </section>
+  </div>
+</template>
 
 <script>
 import EventStatusBox from "../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue";
@@ -37,11 +39,35 @@ export default {
       default: "0",
       required: true,
     },
-    present: {
-      type: [Number, String],
-      default: "0",
-      required: true,
-    },
-  },
-};
-</script>
+    present: {
+      type: [Number, String],
+      default: "0",
+      required: true,
+    },
+    activeCount: {
+      type: [Number, String],
+      default: '',
+    },
+    waitlistCount: {
+      type: [Number, String],
+      default: '',
+    },
+    capacity: {
+      type: [Number, String],
+      default: '',
+    },
+  },
+  computed: {
+    showRosterCounts() {
+      return this.activeCount !== '' || this.waitlistCount !== '';
+    },
+    activeRosterLabel() {
+      if (!this.capacity) {
+        return this.activeCount;
+      }
+
+      return `${this.activeCount}/${this.capacity}`;
+    }
+  },
+};
+</script>

package/src/stories/Templates/EventManagement/EventAttendance/EventAttendance.stories.js

@@ -1,9 +1,35 @@
 import EditEvents from './EventAttendance.vue';
-import eventPersonGetEventById from '../../../../mocks/eventpersonGetEventById.js';
-import personsAllMock from '../../../../mocks/personGetAllMock.js';
-import clubsMock from '../../../../mocks/clubGetAllMock.js';
-
-export default {
+import eventPersonGetEventById from '../../../../mocks/eventpersonGetEventById.js';
+import personsAllMock from '../../../../mocks/personGetAllMock.js';
+import clubsMock from '../../../../mocks/clubGetAllMock.js';
+
+const makeEventWithCapacity = (event, capacity) => ({
+    ...event,
+    EventRules: [
+        ...(event.EventRules || []),
+        {
+            Rules: {RuleName: 'CutOffNumber'},
+            RuleValue: capacity
+        }
+    ]
+});
+
+const makeWaitlistPerson = (person, waitlistPosition) => ({
+    ...person,
+    Id: `${person.Id}-waitlist`,
+    Status: 'Waitlist',
+    WaitlistPosition: waitlistPosition,
+    Person: {
+        ...person.Person,
+        PersonId: `${person.Person.PersonId}-waitlist`,
+        DisplayName: `${person.Person.DisplayName} WL`
+    }
+});
+
+const waitlistedPersons = eventPersonGetEventById.persons.slice(0, 3).map((person, index) => makeWaitlistPerson(person, index + 1));
+const activeRoster = eventPersonGetEventById.persons.slice(3);
+
+export default {
     title: 'Templates/EventManagement/EventAttendance',
     component: EditEvents,
     tags: ['autodocs'],
@@ -67,12 +93,21 @@ export const NoPeople = {
     }
 };
 
-export const peopleAndLoading = {
-    args: {
-        personsInTournament: eventPersonGetEventById.persons,
-        personsAll: personsAllMock,
-        fencingClubs: clubsMock,
-        event: eventPersonGetEventById.event,
-        loading: true
-    }
-};
+export const peopleAndLoading = {
+    args: {
+        personsInTournament: eventPersonGetEventById.persons,
+        personsAll: personsAllMock,
+        fencingClubs: clubsMock,
+        event: eventPersonGetEventById.event,
+        loading: true
+    }
+};
+
+export const WithWaitlist = {
+    args: {
+        personsInTournament: [...activeRoster, ...waitlistedPersons],
+        personsAll: personsAllMock,
+        fencingClubs: clubsMock,
+        event: makeEventWithCapacity(eventPersonGetEventById.event, activeRoster.length)
+    }
+};