From 082bcdf7c6fba8213e62522ca927b54428b00ee5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karsten=20Ku=CC=88pper?= <karsten.kuepper@bcc.no>
Date: Thu, 27 Feb 2025 09:32:34 -0500
Subject: [PATCH 1/4] =?UTF-8?q?add=20first=20draft=20of=20Fra=20K=C3=A5re?=
 =?UTF-8?q?=20draw?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                   |   2 +-
 pages/dashboards/fra-kaare.vue | 111 ++++++++++++++++++++++++++++++++-
 pnpm-lock.yaml                 |  24 +++----
 3 files changed, 122 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 223cd69b..ac3623bd 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@auth0/auth0-vue": "^2.3.3",
-    "@bcc-code/bmm-sdk-fetch": "^8.7.4",
+    "@bcc-code/bmm-sdk-fetch": "^8.7.7",
     "@floating-ui/vue": "^1.0.6",
     "@headlessui/vue": "^1.7.19",
     "@microsoft/applicationinsights-web": "^3.0.8",
diff --git a/pages/dashboards/fra-kaare.vue b/pages/dashboards/fra-kaare.vue
index 29da7782..6ed8bec4 100644
--- a/pages/dashboards/fra-kaare.vue
+++ b/pages/dashboards/fra-kaare.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import { StatisticsApi } from "@bcc-code/bmm-sdk-fetch";
-import type { GetFraKaareStatisticsResponse } from "@bcc-code/bmm-sdk-fetch";
+import { PersonGenderEnum, StatisticsApi } from "@bcc-code/bmm-sdk-fetch";
+import type {
+  FraKaareDrawCommandResponse,
+  GetFraKaareStatisticsResponse,
+} from "@bcc-code/bmm-sdk-fetch";
 import { breakpointsTailwind } from "@vueuse/core";
 import DashboardDataTable from "~/components/dashboard/DashboardDataTable.vue";
 import type { SortDirection } from "~/components/dashboard/DashboardDataTable.vue";
@@ -71,12 +74,116 @@ const columnGroupWidth = computed(() => {
   if (shouldHideColumns.value) return 1;
   return 5;
 });
+const now = new Date().getFullYear();
+const maxBirthYear = ref<number>(now - 13);
+const minBirthYear = ref<number>(now - 25);
+function resetBirthYear() {
+  maxBirthYear.value = now - 13;
+  minBirthYear.value = now - 25;
+}
+
+const selectedGender = ref<string>("both");
+const isLoading = ref<boolean>(false);
+const drawResult = ref<FraKaareDrawCommandResponse | null>(null);
+async function onDrawWinner() {
+  let gender;
+  isLoading.value = true;
+  if (selectedGender.value === "both") {
+    gender = undefined;
+  } else if (selectedGender.value === "boys") {
+    gender = PersonGenderEnum.Male;
+  } else {
+    gender = PersonGenderEnum.Female;
+  }
+  drawResult.value = await new StatisticsApi().statisticsFraKaareDrawPost({
+    fraKaareDrawCommand: {
+      latestBirthYear: maxBirthYear.value,
+      earliestBirthYear: minBirthYear.value,
+      gender,
+      churchUid: "86cee624-4848-462b-a4bd-8e20f773cb90",
+    },
+  });
+  isLoading.value = false;
+}
 </script>
 
 <template>
   <div class="space-y-12">
     <PageHeading>Dashboard: Fra Kåre</PageHeading>
 
