feat: add Dashboard view
This commit is contained in:
Your Name
238
src/views/Dashboard.vue
Normal file
238
src/views/Dashboard.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<h1 class="text-2xl font-bold mb-6">Dashboard</h1>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<!-- This Week -->
|
||||
<div class="bg-surface border border-border rounded-lg p-6">
|
||||
<p class="text-text-secondary text-sm mb-1">This Week</p>
|
||||
<p class="text-3xl font-bold text-text-primary">{{ formatDuration(weekStats.totalSeconds) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- This Month -->
|
||||
<div class="bg-surface border border-border rounded-lg p-6">
|
||||
<p class="text-text-secondary text-sm mb-1">This Month</p>
|
||||
<p class="text-3xl font-bold text-text-primary">{{ formatDuration(monthStats.totalSeconds) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Active Projects -->
|
||||
<div class="bg-surface border border-border rounded-lg p-6">
|
||||
<p class="text-text-secondary text-sm mb-1">Active Projects</p>
|
||||
<p class="text-3xl font-bold text-text-primary">{{ activeProjectsCount }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weekly Chart -->
|
||||
<div class="bg-surface border border-border rounded-lg p-6 mb-6">
|
||||
<h2 class="text-lg font-semibold mb-4">This Week's Hours</h2>
|
||||
<div class="h-64">
|
||||
<Bar v-if="chartData" :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Time Entries -->
|
||||
<div class="bg-surface border border-border rounded-lg p-6">
|
||||
<h2 class="text-lg font-semibold mb-4">Recent Entries</h2>
|
||||
|
||||
<div v-if="recentEntries.length > 0" class="space-y-3">
|
||||
<div
|
||||
v-for="entry in recentEntries"
|
||||
:key="entry.id"
|
||||
class="flex items-center justify-between py-2 border-b border-border last:border-0"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-3 h-3 rounded-full"
|
||||
:style="{ backgroundColor: getProjectColor(entry.project_id) }"
|
||||
></div>
|
||||
<span class="text-text-primary">{{ getProjectName(entry.project_id) }}</span>
|
||||
</div>
|
||||
<span class="text-text-secondary font-mono">{{ formatDuration(entry.duration) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-center text-text-secondary py-8">
|
||||
No time entries yet. Start tracking your time!
|
||||
</div>
|
||||
</div>
|
||||
</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 { 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 weekStats = ref<{ totalSeconds: number; byProject: unknown[] }>({ totalSeconds: 0, byProject: [] })
|
||||
const monthStats = ref<{ totalSeconds: number; byProject: unknown[] }>({ totalSeconds: 0, byProject: [] })
|
||||
const recentEntries = ref<TimeEntry[]>([])
|
||||
|
||||
// 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()
|
||||
|
||||
// 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()
|
||||
// Convert Monday=0, Sunday=6 to array index
|
||||
const index = dayIndex === 0 ? 6 : dayIndex - 1
|
||||
hoursPerDay[index] += entry.duration / 3600
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
labels: days,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Hours',
|
||||
data: hoursPerDay,
|
||||
backgroundColor: '#F59E0B',
|
||||
borderRadius: 4
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 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: '#2E2E2E'
|
||||
},
|
||||
ticks: {
|
||||
color: '#A0A0A0'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
color: '#A0A0A0'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Load data on mount
|
||||
onMounted(async () => {
|
||||
// Fetch projects first
|
||||
await projectsStore.fetchProjects()
|
||||
|
||||
// Fetch all entries
|
||||
await entriesStore.fetchEntries()
|
||||
|
||||
// Get this week's stats
|
||||
try {
|
||||
weekStats.value = await invoke('get_reports', {
|
||||
startDate: getWeekStart(),
|
||||
endDate: getToday()
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch week stats:', error)
|
||||
}
|
||||
|
||||
// Get this month's stats
|
||||
try {
|
||||
monthStats.value = await invoke('get_reports', {
|
||||
startDate: getMonthStart(),
|
||||
endDate: getToday()
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch month stats:', error)
|
||||
}
|
||||
|
||||
// Get recent entries (last 5)
|
||||
recentEntries.value = entriesStore.entries.slice(0, 5)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user