@dcrackel/hematournamentui 1.0.706 → 1.0.708

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardInactive/BoutCardInactive.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="w-full">
     <div v-if="c.customStatus && c.status !== 'active'" class="text-left">
-      <BaseText :text="c.customStatus" size="sm" color="primary"/>
+      <BaseText :text="c.customStatus" size="sm" color="primary" />
     </div>
 
     <!-- Desktop -->
@@ -10,27 +10,27 @@
       <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-full mr-4">
         <div class="flex space-x-4 items-center">
           <div class="relative">
-            <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+            <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
             <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} relative -mt-4 ml-9 z-10`"></div>
           </div>
           <div>
-            <BaseText :text="c.fencer1.name" size="md" color="quaternary" weight="bold"/>
-            <BaseText :text="c.fencer1.team" size="xs" color="quinary"/>
+            <BaseText :text="c.fencer1.name" size="md" color="quaternary" weight="bold" />
+            <BaseText :text="c.fencer1.team" size="xs" color="quinary" />
           </div>
         </div>
-        <BaseText :text="score1Display" size="3xl" weight="bold" class="align-middle pr-3 pt-0.5"/>
+        <BaseText :text="score1Display" size="3xl" weight="bold" class="align-middle pr-3 pt-0.5" />
       </div>
 
       <!-- Fencer 2 -->
       <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-full ml-4">
         <div class="flex space-x-4 justify-between w-full">
-          <BaseText :text="score2Display" size="3xl" weight="bold" class="align-middle pl-3 pt-0.5"/>
+          <BaseText :text="score2Display" size="3xl" weight="bold" class="align-middle pl-3 pt-0.5" />
           <div class="w-full">
-            <BaseText :text="c.fencer2.name" size="md" color="quaternary" weight="bold" class="text-right"/>
-            <BaseText :text="c.fencer2.team" size="xs" color="quinary" class="text-right"/>
+            <BaseText :text="c.fencer2.name" size="md" color="quaternary" weight="bold" class="text-right" />
+            <BaseText :text="c.fencer2.team" size="xs" color="quinary" class="text-right" />
           </div>
           <div class="relative w-20">
-            <img :src="fencer2Portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+            <img :src="fencer2Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
             <div :class="`w-4 h-4 rounded-full bg-${card.fencer2.colorDot} relative -mt-4 -ml-2 z-10`"></div>
           </div>
         </div>
@@ -39,42 +39,40 @@
       <!-- Actions -->
       <section v-if="editMode" class="text-right pl-4 flex">
         <BaseButton
-            v-if="isScheduled"
-            label="Start" size="sm" type="primary"
-            @buttonClick="$emit('start', c.ids)" class="w-16"/>
-        <BaseButton
-            v-if="!isScheduled"
-            label="Edit" size="sm" type="primary"
-            @buttonClick="$emit('edit', c.ids)" class="w-16"/>
-        <!-- Admin assign button -->
+          v-if="isScheduled"
+          label="Start"
+          size="sm"
+          type="primary"
+          @buttonClick="$emit('start', c.ids)"
+          class="w-16"
+        />
         <BaseButton
-            v-if="isAdmin && isScheduled"
-            label=""
-            type="primary"
-            iconName="fa-user-plus"
-            :iconLeft="false"
-            class="w-10 h-10 pr-4"
-            @buttonClick="$emit('assign', c.ids)"
+          v-if="!isScheduled"
+          label="Edit"
+          size="sm"
+          type="primary"
+          @buttonClick="$emit('edit', c.ids)"
+          class="w-16"
         />
       </section>
     </div>
 
     <!-- Mobile -->
-    <section
-        class="relative flex md:hidden items-center border rounded-md bg-poolBox transition overflow-hidden"
-        :class="mobileCardActionClass"
-    >
+    <section
+      class="relative flex md:hidden items-center border rounded-md bg-poolBox transition overflow-hidden"
+      :class="mobileCardActionClass"
+    >
       <!-- main tappable area -->
       <div class="flex flex-1 items-center p-4 min-w-0" @click="onCardClick">
         <!-- left portrait or index when reordering -->
         <div v-if="!reorderMode" class="relative flex flex-col items-center flex-none">
-          <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+          <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
           <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} relative -mt-4 ml-9 z-10`"></div>
         </div>
 
         <div v-if="reorderMode" class="flex flex-col items-center -mt-3 select-none flex-none">