+    <section>
+      <div
+        class="mb-5 mt-12 text-[28px] font-extrabold leading-tight text-label-1"
+      >
+        Draw a winner
+      </div>
+
+      <div class="my-4 rounded-b-2xl rounded-t-2xl bg-background-2 p-4">
+        <div class="flex items-center gap-2">
+          Birth year:
+          <input
+            type="number"
+            v-model.number="maxBirthYear"
+            class="type-title-2 w-20 rounded-lg bg-background-1 p-1 px-2 py-1.5 text-label-1 shadow-[0_4px_12px_0_#0000000D,0_1px_4px_0_#0000000D,0_0_0_1px_#0000000D]"
+          />
+          -
+
+          <input
+            type="number"
+            v-model.number="minBirthYear"
+            class="type-title-2 w-20 rounded-lg bg-background-1 p-1 px-2 py-1.5 text-label-1 shadow-[0_4px_12px_0_#0000000D,0_1px_4px_0_#0000000D,0_0_0_1px_#0000000D]"
+          />
+          <div>({{ now - maxBirthYear }} - {{ now - minBirthYear }})</div>
+          <ButtonStyled
+            intent="primary"
+            size="small"
+            @click.stop="resetBirthYear()"
+          >
+            13 - 25
+          </ButtonStyled>
+        </div>
+        <div class="flex items-center gap-2 pt-2">
+          Gender:
+
+          <div
+            class="type-title-2 min-w-[100px] rounded-lg bg-background-1 px-2 py-0 text-label-1 shadow-[0_4px_12px_0_#0000000D,0_1px_4px_0_#0000000D,0_0_0_1px_#0000000D]"
+          >
+            <select v-model="selectedGender" class="py-1">
+              <option
+                v-for="(gender, i) in ['both', 'boys', 'girls']"
+                :key="`gender${i}`"
+                :value="gender"
+              >
+                {{ gender }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <ButtonStyled intent="primary" @click.stop="onDrawWinner()">
+        Draw
+      </ButtonStyled>
+
+      <div
+        v-if="isLoading || drawResult != null"
+        class="my-4 mb-10 rounded-b-2xl rounded-t-2xl bg-background-2 p-4"
+      >
+        <div v-if="isLoading">Loading...</div>
+        <div v-else-if="drawResult != null" class="text-2xl">
+          <div>
+            {{ drawResult.winnerDisplayName }},
+            {{ drawResult.winnerBirthYear }}, {{ drawResult.winnerGender }}
+          </div>
+        </div>
+      </div>
+
+      <div v-if="false">
+        <div>Selected birth year: {{ minBirthYear }} - {{ maxBirthYear }}</div>
+        <div>Selected gender: {{ selectedGender }}</div>
+      </div>
+    </section>
+
     <section
       id="chart"
       class="flex min-h-[400px] flex-col rounded-2xl bg-background-2 p-8"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45fe285b..87261474 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^2.3.3
         version: 2.3.3(typescript@5.3.3)(vue-router@4.3.2(vue@3.4.19(typescript@5.3.3)))
       '@bcc-code/bmm-sdk-fetch':
-        specifier: ^8.7.4
-        version: 8.7.4
+        specifier: ^8.7.7
+        version: 8.7.7
       '@floating-ui/vue':
         specifier: ^1.0.6
         version: 1.0.6(vue@3.4.19(typescript@5.3.3))
@@ -503,8 +503,8 @@ packages:
     resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
     engines: {node: '>=6.9.0'}
 
-  '@bcc-code/bmm-sdk-fetch@8.7.4':
-    resolution: {integrity: sha512-XDQ90lmwMQoMOtWD9HpiG8F6gu1hVMpadbyvumaLnqGws32PwvQT5dxov0yEmqLhwI9EpT5Shdw+FfpDZ8XuBQ==}
+  '@bcc-code/bmm-sdk-fetch@8.7.7':
+    resolution: {integrity: sha512-JXwVvVAqP474Ug7tTwhmhL1cOzeJqAUJiJCPYrlJBnOJpWAoFxp8iB0puJ1FmGBEO/KO+Jr7u/rCnxvJDXj9Vw==}
 
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
@@ -8296,7 +8296,7 @@ snapshots:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  '@bcc-code/bmm-sdk-fetch@8.7.4': {}
+  '@bcc-code/bmm-sdk-fetch@8.7.7': {}
 
   '@bcoe/v8-coverage@0.2.3': {}
 
@@ -9480,7 +9480,7 @@ snapshots:
 
   '@nuxtjs/eslint-config-typescript@12.1.0(eslint@8.56.0)(typescript@5.3.3)':
     dependencies:
-      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)
       '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0)(typescript@5.3.3)
       '@typescript-eslint/parser': 6.21.0(eslint@8.56.0)(typescript@5.3.3)
       eslint: 8.56.0
@@ -9493,10 +9493,10 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)':
+  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)':
     dependencies:
       eslint: 8.56.0
