mitlist/fe/src/components/ChoreItem.vue

<template>
    <li 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="emit('toggle-completion', chore)">
                <div class="checkbox-content">
                    <div class="chore-main-info">
                        <span class="checkbox-text-span"
                            :class="{ 'neo-completed-static': chore.is_completed && !chore.updating }">
                            {{ 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 v-if="totalTime > 0" class="total-time">
                        Total Time: {{ formatDuration(totalTime) }}
                    </div>
                </div>
            </label>
            <div class="neo-item-actions">
                <button class="btn btn-sm btn-neutral" @click="toggleTimer" :disabled="chore.is_completed">
                    {{ isActiveTimer ? 'Stop' : 'Start' }}
                </button>
                <button class="btn btn-sm btn-neutral" @click="emit('open-details', chore)" title="View Details">
                    📋
                </button>
                <button class="btn btn-sm btn-neutral" @click="emit('open-history', chore)" title="View History">
                    📅
                </button>
                <button class="btn btn-sm btn-neutral" @click="emit('edit', chore)">
                    Edit
                </button>
                <button class="btn btn-sm btn-danger" @click="emit('delete', chore)">
                    Delete
                </button>
            </div>
        </div>
        <ul v-if="chore.child_chores && chore.child_chores.length" class="child-chore-list">
            <ChoreItem v-for="child in chore.child_chores" :key="child.id" :chore="child" :time-entries="timeEntries"
                :active-timer="activeTimer" @toggle-completion="emit('toggle-completion', $event)"
                @edit="emit('edit', $event)" @delete="emit('delete', $event)"
                @open-details="emit('open-details', $event)" @open-history="emit('open-history', $event)"
                @start-timer="emit('start-timer', $event)"
                @stop-timer="(chore, timeEntryId) => emit('stop-timer', chore, timeEntryId)" />
        </ul>
    </li>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed } from 'vue';
import type { ChoreWithCompletion } from '../types/chore';
import type { TimeEntry } from '../stores/timeEntryStore';
import { formatDuration } from '../utils/formatters';

const props = defineProps<{
    chore: ChoreWithCompletion;
    timeEntries: TimeEntry[];
    activeTimer: TimeEntry | null;
}>();

const emit = defineEmits<{
    (e: 'toggle-completion', chore: ChoreWithCompletion): void;
    (e: 'edit', chore: ChoreWithCompletion): void;
    (e: 'delete', chore: ChoreWithCompletion): void;
    (e: 'open-details', chore: ChoreWithCompletion): void;
    (e: 'open-history', chore: ChoreWithCompletion): void;
    (e: 'start-timer', chore: ChoreWithCompletion): void;
    (e: 'stop-timer', chore: ChoreWithCompletion, timeEntryId: number): void;
}>();

const isActiveTimer = computed(() => {
    return props.activeTimer && props.activeTimer.chore_assignment_id === props.chore.current_assignment_id;
});

const totalTime = computed(() => {
    return props.timeEntries.reduce((acc, entry) => acc + (entry.duration_seconds || 0), 0);
});

const toggleTimer = () => {
    if (isActiveTimer.value) {
        emit('stop-timer', props.chore, props.activeTimer!.id);
    } else {
        emit('start-timer', props.chore);
    }
};

const getDueDateStatus = (chore: ChoreWithCompletion) => {
    if (chore.is_completed) return 'completed';

    const today = new Date();
    today.setHours(0, 0, 0, 0);

    const dueDate = new Date(chore.next_due_date);
    dueDate.setHours(0, 0, 0, 0);

    if (dueDate < today) return 'overdue';
    if (dueDate.getTime() === today.getTime()) return 'due-today';
    return 'upcoming';
};
</script>

<script lang="ts">
export default {
    name: 'ChoreItem'
}
</script>

<style scoped lang="scss">
.child-chore-list {
    list-style: none;
    padding-left: 2rem;
    margin-top: 0.5rem;
    border-left: 2px solid #e5e7eb;
}

.total-time {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.25rem;
}
</style>