@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -1,259 +1,380 @@
 <template>
   <section v-if="listView" class="flex flex-col items-center">
+    <div v-for="section in listSections" :key="section.key" class="my-4 w-full flex-col md:w-3/4">
+      <BaseText class="my-5" color="primaryHighlight" size="sm" :text="section.label" weight="bold" />
 
-    <!-- Assigned Bouts -->
-    <div v-if="hasAssignedBouts" class="w-full flex-col md:w-3/4 my-4">
-      <div class="flex flex-row justify-between">
-        <BaseText class="my-5" color="primaryHighlight" size="sm" text="Assigned Bouts" weight="bold"/>
-        <div class="flex mr-1">
-          <BaseText class="my-5 ml-5" color="primaryHighlight" size="sm" text="Assigned:"/>
-          <BaseText
-              :text="assignedBoutsToMe.length"
-              class="my-5 ml-2"
-              color="primaryHighlight"
-              size="sm"
-              weight="bold"
-          />
+      <div v-for="bout in section.bouts" :key="bout.BoutId" class="mb-4">
+        <div
+          v-if="getPlannedStation(bout)"
+          data-testid="planned-bout-label"
+          class="mb-1 flex items-center gap-2 rounded border-l-4 border-dropdownSelect bg-white px-2 py-1 shadow-sm"
+          :style="{ borderLeftColor: getPlannedStation(bout).Color }"
+        >
+          <span
+            class="h-2.5 w-2.5 flex-none rounded-full"
+            :style="{ backgroundColor: getPlannedStation(bout).Color }"
+            aria-hidden="true"
+          ></span>
+          <BaseText :text="getPlannedStationLabel(bout)" color="quaternary" size="xs" />
         </div>
-      </div>
-      <div class="border-b border-dropdownSelect mb-5"></div>
-
-      <div v-for="bout in assignedBoutsToMe" :key="bout.BoutId" class="mb-4">
-        <BoutCard
-            :bout="bout"
-            :hostingClubColors="hostingClubColors"
-            :editMode="true"
-            :reorderMode="false"
-            :isAdmin="isAdmin"
-            @action:startBout="handleDirectingFromIds"
-            @action:resumeBout="handleDirectingFromIds"
-            @action:editBout="handleEditFromIds"
-            @action:assignBout="handleAssignBout"
+        <BoutCard
+          :bout="bout"
+          :hostingClubColors="hostingClubColors"
+          :editMode="true"
+          :reorderMode="false"
+          @action:startBout="handleDirectingFromIds"
+          @action:resumeBout="handleDirectingFromIds"
+          @action:editBout="handleEditFromIds"
         />
       </div>
     </div>
+  </section>
 
-    <!-- Existing rounds -->
-    <div
-        v-for="(bouts, roundName) in filteredBouts"
-        :key="bouts[0].BoutId"
-        class="w-full flex-col md:w-3/4 my-4"
-    >
-      <BaseText class="my-5" color="primaryHighlight" size="sm" :text="roundName" weight="bold"/>
-
-      <div v-for="bout in bouts" :key="bout.BoutId" class="mb-4">
-        <BoutCard
-            :bout="bout"
-            :hostingClubColors="hostingClubColors"
-            :editMode="true"
-            :reorderMode="false"
-            :isAdmin="isAdmin"
-            @action:startBout="handleDirectingFromIds"
-            @action:resumeBout="handleDirectingFromIds"
-            @action:editBout="handleEditFromIds"
-            @action:assignBout="handleAssignBout"
+  <section
+    v-else
+    ref="scrollElement"
+    class="mt-4 w-full overflow-x-auto scrollbar-thin"
+    @scroll.passive="scheduleConnectorUpdate"
+  >
+    <div ref="tableauRoot" class="relative min-w-max pb-6">
+      <div class="inline-flex items-start">
+        <TableauColumn
+          v-for="([roundName, roundBouts], roundIndex) in winnerRoundEntries"
+          :key="`winner-${roundName}`"
+          :bouts="roundBouts"
+          :hostingClubColors="hostingClubColors"
+          :roundName="roundName"
+          :bracketSize="bracketSize"
+          :layout="getRoundLayout(roundIndex)"
+          :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          @register-node-anchor="registerNodeAnchor"
+          @action:editBout="handleEditBout"
+          @action:directingBout="handleDirectorBout"
         />
       </div>
