refactor(admin): refactor admin roles and users management
This commit is contained in:
82
src/app/(modules)/roles/components/RoleColumns.tsx
Normal file
82
src/app/(modules)/roles/components/RoleColumns.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import { Edit, RotateCcw } from 'lucide-react';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { Role } from '@/types';
|
||||
|
||||
interface UseRoleColumnsParams {
|
||||
onEdit: (role: Role) => void;
|
||||
onToggleStatus: (role: Role) => void;
|
||||
isStatusPending: boolean;
|
||||
}
|
||||
|
||||
export function useRoleColumns({
|
||||
onEdit,
|
||||
onToggleStatus,
|
||||
isStatusPending,
|
||||
}: UseRoleColumnsParams): ColumnDef<Role>[] {
|
||||
return useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Name',
|
||||
cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: 'display_name',
|
||||
header: 'Display Name',
|
||||
},
|
||||
{
|
||||
accessorKey: 'description',
|
||||
header: 'Description',
|
||||
cell: ({ row }) => (
|
||||
<span className="block max-w-sm truncate text-muted-foreground">
|
||||
{row.original.description || '-'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'user_count',
|
||||
header: 'Users',
|
||||
cell: ({ row }) => row.original.user_count ?? 0,
|
||||
},
|
||||
{
|
||||
accessorKey: 'effective_status',
|
||||
header: 'Status',
|
||||
cell: ({ row }) => (
|
||||
<Badge variant={row.original.effective_status ? 'default' : 'secondary'}>
|
||||
{row.original.effective_status ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: () => <div className="text-right">Actions</div>,
|
||||
cell: ({ row }) => {
|
||||
const role = row.original;
|
||||
return (
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => onEdit(role)}>
|
||||
<Edit className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={isStatusPending}
|
||||
onClick={() => onToggleStatus(role)}
|
||||
>
|
||||
<RotateCcw className="mr-2 size-4" />
|
||||
{role.effective_status ? 'Deactivate' : 'Activate'}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
[isStatusPending, onEdit, onToggleStatus],
|
||||
);
|
||||
}
|
||||
47
src/app/(modules)/roles/components/RoleFilters.tsx
Normal file
47
src/app/(modules)/roles/components/RoleFilters.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
'use client';
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
|
||||
import type { StatusFilter } from '../hooks/useRoleFilters';
|
||||
|
||||
interface RoleFiltersProps {
|
||||
searchTerm: string;
|
||||
statusFilter: StatusFilter;
|
||||
onSearchChange: (value: string) => void;
|
||||
onStatusChange: (value: StatusFilter) => void;
|
||||
}
|
||||
|
||||
export function RoleFilters({
|
||||
searchTerm,
|
||||
statusFilter,
|
||||
onSearchChange,
|
||||
onStatusChange,
|
||||
}: RoleFiltersProps) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<Input
|
||||
value={searchTerm}
|
||||
onChange={(event) => onSearchChange(event.target.value)}
|
||||
placeholder="Search roles"
|
||||
className="md:max-w-sm"
|
||||
/>
|
||||
<Select value={statusFilter} onValueChange={(value) => onStatusChange(value as StatusFilter)}>
|
||||
<SelectTrigger className="md:w-44">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All status</SelectItem>
|
||||
<SelectItem value="active">Active</SelectItem>
|
||||
<SelectItem value="inactive">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
125
src/app/(modules)/roles/components/RoleSheet.tsx
Normal file
125
src/app/(modules)/roles/components/RoleSheet.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
47
src/app/(modules)/roles/components/RoleTable.tsx
Normal file
47
src/app/(modules)/roles/components/RoleTable.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
'use client';
|
||||
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
import { DataTable } from '@/components/data-table';
|
||||
import type { Role } from '@/types';
|
||||
|
||||
interface RoleTableProps {
|
||||
columns: ColumnDef<Role>[];
|
||||
roles: Role[];
|
||||
isLoading: boolean;
|
||||
toolbar: ReactNode;
|
||||
skip: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
onPageChange: (skip: number) => void;
|
||||
}
|
||||
|
||||
export function RoleTable({
|
||||
columns,
|
||||
roles,
|
||||
isLoading,
|
||||
toolbar,
|
||||
skip,
|
||||
limit,
|
||||
total,
|
||||
onPageChange,
|
||||
}: RoleTableProps) {
|
||||
return (
|
||||
<DataTable
|
||||
title="Roles"
|
||||
columns={columns}
|
||||
data={roles}
|
||||
isLoading={isLoading}
|
||||
toolbar={toolbar}
|
||||
emptyTitle="No roles found."
|
||||
pagination={{
|
||||
skip,
|
||||
limit,
|
||||
totalItems: total,
|
||||
onPageChange,
|
||||
onLimitChange: () => undefined,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
44
src/app/(modules)/roles/hooks/useRoleFilters.ts
Normal file
44
src/app/(modules)/roles/hooks/useRoleFilters.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export type StatusFilter = 'all' | 'active' | 'inactive';
|
||||
|
||||
const SEARCH_DEBOUNCE_MS = 400;
|
||||
|
||||
export function useRoleFilters() {
|
||||
const [skip, setSkip] = useState(0);
|
||||
const [limit] = useState(10);
|
||||
const [searchTerm, setSearchTermValue] = useState('');
|
||||
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilterValue] = useState<StatusFilter>('all');
|
||||
|
||||
useEffect(() => {
|
||||
const timer = window.setTimeout(() => {
|
||||
setDebouncedSearchTerm(searchTerm.trim());
|
||||
}, SEARCH_DEBOUNCE_MS);
|
||||
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [searchTerm]);
|
||||
|
||||
const setSearchTerm = (value: string) => {
|
||||
setSearchTermValue(value);
|
||||
setSkip(0);
|
||||
};
|
||||
|
||||
const setStatusFilter = (value: StatusFilter) => {
|
||||
setStatusFilterValue(value);
|
||||
setSkip(0);
|
||||
};
|
||||
|
||||
return {
|
||||
skip,
|
||||
setSkip,
|
||||
limit,
|
||||
searchTerm,
|
||||
debouncedSearchTerm,
|
||||
setSearchTerm,
|
||||
statusFilter,
|
||||
setStatusFilter,
|
||||
};
|
||||
}
|
||||
120
src/app/(modules)/roles/hooks/useRoleForm.ts
Normal file
120
src/app/(modules)/roles/hooks/useRoleForm.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
collectDefaultPermissionIds,
|
||||
collectPermissionIdsByKeys,
|
||||
} from '@/components/permission-tree';
|
||||
import { roleService } from '@/services/api';
|
||||
import type { PermissionTreeItem, Role } from '@/types';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useCallback } from 'react';
|
||||
import { useForm, useWatch } from 'react-hook-form';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { roleKeys } from '../queries/roleKeys';
|
||||
|
||||
export interface RoleFormValues {
|
||||
id?: number;
|
||||
name: string;
|
||||
display_name: string;
|
||||
description: string;
|
||||
permission_ids: number[];
|
||||
}
|
||||
|
||||
const defaultValues: RoleFormValues = {
|
||||
name: '',
|
||||
display_name: '',
|
||||
description: '',
|
||||
permission_ids: [],
|
||||
};
|
||||
|
||||
export function useRoleForm({
|
||||
organizationId,
|
||||
permissionTree,
|
||||
onSaved,
|
||||
}: {
|
||||
organizationId: number | null;
|
||||
permissionTree: PermissionTreeItem[];
|
||||
onSaved: () => void;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const {
|
||||
control,
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
setValue,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<RoleFormValues>({
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const permissionIds = useWatch({ control, name: 'permission_ids' }) || [];
|
||||
const roleId = useWatch({ control, name: 'id' });
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: (values: RoleFormValues) =>
|
||||
roleService.saveRole({
|
||||
id: values.id,
|
||||
name: values.name.trim(),
|
||||
display_name: values.display_name.trim(),
|
||||
description: values.description.trim(),
|
||||
organization_id: organizationId,
|
||||
permission_ids: values.permission_ids,
|
||||
is_default: false,
|
||||
}),
|
||||
onSuccess: (_data, values) => {
|
||||
toast.success(values.id ? 'Role updated' : 'Role created');
|
||||
reset(defaultValues);
|
||||
onSaved();
|
||||
queryClient.invalidateQueries({ queryKey: roleKeys.all });
|
||||
},
|
||||
onError: (_error, values) => {
|
||||
toast.error(values.id ? 'Failed to update role' : 'Failed to create role');
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit((values) => {
|
||||
if (values.permission_ids.length === 0) {
|
||||
toast.error('Select at least one permission');
|
||||
return;
|
||||
}
|
||||
saveMutation.mutate(values);
|
||||
});
|
||||
|
||||
const openCreate = useCallback(() => {
|
||||
reset({
|
||||
...defaultValues,
|
||||
permission_ids: collectDefaultPermissionIds(permissionTree),
|
||||
});
|
||||
}, [permissionTree, reset]);
|
||||
|
||||
const openEdit = useCallback(
|
||||
(role: Role) => {
|
||||
reset({
|
||||
id: role.id,
|
||||
name: role.name || '',
|
||||
display_name: role.display_name || '',
|
||||
description: role.description || '',
|
||||
permission_ids: collectPermissionIdsByKeys(permissionTree, role.permissions || []),
|
||||
});
|
||||
},
|
||||
[permissionTree, reset],
|
||||
);
|
||||
|
||||
const setPermissionIds = useCallback(
|
||||
(ids: number[]) => setValue('permission_ids', ids, { shouldDirty: true, shouldValidate: true }),
|
||||
[setValue],
|
||||
);
|
||||
|
||||
return {
|
||||
register,
|
||||
onSubmit,
|
||||
openCreate,
|
||||
openEdit,
|
||||
setPermissionIds,
|
||||
permissionIds,
|
||||
roleId,
|
||||
isSaving: isSubmitting || saveMutation.isPending,
|
||||
};
|
||||
}
|
||||
77
src/app/(modules)/roles/hooks/useRoleQueries.ts
Normal file
77
src/app/(modules)/roles/hooks/useRoleQueries.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useMemo } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { mapPermissionTree } from '@/components/permission-tree';
|
||||
import { permissionService, roleService } from '@/services/api';
|
||||
import type { Role, RoleListParams } from '@/types';
|
||||
|
||||
import { roleKeys } from '../queries/roleKeys';
|
||||
import type { StatusFilter } from './useRoleFilters';
|
||||
|
||||
interface UseRolesQueryParams {
|
||||
skip: number;
|
||||
limit: number;
|
||||
searchTerm: string;
|
||||
statusFilter: StatusFilter;
|
||||
}
|
||||
|
||||
function buildRoleListParams({
|
||||
skip,
|
||||
limit,
|
||||
searchTerm,
|
||||
statusFilter,
|
||||
}: UseRolesQueryParams): RoleListParams {
|
||||
return {
|
||||
skip,
|
||||
limit,
|
||||
search_term: searchTerm || undefined,
|
||||
effective_status: statusFilter === 'all' ? undefined : statusFilter === 'active',
|
||||
sort_by: 'created_at',
|
||||
sort_order: 'desc',
|
||||
};
|
||||
}
|
||||
|
||||
export function useRolesQuery(params: UseRolesQueryParams) {
|
||||
const { skip, limit, searchTerm, statusFilter } = params;
|
||||
const listParams = useMemo(
|
||||
() => buildRoleListParams({ skip, limit, searchTerm, statusFilter }),
|
||||
[limit, searchTerm, skip, statusFilter],
|
||||
);
|
||||
|
||||
return useQuery({
|
||||
queryKey: roleKeys.list(listParams),
|
||||
queryFn: () => roleService.getRoles(listParams),
|
||||
});
|
||||
}
|
||||
|
||||
export function usePermissionsTreeQuery() {
|
||||
const permissionsQuery = useQuery({
|
||||
queryKey: ['permissions', 'tree'],
|
||||
queryFn: permissionService.getPermissions,
|
||||
});
|
||||
const permissionTree = useMemo(
|
||||
() => mapPermissionTree(permissionsQuery.data?.tree || []),
|
||||
[permissionsQuery.data?.tree],
|
||||
);
|
||||
|
||||
return {
|
||||
...permissionsQuery,
|
||||
permissionTree,
|
||||
};
|
||||
}
|
||||
|
||||
export function useRoleStatusMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (role: Role) => roleService.updateRoleStatus(role.id, !role.effective_status),
|
||||
onSuccess: () => {
|
||||
toast.success('Role status updated');
|
||||
queryClient.invalidateQueries({ queryKey: roleKeys.all });
|
||||
},
|
||||
onError: () => toast.error('Failed to update role status'),
|
||||
});
|
||||
}
|
||||
@@ -1,388 +1,100 @@
|
||||
'use client';
|
||||
|
||||
import { FormEvent, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Edit, Loader2, Plus, RotateCcw, ShieldCheck } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { Plus, ShieldCheck } from 'lucide-react';
|
||||
|
||||
import { DataTable } from '@/components/data-table';
|
||||
import { PageHeader } from '@/components/page-header';
|
||||
import { PoweredBy } from '@/components/powered-by';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from '@/components/ui/sheet';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { permissionService, roleService } from '@/services/api';
|
||||
import { useAppStore } from '@/store/app.store';
|
||||
import type { PermissionTreeItem, PermissionTreeNode, Role } from '@/types';
|
||||
import type { Role } from '@/types';
|
||||
|
||||
type StatusFilter = 'all' | 'active' | 'inactive';
|
||||
|
||||
interface RoleFormState {
|
||||
id?: number;
|
||||
name: string;
|
||||
display_name: string;
|
||||
description: string;
|
||||
permission_ids: number[];
|
||||
}
|
||||
|
||||
const emptyRoleForm: RoleFormState = {
|
||||
name: '',
|
||||
display_name: '',
|
||||
description: '',
|
||||
permission_ids: [],
|
||||
};
|
||||
|
||||
function mapPermissionTree(nodes: PermissionTreeNode[]): PermissionTreeItem[] {
|
||||
return nodes.map((node) => ({
|
||||
id: node.id,
|
||||
key: node.slug || node.name,
|
||||
label: node.display_name || node.name,
|
||||
description: node.description,
|
||||
type: node.type,
|
||||
isGrantedByDefault: Boolean(node.is_granted_by_default),
|
||||
children: mapPermissionTree(node.children || []),
|
||||
}));
|
||||
}
|
||||
|
||||
function collectNodeIds(node: PermissionTreeItem): number[] {
|
||||
return [node.id, ...node.children.flatMap(collectNodeIds)];
|
||||
}
|
||||
|
||||
function collectDefaultIds(nodes: PermissionTreeItem[]): number[] {
|
||||
return nodes.flatMap((node) => [
|
||||
...(node.isGrantedByDefault ? [node.id] : []),
|
||||
...collectDefaultIds(node.children),
|
||||
]);
|
||||
}
|
||||
|
||||
function collectIdsByKeys(nodes: PermissionTreeItem[], keys: string[]): number[] {
|
||||
const selectedKeys = new Set(keys);
|
||||
return nodes.flatMap((node) => [
|
||||
...(selectedKeys.has(node.key) ? [node.id] : []),
|
||||
...collectIdsByKeys(node.children, keys),
|
||||
]);
|
||||
}
|
||||
|
||||
function PermissionCheckbox({
|
||||
checked,
|
||||
indeterminate,
|
||||
onChange,
|
||||
}: {
|
||||
checked: boolean;
|
||||
indeterminate: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
}) {
|
||||
const ref = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (ref.current) {
|
||||
ref.current.indeterminate = indeterminate;
|
||||
}
|
||||
}, [indeterminate]);
|
||||
|
||||
return (
|
||||
<input
|
||||
ref={ref}
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={(event) => onChange(event.target.checked)}
|
||||
className="size-4 rounded border-border accent-primary"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function PermissionTreeNodeRow({
|
||||
node,
|
||||
selectedIds,
|
||||
onToggle,
|
||||
}: {
|
||||
node: PermissionTreeItem;
|
||||
selectedIds: Set<number>;
|
||||
onToggle: (node: PermissionTreeItem, checked: boolean) => void;
|
||||
}) {
|
||||
const nodeIds = collectNodeIds(node);
|
||||
const checkedCount = nodeIds.filter((id) => selectedIds.has(id)).length;
|
||||
const checked = checkedCount === nodeIds.length;
|
||||
const indeterminate = checkedCount > 0 && !checked;
|
||||
|
||||
return (
|
||||
<li className="space-y-2">
|
||||
<div className="flex items-start gap-3 rounded-md border border-border/60 bg-background px-3 py-2">
|
||||
<PermissionCheckbox
|
||||
checked={checked}
|
||||
indeterminate={indeterminate}
|
||||
onChange={(isChecked) => onToggle(node, isChecked)}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm font-medium">{node.label}</span>
|
||||
<Badge variant="outline" className="text-[10px] capitalize">
|
||||
{node.type}
|
||||
</Badge>
|
||||
</div>
|
||||
{node.description ? (
|
||||
<p className="mt-1 text-xs text-muted-foreground">{node.description}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
{node.children.length > 0 ? (
|
||||
<ul className="ml-5 space-y-2 border-l border-border/70 pl-3">
|
||||
{node.children.map((child) => (
|
||||
<PermissionTreeNodeRow
|
||||
key={child.id}
|
||||
node={child}
|
||||
selectedIds={selectedIds}
|
||||
onToggle={onToggle}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function PermissionTree({
|
||||
items,
|
||||
selectedIds,
|
||||
onChange,
|
||||
}: {
|
||||
items: PermissionTreeItem[];
|
||||
selectedIds: number[];
|
||||
onChange: (ids: number[]) => void;
|
||||
}) {
|
||||
const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
|
||||
|
||||
const handleToggle = (node: PermissionTreeItem, checked: boolean) => {
|
||||
const next = new Set(selectedSet);
|
||||
collectNodeIds(node).forEach((id) => {
|
||||
if (checked) {
|
||||
next.add(id);
|
||||
} else {
|
||||
next.delete(id);
|
||||
}
|
||||
});
|
||||
onChange(Array.from(next));
|
||||
};
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<div className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
|
||||
No permissions available.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="space-y-2">
|
||||
{items.map((node) => (
|
||||
<PermissionTreeNodeRow
|
||||
key={node.id}
|
||||
node={node}
|
||||
selectedIds={selectedSet}
|
||||
onToggle={handleToggle}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
import { useRoleColumns } from './components/RoleColumns';
|
||||
import { RoleFilters } from './components/RoleFilters';
|
||||
import { RoleSheet } from './components/RoleSheet';
|
||||
import { RoleTable } from './components/RoleTable';
|
||||
import { useRoleFilters } from './hooks/useRoleFilters';
|
||||
import { useRoleForm } from './hooks/useRoleForm';
|
||||
import {
|
||||
usePermissionsTreeQuery,
|
||||
useRolesQuery,
|
||||
useRoleStatusMutation,
|
||||
} from './hooks/useRoleQueries';
|
||||
|
||||
export default function RolesPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const organizationId = useAppStore((state) => state.user?.organization_id ?? null);
|
||||
const [skip, setSkip] = useState(0);
|
||||
const [limit] = useState(10);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
|
||||
const [isSheetOpen, setIsSheetOpen] = useState(false);
|
||||
const [form, setForm] = useState<RoleFormState>(emptyRoleForm);
|
||||
const {
|
||||
skip,
|
||||
setSkip,
|
||||
limit,
|
||||
searchTerm,
|
||||
debouncedSearchTerm,
|
||||
setSearchTerm,
|
||||
statusFilter,
|
||||
setStatusFilter,
|
||||
} = useRoleFilters();
|
||||
|
||||
const rolesQuery = useQuery({
|
||||
queryKey: ['roles', { skip, limit, searchTerm, statusFilter }],
|
||||
queryFn: () =>
|
||||
roleService.getRoles({
|
||||
skip,
|
||||
limit,
|
||||
search_term: searchTerm || undefined,
|
||||
effective_status:
|
||||
statusFilter === 'all' ? undefined : statusFilter === 'active' ? true : false,
|
||||
sort_by: 'created_at',
|
||||
sort_order: 'desc',
|
||||
}),
|
||||
const rolesQuery = useRolesQuery({
|
||||
skip,
|
||||
limit,
|
||||
searchTerm: debouncedSearchTerm,
|
||||
statusFilter,
|
||||
});
|
||||
|
||||
const permissionsQuery = useQuery({
|
||||
queryKey: ['permissions', 'tree'],
|
||||
queryFn: permissionService.getPermissions,
|
||||
const permissionsQuery = usePermissionsTreeQuery();
|
||||
const roleForm = useRoleForm({
|
||||
organizationId,
|
||||
permissionTree: permissionsQuery.permissionTree,
|
||||
onSaved: () => setIsSheetOpen(false),
|
||||
});
|
||||
const {
|
||||
openCreate: prepareCreateRole,
|
||||
openEdit: prepareEditRole,
|
||||
register,
|
||||
onSubmit,
|
||||
roleId,
|
||||
permissionIds,
|
||||
setPermissionIds,
|
||||
isSaving,
|
||||
} = roleForm;
|
||||
const statusMutation = useRoleStatusMutation();
|
||||
const { mutate: updateRoleStatus, isPending: isStatusPending } = statusMutation;
|
||||
|
||||
const permissionTree = useMemo(
|
||||
() => mapPermissionTree(permissionsQuery.data?.tree || []),
|
||||
[permissionsQuery.data?.tree],
|
||||
const openCreate = useCallback(() => {
|
||||
prepareCreateRole();
|
||||
setIsSheetOpen(true);
|
||||
}, [prepareCreateRole]);
|
||||
|
||||
const openEdit = useCallback(
|
||||
(role: Role) => {
|
||||
prepareEditRole(role);
|
||||
setIsSheetOpen(true);
|
||||
},
|
||||
[prepareEditRole],
|
||||
);
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
roleService.saveRole({
|
||||
id: form.id,
|
||||
name: form.name.trim(),
|
||||
display_name: form.display_name.trim(),
|
||||
description: form.description.trim(),
|
||||
organization_id: organizationId,
|
||||
permission_ids: form.permission_ids,
|
||||
is_default: false,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
toast.success(form.id ? 'Role updated' : 'Role created');
|
||||
setIsSheetOpen(false);
|
||||
setForm(emptyRoleForm);
|
||||
queryClient.invalidateQueries({ queryKey: ['roles'] });
|
||||
const toggleStatus = useCallback(
|
||||
(role: Role) => {
|
||||
updateRoleStatus(role);
|
||||
},
|
||||
onError: () => toast.error(form.id ? 'Failed to update role' : 'Failed to create role'),
|
||||
[updateRoleStatus],
|
||||
);
|
||||
|
||||
const columns = useRoleColumns({
|
||||
onEdit: openEdit,
|
||||
onToggleStatus: toggleStatus,
|
||||
isStatusPending,
|
||||
});
|
||||
|
||||
const statusMutation = useMutation({
|
||||
mutationFn: (role: Role) => roleService.updateRoleStatus(role.id, !role.effective_status),
|
||||
onSuccess: () => {
|
||||
toast.success('Role status updated');
|
||||
queryClient.invalidateQueries({ queryKey: ['roles'] });
|
||||
},
|
||||
onError: () => toast.error('Failed to update role status'),
|
||||
});
|
||||
|
||||
const openCreate = () => {
|
||||
setForm({ ...emptyRoleForm, permission_ids: collectDefaultIds(permissionTree) });
|
||||
setIsSheetOpen(true);
|
||||
};
|
||||
|
||||
const openEdit = (role: Role) => {
|
||||
setForm({
|
||||
id: role.id,
|
||||
name: role.name || '',
|
||||
display_name: role.display_name || '',
|
||||
description: role.description || '',
|
||||
permission_ids: collectIdsByKeys(permissionTree, role.permissions || []),
|
||||
});
|
||||
setIsSheetOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
if (!form.name.trim() || !form.display_name.trim()) {
|
||||
toast.error('Role name and display name are required');
|
||||
return;
|
||||
}
|
||||
if (form.permission_ids.length === 0) {
|
||||
toast.error('Select at least one permission');
|
||||
return;
|
||||
}
|
||||
saveMutation.mutate();
|
||||
};
|
||||
|
||||
const total = rolesQuery.data?.total ?? 0;
|
||||
const roles = rolesQuery.data?.items ?? [];
|
||||
const columns: ColumnDef<Role>[] = [
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Name',
|
||||
cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: 'display_name',
|
||||
header: 'Display Name',
|
||||
},
|
||||
{
|
||||
accessorKey: 'description',
|
||||
header: 'Description',
|
||||
cell: ({ row }) => (
|
||||
<span className="block max-w-sm truncate text-muted-foreground">
|
||||
{row.original.description || '-'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'user_count',
|
||||
header: 'Users',
|
||||
cell: ({ row }) => row.original.user_count ?? 0,
|
||||
},
|
||||
{
|
||||
accessorKey: 'effective_status',
|
||||
header: 'Status',
|
||||
cell: ({ row }) => (
|
||||
<Badge variant={row.original.effective_status ? 'default' : 'secondary'}>
|
||||
{row.original.effective_status ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: () => <div className="text-right">Actions</div>,
|
||||
cell: ({ row }) => {
|
||||
const role = row.original;
|
||||
return (
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => openEdit(role)}>
|
||||
<Edit className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={statusMutation.isPending}
|
||||
onClick={() => statusMutation.mutate(role)}
|
||||
>
|
||||
<RotateCcw className="mr-2 size-4" />
|
||||
{role.effective_status ? 'Deactivate' : 'Activate'}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
const toolbar = (
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<Input
|
||||
value={searchTerm}
|
||||
onChange={(event) => {
|
||||
setSearchTerm(event.target.value);
|
||||
setSkip(0);
|
||||
}}
|
||||
placeholder="Search roles"
|
||||
className="md:max-w-sm"
|
||||
/>
|
||||
<Select
|
||||
value={statusFilter}
|
||||
onValueChange={(value) => {
|
||||
setStatusFilter(value as StatusFilter);
|
||||
setSkip(0);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="md:w-44">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All status</SelectItem>
|
||||
<SelectItem value="active">Active</SelectItem>
|
||||
<SelectItem value="inactive">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<RoleFilters
|
||||
searchTerm={searchTerm}
|
||||
statusFilter={statusFilter}
|
||||
onSearchChange={setSearchTerm}
|
||||
onStatusChange={setStatusFilter}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -400,109 +112,32 @@ export default function RolesPage() {
|
||||
}
|
||||
/>
|
||||
|
||||
<DataTable
|
||||
title="Roles"
|
||||
<RoleTable
|
||||
columns={columns}
|
||||
data={roles}
|
||||
roles={roles}
|
||||
isLoading={rolesQuery.isLoading}
|
||||
toolbar={toolbar}
|
||||
emptyTitle="No roles found."
|
||||
pagination={{
|
||||
skip,
|
||||
limit,
|
||||
totalItems: total,
|
||||
onPageChange: setSkip,
|
||||
onLimitChange: () => undefined,
|
||||
}}
|
||||
skip={skip}
|
||||
limit={limit}
|
||||
total={total}
|
||||
onPageChange={setSkip}
|
||||
/>
|
||||
|
||||
<PoweredBy />
|
||||
</main>
|
||||
|
||||
<Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
|
||||
<SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
|
||||
<SheetHeader>
|
||||
<SheetTitle>{form.id ? 'Edit Role' : 'Create Role'}</SheetTitle>
|
||||
<SheetDescription>
|
||||
Assign the role details and permission access for this organization.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
<form onSubmit={handleSubmit} 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"
|
||||
value={form.name}
|
||||
onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="role-display-name">Display Name</Label>
|
||||
<Input
|
||||
id="role-display-name"
|
||||
value={form.display_name}
|
||||
onChange={(event) =>
|
||||
setForm((prev) => ({ ...prev, display_name: event.target.value }))
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="role-description">Description</Label>
|
||||
<textarea
|
||||
id="role-description"
|
||||
value={form.description}
|
||||
onChange={(event) =>
|
||||
setForm((prev) => ({ ...prev, description: event.target.value }))
|
||||
}
|
||||
className={cn(
|
||||
'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">
|
||||
{form.permission_ids.length} selected
|
||||
</span>
|
||||
</div>
|
||||
{permissionsQuery.isLoading ? (
|
||||
<div className="rounded-md border p-6 text-sm text-muted-foreground">
|
||||
Loading permissions...
|
||||
</div>
|
||||
) : (
|
||||
<PermissionTree
|
||||
items={permissionTree}
|
||||
selectedIds={form.permission_ids}
|
||||
onChange={(ids) => setForm((prev) => ({ ...prev, permission_ids: ids }))}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SheetFooter className="px-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setIsSheetOpen(false)}
|
||||
disabled={saveMutation.isPending}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={saveMutation.isPending}>
|
||||
{saveMutation.isPending ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
|
||||
{form.id ? 'Update Role' : 'Create Role'}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</form>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<RoleSheet
|
||||
open={isSheetOpen}
|
||||
onOpenChange={setIsSheetOpen}
|
||||
roleId={roleId}
|
||||
register={register}
|
||||
onSubmit={onSubmit}
|
||||
permissionTree={permissionsQuery.permissionTree}
|
||||
permissionIds={permissionIds}
|
||||
onPermissionIdsChange={setPermissionIds}
|
||||
isPermissionsLoading={permissionsQuery.isLoading}
|
||||
isSaving={isSaving}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
9
src/app/(modules)/roles/queries/roleKeys.ts
Normal file
9
src/app/(modules)/roles/queries/roleKeys.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import type { RoleListParams } from '@/types';
|
||||
|
||||
export const roleKeys = {
|
||||
all: ['roles'] as const,
|
||||
lists: () => [...roleKeys.all, 'list'] as const,
|
||||
list: (params: RoleListParams) => [...roleKeys.lists(), params] as const,
|
||||
details: () => [...roleKeys.all, 'detail'] as const,
|
||||
detail: (id: number) => [...roleKeys.details(), id] as const,
|
||||
};
|
||||
Reference in New Issue
Block a user