yashwin/Qassure-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add tenant admin support to EditUserModal and dynamic form validation

Browse Source
This commit is contained in:
Yashwin 2026-07-09 15:58:25 +05:30
parent 04003a2332
commit f7eb25f874
4 changed files with 174 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

277
src/components/shared/EditUserModal.tsx
View File

@ -69,7 +69,7 @@ const editUserSchema = z.object({
type EditUserFormData = z.infer<typeof editUserSchema>;
type UpdateUserPayload = Omit<EditUserFormData, "role_module_assignments"> & {
role_module_combinations: { role_id: string; module_id: string }[];
role_module_combinations?: { role_id: string; module_id?: string | null }[];
};
interface EditUserModalProps {
@ -100,6 +100,8 @@ export const EditUserModal = ({
const [isLoadingUser, setIsLoadingUser] = useState<boolean>(false);
const [loadError, setLoadError] = useState<string | null>(null);
const loadedUserIdRef = useRef<string | null>(null);
const [isTenantAdmin, setIsTenantAdmin] = useState<boolean>(false);
const [selectedUserTenantId, setSelectedUserTenantId] = useState<string>("");
const {
control,
@ -113,7 +115,20 @@ export const EditUserModal = ({
formState: { errors },
} = useForm<EditUserFormData>({
// @ts-ignore
resolver: zodResolver(editUserSchema),
resolver: zodResolver(
isTenantAdmin
? editUserSchema.extend({
role_module_assignments: z
.array(
z.object({
role_id: z.string().optional(),
module_ids: z.array(z.string()).optional(),
})
)
.optional(),
})
: editUserSchema
),
});
const { fields, append, remove } = useFieldArray({
@ -127,8 +142,6 @@ export const EditUserModal = ({
const categoryValue = watch("category");
const supplierIdValue = watch("supplier_id");
const rolesFromAuth = useAppSelector((state) => state.auth.roles);
const isSuperAdmin = rolesFromAuth.includes("super_admin");
const tenantIdFromAuth = useAppSelector((state) => state.auth.tenantId);
const [initialRoleOptions, setInitialRoleOptions] = useState<
@ -152,8 +165,9 @@ export const EditUserModal = ({
// Load roles for dropdown - ensure selected role is included
const loadRoles = async (page: number, limit: number) => {
const response = defaultTenantId
? await roleService.getByTenant(defaultTenantId, page, limit, undefined, undefined, true)
const effectiveTenantId = selectedUserTenantId || defaultTenantId || tenantIdFromAuth;
const response = effectiveTenantId
? await roleService.getByTenant(effectiveTenantId, page, limit, undefined, undefined, true)
: await roleService.getAll(page, limit, undefined, undefined, undefined, true);
return {
options: response.data.map((role) => ({
@ -165,7 +179,8 @@ export const EditUserModal = ({
};
const loadDepartments = async () => {
const response = await departmentService.list(defaultTenantId, {
const effectiveTenantId = selectedUserTenantId || defaultTenantId || tenantIdFromAuth;
const response = await departmentService.list(effectiveTenantId, {
active_only: true,
});
return {
@ -184,7 +199,8 @@ export const EditUserModal = ({
};
const loadDesignations = async () => {
const response = await designationService.list(defaultTenantId, {
const effectiveTenantId = selectedUserTenantId || defaultTenantId || tenantIdFromAuth;
const response = await designationService.list(effectiveTenantId, {
active_only: true,
});
return {
@ -203,8 +219,8 @@ export const EditUserModal = ({
};
const loadModules = async (page: number, limit: number) => {
const tenantId = isSuperAdmin ? defaultTenantId : tenantIdFromAuth;
const response = await moduleService.getAvailable(page, limit, tenantId);
const effectiveTenantId = selectedUserTenantId || defaultTenantId || tenantIdFromAuth;
const response = await moduleService.getAvailable(page, limit, effectiveTenantId);
return {
options: response.data.map((module) => ({
value: module.id,
@ -215,8 +231,9 @@ export const EditUserModal = ({
};
const loadSuppliers = async (page: number, limit: number) => {
const effectiveTenantId = selectedUserTenantId || defaultTenantId || tenantIdFromAuth;
const response = await supplierService.list({
tenantId: defaultTenantId,
tenantId: effectiveTenantId,
limit,
offset: (page - 1) * limit,
});
@ -344,6 +361,14 @@ export const EditUserModal = ({
});
}
const isUserTenantAdmin =
user.roles?.some((r) => r.code === "tenant_admin") ||
user.role_module_combinations?.some((c) => c.role_code === "tenant_admin") ||
user.role?.code === "tenant_admin" ||
user.role_id === "tenant_admin";
setIsTenantAdmin(!!isUserTenantAdmin);
setSelectedUserTenantId(tenantId);
reset({
email: user.email,
first_name: user.first_name,
@ -406,6 +431,8 @@ export const EditUserModal = ({
setInitialDepartmentOption(null);
setInitialDesignationOption(null);
setInitialSupplierOption(null);
setIsTenantAdmin(false);
setSelectedUserTenantId("");
reset({
email: "",
first_name: "",
@ -448,12 +475,14 @@ export const EditUserModal = ({
}
const { role_module_assignments, ...submitData } = data;
const role_module_combinations = role_module_assignments.flatMap((row) =>
row.module_ids.map((module_id) => ({
role_id: row.role_id,
module_id,
})),
);
const role_module_combinations = isTenantAdmin
? undefined
: (role_module_assignments || []).flatMap((row) =>
(row.module_ids || []).map((module_id) => ({
role_id: row.role_id,
module_id,
})),
);
await onSubmit(userId, { ...submitData, role_module_combinations });
} catch (error: any) {
if (
@ -672,118 +701,120 @@ export const EditUserModal = ({
/>
</div>
<div className="mt-2 mb-4">
<div className="flex justify-between items-center mb-2">
<label className="text-sm font-medium text-gray-700">
Role & Module Assignments
</label>
<button
type="button"
onClick={() => append({ role_id: "", module_ids: [] })}
className="text-sm font-medium text-[#112868] hover:text-[#0b1c4a] flex items-center gap-1"
>
<Plus className="w-4 h-4" /> Add Assignment
</button>
</div>
{!isTenantAdmin && (
<div className="mt-2 mb-4">
<div className="flex justify-between items-center mb-2">
<label className="text-sm font-medium text-gray-700">
Role & Module Assignments
</label>
<button
type="button"
onClick={() => append({ role_id: "", module_ids: [] })}
className="text-sm font-medium text-[#112868] hover:text-[#0b1c4a] flex items-center gap-1"
>
<Plus className="w-4 h-4" /> Add Assignment
</button>
</div>
{(errors.role_module_assignments as any)?.message && (
<p className="text-sm text-red-500 mb-2">
{(errors.role_module_assignments as any).message}
</p>
)}
{(errors.role_module_assignments as any)?.message && (
<p className="text-sm text-red-500 mb-2">
{(errors.role_module_assignments as any).message}
</p>
)}
<div className="space-y-3">
{fields.map((field, index) => {
const roleIdValue = watch(
`role_module_assignments.${index}.role_id`,
);
const moduleIdsValue =
watch(`role_module_assignments.${index}.module_ids`) || [];
// Extract specific label if available from initial options
const getRoleLabel = (val: string) => {
const opt = initialRoleOptions.find((o) => o.value === val);
return opt ? opt.label : undefined;
};
const initialSelectedModules = moduleIdsValue
.map((val) => {
const opt = initialModuleOptions.find(
(o) => o.value === val,
);
return opt
? { value: opt.value, label: opt.label }
: null;
})
.filter((opt): opt is { value: string; label: string } =>
Boolean(opt),
<div className="space-y-3">
{fields.map((field, index) => {
const roleIdValue = watch(
`role_module_assignments.${index}.role_id`,
);
const moduleIdsValue =
watch(`role_module_assignments.${index}.module_ids`) || [];
return (
<div
key={field.id}
className="flex gap-2 items-start border p-3 rounded-md bg-gray-50 relative"
>
<div className="flex-1 grid grid-cols-2 gap-3">
<PaginatedSelect
label="Select Role"
required
placeholder="Select Role"
value={roleIdValue || ""}
onValueChange={(value) =>
setValue(
`role_module_assignments.${index}.role_id`,
value,
{ shouldValidate: true },
)
}
onLoadOptions={loadRoles}
initialOption={
roleIdValue
? {
value: roleIdValue,
label:
getRoleLabel(roleIdValue) || roleIdValue,
}
: undefined
}
error={
errors.role_module_assignments?.[index]?.role_id
?.message
}
/>
<MultiselectPaginatedSelect
label="Select Modules"
required
placeholder="Select Modules"
value={moduleIdsValue}
onValueChange={(value) =>
setValue(
`role_module_assignments.${index}.module_ids`,
value,
{ shouldValidate: true },
)
}
onLoadOptions={loadModules}
initialOptions={initialSelectedModules}
error={getModuleError(index)}
/>
// Extract specific label if available from initial options
const getRoleLabel = (val: string) => {
const opt = initialRoleOptions.find((o) => o.value === val);
return opt ? opt.label : undefined;
};
const initialSelectedModules = moduleIdsValue
.map((val) => {
const opt = initialModuleOptions.find(
(o) => o.value === val,
);
return opt
? { value: opt.value, label: opt.label }
: null;
})
.filter((opt): opt is { value: string; label: string } =>
Boolean(opt),
);
return (
<div
key={field.id}
className="flex gap-2 items-start border p-3 rounded-md bg-gray-50 relative"
>
<div className="flex-1 grid grid-cols-2 gap-3">
<PaginatedSelect
label="Select Role"
required
placeholder="Select Role"
value={roleIdValue || ""}
onValueChange={(value) =>
setValue(
`role_module_assignments.${index}.role_id`,
value,
{ shouldValidate: true },
)
}
onLoadOptions={loadRoles}
initialOption={
roleIdValue
? {
value: roleIdValue,
label:
getRoleLabel(roleIdValue) || roleIdValue,
}
: undefined
}
error={
errors.role_module_assignments?.[index]?.role_id
?.message
}
/>
<MultiselectPaginatedSelect
label="Select Modules"
required
placeholder="Select Modules"
value={moduleIdsValue}
onValueChange={(value) =>
setValue(
`role_module_assignments.${index}.module_ids`,
value,
{ shouldValidate: true },
)
}
onLoadOptions={loadModules}
initialOptions={initialSelectedModules}
error={getModuleError(index)}
/>
</div>
{fields.length > 1 && (
<button
type="button"
onClick={() => remove(index)}
className="mt-8 p-2 text-red-500 hover:bg-red-50 rounded-md transition-colors"
title="Remove Assignment"
>
<Trash2 className="w-4 h-4" />
</button>
)}
</div>
{fields.length > 1 && (
<button
type="button"
onClick={() => remove(index)}
className="mt-8 p-2 text-red-500 hover:bg-red-50 rounded-md transition-colors"
title="Remove Assignment"
>
<Trash2 className="w-4 h-4" />
</button>
)}
</div>
);
})}
);
})}
</div>
</div>
</div>
)}
</div>
)}
</form>

15
src/components/shared/ViewUserModal.tsx
View File

@ -136,6 +136,21 @@ export const ViewUserModal = ({
</StatusBadge>
</div>
</div>
{user.status === "suspended" && user.preferences?.security?.suspended_reason && (
<div className="md:col-span-2 p-3 bg-[rgba(239,68,68,0.05)] border border-[rgba(239,68,68,0.2)] rounded-lg">
<label className="text-xs font-medium text-[#ef4444] mb-1 block">
Suspension Reason
</label>
<p className="text-sm text-[#0e1b2a] font-medium">
{user.preferences.security.suspended_reason}
</p>
{user.preferences.security.suspended_at && (
<p className="text-xs text-[#6b7280] mt-1">
Suspended on: {formatDate(user.preferences.security.suspended_at)}
</p>
)}
</div>
)}
<div>
<label className="text-xs font-medium text-[#6b7280] mb-1 block">
Roles

2
src/components/superadmin/UsersTable.tsx
View File

@ -289,7 +289,7 @@ export const UsersTable = forwardRef<UsersTableRef, UsersTableProps>(
status: "active" | "suspended" | "deleted";
auth_provider?: string;
tenant_id: string;
role_module_combinations: {
role_module_combinations?: {
role_id: string;
module_id?: string | null;
}[];

4
src/types/user.ts
View File

@ -6,6 +6,7 @@ export interface RoleModuleCombination {
export interface UserRoleModuleCombination {
role_id: string;
role_name: string;
role_code?: string;
module_id: string | null;
module_name: string | null;
}
@ -26,10 +27,12 @@ export interface User {
role?: {
id: string;
name: string;
code?: string;
};
roles?: {
id: string;
name: string;
code?: string;
}[];
department_id?: string;
designation_id?: string;
@ -48,6 +51,7 @@ export interface User {
role_module_combinations?: UserRoleModuleCombination[];
category?: 'tenant_user' | 'supplier_user';
supplier_id?: string | null;
preferences?: any;
created_at: string;
updated_at: string;
}