add mange qr-codes

apps/frontend/src/components/QueryRender.vue

@@ -5,16 +5,26 @@ type Props = {
   query: UseQueryReturnType<R, E>
 }
 
+const slots = defineSlots<{
+  default?: (slotBindings: { data: R }) => void
+  error?: (slotBindings: { error: E; reload: typeof refetch }) => void
+  loading?: () => void
+}>()
+
 const { query } = defineProps<Props>()
 
 const { data, error, refetch, isSuccess, isError, isLoading } = query
 </script>
 
 <template>
-  <slot v-if="isSuccess" name="default" :data="data! as R" />
-  <slot v-else-if="isLoading" name="loading"><p class="text-gray-500">Загрузка данных...</p></slot>
-  <slot v-else-if="isError" name="error" :error="error as E" :reload="refetch">
-    Ошибка загрузки данных:
-    {{ error && typeof error === 'object' && 'message' in error ? error.message : error }}
+  <slot v-if="isSuccess" name="default" :data="data!" />
+  <slot v-else-if="isLoading" name="loading">
+    <p class="text-gray-500" v-if="!slots.loading">Загрузка данных...</p>
+  </slot>
+  <slot v-else-if="isError" name="error" :error="error!" :reload="refetch">
+    <template v-if="!slots.error">
+      Ошибка загрузки данных:
+      {{ error && typeof error === 'object' && 'message' in error ? error.message : error }}
+    </template>
   </slot>
 </template>

apps/frontend/src/components/manage/QRCodeCard.vue

@@ -0,0 +1,46 @@
+<template>
+  <RouterLink :to="`/manage/qr/${qrCode.uri}`" class="p-4 rounded-lg bg-white shadow-md">
+    <div class="flex items-center justify-between mb-2">
+      <div class="flex items-center">
+        <i :class="['pi', iconClass, 'text-gray-500', 'mr-2']" />
+        <h2 class="text-lg font-semibold">{{ qrCode.name }}</h2>
+      </div>
+      <!--      <Button-->
+      <!--        label="Настроить"-->
+      <!--        :to="`/manage/${qrCode.uri}/settings`"-->
+      <!--        as="router-link"-->
+      <!--        class="p-button-outlined p-button-sm"-->
+      <!--      />-->
+    </div>
+    <div class="text-gray-500">Создано: {{ formatedCreatedAt }}</div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+import type { QRCodeDocument } from '@hereconnect/types'
+
+const props = defineProps<{
+  qrCode: QRCodeDocument
+}>()
+
+const iconClass = computed(() => {
+  const icons: Record<string, string> = {
+    car: 'pi-car',
+    pet: 'pi-paw',
+    door: 'pi-door-closed',
+    store: 'pi-shop',
+    restaurant_table: 'pi-utensils',
+    other: 'pi-question-circle',
+  }
+  return icons[props.qrCode.placement] || 'pi-question-circle'
+})
+
+const formatDate = (date: string) => {
+  // Форматирование даты
+  const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' }
+  return new Date(date).toLocaleDateString(['ru-RU'], options)
+}
+
+const formatedCreatedAt = computed(() => formatDate(props.qrCode.created_at))
+</script>