homemanager-fe/src/views/Dashboard.vue

<template>
  <StandardLayout>
    <PageHead bordered><h1 class="text-2xl font-bold">Dashboard</h1></PageHead>

    <p>Hello, {{ user.name }}</p>

    <template v-if="expiringItems?.length">
      <PageHead class="mt-4"
        ><h2 class="text-xl font-bold">Expiring soon</h2></PageHead
      >

      <div
        class="flex flex-nowrap gap-1 overflow-x-scroll px-1 py-1 md:overflow-hidden"
      >
        <StoredItemCard
          v-for="item of expiringItems"
          :stored-item="item"
          class="whitespace-nowrap rounded-md bg-white px-2 py-2 shadow-md ring-1 ring-black ring-opacity-5"
        />
      </div>
    </template>

    <PageHead class="mt-4">
      <h2 class="text-xl font-bold">Buildings</h2>
    </PageHead>

    <div
      class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
      v-if="buildings?.length"
    >
      <BuildingListItem v-for="building of buildings" :building="building" />
    </div>
  </StandardLayout>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useUserStore } from '../store/user.store';
import StandardLayout from '../components/StandardLayout.vue';
import PageHead from '../components/PageHead.vue';
import { useBuildingStore } from '../store/building.store';
import { storeToRefs } from 'pinia';
import BuildingListItem from './building/BuildingListItem.vue';
import { useStorageStore } from '../store/storage.store';
import StoredItemCard from '../components/item/StoredItemCard.vue';

const userStore = useUserStore();
const storageStore = useStorageStore();
const buildingStore = useBuildingStore();
const { buildings, loadingBuildings } = storeToRefs(buildingStore);
const { expiringItems, loadingExpiringItems } = storeToRefs(storageStore);
const user = ref(userStore.user);

onMounted(() => {
  storageStore.getExpiringItems();
});
</script>