Show more stats in leaderboard table

website/src/components/Dashboard/LeaderboardWidget.tsx

@@ -1,11 +1,9 @@
-import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
+import { Card, CardBody, Link, Text } from "@chakra-ui/react";
 import NextLink from "next/link";
-import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
+import { LeaderboardTable } from "src/components/LeaderboardTable";
 import { LeaderboardTimeFrame } from "src/types/Leaderboard";
 
-export function LeaderboardTable() {
-  const backgroundColor = useColorModeValue("white", "gray.700");
-  const accentColor = useColorModeValue("gray.200", "gray.900");
+export function LeaderboardWidget() {
   return (
     <main className="h-fit col-span-3">
       <div className="flex flex-col gap-4">
@@ -17,15 +15,11 @@ export function LeaderboardTable() {
             </Text>
           </Link>
         </div>
-        <Box
-          backgroundColor={backgroundColor}
-          boxShadow="base"
-          dropShadow={accentColor}
-          borderRadius="xl"
-          className="p-6 shadow-sm"
-        >
-          <LeaderboardGridCell timeFrame={LeaderboardTimeFrame.day} />
-        </Box>
+        <Card>
+          <CardBody>
+            <LeaderboardTable timeFrame={LeaderboardTimeFrame.day} limit={5} />
+          </CardBody>
+        </Card>
       </div>
     </main>
   );

website/src/components/Dashboard/index.ts

@@ -1,3 +1,3 @@
-export { LeaderboardTable } from "./LeaderboardTable";
+export { LeaderboardWidget } from "./LeaderboardWidget";
 export { TaskOption } from "./TaskOption";
 export { WelcomeCard } from "./WelcomeCard";

website/src/components/LeaderboardGridCell/index.tsx

@@ -1 +0,0 @@
-export * from "./LeaderboardGridCell";

website/src/components/LeaderboardTable/LeaderboardTable.tsx

@@ -13,13 +13,13 @@ const columnHelper = createColumnHelper<LeaderboardEntity>();
 /**
  * Presents a grid of leaderboard entries with more detailed information.
  */
-const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame }) => {
+export const LeaderboardTable = ({ timeFrame, limit }: { timeFrame: LeaderboardTimeFrame; limit: number }) => {
   const { t } = useTranslation("leaderboard");
   const {
     data: reply,
     isLoading,
     error,
-  } = useSWRImmutable<LeaderboardReply>(`/api/leaderboard?time_frame=${timeFrame}`, get, {
+  } = useSWRImmutable<LeaderboardReply>(`/api/leaderboard?time_frame=${timeFrame}&limit=${limit}`, get, {
     revalidateOnMount: true,
   });
 
@@ -35,7 +35,13 @@ const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame })
         header: t("score"),
       }),
       columnHelper.accessor("prompts", {
-        header: t("pro"),
+        header: t("prompt"),
+      }),
+      columnHelper.accessor((row) => row.replies_assistant + row.replies_prompter, {
+        header: t("reply"),
+      }),
+      columnHelper.accessor((row) => row.labels_full + row.labels_simple, {
+        header: t("label"),
       }),
     ],
     [t]
@@ -45,7 +51,6 @@ const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame })
     const val = new Date(reply?.last_updated);
     return t("last_updated_at", { val, formatParams: { val: { dateStyle: "full", timeStyle: "short" } } });
   }, [t, reply?.last_updated]);
-  console.log(reply, isLoading);
 
   if (isLoading) {
     return <CircularProgress isIndeterminate></CircularProgress>;
@@ -55,7 +60,5 @@ const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame })
     return <span>Unable to load leaderboard</span>;
   }
 
-  return <DataTable data={reply?.leaderboard || []} columns={columns} caption={lastUpdated}></DataTable>;
+  return <DataTable data={reply.leaderboard} columns={columns} caption={lastUpdated}></DataTable>;
 };
-
-export { LeaderboardGridCell };

website/src/components/LeaderboardTable/index.tsx

@@ -0,0 +1 @@
+export * from "./LeaderboardTable";

website/src/components/UserTable.tsx

@@ -1,4 +1,4 @@
-import { IconButton } from "@chakra-ui/react";
+import { Card, CardBody, IconButton } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { Pencil } from "lucide-react";
 import Link from "next/link";
@@ -90,19 +90,21 @@ export const UserTable = memo(function UserTable() {
   };
 
   return (
-    <>
-      <DataTable
-        data={data?.items || []}
-        columns={columns}
-        caption="Users"
-        onNextClick={toNextPage}
-        onPreviousClick={toPreviousPage}
-        disableNext={!data?.next}
-        disablePrevious={!data?.prev}
-        filterValues={filterValues}
-        onFilterChange={handleFilterValuesChange}
-      ></DataTable>
-      {error && "Unable to load users."}
-    </>
+    <Card>
+      <CardBody>
+        <DataTable
+          data={data?.items || []}
+          columns={columns}
+          caption="Users"
+          onNextClick={toNextPage}
+          onPreviousClick={toPreviousPage}
+          disableNext={!data?.next}
+          disablePrevious={!data?.prev}
+          filterValues={filterValues}
+          onFilterChange={handleFilterValuesChange}
+        ></DataTable>
+        {error && "Unable to load users."}
+      </CardBody>
+    </Card>
   );
 });