-    </div>
-  </section>
 
-  <section v-else class="flex w-full overflow-x-auto mt-4 scrollbar-thin">
-    <div class="min-w-full flex">
-      <div v-for="(bouts, roundName) in groupedBouts.winnerBouts" :key="roundName">
+      <div v-if="placementRoundEntries.length" class="mt-10 flex justify-end pr-10">
         <TableauColumn
-            :bouts="bouts"
-            :hostingClubColors="hostingClubColors"
-            :roundName="roundName"
-            :bracketSize="bracketSize"
-            :largeCards="largeCards"
-            :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-            @action:editBout="handleEditBout"
-            @action:directingBout="handleDirectorBout"
+          v-for="[roundName, roundBouts] in placementRoundEntries"
+          :key="`placement-${roundName}`"
+          :bouts="roundBouts"
+          :hostingClubColors="hostingClubColors"
+          :roundName="roundName"
+          :bracketSize="bracketSize"
+          :layout="placementLayout"
+          :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          @register-node-anchor="registerNodeAnchor"
+          @action:editBout="handleEditBout"
+          @action:directingBout="handleDirectorBout"
         />
       </div>
-    </div>
 
-    <!-- Loser bracket -->
-    <div class="min-w-full flex">
-      <div v-for="(bouts, roundName) in groupedBouts.loserBouts" :key="roundName">
-        <TableauColumn
-            :bouts="bouts"
+      <div v-if="loserRoundEntries.length" class="mt-12 border-t border-dropdownSelect pt-6">
+        <BaseText class="mb-4" color="quaternary" size="sm" text="Consolation" weight="bold" />
+        <div class="inline-flex items-start">
+          <TableauColumn
+            v-for="([roundName, roundBouts], roundIndex) in loserRoundEntries"
+            :key="`loser-${roundName}`"
+            :bouts="roundBouts"
             :hostingClubColors="hostingClubColors"
             :roundName="roundName"
             :bracketSize="bracketSize"
-            :largeCards="largeCards"
+            :layout="getRoundLayout(roundIndex)"
             :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+            @register-node-anchor="registerNodeAnchor"
             @action:editBout="handleEditBout"
             @action:directingBout="handleDirectorBout"
-        />
+          />
+        </div>
       </div>
+
+      <TableauSvgOverlay :size="svgSize" :paths="connectorPaths" />
     </div>
   </section>
 </template>
 
 <script>
-import TableauColumn from "../TableauColumn/TableauColumn.vue";
-import TableauBoutCard from "../../Cards/TableauBoutCard/TableauBoutCard.vue";
-import BoutCard from "../../../Organisms/Cards/BoutCard/BoutCard.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BoutCard from '../../../Organisms/Cards/BoutCard/BoutCard.vue';
+import TableauColumn from '../TableauColumn/TableauColumn.vue';
+import TableauSvgOverlay from './components/TableauSvgOverlay.vue';
+import { buildBracketPaths, createDomAnchorLayout } from './layout/TableauLayoutEngine';
+import {
+  addPlannedStrokesToConnectors,
+  createPlannedStationByBout,
+  getPlannedStationForBout,
+  isBoutSuggestedForViewer
+} from './plannedAssignments';
 
