refactor: refactor superadmin modules

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

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>

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

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,

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