-          <BaseText text="bout" size="xs" color="quinary" weight="bold"/>
-          <BaseText :text="`${(c.ids.orderIndex ?? 0) + 1}`" size="3xl" color="quaternary" weight="bold"/>
+          <BaseText text="bout" size="xs" color="quinary" weight="bold" />
+          <BaseText :text="`${(c.ids.orderIndex ?? 0) + 1}`" size="3xl" color="quaternary" weight="bold" />
         </div>
 
         <!-- center -->
@@ -82,80 +80,67 @@
           <div class="flex items-center justify-center">
             <div :class="`mr-2 bg-${card.fencer1.colorDot} w-3 h-3 flex-none`"></div>
             <BaseText
-                :text="c.fencer1.name"
-                size="sm"
-                color="quinary"
-                weight="bold"
-                class="leading-none truncate max-w-full"
+              :text="c.fencer1.name"
+              size="sm"
+              color="quinary"
+              weight="bold"
+              class="leading-none truncate max-w-full"
             />
           </div>
 
-          <BaseText text="vs" size="xs" color="quaternary"/>
+          <BaseText text="vs" size="xs" color="quaternary" />
 
           <div class="flex items-center justify-center">
             <div :class="`mr-2 bg-${card.fencer2.colorDot} w-3 h-3 flex-none`"></div>
             <BaseText
-                :text="c.fencer2.name"
-                size="sm"
-                color="quinary"
-                weight="bold"
-                class="leading-none truncate max-w-full"
+              :text="c.fencer2.name"
+              size="sm"
+              color="quinary"
+              weight="bold"
+              class="leading-none truncate max-w-full"
             />
           </div>
         </div>
 
         <!-- right portrait -->
         <div class="relative w-12 h-12 flex-none">
-          <img :src="fencer2Portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
-          <div :class="`absolute -mt-4 -right-1 w-4 h-4 rounded-full bg-${card.fencer2.colorDot} ring-2 ring-white`"></div>
+          <img :src="fencer2Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
+          <div
+            :class="`absolute -mt-4 -right-1 w-4 h-4 rounded-full bg-${card.fencer2.colorDot} ring-2 ring-white`"
+          ></div>
         </div>
       </div>
-
-      <!-- action rail: [ > ] -->
-      <button
-          v-if="isAdmin && isScheduled && !reorderMode"
-          type="button"
-          class="flex-none w-10 h-full flex items-center justify-center bg-white/60 hover:bg-white"
-          @click.stop="$emit('assign', c.ids)"
-          aria-label="Assign director"
-          title="Assign director"
-      >
-        <BaseIcon icon-name="fa-chevron-right" size="sm" color="quinary" hover="primary" />
-      </button>
     </section>
-
   </section>
 </template>
 
 <script>
-import BaseText from "../../../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import missingPortrait from "../../../../../../assets/portrait1.png";
-import BaseIcon from "../../../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from '../../../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import missingPortrait from '../../../../../../assets/portrait1.png';
 
