Add 7-day sync overlap buffer and improve empty investments state
SimpleFIN sync now looks back 7 days from last sync to catch retroactively posted transactions. Investments page shows account balance instead of $0 summary cards when no holdings exist. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Catherine Renelle
@@ -29,90 +29,103 @@
|
||||
<v-progress-linear v-if="loading" indeterminate color="primary" class="mb-4" />
|
||||
|
||||
<template v-if="performance && !loading">
|
||||
<!-- Portfolio Summary -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card variant="tonal">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-caption">Market Value</div>
|
||||
<div class="text-h6">{{ formatCurrency(performance.totalMarketValue) }}</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card variant="tonal">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-caption">Cost Basis</div>
|
||||
<div class="text-h6">{{ formatCurrency(performance.totalCostBasis) }}</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card variant="tonal" :color="performance.totalGainLoss >= 0 ? 'success' : 'error'">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-caption">Total Gain/Loss</div>
|
||||
<div class="text-h6">{{ formatCurrency(performance.totalGainLoss) }}</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card variant="tonal" :color="performance.totalGainLossPercent >= 0 ? 'success' : 'error'">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-caption">Return</div>
|
||||
<div class="text-h6">{{ formatPercent(performance.totalGainLossPercent) }}</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- No holdings: show account balance + prompt -->
|
||||
<template v-if="performance.holdings.length === 0">
|
||||
<v-card class="text-center pa-8">
|
||||
<div class="text-h4 mb-2" :class="selectedAccountBalance >= 0 ? 'text-success' : 'text-error'">
|
||||
{{ formatCurrency(selectedAccountBalance) }}
|
||||
</div>
|
||||
<div class="text-caption text-medium-emphasis mb-6">Account Balance</div>
|
||||
<v-icon size="48" color="grey-lighten-1" class="mb-4">mdi-chart-pie</v-icon>
|
||||
<p class="text-medium-emphasis">No individual holdings tracked for this account.</p>
|
||||
<p class="text-medium-emphasis text-caption">Add holdings to see allocation, cost basis, and performance.</p>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<!-- Allocation Chart + Holdings Table -->
|
||||
<v-row>
|
||||
<v-col v-if="performance.holdings.length > 0" cols="12" md="4">
|
||||
<v-card>
|
||||
<v-card-title>Allocation</v-card-title>
|
||||
<v-card-text>
|
||||
<apexchart
|
||||
type="donut"
|
||||
height="300"
|
||||
:options="allocationChartOptions"
|
||||
:series="allocationChartSeries"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" :md="performance.holdings.length > 0 ? 8 : 12">
|
||||
<v-card>
|
||||
<v-card-title>Holdings</v-card-title>
|
||||
<v-card-text v-if="performance.holdings.length > 0">
|
||||
<v-data-table
|
||||
:headers="holdingsHeaders"
|
||||
:items="performance.holdings"
|
||||
density="compact"
|
||||
:items-per-page="-1"
|
||||
hide-default-footer
|
||||
>
|
||||
<template #item.shares="{ item }">{{ item.shares.toFixed(4) }}</template>
|
||||
<template #item.costBasis="{ item }">{{ formatCurrency(item.costBasis) }}</template>
|
||||
<template #item.currentPrice="{ item }">{{ formatCurrency(item.currentPrice) }}</template>
|
||||
<template #item.marketValue="{ item }">{{ formatCurrency(item.marketValue) }}</template>
|
||||
<template #item.gainLoss="{ item }">
|
||||
<span :class="item.gainLoss >= 0 ? 'text-success' : 'text-error'">
|
||||
{{ formatCurrency(item.gainLoss) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #item.gainLossPercent="{ item }">
|
||||
<span :class="item.gainLossPercent >= 0 ? 'text-success' : 'text-error'">
|
||||
{{ formatPercent(item.gainLossPercent) }}
|
||||
</span>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card-text>
|
||||
<v-card-text v-else class="text-center pa-8 text-medium-emphasis">
|
||||
No holdings found for this account. Add investment holdings to track your portfolio.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Has holdings: show full portfolio view -->
|
||||
<template v-else>
|
||||
<!-- Portfolio Summary -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card variant="tonal">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-caption">Market Value</div>
|
||||
<div class="text-h6">{{ formatCurrency(performance.totalMarketValue) }}</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card variant="tonal">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-caption">Cost Basis</div>
|
||||
<div class="text-h6">{{ formatCurrency(performance.totalCostBasis) }}</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card variant="tonal" :color="performance.totalGainLoss >= 0 ? 'success' : 'error'">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-caption">Total Gain/Loss</div>
|
||||
<div class="text-h6">{{ formatCurrency(performance.totalGainLoss) }}</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card variant="tonal" :color="performance.totalGainLossPercent >= 0 ? 'success' : 'error'">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-caption">Return</div>
|
||||
<div class="text-h6">{{ formatPercent(performance.totalGainLossPercent) }}</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Allocation Chart + Holdings Table -->
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-card>
|
||||
<v-card-title>Allocation</v-card-title>
|
||||
<v-card-text>
|
||||
<apexchart
|
||||
type="donut"
|
||||
height="300"
|
||||
:options="allocationChartOptions"
|
||||
:series="allocationChartSeries"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8">
|
||||
<v-card>
|
||||
<v-card-title>Holdings</v-card-title>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="holdingsHeaders"
|
||||
:items="performance.holdings"
|
||||
density="compact"
|
||||
:items-per-page="-1"
|
||||
hide-default-footer
|
||||
>
|
||||
<template #item.shares="{ item }">{{ item.shares.toFixed(4) }}</template>
|
||||
<template #item.costBasis="{ item }">{{ formatCurrency(item.costBasis) }}</template>
|
||||
<template #item.currentPrice="{ item }">{{ formatCurrency(item.currentPrice) }}</template>
|
||||
<template #item.marketValue="{ item }">{{ formatCurrency(item.marketValue) }}</template>
|
||||
<template #item.gainLoss="{ item }">
|
||||
<span :class="item.gainLoss >= 0 ? 'text-success' : 'text-error'">
|
||||
{{ formatCurrency(item.gainLoss) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #item.gainLossPercent="{ item }">
|
||||
<span :class="item.gainLossPercent >= 0 ? 'text-success' : 'text-error'">
|
||||
{{ formatPercent(item.gainLossPercent) }}
|
||||
</span>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<v-card v-if="!loading && !performance && selectedAccountId" class="text-center pa-8">
|
||||
@@ -158,6 +171,11 @@ const investmentAccounts = computed(() =>
|
||||
}))
|
||||
)
|
||||
|
||||
const selectedAccountBalance = computed(() => {
|
||||
const acct = investmentAccounts.value.find(a => a.id === selectedAccountId.value)
|
||||
return acct?.balance ?? 0
|
||||
})
|
||||
|
||||
// --- Allocation Chart ---
|
||||
const allocationChartSeries = computed(() =>
|
||||
performance.value?.holdings.map(h => h.marketValue) ?? []
|
||||
|
||||
Reference in New Issue
Block a user