feat(dashboard): add price overview UI

resources/css/app.css

@@ -8,4 +8,6 @@
         Instrument Sans, ui-sans-serif, system-ui, sans-serif,
         'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
         'Noto Color Emoji';
+
+    --color-primary: #4ba66a;
 }

resources/js/features/dashboard/components/Price.vue

@@ -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

@@ -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>

resources/js/generated/generated.d.ts

@@ -3,11 +3,11 @@ declare namespace App {
         namespace Dashboard {
             namespace Data {
                 export type DashboardData = {
-                    electricityHistory: App.Features.Dashboard.Data.ElectricityData[];
+                    electricity: App.Features.Dashboard.Data.ElectricityData;
                     electricityCheapest: App.Features.Dashboard.Data.ElectricityData | null;
                     electricityDurable: App.Features.Dashboard.Data.ElectricityData | null;
                     electricityPriciest: App.Features.Dashboard.Data.ElectricityData | null;
-                    gasHistory: App.Features.Dashboard.Data.ElectricityData[];
+                    gas: App.Features.Dashboard.Data.GasData;
                     gasCheapest: App.Features.Dashboard.Data.GasData | null;
                     gasPriciest: App.Features.Dashboard.Data.GasData | null;
                 };

resources/js/generated/typescript-transformer-manifest.json

@@ -1,3 +1,3 @@
 {
-    "generated.d.ts": "63b1a5a3410956e9dfd29ea3c90abc71"
+    "generated.d.ts": "f593095f6f419a96a4c39c2b93719f9a"
 }

resources/js/layouts/Layout.vue

@@ -5,8 +5,9 @@ import history from '@/routes/history';
 </script>
 
 <template>
-    <nav class="fixed top-0 left-0 w-40">
-        <ul>
+    <nav class="fixed top-0 bottom-0 left-0 w-64 bg-primary p-4">
+        <img src="/storage/logo.svg" class="mb-4 mix-blend-plus-lighter" />
+        <ul class="flex-1 gap-4">
             <li>
                 <a :href="dashboard.index().url">{{ t('dashboard.title') }}</a>
             </li>
@@ -15,5 +16,5 @@ import history from '@/routes/history';
             </li>
         </ul>
     </nav>
-    <div class="absolute top-0 left-40"><slot /></div>
+    <div class="absolute top-0 left-64 p-4"><slot /></div>
 </template>