working but sheet styling is ugly

src/lib/pocketbase/services/badges.ts

@@ -1,6 +1,6 @@
 import PocketBase from "pocketbase";
-import { Badge, BadgeProgress } from "@/features/badges/types";
-import { transformBadge, transformBadgeProgress } from "@/lib/pocketbase/util/transform-types";
+import { Badge, BadgeProgress, EarnedBadge } from "@/features/badges/types";
+import { transformBadge, transformBadgeProgress, transformEarnedBadge } from "@/lib/pocketbase/util/transform-types";
 
 export interface PlayerStats {
   player_id: string;
@@ -41,6 +41,14 @@ export function createBadgesService(pb: PocketBase) {
       return results.map(transformBadgeProgress);
     },
 
+     async listEarnedBadges(): Promise<EarnedBadge[]> {
+      const results = await pb.collection("badge_progress").getFullList({
+        filter: `earned = true`,
+        expand: 'player',
+      });
+      return results.map(transformEarnedBadge);
+    },
+
     async createBadgeProgress(data: {
       badge: string;
       player: string;

src/lib/pocketbase/util/transform-types.ts

@@ -3,7 +3,7 @@ import { Match } from "@/features/matches/types";
 import { Player, PlayerInfo } from "@/features/players/types";
 import { Team, TeamInfo } from "@/features/teams/types";
 import { Tournament, TournamentInfo } from "@/features/tournaments/types";
-import { Badge, BadgeInfo, BadgeProgress } from "@/features/badges/types";
+import { Badge, BadgeInfo, BadgeProgress, EarnedBadge } from "@/features/badges/types";
 import { Activity } from "../services/activities";
 
 // pocketbase does this weird thing with relations where it puts them under a seperate "expand" field
@@ -314,6 +314,18 @@ export function transformBadgeProgress(record: any): BadgeProgress {
   };
 }
 
+export function transformEarnedBadge(record: any): EarnedBadge {
+  return {
+    id: record.id,
+    badge: record.badge,
+    player: record.expand?.player ? transformPlayerInfo(record.expand.player) : record.player,
+    progress: record.progress,
+    earned: record.earned,
+    created: record.created,
+    updated: record.updated,
+  };
+}
+
 export function transformActivity(record: any): Activity {
   return {
     id: record.id,