JustZoe101/Zonneplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): add price overview UI

Browse Source
This commit is contained in:
JustZoe101
2026-08-01 22:29:45 +02:00
parent 0fa648f833
commit 8a0a94f26e
9 changed files with 143 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/features/dashboard/components/Price.vue
+23
View File
@@ -0,0 +1,23 @@
<script setup lang="ts">
import moment from 'moment';
defineProps<{
label: string;
price: number | null | undefined;
time: moment.Moment | string;
}>();
</script>
<template>
<div class="flex flex-col gap-4 rounded-xl bg-primary/10 p-4 shadow-md">
<div class="font-bold text-primary uppercase">{{ label }}</div>
<div class="flex flex-col gap-2">
<div class="text-4xl font-black">
&euro;{{ price?.toPrecision(2).toString().replace('.', ',') }}
</div>
<div class="text-sm text-black/50">
{{ moment.isMoment(time) ? time.format('DD-MM-YYYY HH:mm') : time }}
</div>
</div>
</div>
</template>
resources/js/features/dashboard/pages/Index.vue
+99 -2
View File
@@ -1,5 +1,8 @@
<script setup lang="ts">
import { t } from 'i18next';
import moment from 'moment';
import { onMounted } from 'vue';
import Price from '../components/Price.vue';
import useDashboardViewModel from '../viewmodels/DashboardViewModel';
const model = useDashboardViewModel();
@@ -10,6 +13,100 @@ onMounted(() => {
</script>
<template>
<div>{{ model.isLoading }}</div>
<div>{{ model.dashboardData }}</div>
<h1 class="mb-4 text-3xl font-black text-primary">
{{ t('dashboard.title') }}
</h1>
<div class="mb-4 flex flex-col gap-2">
<h2 class="text-2xl font-black text-primary">
{{ t('dashboard.electricity') }}
</h2>
<div class="flex flex-wrap gap-4">
<Price
:label="t('dashboard.current_electricity_price')"
:price="
model.dashboardData.value?.electricity.totalPriceTaxIncluded
"
:time="moment(model.dashboardData.value?.electricity.startDate)"
/>
<Price
:label="t('dashboard.cheapest_electricity_price')"
:price="
model.dashboardData.value?.electricityCheapest
?.totalPriceTaxIncluded
"
:time="
moment(
model.dashboardData.value?.electricityCheapest
?.startDate,
)
"
/>
<Price
:label="t('dashboard.durable_electricity_price')"
:price="
model.dashboardData.value?.electricityDurable
?.totalPriceTaxIncluded
"
:time="
moment(
model.dashboardData.value?.electricityDurable
?.startDate,
)
"
/>
<Price
:label="t('dashboard.priciest_electricity_price')"
:price="
model.dashboardData.value?.electricityPriciest
?.totalPriceTaxIncluded
"
:time="
moment(
model.dashboardData.value?.electricityPriciest
?.startDate,
)
"
/>
</div>
</div>
<div class="mb-4 flex flex-col gap-2">
<h2 class="text-2xl font-black text-primary">
{{ t('dashboard.gas') }}
</h2>
<div class="flex flex-wrap gap-4">
<Price
:label="t('dashboard.current_gas_price')"
:price="model.dashboardData.value?.gas.totalPriceTaxIncluded"
:time="
moment(model.dashboardData.value?.gas.startDate).format(
'DD-MM-YYYY',
)
"
/>
<Price
:label="t('dashboard.cheapest_gas_price')"
:price="
model.dashboardData.value?.gasCheapest
?.totalPriceTaxIncluded
"
:time="
moment(
model.dashboardData.value?.gasCheapest?.startDate,
).format('DD-MM-YYYY')
"
/>
<Price
:label="t('dashboard.priciest_gas_price')"
:price="
model.dashboardData.value?.gasPriciest
?.totalPriceTaxIncluded
"
:time="
moment(
model.dashboardData.value?.gasPriciest?.startDate,
).format('DD-MM-YYYY')
"
/>
</div>
</div>
</template>