refactor: refactor superadmin modules

2026-06-17 01:35:09 +05:30
parent 6f4399a048
commit 1325afdab2
40 changed files with 1709 additions and 1320 deletions
--- a/src/app/(modules)/clients/components/ClientFilters.tsx
+++ b/src/app/(modules)/clients/components/ClientFilters.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { Input } from '@/components/ui/input';
+import { TableSearchInput } from '@/components/data-table/TableSearchInput';
 import {
  Select,
  SelectContent,
@@ -25,11 +25,10 @@ export function ClientFilters({
 }: ClientFiltersProps) {
  return (
    <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-      <Input
+      <TableSearchInput
        value={searchTerm}
-        onChange={(event) => onSearchChange(event.target.value)}
+        onChange={onSearchChange}
        placeholder="Search clients"
-        className="md:max-w-sm"
      />
      <Select
        value={statusFilter}
--- a/src/app/(modules)/clients/components/ClientTable.tsx
+++ b/src/app/(modules)/clients/components/ClientTable.tsx
@@ -15,6 +15,7 @@ interface ClientTableProps {
  limit: number;
  total: number;
  onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
 }

 export function ClientTable({
@@ -26,6 +27,7 @@ export function ClientTable({
  limit,
  total,
  onPageChange,
+  onLimitChange,
 }: ClientTableProps) {
  return (
    <DataTable
@@ -40,7 +42,7 @@ export function ClientTable({
        limit,
        totalItems: total,
        onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
      }}
    />
  );
--- a/src/app/(modules)/clients/hooks/useClientFilters.ts
+++ b/src/app/(modules)/clients/hooks/useClientFilters.ts
@@ -8,7 +8,7 @@ export type ClientStatusFilter = 'all' | 'active' | 'inactive';

 export function useClientFilters() {
  const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
  const [searchTerm, setSearchTermValue] = useState('');
  const [statusFilter, setStatusFilterValue] = useState<ClientStatusFilter>('all');
  const debouncedSearchTerm = useDebounce(searchTerm.trim(), 400);
@@ -23,10 +23,16 @@ export function useClientFilters() {
    setSkip(0);
  }, []);

+  const setLimit = useCallback((value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  }, []);
+
  return {
    skip,
    setSkip,
    limit,
+    setLimit,
    searchTerm,
    debouncedSearchTerm,
    setSearchTerm,
--- a/src/app/(modules)/clients/page.tsx
+++ b/src/app/(modules)/clients/page.tsx
@@ -25,6 +25,7 @@ export default function ClientsPage() {
    skip,
    setSkip,
    limit,
+    setLimit,
    searchTerm,
    debouncedSearchTerm,
    setSearchTerm,
@@ -112,6 +113,7 @@ export default function ClientsPage() {
          limit={limit}
          total={total}
          onPageChange={setSkip}
+          onLimitChange={setLimit}
        />

        <PoweredBy />
--- a/src/app/(modules)/plans/components/PlanFilters.tsx
+++ b/src/app/(modules)/plans/components/PlanFilters.tsx
@@ -1,8 +1,6 @@
 'use client';

-import { Search } from 'lucide-react';
-
-import { Input } from '@/components/ui/input';
+import { TableSearchInput } from '@/components/data-table/TableSearchInput';
 import {
  Select,
  SelectContent,
@@ -27,15 +25,12 @@ export function PlanFilters({
 }: PlanFiltersProps) {
  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-      <div className="relative w-full sm:w-72">
-        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-        <Input
-          value={searchTerm}
-          onChange={(event) => onSearchChange(event.target.value)}
-          placeholder="Search plans"
-          className="pl-9"
-        />
-      </div>
+      <TableSearchInput
+        value={searchTerm}
+        onChange={onSearchChange}
+        placeholder="Search plans"
+        className="w-full sm:w-72"
+      />
      <Select value={statusFilter} onValueChange={(value) => onStatusChange(value as PlanStatusFilter)}>
        <SelectTrigger className="w-full sm:w-40">
          <SelectValue placeholder="Status" />
--- a/src/app/(modules)/plans/components/PlanTable.tsx
+++ b/src/app/(modules)/plans/components/PlanTable.tsx
@@ -15,6 +15,7 @@ interface PlanTableProps {
  limit: number;
  total: number;
  onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
 }

 export function PlanTable({
@@ -26,6 +27,7 @@ export function PlanTable({
  limit,
  total,
  onPageChange,
+  onLimitChange,
 }: PlanTableProps) {
  return (
    <DataTable
@@ -40,7 +42,7 @@ export function PlanTable({
        limit,
        totalItems: total,
        onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
      }}
    />
  );
--- a/src/app/(modules)/plans/hooks/usePlanFilters.ts
+++ b/src/app/(modules)/plans/hooks/usePlanFilters.ts
@@ -7,7 +7,7 @@ export type PlanStatusFilter = 'all' | 'active' | 'inactive';

 export function usePlanFilters() {
  const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<PlanStatusFilter>('all');
  const debouncedSearchTerm = useDebounce(searchTerm, 400);
@@ -22,10 +22,16 @@ export function usePlanFilters() {
    setSkip(0);
  };

+  const setLimit = (value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  };
+
  return {
    skip,
    setSkip,
    limit,
+    setLimit,
    searchTerm,
    debouncedSearchTerm,
    setSearchTerm: updateSearchTerm,
--- a/src/app/(modules)/plans/page.tsx
+++ b/src/app/(modules)/plans/page.tsx
@@ -27,6 +27,7 @@ export default function PlansPage() {
    skip,
    setSkip,
    limit,
+    setLimit,
    searchTerm,
    debouncedSearchTerm,
    setSearchTerm,
@@ -166,6 +167,7 @@ export default function PlansPage() {
          limit={limit}
          total={total}
          onPageChange={setSkip}
+          onLimitChange={setLimit}
        />

        <PoweredBy />
--- a/src/app/(modules)/roles/components/RoleFilters.tsx
+++ b/src/app/(modules)/roles/components/RoleFilters.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { Input } from '@/components/ui/input';
+import { TableSearchInput } from '@/components/data-table/TableSearchInput';
 import {
  Select,
  SelectContent,
@@ -26,11 +26,10 @@ export function RoleFilters({
 }: RoleFiltersProps) {
  return (
    <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-      <Input
+      <TableSearchInput
        value={searchTerm}
-        onChange={(event) => onSearchChange(event.target.value)}
+        onChange={onSearchChange}
        placeholder="Search roles"
-        className="md:max-w-sm"
      />
      <Select value={statusFilter} onValueChange={(value) => onStatusChange(value as StatusFilter)}>
        <SelectTrigger className="md:w-44">
--- a/src/app/(modules)/roles/components/RoleSheet.tsx
+++ b/src/app/(modules)/roles/components/RoleSheet.tsx
@@ -10,6 +10,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
  Sheet,
+  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
@@ -47,76 +48,79 @@ export function RoleSheet({
 }: RoleSheetProps) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
-        <SheetHeader>
+      <SheetContent
+        side="right"
+        className="flex h-full flex-col gap-0 p-0  sm:max-w-3xl lg:max-w-2xl"
+      >
+        <SheetHeader className="shrink-0 border-b px-6 py-4">
          <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...
+        <form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
+          <div className="flex-1 space-y-5 overflow-y-auto px-6 py-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>
-            ) : (
-              <PermissionTree
-                items={permissionTree}
-                selectedIds={permissionIds}
-                onChange={onPermissionIdsChange}
+              <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>
          </div>

-          <SheetFooter className="px-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-              disabled={isSaving}
-            >
-              Cancel
-            </Button>
+          <SheetFooter className="shrink-0 border-t px-6 py-4 sm:flex-row sm:justify-end">
            <Button type="submit" disabled={isSaving}>
              {isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
              {roleId ? 'Update Role' : 'Create Role'}
            </Button>
+            <SheetClose asChild>
+              <Button type="button" variant="outline" disabled={isSaving}>
+                Cancel
+              </Button>
+            </SheetClose>
          </SheetFooter>
        </form>
      </SheetContent>
--- a/src/app/(modules)/roles/components/RoleTable.tsx
+++ b/src/app/(modules)/roles/components/RoleTable.tsx
@@ -15,6 +15,7 @@ interface RoleTableProps {
  limit: number;
  total: number;
  onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
 }

 export function RoleTable({
@@ -26,6 +27,7 @@ export function RoleTable({
  limit,
  total,
  onPageChange,
+  onLimitChange,
 }: RoleTableProps) {
  return (
    <DataTable
@@ -40,7 +42,7 @@ export function RoleTable({
        limit,
        totalItems: total,
        onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
      }}
    />
  );
--- a/src/app/(modules)/roles/hooks/useRoleFilters.ts
+++ b/src/app/(modules)/roles/hooks/useRoleFilters.ts
@@ -8,7 +8,7 @@ const SEARCH_DEBOUNCE_MS = 400;

 export function useRoleFilters() {
  const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
  const [searchTerm, setSearchTermValue] = useState('');
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
  const [statusFilter, setStatusFilterValue] = useState<StatusFilter>('all');
@@ -31,10 +31,16 @@ export function useRoleFilters() {
    setSkip(0);
  };

+  const setLimit = (value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  };
+
  return {
    skip,
    setSkip,
    limit,
+    setLimit,
    searchTerm,
    debouncedSearchTerm,
    setSearchTerm,
--- a/src/app/(modules)/roles/page.tsx
+++ b/src/app/(modules)/roles/page.tsx
@@ -30,6 +30,7 @@ export default function RolesPage() {
    skip,
    setSkip,
    limit,
+    setLimit,
    searchTerm,
    debouncedSearchTerm,
    setSearchTerm,
@@ -108,8 +109,8 @@ export default function RolesPage() {
          icon={ShieldCheck}
          actions={
            <PermissionGuard permissions={PERMISSIONS.ROLE.CREATE}>
-              <Button onClick={openCreate}>
-                <Plus className="mr-2 size-4" />
+              <Button onClick={openCreate} size="sm">
+                <Plus />
                Add Role
              </Button>
            </PermissionGuard>
@@ -125,6 +126,7 @@ export default function RolesPage() {
          limit={limit}
          total={total}
          onPageChange={setSkip}
+          onLimitChange={setLimit}
        />

        <PoweredBy />
--- a/src/app/(modules)/tenants/components/TenantFilters.tsx
+++ b/src/app/(modules)/tenants/components/TenantFilters.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { Input } from '@/components/ui/input';
+import { TableSearchInput } from '@/components/data-table/TableSearchInput';
 import {
  Select,
  SelectContent,
@@ -25,11 +25,10 @@ export function TenantFilters({
 }: TenantFiltersProps) {
  return (
    <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-      <Input
+      <TableSearchInput
        value={searchTerm}
-        onChange={(event) => onSearchChange(event.target.value)}
+        onChange={onSearchChange}
        placeholder="Search tenants"
-        className="md:max-w-sm"
      />
      <Select
        value={statusFilter}
--- a/src/app/(modules)/tenants/components/TenantTable.tsx
+++ b/src/app/(modules)/tenants/components/TenantTable.tsx
@@ -15,6 +15,7 @@ interface TenantTableProps {
  limit: number;
  total: number;
  onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
 }

 export function TenantTable({
@@ -26,6 +27,7 @@ export function TenantTable({
  limit,
  total,
  onPageChange,
+  onLimitChange,
 }: TenantTableProps) {
  return (
    <DataTable
@@ -40,7 +42,7 @@ export function TenantTable({
        limit,
        totalItems: total,
        onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
      }}
    />
  );
--- a/src/app/(modules)/tenants/hooks/useTenantFilters.ts
+++ b/src/app/(modules)/tenants/hooks/useTenantFilters.ts
@@ -8,7 +8,7 @@ export type TenantStatusFilter = 'all' | 'active' | 'inactive';

 export function useTenantFilters() {
  const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
  const [searchTerm, setSearchTermValue] = useState('');
  const [statusFilter, setStatusFilterValue] = useState<TenantStatusFilter>('all');
  const debouncedSearchTerm = useDebounce(searchTerm.trim(), 400);
@@ -23,10 +23,16 @@ export function useTenantFilters() {
    setSkip(0);
  }, []);

+  const setLimit = useCallback((value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  }, []);
+
  return {
    skip,
    setSkip,
    limit,
+    setLimit,
    searchTerm,
    debouncedSearchTerm,
    setSearchTerm,
--- a/src/app/(modules)/tenants/page.tsx
+++ b/src/app/(modules)/tenants/page.tsx
@@ -30,6 +30,7 @@ export default function TenantsPage() {
    skip,
    setSkip,
    limit,
+    setLimit,
    searchTerm,
    debouncedSearchTerm,
    setSearchTerm,
@@ -163,6 +164,7 @@ export default function TenantsPage() {
          limit={limit}
          total={total}
          onPageChange={setSkip}
+          onLimitChange={setLimit}
        />

        <PoweredBy />
--- a/src/app/(modules)/users/components/UserFilters.tsx
+++ b/src/app/(modules)/users/components/UserFilters.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { Input } from '@/components/ui/input';
+import { TableSearchInput } from '@/components/data-table/TableSearchInput';
 import {
  Select,
  SelectContent,
@@ -25,11 +25,10 @@ export function UserFilters({
 }: UserFiltersProps) {
  return (
    <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-      <Input
+      <TableSearchInput
        value={searchTerm}
-        onChange={(event) => onSearchChange(event.target.value)}
+        onChange={onSearchChange}
        placeholder="Search users"
-        className="md:max-w-sm"
      />
      <Select value={statusFilter} onValueChange={(value) => onStatusChange(value as StatusFilter)}>
        <SelectTrigger className="md:w-44">
--- a/src/app/(modules)/users/components/UserSheet.tsx
+++ b/src/app/(modules)/users/components/UserSheet.tsx
@@ -1,10 +1,20 @@
 'use client';

-import type { ComponentProps } from 'react';
+import { useMemo, useRef, type ComponentProps } from 'react';
 import type { UseFormRegister } from 'react-hook-form';
 import { Loader2 } from 'lucide-react';

 import { Button } from '@/components/ui/button';
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+} from '@/components/ui/combobox';
 import {
  Dialog,
  DialogContent,
@@ -15,16 +25,14 @@ import {
 } 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';

+type RoleComboboxItem = {
+  value: string;
+  label: string;
+};
+
 interface UserSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
@@ -50,6 +58,21 @@ export function UserSheet({
  isRolesLoading,
  isSaving,
 }: UserSheetProps) {
+  const roleComboboxPortalRef = useRef<HTMLDivElement | null>(null);
+  const roleItems = useMemo<RoleComboboxItem[]>(
+    () =>
+      roles.map((role) => ({
+        value: String(role.id),
+        label: role.display_name || role.name,
+      })),
+    [roles],
+  );
+
+  const selectedRole = useMemo(
+    () => roleItems.find((item) => item.value === roleId) ?? null,
+    [roleItems, roleId],
+  );
+
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-xl">
@@ -101,18 +124,44 @@ export function UserSheet({

          <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>
+            <Combobox
+              items={roleItems}
+              value={selectedRole}
+              onValueChange={(item) => {
+                if (item?.value) {
+                  onRoleChange(item.value);
+                }
+              }}
+              disabled={isRolesLoading}
+              itemToStringLabel={(item) => item.label}
+            >
+              <ComboboxTrigger
+                render={
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full justify-between font-normal"
+                    disabled={isRolesLoading}
+                  >
+                    <ComboboxValue
+                      placeholder={isRolesLoading ? 'Loading roles...' : 'Select role'}
+                    />
+                  </Button>
+                }
+              />
+              <ComboboxContent container={roleComboboxPortalRef}>
+                <ComboboxInput showTrigger={false} placeholder="Search roles..." />
+                <ComboboxEmpty>No roles found.</ComboboxEmpty>
+                <ComboboxList>
+                  {(item) => (
+                    <ComboboxItem key={item.value} value={item}>
+                      {item.label}
+                    </ComboboxItem>
+                  )}
+                </ComboboxList>
+              </ComboboxContent>
+            </Combobox>
+            <div ref={roleComboboxPortalRef} />
            <input
              type="hidden"
              {...register('role_id', { required: true })}
--- a/src/app/(modules)/users/components/UserTable.tsx
+++ b/src/app/(modules)/users/components/UserTable.tsx
@@ -15,6 +15,7 @@ interface UserTableProps {
  limit: number;
  total: number;
  onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
 }

 export function UserTable({
@@ -26,6 +27,7 @@ export function UserTable({
  limit,
  total,
  onPageChange,
+  onLimitChange,
 }: UserTableProps) {
  return (
    <DataTable
@@ -40,7 +42,7 @@ export function UserTable({
        limit,
        totalItems: total,
        onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
      }}
    />
  );
--- a/src/app/(modules)/users/hooks/useUserFilters.ts
+++ b/src/app/(modules)/users/hooks/useUserFilters.ts
@@ -8,7 +8,7 @@ export type StatusFilter = 'all' | UserStatus;

 export function useUserFilters() {
  const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
  const [searchTerm, setSearchTermValue] = useState('');
  const [statusFilter, setStatusFilterValue] = useState<StatusFilter>('all');
  const debouncedSearchTerm = useDebounce(searchTerm.trim(), 400);
@@ -23,10 +23,16 @@ export function useUserFilters() {
    setSkip(0);
  }, []);

+  const setLimit = useCallback((value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  }, []);
+
  return {
    skip,
    setSkip,
    limit,
+    setLimit,
    searchTerm,
    debouncedSearchTerm,
    setSearchTerm,
--- a/src/app/(modules)/users/hooks/useUserQueries.ts
+++ b/src/app/(modules)/users/hooks/useUserQueries.ts
@@ -18,7 +18,7 @@ interface UseUsersQueryParams {

 const roleLookupParams: RoleListParams = {
  skip: 0,
-  limit: 100,
+  limit: 500,
  effective_status: true,
  sort_by: 'display_name',
  sort_order: 'asc',
--- a/src/app/(modules)/users/page.tsx
+++ b/src/app/(modules)/users/page.tsx
@@ -26,6 +26,7 @@ export default function UsersPage() {
    skip,
    setSkip,
    limit,
+    setLimit,
    searchTerm,
    debouncedSearchTerm,
    setSearchTerm,
@@ -106,8 +107,8 @@ export default function UsersPage() {
          icon={Users}
          actions={
            <PermissionGuard permissions={PERMISSIONS.USER.CREATE}>
-              <Button onClick={openCreate}>
-                <Plus className="mr-2 size-4" />
+              <Button onClick={openCreate} size="sm">
+                <Plus />
                Add User
              </Button>
            </PermissionGuard>
@@ -130,6 +131,7 @@ export default function UsersPage() {
          limit={limit}
          total={total}
          onPageChange={setSkip}
+          onLimitChange={setLimit}
        />

        <PoweredBy />