-const emptyFencer = { portrait: "", name: "Unknown Name", team: "Unknown Team", colorDot: "gray-400" };
+const emptyFencer = { portrait: '', name: 'Unknown Name', team: 'Unknown Team', colorDot: 'gray-400' };
 const defaultCard = {
-  status: "scheduled",
-  customStatus: "",
+  status: 'scheduled',
+  customStatus: '',
   fencer1: { ...emptyFencer },
   fencer2: { ...emptyFencer },
   score1: 0,
   score2: 0,
-  pos1: "",
-  pos2: "",
-  ids: {},
+  pos1: '',
+  pos2: '',
+  ids: {}
 };
 
 export default {
-  name: "BoutCardInactive",
-  emits: ['assign', 'edit', 'reorder:tap', 'start'],
-  components: {BaseIcon, BaseButton, BaseText },
+  name: 'BoutCardInactive',
+  emits: ['edit', 'reorder:tap', 'start'],
+  components: { BaseButton, BaseText },
   props: {
     card: { type: Object, required: true },
     editMode: { type: Boolean, default: false },
     reorderMode: { type: Boolean, default: false },
-    mode: { type: String, default: undefined }, // let status decide unless explicitly set
-    isAdmin: { type: Boolean, default: false },
+    mode: { type: String, default: undefined } // let status decide unless explicitly set
   },
   computed: {
     c() {
@@ -164,23 +149,23 @@ export default {
         ...defaultCard,
         ...src,
         fencer1: { ...emptyFencer, ...(src.fencer1 || {}) },
-        fencer2: { ...emptyFencer, ...(src.fencer2 || {}) },
+        fencer2: { ...emptyFencer, ...(src.fencer2 || {}) }
       };
     },
-    isScheduled() {
-      const status = this.mode ?? this.c.status; // prefer explicit prop if provided
-      return status === "scheduled";
-    },
-    mobileCardActionClass() {
-      if (this.reorderMode) return "cursor-grab ring-2 ring-dashed ring-slate-300";
-      if (this.editMode) return "cursor-pointer";
-      return "cursor-default";
-    },
+    isScheduled() {
+      const status = this.mode ?? this.c.status; // prefer explicit prop if provided
+      return status === 'scheduled';
+    },
+    mobileCardActionClass() {
+      if (this.reorderMode) return 'cursor-grab ring-2 ring-dashed ring-slate-300';
+      if (this.editMode) return 'cursor-pointer';
+      return 'cursor-default';
+    },
     score1Display() {
-      return this.isScheduled ? "-" : String(this.c.score1);
+      return this.isScheduled ? '-' : String(this.c.score1);
     },
     score2Display() {
-      return this.isScheduled ? "-" : String(this.c.score2);
+      return this.isScheduled ? '-' : String(this.c.score2);
     },
     fencer1Portrait() {
       const s = this.c.fencer1.portrait;
@@ -189,23 +174,23 @@ export default {
     fencer2Portrait() {
       const s = this.c.fencer2.portrait;
       return s && String(s).trim() ? s : missingPortrait;
-    },
-  },
-  methods: {
-    onCardClick() {
-      if (this.reorderMode) {
-        this.$emit("reorder:tap", this.c.ids);
-        return;
-      }
-
-      if (!this.editMode) return;
-      if (this.isScheduled) {
-        this.$emit("start", this.c.ids);
-        return;
-      }
-
-      this.$emit("edit", this.c.ids);
-    },
-  },
-};
+    }
+  },
+  methods: {
+    onCardClick() {
+      if (this.reorderMode) {
+        this.$emit('reorder:tap', this.c.ids);
+        return;
+      }
+
+      if (!this.editMode) return;
+      if (this.isScheduled) {
+        this.$emit('start', this.c.ids);
+        return;
+      }
+
+      this.$emit('edit', this.c.ids);
+    }
+  }
+};
 </script>

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardReorder/BoutCardReorder.vue

@@ -1,45 +1,44 @@
 <!-- src/stories/Organisms/Cards/BoutCard/Variants/BoutCardReorder/BoutCardReorder.vue -->
 <template>
   <section class="w-full border rounded-lg mb-4" :class="selected ? 'border-bright' : ''">
-    <div class="flex items-center justify-between p-2 rounded-md bg-poolBox shadow-sm" >
+    <div class="flex items-center justify-between p-2 rounded-md bg-poolBox shadow-sm">
       <!-- Left label / handle area (purely visual; drag comes from parent shell) -->
       <div class="flex flex-col items-center select-none pl-4 -mt-1">
         <BaseText text="bout" size="xs" color="quinary" weight="bold" />
-        <BaseText :text="String(orderIndex + 1)" size="4xl" color="quaternary" weight="bold"/>
+        <BaseText :text="String(orderIndex + 1)" size="4xl" color="quaternary" weight="bold" />
       </div>
 
       <!-- Center text -->
       <div class="text-center flex-1 mx-2">
