feat: time-of-day heatmap in reports patterns tab
This commit is contained in:
Your Name
@@ -3,7 +3,13 @@
|
||||
<h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary mb-6">Reports</h1>
|
||||
|
||||
<!-- Date Range Selector -->
|
||||
<div class="bg-bg-surface rounded-lg p-4 mb-6 flex flex-wrap items-end gap-4">
|
||||
<div data-tour-id="reports-daterange" class="bg-bg-surface rounded-lg p-4 mb-6 flex flex-wrap items-end gap-4">
|
||||
<AppDateRangePresets
|
||||
:start-date="startDate"
|
||||
:end-date="endDate"
|
||||
@select="({ start, end }) => { startDate = start; endDate = end; fetchReport() }"
|
||||
class="mb-3 w-full"
|
||||
/>
|
||||
<div>
|
||||
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Date</label>
|
||||
<AppDatePicker
|
||||
@@ -18,7 +24,17 @@
|
||||
placeholder="End date"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Billable</label>
|
||||
<AppSelect
|
||||
v-model="billableFilter"
|
||||
:options="billableFilterOptions"
|
||||
label-key="label"
|
||||
value-key="value"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
data-tour-id="reports-generate"
|
||||
@click="fetchReport"
|
||||
class="px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
|
||||
>
|
||||
@@ -33,55 +49,111 @@
|
||||
</div>
|
||||
|
||||
<!-- Tab Buttons -->
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<div data-tour-id="reports-tabs" class="flex items-center gap-2 mb-6" role="tablist" aria-label="Report type" @keydown="onTabKeydown">
|
||||
<button
|
||||
@click="activeTab = 'hours'"
|
||||
role="tab"
|
||||
:aria-selected="activeTab === 'hours'"
|
||||
aria-controls="tabpanel-hours"
|
||||
id="tab-hours"
|
||||
:tabindex="activeTab === 'hours' ? 0 : -1"
|
||||
class="px-4 py-2 text-[0.75rem] font-medium rounded-lg transition-colors"
|
||||
:class="activeTab === 'hours' ? 'bg-accent text-bg-base' : 'text-text-secondary hover:text-text-primary'"
|
||||
>
|
||||
<span class="flex items-center gap-1.5">
|
||||
<BarChart3 class="w-3.5 h-3.5" :stroke-width="1.5" />
|
||||
<BarChart3 class="w-3.5 h-3.5" :stroke-width="1.5" aria-hidden="true" />
|
||||
Hours
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'profitability'; if (profitabilityData.length === 0 && startDate && endDate) fetchProfitability()"
|
||||
role="tab"
|
||||
:aria-selected="activeTab === 'profitability'"
|
||||
aria-controls="tabpanel-profitability"
|
||||
id="tab-profitability"
|
||||
:tabindex="activeTab === 'profitability' ? 0 : -1"
|
||||
class="px-4 py-2 text-[0.75rem] font-medium rounded-lg transition-colors"
|
||||
:class="activeTab === 'profitability' ? 'bg-accent text-bg-base' : 'text-text-secondary hover:text-text-primary'"
|
||||
>
|
||||
<span class="flex items-center gap-1.5">
|
||||
<DollarSign class="w-3.5 h-3.5" :stroke-width="1.5" />
|
||||
<DollarSign class="w-3.5 h-3.5" :stroke-width="1.5" aria-hidden="true" />
|
||||
Profitability
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@click="switchToExpenses"
|
||||
role="tab"
|
||||
:aria-selected="activeTab === 'expenses'"
|
||||
aria-controls="tabpanel-expenses"
|
||||
id="tab-expenses"
|
||||
:tabindex="activeTab === 'expenses' ? 0 : -1"
|
||||
class="px-4 py-2 text-[0.75rem] font-medium rounded-lg transition-colors"
|
||||
:class="activeTab === 'expenses' ? 'bg-accent text-bg-base' : 'text-text-secondary hover:text-text-primary'"
|
||||
>
|
||||
<span class="flex items-center gap-1.5">
|
||||
<Receipt class="w-3.5 h-3.5" :stroke-width="1.5" aria-hidden="true" />
|
||||
Expenses
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'patterns'; if (!patternsLoaded) computePatterns()"
|
||||
role="tab"
|
||||
:aria-selected="activeTab === 'patterns'"
|
||||
aria-controls="tabpanel-patterns"
|
||||
id="tab-patterns"
|
||||
:tabindex="activeTab === 'patterns' ? 0 : -1"
|
||||
class="px-4 py-2 text-[0.75rem] font-medium rounded-lg transition-colors"
|
||||
:class="activeTab === 'patterns' ? 'bg-accent text-bg-base' : 'text-text-secondary hover:text-text-primary'"
|
||||
>
|
||||
<span class="flex items-center gap-1.5">
|
||||
<Grid3x3 class="w-3.5 h-3.5" :stroke-width="1.5" aria-hidden="true" />
|
||||
Patterns
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Hours Tab -->
|
||||
<template v-if="activeTab === 'hours'">
|
||||
<div id="tabpanel-hours" role="tabpanel" aria-labelledby="tab-hours" tabindex="0">
|
||||
<!-- Summary Stats - pure typography -->
|
||||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||
<dl class="grid grid-cols-3 gap-6 mb-4">
|
||||
<div>
|
||||
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Total Hours</p>
|
||||
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ formatHours(reportData.totalSeconds) }}</p>
|
||||
<dt class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Total Hours</dt>
|
||||
<dd class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ formatHours(filteredTotalSeconds) }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Earnings</p>
|
||||
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ formatCurrency(reportData.totalEarnings || 0) }}</p>
|
||||
<dt class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Earnings</dt>
|
||||
<dd class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ formatCurrency(filteredTotalEarnings) }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Projects</p>
|
||||
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ reportData.byProject?.length || 0 }}</p>
|
||||
<dt class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Projects</dt>
|
||||
<dd class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ filteredByProject.length }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<!-- Billable split -->
|
||||
<div class="flex items-center gap-4 text-[0.75rem] text-text-secondary mb-8">
|
||||
<span>Billable: <span class="font-mono text-accent-text">{{ formatHours(billableSeconds) }}</span></span>
|
||||
<span class="text-border-subtle">|</span>
|
||||
<span>Non-billable: <span class="font-mono text-text-tertiary">{{ formatHours(nonBillableSeconds) }}</span></span>
|
||||
</div>
|
||||
|
||||
<!-- Chart -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Hours by Project</h2>
|
||||
<div class="h-64">
|
||||
<div class="h-64" aria-label="Bar chart showing hours by project">
|
||||
<Bar v-if="chartData" :data="chartData" :options="chartOptions" />
|
||||
<div v-else class="flex flex-col items-center justify-center h-full">
|
||||
<BarChart3 class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
|
||||
<BarChart3 class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" aria-hidden="true" />
|
||||
<p class="text-sm text-text-secondary mt-3">Generate a report to see your data</p>
|
||||
<p class="text-xs text-text-tertiary mt-1">Select a date range and click Generate.</p>
|
||||
<button
|
||||
v-if="onboardingStore.isVisible"
|
||||
@click="tourStore.start(TOURS.reports)"
|
||||
class="mt-2 text-[0.6875rem] text-accent-text hover:underline"
|
||||
>
|
||||
Show me how
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,9 +162,9 @@
|
||||
<div>
|
||||
<h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Breakdown</h2>
|
||||
|
||||
<div v-if="reportData.byProject && reportData.byProject.length > 0">
|
||||
<div v-if="filteredByProject.length > 0">
|
||||
<div
|
||||
v-for="projectData in reportData.byProject"
|
||||
v-for="projectData in filteredByProject"
|
||||
:key="projectData.project_id"
|
||||
class="py-4 border-b border-border-subtle last:border-0"
|
||||
>
|
||||
@@ -101,6 +173,7 @@
|
||||
<div
|
||||
class="w-2 h-2 rounded-full shrink-0"
|
||||
:style="{ backgroundColor: getProjectColor(projectData.project_id) }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="text-[0.8125rem] text-text-primary">{{ getProjectName(projectData.project_id) }}</span>
|
||||
</div>
|
||||
@@ -111,6 +184,11 @@
|
||||
</div>
|
||||
<div class="w-full bg-bg-elevated rounded-full h-[2px]">
|
||||
<div
|
||||
role="progressbar"
|
||||
:aria-valuenow="Math.round(getProjectPercentage(projectData.total_seconds))"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:aria-label="getProjectName(projectData.project_id) + ' progress'"
|
||||
class="h-[2px] rounded-full"
|
||||
:style="{
|
||||
width: `${getProjectPercentage(projectData.total_seconds)}%`,
|
||||
@@ -125,34 +203,37 @@
|
||||
No data for selected date range
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Profitability Tab -->
|
||||
<template v-if="activeTab === 'profitability'">
|
||||
<div id="tabpanel-profitability" role="tabpanel" aria-labelledby="tab-profitability" tabindex="0">
|
||||
<!-- Summary Stats -->
|
||||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||
<dl class="grid grid-cols-3 gap-6 mb-8">
|
||||
<div>
|
||||
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Total Revenue</p>
|
||||
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ formatCurrency(profitTotalRevenue) }}</p>
|
||||
<dt class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Total Revenue</dt>
|
||||
<dd class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ formatCurrency(profitTotalRevenue) }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Total Hours</p>
|
||||
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ profitTotalHours.toFixed(1) }}h</p>
|
||||
<dt class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Total Hours</dt>
|
||||
<dd class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ profitTotalHours.toFixed(1) }}h</dd>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Avg Hourly Rate</p>
|
||||
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ formatCurrency(profitAvgRate) }}</p>
|
||||
<dt class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Avg Hourly Rate</dt>
|
||||
<dd class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ formatCurrency(profitAvgRate) }}</dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<!-- Revenue Chart -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Revenue by Project</h2>
|
||||
<div class="h-64">
|
||||
<div class="h-64" aria-label="Horizontal bar chart showing revenue by project">
|
||||
<Bar v-if="profitChartData" :data="profitChartData" :options="profitChartOptions" />
|
||||
<div v-else class="flex flex-col items-center justify-center h-full">
|
||||
<DollarSign class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
|
||||
<DollarSign class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" aria-hidden="true" />
|
||||
<p class="text-sm text-text-secondary mt-3">Generate a report to see profitability data</p>
|
||||
<p class="text-xs text-text-tertiary mt-1">Select a date range and click Generate.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -196,16 +277,219 @@
|
||||
No data for selected date range
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Patterns Tab -->
|
||||
<template v-if="activeTab === 'patterns'">
|
||||
<div id="tabpanel-patterns" role="tabpanel" aria-labelledby="tab-patterns" tabindex="0" class="space-y-6">
|
||||
<!-- Summary stats -->
|
||||
<div v-if="patternsLoaded && hasPatternData" class="flex items-center gap-6 text-[0.75rem] text-text-secondary">
|
||||
<span v-if="peakDay">Most productive: <strong class="text-text-primary">{{ peakDay }}</strong></span>
|
||||
<span v-if="peakHour">Peak hour: <strong class="text-text-primary">{{ peakHour }}</strong></span>
|
||||
</div>
|
||||
|
||||
<!-- View toggle -->
|
||||
<div v-if="patternsLoaded && hasPatternData" class="flex items-center gap-2">
|
||||
<button
|
||||
@click="heatmapViewMode = 'grid'"
|
||||
:class="heatmapViewMode === 'grid' ? 'bg-accent text-bg-base' : 'text-text-secondary hover:text-text-primary'"
|
||||
class="px-3 py-1 text-[0.6875rem] rounded-lg transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
|
||||
>
|
||||
Grid
|
||||
</button>
|
||||
<button
|
||||
@click="heatmapViewMode = 'table'"
|
||||
:class="heatmapViewMode === 'table' ? 'bg-accent text-bg-base' : 'text-text-secondary hover:text-text-primary'"
|
||||
class="px-3 py-1 text-[0.6875rem] rounded-lg transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
|
||||
>
|
||||
Data Table
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Grid view -->
|
||||
<div v-if="patternsLoaded && hasPatternData && heatmapViewMode === 'grid'" class="overflow-x-auto">
|
||||
<div class="inline-grid gap-0.5" :style="{ gridTemplateColumns: 'auto repeat(24, minmax(2rem, 1fr))' }" role="grid" aria-label="Time-of-day activity heatmap">
|
||||
<!-- Header row -->
|
||||
<div class="p-1" role="columnheader"></div>
|
||||
<div v-for="h in 24" :key="'h-' + h" class="p-1 text-[0.5625rem] text-text-tertiary text-center" role="columnheader">
|
||||
{{ h - 1 }}
|
||||
</div>
|
||||
<!-- Data rows -->
|
||||
<template v-for="(dayData, dayIdx) in heatmapData" :key="'d-' + dayIdx">
|
||||
<div class="p-1 text-[0.625rem] text-text-secondary" role="rowheader">
|
||||
{{ dayNames[dayIdx] }}
|
||||
</div>
|
||||
<div
|
||||
v-for="(value, hourIdx) in dayData"
|
||||
:key="'c-' + dayIdx + '-' + hourIdx"
|
||||
role="gridcell"
|
||||
:aria-label="dayNames[dayIdx] + ' ' + hourIdx + ':00 - ' + (value > 0 ? value.toFixed(1) + ' hours' : 'no activity')"
|
||||
class="p-1 text-center text-[0.5625rem] rounded-sm transition-colors"
|
||||
:style="{ backgroundColor: getHeatColor(value) }"
|
||||
:class="value > 0 ? 'text-text-primary' : 'text-transparent'"
|
||||
>
|
||||
{{ value > 0 ? value.toFixed(1) : '' }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table view -->
|
||||
<div v-if="patternsLoaded && hasPatternData && heatmapViewMode === 'table'" class="overflow-x-auto">
|
||||
<table class="w-full text-[0.6875rem]">
|
||||
<thead>
|
||||
<tr class="border-b border-border-subtle">
|
||||
<th scope="col" class="px-2 py-1 text-left text-text-tertiary">Day</th>
|
||||
<th v-for="h in 24" :key="h" scope="col" class="px-1 py-1 text-center text-text-tertiary">{{ h - 1 }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(dayData, dayIdx) in heatmapData" :key="dayIdx" class="border-b border-border-subtle">
|
||||
<th scope="row" class="px-2 py-1 text-left text-text-secondary">{{ dayNames[dayIdx] }}</th>
|
||||
<td v-for="(value, hourIdx) in dayData" :key="hourIdx" class="px-1 py-1 text-center"
|
||||
:class="value > 0 ? 'text-accent-text' : 'text-text-tertiary'">
|
||||
{{ value > 0 ? value.toFixed(1) : '-' }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-if="patternsLoaded && !hasPatternData" class="py-12 text-center">
|
||||
<Grid3x3 class="w-10 h-10 text-text-tertiary mx-auto mb-3" :stroke-width="1.5" aria-hidden="true" />
|
||||
<p class="text-[0.8125rem] text-text-secondary">No time data for the selected period</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading state before patterns computed -->
|
||||
<div v-if="!patternsLoaded" class="py-12 text-center">
|
||||
<Grid3x3 class="w-10 h-10 text-text-tertiary mx-auto mb-3" :stroke-width="1.5" aria-hidden="true" />
|
||||
<p class="text-[0.8125rem] text-text-secondary">Select a date range and click Generate to see patterns</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Expenses Tab -->
|
||||
<template v-if="activeTab === 'expenses'">
|
||||
<div id="tabpanel-expenses" role="tabpanel" aria-labelledby="tab-expenses" tabindex="0">
|
||||
<!-- Summary Stats -->
|
||||
<dl class="grid grid-cols-3 gap-6 mb-4">
|
||||
<div>
|
||||
<dt class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Total Expenses</dt>
|
||||
<dd class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ formatCurrency(expTotalAmount) }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Number of Expenses</dt>
|
||||
<dd class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ expensesData.length }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Top Category</dt>
|
||||
<dd class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium capitalize">{{ expTopCategory || '-' }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<!-- Invoiced vs un-invoiced split -->
|
||||
<div class="flex items-center gap-4 text-[0.75rem] text-text-secondary mb-8">
|
||||
<span>Invoiced: <span class="font-mono text-accent-text">{{ formatCurrency(expInvoicedAmount) }}</span></span>
|
||||
<span class="text-border-subtle">|</span>
|
||||
<span>Un-invoiced: <span class="font-mono text-text-tertiary">{{ formatCurrency(expUninvoicedAmount) }}</span></span>
|
||||
</div>
|
||||
|
||||
<!-- By Category Breakdown -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Expenses by Category</h2>
|
||||
|
||||
<div v-if="expByCategory.length > 0">
|
||||
<div
|
||||
v-for="cat in expByCategory"
|
||||
:key="cat.category"
|
||||
class="py-4 border-b border-border-subtle last:border-0"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-[0.8125rem] text-text-primary capitalize">{{ cat.category }}</span>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-[0.75rem] font-mono text-accent-text">{{ formatCurrency(cat.amount) }}</span>
|
||||
<span class="text-[0.75rem] font-mono text-text-tertiary w-12 text-right">{{ cat.percentage.toFixed(0) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-bg-elevated rounded-full h-[2px]">
|
||||
<div
|
||||
role="progressbar"
|
||||
:aria-valuenow="Math.round(cat.percentage)"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:aria-label="cat.category + ' expense percentage'"
|
||||
class="h-[2px] rounded-full bg-accent"
|
||||
:style="{ width: `${cat.percentage}%` }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-else class="text-[0.75rem] text-text-tertiary py-8 text-center">
|
||||
No expense data for selected date range
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- By Project Breakdown -->
|
||||
<div>
|
||||
<h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Expenses by Project</h2>
|
||||
|
||||
<div v-if="expByProject.length > 0">
|
||||
<div
|
||||
v-for="proj in expByProject"
|
||||
:key="proj.project_id"
|
||||
class="py-4 border-b border-border-subtle last:border-0"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-2 h-2 rounded-full shrink-0"
|
||||
:style="{ backgroundColor: getProjectColor(proj.project_id) }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="text-[0.8125rem] text-text-primary">{{ getProjectName(proj.project_id) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-[0.75rem] font-mono text-accent-text">{{ formatCurrency(proj.amount) }}</span>
|
||||
<span class="text-[0.75rem] font-mono text-text-tertiary w-12 text-right">{{ proj.percentage.toFixed(0) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-bg-elevated rounded-full h-[2px]">
|
||||
<div
|
||||
role="progressbar"
|
||||
:aria-valuenow="Math.round(proj.percentage)"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:aria-label="getProjectName(proj.project_id) + ' expense percentage'"
|
||||
class="h-[2px] rounded-full"
|
||||
:style="{
|
||||
width: `${proj.percentage}%`,
|
||||
backgroundColor: getProjectColor(proj.project_id)
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-else class="text-[0.75rem] text-text-tertiary py-8 text-center">
|
||||
No expense data for selected date range
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted, watch, nextTick } from 'vue'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import { Bar } from 'vue-chartjs'
|
||||
import { BarChart3, DollarSign } from 'lucide-vue-next'
|
||||
import { BarChart3, DollarSign, Receipt, Grid3x3 } from 'lucide-vue-next'
|
||||
import AppDatePicker from '../components/AppDatePicker.vue'
|
||||
import AppDateRangePresets from '../components/AppDateRangePresets.vue'
|
||||
import AppSelect from '../components/AppSelect.vue'
|
||||
import { useToastStore } from '../stores/toast'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
@@ -217,15 +501,25 @@ import {
|
||||
Legend
|
||||
} from 'chart.js'
|
||||
import { useEntriesStore } from '../stores/entries'
|
||||
import { useExpensesStore, type Expense } from '../stores/expenses'
|
||||
import { useProjectsStore } from '../stores/projects'
|
||||
import { useSettingsStore } from '../stores/settings'
|
||||
import { formatCurrency } from '../utils/locale'
|
||||
import { getChartTheme, buildBarChartOptions } from '../utils/chartTheme'
|
||||
import { useOnboardingStore } from '../stores/onboarding'
|
||||
import { useTourStore } from '../stores/tour'
|
||||
import { TOURS } from '../utils/tours'
|
||||
|
||||
// Register Chart.js components
|
||||
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
|
||||
|
||||
const entriesStore = useEntriesStore()
|
||||
const expensesStore = useExpensesStore()
|
||||
const projectsStore = useProjectsStore()
|
||||
const toastStore = useToastStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const onboardingStore = useOnboardingStore()
|
||||
const tourStore = useTourStore()
|
||||
|
||||
interface ProjectReport {
|
||||
project_id: number
|
||||
@@ -248,8 +542,56 @@ interface ProfitabilityRow {
|
||||
budget_used_pct: number | null
|
||||
}
|
||||
|
||||
const activeTab = ref<'hours' | 'profitability'>('hours')
|
||||
const activeTab = ref<'hours' | 'profitability' | 'expenses' | 'patterns'>('hours')
|
||||
const profitabilityData = ref<ProfitabilityRow[]>([])
|
||||
const expensesData = ref<Expense[]>([])
|
||||
|
||||
function onTabKeydown(e: KeyboardEvent) {
|
||||
const tabs: Array<'hours' | 'profitability' | 'expenses' | 'patterns'> = ['hours', 'profitability', 'expenses', 'patterns']
|
||||
const current = tabs.indexOf(activeTab.value)
|
||||
let next = current
|
||||
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
next = (current + 1) % tabs.length
|
||||
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
next = (current - 1 + tabs.length) % tabs.length
|
||||
} else if (e.key === 'Home') {
|
||||
e.preventDefault()
|
||||
next = 0
|
||||
} else if (e.key === 'End') {
|
||||
e.preventDefault()
|
||||
next = tabs.length - 1
|
||||
} else {
|
||||
return
|
||||
}
|
||||
activeTab.value = tabs[next]
|
||||
if (tabs[next] === 'profitability' && profitabilityData.value.length === 0 && startDate.value && endDate.value) {
|
||||
fetchProfitability()
|
||||
}
|
||||
if (tabs[next] === 'expenses' && expensesData.value.length === 0 && startDate.value && endDate.value) {
|
||||
fetchExpensesReport()
|
||||
}
|
||||
if (tabs[next] === 'patterns' && !patternsLoaded.value) {
|
||||
computePatterns()
|
||||
}
|
||||
const nextTabEl = document.getElementById(`tab-${tabs[next]}`)
|
||||
nextTabEl?.focus()
|
||||
}
|
||||
|
||||
function switchToExpenses() {
|
||||
activeTab.value = 'expenses'
|
||||
if (expensesData.value.length === 0 && startDate.value && endDate.value) {
|
||||
fetchExpensesReport()
|
||||
}
|
||||
}
|
||||
|
||||
const billableFilter = ref<string>('all')
|
||||
const billableFilterOptions = [
|
||||
{ label: 'All entries', value: 'all' },
|
||||
{ label: 'Billable only', value: 'billable' },
|
||||
{ label: 'Non-billable only', value: 'non-billable' },
|
||||
]
|
||||
|
||||
const startDate = ref('')
|
||||
const endDate = ref('')
|
||||
@@ -259,9 +601,54 @@ const reportData = ref<ReportData>({
|
||||
byProject: []
|
||||
})
|
||||
|
||||
// Billable split totals computed from entries
|
||||
const billableSeconds = computed(() => {
|
||||
return entriesStore.entries
|
||||
.filter(e => (e.billable ?? 1) === 1)
|
||||
.reduce((sum, e) => sum + e.duration, 0)
|
||||
})
|
||||
const nonBillableSeconds = computed(() => {
|
||||
return entriesStore.entries
|
||||
.filter(e => e.billable === 0)
|
||||
.reduce((sum, e) => sum + e.duration, 0)
|
||||
})
|
||||
|
||||
// Filtered report data based on billable filter
|
||||
const filteredByProject = computed(() => {
|
||||
if (billableFilter.value === 'all') return reportData.value.byProject || []
|
||||
|
||||
const isBillable = billableFilter.value === 'billable'
|
||||
const filteredEntries = entriesStore.entries.filter(e =>
|
||||
isBillable ? (e.billable ?? 1) === 1 : e.billable === 0
|
||||
)
|
||||
|
||||
const projectMap = new Map<number, number>()
|
||||
for (const e of filteredEntries) {
|
||||
projectMap.set(e.project_id, (projectMap.get(e.project_id) || 0) + e.duration)
|
||||
}
|
||||
|
||||
return Array.from(projectMap.entries()).map(([project_id, total_seconds]) => ({
|
||||
project_id,
|
||||
total_seconds,
|
||||
}))
|
||||
})
|
||||
|
||||
const filteredTotalSeconds = computed(() => {
|
||||
if (billableFilter.value === 'all') return reportData.value.totalSeconds
|
||||
return filteredByProject.value.reduce((sum, p) => sum + p.total_seconds, 0)
|
||||
})
|
||||
|
||||
const filteredTotalEarnings = computed(() => {
|
||||
if (billableFilter.value === 'all') return reportData.value.totalEarnings || 0
|
||||
return filteredByProject.value.reduce((sum, p) => {
|
||||
const rate = getProjectRate(p.project_id)
|
||||
return sum + (p.total_seconds / 3600) * rate
|
||||
}, 0)
|
||||
})
|
||||
|
||||
// Total hours for percentage calculation
|
||||
const totalHours = computed(() => {
|
||||
return reportData.value.totalSeconds / 3600
|
||||
return filteredTotalSeconds.value / 3600
|
||||
})
|
||||
|
||||
// Get project percentage
|
||||
@@ -270,15 +657,22 @@ function getProjectPercentage(projectSeconds: number): number {
|
||||
return (projectSeconds / 3600 / totalHours.value) * 100
|
||||
}
|
||||
|
||||
// Chart theme state
|
||||
const chartTheme = ref(getChartTheme())
|
||||
|
||||
function refreshChartTheme() {
|
||||
chartTheme.value = getChartTheme()
|
||||
}
|
||||
|
||||
// Chart data
|
||||
const chartData = computed(() => {
|
||||
if (!reportData.value.byProject || reportData.value.byProject.length === 0) {
|
||||
if (filteredByProject.value.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const labels = reportData.value.byProject.map(p => getProjectName(p.project_id))
|
||||
const data = reportData.value.byProject.map(p => p.total_seconds / 3600)
|
||||
const colors = reportData.value.byProject.map(p => getProjectColor(p.project_id))
|
||||
const labels = filteredByProject.value.map(p => getProjectName(p.project_id))
|
||||
const data = filteredByProject.value.map(p => p.total_seconds / 3600)
|
||||
const colors = filteredByProject.value.map(p => getProjectColor(p.project_id))
|
||||
|
||||
return {
|
||||
labels,
|
||||
@@ -293,43 +687,33 @@ const chartData = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
// Chart options
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
// Chart options (theme-aware)
|
||||
const chartOptions = computed(() => {
|
||||
const theme = chartTheme.value
|
||||
const base = buildBarChartOptions(theme)
|
||||
return {
|
||||
...base,
|
||||
scales: {
|
||||
...base.scales,
|
||||
y: {
|
||||
...base.scales.y,
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context: { raw: unknown }) => {
|
||||
const hours = context.raw as number
|
||||
return `${hours.toFixed(1)} hours`
|
||||
plugins: {
|
||||
...base.plugins,
|
||||
tooltip: {
|
||||
...base.plugins.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'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Format hours
|
||||
function formatHours(seconds: number): string {
|
||||
@@ -367,6 +751,12 @@ async function fetchReport() {
|
||||
}
|
||||
|
||||
try {
|
||||
// Reset patterns when fetching new report
|
||||
patternsLoaded.value = false
|
||||
|
||||
// Fetch entries for billable split calculations
|
||||
await entriesStore.fetchEntries(startDate.value, endDate.value)
|
||||
|
||||
const data = await invoke<{ totalSeconds: number; byProject: unknown[] }>('get_reports', {
|
||||
startDate: startDate.value,
|
||||
endDate: endDate.value
|
||||
@@ -391,6 +781,16 @@ async function fetchReport() {
|
||||
if (activeTab.value === 'profitability') {
|
||||
await fetchProfitability()
|
||||
}
|
||||
|
||||
// Also fetch expenses if on that tab
|
||||
if (activeTab.value === 'expenses') {
|
||||
await fetchExpensesReport()
|
||||
}
|
||||
|
||||
// Also recompute patterns if on that tab
|
||||
if (activeTab.value === 'patterns') {
|
||||
computePatterns()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch report:', error)
|
||||
toastStore.error('Failed to generate report')
|
||||
@@ -426,44 +826,40 @@ const profitChartData = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
// Profitability chart options
|
||||
const profitChartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
indexAxis: 'y' as const,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
// Profitability chart options (theme-aware)
|
||||
const profitChartOptions = computed(() => {
|
||||
const theme = chartTheme.value
|
||||
const base = buildBarChartOptions(theme)
|
||||
return {
|
||||
...base,
|
||||
indexAxis: 'y' as const,
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true,
|
||||
ticks: { color: theme.textTertiary, font: { size: 11 } },
|
||||
grid: { color: theme.gridColor },
|
||||
border: { display: false },
|
||||
},
|
||||
y: {
|
||||
ticks: { color: theme.textTertiary, font: { size: 11 } },
|
||||
grid: { display: false },
|
||||
border: { display: false },
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context: { raw: unknown }) => {
|
||||
const val = context.raw as number
|
||||
return formatCurrency(val)
|
||||
plugins: {
|
||||
...base.plugins,
|
||||
tooltip: {
|
||||
...base.plugins.tooltip,
|
||||
callbacks: {
|
||||
label: (context: { raw: unknown }) => {
|
||||
const val = context.raw as number
|
||||
return formatCurrency(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: '#2E2E2A'
|
||||
},
|
||||
ticks: {
|
||||
color: '#5A5A54'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
color: '#5A5A54'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Fetch profitability data
|
||||
async function fetchProfitability() {
|
||||
@@ -483,6 +879,150 @@ async function fetchProfitability() {
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================
|
||||
// EXPENSES TAB
|
||||
// =============================================
|
||||
|
||||
// Fetch expenses for report
|
||||
async function fetchExpensesReport() {
|
||||
if (!startDate.value || !endDate.value) return
|
||||
|
||||
try {
|
||||
await expensesStore.fetchExpenses(undefined, startDate.value, endDate.value)
|
||||
expensesData.value = [...expensesStore.expenses]
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch expenses for report:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Expense summary computeds
|
||||
const expTotalAmount = computed(() => {
|
||||
return expensesData.value.reduce((sum, e) => sum + e.amount, 0)
|
||||
})
|
||||
|
||||
const expInvoicedAmount = computed(() => {
|
||||
return expensesData.value.filter(e => e.invoiced).reduce((sum, e) => sum + e.amount, 0)
|
||||
})
|
||||
|
||||
const expUninvoicedAmount = computed(() => {
|
||||
return expensesData.value.filter(e => !e.invoiced).reduce((sum, e) => sum + e.amount, 0)
|
||||
})
|
||||
|
||||
const expTopCategory = computed(() => {
|
||||
if (expensesData.value.length === 0) return ''
|
||||
const catMap = new Map<string, number>()
|
||||
for (const e of expensesData.value) {
|
||||
catMap.set(e.category, (catMap.get(e.category) || 0) + e.amount)
|
||||
}
|
||||
let topCat = ''
|
||||
let topAmount = 0
|
||||
for (const [cat, amount] of catMap) {
|
||||
if (amount > topAmount) {
|
||||
topCat = cat
|
||||
topAmount = amount
|
||||
}
|
||||
}
|
||||
return topCat
|
||||
})
|
||||
|
||||
// By category breakdown
|
||||
const expByCategory = computed(() => {
|
||||
if (expensesData.value.length === 0) return []
|
||||
const total = expTotalAmount.value
|
||||
if (total === 0) return []
|
||||
|
||||
const catMap = new Map<string, number>()
|
||||
for (const e of expensesData.value) {
|
||||
catMap.set(e.category, (catMap.get(e.category) || 0) + e.amount)
|
||||
}
|
||||
|
||||
return Array.from(catMap.entries())
|
||||
.map(([category, amount]) => ({
|
||||
category,
|
||||
amount,
|
||||
percentage: (amount / total) * 100
|
||||
}))
|
||||
.sort((a, b) => b.amount - a.amount)
|
||||
})
|
||||
|
||||
// By project breakdown
|
||||
const expByProject = computed(() => {
|
||||
if (expensesData.value.length === 0) return []
|
||||
const total = expTotalAmount.value
|
||||
if (total === 0) return []
|
||||
|
||||
const projMap = new Map<number, number>()
|
||||
for (const e of expensesData.value) {
|
||||
projMap.set(e.project_id, (projMap.get(e.project_id) || 0) + e.amount)
|
||||
}
|
||||
|
||||
return Array.from(projMap.entries())
|
||||
.map(([project_id, amount]) => ({
|
||||
project_id,
|
||||
amount,
|
||||
percentage: (amount / total) * 100
|
||||
}))
|
||||
.sort((a, b) => b.amount - a.amount)
|
||||
})
|
||||
|
||||
// =============================================
|
||||
// PATTERNS TAB
|
||||
// =============================================
|
||||
|
||||
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
const heatmapData = ref<number[][]>([])
|
||||
const patternsLoaded = ref(false)
|
||||
const heatmapViewMode = ref<'grid' | 'table'>('grid')
|
||||
|
||||
const hasPatternData = computed(() => heatmapData.value.some(row => row.some(v => v > 0)))
|
||||
|
||||
const peakDay = computed(() => {
|
||||
if (!heatmapData.value.length) return null
|
||||
const totals = heatmapData.value.map(row => row.reduce((a, b) => a + b, 0))
|
||||
const maxVal = Math.max(...totals)
|
||||
const maxIdx = totals.indexOf(maxVal)
|
||||
return maxVal > 0 ? dayNames[maxIdx] : null
|
||||
})
|
||||
|
||||
const peakHour = computed(() => {
|
||||
if (!heatmapData.value.length) return null
|
||||
let maxVal = 0
|
||||
let maxHour = 0
|
||||
for (const row of heatmapData.value) {
|
||||
for (let h = 0; h < 24; h++) {
|
||||
if (row[h] > maxVal) {
|
||||
maxVal = row[h]
|
||||
maxHour = h
|
||||
}
|
||||
}
|
||||
}
|
||||
return maxVal > 0 ? `${maxHour}:00` : null
|
||||
})
|
||||
|
||||
function computePatterns() {
|
||||
const grid: number[][] = Array.from({ length: 7 }, () => Array(24).fill(0))
|
||||
|
||||
for (const entry of entriesStore.entries) {
|
||||
if (!entry.start_time) continue
|
||||
const d = new Date(entry.start_time)
|
||||
const jsDay = d.getDay()
|
||||
const day = jsDay === 0 ? 6 : jsDay - 1 // Mon=0, Sun=6
|
||||
const hour = d.getHours()
|
||||
grid[day][hour] += entry.duration / 3600
|
||||
}
|
||||
|
||||
heatmapData.value = grid
|
||||
patternsLoaded.value = true
|
||||
}
|
||||
|
||||
function getHeatColor(value: number): string {
|
||||
if (value === 0) return 'transparent'
|
||||
const maxVal = Math.max(...heatmapData.value.flat(), 1)
|
||||
const intensity = Math.min(value / maxVal, 1)
|
||||
const alpha = 0.1 + intensity * 0.6
|
||||
return `rgba(245, 158, 11, ${alpha})`
|
||||
}
|
||||
|
||||
// Export to CSV
|
||||
function exportCSV() {
|
||||
if (!reportData.value.byProject || reportData.value.byProject.length === 0) {
|
||||
@@ -516,10 +1056,23 @@ function exportCSV() {
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
// Recreate charts on theme or accent change
|
||||
watch(() => settingsStore.settings.theme_mode, () => {
|
||||
nextTick(() => { refreshChartTheme() })
|
||||
})
|
||||
watch(() => settingsStore.settings.accent_color, () => {
|
||||
nextTick(() => { refreshChartTheme() })
|
||||
})
|
||||
|
||||
// Set default dates on mount
|
||||
onMounted(async () => {
|
||||
await projectsStore.fetchProjects()
|
||||
await entriesStore.fetchEntries()
|
||||
await Promise.all([
|
||||
projectsStore.fetchProjects(),
|
||||
entriesStore.fetchEntries(),
|
||||
settingsStore.fetchSettings(),
|
||||
])
|
||||
|
||||
refreshChartTheme()
|
||||
|
||||
// Set default to this month
|
||||
const now = new Date()
|
||||
|
||||
Reference in New Issue
Block a user