upd: dashboard admin

Deskripsi:
- databse
- seeder
- list user role

NO Issues

src/components/PermissionRole.tsx

@@ -0,0 +1,57 @@
+import { groupPermissions } from "@/lib/groupPermission";
+import { Button, Stack, Text } from "@mantine/core";
+import { useState } from "react";
+
+interface Node {
+   label: string;
+   children: any;
+   actions: string[];
+}
+
+function RenderNode({ node }: { node: Node }) {
+   const sub = Object.values(node.children || {});
+
+   return (
+      <Stack pl="md" gap={6}>
+         {/* Title */}
+         <Text fw={600}>- {node.label}</Text>
+
+         {/* Children */}
+         {sub.map((child: any, i) => (
+            <RenderNode key={i} node={child} />
+         ))}
+      </Stack>
+   );
+}
+
+export default function PermissionRole({ permissions }: { permissions: string[] }) {
+   const [showAll, setShowAll] = useState(false);
+   if (!permissions?.length) return <Text c="dimmed">-</Text>;
+
+   const groups = groupPermissions(permissions);
+   const rootNodes = Object.values(groups);
+
+   return (
+      <Stack gap="lg">
+         {
+            showAll ?
+               rootNodes.map((node: any, idx) => (
+                  <RenderNode key={idx} node={node} />
+               ))
+               :
+               rootNodes.slice(0, 2).map((node: any, idx) => (
+                  <RenderNode key={idx} node={node} />
+               ))
+         }
+         <Button
+            variant="subtle"
+            size="xs"
+            onClick={() => setShowAll(!showAll)}
+            w="fit-content"
+            ml="md"
+         >
+            {showAll ? "View less" : "View more"}
+         </Button>
+      </Stack>
+   );
+}