1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-22 14:56:31 +00:00
homebox/frontend/pages/home/index.vue

64 lines
1.9 KiB
Vue
Raw Normal View History

<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);
</script>
<template>
<div>
<BaseContainer class="flex flex-col gap-12 pb-16">
<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">
<ItemViewTable :items="itemTable.items" />
</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>