badges improvements

src/features/admin/components/admin-page.tsx

@@ -1,5 +1,5 @@
-import { List } from "@mantine/core";
-import { useLingui } from "@lingui/react/macro";
+import { List, Text } from "@mantine/core";
+import { Plural, Trans, useLingui } from "@lingui/react/macro";
 import ListLink from "@/components/list-link";
 import {
   DatabaseIcon,
@@ -10,19 +10,38 @@ import {
   ListIcon,
 } from "@phosphor-icons/react";
 import ListButton from "@/components/list-button";
-import { migrateBadgeProgress } from "@/features/badges/server";
-import { useState } from "react";
+import { getBadgeMigrationStatus, migrateBadgeProgress } from "@/features/badges/server";
+import { useServerQuery } from "@/lib/tanstack-query/hooks";
+import toast from "@/lib/sonner";
 
 const AdminPage = () => {
   const { t } = useLingui();
-  const [isMigrating, setIsMigrating] = useState(false);
+
+  const { data: migrationStatus, refetch: refetchMigrationStatus } = useServerQuery({
+    queryKey: ["admin", "badge-migration-status"],
+    queryFn: () => getBadgeMigrationStatus(),
+    options: {
+      refetchInterval: (query) =>
+        query.state.data?.state === "running" ? 2000 : false,
+    },
+  });
+
+  const isMigrating = migrationStatus?.state === "running";
 
   const handleMigrateBadges = async () => {
     if (isMigrating) return;
 
-    setIsMigrating(true);
-    await migrateBadgeProgress();
-    setIsMigrating(false);
+    const result = await migrateBadgeProgress();
+    if (result.success) {
+      toast.success(
+        result.data.started
+          ? t`Badge recalculation started in the background`
+          : t`Badge recalculation is already running`
+      );
+    } else {
+      toast.error(t`Failed to start badge recalculation`);
+    }
+    await refetchMigrationStatus();
   };
 
   return (
@@ -43,6 +62,30 @@ const AdminPage = () => {
         onClick={handleMigrateBadges}
         loading={isMigrating}
       />
+      {migrationStatus?.state === "running" && (
+        <Text size="sm" c="dimmed" px="md" py="xs">
+          <Trans>
+            Recalculating badges in the background ({migrationStatus.playersProcessed}/{migrationStatus.totalPlayers})
+          </Trans>
+        </Text>
+      )}
+      {migrationStatus?.state === "completed" && (
+        <Text size="sm" c="dimmed" px="md" py="xs">
+          <Trans>
+            Last recalculation:{" "}
+            <Plural
+              value={migrationStatus.result.totalBadgesEarned}
+              one="# badge earned"
+              other="# badges earned"
+            />
+          </Trans>
+        </Text>
+      )}
+      {migrationStatus?.state === "failed" && (
+        <Text size="sm" c="red" px="md" py="xs">
+          <Trans>Badge recalculation failed. Check the server logs.</Trans>
+        </Text>
+      )}
       <ListLink
         label={t`Activities`}
         Icon={ListIcon}