upd: form surat

Deskripsi:
- api detail categori list
- form awal buat surat

No Issues

src/components/PermissionRole.tsx

@@ -3,65 +3,66 @@ import { Anchor, Flex, Stack, Text } from "@mantine/core";
 import { useState } from "react";
 
 interface Node {
-   label: string;
-   children: any;
-   actions: string[];
+  label: string;
+  children: any;
+  actions: string[];
 }
 
 function RenderNode({ node }: { node: Node }) {
-   const sub = Object.values(node.children || {});
+  const sub = Object.values(node.children || {});
 
-   return (
-      <Stack pl="md" gap={6}>
-         {/* Title */}
-         <Text size="sm">- {node.label}</Text>
+  return (
+    <Stack pl="md" gap={6}>
+      {/* Title */}
+      <Text size="sm">- {node.label}</Text>
 
-         {/* Children */}
-         {sub.map((child: any, i) => (
-            <RenderNode key={i} node={child} />
-         ))}
-      </Stack>
-   );
+      {/* Children */}
+      {sub.map((child: any, i) => (
+        <RenderNode key={i} node={child} />
+      ))}
+    </Stack>
+  );
 }
 
 function RenderNode2({ node }: { node: Node }) {
-   const sub = Object.values(node.children || {});
+  const sub = Object.values(node.children || {});
 
-   return (
-      <Flex direction={"row"} wrap={'wrap'} gap={6}>
-         {/* Title */}
-         <Text size="sm">{node.label},</Text>
+  return (
+    <Flex direction={"row"} wrap={"wrap"} gap={6}>
+      {/* Title */}
+      <Text size="sm">{node.label},</Text>
 
-         {/* Children */}
-         {sub.map((child: any, i) => (
-            <RenderNode2 key={i} node={child} />
-         ))}
-      </Flex>
-   );
+      {/* Children */}
+      {sub.map((child: any, i) => (
+        <RenderNode2 key={i} node={child} />
+      ))}
+    </Flex>
+  );
 }
 
-export default function PermissionRole({ permissions }: { permissions: string[] }) {
-   const [showAll, setShowAll] = useState(false);
-   if (!permissions?.length) return <Text c="dimmed">-</Text>;
+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);
+  const groups = groupPermissions(permissions);
+  const rootNodes = Object.values(groups);
 
-   return (
-      <Stack gap="sm">
-         {
-            showAll ?
-               rootNodes.map((node: any, idx) => (
-                  <RenderNode key={idx} node={node} />
-               ))
-               :
-               rootNodes.slice(0, 2).map((node: any, idx) => (
-                  <RenderNode2 key={idx} node={node} />
-               ))
-         }
-         <Anchor size="xs" onClick={() => setShowAll(!showAll)} >
-            {showAll ? "View less" : "View more"}
-         </Anchor>
-      </Stack>
-   );
+  return (
+    <Stack gap="sm">
+      {showAll
+        ? rootNodes.map((node: any, idx) => (
+            <RenderNode key={idx} node={node} />
+          ))
+        : rootNodes
+            .slice(0, 2)
+            .map((node: any, idx) => <RenderNode2 key={idx} node={node} />)}
+      <Anchor size="xs" onClick={() => setShowAll(!showAll)}>
+        {showAll ? "View less" : "View more"}
+      </Anchor>
+    </Stack>
+  );
 }