-        <BaseText :text="`${card.pos1} - ${card.fencer1.name}`" size="sm" color="quinary" weight="bold"/>
-        <BaseText text="vs" size="xs" color="quaternary" class="-mt-0.5 ml-3"/>
-        <BaseText :text="`${card.pos2} - ${card.fencer2.name}`" size="sm" color="quinary" weight="bold"/>
+        <BaseText :text="`${card.pos1} - ${card.fencer1.name}`" size="sm" color="quinary" weight="bold" />
+        <BaseText text="vs" size="xs" color="quaternary" class="-mt-0.5 ml-3" />
+        <BaseText :text="`${card.pos2} - ${card.fencer2.name}`" size="sm" color="quinary" weight="bold" />
       </div>
 
       <div>
-        <BaseIcon icon-name="fa-grip-dots-vertical" size="4xl" color="quinary" class="mr-4"/>
+        <BaseIcon icon-name="fa-grip-dots-vertical" size="4xl" color="quinary" class="mr-4" />
       </div>
-
     </div>
   </section>
 </template>
 
 <script>
-import BaseText from "../../../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from '../../../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../../../Atoms/Icon/BaseIcon.vue';
 
 export default {
-  name: "BoutCardReorder",
-  components: {BaseIcon, BaseText },
+  name: 'BoutCardReorder',
+  components: { BaseIcon, BaseText },
   props: {
     card: { type: Object, required: true },
     editMode: { type: Boolean, default: false },
     reorderMode: { type: Boolean, default: true },
-    selected: { type: Boolean, default: false },
+    selected: { type: Boolean, default: false }
   },
   computed: {
     orderIndex() {
       return Number(this.card?.ids?.orderIndex ?? 0);
-    },
-  },
+    }
+  }
 };
 </script>

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardWaiting/BoutCardWaiting.stories.js

@@ -1,11 +1,11 @@
 import BoutCardWaiting from './BoutCardWaiting.vue';
 
 export default {
-    title: 'Molecules/BoutCard/Variants/Waiting',
-    component: BoutCardWaiting,
-    args: {
-        colors: { Color1: 'red', Color2: 'blue' },
-    },
+  title: 'Molecules/BoutCard/Variants/Waiting',
+  component: BoutCardWaiting,
+  args: {
+    colors: { Color1: 'red', Color2: 'blue' }
+  }
 };
 
 export const Default = {};

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardWaiting/BoutCardWaiting.vue

@@ -6,71 +6,72 @@
       <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
         <div class="flex space-x-4 items-center">
           <div class="relative">
-            <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full"/>
+            <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full" />
             <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} relative -mt-4 ml-9 z-10`"></div>
           </div>
           <div>
-            <BaseText text="Waiting to be selected" size="md" color="quaternary" weight="bold"/>
-            <BaseText text="starting soon" size="xs" color="quinary"/>
+            <BaseText text="Waiting to be selected" size="md" color="quaternary" weight="bold" />
+            <BaseText text="starting soon" size="xs" color="quinary" />
           </div>
         </div>
-        <BaseText text="" size="3xl" weight="bold" class="align-middle pr-3 pt-0.5"/>
+        <BaseText text="" size="3xl" weight="bold" class="align-middle pr-3 pt-0.5" />
       </div>
 
       <!-- Right placeholder -->
       <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
         <div class="flex justify-end space-x-4 ml-4 w-full">
           <div class="text-right">
-            <BaseText text="Waiting to be selected" size="md" color="quaternary" weight="bold"/>
-            <BaseText text="starting soon" size="xs" color="quinary"/>
+            <BaseText text="Waiting to be selected" size="md" color="quaternary" weight="bold" />
+            <BaseText text="starting soon" size="xs" color="quinary" />
           </div>
           <div class="relative">
-            <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full"/>
+            <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full" />
             <div :class="`w-4 h-4 rounded-full bg-${card.fencer2.colorDot} relative -mt-4 -ml-1 z-10`"></div>
           </div>
         </div>
       </div>
 
-      <section class="w-18 bg-primary">
-      </section>
+      <section class="w-18 bg-primary"></section>
     </div>
 
     <!-- Mobile -->
     <div class="flex md:hidden justify-between items-center p-4 border rounded-md bg-poolBox">
       <div class="relative flex flex-col items-center">
-        <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full"/>
+        <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full" />
         <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} relative -mt-4 ml-9 z-10`"></div>
       </div>
 
       <div class="text-center flex-1 mx-4">
