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/pages/home.vue

@@ -1,166 +0,0 @@
-<script setup lang="ts">
-  import { useAuthStore } from "~~/stores/auth";
-  import { useLabelStore } from "~~/stores/labels";
-  import { useLocationStore } from "~~/stores/locations";
-
-  definePageMeta({
-    middleware: ["auth"],
-  });
-
-  useHead({
-    title: "Homebox | Home",
-  });
-
-  const api = useUserApi();
-
-  const auth = useAuthStore();
-
-  const locationStore = useLocationStore();
-  const locations = computed(() => locationStore.parentLocations);
-
-  const labelsStore = useLabelStore();
-  const labels = computed(() => labelsStore.labels);
-
-  const { data: statistics } = useAsyncData(async () => {
-    const { data } = await api.stats.group();
-    return data;
-  });
-
-  const stats = computed(() => {
-    return [
-      {
-        label: "Locations",
-        value: statistics.value?.totalLocations || 0,
-      },
-      {
-        label: "Items",
-        value: statistics.value?.totalItems || 0,
-      },
-      {
-        label: "Labels",
-        value: statistics.value?.totalLabels || 0,
-      },
-    ];
-  });
-
-  const importDialog = ref(false);
-  const importCsv = ref(null);
-  const importLoading = ref(false);
-  const importRef = ref<HTMLInputElement>();
-  whenever(
-    () => !importDialog.value,
-    () => {
-      importCsv.value = null;
-    }
-  );
-
-  function setFile(e: Event & { target: HTMLInputElement }) {
-    importCsv.value = e.target.files[0];
-  }
-
-  const toast = useNotifier();
-
-  function openDialog() {
-    importDialog.value = true;
-  }
-
-  function uploadCsv() {
-    importRef.value.click();
-  }
-
-  const eventBus = useEventBus();
-
-  async function submitCsvFile() {
-    importLoading.value = true;
-
-    const { error } = await api.items.import(importCsv.value);
-
-    if (error) {
-      toast.error("Import failed. Please try again later.");
-    }
-
-    // Reset
-    importDialog.value = false;
-    importLoading.value = false;
-    importCsv.value = null;
-    importRef.value.value = null;
-
-    eventBus.emit(EventTypes.ClearStores);
-  }
-</script>
-
-<template>
-  <div>
-    <BaseModal v-model="importDialog">
-      <template #title> Import CSV File </template>
-      <p>
-        Import a CSV file containing your items, labels, and locations. See documentation for more information on the
-        required format.
-      </p>
-
-      <form @submit.prevent="submitCsvFile">
-        <div class="flex flex-col gap-2 py-6">
-          <input ref="importRef" type="file" class="hidden" accept=".csv,.tsv" @change="setFile" />
-
-          <BaseButton type="button" @click="uploadCsv">
-            <Icon class="h-5 w-5 mr-2" name="mdi-upload" />
-            Upload
-          </BaseButton>
-          <p class="text-center pt-4 -mb-5">
-            {{ importCsv?.name }}
-          </p>
-        </div>
-
-        <div class="modal-action">
-          <BaseButton type="submit" :disabled="!importCsv"> Submit </BaseButton>
-        </div>
-      </form>
-    </BaseModal>
-    <BaseContainer class="flex flex-col gap-16 pb-16">
-      <section>
-        <BaseCard>
-          <template #title> Welcome Back, {{ auth.self ? auth.self.name : "Username" }} </template>
-          <!-- <template #subtitle> {{ auth.self.isSuperuser ? "Admin" : "User" }} </template> -->
-          <template #title-actions>
-            <div class="flex justify-end gap-2">
-              <div class="tooltip" data-tip="Import CSV File">
-                <button class="btn btn-primary btn-sm" @click="openDialog">
-                  <Icon name="mdi-database" class="mr-2"></Icon>
-                  Import
-                </button>
-              </div>
-              <BaseButton type="button" size="sm" to="/profile">
-                <Icon class="h-5 w-5 mr-2" name="mdi-person" />
-                Profile
-              </BaseButton>
-            </div>
-          </template>
-
-          <div
-            class="grid grid-cols-1 divide-y divide-base-300 border-t border-base-300 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
-          >
-            <div v-for="stat in stats" :key="stat.label" class="px-6 py-5 text-center text-sm font-medium">
-              <span class="text-base-900 font-bold">{{ stat.value }}</span>
-              {{ " " }}
-              <span class="text-base-600">{{ stat.label }}</span>
-            </div>
-          </div>
-        </BaseCard>
-      </section>
-
-      <section>
-        <BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
-        <div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
-          <LocationCard v-for="location in locations" :key="location.id" :location="location" />
-        </div>
-      </section>
-
-      <section>
-        <BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
-        <div class="flex gap-2 flex-wrap">
-          <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
-        </div>
-      </section>
-    </BaseContainer>
-  </div>
-</template>

