feat: Enhance ChoresPage with detail and history modals

This update introduces new functionality to the ChoresPage, including:

- Added modals for viewing chore details and history.
- Implemented loading states for assignments and history.
- Enhanced chore display with assignment and completion details.
- Introduced new types for chore assignments and history.
- Improved UI with badges for overdue and due-today statuses.

These changes improve user experience by providing more context and information about chores and their assignments.

fe/src/pages/ChoresPage.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { format, startOfDay, isEqual, isToday as isTodayDate } from 'date-fns'
+import { format, startOfDay, isEqual, isToday as isTodayDate, formatDistanceToNow, parseISO } from 'date-fns'
 import { choreService } from '../services/choreService'
 import { useNotificationStore } from '../stores/notifications'
-import type { Chore, ChoreCreate, ChoreUpdate, ChoreFrequency, ChoreAssignmentUpdate } from '../types/chore'
+import type { Chore, ChoreCreate, ChoreUpdate, ChoreFrequency, ChoreAssignmentUpdate, ChoreAssignment, ChoreHistory } from '../types/chore'
 import { groupService } from '../services/groupService'
 import { useStorage } from '@vueuse/core'
 
@@ -16,6 +16,8 @@ interface ChoreWithCompletion extends Chore {
   is_completed: boolean;
   completed_at: string | null;
   updating: boolean;
+  assigned_user_name?: string;
+  completed_by_name?: string;
 }
 
 interface ChoreFormData {
@@ -35,8 +37,14 @@ const chores = ref<ChoreWithCompletion[]>([])
 const groups = ref<{ id: number, name: string }[]>([])
 const showChoreModal = ref(false)
 const showDeleteDialog = ref(false)
+const showChoreDetailModal = ref(false)
+const showHistoryModal = ref(false)
 const isEditing = ref(false)
 const selectedChore = ref<ChoreWithCompletion | null>(null)
+const selectedChoreHistory = ref<ChoreHistory[]>([])
+const selectedChoreAssignments = ref<ChoreAssignment[]>([])
+const loadingHistory = ref(false)
+const loadingAssignments = ref(false)
 
 const cachedChores = useStorage<ChoreWithCompletion[]>('cached-chores-v2', [])
 const cachedTimestamp = useStorage<number>('cached-chores-timestamp-v2', 0)
@@ -73,6 +81,8 @@ const loadChores = async () => {
         current_assignment_id: currentAssignment?.id ?? null,
         is_completed: currentAssignment?.is_complete ?? false,
         completed_at: currentAssignment?.completed_at ?? null,
+        assigned_user_name: currentAssignment?.assigned_user?.name || currentAssignment?.assigned_user?.email || 'Unknown',
+        completed_by_name: currentAssignment?.assigned_user?.name || currentAssignment?.assigned_user?.email || 'Unknown',
         updating: false,
       }
     });