-        <BaseText text="Select a Match!" size="md" color="quaternary" weight="bold"/>
-        <BaseText text="to get started" size="xs" color="quinary"/>
+        <BaseText text="Select a Match!" size="md" color="quaternary" weight="bold" />
+        <BaseText text="to get started" size="xs" color="quinary" />
       </div>
 
       <!-- right portrait -->
       <div class="relative w-12 h-12">
         <img :src="missingPortrait" alt="Portrait" class="w-12 h-12 rounded-full" />
-        <div :class="`absolute -mt-4 -right-1 w-4 h-4 rounded-full bg-${card.fencer2.colorDot} ring-2 ring-white`"></div>
+        <div
+          :class="`absolute -mt-4 -right-1 w-4 h-4 rounded-full bg-${card.fencer2.colorDot} ring-2 ring-white`"
+        ></div>
       </div>
     </div>
   </section>
 </template>
 
 <script>
-import BaseText from "../../../../../Atoms/Text/BaseText.vue";
-import missingPortrait from "../../../../../../assets/portrait1.png";
+import BaseText from '../../../../../Atoms/Text/BaseText.vue';
+import missingPortrait from '../../../../../../assets/portrait1.png';
 
 export default {
-  name: "BoutCardWaiting",
-  components: {BaseText },
+  name: 'BoutCardWaiting',
+  components: { BaseText },
   props: {
     card: {
       type: Object,
       required: true
-    },
+    }
   },
   data() {
     return { missingPortrait };
-  },
-};
-</script>
+  }
+};
+</script>

package/src/stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.stories.js

@@ -0,0 +1,33 @@
+import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
+
+export default {
+  title: 'Organisms/Cards/BracketDirectorAssignmentCard',
+  component: BracketDirectorAssignmentCard,
+  args: {
+    station: {
+      RingId: 1,
+      RingName: 'Ring 1',
+      Color: '#2563eb',
+      Director: {
+        PersonId: 1001,
+        DisplayName: 'Alex Morgan',
+        PortraitUrl: ''
+      }
+    },
+    variant: 'assigned'
+  },
+  argTypes: {
+    station: { control: 'object' },
+    variant: { control: 'select', options: ['assigned', 'add'] },
+    addLabel: { control: 'text' }
+  }
+};
+
+export const Assigned = {};
+
+export const AddDirector = {
+  args: {
+    station: null,
+    variant: 'add'
+  }
+};

package/src/stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.test.js

@@ -0,0 +1,45 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
+
+const station = {
+  RingId: 3,
+  RingName: 'Ring 3',
+  Color: '#059669',
+  Director: { PersonId: 1003, DisplayName: 'Sam Rivera', PortraitUrl: '/portrait.png' }
+};
+
+describe('BracketDirectorAssignmentCard', () => {
+  it('renders the ring, portrait, and director name', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { station } });
+
+    expect(wrapper.find('img').attributes()).toMatchObject({
+      src: '/portrait.png',
+      alt: 'Sam Rivera portrait'
+    });
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Sam Rivera');
+    expect(wrapper.find('[data-testid="bracket-director-assignment"]').attributes('style')).toBeUndefined();
+    expect(wrapper.find('[data-testid="director-color-dot"]').attributes('style')).toContain('#059669');
+    expect(wrapper.find('[data-testid="ring-number-icon"]').exists()).toBe(false);
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Ring 3');
+  });
+
+  it('uses director initials when no portrait is supplied', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, {
+      props: { station: { ...station, Director: { ...station.Director, PortraitUrl: '' } } }
+    });
+
+    expect(wrapper.find('img').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="director-initials"]').classes()).toContain('rounded-xl');
+    expect(wrapper.find('[data-testid="director-initials"] base-text-stub').attributes('text')).toBe('SR');
+  });
+
+  it('emits add intent from the summary card', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { variant: 'add' } });
+
+    await wrapper.find('[data-testid="add-bracket-director"]').trigger('click');
+
+    expect(wrapper.emitted('action:add')).toEqual([[]]);
+    expect(wrapper.find('base-text-stub').attributes('text')).toBe('Click here to add director');
+  });
+});

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

