mirror of https://github.com/hay-kot/homebox.git
121 lines
4.0 KiB
Vue
121 lines
4.0 KiB
Vue
<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>
|