feat(dashboard): add price history, caching, and i18n

resources/js/app.ts

@@ -1,5 +1,7 @@
 import { createInertiaApp } from '@inertiajs/vue3';
 import { DefineComponent } from 'vue';
+import Layout from './layouts/Layout.vue';
+import { init } from './lang/init.js';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -8,6 +10,9 @@ createInertiaApp({
     progress: {
         color: '#4B5563',
     },
+    layout(name, page) {
+        return Layout;
+    },
     resolve(name) {
         const pages = import.meta.glob<DefineComponent>(
             ['./features/*/pages/*.vue', './pages/*.vue'],
@@ -26,4 +31,7 @@ createInertiaApp({
 
         return pages[`./pages/${name}.vue`];
     },
+    async withApp(app, options) {
+        await init;
+    },
 });

resources/js/features/dashboard/pages/Index.vue

@@ -1,3 +1,15 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import useDashboardViewModel from '../viewmodels/DashboardViewModel';
 
-<template></template>
+const model = useDashboardViewModel();
+
+onMounted(() => {
+    model.getDashboardData();
+});
+</script>
+
+<template>
+    <div>{{ model.isLoading }}</div>
+    <div>{{ model.dashboardData }}</div>
+</template>

resources/js/features/dashboard/viewmodels/DashboardViewModel.ts

@@ -1,3 +1,22 @@
-export default function DashboardViewModel() {
-    return {};
+import { create } from 'axios';
+import { ref } from 'vue';
+import DashboardData = App.Features.Dashboard.Data.DashboardData;
+
+export default function useDashboardViewModel() {
+    const isLoading = ref<boolean>(false);
+    const dashboardData = ref<DashboardData>();
+
+    function getDashboardData() {
+        isLoading.value = true;
+
+        const client = create();
+        client
+            .get<DashboardData>('/api/energy-prices')
+            .then((res) => {
+                dashboardData.value = res.data;
+            })
+            .finally(() => (isLoading.value = false));
+    }
+
+    return { isLoading, dashboardData, getDashboardData };
 }

resources/js/features/history/pages/Index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div></div>
+</template>

resources/js/generated/generated.d.ts

@@ -1,10 +1,15 @@
 declare namespace App {
     namespace Features {
         namespace Dashboard {
-            namespace DTO {
+            namespace Data {
                 export type DashboardData = {
-                    electricity: App.Features.Dashboard.DTO.ElectricityData;
-                    gas: App.Features.Dashboard.DTO.GasData;
+                    electricityHistory: 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[];
+                    gasCheapest: App.Features.Dashboard.Data.GasData | null;
+                    gasPriciest: App.Features.Dashboard.Data.GasData | null;
                 };
                 export type ElectricityData = {
                     startDate: string;

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

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

resources/js/lang/init.ts

@@ -0,0 +1,7 @@
+import i18next from 'i18next';
+import translations from './translations';
+
+export const init = i18next.init({
+    lng: 'nl',
+    resources: translations,
+});

resources/js/lang/translations/index.ts

@@ -0,0 +1,5 @@
+import nl from "./nl";
+
+export default {
+    nl
+}

resources/js/lang/translations/nl/dashboard.json

@@ -0,0 +1,3 @@
+{
+    "title": "Overzicht"
+}

resources/js/lang/translations/nl/index.ts

@@ -0,0 +1,5 @@
+import dashboard from './dashboard.json';
+
+export default {
+    dashboard,
+};

resources/js/layouts/Layout.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { t } from 'i18next';
+import dashboard from '@/routes/dashboard';
+import history from '@/routes/history';
+</script>
+
+<template>
+    <nav class="fixed top-0 left-0 w-40">
+        <ul>
+            <li>
+                <a :href="dashboard.index().url">{{ t('dashboard.title') }}</a>
+            </li>
+            <li>
+                <a :href="history.index().url">{{ t('history.title') }}</a>
+            </li>
+        </ul>
+    </nav>
+    <div class="absolute top-0 left-40"><slot /></div>
+</template>