refactor(admin): refactor admin roles and users management
This commit is contained in:
109
src/app/(modules)/users/components/UserColumns.tsx
Normal file
109
src/app/(modules)/users/components/UserColumns.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
'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 { AdministrationUser } from '@/types';
|
||||
|
||||
function formatDate(value?: string | null) {
|
||||
if (!value) return '-';
|
||||
return new Intl.DateTimeFormat('en-IN', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
interface UseUserColumnsParams {
|
||||
onEdit: (user: AdministrationUser) => void;
|
||||
onToggleStatus: (user: AdministrationUser) => void;
|
||||
pendingUserId?: number;
|
||||
}
|
||||
|
||||
export function useUserColumns({
|
||||
onEdit,
|
||||
onToggleStatus,
|
||||
pendingUserId,
|
||||
}: UseUserColumnsParams): ColumnDef<AdministrationUser>[] {
|
||||
return useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorKey: 'first_name',
|
||||
header: 'Name',
|
||||
cell: ({ row }) => (
|
||||
<span className="font-medium">
|
||||
{[row.original.first_name, row.original.last_name].filter(Boolean).join(' ') ||
|
||||
row.original.username}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'email',
|
||||
header: 'Email',
|
||||
},
|
||||
{
|
||||
accessorKey: 'phone_number',
|
||||
header: 'Phone',
|
||||
cell: ({ row }) => row.original.phone_number || '-',
|
||||
},
|
||||
{
|
||||
accessorKey: 'roles',
|
||||
header: 'Roles',
|
||||
cell: ({ row }) => (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{row.original.roles?.length ? (
|
||||
row.original.roles.map((role) => (
|
||||
<Badge key={role.id ?? role.name} variant="outline">
|
||||
{role.display_name || role.name}
|
||||
</Badge>
|
||||
))
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: 'Created',
|
||||
cell: ({ row }) => formatDate(row.original.created_at),
|
||||
},
|
||||
{
|
||||
accessorKey: 'effective_status',
|
||||
header: 'Status',
|
||||
cell: ({ row }) => (
|
||||
<Badge variant={row.original.effective_status === 'active' ? 'default' : 'secondary'}>
|
||||
{row.original.effective_status}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: () => <div className="text-right">Actions</div>,
|
||||
cell: ({ row }) => {
|
||||
const user = row.original;
|
||||
return (
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => onEdit(user)}>
|
||||
<Edit className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={pendingUserId === user.id || user.effective_status === 'pending'}
|
||||
onClick={() => onToggleStatus(user)}
|
||||
>
|
||||
<RotateCcw className="mr-2 size-4" />
|
||||
{user.effective_status === 'active' ? 'Deactivate' : 'Activate'}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
[onEdit, onToggleStatus, pendingUserId],
|
||||
);
|
||||
}
|
||||
47
src/app/(modules)/users/components/UserFilters.tsx
Normal file
47
src/app/(modules)/users/components/UserFilters.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/useUserFilters';
|
||||
|
||||
interface UserFiltersProps {
|
||||
searchTerm: string;
|
||||
statusFilter: StatusFilter;
|
||||
onSearchChange: (value: string) => void;
|
||||
onStatusChange: (value: StatusFilter) => void;
|
||||
}
|
||||
|
||||
export function UserFilters({
|
||||
searchTerm,
|
||||
statusFilter,
|
||||
onSearchChange,
|
||||
onStatusChange,
|
||||
}: UserFiltersProps) {
|
||||
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 users"
|
||||
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>
|
||||
<SelectItem value="pending">Pending</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
142
src/app/(modules)/users/components/UserSheet.tsx
Normal file
142
src/app/(modules)/users/components/UserSheet.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
'use client';
|
||||
|
||||
import type { ComponentProps } from 'react';
|
||||
import type { UseFormRegister } from 'react-hook-form';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import type { Role } from '@/types';
|
||||
import type { UserFormValues } from '../hooks/useUserForm';
|
||||
|
||||
interface UserSheetProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
userId?: number;
|
||||
register: UseFormRegister<UserFormValues>;
|
||||
onSubmit: ComponentProps<'form'>['onSubmit'];
|
||||
roleId: string;
|
||||
onRoleChange: (roleId: string) => void;
|
||||
roles: Role[];
|
||||
isRolesLoading: boolean;
|
||||
isSaving: boolean;
|
||||
}
|
||||
|
||||
export function UserSheet({
|
||||
open,
|
||||
onOpenChange,
|
||||
userId,
|
||||
register,
|
||||
onSubmit,
|
||||
roleId,
|
||||
onRoleChange,
|
||||
roles,
|
||||
isRolesLoading,
|
||||
isSaving,
|
||||
}: UserSheetProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{userId ? 'Edit User' : 'Create User'}</DialogTitle>
|
||||
<DialogDescription>Assign user details and a role.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<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="first-name">First Name</Label>
|
||||
<Input
|
||||
id="first-name"
|
||||
placeholder="Enter first name"
|
||||
{...register('first_name', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="last-name">Last Name</Label>
|
||||
<Input
|
||||
id="last-name"
|
||||
placeholder="Enter last name"
|
||||
{...register('last_name', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="name@example.com"
|
||||
{...register('email', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone-number">Phone Number</Label>
|
||||
<Input
|
||||
id="phone-number"
|
||||
placeholder="Enter phone number"
|
||||
{...register('phone_number')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Role</Label>
|
||||
<Select value={roleId} onValueChange={onRoleChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={isRolesLoading ? 'Loading roles...' : 'Select role'} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{roles.map((role) => (
|
||||
<SelectItem key={role.id} value={String(role.id)}>
|
||||
{role.display_name || role.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<input
|
||||
type="hidden"
|
||||
{...register('role_id', { required: true })}
|
||||
value={roleId}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter 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}
|
||||
{userId ? 'Update User' : 'Create User'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
28
src/app/(modules)/users/components/UserStats.tsx
Normal file
28
src/app/(modules)/users/components/UserStats.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
'use client';
|
||||
|
||||
interface UserStatsProps {
|
||||
total: number;
|
||||
activeCount: number;
|
||||
inactiveCount: number;
|
||||
pendingCount: number;
|
||||
}
|
||||
|
||||
export function UserStats({ total, activeCount, inactiveCount, pendingCount }: UserStatsProps) {
|
||||
const stats = [
|
||||
{ label: 'Total', value: total },
|
||||
{ label: 'Active', value: activeCount },
|
||||
{ label: 'Inactive', value: inactiveCount },
|
||||
{ label: 'Pending', value: pendingCount },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid gap-3 md:grid-cols-4">
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.label} className="rounded-lg border bg-card p-4">
|
||||
<p className="text-xs text-muted-foreground">{stat.label}</p>
|
||||
<p className="mt-1 text-2xl font-semibold">{stat.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
47
src/app/(modules)/users/components/UserTable.tsx
Normal file
47
src/app/(modules)/users/components/UserTable.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
'use client';
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
import { DataTable } from '@/components/data-table';
|
||||
import type { AdministrationUser } from '@/types';
|
||||
|
||||
interface UserTableProps {
|
||||
columns: ColumnDef<AdministrationUser>[];
|
||||
users: AdministrationUser[];
|
||||
isLoading: boolean;
|
||||
toolbar: ReactNode;
|
||||
skip: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
onPageChange: (skip: number) => void;
|
||||
}
|
||||
|
||||
export function UserTable({
|
||||
columns,
|
||||
users,
|
||||
isLoading,
|
||||
toolbar,
|
||||
skip,
|
||||
limit,
|
||||
total,
|
||||
onPageChange,
|
||||
}: UserTableProps) {
|
||||
return (
|
||||
<DataTable
|
||||
title="Users"
|
||||
columns={columns}
|
||||
data={users}
|
||||
isLoading={isLoading}
|
||||
toolbar={toolbar}
|
||||
emptyTitle="No users found."
|
||||
pagination={{
|
||||
skip,
|
||||
limit,
|
||||
totalItems: total,
|
||||
onPageChange,
|
||||
onLimitChange: () => undefined,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
36
src/app/(modules)/users/hooks/useUserFilters.ts
Normal file
36
src/app/(modules)/users/hooks/useUserFilters.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
'use client';
|
||||
|
||||
import { useDebounce } from '@/hooks/useDebounce';
|
||||
import type { UserStatus } from '@/types';
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
export type StatusFilter = 'all' | UserStatus;
|
||||
|
||||
export function useUserFilters() {
|
||||
const [skip, setSkip] = useState(0);
|
||||
const [limit] = useState(10);
|
||||
const [searchTerm, setSearchTermValue] = useState('');
|
||||
const [statusFilter, setStatusFilterValue] = useState<StatusFilter>('all');
|
||||
const debouncedSearchTerm = useDebounce(searchTerm.trim(), 400);
|
||||
|
||||
const setSearchTerm = useCallback((value: string) => {
|
||||
setSearchTermValue(value);
|
||||
setSkip(0);
|
||||
}, []);
|
||||
|
||||
const setStatusFilter = useCallback((value: StatusFilter) => {
|
||||
setStatusFilterValue(value);
|
||||
setSkip(0);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
skip,
|
||||
setSkip,
|
||||
limit,
|
||||
searchTerm,
|
||||
debouncedSearchTerm,
|
||||
setSearchTerm,
|
||||
statusFilter,
|
||||
setStatusFilter,
|
||||
};
|
||||
}
|
||||
99
src/app/(modules)/users/hooks/useUserForm.ts
Normal file
99
src/app/(modules)/users/hooks/useUserForm.ts
Normal file
@@ -0,0 +1,99 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { useForm, useWatch } from 'react-hook-form';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import type { AdministrationUser } from '@/types';
|
||||
import { useSaveUserMutation } from './useUserMutations';
|
||||
|
||||
export interface UserFormValues {
|
||||
id?: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
email: string;
|
||||
phone_number: string;
|
||||
role_id: string;
|
||||
}
|
||||
|
||||
const defaultValues: UserFormValues = {
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
phone_number: '',
|
||||
role_id: '',
|
||||
};
|
||||
|
||||
export function useUserForm({ onSaved }: { onSaved: () => void }) {
|
||||
const {
|
||||
control,
|
||||
register,
|
||||
handleSubmit: submitForm,
|
||||
reset,
|
||||
setValue,
|
||||
formState: { isSubmitting, errors },
|
||||
} = useForm<UserFormValues>({
|
||||
defaultValues,
|
||||
});
|
||||
const saveMutation = useSaveUserMutation({
|
||||
onSaved: () => {
|
||||
reset(defaultValues);
|
||||
onSaved();
|
||||
},
|
||||
});
|
||||
|
||||
const userId = useWatch({ control, name: 'id' });
|
||||
const roleId = useWatch({ control, name: 'role_id' }) || '';
|
||||
|
||||
const handleSubmit = submitForm(
|
||||
(values) => saveMutation.mutate(values),
|
||||
(formErrors) => {
|
||||
if (formErrors.first_name || formErrors.last_name || formErrors.email) {
|
||||
toast.error('First name, last name and email are required');
|
||||
return;
|
||||
}
|
||||
if (formErrors.role_id) {
|
||||
toast.error('Select a role');
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const openCreate = useCallback(() => {
|
||||
reset(defaultValues);
|
||||
}, [reset]);
|
||||
|
||||
const openEdit = useCallback(
|
||||
(user: AdministrationUser) => {
|
||||
const selectedRoleId = user.role_ids?.[0] ?? user.roles?.[0]?.id;
|
||||
reset({
|
||||
id: user.id,
|
||||
first_name: user.first_name || '',
|
||||
last_name: user.last_name || '',
|
||||
email: user.email || '',
|
||||
phone_number: user.phone_number || '',
|
||||
role_id: selectedRoleId ? String(selectedRoleId) : '',
|
||||
});
|
||||
},
|
||||
[reset],
|
||||
);
|
||||
|
||||
const setRoleId = useCallback(
|
||||
(value: string) => {
|
||||
setValue('role_id', value, { shouldDirty: true, shouldValidate: true });
|
||||
},
|
||||
[setValue],
|
||||
);
|
||||
|
||||
return {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
openCreate,
|
||||
openEdit,
|
||||
setRoleId,
|
||||
roleId,
|
||||
userId,
|
||||
errors,
|
||||
isSaving: isSubmitting || saveMutation.isPending,
|
||||
};
|
||||
}
|
||||
55
src/app/(modules)/users/hooks/useUserMutations.ts
Normal file
55
src/app/(modules)/users/hooks/useUserMutations.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { userService } from '@/services/api';
|
||||
import type { AdministrationUser, UserStatus } from '@/types';
|
||||
import { userKeys } from '../queries/userKeys';
|
||||
import type { UserFormValues } from './useUserForm';
|
||||
|
||||
function getNextStatus(status: UserStatus): 'active' | 'inactive' {
|
||||
return status === 'active' ? 'inactive' : 'active';
|
||||
}
|
||||
|
||||
export function useSaveUserMutation({ onSaved }: { onSaved: () => void }) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (values: UserFormValues) =>
|
||||
userService.saveUser({
|
||||
id: values.id,
|
||||
email: values.email.trim(),
|
||||
first_name: values.first_name.trim(),
|
||||
last_name: values.last_name.trim(),
|
||||
phone_number: values.phone_number.trim() || undefined,
|
||||
roles: [Number(values.role_id)],
|
||||
}),
|
||||
onSuccess: (_data, values) => {
|
||||
toast.success(values.id ? 'User updated' : 'User created');
|
||||
onSaved();
|
||||
queryClient.invalidateQueries({ queryKey: userKeys.all });
|
||||
},
|
||||
onError: (_error, values) => {
|
||||
toast.error(values.id ? 'Failed to update user' : 'Failed to create user');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUserStatusMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const mutation = useMutation({
|
||||
mutationFn: (user: AdministrationUser) =>
|
||||
userService.updateUserStatus(user.id, getNextStatus(user.effective_status)),
|
||||
onSuccess: () => {
|
||||
toast.success('User status updated');
|
||||
queryClient.invalidateQueries({ queryKey: userKeys.all });
|
||||
},
|
||||
onError: () => toast.error('Failed to update user status'),
|
||||
});
|
||||
|
||||
return {
|
||||
...mutation,
|
||||
pendingUserId: mutation.isPending ? mutation.variables?.id : undefined,
|
||||
};
|
||||
}
|
||||
64
src/app/(modules)/users/hooks/useUserQueries.ts
Normal file
64
src/app/(modules)/users/hooks/useUserQueries.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { roleService, userService } from '@/services/api';
|
||||
import type { RoleListParams, UserListParams } from '@/types';
|
||||
import { roleKeys } from '../../roles/queries/roleKeys';
|
||||
import { userKeys } from '../queries/userKeys';
|
||||
import type { StatusFilter } from './useUserFilters';
|
||||
|
||||
interface UseUsersQueryParams {
|
||||
skip: number;
|
||||
limit: number;
|
||||
searchTerm: string;
|
||||
statusFilter: StatusFilter;
|
||||
}
|
||||
|
||||
const roleLookupParams: RoleListParams = {
|
||||
skip: 0,
|
||||
limit: 100,
|
||||
effective_status: true,
|
||||
sort_by: 'display_name',
|
||||
sort_order: 'asc',
|
||||
};
|
||||
|
||||
function buildUserListParams({
|
||||
skip,
|
||||
limit,
|
||||
searchTerm,
|
||||
statusFilter,
|
||||
}: UseUsersQueryParams): UserListParams {
|
||||
return {
|
||||
skip,
|
||||
limit,
|
||||
search_term: searchTerm || undefined,
|
||||
effective_status: statusFilter === 'all' ? undefined : statusFilter,
|
||||
sort_by: 'created_at',
|
||||
sort_order: 'desc',
|
||||
};
|
||||
}
|
||||
|
||||
export function useUsersQuery(params: UseUsersQueryParams) {
|
||||
const { skip, limit, searchTerm, statusFilter } = params;
|
||||
const listParams = useMemo(
|
||||
() => buildUserListParams({ skip, limit, searchTerm, statusFilter }),
|
||||
[limit, searchTerm, skip, statusFilter],
|
||||
);
|
||||
|
||||
return useQuery({
|
||||
queryKey: userKeys.list(listParams),
|
||||
queryFn: () => userService.getUsers(listParams),
|
||||
});
|
||||
}
|
||||
|
||||
export function useRoleLookupQuery(enabled: boolean) {
|
||||
return useQuery({
|
||||
queryKey: roleKeys.list(roleLookupParams),
|
||||
queryFn: () => roleService.getRoles(roleLookupParams),
|
||||
enabled,
|
||||
staleTime: 5 * 60 * 1000,
|
||||
gcTime: 30 * 60 * 1000,
|
||||
});
|
||||
}
|
||||
@@ -1,270 +1,98 @@
|
||||
'use client';
|
||||
|
||||
import { FormEvent, useMemo, useState } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Edit, Loader2, Plus, RotateCcw, Users } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { Plus, Users } 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 { roleService, userService } from '@/services/api';
|
||||
import type { AdministrationUser, UserStatus } from '@/types';
|
||||
import type { AdministrationUser } from '@/types';
|
||||
|
||||
type StatusFilter = 'all' | UserStatus;
|
||||
|
||||
interface UserFormState {
|
||||
id?: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
email: string;
|
||||
phone_number: string;
|
||||
role_id: string;
|
||||
}
|
||||
|
||||
const emptyUserForm: UserFormState = {
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
phone_number: '',
|
||||
role_id: '',
|
||||
};
|
||||
|
||||
function formatDate(value?: string | null) {
|
||||
if (!value) return '-';
|
||||
return new Intl.DateTimeFormat('en-IN', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
function getNextStatus(status: UserStatus): 'active' | 'inactive' {
|
||||
return status === 'active' ? 'inactive' : 'active';
|
||||
}
|
||||
import { useUserColumns } from './components/UserColumns';
|
||||
import { UserFilters } from './components/UserFilters';
|
||||
import { UserSheet } from './components/UserSheet';
|
||||
import { UserStats } from './components/UserStats';
|
||||
import { UserTable } from './components/UserTable';
|
||||
import { useUserFilters } from './hooks/useUserFilters';
|
||||
import { useUserForm } from './hooks/useUserForm';
|
||||
import { useUserStatusMutation } from './hooks/useUserMutations';
|
||||
import { useRoleLookupQuery, useUsersQuery } from './hooks/useUserQueries';
|
||||
|
||||
export default function UsersPage() {
|
||||
const queryClient = useQueryClient();
|
||||
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<UserFormState>(emptyUserForm);
|
||||
const {
|
||||
skip,
|
||||
setSkip,
|
||||
limit,
|
||||
searchTerm,
|
||||
debouncedSearchTerm,
|
||||
setSearchTerm,
|
||||
statusFilter,
|
||||
setStatusFilter,
|
||||
} = useUserFilters();
|
||||
|
||||
const usersQuery = useQuery({
|
||||
queryKey: ['users', { skip, limit, searchTerm, statusFilter }],
|
||||
queryFn: () =>
|
||||
userService.getUsers({
|
||||
skip,
|
||||
limit,
|
||||
search_term: searchTerm || undefined,
|
||||
effective_status: statusFilter === 'all' ? undefined : statusFilter,
|
||||
sort_by: 'created_at',
|
||||
sort_order: 'desc',
|
||||
}),
|
||||
const usersQuery = useUsersQuery({
|
||||
skip,
|
||||
limit,
|
||||
searchTerm: debouncedSearchTerm,
|
||||
statusFilter,
|
||||
});
|
||||
|
||||
const rolesQuery = useQuery({
|
||||
queryKey: ['roles', 'lookup'],
|
||||
queryFn: () =>
|
||||
roleService.getRoles({
|
||||
skip: 0,
|
||||
limit: 100,
|
||||
effective_status: true,
|
||||
sort_by: 'display_name',
|
||||
sort_order: 'asc',
|
||||
}),
|
||||
const rolesQuery = useRoleLookupQuery(isSheetOpen);
|
||||
const userForm = useUserForm({
|
||||
onSaved: () => setIsSheetOpen(false),
|
||||
});
|
||||
const {
|
||||
openCreate: prepareCreateUser,
|
||||
openEdit: prepareEditUser,
|
||||
register,
|
||||
handleSubmit,
|
||||
userId,
|
||||
roleId,
|
||||
setRoleId,
|
||||
isSaving,
|
||||
} = userForm;
|
||||
const statusMutation = useUserStatusMutation();
|
||||
const { mutate: updateUserStatus, pendingUserId } = statusMutation;
|
||||
|
||||
const roleOptions = useMemo(() => rolesQuery.data?.items || [], [rolesQuery.data?.items]);
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
userService.saveUser({
|
||||
id: form.id,
|
||||
email: form.email.trim(),
|
||||
first_name: form.first_name.trim(),
|
||||
last_name: form.last_name.trim(),
|
||||
phone_number: form.phone_number.trim() || undefined,
|
||||
roles: [Number(form.role_id)],
|
||||
}),
|
||||
onSuccess: () => {
|
||||
toast.success(form.id ? 'User updated' : 'User created');
|
||||
setIsSheetOpen(false);
|
||||
setForm(emptyUserForm);
|
||||
queryClient.invalidateQueries({ queryKey: ['users'] });
|
||||
},
|
||||
onError: () => toast.error(form.id ? 'Failed to update user' : 'Failed to create user'),
|
||||
});
|
||||
|
||||
const statusMutation = useMutation({
|
||||
mutationFn: (user: AdministrationUser) =>
|
||||
userService.updateUserStatus(user.id, getNextStatus(user.effective_status)),
|
||||
onSuccess: () => {
|
||||
toast.success('User status updated');
|
||||
queryClient.invalidateQueries({ queryKey: ['users'] });
|
||||
},
|
||||
onError: () => toast.error('Failed to update user status'),
|
||||
});
|
||||
|
||||
const openCreate = () => {
|
||||
setForm(emptyUserForm);
|
||||
const openCreate = useCallback(() => {
|
||||
prepareCreateUser();
|
||||
setIsSheetOpen(true);
|
||||
};
|
||||
}, [prepareCreateUser]);
|
||||
|
||||
const openEdit = (user: AdministrationUser) => {
|
||||
const roleId = user.role_ids?.[0] ?? user.roles?.[0]?.id;
|
||||
setForm({
|
||||
id: user.id,
|
||||
first_name: user.first_name || '',
|
||||
last_name: user.last_name || '',
|
||||
email: user.email || '',
|
||||
phone_number: user.phone_number || '',
|
||||
role_id: roleId ? String(roleId) : '',
|
||||
});
|
||||
setIsSheetOpen(true);
|
||||
};
|
||||
const openEdit = useCallback(
|
||||
(user: AdministrationUser) => {
|
||||
prepareEditUser(user);
|
||||
setIsSheetOpen(true);
|
||||
},
|
||||
[prepareEditUser],
|
||||
);
|
||||
|
||||
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
if (!form.first_name.trim() || !form.last_name.trim() || !form.email.trim()) {
|
||||
toast.error('First name, last name and email are required');
|
||||
return;
|
||||
}
|
||||
if (!form.role_id) {
|
||||
toast.error('Select a role');
|
||||
return;
|
||||
}
|
||||
saveMutation.mutate();
|
||||
};
|
||||
const toggleStatus = useCallback(
|
||||
(user: AdministrationUser) => {
|
||||
updateUserStatus(user);
|
||||
},
|
||||
[updateUserStatus],
|
||||
);
|
||||
|
||||
const columns = useUserColumns({
|
||||
onEdit: openEdit,
|
||||
onToggleStatus: toggleStatus,
|
||||
pendingUserId,
|
||||
});
|
||||
|
||||
const users = usersQuery.data?.items ?? [];
|
||||
const total = usersQuery.data?.total ?? 0;
|
||||
const columns: ColumnDef<AdministrationUser>[] = [
|
||||
{
|
||||
accessorKey: 'first_name',
|
||||
header: 'Name',
|
||||
cell: ({ row }) => (
|
||||
<span className="font-medium">
|
||||
{[row.original.first_name, row.original.last_name].filter(Boolean).join(' ') ||
|
||||
row.original.username}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'email',
|
||||
header: 'Email',
|
||||
},
|
||||
{
|
||||
accessorKey: 'phone_number',
|
||||
header: 'Phone',
|
||||
cell: ({ row }) => row.original.phone_number || '-',
|
||||
},
|
||||
{
|
||||
accessorKey: 'roles',
|
||||
header: 'Roles',
|
||||
cell: ({ row }) => (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{row.original.roles?.length ? (
|
||||
row.original.roles.map((role) => (
|
||||
<Badge key={role.id ?? role.name} variant="outline">
|
||||
{role.display_name || role.name}
|
||||
</Badge>
|
||||
))
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: 'Created',
|
||||
cell: ({ row }) => formatDate(row.original.created_at),
|
||||
},
|
||||
{
|
||||
accessorKey: 'effective_status',
|
||||
header: 'Status',
|
||||
cell: ({ row }) => (
|
||||
<Badge variant={row.original.effective_status === 'active' ? 'default' : 'secondary'}>
|
||||
{row.original.effective_status}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: () => <div className="text-right">Actions</div>,
|
||||
cell: ({ row }) => {
|
||||
const user = row.original;
|
||||
return (
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => openEdit(user)}>
|
||||
<Edit className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={statusMutation.isPending || user.effective_status === 'pending'}
|
||||
onClick={() => statusMutation.mutate(user)}
|
||||
>
|
||||
<RotateCcw className="mr-2 size-4" />
|
||||
{user.effective_status === 'active' ? '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 users"
|
||||
className="md:max-w-sm"
|
||||
const users = usersQuery.data?.items ?? [];
|
||||
const roleOptions = rolesQuery.data?.items ?? [];
|
||||
const toolbar = useMemo(
|
||||
() => (
|
||||
<UserFilters
|
||||
searchTerm={searchTerm}
|
||||
statusFilter={statusFilter}
|
||||
onSearchChange={setSearchTerm}
|
||||
onStatusChange={setStatusFilter}
|
||||
/>
|
||||
<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>
|
||||
<SelectItem value="pending">Pending</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
),
|
||||
[searchTerm, setSearchTerm, setStatusFilter, statusFilter],
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -282,134 +110,39 @@ export default function UsersPage() {
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-4">
|
||||
<div className="rounded-lg border bg-card p-4">
|
||||
<p className="text-xs text-muted-foreground">Total</p>
|
||||
<p className="mt-1 text-2xl font-semibold">{total}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border bg-card p-4">
|
||||
<p className="text-xs text-muted-foreground">Active</p>
|
||||
<p className="mt-1 text-2xl font-semibold">{usersQuery.data?.active_count ?? 0}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border bg-card p-4">
|
||||
<p className="text-xs text-muted-foreground">Inactive</p>
|
||||
<p className="mt-1 text-2xl font-semibold">{usersQuery.data?.inactive_count ?? 0}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border bg-card p-4">
|
||||
<p className="text-xs text-muted-foreground">Pending</p>
|
||||
<p className="mt-1 text-2xl font-semibold">{usersQuery.data?.pending_count ?? 0}</p>
|
||||
</div>
|
||||
</div>
|
||||
<UserStats
|
||||
total={total}
|
||||
activeCount={usersQuery.data?.active_count ?? 0}
|
||||
inactiveCount={usersQuery.data?.inactive_count ?? 0}
|
||||
pendingCount={usersQuery.data?.pending_count ?? 0}
|
||||
/>
|
||||
|
||||
<DataTable
|
||||
title="Users"
|
||||
<UserTable
|
||||
columns={columns}
|
||||
data={users}
|
||||
users={users}
|
||||
isLoading={usersQuery.isLoading}
|
||||
toolbar={toolbar}
|
||||
emptyTitle="No users 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-xl">
|
||||
<SheetHeader>
|
||||
<SheetTitle>{form.id ? 'Edit User' : 'Create User'}</SheetTitle>
|
||||
<SheetDescription>Assign user details and a role.</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="first-name">First Name</Label>
|
||||
<Input
|
||||
id="first-name"
|
||||
value={form.first_name}
|
||||
onChange={(event) =>
|
||||
setForm((prev) => ({ ...prev, first_name: event.target.value }))
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="last-name">Last Name</Label>
|
||||
<Input
|
||||
id="last-name"
|
||||
value={form.last_name}
|
||||
onChange={(event) =>
|
||||
setForm((prev) => ({ ...prev, last_name: event.target.value }))
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={form.email}
|
||||
onChange={(event) => setForm((prev) => ({ ...prev, email: event.target.value }))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone-number">Phone Number</Label>
|
||||
<Input
|
||||
id="phone-number"
|
||||
value={form.phone_number}
|
||||
onChange={(event) =>
|
||||
setForm((prev) => ({ ...prev, phone_number: event.target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Role</Label>
|
||||
<Select
|
||||
value={form.role_id}
|
||||
onValueChange={(value) => setForm((prev) => ({ ...prev, role_id: value }))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={rolesQuery.isLoading ? 'Loading roles...' : 'Select role'} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{roleOptions.map((role) => (
|
||||
<SelectItem key={role.id} value={String(role.id)}>
|
||||
{role.display_name || role.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</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 User' : 'Create User'}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</form>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<UserSheet
|
||||
open={isSheetOpen}
|
||||
onOpenChange={setIsSheetOpen}
|
||||
userId={userId}
|
||||
register={register}
|
||||
onSubmit={handleSubmit}
|
||||
roleId={roleId}
|
||||
onRoleChange={setRoleId}
|
||||
roles={roleOptions}
|
||||
isRolesLoading={rolesQuery.isLoading}
|
||||
isSaving={isSaving}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
10
src/app/(modules)/users/queries/userKeys.ts
Normal file
10
src/app/(modules)/users/queries/userKeys.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import type { UserListParams } from '@/types';
|
||||
|
||||
export const userKeys = {
|
||||
all: ['users'] as const,
|
||||
lists: () => [...userKeys.all, 'list'] as const,
|
||||
list: (filters: UserListParams) => [...userKeys.lists(), filters] as const,
|
||||
details: () => [...userKeys.all, 'detail'] as const,
|
||||
detail: (id: number) => [...userKeys.details(), id] as const,
|
||||
stats: () => [...userKeys.all, 'stats'] as const,
|
||||
};
|
||||
Reference in New Issue
Block a user