chore: add export format

Author: openscript

apps/frontend/src/routes/_auth/administration/export/index.tsx

@@ -1,15 +1,45 @@
-import { Button } from "@quassel/ui";
+import { Button, Group, Radio, Stack, useForm } from "@quassel/ui";
 import { createFileRoute } from "@tanstack/react-router";
 import { $api } from "../../../../stores/api";
+import { i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+const messages = i18n("AdministrationExportIndexRoute", {
+  title: "Carers",
+  formatLabel: "File format",
+  csvLabel: "Comma-separated values (CSV)",
+  sqlLabel: "Database export (SQL)",
+  formAction: "Download",
+});
+
+type FormValues = {
+  fileType?: "csv" | "sql";
+  studyId?: string;
+  period?: [Date, Date];
+};
 
 function AdministrationExportIndex() {
+  const t = useStore(messages);
+  const f = useForm<FormValues>({
+    mode: "uncontrolled",
+    initialValues: {},
+  });
+
   const { isDownloading, downloadFile } = $api.useDownload("/export", "dump.sql");
   return (
-    <div>
-      <Button loading={isDownloading} onClick={() => downloadFile()}>
-        Download
-      </Button>
-    </div>
+    <form onSubmit={f.onSubmit(() => downloadFile())}>
+      <Stack>
+        <Radio.Group label={t.formatLabel}>
+          <Group>
+            <Radio value="csv" label={t.csvLabel} />
+            <Radio value="sql" label={t.sqlLabel} />
+          </Group>
+        </Radio.Group>
+        <Button type="submit" loading={isDownloading}>
+          {t.formAction}
+        </Button>
+      </Stack>
+    </form>
   );
 }
 

libs/ui/src/index.ts

@@ -29,6 +29,7 @@ import "@mantine/core/styles/Title.css";
 import "@mantine/core/styles/ActionIcon.css";
 import "@mantine/core/styles/Combobox.css";
 import "@mantine/core/styles/Stack.css";
+import "@mantine/core/styles/Radio.css";
 
 import "@mantine/dates/styles.css";
 
@@ -65,6 +66,7 @@ export {
   NavLink,
   Paper,
   PasswordInput,
+  Radio,
   Select,
   type SelectProps,
   Stack,