frontend/pages/home/charts.ts

@@ -0,0 +1,71 @@
+import { TChartData } from "vue-chartjs/dist/types";
+import { UserClient } from "~~/lib/api/user";
+
+export function purchasePriceOverTimeChart(api: UserClient) {
+  const { data: timeseries } = useAsyncData(async () => {
+    const { data } = await api.stats.totalPriceOverTime();
+    return data;
+  });
+
+  const primary = useCssVar("--p");
+
+  return computed(() => {
+    if (!timeseries.value) {
+      return {
+        labels: ["Purchase Price"],
+        datasets: [
+          {
+            label: "Purchase Price",
+            data: [],
+            backgroundColor: primary.value,
+            borderColor: primary.value,
+          },
+        ],
+      } as TChartData<"line", number[], unknown>;
+    }
+
+    let start = timeseries.value?.valueAtStart;
+
+    return {
+      labels: timeseries?.value.entries.map(t => new Date(t.date).toDateString()) || [],
+      datasets: [
+        {
+          label: "Purchase Price",
+          data:
+            timeseries.value?.entries.map(t => {
+              start += t.value;
+              return start;
+            }) || [],
+          backgroundColor: primary.value,
+          borderColor: primary.value,
+        },
+      ],
+    } as TChartData<"line", number[], unknown>;
+  });
+}
+
+export function inventoryByLocationChart(api: UserClient) {
+  const { data: donutSeries } = useAsyncData(async () => {
+    const { data } = await api.stats.locations();
+    return data;
+  });
+
+  const primary = useCssVar("--p");
+  const secondary = useCssVar("--s");
+  const neutral = useCssVar("--n");
+
+  return computed(() => {
+    return {
+      labels: donutSeries.value?.map(l => l.name) || [],
+      datasets: [
+        {
+          label: "Value",
+          data: donutSeries.value?.map(l => l.total) || [],
+          backgroundColor: [primary.value, secondary.value, neutral.value],
+          borderColor: [primary.value, secondary.value, neutral.value],
+          hoverOffset: 4,
+        },
+      ],
+    };
+  });
+}

