chore: Nuxt 4 upgrade (#7426)

frontend/app/components/Domain/Group/GroupExportData.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-data-table
+    item-key="id"
+    :headers="headers"
+    :items="exports"
+    :items-per-page="15"
+    class="elevation-0"
+    @click:row="downloadData"
+  >
+    <template #[`item.expires`]="{ item }">
+      {{ getTimeToExpire(item.expires) }}
+    </template>
+    <template #[`item.actions`]="{ item }">
+      <BaseButton
+        download
+        size="small"
+        :download-url="`/api/recipes/bulk-actions/export/${item.id}/download`"
+      />
+    </template>
+  </v-data-table>
+</template>
+
+<script setup lang="ts">
+import { parseISO, formatDistanceToNow } from "date-fns";
+import type { GroupDataExport } from "~/lib/api/types/group";
+
+defineProps<{
+  exports: GroupDataExport[];
+}>();
+
+const i18n = useI18n();
+
+const headers = [
+  { title: i18n.t("export.export"), value: "name" },
+  { title: i18n.t("export.file-name"), value: "filename" },
+  { title: i18n.t("export.size"), value: "size" },
+  { title: i18n.t("export.link-expires"), value: "expires" },
+  { title: "", value: "actions" },
+];
+
+function getTimeToExpire(timeString: string) {
+  const expiresAt = parseISO(timeString);
+
+  return formatDistanceToNow(expiresAt, {
+    addSuffix: false,
+  });
+}
+
+function downloadData(_: any) {
+  console.log("Downloading data...");
+}
+</script>