-      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       eslint-plugin-n: 15.7.0(eslint@8.56.0)
       eslint-plugin-node: 11.1.0(eslint@8.56.0)
@@ -12756,7 +12756,7 @@ snapshots:
     dependencies:
       eslint: 8.56.0
 
-  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
+  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
     dependencies:
       eslint: 8.56.0
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
@@ -12776,7 +12776,7 @@ snapshots:
       debug: 4.3.4(supports-color@8.1.1)
       enhanced-resolve: 5.15.0
       eslint: 8.56.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.2
@@ -12788,7 +12788,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0):
     dependencies:
       debug: 3.2.7(supports-color@8.1.1)
     optionalDependencies:
@@ -12821,7 +12821,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)
       hasown: 2.0.1
       is-core-module: 2.13.1
       is-glob: 4.0.3

From 6e285b57bd751933bed54d9eb8c43611f6eb889b Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Thu, 27 Feb 2025 17:29:31 +0100
Subject: [PATCH 2/4] fix(dashboard): improve design of raffle

---
 package.json                   |   1 +
 pages/dashboards/fra-kaare.vue | 158 ++++++++++++++++++---------------
 pnpm-lock.yaml                 |  22 +++--
 3 files changed, 101 insertions(+), 80 deletions(-)

diff --git a/package.json b/package.json
index ac3623bd..351c0672 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@floating-ui/vue": "^1.0.6",
     "@headlessui/vue": "^1.7.19",
     "@microsoft/applicationinsights-web": "^3.0.8",
+    "@neoconfetti/vue": "^2.2.1",
     "@pinia/nuxt": "^0.5.1",
     "@sentry/vue": "^8.27.0",
     "@tiptap/starter-kit": "^2.9.1",
