improvements

src/features/activities/components/activities-table.tsx

@@ -8,9 +8,10 @@ import {
   Container,
   Divider,
   UnstyledButton,
-  Badge,
   Select,
   Pagination,
+  Code,
+  Alert,
 } from "@mantine/core";
 import {
   MagnifyingGlassIcon,
@@ -18,15 +19,19 @@ import {
   CaretDownIcon,
   CheckIcon,
   XIcon,
+  ChecksIcon,
 } from "@phosphor-icons/react";
 import { Activity, ActivitySearchParams } from "../types";
 import { useActivities } from "../queries";
+import Sheet from "@/components/sheet/sheet";
+import { useSheet } from "@/hooks/use-sheet";
 
 interface ActivityListItemProps {
   activity: Activity;
+  onClick: () => void;
 }
 
-const ActivityListItem = memo(({ activity }: ActivityListItemProps) => {
+const ActivityListItem = memo(({ activity, onClick }: ActivityListItemProps) => {
   const playerName = typeof activity.player === "object" && activity.player
     ? `${activity.player.first_name} ${activity.player.last_name}`
     : "System";
@@ -37,7 +42,22 @@ const ActivityListItem = memo(({ activity }: ActivityListItemProps) => {
   };
 
   return (
-    <Box p="md">
+    <UnstyledButton
+      w="100%"
+      p="md"
+      onClick={onClick}
+      style={{
+        borderRadius: 0,
+        transition: "background-color 0.15s ease",
+      }}
+      styles={{
+        root: {
+          '&:hover': {
+            backgroundColor: 'var(--mantine-color-gray-0)',
+          },
+        },
+      }}
+    >
       <Group justify="space-between" align="flex-start" w="100%">
         <Stack gap={4} flex={1}>
           <Group gap="xs">
@@ -68,59 +88,183 @@ const ActivityListItem = memo(({ activity }: ActivityListItemProps) => {
           )}
         </Stack>
       </Group>
-    </Box>
+    </UnstyledButton>
   );
 });
 
-const ActivitiesResults = ({ searchParams, page, setPage }: any) => {
+ActivityListItem.displayName = "ActivityListItem";
+
+interface ActivityDetailsSheetProps {
+  activity: Activity | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ActivityDetailsSheet = memo(({ activity, isOpen, onClose }: ActivityDetailsSheetProps) => {
+  if (!activity) return null;
+
+  const playerName = typeof activity.player === "object" && activity.player
+    ? `${activity.player.first_name} ${activity.player.last_name}`
+    : "System";
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleString();
+  };
+
+  return (
+    <Sheet title="Activity Details" opened={isOpen} onChange={onClose}>
+      <Stack gap="md" p="md">
+        <Stack gap="xs">
+          <Text size="xs" fw={700} c="dimmed">
+            Function Name
+          </Text>
+          <Text size="sm">{activity.name}</Text>
+        </Stack>
+
+        <Stack gap="xs">
+          <Text size="xs" fw={700} c="dimmed">
+            Status
+          </Text>
+          <Group gap="xs">
+            {activity.success ? (
+              <>
+                <CheckIcon size={16} color="var(--mantine-color-green-6)" />
+                <Text size="sm" c="green">
+                  Success
+                </Text>
+              </>
+            ) : (
+              <>
+                <XIcon size={16} color="var(--mantine-color-red-6)" />
+                <Text size="sm" c="red">
+                  Failed
+                </Text>
+              </>
+            )}
+          </Group>
+        </Stack>
+
+        <Stack gap="xs">
+          <Text size="xs" fw={700} c="dimmed">
+            Player
+          </Text>
+          <Text size="sm">{playerName}</Text>
+        </Stack>
+
+        <Stack gap="xs">
+          <Text size="xs" fw={700} c="dimmed">
+            Duration
+          </Text>
+          <Text size="sm">{activity.duration}ms</Text>
+        </Stack>
+
+        <Stack gap="xs">
+          <Text size="xs" fw={700} c="dimmed">
+            Created
+          </Text>
+          <Text size="sm">{formatDate(activity.created)}</Text>
+        </Stack>
+
+        {activity.user_agent && (
+          <Stack gap="xs">
+            <Text size="xs" fw={700} c="dimmed">
+              User Agent
+            </Text>
+            <Text size="xs" style={{ wordBreak: "break-word" }}>
+              {activity.user_agent}
+            </Text>
+          </Stack>
+        )}
+
+        {activity.error && (
+          <Stack gap="xs">
+            <Text size="xs" fw={700} c="dimmed">
+              Error Message
+            </Text>
+            <Alert color="red" variant="light">
+              <Text size="sm" style={{ wordBreak: "break-word" }}>
+                {activity.error}
+              </Text>
+            </Alert>
+          </Stack>
+        )}
+
+        {activity.arguments && (
+          <Stack gap="xs">
+            <Text size="xs" fw={700} c="dimmed">
+              Arguments
+            </Text>
+            <Code block style={{ fontSize: "11px" }}>
+              {JSON.stringify(activity.arguments, null, 2)}
+            </Code>
+          </Stack>
+        )}
+      </Stack>
+    </Sheet>
+  );
+});
+
+ActivityDetailsSheet.displayName = "ActivityDetailsSheet";
+
+const ActivitiesResults = ({ searchParams, page, setPage, onActivityClick }: any) => {
   const { data: result } = useActivities(searchParams);
   return (
     <>
       <Stack gap={0}>
-          {result.items.map((activity: Activity, index: number) => (
-            <Box key={activity.id}>
-              <ActivityListItem activity={activity} />
-              {index < result.items.length - 1 && <Divider />}
-            </Box>
-          ))}
-        </Stack>
-
-        {result.items.length === 0 && (
-          <Text ta="center" c="dimmed" py="xl">
-            No activities found
-          </Text>
-        )}
-
-        {result.totalPages > 1 && (
-          <Group justify="center" py="md">
-            <Pagination
-              total={result.totalPages}
-              value={page}
-              onChange={setPage}
-              size="sm"
+        {result.items.map((activity: Activity, index: number) => (
+          <Box key={activity.id}>
+            <ActivityListItem
+              activity={activity}
+              onClick={() => onActivityClick(activity)}
             />
-          </Group>
-        )}
+            {index < result.items.length - 1 && <Divider />}
+          </Box>
+        ))}
+      </Stack>
+
+      {result.items.length === 0 && (
+        <Text ta="center" c="dimmed" py="xl">
+          No activities found
+        </Text>
+      )}
+
+      {result.totalPages > 1 && (
+        <Group justify="center" py="md">
+          <Pagination
+            total={result.totalPages}
+            value={page}
+            onChange={setPage}
+            size="sm"
+          />
+        </Group>
+      )}
     </>
-  )
+  );
 };
 
 export const ActivitiesTable = () => {
   const [page, setPage] = useState(1);
-  const [perPage, setPerPage] = useState(100);
   const [search, setSearch] = useState("");
   const [successFilter, setSuccessFilter] = useState<string | null>(null);
   const [sortBy, setSortBy] = useState("-created");
+  const [selectedActivity, setSelectedActivity] = useState<Activity | null>(null);
+
+  const {
+    isOpen: detailsOpened,
+    open: openDetails,
+    close: closeDetails,
+  } = useSheet();
 
   const searchParams: ActivitySearchParams = useMemo(
     () => ({
       page,
-      perPage,
+      perPage: 100,
       name: search || undefined,
       success: successFilter === "success" ? true : successFilter === "failure" ? false : undefined,
       sortBy,
     }),
-    [page, perPage, search, successFilter, sortBy]
+    [page, search, successFilter, sortBy]
   );
 
   const { data: result } = useActivities(searchParams);
@@ -139,6 +283,16 @@ export const ActivitiesTable = () => {
     return null;
   };
 
+  const handleActivityClick = (activity: Activity) => {
+    setSelectedActivity(activity);
+    openDetails();
+  };
+
+  const handleCloseDetails = () => {
+    setSelectedActivity(null);
+    closeDetails();
+  };
+
   return (
     <Container size="100%" px={0}>
       <Stack gap="xs">
@@ -214,9 +368,19 @@ export const ActivitiesTable = () => {
           </Group>
         </Group>
 
-        <ActivitiesResults searchParams={searchParams} page={page} setPage={setPage} />
-
+        <ActivitiesResults
+          searchParams={searchParams}
+          page={page}
+          setPage={setPage}
+          onActivityClick={handleActivityClick}
+        />
       </Stack>
+
+      <ActivityDetailsSheet
+        activity={selectedActivity}
+        isOpen={detailsOpened}
+        onClose={handleCloseDetails}
+      />
     </Container>
   );
 };