frontend/pages/home/index.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+  import { statCardData } from "./statistics";
+  import { itemsTable } from "./table";
+  import { useLabelStore } from "~~/stores/labels";
+  import { useLocationStore } from "~~/stores/locations";
+
+  definePageMeta({
+    middleware: ["auth"],
+  });
+  useHead({
+    title: "Homebox | Home",
+  });
+
+  const api = useUserApi();
+  const breakpoints = useBreakpoints();
+
+  const locationStore = useLocationStore();
+  const locations = computed(() => locationStore.parentLocations);
+
+  const labelsStore = useLabelStore();
+  const labels = computed(() => labelsStore.labels);
+
+  const itemTable = itemsTable(api);
+  const stats = statCardData(api);
+
+  // const purchasePriceOverTime = purchasePriceOverTimeChart(api);
+
+  // const inventoryByLocation = inventoryByLocationChart(api);
+
+  // const refDonutEl = ref<HTMLDivElement>();
+
+  // const donutElWidth = computed(() => {
+  //   return refDonutEl.value?.clientWidth || 0;
+  // });
+</script>
+
+<template>
+  <div>
+    <BaseContainer class="flex flex-col gap-12 pb-16">
+      <!-- <section class="grid grid-cols-6 gap-6">
+        <article class="col-span-4">
+          <Subtitle> Inventory Value Over Time </Subtitle>
+          <BaseCard>
+            <div class="p-10 h-[300px]">
+              <ClientOnly>
+                <ChartLine :chart-data="purchasePriceOverTime" />
+              </ClientOnly>
+            </div>
+          </BaseCard>
+        </article>
+        <article class="col-span-2">
+          <Subtitle>
+            Inventory By
+            <span class="btn-group">
+              <button class="btn btn-xs btn-active text-no-transform">Locations</button>
+              <button class="btn btn-xs text-no-transform">Labels</button>
+            </span>
+          </Subtitle>
+          <BaseCard class="h-[300px]">
+            <div ref="refDonutEl" class="grid place-content-center h-full">
+              <ClientOnly>
+                <ChartDonut
+                  chart-id="donut"
+                  :width="donutElWidth - 50"
+                  :height="265"
+                  :chart-data="inventoryByLocation"
+                />
+              </ClientOnly>
+            </div>
+          </BaseCard>
+        </article>
+      </section> -->
+
+      <section>
+        <Subtitle> Quick Statistics </Subtitle>
+        <div class="grid grid-cols-2 gap-2 md:grid-cols-4 md:gap-6">
+          <StatCard v-for="(stat, i) in stats" :key="i" :title="stat.label" :value="stat.value" :type="stat.type" />
+        </div>
+      </section>
+
+      <section>
+        <Subtitle> Recently Added </Subtitle>
+
+        <BaseCard v-if="breakpoints.lg">
+          <Table :headers="itemTable.headers" :data="itemTable.items">
+            <template #cell-warranty="{ item }">
+              <Icon v-if="item.warranty" name="mdi-check" class="text-green-500 h-5 w-5" />
+              <Icon v-else name="mdi-close" class="text-red-500 h-5 w-5" />
+            </template>
+            <template #cell-purchasePrice="{ item }">
+              <Currency :amount="item.purchasePrice" />
+            </template>
+            <template #cell-location_Name="{ item }">
+              <NuxtLink class="badge badge-sm badge-primary p-3" :to="`/location/${item.location.id}`">
+                {{ item.location?.name }}
+              </NuxtLink>
+            </template>
+          </Table>
+        </BaseCard>
+        <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <ItemCard v-for="item in itemTable.items" :key="item.id" :item="item" />
+        </div>
+      </section>
+
+      <section>
+        <Subtitle> Storage Locations </Subtitle>
+        <div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
+          <LocationCard v-for="location in locations" :key="location.id" :location="location" />
+        </div>
+      </section>
+
+      <section>
+        <Subtitle> Labels </Subtitle>
+        <div class="flex gap-4 flex-wrap">
+          <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" class="shadow-md" />
+        </div>
+      </section>
+    </BaseContainer>
+  </div>
+</template>

frontend/pages/home/statistics.ts

@@ -0,0 +1,39 @@
+import { UserClient } from "~~/lib/api/user";
+
+type StatCard = {
+  label: string;
+  value: number;
+  type: "currency" | "number";
+};
+
+export function statCardData(api: UserClient) {
+  const { data: statistics } = useAsyncData(async () => {
+    const { data } = await api.stats.group();
+    return data;
+  });
+
+  return computed(() => {
+    return [
+      {
+        label: "Total Value",
+        value: statistics.value?.totalItemPrice || 0,
+        type: "currency",
+      },
+      {
+        label: "Total Items",
+        value: statistics.value?.totalItems || 0,
+        type: "number",
+      },
+      {
+        label: "Total Locations",
+        value: statistics.value?.totalLocations || 0,
+        type: "number",
+      },
+      {
+        label: "Total Labels",
+        value: statistics.value?.totalLabels || 0,
+        type: "number",
+      },
+    ] as StatCard[];
+  });
+}

frontend/pages/home/table.ts

