Tidy up admin structure

admin/src/features/scope/components/Rules.tsx

@@ -0,0 +1,31 @@
+import { Alert } from "@mui/lab";
+import { CircularProgress, List } from "@mui/material";
+import React from "react";
+
+import RuleListItem from "./RuleListItem";
+
+import { useScopeQuery } from "lib/graphql/generated";
+
+function Rules(): JSX.Element {
+  const { loading, error, data } = useScopeQuery();
+
+  return (
+    <div>
+      {loading && <CircularProgress />}
+      {error && <Alert severity="error">Error fetching scope: {error.message}</Alert>}
+      {data && data.scope.length > 0 && (
+        <List
+          sx={{
+            bgcolor: "background.paper",
+          }}
+        >
+          {data.scope.map((rule, index) => (
+            <RuleListItem key={index} rule={rule} scope={data.scope} index={index} />
+          ))}
+        </List>
+      )}
+    </div>
+  );
+}
+
+export default Rules;