-export default {
-  name: "Tableau",
-  components: { BaseText, BoutCard, TableauBoutCard, TableauColumn },
-  emits: ["action:editBout", "action:directingBout", "action:assignBout"],
-  props: {
-    bouts: { type: Array, required: true },
-    bracketSize: { type: String, required: true },
-    hostingClubColors: { type: Object, required: true },
-    largeCards: { type: Boolean, required: true },
-    listView: { type: Boolean, required: false },
-    isCountingBackwardsMaxScore: { type: Number, default: 0 },
+const MATCH_HEIGHT_PX = 57;
+const BASE_GAP_PX = 16;
+const BASE_PITCH_PX = MATCH_HEIGHT_PX + BASE_GAP_PX;
+const PLACEMENT_ROUND_NAMES = new Set(['Third Place', 'Third Place Match']);
+const ROUND_ORDER = [
+  'Table of 256',
+  'Table of 128',
+  'Table of 64',
+  'Table of 32',
+  'Table of 16',
+  'Table of 8',
+  'Semifinal',
+  'Final',
+  'Grand Final'
+];
 
-    // use role (already present upstream) instead of passing isAdmin
-    role: { type: String, default: "Admin" },
+const roundAliases = {
+  Semifinals: 'Semifinal'
+};
 
-    // needed for "Assigned Bouts" section
-    currentUserId: { type: [Number, String], default: null },
-  },
-  computed: {
-    isAdmin() {
-      return String(this.role || "").toLowerCase() === "admin";
-    },
+const normalizeRoundName = roundName => roundAliases[roundName] || roundName;
+const isConsolationRoundName = roundName => roundName.includes('Consolation');
+const isPlacementRoundName = roundName => PLACEMENT_ROUND_NAMES.has(roundName);
+const getRoundNumber = roundName => Number.parseInt(roundName.match(/\d+/)?.[0] || '0', 10);
+const getBoutNodeId = bout => bout.DEBoutId ?? bout.BoutId;
 
-    assignedBoutsToMe() {
-      const me = Number(this.currentUserId);
-      if (!me) return [];
-      return (this.bouts || [])
-          .filter(
-              (b) =>
-                  Number(b.RefereeId) === me &&
-                  String(b.Status || "").toLowerCase() !== "completed"
-          )
-          .slice()
-          .sort((a, b) => Number(a.DEBoutId ?? 0) - Number(b.DEBoutId ?? 0));
-    },
+const getRoundOrder = roundName => {
+  const mainRoundIndex = ROUND_ORDER.indexOf(normalizeRoundName(roundName));
+  if (mainRoundIndex >= 0) return mainRoundIndex;
+  if (isConsolationRoundName(roundName)) return ROUND_ORDER.length + getRoundNumber(roundName);
+  return ROUND_ORDER.length * 2;
+};
 
-    hasAssignedBouts() {
-      return this.assignedBoutsToMe.length > 0;
-    },
+const sortRoundEntries = ([roundNameA], [roundNameB]) => getRoundOrder(roundNameA) - getRoundOrder(roundNameB);
+const sortBoutsByNodeId = (boutA, boutB) => Number(getBoutNodeId(boutA)) - Number(getBoutNodeId(boutB));
 
-    groupedBouts() {
-      const grouped = this.groupBoutsByRound(this.bouts);
+const addBoutToRound = (rounds, bout) => {
+  const roundName = bout.RoundLabel || 'Unknown Round';
+  return { ...rounds, [roundName]: [...(rounds[roundName] || []), bout] };
+};
 
-      const { winnerBouts, loserBouts } = Object.entries(grouped).reduce(
-          (acc, [roundName, bouts]) => {
-            if (roundName.includes("Consolation")) {
-              acc.loserBouts[roundName] = bouts;
-            } else {
-              acc.winnerBouts[roundName] = bouts;
-            }
-            return acc;
-          },
-          { winnerBouts: {}, loserBouts: {} }
-      );
+const groupBoutsByRound = bouts => (bouts || []).reduce(addBoutToRound, {});
 
-      return { winnerBouts, loserBouts };
-    },
+const isVisibleListBout = bout =>
+  bout.Person1?.DisplayName !== 'BYE' && bout.Person2?.DisplayName !== 'BYE' && bout.Status !== 'Completed';
 
-    combinedBouts() {
-      const combined = {
-        ...this.groupedBouts.winnerBouts,
-        ...this.groupedBouts.loserBouts,
-      };
-      return Object.keys(combined)
-          .sort()
-          .reduce((acc, roundName) => {
-            acc[roundName] = combined[roundName];
-            return acc;
-          }, {});
-    },
+const createVisibleRoundEntry = ([roundName, bouts]) => [
+  roundName,
+  bouts.filter(isVisibleListBout).sort(sortBoutsByNodeId)
+];
 
-    filteredBouts() {
-      return Object.keys(this.combinedBouts)
-          .sort((a, b) => {
-            const priority = {
-              Final: 1,
-              "Third Place Match": 2,
-              Semifinal: 3,
-            };
+const hasBouts = ([, bouts]) => bouts.length > 0;
 
-            const priorityA = priority[a] || 0;
-            const priorityB = priority[b] || 0;
+const createListSection = ([label, bouts]) => ({ key: label, label, bouts });
 
-            if (priorityA || priorityB) return priorityA - priorityB;
+const removeSuggestedBouts = (entries, suggestedBoutIds) =>
+  entries
+    .map(([roundName, bouts]) => [roundName, bouts.filter(bout => !suggestedBoutIds.has(String(bout.BoutId)))])
+    .filter(hasBouts);
 
-            const numA = parseInt(a.match(/\d+/)?.[0] || 0, 10);
-            const numB = parseInt(b.match(/\d+/)?.[0] || 0, 10);
+const createRoundLayout = depth => {
+  const roundMultiplier = 2 ** Math.max(depth, 0);
+  return {
+    gapPx: BASE_PITCH_PX * roundMultiplier - MATCH_HEIGHT_PX,
+    padTopPx: (BASE_PITCH_PX * (roundMultiplier - 1)) / 2
+  };
+};
 
-            return numB - numA;
+export default {
+  name: 'Tableau',
+  components: { BaseText, BoutCard, TableauColumn, TableauSvgOverlay },
+  emits: ['action:editBout', 'action:directingBout'],
+  props: {
+    bouts: { type: Array, required: true },
+    bracketSize: { type: String, required: true },
+    hostingClubColors: { type: Object, required: true },
+    listView: { type: Boolean, default: false },
+    isCountingBackwardsMaxScore: { type: Number, default: 0 },
+    plannedDirectingStations: { type: Array, default: () => [] },
+    plannedBoutAssignments: { type: Array, default: () => [] },
+    viewerPersonId: { type: [Number, String], default: null }
+  },
+  data() {
+    return {
+      connectorPaths: [],
+      inputAnchors: new Map(),
+      outputAnchors: new Map(),
+      resizeObserver: null,
+      scheduledFrame: null,
+      svgSize: { width: 0, height: 0 }
+    };
+  },
+  computed: {
+    roundEntries() {
+      return Object.entries(groupBoutsByRound(this.bouts)).map(([roundName, bouts]) => [
+        roundName,
+        [...bouts].sort(sortBoutsByNodeId)
+      ]);
+    },
+    winnerRoundEntries() {
+      return this.roundEntries
+        .filter(([roundName]) => !isConsolationRoundName(roundName) && !isPlacementRoundName(roundName))
+        .sort(sortRoundEntries);
+    },
+    placementRoundEntries() {
+      return this.roundEntries.filter(([roundName]) => isPlacementRoundName(roundName)).sort(sortRoundEntries);
+    },
+    loserRoundEntries() {
+      return this.roundEntries.filter(([roundName]) => isConsolationRoundName(roundName)).sort(sortRoundEntries);
+    },
+    filteredBouts() {
+      return Object.fromEntries(
+        [...this.roundEntries].sort(sortRoundEntries).map(createVisibleRoundEntry).filter(hasBouts)
+      );
+    },
+    listSections() {
+      const entries = Object.entries(this.filteredBouts);
+      const suggestedBouts = entries
+        .flatMap(([, bouts]) => bouts)
+        .filter(bout =>
+          isBoutSuggestedForViewer({
+            bout,
+            plannedStationByBout: this.plannedStationByBout,
+            viewerPersonId: this.viewerPersonId
           })
-          .reduce((acc, roundName) => {
-            const filtered = this.combinedBouts[roundName]
-                .filter(
-                    (bout) =>
-                        bout.Person1?.DisplayName !== "BYE" &&
-                        bout.Person2?.DisplayName !== "BYE" &&
-                        bout.Status !== "Completed"
-                )
-                .sort((a, b) => a.DEBoutId - b.DEBoutId);
+        );
 
-            if (filtered.length) acc[roundName] = filtered;
-            return acc;
-          }, {});
+      if (!suggestedBouts.length) return entries.map(createListSection);
+
+      const suggestedBoutIds = new Set(suggestedBouts.map(bout => String(bout.BoutId)));
+      const remainingSections = removeSuggestedBouts(entries, suggestedBoutIds).map(createListSection);
+      return [{ key: 'suggested-for-viewer', label: 'Suggested for You', bouts: suggestedBouts }, ...remainingSections];
+    },
+    plannedStationByBout() {
+      return createPlannedStationByBout({
+        assignments: this.plannedBoutAssignments,
+        stations: this.plannedDirectingStations
+      });
     },
+    placementLayout() {
+      return createRoundLayout(0);
+    }
+  },
+  watch: {
+    bouts: {
+      deep: true,
+      handler() {
+        this.scheduleConnectorUpdate();
+      }
+    },
+    plannedDirectingStations: {
+      deep: true,
+      handler() {
+        this.scheduleConnectorUpdate();
+      }
+    },
+    plannedBoutAssignments: {
+      deep: true,
+      handler() {
+        this.scheduleConnectorUpdate();
+      }
+    },
+    bracketSize() {
+      this.scheduleConnectorUpdate();
+    },
+    listView(value) {
+      if (!value) this.$nextTick(this.observeTableauSize);
+      this.scheduleConnectorUpdate();
+    }
+  },
+  mounted() {
+    this.observeTableauSize();
+    window.addEventListener('resize', this.scheduleConnectorUpdate);
+    document.fonts?.ready?.then(this.scheduleConnectorUpdate);
+    this.scheduleConnectorUpdate();
+  },
+  beforeUnmount() {
+    this.resizeObserver?.disconnect();
+    window.removeEventListener('resize', this.scheduleConnectorUpdate);
+    if (this.scheduledFrame !== null && typeof cancelAnimationFrame === 'function') {
+      cancelAnimationFrame(this.scheduledFrame);
+    }
   },
-
   methods: {
-    // --- helpers ---
-    _findBoutByIds(idsOrBout) {
-      // BoutCard emits ids for start/resume/edit; assign emits ids too.
-      // normalize to actual bout object
+    findBoutByIds(idsOrBout) {
       if (!idsOrBout) return null;
-      if (idsOrBout.BoutId && idsOrBout.Person1) return idsOrBout; // already a bout-ish object
-
-      const boutId = idsOrBout?.BoutId ?? idsOrBout?.boutId;
-      if (!boutId) return null;
-      return (this.bouts || []).find((b) => String(b.BoutId) === String(boutId)) || null;
-    },
+      if (idsOrBout.BoutId && idsOrBout.Person1) return idsOrBout;
 
-    // Assign button from BoutCard (inactive scheduled variant)
-    handleAssignBout(ids) {
-      const bout = this._findBoutByIds(ids);
-      if (!bout) return;
-      this.$emit("action:assignBout", bout);
+      const boutId = idsOrBout.BoutId ?? idsOrBout.boutId;
+      return this.bouts.find(bout => String(bout.BoutId) === String(boutId)) || null;
     },
-
-    // Start/Resume from BoutCard
     handleDirectingFromIds(ids) {
-      const bout = this._findBoutByIds(ids);
-      if (!bout) return;
-      this.$emit("action:directingBout", bout);
+      const bout = this.findBoutByIds(ids);
+      if (bout) this.$emit('action:directingBout', bout);
     },
-
-    // Edit from BoutCard
     handleEditFromIds(ids) {
-      const bout = this._findBoutByIds(ids);
-      if (!bout) return;
-      this.$emit("action:editBout", bout);
+      const bout = this.findBoutByIds(ids);
+      if (bout) this.$emit('action:editBout', bout);
     },
-
-    // TableauColumn / non-list view already emits bout objects
     handleEditBout(bout) {
-      this.$emit("action:editBout", bout);
+      this.$emit('action:editBout', bout);
     },
     handleDirectorBout(bout) {
-      this.$emit("action:directingBout", bout);
+      this.$emit('action:directingBout', bout);
+    },
+    getRoundLayout(roundIndex) {
+      return createRoundLayout(roundIndex);
+    },
+    getPlannedStation(bout) {
+      return getPlannedStationForBout(this.plannedStationByBout, bout);
     },
+    getPlannedStationLabel(bout) {
+      const station = this.getPlannedStation(bout);
+      if (!station) return '';
+      const directorName = station.Director?.DisplayName || 'Director TBD';
+      return `Suggested: ${station.RingName} / ${directorName}`;
+    },
+    registerNodeAnchor({ id, kind, el }) {
+      const anchors = kind === 'input' ? this.inputAnchors : this.outputAnchors;
+      const anchorId = String(id);
 
-    groupBoutsByRound(bouts) {
-      return (bouts || []).reduce((acc, bout) => {
-        const key = bout.RoundLabel || "Unknown Round";
-        if (!acc[key]) acc[key] = [];
-        acc[key].push(bout);
-        return acc;
-      }, {});
+      if (el) anchors.set(anchorId, el);
+      if (!el) anchors.delete(anchorId);
+      this.scheduleConnectorUpdate();
     },
-  },
+    observeTableauSize() {
+      if (typeof ResizeObserver === 'undefined' || !this.$refs.tableauRoot) return;
+      this.resizeObserver?.disconnect();
+      this.resizeObserver = new ResizeObserver(this.scheduleConnectorUpdate);
+      this.resizeObserver.observe(this.$refs.tableauRoot);
+    },
+    scheduleConnectorUpdate() {
+      if (this.scheduledFrame !== null) return;
+      this.scheduledFrame = -1;
+
+      const update = () => {
+        this.scheduledFrame = null;
+        this.recomputeConnectors();
+      };
+
+      this.$nextTick(() => {
+        if (typeof requestAnimationFrame === 'function') {
+          this.scheduledFrame = requestAnimationFrame(update);
+          return;
+        }
+        update();
+      });
+    },
+    recomputeConnectors() {
+      const rootElement = this.$refs.tableauRoot;
+      if (this.listView || !rootElement) {
+        this.connectorPaths = [];
+        return;
+      }
+
+      const layout = createDomAnchorLayout({
+        rootElement,
+        getInputAnchor: id => this.inputAnchors.get(String(id)),
+        getOutputAnchor: id => this.outputAnchors.get(String(id))
+      });
+
+      this.svgSize = layout.size;
+      const paths = buildBracketPaths({
+        bouts: this.bouts,
+        getInputPoint: layout.getInputPoint,
+        getOutputPoint: layout.getOutputPoint
+      });
+      this.connectorPaths = addPlannedStrokesToConnectors(paths, this.plannedStationByBout);
+    }
+  }
 };
 </script>
-

package/src/stories/Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.test.js

@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import BracketDirectorAssignmentCard from '../../../Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
+import BracketDirectorAssignmentPanel from './BracketDirectorAssignmentPanel.vue';
+
+const stations = [
+  { RingId: 1, RingName: 'Ring 1', Director: { PersonId: 10, DisplayName: 'Director One' } },
+  { RingId: 2, RingName: 'Ring 2', Director: { PersonId: 20, DisplayName: 'Director Two' } }
+];
+
+describe('BracketDirectorAssignmentPanel', () => {
+  it('renders assigned directors followed by the add summary card', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentPanel, { props: { stations } });
+    const cards = wrapper.findAllComponents(BracketDirectorAssignmentCard);
+
+    expect(cards).toHaveLength(3);
+    expect(cards.slice(0, 2).map(card => card.props('station'))).toEqual(stations);
+    expect(cards[2].props('variant')).toBe('add');
+  });
+
+  it('forwards add intent to its parent', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentPanel, { props: { stations: [] } });
+
+    wrapper.findComponent(BracketDirectorAssignmentCard).vm.$emit('action:add');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('request:add-planned-director')).toEqual([[]]);
+  });
+});

package/src/stories/Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue

@@ -0,0 +1,46 @@
+<template>
+  <aside
+    data-testid="bracket-director-assignment-panel"
+    class="w-full rounded-xl border border-dropdownSelect bg-bannerBackground p-4 shadow-lg xl:sticky xl:top-4 xl:w-72"
+  >
+    <div class="mb-4">
+      <BaseText color="primaryHighlight" size="md" text="Director Assignments" weight="bold" />
+      <BaseText
+        class="mt-1"
+        color="quaternary"
+        size="xs"
+        text="Plan ring coverage. Scheduled bouts may still be moved between rings."
+      />
+    </div>
+
+    <div class="space-y-3">
+      <BracketDirectorAssignmentCard v-for="station in stations" :key="station.RingId" :station="station" />
+      <BracketDirectorAssignmentCard
+        v-if="showAddCard"
+        variant="add"
+        @action:add="$emit('request:add-planned-director')"
+      />
+    </div>
+  </aside>
+</template>
+
+<script>
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import BracketDirectorAssignmentCard from '../../../Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
+
+export default {
+  name: 'BracketDirectorAssignmentPanel',
+  components: { BaseText, BracketDirectorAssignmentCard },
+  emits: ['request:add-planned-director'],
+  props: {
+    stations: {
+      type: Array,
+      default: () => []
+    },
+    showAddCard: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>