refactor: add reusable select controls and enhance data table columns

src/app/(modules)/package/components/PackageTable.tsx

@@ -58,6 +58,7 @@ export function PackageTable({
         onPageChange,
         onLimitChange,
       }}
+      actionsSticky
     />
   );
 }

src/app/(modules)/plans/components/PlanTable.tsx

@@ -73,6 +73,7 @@ export function PlanTable({
       }}
       sorting={sorting}
       onSortingChange={onSortingChange}
+      actionsSticky
     />
   );
 }

src/app/(modules)/project/components/ProjectTable.tsx

@@ -58,6 +58,7 @@ export function ProjectTable({
         onPageChange,
         onLimitChange,
       }}
+      actionsSticky
     />
   );
 }

src/app/(modules)/roles/components/RoleTable.tsx

@@ -73,6 +73,7 @@ export function RoleTable({
       }}
       sorting={sorting}
       onSortingChange={onSortingChange}
+      actionsSticky
     />
   );
 }

src/app/(modules)/roles/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Plus, ShieldCheck } from 'lucide-react';
 
 import { PageHeader } from '@/components/page-header';
@@ -27,6 +27,7 @@ export default function RolesPage() {
     (state) => state.user?.organization_id ?? null,
   );
   const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [activeRole, setActiveRole] = useState<Role | null>(null);
   const {
     skip,
     setSkip,
@@ -49,6 +50,7 @@ export default function RolesPage() {
     sorting,
   });
   const permissionsQuery = usePermissionsTreeQuery(isSheetOpen);
+
   const roleForm = useRoleForm({
     organizationId,
     permissionTree: permissionsQuery.permissionTree,
@@ -72,18 +74,32 @@ export default function RolesPage() {
     statusMutation;
 
   const openCreate = useCallback(() => {
-    prepareCreateRole();
+    setActiveRole(null);
     setIsSheetOpen(true);
-  }, [prepareCreateRole]);
+  }, []);
 
   const openEdit = useCallback(
     (role: Role) => {
-      prepareEditRole(role);
+      setActiveRole(role);
       setIsSheetOpen(true);
     },
-    [prepareEditRole],
+    [],
   );
 
+  useEffect(() => {
+    if (!isSheetOpen || permissionsQuery.permissionTree.length === 0) {
+      return;
+    }
+
+    activeRole ? prepareEditRole(activeRole) : prepareCreateRole();
+  }, [
+    activeRole,
+    isSheetOpen,
+    permissionsQuery.permissionTree,
+    prepareCreateRole,
+    prepareEditRole,
+  ]);
+
   const toggleStatus = useCallback(
     (role: Role) => {
       updateRoleStatus(role);

src/app/(modules)/segment/components/SegmentTable.tsx

@@ -58,6 +58,7 @@ export function SegmentTable({
         onPageChange,
         onLimitChange,
       }}
+      actionsSticky
     />
   );
 }

src/app/(modules)/tenants/components/TenantTable.tsx

@@ -74,6 +74,7 @@ export function TenantTable({
       }}
       sorting={sorting}
       onSortingChange={onSortingChange}
+      actionsSticky
     />
   );
 }

src/app/(modules)/users/components/UserColumns.tsx

@@ -32,6 +32,8 @@ export function useUserColumns(): ColumnDef<AdministrationUser>[] {
       {
         accessorKey: 'email',
         header: 'Email',
+        size: 200,
+        minSize: 160,
       },
       {
         accessorKey: 'phone_number',
@@ -42,6 +44,7 @@ export function useUserColumns(): ColumnDef<AdministrationUser>[] {
         accessorKey: 'roles',
         header: 'Roles',
         enableSorting: false,
+        meta: { disableTruncate: true },
         cell: ({ row }) => (
           <div className="flex flex-wrap gap-1">
             {row.original.roles?.length ? (

src/app/(modules)/users/components/UserTable.tsx

@@ -75,6 +75,7 @@ export function UserTable({
       }}
       sorting={sorting}
       onSortingChange={onSortingChange}
+      actionsSticky
     />
   );
 }