style updates

frontend/components/Item/Card.vue

@@ -0,0 +1,30 @@
+<template>
+  <NuxtLink
+    class="group card bg-neutral text-neutral-content hover:bg-primary transition-colors duration-300"
+    :to="`/item/${item.id}`"
+  >
+    <div class="card-body py-4 px-6">
+      <h2 class="card-title">
+        <Icon name="mdi-package-variant" />
+        {{ item.name }}
+      </h2>
+      <p>{{ item.description }}</p>
+      <div class="flex gap-2 flex-wrap justify-end">
+        <LabelChip v-for="label in item.labels" :label="label" class="badge-primary group-hover:badge-secondary" />
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+  import { Item } from '~~/lib/api/classes/items';
+
+  defineProps({
+    item: {
+      type: Object as () => Item,
+      required: true,
+    },
+  });
+</script>
+
+<style scoped></style>

frontend/components/Item/CreateModal.vue

@@ -26,6 +26,7 @@
 </template>
 
 <script setup lang="ts">
+  import { type Location } from '~~/lib/api/classes/locations';
   const props = defineProps({
     modelValue: {
       type: Boolean,
@@ -39,7 +40,7 @@
   const loading = ref(false);
   const focused = ref(false);
   const form = reactive({
-    location: {},
+    location: {} as Location,
     name: '',
     description: '',
     color: '', // Future!
@@ -75,7 +76,18 @@
   });
 
   async function create() {
-    const { data, error } = await api.labels.create(form);
+    if (!form.location) {
+      return;
+    }
+
+    const out = {
+      name: form.name,
+      description: form.description,
+      locationId: form.location.id as string,
+      labelIds: form.labels.map(l => l.id) as string[],
+    };
+
+    const { data, error } = await api.items.create(out);
     if (error) {
       toast.error("Couldn't create label");
       return;