@@ -113,13 +123,24 @@ const getChoreSubtext = (chore: ChoreWithCompletion): string => {
   if (chore.is_completed && chore.completed_at) {
     const completedDate = new Date(chore.completed_at);
     if (isTodayDate(completedDate)) {
-      return t('choresPage.completedToday');
+      return t('choresPage.completedToday') + (chore.completed_by_name ? ` by ${chore.completed_by_name}` : '');
     }
-    return t('choresPage.completedOn', { date: format(completedDate, 'd MMM') });
+    const timeAgo = formatDistanceToNow(completedDate, { addSuffix: true });
+    return `Completed ${timeAgo}` + (chore.completed_by_name ? ` by ${chore.completed_by_name}` : '');
   }
 
   const parts: string[] = [];
 
+  // Show who it's assigned to if there's an assignment
+  if (chore.current_assignment_id && chore.assigned_user_name) {
+    parts.push(`Assigned to ${chore.assigned_user_name}`);
+  }
+
+  // Show creator info for group chores
+  if (chore.type === 'group' && chore.creator) {
+    parts.push(`Created by ${chore.creator.name || chore.creator.email}`);
+  }
+
   if (chore.frequency && chore.frequency !== 'one_time') {
     const freqOption = frequencyOptions.value.find(f => f.value === chore.frequency);
     if (freqOption) {
@@ -306,6 +327,77 @@ const toggleCompletion = async (chore: ChoreWithCompletion) => {
     chore.updating = false;
   }
 };
+
+const openChoreDetailModal = async (chore: ChoreWithCompletion) => {
+  selectedChore.value = chore;
+  showChoreDetailModal.value = true;
+
+  // Load assignments for this chore
+  loadingAssignments.value = true;
+  try {
+    selectedChoreAssignments.value = await choreService.getChoreAssignments(chore.id);
+  } catch (error) {
+    console.error('Failed to load chore assignments:', error);
+    notificationStore.addNotification({
+      message: 'Failed to load chore assignments.',
+      type: 'error'
+    });
+  } finally {
+    loadingAssignments.value = false;
+  }
+};
+
+const openHistoryModal = async (chore: ChoreWithCompletion) => {
+  selectedChore.value = chore;
+  showHistoryModal.value = true;
+
+  // Load history for this chore
+  loadingHistory.value = true;
+  try {
+    selectedChoreHistory.value = await choreService.getChoreHistory(chore.id);
+  } catch (error) {
+    console.error('Failed to load chore history:', error);
+    notificationStore.addNotification({
+      message: 'Failed to load chore history.',
+      type: 'error'
+    });
+  } finally {
+    loadingHistory.value = false;
+  }
+};
+
+const formatHistoryEntry = (entry: ChoreHistory) => {
+  const timestamp = format(parseISO(entry.timestamp), 'MMM d, h:mm a');
+  const user = entry.changed_by_user?.name || entry.changed_by_user?.email || 'System';
+
+  switch (entry.event_type) {
+    case 'created':
+      return `${timestamp} - ${user} created this chore`;
+    case 'updated':
+      return `${timestamp} - ${user} updated this chore`;
+    case 'deleted':
+      return `${timestamp} - ${user} deleted this chore`;
+    case 'assigned':
+      return `${timestamp} - ${user} assigned this chore`;
+    case 'completed':
+      return `${timestamp} - ${user} completed this chore`;
+    case 'reopened':
+      return `${timestamp} - ${user} reopened this chore`;
+    default:
+      return `${timestamp} - ${user} performed action: ${entry.event_type}`;
+  }
+};
+
+const getDueDateStatus = (chore: ChoreWithCompletion) => {
+  if (chore.is_completed) return 'completed';
+
+  const today = startOfDay(new Date());
+  const dueDate = startOfDay(new Date(chore.next_due_date));
+
+  if (dueDate < today) return 'overdue';
+  if (isEqual(dueDate, today)) return 'due-today';
+  return 'upcoming';
+};
 </script>
 
 <template>
@@ -338,19 +430,35 @@ const toggleCompletion = async (chore: ChoreWithCompletion) => {
         <h2 class="date-header">{{ formatDateHeader(group.date) }}</h2>
         <div class="neo-item-list-container">
           <ul class="neo-item-list">
-            <li v-for="chore in group.chores" :key="chore.id" class="neo-list-item">
+            <li v-for="chore in group.chores" :key="chore.id" class="neo-list-item"
+              :class="`status-${getDueDateStatus(chore)}`">
               <div class="neo-item-content">
                 <label class="neo-checkbox-label">
                   <input type="checkbox" :checked="chore.is_completed" @change="toggleCompletion(chore)">
                   <div class="checkbox-content">
-                    <span class="checkbox-text-span"
+                    <div class="chore-main-info">
-                      :class="{ 'neo-completed-static': chore.is_completed && !chore.updating }">
+                      <span class="checkbox-text-span"
-                      {{ chore.name }}
+                        :class="{ 'neo-completed-static': chore.is_completed && !chore.updating }">
-                    </span>
+                        {{ chore.name }}
+                      </span>
+                      <div class="chore-badges">
+                        <span v-if="chore.type === 'group'" class="badge badge-group">Group</span>
+                        <span v-if="getDueDateStatus(chore) === 'overdue'" class="badge badge-overdue">Overdue</span>
+                        <span v-if="getDueDateStatus(chore) === 'due-today'" class="badge badge-due-today">Due
+                          Today</span>
+                      </div>
+                    </div>
+                    <div v-if="chore.description" class="chore-description">{{ chore.description }}</div>
                     <span v-if="chore.subtext" class="item-time">{{ chore.subtext }}</span>
                   </div>
                 </label>
                 <div class="neo-item-actions">
+                  <button class="btn btn-sm btn-neutral" @click="openChoreDetailModal(chore)" title="View Details">
+                    📋
+                  </button>
+                  <button class="btn btn-sm btn-neutral" @click="openHistoryModal(chore)" title="View History">
+                    📅
+                  </button>
                   <button class="btn btn-sm btn-neutral" @click="openEditChoreModal(chore)">
                     {{ t('choresPage.edit', 'Edit') }}
                   </button>
@@ -460,6 +568,113 @@ const toggleCompletion = async (chore: ChoreWithCompletion) => {
         </div>
       </div>
     </div>
+
+    <!-- Chore Detail Modal -->
+    <div v-if="showChoreDetailModal" class="modal-backdrop open" @click.self="showChoreDetailModal = false">
+      <div class="modal-container detail-modal">
+        <div class="modal-header">
+          <h3>{{ selectedChore?.name }}</h3>
+          <button type="button" @click="showChoreDetailModal = false" class="close-button">
+            &times;
+          </button>
+        </div>
+        <div class="modal-body" v-if="selectedChore">
+          <div class="detail-section">
+            <h4>Details</h4>
+            <div class="detail-grid">
+              <div class="detail-item">
+                <span class="label">Type:</span>
+                <span class="value">{{ selectedChore.type === 'group' ? 'Group' : 'Personal' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">Created by:</span>
+                <span class="value">{{ selectedChore.creator?.name || selectedChore.creator?.email || 'Unknown'
+                }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">Due date:</span>
+                <span class="value">{{ format(new Date(selectedChore.next_due_date), 'PPP') }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">Frequency:</span>
+                <span class="value">
+                  {{selectedChore?.frequency === 'custom' && selectedChore?.custom_interval_days
+                    ? `Every ${selectedChore.custom_interval_days} days`
+                    : frequencyOptions.find(f => f.value === selectedChore?.frequency)?.label || selectedChore?.frequency
+                  }}
+                </span>
+              </div>
+              <div v-if="selectedChore.description" class="detail-item full-width">
+                <span class="label">Description:</span>
+                <span class="value">{{ selectedChore.description }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="detail-section">
+            <h4>Assignments</h4>
+            <div v-if="loadingAssignments" class="loading-spinner">Loading...</div>
+            <div v-else-if="selectedChoreAssignments.length === 0" class="no-data">
+              No assignments found for this chore.
+            </div>
+            <div v-else class="assignments-list">
+              <div v-for="assignment in selectedChoreAssignments" :key="assignment.id" class="assignment-item">
+                <div class="assignment-main">
+                  <span class="assigned-user">{{ assignment.assigned_user?.name || assignment.assigned_user?.email
+                  }}</span>
+                  <span class="assignment-status" :class="{ completed: assignment.is_complete }">
+                    {{ assignment.is_complete ? '✅ Completed' : '⏳ Pending' }}
+                  </span>
+                </div>
+                <div class="assignment-details">
+                  <span>Due: {{ format(new Date(assignment.due_date), 'PPP') }}</span>
+                  <span v-if="assignment.completed_at">
+                    Completed: {{ format(new Date(assignment.completed_at), 'PPP') }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-neutral" @click="showChoreDetailModal = false">Close</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- History Modal -->
+    <div v-if="showHistoryModal" class="modal-backdrop open" @click.self="showHistoryModal = false">
+      <div class="modal-container history-modal">
+        <div class="modal-header">
+          <h3>History: {{ selectedChore?.name }}</h3>
+          <button type="button" @click="showHistoryModal = false" class="close-button">
+            &times;
+          </button>
+        </div>
+        <div class="modal-body">
+          <div v-if="loadingHistory" class="loading-spinner">Loading history...</div>
+          <div v-else-if="selectedChoreHistory.length === 0" class="no-data">
+            No history found for this chore.
+          </div>
+          <div v-else class="history-list">
+            <div v-for="entry in selectedChoreHistory" :key="entry.id" class="history-item">
+              <div class="history-content">
+                <span class="history-text">{{ formatHistoryEntry(entry) }}</span>
+                <div v-if="entry.event_data && Object.keys(entry.event_data).length > 0" class="history-data">
+                  <details>
+                    <summary>Details</summary>
+                    <pre>{{ JSON.stringify(entry.event_data, null, 2) }}</pre>
+                  </details>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-neutral" @click="showHistoryModal = false">Close</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -679,4 +894,212 @@ const toggleCompletion = async (chore: ChoreWithCompletion) => {
   transform: scaleX(1);
   transform-origin: left;
 }
+
+/* New styles for enhanced UX */
+.chore-main-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.chore-badges {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.badge {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.badge-group {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.badge-overdue {
+  background-color: #ef4444;
+  color: white;
+}
+
+.badge-due-today {
+  background-color: #f59e0b;
+  color: white;
+}
+
+.chore-description {
+  font-size: 0.875rem;
+  color: var(--dark);
+  opacity: 0.8;
+  margin-top: 0.25rem;
+  font-style: italic;
+}
+
+/* Status-based styling */
+.status-overdue {
+  border-left: 4px solid #ef4444;
+}
+
+.status-due-today {
+  border-left: 4px solid #f59e0b;
+}
+
+.status-completed {
+  opacity: 0.7;
+}
+
+/* Modal styles */
+.detail-modal .modal-container,
+.history-modal .modal-container {
+  max-width: 600px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.detail-section {
+  margin-bottom: 1.5rem;
+}
+
+.detail-section h4 {
+  margin-bottom: 0.75rem;
+  font-weight: 600;
+  color: var(--dark);
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 0.25rem;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.detail-item.full-width {
+  grid-column: 1 / -1;
+}
+
+.detail-item .label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--dark);
+  opacity: 0.8;
+}
+
+.detail-item .value {
+  font-size: 0.875rem;
+  color: var(--dark);
+}
+
+.assignments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.assignment-item {
+  padding: 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background-color: #f9fafb;
+}
+
+.assignment-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.assigned-user {
+  font-weight: 500;
+  color: var(--dark);
+}
+
+.assignment-status {
+  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  background-color: #fbbf24;
+  color: white;
+}
+
+.assignment-status.completed {
+  background-color: #10b981;
+}
+
+.assignment-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--dark);
+  opacity: 0.8;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.history-item {
+  padding: 0.75rem;
+  border-left: 3px solid #e5e7eb;
+  background-color: #f9fafb;
+  border-radius: 0 0.25rem 0.25rem 0;
+}
+
+.history-text {
+  font-size: 0.875rem;
+  color: var(--dark);
+}
+
+.history-data {
+  margin-top: 0.5rem;
+}
+
+.history-data details {
+  font-size: 0.75rem;
+}
+
+.history-data summary {
+  cursor: pointer;
+  color: var(--primary);
+  font-weight: 500;
+}
+
+.history-data pre {
+  margin-top: 0.25rem;
+  padding: 0.5rem;
+  background-color: #f3f4f6;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  overflow-x: auto;
+}
+
+.loading-spinner {
+  text-align: center;
+  padding: 1rem;
+  color: var(--dark);
+  opacity: 0.7;
+}
+
+.no-data {
+  text-align: center;
+  padding: 1rem;
+  color: var(--dark);
+  opacity: 0.7;
+  font-style: italic;
+}
 </style>