feat: new dashboard implementation (#168)

* wip: charts.js experimental work

* update lock file

* wip: frontend redesign

* wip: more UI fixes for consistency across themes

* cleanup

* improve UI log

* style updates

* fix lint errors

frontend/components/global/Currency.vue

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

frontend/components/global/DetailsSection/index.ts

@@ -1,2 +0,0 @@
-import DetailsSection from "./DetailsSection.vue";
-export default DetailsSection;

frontend/components/global/StatCard/StatCard.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="stats bg-neutral shadow rounded-md">
+    <div class="stat text-neutral-content text-center space-y-1 p-3">
+      <div class="stat-title">{{ title }}</div>
+      <div class="stat-value text-2xl">
+        <Currency v-if="type === 'currency'" :amount="value" />
+        <template v-if="type === 'number'">{{ value }}</template>
+      </div>
+      <div v-if="subtitle" class="stat-desc">{{ subtitle }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { StatsFormat } from "./types";
+
+  type Props = {
+    title: string;
+    value: number;
+    subtitle?: string;
+    type?: StatsFormat;
+  };
+
+  withDefaults(defineProps<Props>(), {
+    type: "number",
+    subtitle: undefined,
+  });
+</script>

frontend/components/global/StatCard/types.ts

@@ -0,0 +1 @@
+export type StatsFormat = "currency" | "number" | "percent";

frontend/components/global/Subtitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <h3 class="flex gap-2 items-center mb-3 pl-1 text-lg">
+    <slot />
+  </h3>
+</template>

frontend/components/global/Table.types.ts

@@ -0,0 +1,8 @@
+export type TableHeader = {
+  text: string;
+  value: string;
+  sortable?: boolean;
+  align?: "left" | "center" | "right";
+};
+
+export type TableData = Record<string, any>;

frontend/components/global/Table.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="overflow-x-auto">
+    <table class="table w-full">
+      <thead>
+        <tr class="bg-primary">
+          <th
+            v-for="h in headers"
+            :key="h.value"
+            class="text-no-transform text-sm bg-neutral text-neutral-content"
+            :class="{
+              'text-center': h.align === 'center',
+              'text-right': h.align === 'right',
+              'text-left': h.align === 'left',
+            }"
+          >
+            <template v-if="typeof h === 'string'">{{ h }}</template>
+            <template v-else>{{ h.text }}</template>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- row 1 -->
+        <tr v-for="(d, i) in data" :key="i">
+          <td
+            v-for="h in headers"
+            :key="`${h.value}-${i}`"
+            class="bg-base-100"
+            :class="{
+              'text-center': h.align === 'center',
+              'text-right': h.align === 'right',
+              'text-left': h.align === 'left',
+            }"
+          >
+            <slot :name="cell(h)" v-bind="{ item: d }">
+              {{ extractValue(d, h.value) }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { TableData, TableHeader } from "./Table.types";
+
+  type Props = {
+    headers: TableHeader[];
+    data: TableData[];
+  };
+
+  function extractValue(data: TableData, value: string) {
+    const parts = value.split(".");
+    let current = data;
+    for (const part of parts) {
+      current = current[part];
+    }
+    return current;
+  }
+
+  function cell(h: TableHeader) {
+    return `cell-${h.value.replace(".", "_")}`;
+  }
+
+  defineProps<Props>();
+</script>
+
+<style scoped></style>