feat: currency selection support (#72)

* initial UI for currency selection

* add task to purge invitation tokens

* group API contracts

* fix type import

* use auth middleware

* add currency setting support (UI)

* use group settings for format currency

* fix casing

frontend/components/global/Currency.vue

@@ -0,0 +1,22 @@
+<template>
+  {{ value }}
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    amount: {
+      type: String,
+      required: true,
+    },
+  });
+
+  const fmt = await useFormatCurrency();
+
+  const value = computed(() => {
+    if (!props.amount || props.amount === "0") {
+      return "";
+    }
+
+    return fmt(props.amount);
+  });
+</script>

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -7,9 +7,8 @@
         </dt>
         <dd class="mt-1 text-sm text-base-content sm:col-span-2 sm:mt-0">
           <slot :name="detail.slot || detail.name" v-bind="{ detail }">
-            <template v-if="detail.type == 'date'">
-              <DateTime :date="detail.text" />
-            </template>
+            <DateTime v-if="detail.type == 'date'" :date="detail.text" />
+            <Currency v-else-if="detail.type == 'currency'" :amount="detail.text" />
             <template v-else>
               {{ detail.text }}
             </template>
@@ -21,11 +20,11 @@
 </template>
 
 <script setup lang="ts">
-  import type { DateDetail, Detail } from "./types";
+  import type { CustomDetail, Detail } from "./types";
 
   defineProps({
     details: {
-      type: Object as () => (Detail | DateDetail)[],
+      type: Object as () => (Detail | CustomDetail)[],
       required: true,
     },
   });

frontend/components/global/DetailsSection/types.ts

@@ -1,15 +1,25 @@
 export type StringLike = string | number | boolean;
 
-export type DateDetail = {
+type BaseDetail = {
   name: string;
-  text: string | Date;
   slot?: string;
-  type: "date";
 };
 
-export type Detail = {
-  name: string;
+type DateDetail = BaseDetail & {
+  type: "date";
+  text: Date | string;
+};
+
+type CurrencyDetail = BaseDetail & {
+  type: "currency";
+  text: string;
+};
+
+export type CustomDetail = DateDetail | CurrencyDetail;
+
+export type Detail = BaseDetail & {
   text: StringLike;
-  slot?: string;
   type?: "text";
 };
+
+export type Details = Array<Detail | CustomDetail>;