feat: roles & groups page

web/src/pages/Admin/RolesGroups/index.tsx

@@ -0,0 +1,66 @@
+import { useEffect, type FC } from "react";
+import Breadcrumbs from "@/components/ui/breadcrumbs";
+import { getRolesApi } from "@/api/admin/roles";
+
+interface DisplayRole {
+  name: string;
+  description: string;
+}
+
+interface IPermissionGroupProps {
+  scope: string;
+  roles?: DisplayRole[] | null | undefined;
+}
+
+const RolesGroup: FC<IPermissionGroupProps> = ({ scope, roles }) => {
+  return (
+    <div className="border dark:border-gray-800 border-gray-300 p-4 rounded mb-4">
+      <h2 className="dark:text-gray-300 text-gray-800 text-lg font-semibold">
+        {scope}
+      </h2>
+
+      {(roles?.length ?? 0) > 0 && (
+        <ol className="grid gap-4 gap-y-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 text-gray-800 dark:text-gray-300 font-medium">
+          {roles!.map(({ name, description }) => (
+            <li className="before:w-2 before:h-2 before:block before:translate-y-2 before:bg-gray-400 dark:before:bg-gray-700 before:rounded-xs flex flex-row items-start gap-2">
+              <div className="flex flex-col gap-1">
+                <label>{name}</label>
+                <p className="text-xs text-gray-400 dark:text-gray-500">
+                  {description}
+                </p>
+              </div>
+            </li>
+          ))}
+        </ol>
+      )}
+    </div>
+  );
+};
+
+const AdminRolesGroupsPage: FC = () => {
+  useEffect(() => {
+    getRolesApi().then((res) => console.log("roles:", res));
+  }, []);
+
+  return (
+    <div className="relative flex flex-col items-stretch w-full">
+      <div className="p-4">
+        <Breadcrumbs
+          className="pb-2"
+          items={[
+            {
+              href: "/admin",
+              label: "Admin",
+            },
+            {
+              label: "Roles & Groups",
+            },
+          ]}
+        />
+      </div>
+      <div className="px-7"></div>
+    </div>
+  );
+};
+
+export default AdminRolesGroupsPage;