diff --git a/pages/dashboards/fra-kaare.vue b/pages/dashboards/fra-kaare.vue
index 6ed8bec4..95b5bcab 100644
--- a/pages/dashboards/fra-kaare.vue
+++ b/pages/dashboards/fra-kaare.vue
@@ -7,6 +7,7 @@ import type {
 import { breakpointsTailwind } from "@vueuse/core";
 import DashboardDataTable from "~/components/dashboard/DashboardDataTable.vue";
 import type { SortDirection } from "~/components/dashboard/DashboardDataTable.vue";
+import { vConfetti } from "@neoconfetti/vue";
 
 const { t } = useI18n();
 setTitle(() => t("dashboards.title"));
@@ -75,15 +76,22 @@ const columnGroupWidth = computed(() => {
   return 5;
 });
 const now = new Date().getFullYear();
-const maxBirthYear = ref<number>(now - 13);
-const minBirthYear = ref<number>(now - 25);
-function resetBirthYear() {
-  maxBirthYear.value = now - 13;
-  minBirthYear.value = now - 25;
+const minAge = ref<number>(13);
+const maxAge = ref<number>(25);
+function resetAge() {
+  minAge.value = 13;
+  maxAge.value = 25;
 }
 
-const selectedGender = ref<string>("both");
-const isLoading = ref<boolean>(false);
+const genders = ["both", "boys", "girls"] as const;
+type Gender = (typeof genders)[number];
+const selectedGender = ref<Gender>("both");
+const genderTranslations: Record<Gender, string> = {
+  both: "Begge",
+  boys: "Gutter",
+  girls: "Jenter",
+};
+const isLoading = ref(false);
 const drawResult = ref<FraKaareDrawCommandResponse | null>(null);
 async function onDrawWinner() {
   let gender;
@@ -97,10 +105,9 @@ async function onDrawWinner() {
   }
   drawResult.value = await new StatisticsApi().statisticsFraKaareDrawPost({
     fraKaareDrawCommand: {
-      latestBirthYear: maxBirthYear.value,
-      earliestBirthYear: minBirthYear.value,
+      latestBirthYear: now - minAge.value,
+      earliestBirthYear: now - maxAge.value,
       gender,
-      churchUid: "86cee624-4848-462b-a4bd-8e20f773cb90",
     },
   });
   isLoading.value = false;
@@ -111,76 +118,81 @@ async function onDrawWinner() {
   <div class="space-y-12">
     <PageHeading>Dashboard: Fra Kåre</PageHeading>
 
-    <section>
-      <div
-        class="mb-5 mt-12 text-[28px] font-extrabold leading-tight text-label-1"
-      >
-        Draw a winner
-      </div>
-
-      <div class="my-4 rounded-b-2xl rounded-t-2xl bg-background-2 p-4">
-        <div class="flex items-center gap-2">
-          Birth year:
-          <input
-            type="number"
-            v-model.number="maxBirthYear"
-            class="type-title-2 w-20 rounded-lg bg-background-1 p-1 px-2 py-1.5 text-label-1 shadow-[0_4px_12px_0_#0000000D,0_1px_4px_0_#0000000D,0_0_0_1px_#0000000D]"
-          />
-          -
+    <section
+      id="raffle"
+      class="grid grid-rows-[2fr_1fr] overflow-hidden rounded-2xl border border-label-separator xl:grid-cols-2 xl:grid-rows-1"
+    >
+      <div class="flex flex-col gap-4 bg-background-2 p-6">
+        <h2 class="type-heading-3">Trekk en vinner</h2>
 
-          <input
-            type="number"
-            v-model.number="minBirthYear"
-            class="type-title-2 w-20 rounded-lg bg-background-1 p-1 px-2 py-1.5 text-label-1 shadow-[0_4px_12px_0_#0000000D,0_1px_4px_0_#0000000D,0_0_0_1px_#0000000D]"
-          />
-          <div>({{ now - maxBirthYear }} - {{ now - minBirthYear }})</div>
-          <ButtonStyled
-            intent="primary"
-            size="small"
-            @click.stop="resetBirthYear()"
+        <fieldset
+          class="flex w-full items-start justify-between gap-4 rounded-2xl border border-label-separator bg-background-2 p-3"
+        >
+          <legend class="bg-background-2 px-1">Aldersgruppe</legend>
+          <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
+            <input
+              v-model.number="minAge"
+              type="number"
+              class="type-title-2 w-20 rounded-lg bg-background-1 px-2 py-1.5 text-label-1"
+            />
+            -
+            <input
+              v-model.number="maxAge"
+              type="number"
+              class="type-title-2 w-20 rounded-lg bg-background-1 px-2 py-1.5 text-label-1"
+            />
+            <span class="type-paragraph-3 w-full px-2 text-label-3">
+              Født mellom {{ now - maxAge }} og {{ now - minAge }}
+            </span>
+          </div>
+          <button
+            class="type-paragraph-3 shrink-0 rounded-lg bg-background-3 px-3 py-0.5 text-label-3"
+            @click.stop="resetAge()"
           >
-            13 - 25
-          </ButtonStyled>
-        </div>
-        <div class="flex items-center gap-2 pt-2">
-          Gender:
+            Sett til 13 - 25
+          </button>
+        </fieldset>
 
-          <div
-            class="type-title-2 min-w-[100px] rounded-lg bg-background-1 px-2 py-0 text-label-1 shadow-[0_4px_12px_0_#0000000D,0_1px_4px_0_#0000000D,0_0_0_1px_#0000000D]"
-          >
-            <select v-model="selectedGender" class="py-1">
-              <option
-                v-for="(gender, i) in ['both', 'boys', 'girls']"
-                :key="`gender${i}`"
-                :value="gender"
-              >
-                {{ gender }}
-              </option>
-            </select>
+        <fieldset
+          class="flex w-full items-start justify-between gap-4 rounded-2xl border border-label-separator bg-background-2 p-3"
+        >
+          <legend>Kjønn</legend>
+          <div class="flex rounded-xl bg-background-1 p-1">
+            <button
+              v-for="gender in genders"
+              :key="gender"
+              class="type-title-3 rounded-lg px-3 py-1"
+              :class="{ 'bg-background-3': selectedGender === gender }"
+              @click.stop="selectedGender = gender"
+            >
+              <span>{{ genderTranslations[gender] }}</span>
+            </button>
           </div>
-        </div>
-      </div>
+        </fieldset>
 
-      <ButtonStyled intent="primary" @click.stop="onDrawWinner()">
-        Draw
-      </ButtonStyled>
-
-      <div
-        v-if="isLoading || drawResult != null"
-        class="my-4 mb-10 rounded-b-2xl rounded-t-2xl bg-background-2 p-4"
-      >
-        <div v-if="isLoading">Loading...</div>
-        <div v-else-if="drawResult != null" class="text-2xl">
-          <div>
-            {{ drawResult.winnerDisplayName }},
-            {{ drawResult.winnerBirthYear }}, {{ drawResult.winnerGender }}
-          </div>
-        </div>
+        <ButtonStyled
+          intent="primary"
+          class="mt-2"
+          :loading="isLoading"
+          @click.stop="onDrawWinner"
+        >
+          Trekk vinner
+        </ButtonStyled>
       </div>
 
-      <div v-if="false">
-        <div>Selected birth year: {{ minBirthYear }} - {{ maxBirthYear }}</div>
-        <div>Selected gender: {{ selectedGender }}</div>
+      <div class="flex items-center justify-center p-6">
+        <Transition
+          enter-active-class="transition-all duration-500 ease-out"
+          enter-from-class="opacity-0 scale-90"
+          enter-to-class="opacity-100 scale-100"
+        >
+          <div v-if="drawResult != null">
+            <p class="type-display-3">
+              {{ drawResult.winnerDisplayName }}
+            </p>
+            <div v-confetti="{ particleCount: 50, force: 0.5 }" />
+          </div>
+        </Transition>
       </div>
     </section>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 87261474..c7f6efe8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       '@microsoft/applicationinsights-web':
         specifier: ^3.0.8
         version: 3.0.8(tslib@2.6.2)
+      '@neoconfetti/vue':
+        specifier: ^2.2.1
+        version: 2.2.1
       '@pinia/nuxt':
         specifier: ^0.5.1
         version: 0.5.1(rollup@4.14.3)(typescript@5.3.3)(vue@3.4.19(typescript@5.3.3))
@@ -1156,6 +1159,9 @@ packages:
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
 
+  '@neoconfetti/vue@2.2.1':
+    resolution: {integrity: sha512-GXe5XoHlMK8VIxmxKuAgF9QQwRoDLmtiwVhONA9rzF+zOLGfOVLxo4OEDZqU9F0gJkB7U23BLlGJ3ouOb+kguw==}
+
   '@netlify/functions@2.6.0':
     resolution: {integrity: sha512-vU20tij0fb4nRGACqb+5SQvKd50JYyTyEhQetCMHdakcJFzjLDivvRR16u1G2Oy4A7xNAtGJF1uz8reeOtTVcQ==}
     engines: {node: '>=14.0.0'}
@@ -8987,6 +8993,8 @@ snapshots:
       json5: 2.2.3
       rollup: 4.14.3
 
+  '@neoconfetti/vue@2.2.1': {}
+
   '@netlify/functions@2.6.0':
     dependencies:
       '@netlify/serverless-functions-api': 1.14.0
@@ -9480,7 +9488,7 @@ snapshots:
 
   '@nuxtjs/eslint-config-typescript@12.1.0(eslint@8.56.0)(typescript@5.3.3)':
     dependencies:
-      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)
+      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0)(typescript@5.3.3)
       '@typescript-eslint/parser': 6.21.0(eslint@8.56.0)(typescript@5.3.3)
       eslint: 8.56.0
@@ -9493,10 +9501,10 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)':
+  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)':
     dependencies:
       eslint: 8.56.0
