refactor: refactor superadmin modules

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">

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 })}

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,
       }}
     />
   );