@@ -0,0 +1,42 @@
+import { TableHeader } from "~~/components/global/Table.types";
+
+import { UserClient } from "~~/lib/api/user";
+
+export function itemsTable(api: UserClient) {
+  const { data: items } = useAsyncData(async () => {
+    const { data } = await api.items.getAll({
+      page: 1,
+      pageSize: 5,
+    });
+    return data.items;
+  });
+
+  const headers = [
+    {
+      text: "Name",
+      sortable: true,
+      value: "name",
+    },
+    {
+      text: "Location",
+      value: "location.name",
+    },
+    {
+      text: "Warranty",
+      value: "warranty",
+      align: "center",
+    },
+    {
+      text: "Price",
+      value: "purchasePrice",
+      align: "center",
+    },
+  ] as TableHeader[];
+
+  return computed(() => {
+    return {
+      headers,
+      items: items.value || [],
+    };
+  });
+}

frontend/pages/item/[id]/index.vue

@@ -343,8 +343,8 @@
         <img class="max-w-[80vw] max-h-[80vh]" :src="dialoged.src" />
       </div>
     </dialog>
-    <section class="px-3">
-      <div class="space-y-3">
+    <section>
+      <div class="space-y-6">
         <BaseCard>
           <template #title>
             <BaseSectionHeader>
@@ -374,35 +374,31 @@
             </BaseSectionHeader>
           </template>
           <template #title-actions>
-            <div class="modal-action mt-0">
-              <label v-if="!hasNested" class="label cursor-pointer mr-auto">
+            <div class="flex flex-wrap justify-between items-center mt-2 gap-4">
+              <label v-if="!hasNested" class="label cursor-pointer">
                 <input v-model="preferences.showEmpty" type="checkbox" class="toggle toggle-primary" />
                 <span class="label-text ml-4"> Show Empty </span>
               </label>
-              <BaseButton v-else class="mr-auto" size="sm" @click="$router.go(-1)">
-                <template #icon>
-                  <Icon name="mdi-arrow-left" class="h-5 w-5" />
-                </template>
-                Back
-              </BaseButton>
-              <BaseButton size="sm" :to="`/item/${itemId}/edit`">
-                <template #icon>
-                  <Icon name="mdi-pencil" />
-                </template>
-                Edit
-              </BaseButton>
-              <BaseButton size="sm" @click="deleteItem">
-                <template #icon>
-                  <Icon name="mdi-delete" />
-                </template>
-                Delete
-              </BaseButton>
-              <BaseButton size="sm" :to="`/item/${itemId}/log`">
-                <template #icon>
-                  <Icon name="mdi-post" />
-                </template>
-                Log
-              </BaseButton>
+              <div class="flex flex-wrap justify-end gap-2 ml-auto">
+                <BaseButton size="sm" :to="`/item/${itemId}/edit`">
+                  <template #icon>
+                    <Icon name="mdi-pencil" />
+                  </template>
+                  Edit
+                </BaseButton>
+                <BaseButton size="sm" @click="deleteItem">
+                  <template #icon>
+                    <Icon name="mdi-delete" />
+                  </template>
+                  Delete
+                </BaseButton>
+                <BaseButton size="sm" :to="`/item/${itemId}/log`">
+                  <template #icon>
+                    <Icon name="mdi-post" />
+                  </template>
+                  Log
+                </BaseButton>
+              </div>
             </div>
           </template>
 
@@ -410,7 +406,7 @@
         </BaseCard>
 
         <NuxtPage :item="item" :page-key="itemId" />
-        <div v-if="!hasNested">
+        <template v-if="!hasNested">
           <BaseCard v-if="photos && photos.length > 0">
             <template #title> Photos </template>
             <div
@@ -470,7 +466,7 @@
             <template #title> Sold Details </template>
             <DetailsSection :details="soldDetails" />
           </BaseCard>
-        </div>
+        </template>
       </div>
     </section>
 

frontend/pages/item/[id]/index/log.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import DatePicker from "~~/components/Form/DatePicker.vue";
+  import { StatsFormat } from "~~/components/global/StatCard/types";
   import { ItemOut } from "~~/lib/api/types/data-contracts";
 
   const props = defineProps<{
@@ -14,21 +15,31 @@
     return data;
   });
 
