feat: Wrapped (#470)

* feat: SudoSOS wrapped

* chore: i18n

apps/dashboard/src/locales/en/common/common.json

@@ -169,7 +169,18 @@
         "apiError": "Error",
         "errorMessage": "Something is going wrong, please open an issue on {link} describing the issue.",
         "permissionMessages": {
-            "transactions": "You are not allowed to view these transactions."
+          "transactions": "You are not allowed to view these transactions."
+        },
+        "wrapped": {
+            "lastYear": "In the last year:",
+            "total": "You spent in total:",
+            "totalBorrel": "You spent in total at borrels:",
+            "depth": "But more in depth",
+            "totalAlc": "On alcohol (incl. 0.0) you spent:",
+            "totalSoda": "On soda you spent:",
+            "totalSnacks": "On snacks you spent:",
+            "fav": "Lastly your favourites were:",
+            "christmas": "Merry christmas and a happy new year from the ABC!"
         }
     }
 }

apps/dashboard/src/locales/nl/common/common.json

@@ -169,7 +169,19 @@
         "apiError": "Fout",
         "errorMessage": "Er is iets misgegaan, open een issue op {link} en beschrijf het probleem.",
         "permissionMessages": {
-            "transactions": "Je mag deze transacties niet bekijken."
+          "transactions": "Je mag deze transacties niet bekijken."
+        },
+        "wrapped": {
+            "lastYear": "In het afgelopen jaar:",
+            "total": "Heb je in total uitgegeven:",
+            "totalBorrel": "In totaal bij borrel heb je uitgegeven:",
+            "depth": "Verder uitgesplitst",
+            "totalAlc": "Aan alcohol (incl. 0.0) heb je uitgegeven:",
+            "totalSoda": "Aan fris heb je uitgegeven:",
+            "totalSnacks": "Aan snacks heb je uitgegeven:",
+            "fav": "Je absolute favorieten waren:",
+            "christmas": "Fijne kerst en een gelukkig nieuw jaar van de ABC!"
         }
+
     }
 }

apps/dashboard/src/router/index.ts

@@ -11,6 +11,7 @@ import { sellerRoutes } from "@/modules/seller/routes";
 import { userRoutes } from "@/modules/user/routes";
 import MaintenanceView from '@/views/MaintenanceView.vue';
 import { useSettingsStore } from '@/stores/settings.store';
+import WrappedView from "@/views/WrappedView.vue";
 
 declare module 'vue-router' {
   interface RouteMeta {
@@ -49,6 +50,11 @@ const router = createRouter({
           component: ErrorView,
           name: 'error',
         },
+        {
+          path: 'wrapped',
+          component: WrappedView,
+          name: 'wrapped',
+        },
       ]
     },
     {

apps/dashboard/src/views/WrappedView.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="flex align-content-center flex-column">
+    <div class="py-4 text-center font-bold text-xl">
+      {{ t("common.wrapped.lastYear") }}</div>
+    <div class="text-center">{{ t("common.wrapped.total") }}</div>
+    <div class="text-center text-3xl">
+      <div>{{ formatPrice(total!) }}</div>
+    </div>
+
+    <div class="text-center">{{ t("common.wrapped.totalBorrel") }}</div>
+    <div class="text-center text-3xl">
+      <div>{{ formatPrice(totalBorrels!) }}</div>
+    </div>
+    <div class="py-4 text-center font-bold text-xl">
+      {{ t("common.wrapped.depth") }}
+    </div>
+    <div class="text-center">{{ t("common.wrapped.totalAlc") }}</div>
+    <div class="text-center text-3xl">
+      <div>{{ formatPrice(totalAlc!) }}</div>
+    </div>
+
+    <div class="text-center">{{ t("common.wrapped.totalSoda") }}</div>
+    <div class="text-center text-3xl">
+      <div>{{ formatPrice(totalSoda!) }}</div>
+    </div>
+
+    <div class="text-center">{{ t("common.wrapped.totalSnacks") }}</div>
+    <div class="text-center text-3xl">
+      <div>{{ formatPrice(totalSnacks!) }}</div>
+    </div>
+
+    <div class="py-4 text-center font-bold text-xl">
+      {{ t("common.wrapped.fav") }}
+    </div>
+
+    <div class="align-items-center flex-column flex">
+      <div v-for="p in topProducts" :key="p.product.id" class="w-7">
+          {{ p.count + "x" }} {{ p.product.name + " - " }} {{ formatPrice(p.totalInclVat) }}
+      </div>
+    </div>
+
+    <div class="py-4 text-center font-bold text-xl">
+      {{ t("common.wrapped.christmas") }}
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { computed, onBeforeMount, ref } from "vue";
+import apiService from "@/services/ApiService";
+import { useAuthStore } from "@sudosos/sudosos-frontend-common";
+import type { ReportResponse } from "@sudosos/sudosos-client";
+import { formatPrice } from "@/utils/formatterUtils";
+import Dinero from "dinero.js";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const report = ref<ReportResponse>();
+
+const total = computed(() => {
+  return report.value?.totalInclVat || { amount: 0, currency: 'EUR', precision: 2 };
+});
+
+const totalBorrels = computed(() => {
+  if (report.value == undefined) {
+    return { amount: 0, currency: 'EUR', precision: 2 };
+  }
+
+  // Remove bac verkoop
+  return Dinero(report.value.totalInclVat as Dinero.Options)
+      .subtract(Dinero(report.value.data.pos!.find(p => p.pos.id == 1)!.totalInclVat as Dinero.Options)).toObject();
+});
+
+
+const totalAlc = computed(() => {
+  if (report.value == undefined) {
+    return { amount: 0, currency: 'EUR', precision: 2 };
+  }
+
+  return report.value.data.categories!.find(p => p.category.id == 1)!.totalInclVat;
+});
+
+const totalSoda = computed(() => {
+  if (report.value == undefined) {
+    return { amount: 0, currency: 'EUR', precision: 2 };
+  }
+
+  return report.value.data.categories!.find(p => p.category.id == 2)!.totalInclVat;
+});
+
+const totalSnacks = computed(() => {
+  if (report.value == undefined) {
+    return { amount: 0, currency: 'EUR', precision: 2 };
+  }
+
+  return report.value.data.categories!.find(p => p.category.id == 3)!.totalInclVat;
+});
+
+const topProducts = computed(() => {
+  if (report.value == undefined) {
+    return [];
+  }
+
+  return report.value.data.products!.sort((a, b) => b.count - a.count).slice(0, 10);
+});
+
+onBeforeMount(async () => {
+  let authStore = useAuthStore();
+
+  report.value = (await apiService.user
+      .getUsersPurchasesReport(authStore.getUser!.id, "2024-01-01", "2024-12-31")).data;
+
+});
+
+</script>
+
+<style>
+
+</style>