From 767eae7f19426cecb1cee33ca52fb48fbc050f2d Mon Sep 17 00:00:00 2001
From: Addison Emig <addison@kwila.cloud>
Date: Fri, 17 Oct 2025 14:16:22 -0400
Subject: [PATCH 1/4] feat: history

---
 app/specs/63-experimental-daily-count-ui.md |  12 +-
 app/src/lib/utils.ts                        |   2 +-
 app/src/views/DailyCountsHistoryView.vue    | 206 +++++++++++++++++++-
 3 files changed, 210 insertions(+), 10 deletions(-)

diff --git a/app/specs/63-experimental-daily-count-ui.md b/app/specs/63-experimental-daily-count-ui.md
index c0105c1..c4f3571 100644
--- a/app/specs/63-experimental-daily-count-ui.md
+++ b/app/specs/63-experimental-daily-count-ui.md
@@ -36,9 +36,9 @@ Instead of inputting each individual bin, allow the user to input the daily coun
     - [x] Picker
     - [x] Daily count
     - [x] Weekly count
-- [ ] `DailyCountsHistoryView` should be the same as `BinsHistoryView`, but instead should:
-  - [ ] Display the list of send daily count messages, with:
-    - [ ] Picker
-    - [ ] Count
-    - [ ] Timestamp
-    - [ ] Send status
+- [x] `DailyCountsHistoryView` should be the same as `BinsHistoryView`, but instead should:
+  - [x] Display the list of send daily count messages, with:
+    - [x] Picker
+    - [x] Count
+    - [x] Timestamp
+    - [x] Send status
diff --git a/app/src/lib/utils.ts b/app/src/lib/utils.ts
index 4b5c182..6434b09 100644
--- a/app/src/lib/utils.ts
+++ b/app/src/lib/utils.ts
@@ -5,7 +5,7 @@ import type { Picker } from '@/models/picker'
 // Second number is month
 // Third number is day
 // Fourth number is release index for that day (starts at 0)
