gg

src/components/admin/admin-content.tsx

@@ -24,8 +24,10 @@ import {
 } from "@/components/motion";
 import { useAdminAnalytics, useAdminUsers } from "@/lib/api/admin/use-hooks";
 import type { AdminUserDto, AnalyticsOverviewDto } from "@/lib/api/admin/types";
+import { formatRoleLabel, isAdminRole } from "@/lib/auth/roles";
 import { LuUsers, LuChartBar, LuActivity, LuShield } from "react-icons/lu";
 import { useState } from "react";
+import { useSession } from "next-auth/react";
 
 type AdminTab = "overview" | "users";
 
@@ -81,16 +83,21 @@ export default function AdminContent() {
   const t = useTranslations("admin");
   const tCommon = useTranslations("common");
   const [activeTab, setActiveTab] = useState<AdminTab>("overview");
+  const { data: session, status } = useSession();
 
   const cardBg = useColorModeValue("white", "gray.800");
   const borderColor = useColorModeValue("gray.100", "gray.700");
+  const canAccessAdmin = isAdminRole(session?.user?.roles);
 
   const { data: analyticsData, isLoading: analyticsLoading } =
-    useAdminAnalytics();
-  const { data: usersData, isLoading: usersLoading } = useAdminUsers();
+    useAdminAnalytics(canAccessAdmin);
+  const { data: usersData, isLoading: usersLoading } = useAdminUsers(
+    undefined,
+    canAccessAdmin,
+  );
 
   const analytics = analyticsData?.data as AnalyticsOverviewDto | undefined;
-  const users = (usersData?.data as AdminUserDto[] | undefined) ?? [];
+  const users = usersData?.data?.items ?? [];
 
   const tabs: { key: AdminTab; label: string }[] = [
     { key: "overview", label: t("overview") },
@@ -104,6 +111,37 @@ export default function AdminContent() {
     return user.email.split("@")[0];
   };
 
+  if (status === "loading") {
+    return (
+      <Flex justify="center" py={16}>
+        <Spinner size="lg" color="primary.500" />
+      </Flex>
+    );
+  }
+
+  if (!canAccessAdmin) {
+    return (
+      <SlideUp>
+        <Card.Root bg={cardBg} borderColor={borderColor} borderRadius="xl">
+          <Card.Body py={10}>
+            <VStack gap={3}>
+              <Badge colorPalette="red" variant="subtle" borderRadius="full">
+                <LuShield />
+                Restricted
+              </Badge>
+              <Heading as="h2" size="md">
+                Admin access required
+              </Heading>
+              <Text color="fg.muted" textAlign="center" maxW="md">
+                This area is only available to superadmin accounts.
+              </Text>
+            </VStack>
+          </Card.Body>
+        </Card.Root>
+      </SlideUp>
+    );
+  }
+
   return (
     <SlideUp>
       <Box>
@@ -156,7 +194,7 @@ export default function AdminContent() {
                 <StaggerItem>
                   <AdminStat
                     label={t("total-users")}
-                    value={analytics?.totalUsers ?? 0}
+                    value={analytics?.totalUsers ?? analytics?.users?.total ?? 0}
                     icon={<LuUsers />}
                     colorPalette="primary"
                   />
@@ -164,7 +202,7 @@ export default function AdminContent() {
                 <StaggerItem>
                   <AdminStat
                     label={t("total-predictions")}
-                    value={analytics?.totalPredictions ?? 0}
+                    value={analytics?.totalPredictions ?? analytics?.predictions ?? 0}
                     icon={<LuChartBar />}
                     colorPalette="green"
                   />
@@ -172,7 +210,7 @@ export default function AdminContent() {
                 <StaggerItem>
                   <AdminStat
                     label={t("active-users")}
-                    value={analytics?.activeUsers ?? 0}
+                    value={analytics?.activeUsers ?? analytics?.users?.active ?? 0}
                     icon={<LuActivity />}
                     colorPalette="orange"
                   />
@@ -244,14 +282,12 @@ export default function AdminContent() {
                         </Text>
                         <Flex flex={1} justify="center">
                           <Badge
-                            colorPalette={
-                              user.role === "ADMIN" ? "red" : "gray"
-                            }
+                            colorPalette={isAdminRole([user.role]) ? "red" : "gray"}
                             variant="subtle"
                             fontSize="2xs"
                             borderRadius="full"
                           >
-                            {user.role || "User"}
+                            {formatRoleLabel(user.role)}
                           </Badge>
                         </Flex>
                         <Flex flex={1} justify="center">