@@ -0,0 +1,103 @@
+<template>
+  <button
+    v-if="isAddCard"
+    type="button"
+    data-testid="add-bracket-director"
+    class="flex min-h-20 w-full items-center justify-center gap-3 rounded-lg border-2 border-dashed border-dropdownSelect bg-white px-4 py-3 text-left transition hover:border-bright hover:shadow-md focus-visible:border-bright focus-visible:outline-none"
+    @click="$emit('action:add')"
+  >
+    <span class="flex h-9 w-9 items-center justify-center rounded-full bg-bannerBackground" aria-hidden="true">
+      <BaseIcon iconName="fa-plus" color="primaryHighlight" size="sm" />
+    </span>
+    <BaseText :text="addLabel" color="primaryHighlight" size="sm" weight="bold" />
+  </button>
+
+  <article
+    v-else-if="station"
+    data-testid="bracket-director-assignment"
+    class="flex min-h-16 w-full items-center gap-3 overflow-hidden rounded-md border border-poolSetup bg-white px-3 py-2 shadow-sm hover:border-bright"
+    :aria-label="assignmentLabel"
+  >
+    <div class="relative h-12 w-12 flex-none">
+      <img
+        v-if="portraitUrl"
+        :src="portraitUrl"
+        :alt="`${directorName} portrait`"
+        class="h-12 w-12 rounded-xl object-cover"
+      />
+      <div
+        v-else
+        data-testid="director-initials"
+        class="flex h-12 w-12 items-center justify-center rounded-xl bg-dropdownSelect"
+        aria-hidden="true"
+      >
+        <BaseText :text="directorInitials" color="primaryHighlight" size="sm" weight="bold" />
+      </div>
+      <span
+        data-testid="director-color-dot"
+        class="absolute -bottom-1 -right-1 h-4 w-4 rounded-full ring-2 ring-white"
+        :style="{ backgroundColor: station.Color }"
+        aria-hidden="true"
+      ></span>
+    </div>
+
+    <div class="min-w-0 flex-1">
+      <BaseText :text="ringLabel" color="quaternary" size="xs" />
+      <BaseText class="truncate" :text="directorName" color="primaryHighlight" size="sm" weight="bold" />
+    </div>
+  </article>
+</template>
+
+<script>
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+const getInitials = displayName =>
+  String(displayName || '')
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(name => name[0].toUpperCase())
+    .join('');
+
+export default {
+  name: 'BracketDirectorAssignmentCard',
+  components: { BaseIcon, BaseText },
+  emits: ['action:add'],
+  props: {
+    station: {
+      type: Object,
+      default: null
+    },
+    variant: {
+      type: String,
+      default: 'assigned',
+      validator: value => ['assigned', 'add'].includes(value)
+    },
+    addLabel: {
+      type: String,
+      default: 'Click here to add director'
+    }
+  },
+  computed: {
+    assignmentLabel() {
+      return `${this.ringLabel}, Director ${this.directorName}`;
+    },
+    directorInitials() {
+      return getInitials(this.directorName) || '?';
+    },
+    directorName() {
+      return this.station?.Director?.DisplayName || 'Director TBD';
+    },
+    isAddCard() {
+      return this.variant === 'add';
+    },
+    portraitUrl() {
+      return this.station?.Director?.PortraitUrl || '';
+    },
+    ringLabel() {
+      return this.station?.RingName || `Ring ${this.station?.RingId ?? ''}`.trim();
+    }
+  }
+};
+</script>