-export const appVersion = '2025.10.17.4'
+export const appVersion = '2025.10.17.5'
 
 export const getUserProfile = async () => {
   const {
diff --git a/app/src/views/DailyCountsHistoryView.vue b/app/src/views/DailyCountsHistoryView.vue
index bec1dc8..1b5a53a 100644
--- a/app/src/views/DailyCountsHistoryView.vue
+++ b/app/src/views/DailyCountsHistoryView.vue
@@ -1,7 +1,207 @@
 <script setup lang="ts">
-import ComingSoon from '@/components/ComingSoon.vue'
+import { supabase } from "@/lib/supabaseClient";
+import { getMessages, getMessage, resendMessage } from "@/lib/smoketreeClient";
+import type { DailyCount } from "@/models/dailyCount";
+import type { Picker } from "@/models/picker";
+import { getPickers } from "@/lib/utils";
+import { ref, onMounted, computed } from "vue";
+
+const dailyCounts = ref<DailyCount[]>([]);
+const messageStatuses = ref<Record<string, string>>({});
+const pickers = ref<Picker[]>([]);
+const selectedPicker = ref<string | null>(null);
+
+async function loadCompletedDailyCounts() {
+  let query = supabase
+    .from("dailyCount")
+    .select()
+    .eq("isPending", false)
+    .order("date", { ascending: false });
+
+  if (selectedPicker.value) {
+    query = query.eq("picker", selectedPicker.value);
+  }
+
+  const { data } = await query;
+  dailyCounts.value = data as DailyCount[];
+}
+
+async function loadMessageStatuses() {
+  const messages = await getMessages();
+  messageStatuses.value = Object.fromEntries(
+    messages.map((m) => [m.uuid, m.currentStatus]),
+  );
+}
+
+async function refresh(messageUuid: string) {
+  messageStatuses.value = {
+    ...messageStatuses.value,
+    [messageUuid]: "refreshing",
+  };
+  const message = await getMessage(messageUuid);
+  messageStatuses.value = {
+    ...messageStatuses.value,
+    [messageUuid]: message.currentStatus,
+  };
+}
+
+async function resend(messageUuid: string) {
+  messageStatuses.value = {
+    ...messageStatuses.value,
+    [messageUuid]: "pending",
+  };
+  await resendMessage(messageUuid);
+}
+
+async function loadPickers() {
+  pickers.value = await getPickers();
+}
+
+const weeklyCounts = computed(() => {
+  const today = new Date();
+  const dayOfWeek = today.getDay(); // 0 for Sunday, 1 for Monday, etc.
+  const diff = dayOfWeek; // Days since Sunday
+  const sunday = new Date(today);
+  sunday.setDate(today.getDate() - diff);
+  sunday.setHours(0, 0, 0, 0);
+
+  return dailyCounts.value
+    .filter((dailyCount) => new Date(dailyCount.date) >= sunday)
+    .reduce((sum, dailyCount) => sum + dailyCount.count, 0);
+});
+
+const dailyCountsArray = computed(() => {
+  const today = new Date();
+  const days = ["S", "M", "T", "W", "T", "F", "S"];
+  const dailyCountsList = [];
+
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(today);
+    date.setDate(today.getDate() - today.getDay() + i);
+    date.setHours(0, 0, 0, 0);
+
+    const dayCounts = dailyCounts.value.filter(
+      (dailyCount) =>
+        new Date(dailyCount.date).toDateString() === date.toDateString(),
+    );
+    const count = dayCounts.reduce(
+      (sum, dailyCount) => sum + dailyCount.count,
+      0,
+    );
+
+    dailyCountsList.push({ day: days[i], count });
+  }
+
+  return dailyCountsList;
+});
+
+onMounted(() => {
+  loadPickers();
+  loadCompletedDailyCounts();
+  loadMessageStatuses();
+});
 </script>
 
 <template>
-  <ComingSoon />
-</template>
\ No newline at end of file
+  <div class="flex flex-col gap-4 items-center py-4">
+    <div class="flex gap-4 items-center">
+      <label>Picker</label>
+      <select
+        v-model="selectedPicker"
+        @change="loadCompletedDailyCounts"
+        class="p-2 border rounded-md bg-gray-800"
+      >
+        <option :value="null">All</option>
+        <option
+          v-for="picker in pickers"
+          :key="picker.uuid"
+          :value="picker.name"
+        >
+          {{ picker.name }}
+        </option>
+      </select>
+    </div>
+    <div class="flex flex-col gap-2 w-[300px]">
+      <div
+        class="flex-1 flex flex-col items-center gap-1 bg-gray-700 rounded-lg p-4"
+      >
+        <span>Weekly Counts</span>
+        <span class="text-4xl">{{ weeklyCounts }}</span>
+      </div>
+      <div class="flex gap-1">
+        <div
+          v-for="dayData in dailyCountsArray"
+          :key="dayData.day"
+          class="flex-1 flex flex-col items-center bg-gray-700 rounded-lg p-1"
+        >
+          <span class="text-xs">{{ dayData.day }}</span>
+          <span class="text-lg">{{ dayData.count }}</span>
+        </div>
+      </div>
+    </div>
+    <ul>
+      <li v-for="dailyCount in dailyCounts" :key="dailyCount.uuid">
+        <div class="flex justify-between items-center pr-1">
+          <h1>{{ dailyCount.picker }}</h1>
+          <span
+            class="bg-blue-700 text-white font-bold text-lg rounded-lg px-2 py-1"
+            >{{ dailyCount.count }}</span
+          >
+        </div>
+        <span>{{ new Date(dailyCount.date).toLocaleString() }}</span>
+        <template v-if="dailyCount.messageUuid == null">
+          <span>Send Status - lost</span>
+        </template>
+        <template v-else>
+          <span
+            >Send Status -
+            {{ messageStatuses[dailyCount.messageUuid] ?? "unknown" }}</span
+          >
+          <button
+            v-if="
+              ['failed', 'rate_limited'].includes(
+                messageStatuses[dailyCount.messageUuid],
+              )
+            "
+            @click="resend(dailyCount.messageUuid)"
+          >
+            Resend
+          </button>
+          <button
+            v-else-if="messageStatuses[dailyCount.messageUuid] != 'sent'"
+            @click="refresh(dailyCount.messageUuid)"
+          >
+            Refresh
+          </button>
+        </template>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+ul {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+li {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 8px;
+  background-color: var(--color-slate-800);
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  button {
+    background-color: var(--color-blue-900);
+    border-radius: 8px;
+  }
+}
+</style>

From 118e6e8c6464bf7b34bfec8b03a73c309ecdcf33 Mon Sep 17 00:00:00 2001
From: Addison Emig <addison@kwila.cloud>
Date: Fri, 17 Oct 2025 14:23:13 -0400
Subject: [PATCH 2/4] refactor: rename

---
 app/src/views/DailyCountsHistoryView.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/views/DailyCountsHistoryView.vue b/app/src/views/DailyCountsHistoryView.vue
index 1b5a53a..8a0bdf6 100644
--- a/app/src/views/DailyCountsHistoryView.vue
+++ b/app/src/views/DailyCountsHistoryView.vue
@@ -57,7 +57,7 @@ async function loadPickers() {
   pickers.value = await getPickers();
 }
 
-const weeklyCounts = computed(() => {
+const weeklyCount = computed(() => {
   const today = new Date();
   const dayOfWeek = today.getDay(); // 0 for Sunday, 1 for Monday, etc.
   const diff = dayOfWeek; // Days since Sunday
@@ -123,16 +123,16 @@ onMounted(() => {
     </div>
     <div class="flex flex-col gap-2 w-[300px]">
       <div
-        class="flex-1 flex flex-col items-center gap-1 bg-gray-700 rounded-lg p-4"
+        class="flex-1 flex flex-col items-center gap-1 bg-blue-900 rounded-lg p-4"
       >
-        <span>Weekly Counts</span>
-        <span class="text-4xl">{{ weeklyCounts }}</span>
+        <span>Weekly Count</span>
+        <span class="text-4xl">{{ weeklyCount }}</span>
       </div>
       <div class="flex gap-1">
         <div
           v-for="dayData in dailyCountsArray"
           :key="dayData.day"
-          class="flex-1 flex flex-col items-center bg-gray-700 rounded-lg p-1"
+          class="flex-1 flex flex-col items-center bg-blue-900 rounded-lg p-1"
         >
           <span class="text-xs">{{ dayData.day }}</span>
           <span class="text-lg">{{ dayData.count }}</span>

From 4a4e001793dc6634500ed04ce8bc57ad59fb6e80 Mon Sep 17 00:00:00 2001
From: Addison Emig <addison@kwila.cloud>
Date: Fri, 17 Oct 2025 14:26:24 -0400
Subject: [PATCH 3/4] refactor: use tailwind

---
 app/src/views/DailyCountsHistoryView.vue | 41 ++++++------------------
 1 file changed, 10 insertions(+), 31 deletions(-)

diff --git a/app/src/views/DailyCountsHistoryView.vue b/app/src/views/DailyCountsHistoryView.vue
index 8a0bdf6..6a0bcb1 100644
--- a/app/src/views/DailyCountsHistoryView.vue
+++ b/app/src/views/DailyCountsHistoryView.vue
@@ -139,10 +139,14 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <ul>
-      <li v-for="dailyCount in dailyCounts" :key="dailyCount.uuid">
-        <div class="flex justify-between items-center pr-1">
-          <h1>{{ dailyCount.picker }}</h1>
+    <ul class="flex flex-col items-center gap-2">
+      <li
+        v-for="dailyCount in dailyCounts"
+        :key="dailyCount.uuid"
+        class="w-[300px] flex flex-col gap-1 p-2 rounded-lg bg-slate-800"
+      >
+        <div class="flex justify-between items-center">
+          <h1 class="text-2xl">{{ dailyCount.picker }}</h1>
           <span
             class="bg-blue-700 text-white font-bold text-lg rounded-lg px-2 py-1"
             >{{ dailyCount.count }}</span
@@ -164,12 +168,14 @@ onMounted(() => {
               )
             "
             @click="resend(dailyCount.messageUuid)"
+            class="bg-blue-900 rounded-lg"
           >
             Resend
           </button>
           <button
             v-else-if="messageStatuses[dailyCount.messageUuid] != 'sent'"
             @click="refresh(dailyCount.messageUuid)"
+            class="bg-blue-900 rounded-lg"
           >
             Refresh
           </button>
@@ -178,30 +184,3 @@ onMounted(() => {
     </ul>
   </div>
 </template>
-
-<style scoped>
-ul {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-li {
-  width: 300px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 8px;
-  border-radius: 8px;
-  background-color: var(--color-slate-800);
-
-  h1 {
-    font-size: 2rem;
-  }
-
-  button {
-    background-color: var(--color-blue-900);
-    border-radius: 8px;
-  }
-}
-</style>

From 31996088050b7bd16961422080239e8272abc37f Mon Sep 17 00:00:00 2001
From: Addison Emig <addison@kwila.cloud>
Date: Fri, 17 Oct 2025 14:34:09 -0400
Subject: [PATCH 4/4] feat: add try/catch

---
 app/src/views/DailyCountsHistoryView.vue | 83 +++++++++++++++---------
 1 file changed, 53 insertions(+), 30 deletions(-)

diff --git a/app/src/views/DailyCountsHistoryView.vue b/app/src/views/DailyCountsHistoryView.vue
index 6a0bcb1..1ccfe14 100644
--- a/app/src/views/DailyCountsHistoryView.vue
+++ b/app/src/views/DailyCountsHistoryView.vue
@@ -12,49 +12,72 @@ const pickers = ref<Picker[]>([]);
 const selectedPicker = ref<string | null>(null);
 
 async function loadCompletedDailyCounts() {
-  let query = supabase
-    .from("dailyCount")
-    .select()
-    .eq("isPending", false)
-    .order("date", { ascending: false });
-
-  if (selectedPicker.value) {
-    query = query.eq("picker", selectedPicker.value);
+  try {
+    let query = supabase
+      .from("dailyCount")
+      .select()
+      .eq("isPending", false)
+      .order("date", { ascending: false });
+
+    if (selectedPicker.value) {
+      query = query.eq("picker", selectedPicker.value);
+    }
+
+    const { data, error } = await query;
+    if (error) {
+      throw error;
+    }
+    dailyCounts.value = data as DailyCount[];
+  } catch (error) {
+    console.error("Failed to load completed daily counts:", error);
   }
-
-  const { data } = await query;
-  dailyCounts.value = data as DailyCount[];
 }
 
 async function loadMessageStatuses() {
-  const messages = await getMessages();
-  messageStatuses.value = Object.fromEntries(
-    messages.map((m) => [m.uuid, m.currentStatus]),
-  );
+  try {
+    const messages = await getMessages();
+    messageStatuses.value = Object.fromEntries(
+      messages.map((m) => [m.uuid, m.currentStatus]),
+    );
+  } catch (error) {
+    console.error("Failed to load message statuses:", error);
+  }
 }
 
 async function refresh(messageUuid: string) {
-  messageStatuses.value = {
-    ...messageStatuses.value,
-    [messageUuid]: "refreshing",
-  };
-  const message = await getMessage(messageUuid);
-  messageStatuses.value = {
-    ...messageStatuses.value,
-    [messageUuid]: message.currentStatus,
-  };
+  try {
+    messageStatuses.value = {
+      ...messageStatuses.value,
+      [messageUuid]: "refreshing",
+    };
+    const message = await getMessage(messageUuid);
+    messageStatuses.value = {
+      ...messageStatuses.value,
+      [messageUuid]: message.currentStatus,
+    };
+  } catch (error) {
+    console.error("Failed to refresh message status:", error);
+  }
 }
 
 async function resend(messageUuid: string) {
-  messageStatuses.value = {
-    ...messageStatuses.value,
-    [messageUuid]: "pending",
-  };
-  await resendMessage(messageUuid);
+  try {
+    messageStatuses.value = {
+      ...messageStatuses.value,
+      [messageUuid]: "pending",
+    };
+    await resendMessage(messageUuid);
+  } catch (error) {
+    console.error("Failed to resend message:", error);
+  }
 }
 
 async function loadPickers() {
-  pickers.value = await getPickers();
+  try {
+    pickers.value = await getPickers();
+  } catch (error) {
+    console.error("Failed to load pickers:", error);
+  }
 }
 
 const weeklyCount = computed(() => {