-      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
+      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       eslint-plugin-n: 15.7.0(eslint@8.56.0)
       eslint-plugin-node: 11.1.0(eslint@8.56.0)
@@ -12756,7 +12764,7 @@ snapshots:
     dependencies:
       eslint: 8.56.0
 
-  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0))(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
+  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@15.7.0(eslint@8.56.0))(eslint-plugin-promise@6.1.1(eslint@8.56.0))(eslint@8.56.0):
     dependencies:
       eslint: 8.56.0
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
@@ -12776,7 +12784,7 @@ snapshots:
       debug: 4.3.4(supports-color@8.1.1)
       enhanced-resolve: 5.15.0
       eslint: 8.56.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.2
@@ -12788,7 +12796,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
     dependencies:
       debug: 3.2.7(supports-color@8.1.1)
     optionalDependencies:
@@ -12821,7 +12829,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.56.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-plugin-import@2.29.1)(eslint@8.56.0))(eslint@8.56.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
       hasown: 2.0.1
       is-core-module: 2.13.1
       is-glob: 4.0.3

From 189648c4ad87bfacb5ee3a274a4c8486c120c6b4 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Thu, 27 Feb 2025 17:34:07 +0100
Subject: [PATCH 3/4] fix(dashboard): slight improvement for raffle on light
 mode

---
 pages/dashboards/fra-kaare.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/pages/dashboards/fra-kaare.vue b/pages/dashboards/fra-kaare.vue
index 95b5bcab..dac1845f 100644
--- a/pages/dashboards/fra-kaare.vue
+++ b/pages/dashboards/fra-kaare.vue
@@ -161,8 +161,12 @@ async function onDrawWinner() {
             <button
               v-for="gender in genders"
               :key="gender"
-              class="type-title-3 rounded-lg px-3 py-1"
-              :class="{ 'bg-background-3': selectedGender === gender }"
+              :class="[
+                'type-title-3 rounded-lg border px-3 py-1',
+                selectedGender === gender
+                  ? 'border-label-separator bg-background-2 shadow-sm'
+                  : 'border-[transparent]',
+              ]"
               @click.stop="selectedGender = gender"
             >
               <span>{{ genderTranslations[gender] }}</span>

From 0507c5f858747e68460e3177cc5abe6214d26527 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Thu, 27 Feb 2025 18:00:52 +0100
Subject: [PATCH 4/4] fix(dashboard): add fra kaare to raffle

---
 package.json                   |  2 +-
 pages/dashboards/fra-kaare.vue | 69 ++++++++++++++++++++++++++++------
 pnpm-lock.yaml                 | 10 ++---
 3 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 351c0672..f965c5c7 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@auth0/auth0-vue": "^2.3.3",
-    "@bcc-code/bmm-sdk-fetch": "^8.7.7",
+    "@bcc-code/bmm-sdk-fetch": "^8.7.9",
     "@floating-ui/vue": "^1.0.6",
     "@headlessui/vue": "^1.7.19",
     "@microsoft/applicationinsights-web": "^3.0.8",
diff --git a/pages/dashboards/fra-kaare.vue b/pages/dashboards/fra-kaare.vue
index dac1845f..eba5db28 100644
--- a/pages/dashboards/fra-kaare.vue
+++ b/pages/dashboards/fra-kaare.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { PersonGenderEnum, StatisticsApi } from "@bcc-code/bmm-sdk-fetch";
 import type {
+  FraKaareDrawCommandDrawOption,
   FraKaareDrawCommandResponse,
   GetFraKaareStatisticsResponse,
 } from "@bcc-code/bmm-sdk-fetch";
@@ -91,11 +92,17 @@ const genderTranslations: Record<Gender, string> = {
   boys: "Gutter",
   girls: "Jenter",
 };
+const selectedDrawOption = ref<FraKaareDrawCommandDrawOption>();
+watch(statistics, (stats) => {
+  if (!stats) return;
+  selectedDrawOption.value = stats.drawOptions?.[0];
+});
 const isLoading = ref(false);
 const drawResult = ref<FraKaareDrawCommandResponse | null>(null);
 async function onDrawWinner() {
-  let gender;
   isLoading.value = true;
+  let gender;
+
   if (selectedGender.value === "both") {
     gender = undefined;
   } else if (selectedGender.value === "boys") {
@@ -103,13 +110,20 @@ async function onDrawWinner() {
   } else {
     gender = PersonGenderEnum.Female;
   }
-  drawResult.value = await new StatisticsApi().statisticsFraKaareDrawPost({
-    fraKaareDrawCommand: {
-      latestBirthYear: now - minAge.value,
-      earliestBirthYear: now - maxAge.value,
-      gender,
-    },
-  });
+
+  try {
+    if (!selectedDrawOption.value) return;
+    drawResult.value = await new StatisticsApi().statisticsFraKaareDrawPost({
+      fraKaareDrawCommand: {
+        latestBirthYear: now - minAge.value,
+        earliestBirthYear: now - maxAge.value,
+        gender,
+        drawOptionId: selectedDrawOption.value.id,
+      },
+    });
+  } catch (e) {
+    showErrorToUser("DrawWinnerFailed", "Kunne ikke trekke vinner");
+  }
   isLoading.value = false;
 }
 </script>
@@ -123,12 +137,26 @@ async function onDrawWinner() {
       class="grid grid-rows-[2fr_1fr] overflow-hidden rounded-2xl border border-label-separator xl:grid-cols-2 xl:grid-rows-1"
     >
       <div class="flex flex-col gap-4 bg-background-2 p-6">
-        <h2 class="type-heading-3">Trekk en vinner</h2>
+        <div class="mb-2 flex flex-wrap items-center justify-between gap-4">
+          <h2 class="type-heading-3">Trekk en vinner</h2>
+          <div class="flex gap-2">
+            <div
+              v-for="i in 10"
+              :key="i"
+              :class="[
+                'size-3 rounded-full border border-background-4',
+                i <= 6 ? 'bg-background-4' : '',
+              ]"
+            />
+          </div>
+        </div>
 
         <fieldset
           class="flex w-full items-start justify-between gap-4 rounded-2xl border border-label-separator bg-background-2 p-3"
         >
-          <legend class="bg-background-2 px-1">Aldersgruppe</legend>
+          <legend class="type-title-3 bg-background-2 px-1">
+            Aldersgruppe
+          </legend>
           <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
             <input
               v-model.number="minAge"
@@ -156,7 +184,7 @@ async function onDrawWinner() {
         <fieldset
           class="flex w-full items-start justify-between gap-4 rounded-2xl border border-label-separator bg-background-2 p-3"
         >
-          <legend>Kjønn</legend>
+          <legend class="type-title-3 bg-background-2 px-1">Kjønn</legend>
           <div class="flex rounded-xl bg-background-1 p-1">
             <button
               v-for="gender in genders"
@@ -174,6 +202,25 @@ async function onDrawWinner() {
           </div>
         </fieldset>
 
+        <fieldset
+          v-if="statistics?.drawOptions"
+          class="flex w-full items-start justify-between gap-4 rounded-2xl border border-label-separator bg-background-2 p-3"
+        >
+          <legend class="type-title-3 bg-background-2 px-1">Fra Kåre</legend>
+          <select
+            v-model="selectedDrawOption"
+            class="type-title-2 rounded-lg bg-background-1 px-2 py-1.5 text-label-1"
+          >
+            <option
+              v-for="(option, index) in statistics.drawOptions"
+              :key="option.id ?? index"
+              :value="option"
+            >
+              {{ option.description }}
+            </option>
+          </select>
+        </fieldset>
+
         <ButtonStyled
           intent="primary"
           class="mt-2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c7f6efe8..c4366af7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^2.3.3
         version: 2.3.3(typescript@5.3.3)(vue-router@4.3.2(vue@3.4.19(typescript@5.3.3)))
       '@bcc-code/bmm-sdk-fetch':
-        specifier: ^8.7.7
-        version: 8.7.7
+        specifier: ^8.7.9
+        version: 8.7.9
       '@floating-ui/vue':
         specifier: ^1.0.6
         version: 1.0.6(vue@3.4.19(typescript@5.3.3))
@@ -506,8 +506,8 @@ packages:
     resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
     engines: {node: '>=6.9.0'}
 
-  '@bcc-code/bmm-sdk-fetch@8.7.7':
-    resolution: {integrity: sha512-JXwVvVAqP474Ug7tTwhmhL1cOzeJqAUJiJCPYrlJBnOJpWAoFxp8iB0puJ1FmGBEO/KO+Jr7u/rCnxvJDXj9Vw==}
+  '@bcc-code/bmm-sdk-fetch@8.7.9':
+    resolution: {integrity: sha512-g0TgBDzG1RzQ4IAy2sSFjmP/cRDJKpwXT0MRCyfyl+nXZFFAOGpsVJF7AzklCVovJn/+GoiMAW6oWJMFM2Vjcw==}
 
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
@@ -8302,7 +8302,7 @@ snapshots:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  '@bcc-code/bmm-sdk-fetch@8.7.7': {}
+  '@bcc-code/bmm-sdk-fetch@8.7.9': {}
 
   '@bcoe/v8-coverage@0.2.3': {}