refactor(admin): refactor admin roles and users management

src/app/(modules)/roles/components/RoleSheet.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+import type { UseFormRegister } from 'react-hook-form';
+import { Loader2 } from 'lucide-react';
+
+import { PermissionTree } from '@/components/permission-tree';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import type { PermissionTreeItem } from '@/types';
+
+import type { RoleFormValues } from '../hooks/useRoleForm';
+
+interface RoleSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  roleId?: number;
+  register: UseFormRegister<RoleFormValues>;
+  onSubmit: ComponentProps<'form'>['onSubmit'];
+  permissionTree: PermissionTreeItem[];
+  permissionIds: number[];
+  onPermissionIdsChange: (ids: number[]) => void;
+  isPermissionsLoading: boolean;
+  isSaving: boolean;
+}
+
+export function RoleSheet({
+  open,
+  onOpenChange,
+  roleId,
+  register,
+  onSubmit,
+  permissionTree,
+  permissionIds,
+  onPermissionIdsChange,
+  isPermissionsLoading,
+  isSaving,
+}: RoleSheetProps) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+        <SheetHeader>
+          <SheetTitle>{roleId ? 'Edit Role' : 'Create Role'}</SheetTitle>
+          <SheetDescription>
+            Assign the role details and permission access for this organization.
+          </SheetDescription>
+        </SheetHeader>
+        <form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="role-name">Role Name</Label>
+              <Input
+                id="role-name"
+                placeholder="Enter role name"
+                {...register('name', { required: true })}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="role-display-name">Display Name</Label>
+              <Input
+                id="role-display-name"
+                placeholder="Enter display name"
+                {...register('display_name', { required: true })}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="role-description">Description</Label>
+            <textarea
+              id="role-description"
+              placeholder="Describe this role"
+              {...register('description')}
+              className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            />
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center justify-between gap-3">
+              <Label>Permissions</Label>
+              <span className="text-xs text-muted-foreground">{permissionIds.length} selected</span>
+            </div>
+            {isPermissionsLoading ? (
+              <div className="rounded-md border p-6 text-sm text-muted-foreground">
+                Loading permissions...
+              </div>
+            ) : (
+              <PermissionTree
+                items={permissionTree}
+                selectedIds={permissionIds}
+                onChange={onPermissionIdsChange}
+              />
+            )}
+          </div>
+
+          <SheetFooter className="px-0">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isSaving}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSaving}>
+              {isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
+              {roleId ? 'Update Role' : 'Create Role'}
+            </Button>
+          </SheetFooter>
+        </form>
+      </SheetContent>
+    </Sheet>
+  );
+}