add fursuits and badges table

app/Http/Controllers/POS/AttendeeController.php

@@ -28,9 +28,14 @@ public function lookupSubmit(Request $request): RedirectResponse
     public function attendeeShow(string $attendeeId, Request $request):  Response
     {
         $user = User::where('attendee_id', $attendeeId)->first();
+        $badges = $user->badges()->with('fursuit.species')->get();
         return Inertia::render('POS/Attendee/Show', [
             'attendee' => $user,
-            'badges' => $user->badges()->select('fursuit_id', 'printed_at', 'total', 'picked_up_at', 'badges.updated_at' )->get()
+            //'badges' => $user->badges()->select('fursuit_id', 'printed_at', 'total', 'picked_up_at', 'badges.updated_at' )->get()
+            'badges' => $badges,
+            'fursuits' => $badges->map(function ($badge) {
+                return $badge->fursuit;
+            })->unique('fursuit'),
         ]);
     }
 }

resources/js/Components/POS/Attendee/BadgesTable.vue

@@ -0,0 +1,42 @@
+<script setup>
+
+import Column from "primevue/column";
+import DataTable from "primevue/datatable";
+import Button from "primevue/button";
+import dayjs from "dayjs";
+import {ref} from "vue";
+
+defineProps({
+    attendee: Object,
+    badges: Array
+})
+
+const selectedBadges = ref();
+</script>
+
+<template>
+<!--    {{ badges }}-->
+    <DataTable dataKey="id" v-model:selection="selectedBadges" :value="badges" scrollable scrollHeight="400px" class="-m-5" tableStyle="min-width: 50rem">
+<!--        <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>-->
+        <Column field="updated_at" header="Date">
+            <template #body="slotProps">
+                {{ dayjs(slotProps.data.updated_at).format('DD.MM.YY H:mm') }}
+            </template>
+        </Column>
+        <Column field="fursuit.name" header="Fursuit">
+
+        </Column>
+        <Column field="printed_at" header="Print">
+            <template #body="slotProps">
+                {{ slotProps.data.printed_at || 'not yet' }}
+            </template>
+        </Column>
+        <Column field="status" header="Paid"></Column>
+        <Column header="Actions">
+            <template #body="slotProps">
+                <Button size="small">Print</Button>
+            </template>
+        </Column>
+    </DataTable>
+</template>
+

resources/js/Components/POS/Attendee/FursuitTable.vue

@@ -0,0 +1,38 @@
+<script setup>
+
+import Column from "primevue/column";
+import DataTable from "primevue/datatable";
+import Checkbox from "primevue/checkbox";
+import {ref} from "vue";
+import Avatar from "primevue/avatar";
+
+defineProps({
+    attendee: Object,
+    fursuits: Array
+})
+
+const selectedBadges = ref();
+</script>
+
+<template>
+    <DataTable dataKey="id" :value="fursuits" scrollable scrollHeight="400px" class="-m-5" tableStyle="min-width: 50rem">
+        <Column field="image_url" header="Icon">
+            <template #body="slotProps">
+                <Avatar :image="slotProps.data.image_url" size="large" :pt="{ image: { class: 'object-contain rounded-lg' }}" />
+            </template>
+        </Column>
+        <Column field="name" header="Name" />
+        <Column field="species.name" header="Species" />
+        <Column field="catch_em_all" header="Catch em all">
+            <template #body="slotProps">
+                <Checkbox :modelValue="slotProps.data.catch_em_all" :binary="true" />
+            </template>
+        </Column>
+        <Column header="Actions">
+            <template #body="slotProps">
+
+            </template>
+        </Column>
+    </DataTable>
+</template>
+

resources/js/Pages/POS/Attendee/Show.vue

@@ -1,39 +1,39 @@
 <script setup>
 import POSLayout from "@/Layouts/POSLayout.vue";
 
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
+import BadgesTable from "@/Components/POS/Attendee/BadgesTable.vue";
+import FursuitTable from "@/Components/POS/Attendee/FursuitTable.vue";
 
 defineOptions({
     layout: POSLayout,
 });
 
 const props = defineProps({
     badges: Array,
+    fursuits: Array,
     attendee: Object,
 });
+
+// const badges = [
+//     {
+//         'updated_at': new Date(),
+//         'fursuit_id': 1,
+//
+//
+//     }
+// ]
 </script>
 
 <template>
     <div class="p-8">
         <TabView>
             <TabPanel header="Badges">
-                <DataTable :value="badges" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
-                    <Column field="updated_at" header="Date"></Column>
-                    <Column field="fursuit_id" header="Fursuit"></Column>
-                    <Column field="printed_at" header="Print"></Column>
-                    <Column field="total" header="Paid"></Column>
-                    <Column field="picked_up_at" header="Pickup Location"></Column>
-                    <Column header="Actions"></Column>
-                </DataTable>
+              <BadgesTable :badges="badges" :attendee="attendee" />
             </TabPanel>
             <TabPanel header="Fursuit">
-                <p class="m-0">
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </p>
+               <FursuitTable :fursuits="fursuits" :attendee="attendee" />
             </TabPanel>
             <TabPanel header="Transactions">
                 <p class="m-0">