+  const count = computed(() => {
+    if (!log.value) return 0;
+    return log.value.entries.length;
+  });
   const stats = computed(() => {
     if (!log.value) return [];
 
     return [
+      {
+        id: "count",
+        title: "Total Entries",
+        value: count.value || 0,
+        type: "number" as StatsFormat,
+      },
       {
         id: "total",
         title: "Total Cost",
-        subtitle: "Sum over all entries",
-        value: fmtCurrency(log.value.costTotal),
+        value: log.value.costTotal || 0,
+        type: "currency" as StatsFormat,
       },
       {
         id: "average",
         title: "Monthly Average",
-        subtitle: "Average over all entries",
-        value: fmtCurrency(log.value.costAverage),
+        value: log.value.costAverage || 0,
+        type: "currency" as StatsFormat,
       },
     ];
   });
@@ -63,14 +74,20 @@
     refreshLog();
   }
 
+  const confirm = useConfirm();
+
   async function deleteEntry(id: string) {
+    const result = await confirm.open("Are you sure you want to delete this entry?");
+    if (result.isCanceled) {
+      return;
+    }
+
     const { error } = await api.items.maintenance.delete(props.item.id, id);
 
     if (error) {
       toast.error("Failed to delete entry");
       return;
     }
-
     refreshLog();
   }
 </script>
@@ -95,16 +112,32 @@
       </form>
     </BaseModal>
 
-    <div class="flex">
-      <BaseButton class="ml-auto" size="sm" @click="newEntry()">
-        <template #icon>
-          <Icon name="mdi-post" />
-        </template>
-        Log Maintenance
-      </BaseButton>
-    </div>
-    <section class="page-layout my-6">
-      <div class="main-slot container space-y-6">
+    <section class="space-y-6">
+      <div class="flex">
+        <BaseButton size="sm" @click="$router.go(-1)">
+          <template #icon>
+            <Icon name="mdi-arrow-left" class="h-5 w-5" />
+          </template>
+          Back
+        </BaseButton>
+        <BaseButton class="ml-auto" size="sm" @click="newEntry()">
+          <template #icon>
+            <Icon name="mdi-post" />
+          </template>
+          Log Maintenance
+        </BaseButton>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <StatCard
+          v-for="stat in stats"
+          :key="stat.id"
+          class="stats block shadow-xl border-l-primary"
+          :title="stat.title"
+          :value="stat.value"
+          :type="stat.type"
+        />
+      </div>
+      <div class="container space-y-6">
         <BaseCard v-for="e in log.entries" :key="e.id">
           <BaseSectionHeader class="p-6 border-b border-b-gray-300">
             <span class="text-base-content">
@@ -137,37 +170,6 @@
           </div>
         </BaseCard>
       </div>
-      <div class="side-slot space-y-6">
-        <div v-for="stat in stats" :key="stat.id" class="stats block shadow-xl border-l-primary">
-          <div class="stat">
-            <div class="stat-title">{{ stat.title }}</div>
-            <div class="stat-value text-primary">{{ stat.value }}</div>
-            <div class="stat-desc">{{ stat.subtitle }}</div>
-          </div>
-        </div>
-      </div>
     </section>
   </div>
 </template>
-
-<style scoped>
-  .page-layout {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    grid-template-rows: auto;
-    grid-template-areas: "side main";
-    gap: 1rem;
-  }
-
-  .side-slot {
-    grid-area: side;
-  }
-
-  .main-slot {
-    grid-area: main;
-  }
-
-  .grid {
-    display: grid;
-  }
-</style>

frontend/pages/items.vue

@@ -135,7 +135,7 @@
     <div class="flex mt-1">
       <label class="ml-auto label cursor-pointer">
         <input v-model="advanced" type="checkbox" class="toggle toggle-primary" />
-        <span class="label-text text-neutral-content ml-2"> Filters </span>
+        <span class="label-text text-base-content ml-2"> Filters </span>
       </label>
     </div>
     <BaseCard v-if="advanced" class="my-1 overflow-visible">

frontend/pages/profile.vue

@@ -22,8 +22,6 @@
     if (group.value) {
       group.value.currency = currency.value.code;
     }
-
-    console.log(group.value);
   });
 
   const currencyExample = computed(() => {