refactor: consolidate permission hooks and gate role filter behind read permission in UsersTable

This commit is contained in:
Yashwin 2026-06-23 17:55:00 +05:30
parent 3479c1943a
commit f76bbc6f65

View File

@ -30,7 +30,10 @@ import { useAppTheme } from "@/hooks/useAppTheme";
import { usePermissions } from "@/hooks/usePermissions"; import { usePermissions } from "@/hooks/usePermissions";
// Helper function to get user initials // Helper function to get user initials
const getUserInitials = (firstName: string | null | undefined, lastName: string | null | undefined): string => { const getUserInitials = (
firstName: string | null | undefined,
lastName: string | null | undefined,
): string => {
const first = (firstName || "").trim().slice(0, 1); const first = (firstName || "").trim().slice(0, 1);
const last = (lastName || "").trim().slice(0, 1); const last = (lastName || "").trim().slice(0, 1);
return `${first}${last}`.toUpperCase() || "?"; return `${first}${last}`.toUpperCase() || "?";
@ -69,9 +72,9 @@ interface UsersTableProps {
export const UsersTable = forwardRef<UsersTableRef, UsersTableProps>( export const UsersTable = forwardRef<UsersTableRef, UsersTableProps>(
({ tenantId, showHeader = true, compact = false }, ref): ReactElement => { ({ tenantId, showHeader = true, compact = false }, ref): ReactElement => {
const { canUpdate } = usePermissions(); const { canUpdate, canRead, canCreate } = usePermissions();
const { primaryColor } = useAppTheme(); const { primaryColor } = useAppTheme();
const { canCreate } = usePermissions(); // const { canCreate } = usePermissions();
const [users, setUsers] = useState<User[]>([]); const [users, setUsers] = useState<User[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@ -579,22 +582,26 @@ export const UsersTable = forwardRef<UsersTableRef, UsersTableProps>(
}} }}
placeholder="All" placeholder="All"
/> />
<FilterDropdown {canRead("roles") && (
label="Role" <FilterDropdown
options={[ label="Role"
// { value: "", label: "All Roles" }, options={[
...roles.map((role) => ({ // { value: "", label: "All Roles" },
value: role.id, ...roles.map((role) => ({
label: role.name, value: role.id,
})), label: role.name,
]} })),
value={roleFilter || ""} ]}
onChange={(value) => { value={roleFilter || ""}
setRoleFilter(Array.isArray(value) ? null : value || null); onChange={(value) => {
setCurrentPage(1); setRoleFilter(
}} Array.isArray(value) ? null : value || null,
placeholder="All" );
/> setCurrentPage(1);
}}
placeholder="All"
/>
)}
{canCreate("users") && ( {canCreate("users") && (
<PrimaryButton <PrimaryButton
size="default" size="default"