290 lines
8.8 KiB
Vue
290 lines
8.8 KiB
Vue
<template>
|
|
<div class="p-6">
|
|
<!-- Empty state -->
|
|
<div v-if="isEmpty" class="flex flex-col items-center justify-center py-16">
|
|
<Clock class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
|
|
<p class="text-sm text-text-secondary mt-4">Start tracking your time</p>
|
|
<p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Your dashboard will come alive with stats, charts, and recent activity once you start logging hours.</p>
|
|
<router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors">
|
|
Go to Timer
|
|
</router-link>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<template v-else>
|
|
<!-- Greeting header -->
|
|
<div class="mb-8">
|
|
<p class="text-lg text-text-secondary">{{ greeting }}</p>
|
|
<p class="text-xs text-text-tertiary mt-1">{{ formattedDate }}</p>
|
|
</div>
|
|
|
|
<!-- Stats row — 4 columns -->
|
|
<div class="grid grid-cols-4 gap-6 mb-8">
|
|
<div>
|
|
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Today</p>
|
|
<p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ formatDuration(todayStats.totalSeconds) }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">This Week</p>
|
|
<p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ formatDuration(weekStats.totalSeconds) }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">This Month</p>
|
|
<p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ formatDuration(monthStats.totalSeconds) }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Active Projects</p>
|
|
<p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ activeProjectsCount }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Weekly chart -->
|
|
<div class="mb-8">
|
|
<h2 class="text-[1rem] font-medium text-text-primary mb-4">Weekly Hours</h2>
|
|
<div class="h-48">
|
|
<Bar v-if="chartData" :data="chartData" :options="chartOptions" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent entries -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-[1rem] font-medium text-text-primary">Recent Entries</h2>
|
|
<router-link to="/entries" class="text-xs text-text-tertiary hover:text-text-secondary transition-colors">View all</router-link>
|
|
</div>
|
|
|
|
<div v-if="recentEntries.length > 0">
|
|
<div
|
|
v-for="entry in recentEntries"
|
|
:key="entry.id"
|
|
class="flex items-center justify-between py-3 border-b border-border-subtle last:border-0"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-2 h-2 rounded-full shrink-0"
|
|
:style="{ backgroundColor: getProjectColor(entry.project_id) }"
|
|
/>
|
|
<span class="text-[0.75rem] text-text-primary">{{ getProjectName(entry.project_id) }}</span>
|
|
</div>
|
|
<span class="text-[0.75rem] font-mono text-text-secondary">{{ formatDuration(entry.duration) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p v-else class="text-[0.75rem] text-text-tertiary py-8">
|
|
No entries yet. Start tracking your time.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { invoke } from '@tauri-apps/api/core'
|
|
import { Bar } from 'vue-chartjs'
|
|
import {
|
|
Chart as ChartJS,
|
|
CategoryScale,
|
|
LinearScale,
|
|
BarElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend
|
|
} from 'chart.js'
|
|
import { Clock } from 'lucide-vue-next'
|
|
import { useEntriesStore } from '../stores/entries'
|
|
import { useProjectsStore } from '../stores/projects'
|
|
import type { TimeEntry } from '../stores/entries'
|
|
|
|
// Register Chart.js components
|
|
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
|
|
|
|
const entriesStore = useEntriesStore()
|
|
const projectsStore = useProjectsStore()
|
|
|
|
const todayStats = ref<{ totalSeconds: number; byProject: unknown[] }>({ totalSeconds: 0, byProject: [] })
|
|
const weekStats = ref<{ totalSeconds: number; byProject: unknown[] }>({ totalSeconds: 0, byProject: [] })
|
|
const monthStats = ref<{ totalSeconds: number; byProject: unknown[] }>({ totalSeconds: 0, byProject: [] })
|
|
const recentEntries = ref<TimeEntry[]>([])
|
|
|
|
// Greeting based on time of day
|
|
const greeting = computed(() => {
|
|
const hour = new Date().getHours()
|
|
if (hour < 12) return 'Good morning'
|
|
if (hour < 18) return 'Good afternoon'
|
|
return 'Good evening'
|
|
})
|
|
|
|
// Formatted date
|
|
const formattedDate = computed(() => {
|
|
return new Date().toLocaleDateString('en-US', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})
|
|
})
|
|
|
|
// Empty state check
|
|
const isEmpty = computed(() => {
|
|
return recentEntries.value.length === 0 && weekStats.value.totalSeconds === 0
|
|
})
|
|
|
|
// Get start of current week (Monday)
|
|
function getWeekStart(): string {
|
|
const now = new Date()
|
|
const day = now.getDay()
|
|
const diff = now.getDate() - day + (day === 0 ? -6 : 1)
|
|
const monday = new Date(now.setDate(diff))
|
|
return monday.toISOString().split('T')[0]
|
|
}
|
|
|
|
// Get start of current month
|
|
function getMonthStart(): string {
|
|
const now = new Date()
|
|
return new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0]
|
|
}
|
|
|
|
// Get today's date
|
|
function getToday(): string {
|
|
return new Date().toISOString().split('T')[0]
|
|
}
|
|
|
|
// Format duration from seconds to readable format
|
|
function formatDuration(seconds: number): string {
|
|
const hours = Math.floor(seconds / 3600)
|
|
const minutes = Math.floor((seconds % 3600) / 60)
|
|
if (hours > 0) {
|
|
return `${hours}h ${minutes}m`
|
|
}
|
|
return `${minutes}m`
|
|
}
|
|
|
|
// Get project name by ID
|
|
function getProjectName(projectId: number): string {
|
|
const project = projectsStore.projects.find(p => p.id === projectId)
|
|
return project?.name || 'Unknown Project'
|
|
}
|
|
|
|
// Get project color by ID
|
|
function getProjectColor(projectId: number): string {
|
|
const project = projectsStore.projects.find(p => p.id === projectId)
|
|
return project?.color || '#6B7280'
|
|
}
|
|
|
|
// Active projects count (non-archived)
|
|
const activeProjectsCount = computed(() => {
|
|
return projectsStore.projects.filter(p => !p.archived).length
|
|
})
|
|
|
|
// Chart data for weekly hours
|
|
const chartData = computed(() => {
|
|
const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
const weekStart = getWeekStart()
|
|
const today = getToday()
|
|
const todayIndex = new Date().getDay()
|
|
const todayArrayIndex = todayIndex === 0 ? 6 : todayIndex - 1
|
|
|
|
// Initialize hours for each day
|
|
const hoursPerDay = [0, 0, 0, 0, 0, 0, 0]
|
|
|
|
// Sum up hours from entries for this week
|
|
recentEntries.value.forEach(entry => {
|
|
const entryDate = new Date(entry.start_time).toISOString().split('T')[0]
|
|
if (entryDate >= weekStart && entryDate <= today) {
|
|
const dayIndex = new Date(entry.start_time).getDay()
|
|
const index = dayIndex === 0 ? 6 : dayIndex - 1
|
|
hoursPerDay[index] += entry.duration / 3600
|
|
}
|
|
})
|
|
|
|
// Color today's bar lighter amber
|
|
const colors = hoursPerDay.map((_, i) => i === todayArrayIndex ? '#FBBF24' : '#D97706')
|
|
|
|
return {
|
|
labels: days,
|
|
datasets: [
|
|
{
|
|
label: 'Hours',
|
|
data: hoursPerDay,
|
|
backgroundColor: colors,
|
|
borderRadius: 2
|
|
}
|
|
]
|
|
}
|
|
})
|
|
|
|
// Chart options
|
|
const chartOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: (context: { raw: unknown }) => {
|
|
const hours = context.raw as number
|
|
return `${hours.toFixed(1)} hours`
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: '#2E2E2A'
|
|
},
|
|
ticks: {
|
|
color: '#5A5A54'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
color: '#5A5A54'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Load data on mount
|
|
onMounted(async () => {
|
|
await projectsStore.fetchProjects()
|
|
await entriesStore.fetchEntries()
|
|
|
|
try {
|
|
todayStats.value = await invoke('get_reports', {
|
|
startDate: getToday(),
|
|
endDate: getToday()
|
|
})
|
|
} catch (error) {
|
|
console.error('Failed to fetch today stats:', error)
|
|
}
|
|
|
|
try {
|
|
weekStats.value = await invoke('get_reports', {
|
|
startDate: getWeekStart(),
|
|
endDate: getToday()
|
|
})
|
|
} catch (error) {
|
|
console.error('Failed to fetch week stats:', error)
|
|
}
|
|
|
|
try {
|
|
monthStats.value = await invoke('get_reports', {
|
|
startDate: getMonthStart(),
|
|
endDate: getToday()
|
|
})
|
|
} catch (error) {
|
|
console.error('Failed to fetch month stats:', error)
|
|
}
|
|
|
|
recentEntries.value = entriesStore.entries.slice(0, 5)
|
|
})
|
|
</script>
|