lashman/zeroclock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: project health badges and attention section

Browse Source
This commit is contained in:
Your Name
2026-02-20 15:32:14 +02:00
parent 3fd389da11
commit ace66a6093
1 changed files with 269 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
src/views/Projects.vue
View File

@@ -4,6 +4,7 @@
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary">Projects</h1> <h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary">Projects</h1>
<button <button
data-tour-id="new-project"
@click="openCreateDialog" @click="openCreateDialog"
class="px-3 py-1.5 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150" class="px-3 py-1.5 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
> >
@@ -11,6 +12,26 @@
</button> </button>
</div> </div>
<!-- Attention Needed -->
<div v-if="attentionProjects.length > 0" role="region" aria-label="Projects needing attention" class="mb-6">
<h2 class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-3">Attention Needed</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<div
v-for="ap in attentionProjects"
:key="ap.project.id"
class="flex items-center gap-3 px-3 py-2 bg-bg-surface border border-border-subtle rounded-lg cursor-pointer hover:bg-bg-elevated transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
@click="openEditDialog(ap.project)"
tabindex="0"
@keydown.enter="openEditDialog(ap.project)"
role="button"
>
<div class="w-2 h-2 rounded-full shrink-0" :style="{ backgroundColor: ap.project.color }" aria-hidden="true" />
<span class="text-[0.8125rem] text-text-primary truncate flex-1">{{ ap.project.name }}</span>
<span class="text-[0.625rem] font-medium" :class="ap.health.color">{{ ap.health.status }}</span>
</div>
</div>
</div>
<!-- Projects Grid --> <!-- Projects Grid -->
<TransitionGroup v-if="projectsStore.projects.length > 0" name="list" tag="div" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <TransitionGroup v-if="projectsStore.projects.length > 0" name="list" tag="div" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div <div
@@ -18,7 +39,11 @@
:key="project.id" :key="project.id"
class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] card-hover cursor-pointer" class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] card-hover cursor-pointer"
:style="{ transitionDelay: `${index * 30}ms` }" :style="{ transitionDelay: `${index * 30}ms` }"
tabindex="0"
role="button"
@click="openEditDialog(project)" @click="openEditDialog(project)"
@keydown.enter="openEditDialog(project)"
@keydown.space.prevent="openEditDialog(project)"
> >
<div class="flex border-l-[2px] hover:border-l-[3px] rounded-l-lg transition-all duration-150" :style="{ borderLeftColor: project.color }"> <div class="flex border-l-[2px] hover:border-l-[3px] rounded-l-lg transition-all duration-150" :style="{ borderLeftColor: project.color }">
<div class="flex-1 p-4"> <div class="flex-1 p-4">
@@ -27,22 +52,22 @@
<h3 class="text-[0.8125rem] font-semibold text-text-primary">{{ project.name }}</h3> <h3 class="text-[0.8125rem] font-semibold text-text-primary">{{ project.name }}</h3>
<p class="text-xs text-text-secondary mt-0.5">{{ getClientName(project.client_id) }} · {{ project.budget_amount ? formatCurrency(project.budget_amount) + ' fixed' : formatCurrency(project.hourly_rate) + '/hr' }}</p> <p class="text-xs text-text-secondary mt-0.5">{{ getClientName(project.client_id) }} · {{ project.budget_amount ? formatCurrency(project.budget_amount) + ' fixed' : formatCurrency(project.hourly_rate) + '/hr' }}</p>
</div> </div>
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-100"> <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-100">
<button <button
@click.stop="openEditDialog(project)" @click.stop="openEditDialog(project)"
class="p-1.5 text-text-tertiary hover:text-text-secondary transition-colors duration-150" class="p-1.5 text-text-tertiary hover:text-text-secondary transition-colors duration-150"
title="Edit" aria-label="Edit project"
> >
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg> </svg>
</button> </button>
<button <button
@click.stop="confirmDelete(project)" @click.stop="confirmDelete(project)"
class="p-1.5 text-text-tertiary hover:text-status-error transition-colors duration-150" class="p-1.5 text-text-tertiary hover:text-status-error transition-colors duration-150"
title="Delete" aria-label="Delete project"
> >
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg> </svg>
</button> </button>
@@ -53,13 +78,27 @@
<span class="text-[0.625rem] text-text-tertiary">{{ getBudgetUsed(project).toFixed(0) }}h / {{ project.budget_hours }}h</span> <span class="text-[0.625rem] text-text-tertiary">{{ getBudgetUsed(project).toFixed(0) }}h / {{ project.budget_hours }}h</span>
<span class="text-[0.625rem]" :class="getBudgetPct(project) > 90 ? 'text-status-error' : getBudgetPct(project) > 75 ? 'text-status-warning' : 'text-text-tertiary'">{{ getBudgetPct(project).toFixed(0) }}%</span> <span class="text-[0.625rem]" :class="getBudgetPct(project) > 90 ? 'text-status-error' : getBudgetPct(project) > 75 ? 'text-status-warning' : 'text-text-tertiary'">{{ getBudgetPct(project).toFixed(0) }}%</span>
</div> </div>
<div class="w-full bg-bg-elevated rounded-full h-1"> <div class="w-full bg-bg-elevated rounded-full h-1" role="progressbar" :aria-valuenow="Math.round(getBudgetPct(project))" aria-valuemin="0" aria-valuemax="100" :aria-label="'Budget progress: ' + getBudgetPct(project).toFixed(0) + '%'">
<div <div
class="h-1 rounded-full progress-bar" class="h-1 rounded-full progress-bar"
:class="getBudgetPct(project) > 90 ? 'bg-status-error' : getBudgetPct(project) > 75 ? 'bg-status-warning' : 'bg-accent'" :class="getBudgetPct(project) > 90 ? 'bg-status-error' : getBudgetPct(project) > 75 ? 'bg-status-warning' : 'bg-accent'"
:style="{ width: Math.min(getBudgetPct(project), 100) + '%' }" :style="{ width: Math.min(getBudgetPct(project), 100) + '%' }"
/> />
</div> </div>
<p v-if="getBudgetForecast(project)" class="text-[0.625rem] text-text-tertiary mt-1">
{{ getBudgetForecast(project) }}
</p>
</div>
<div v-if="project.id && budgetStatus[project.id]" class="flex items-center gap-1 mt-1.5" role="status">
<CheckCircle v-if="getProjectHealth(project, budgetStatus[project.id]).icon === 'success'"
class="w-3 h-3 text-status-running" aria-hidden="true" />
<AlertTriangle v-else-if="getProjectHealth(project, budgetStatus[project.id]).icon === 'warning'"
class="w-3 h-3 text-status-warning" aria-hidden="true" />
<XCircle v-else-if="getProjectHealth(project, budgetStatus[project.id]).icon === 'error'"
class="w-3 h-3 text-status-error" aria-hidden="true" />
<span class="text-[0.625rem]" :class="getProjectHealth(project, budgetStatus[project.id]).color">
{{ getProjectHealth(project, budgetStatus[project.id]).status }}
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -68,7 +107,7 @@
<!-- Empty State --> <!-- Empty State -->
<div v-else class="flex flex-col items-center justify-center py-16"> <div v-else class="flex flex-col items-center justify-center py-16">
<FolderKanban class="w-12 h-12 text-text-tertiary animate-float" :stroke-width="1.5" /> <FolderKanban class="w-12 h-12 text-text-tertiary animate-float" :stroke-width="1.5" aria-hidden="true" />
<p class="text-sm text-text-secondary mt-4">No projects yet</p> <p class="text-sm text-text-secondary mt-4">No projects yet</p>
<p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Projects organize your time entries and set billing rates for clients.</p> <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Projects organize your time entries and set billing rates for clients.</p>
<button <button
@@ -86,8 +125,8 @@
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50" class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
@click.self="tryCloseDialog" @click.self="tryCloseDialog"
> >
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl p-6 max-h-[calc(100vh-2rem)] overflow-y-auto"> <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl p-6 max-h-[calc(100vh-2rem)] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="project-dialog-title">
<h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4"> <h2 id="project-dialog-title" class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">
{{ editingProject ? 'Edit Project' : 'Create Project' }} {{ editingProject ? 'Edit Project' : 'Create Project' }}
</h2> </h2>
@@ -217,6 +256,7 @@
class="w-4 h-4 text-text-tertiary transition-transform duration-200" class="w-4 h-4 text-text-tertiary transition-transform duration-200"
:class="{ 'rotate-180': tasksExpanded }" :class="{ 'rotate-180': tasksExpanded }"
:stroke-width="1.5" :stroke-width="1.5"
aria-hidden="true"
/> />
</button> </button>
<div v-if="tasksExpanded" class="border-t border-border-subtle px-3 py-3 space-y-2.5"> <div v-if="tasksExpanded" class="border-t border-border-subtle px-3 py-3 space-y-2.5">
@@ -226,14 +266,65 @@
:key="task.id ?? `pending-${i}`" :key="task.id ?? `pending-${i}`"
class="flex items-center justify-between gap-2 px-2.5 py-1.5 bg-bg-inset rounded-lg" class="flex items-center justify-between gap-2 px-2.5 py-1.5 bg-bg-inset rounded-lg"
> >
<!-- Edit mode -->
<template v-if="task.id && editingTaskId === task.id">
<input
v-model="editingTaskName"
type="text"
aria-label="Task name"
autofocus
class="flex-1 px-2 py-1 bg-bg-base border border-border-subtle rounded text-[0.75rem] text-text-primary focus:outline-none focus:border-border-visible"
@keydown.enter.prevent="saveEditTask(task)"
@keydown.escape.prevent="cancelEditTask"
/>
<AppNumberInput
:model-value="editingTaskHours ?? 0"
@update:model-value="editingTaskHours = $event || null"
:min="0"
:step="0.5"
:precision="1"
placeholder="Est. hrs"
class="w-24"
/>
<button
type="button"
@click="saveEditTask(task)"
class="px-2 py-1 bg-accent text-bg-base text-[0.6875rem] font-medium rounded hover:bg-accent-hover transition-colors"
>
Save
</button>
<button
type="button"
@click="cancelEditTask"
class="px-2 py-1 text-text-secondary text-[0.6875rem] hover:text-text-primary transition-colors"
>
Cancel
</button>
</template>
<!-- Display mode -->
<template v-else>
<span class="text-[0.75rem] text-text-primary truncate flex-1">{{ task.name }}</span> <span class="text-[0.75rem] text-text-primary truncate flex-1">{{ task.name }}</span>
<span v-if="task.estimated_hours" class="text-[0.625rem] text-text-tertiary bg-bg-elevated px-1.5 py-0.5 rounded-full shrink-0">
{{ task.estimated_hours }}h
</span>
<button
v-if="task.id"
type="button"
@click="startEditTask(task)"
class="p-1 text-text-tertiary hover:text-text-secondary transition-colors shrink-0"
aria-label="Rename task"
>
<Pencil class="w-3.5 h-3.5" :stroke-width="1.5" aria-hidden="true" />
</button>
<button <button
type="button" type="button"
@click="removeTask(task, i)" @click="removeTask(task, i)"
class="p-1 text-text-tertiary hover:text-status-error transition-colors shrink-0" class="p-1 text-text-tertiary hover:text-status-error transition-colors shrink-0"
aria-label="Remove task"
> >
<X class="w-3.5 h-3.5" :stroke-width="1.5" /> <X class="w-3.5 h-3.5" :stroke-width="1.5" aria-hidden="true" />
</button> </button>
</template>
</div> </div>
</div> </div>
<p v-else class="text-[0.6875rem] text-text-tertiary">No tasks. Add tasks to break down project work.</p> <p v-else class="text-[0.6875rem] text-text-tertiary">No tasks. Add tasks to break down project work.</p>
@@ -269,6 +360,7 @@
class="w-4 h-4 text-text-tertiary transition-transform duration-200" class="w-4 h-4 text-text-tertiary transition-transform duration-200"
:class="{ 'rotate-180': trackedAppsExpanded }" :class="{ 'rotate-180': trackedAppsExpanded }"
:stroke-width="1.5" :stroke-width="1.5"
aria-hidden="true"
/> />
</button> </button>
<div v-if="trackedAppsExpanded" class="border-t border-border-subtle px-3 py-3 space-y-2.5"> <div v-if="trackedAppsExpanded" class="border-t border-border-subtle px-3 py-3 space-y-2.5">
@@ -295,8 +387,9 @@
type="button" type="button"
@click="removeTrackedApp(app)" @click="removeTrackedApp(app)"
class="p-1 text-text-tertiary hover:text-status-error transition-colors shrink-0" class="p-1 text-text-tertiary hover:text-status-error transition-colors shrink-0"
aria-label="Remove tracked app"
> >
<X class="w-3.5 h-3.5" :stroke-width="1.5" /> <X class="w-3.5 h-3.5" :stroke-width="1.5" aria-hidden="true" />
</button> </button>
</div> </div>
</div> </div>
@@ -308,13 +401,26 @@
@click="browseForApp" @click="browseForApp"
class="flex items-center gap-1.5 px-2.5 py-1.5 border border-border-subtle text-text-secondary text-[0.75rem] rounded-lg hover:bg-bg-elevated hover:text-text-primary transition-colors" class="flex items-center gap-1.5 px-2.5 py-1.5 border border-border-subtle text-text-secondary text-[0.75rem] rounded-lg hover:bg-bg-elevated hover:text-text-primary transition-colors"
> >
<FolderOpen class="w-3.5 h-3.5" :stroke-width="1.5" /> <FolderOpen class="w-3.5 h-3.5" :stroke-width="1.5" aria-hidden="true" />
Browse... Browse...
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<!-- Timeline Recording Override -->
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Timeline Recording</label>
<AppSelect
v-model="formData.timeline_override"
:options="timelineOptions"
label-key="label"
value-key="value"
placeholder="Inherit global"
:placeholder-value="null"
/>
</div>
<!-- Buttons --> <!-- Buttons -->
<div class="flex justify-end gap-3 pt-4"> <div class="flex justify-end gap-3 pt-4">
<button <button
@@ -343,9 +449,9 @@
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50" class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
@click.self="cancelDelete" @click.self="cancelDelete"
> >
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6"> <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6" role="alertdialog" aria-modal="true" aria-labelledby="delete-project-title" aria-describedby="delete-project-desc">
<h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Project</h2> <h2 id="delete-project-title" class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Project</h2>
<p class="text-[0.75rem] text-text-secondary mb-6"> <p id="delete-project-desc" class="text-[0.75rem] text-text-secondary mb-6">
Are you sure you want to delete "{{ projectToDelete?.name }}"? This action cannot be undone. Are you sure you want to delete "{{ projectToDelete?.name }}"? This action cannot be undone.
</p> </p>
<div class="flex justify-end gap-3"> <div class="flex justify-end gap-3">
@@ -366,23 +472,34 @@
</div> </div>
</Transition> </Transition>
<AppCascadeDeleteDialog
:show="showCascadeDelete"
entity-type="project"
:entity-name="projectToDelete?.name || ''"
:impacts="cascadeImpacts"
@confirm="handleCascadeConfirm"
@cancel="showCascadeDelete = false"
/>
<AppDiscardDialog :show="showDiscardDialog" @cancel="cancelDiscard" @discard="confirmDiscard" /> <AppDiscardDialog :show="showDiscardDialog" @cancel="cancelDiscard" @discard="confirmDiscard" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue' import { ref, reactive, computed, onMounted } from 'vue'
import { FolderKanban, ChevronDown, X, FolderOpen } from 'lucide-vue-next' import { FolderKanban, ChevronDown, X, FolderOpen, Pencil, CheckCircle, AlertTriangle, XCircle } from 'lucide-vue-next'
import { invoke } from '@tauri-apps/api/core' import { invoke } from '@tauri-apps/api/core'
import { open as openFileDialog } from '@tauri-apps/plugin-dialog' import { open as openFileDialog } from '@tauri-apps/plugin-dialog'
import AppNumberInput from '../components/AppNumberInput.vue' import AppNumberInput from '../components/AppNumberInput.vue'
import AppSelect from '../components/AppSelect.vue' import AppSelect from '../components/AppSelect.vue'
import AppDiscardDialog from '../components/AppDiscardDialog.vue' import AppDiscardDialog from '../components/AppDiscardDialog.vue'
import AppCascadeDeleteDialog from '../components/AppCascadeDeleteDialog.vue'
import RunningAppsPicker from '../components/RunningAppsPicker.vue' import RunningAppsPicker from '../components/RunningAppsPicker.vue'
import AppColorPicker from '../components/AppColorPicker.vue' import AppColorPicker from '../components/AppColorPicker.vue'
import { useProjectsStore, type Project, type Task } from '../stores/projects' import { useProjectsStore, type Project, type Task } from '../stores/projects'
import { useClientsStore } from '../stores/clients' import { useClientsStore } from '../stores/clients'
import { useSettingsStore } from '../stores/settings' import { useSettingsStore } from '../stores/settings'
import { useToastStore } from '../stores/toast'
import { formatCurrency, getCurrencySymbol } from '../utils/locale' import { formatCurrency, getCurrencySymbol } from '../utils/locale'
import { useFormGuard } from '../utils/formGuard' import { useFormGuard } from '../utils/formGuard'
@@ -398,6 +515,11 @@ interface TrackedApp {
const colorPresets = ['#D97706', '#3B82F6', '#8B5CF6', '#EC4899', '#10B981', '#EF4444', '#06B6D4', '#6B7280'] const colorPresets = ['#D97706', '#3B82F6', '#8B5CF6', '#EC4899', '#10B981', '#EF4444', '#06B6D4', '#6B7280']
const timelineOptions = [
{ label: 'On', value: 'on' },
{ label: 'Off', value: 'off' },
]
const projectsStore = useProjectsStore() const projectsStore = useProjectsStore()
const clientsStore = useClientsStore() const clientsStore = useClientsStore()
const settingsStore = useSettingsStore() const settingsStore = useSettingsStore()
@@ -405,7 +527,7 @@ const settingsStore = useSettingsStore()
const { showDiscardDialog, snapshot: snapshotForm, tryClose: tryCloseForm, confirmDiscard, cancelDiscard } = useFormGuard() const { showDiscardDialog, snapshot: snapshotForm, tryClose: tryCloseForm, confirmDiscard, cancelDiscard } = useFormGuard()
function getFormData() { function getFormData() {
return { name: formData.name, client_id: formData.client_id, hourly_rate: formData.hourly_rate, color: formData.color, archived: formData.archived, budget_hours: formData.budget_hours, budget_amount: formData.budget_amount } return { name: formData.name, client_id: formData.client_id, hourly_rate: formData.hourly_rate, color: formData.color, archived: formData.archived, budget_hours: formData.budget_hours, budget_amount: formData.budget_amount, timeline_override: formData.timeline_override }
} }
function tryCloseDialog() { function tryCloseDialog() {
@@ -415,6 +537,8 @@ function tryCloseDialog() {
// Dialog state // Dialog state
const showDialog = ref(false) const showDialog = ref(false)
const showDeleteDialog = ref(false) const showDeleteDialog = ref(false)
const showCascadeDelete = ref(false)
const cascadeImpacts = ref<{ label: string; count: number }[]>([])
const editingProject = ref<Project | null>(null) const editingProject = ref<Project | null>(null)
const projectToDelete = ref<Project | null>(null) const projectToDelete = ref<Project | null>(null)
@@ -427,6 +551,9 @@ const pendingNewTasks = ref<string[]>([])
const pendingRemoveTaskIds = ref<number[]>([]) const pendingRemoveTaskIds = ref<number[]>([])
const newTaskName = ref('') const newTaskName = ref('')
const tasksExpanded = ref(false) const tasksExpanded = ref(false)
const editingTaskId = ref<number | null>(null)
const editingTaskName = ref('')
const editingTaskHours = ref<number | null>(null)
const allTasks = computed(() => { const allTasks = computed(() => {
const existing = projectTasksList.value.filter(t => !pendingRemoveTaskIds.value.includes(t.id!)) const existing = projectTasksList.value.filter(t => !pendingRemoveTaskIds.value.includes(t.id!))
@@ -455,6 +582,33 @@ function removeTask(task: Task, index: number) {
} }
} }
function startEditTask(task: Task) {
editingTaskId.value = task.id || null
editingTaskName.value = task.name
editingTaskHours.value = task.estimated_hours ?? null
}
function cancelEditTask() {
editingTaskId.value = null
editingTaskName.value = ''
editingTaskHours.value = null
}
async function saveEditTask(task: Task) {
if (!task.id || !editingTaskName.value.trim()) return
const updated: Task = {
...task,
name: editingTaskName.value.trim(),
estimated_hours: editingTaskHours.value,
}
const ok = await projectsStore.updateTask(updated)
if (ok) {
const idx = projectTasksList.value.findIndex(t => t.id === task.id)
if (idx !== -1) projectTasksList.value[idx] = updated
cancelEditTask()
}
}
async function saveTasks(projectId: number) { async function saveTasks(projectId: number) {
for (const id of pendingRemoveTaskIds.value) { for (const id of pendingRemoveTaskIds.value) {
await projectsStore.deleteTask(id) await projectsStore.deleteTask(id)
@@ -549,17 +703,32 @@ const formData = reactive<Project>({
color: '#D97706', color: '#D97706',
archived: false, archived: false,
budget_hours: null, budget_hours: null,
budget_amount: null budget_amount: null,
timeline_override: null,
}) })
// Budget status // Budget status
const budgetStatus = ref<Record<number, { used_hours: number }>>({}) interface BudgetStatus {
hours_used: number
amount_used: number
budget_hours: number | null
budget_amount: number | null
percent_hours: number | null
percent_amount: number | null
daily_average_hours: number
estimated_completion_days: number | null
hours_remaining: number | null
pace: string | null
}
const budgetStatus = ref<Record<number, BudgetStatus>>({})
async function loadBudgetStatus() { async function loadBudgetStatus() {
for (const project of projectsStore.projects) { for (const project of projectsStore.projects) {
if (project.id && project.budget_hours) { if (project.id && project.budget_hours) {
try { try {
const status = await invoke<{ used_hours: number; used_amount: number }>('get_project_budget_status', { projectId: project.id }) const today = new Date().toISOString().split('T')[0]
const status = await invoke<BudgetStatus>('get_project_budget_status', { projectId: project.id, today })
budgetStatus.value[project.id] = status budgetStatus.value[project.id] = status
} catch (e) { } catch (e) {
// ignore // ignore
@@ -569,7 +738,21 @@ async function loadBudgetStatus() {
} }
function getBudgetUsed(project: any): number { function getBudgetUsed(project: any): number {
return budgetStatus.value[project.id]?.used_hours || 0 return budgetStatus.value[project.id]?.hours_used || 0
}
function getBudgetForecast(project: any): string | null {
const status = budgetStatus.value[project.id]
if (!status?.pace) return null
const remaining = status.hours_remaining
if (remaining === null || remaining === undefined) return null
if (status.pace === 'complete') return 'Budget reached'
const days = status.estimated_completion_days
if (days === null || days === undefined || days < 0) return `${remaining.toFixed(0)}h remaining - no recent activity`
const avgText = status.daily_average_hours > 0 ? `${status.daily_average_hours.toFixed(1)}h/day avg` : ''
if (status.pace === 'ahead') return `${remaining.toFixed(0)}h remaining - ahead of schedule${avgText ? ' (' + avgText + ')' : ''}`
if (status.pace === 'on_track') return `${remaining.toFixed(0)}h remaining - on track${avgText ? ' (' + avgText + ')' : ''}`
return `${remaining.toFixed(0)}h remaining - behind schedule${avgText ? ' (' + avgText + ')' : ''}`
} }
function getBudgetPct(project: any): number { function getBudgetPct(project: any): number {
@@ -578,6 +761,27 @@ function getBudgetPct(project: any): number {
return (used / project.budget_hours) * 100 return (used / project.budget_hours) * 100
} }
// Project health computation
function getProjectHealth(project: Project, status: BudgetStatus): { status: string; icon: string; color: string } {
if (!status) return { status: 'No budget', icon: 'none', color: 'text-text-tertiary' }
const pct = project.budget_hours ? (status.hours_used / project.budget_hours) * 100 : 0
const pace = status.pace
if (pct > 100) return { status: 'Over Budget', icon: 'error', color: 'text-status-error' }
if (pace === 'behind' && pct > 75) return { status: 'At Risk', icon: 'warning', color: 'text-status-warning' }
return { status: 'On Track', icon: 'success', color: 'text-status-running' }
}
const attentionProjects = computed(() => {
return projectsStore.projects
.filter(p => !p.archived && p.id && budgetStatus.value[p.id!])
.map(p => ({
project: p,
health: getProjectHealth(p, budgetStatus.value[p.id!])
}))
.filter(ap => ap.health.icon === 'warning' || ap.health.icon === 'error')
})
// Get client name by ID // Get client name by ID
function getClientName(clientId?: number): string { function getClientName(clientId?: number): string {
if (!clientId) return 'No client' if (!clientId) return 'No client'
@@ -595,6 +799,7 @@ function openCreateDialog() {
formData.archived = false formData.archived = false
formData.budget_hours = null formData.budget_hours = null
formData.budget_amount = null formData.budget_amount = null
formData.timeline_override = null
billingType.value = 'hourly' billingType.value = 'hourly'
trackedApps.value = [] trackedApps.value = []
pendingAddApps.value = [] pendingAddApps.value = []
@@ -620,6 +825,7 @@ async function openEditDialog(project: Project) {
formData.archived = project.archived formData.archived = project.archived
formData.budget_hours = project.budget_hours ?? null formData.budget_hours = project.budget_hours ?? null
formData.budget_amount = project.budget_amount ?? null formData.budget_amount = project.budget_amount ?? null
formData.timeline_override = project.timeline_override ?? null
// Infer billing type from existing data // Infer billing type from existing data
billingType.value = (project.budget_amount && project.budget_amount > 0) ? 'fixed' : 'hourly' billingType.value = (project.budget_amount && project.budget_amount > 0) ? 'fixed' : 'hourly'
pendingAddApps.value = [] pendingAddApps.value = []
@@ -672,9 +878,31 @@ async function handleSubmit() {
} }
// Confirm delete // Confirm delete
function confirmDelete(project: Project) { async function confirmDelete(project: Project) {
if (!project.id) return
projectToDelete.value = project projectToDelete.value = project
try {
const deps = await invoke<any>('get_project_dependents', { projectId: project.id })
const total = deps.time_entries + deps.favorites + deps.expenses + deps.recurring_entries + deps.timeline_events + deps.tasks + deps.tracked_apps
if (total > 0) {
cascadeImpacts.value = [
{ label: 'time entries', count: deps.time_entries },
{ label: 'favorites', count: deps.favorites },
{ label: 'expenses', count: deps.expenses },
{ label: 'recurring entries', count: deps.recurring_entries },
{ label: 'timeline events', count: deps.timeline_events },
{ label: 'tasks', count: deps.tasks },
{ label: 'tracked apps', count: deps.tracked_apps },
]
showCascadeDelete.value = true
} else {
showDeleteDialog.value = true showDeleteDialog.value = true
}
} catch {
showDeleteDialog.value = true
}
} }
// Cancel delete // Cancel delete
@@ -691,6 +919,17 @@ async function handleDelete() {
cancelDelete() cancelDelete()
} }
// Handle cascade delete confirmation
async function handleCascadeConfirm() {
try {
await handleDelete()
} catch {
const toast = useToastStore()
toast.error('Failed to delete project')
}
showCascadeDelete.value = false
}
// Load data on mount // Load data on mount
onMounted(async () => { onMounted(async () => {
await Promise.all([ await Promise.all([