670 lines
22 KiB
TypeScript
670 lines
22 KiB
TypeScript
import { useEffect, useState, useMemo } from "react";
|
|
import type { ReactElement } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
// import { ChevronDown, ChevronRight } from "lucide-react";
|
|
import {
|
|
Modal,
|
|
FormField,
|
|
PrimaryButton,
|
|
SecondaryButton,
|
|
FormTextArea,
|
|
} from "@/components/shared";
|
|
import type { CreateRoleRequest } from "@/types/role";
|
|
import { useAppSelector } from "@/hooks/redux-hooks";
|
|
|
|
// Utility function to generate code from name
|
|
const generateCodeFromName = (name: string): string => {
|
|
return name
|
|
.toLowerCase()
|
|
.trim()
|
|
.replace(/[^a-z0-9\s]/g, "") // Remove special characters except spaces
|
|
.replace(/\s+/g, "_") // Replace spaces with underscores
|
|
.replace(/_+/g, "_") // Replace multiple underscores with single underscore
|
|
.replace(/^_|_$/g, ""); // Remove leading/trailing underscores
|
|
};
|
|
|
|
// All available resources
|
|
const ALL_RESOURCES = [
|
|
"users",
|
|
// 'tenants',
|
|
"roles",
|
|
"permissions",
|
|
// 'user_roles',
|
|
// 'user_tenants',
|
|
// 'sessions',
|
|
// 'api_keys',
|
|
// 'api_key_permissions',
|
|
"projects",
|
|
"document",
|
|
"audit",
|
|
"security",
|
|
"workflow",
|
|
"training",
|
|
"capa",
|
|
"supplier",
|
|
"reports",
|
|
"notifications",
|
|
"files",
|
|
"settings",
|
|
// 'modules',
|
|
"audit_logs",
|
|
// 'event_logs',
|
|
// 'health_history',
|
|
"qms_connections",
|
|
"qms_sync_jobs",
|
|
"qms_sync_conflicts",
|
|
"qms_entity_mappings",
|
|
"ai",
|
|
"qms",
|
|
];
|
|
|
|
// All available actions
|
|
const ALL_ACTIONS = ["create", "read", "update", "delete"];
|
|
|
|
// Validation schema
|
|
const newRoleSchema = z.object({
|
|
name: z.string().min(1, "Role name is required"),
|
|
code: z
|
|
.string()
|
|
.min(1, "Code is required")
|
|
.regex(
|
|
/^[a-z]+(_[a-z]+)*$/,
|
|
"Code must be lowercase and use '_' for separation (e.g. abc_def)",
|
|
),
|
|
description: z.string().min(1, "Description is required"),
|
|
permissions: z
|
|
.array(
|
|
z.object({
|
|
resource: z.string(),
|
|
action: z.string(),
|
|
}),
|
|
)
|
|
.optional()
|
|
.nullable(),
|
|
});
|
|
|
|
type NewRoleFormData = z.infer<typeof newRoleSchema>;
|
|
|
|
interface NewRoleModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (data: CreateRoleRequest) => Promise<void>;
|
|
isLoading?: boolean;
|
|
defaultTenantId?: string; // If provided, automatically include tenant_id in request body
|
|
}
|
|
|
|
export const NewRoleModal = ({
|
|
isOpen,
|
|
onClose,
|
|
onSubmit,
|
|
isLoading = false,
|
|
defaultTenantId,
|
|
}: NewRoleModalProps): ReactElement | null => {
|
|
const permissions = useAppSelector((state) => state.auth.permissions);
|
|
const roles = useAppSelector((state) => state.auth.roles);
|
|
const isSuperAdmin = roles.includes("super_admin");
|
|
const [selectedPermissions, setSelectedPermissions] = useState<
|
|
Array<{ resource: string; action: string }>
|
|
>([]);
|
|
// const [expandedResources, setExpandedResources] = useState<Set<string>>(
|
|
// new Set(),
|
|
// );
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
reset,
|
|
setError,
|
|
clearErrors,
|
|
formState: { errors },
|
|
} = useForm<NewRoleFormData>({
|
|
resolver: zodResolver(newRoleSchema),
|
|
defaultValues: {
|
|
code: undefined,
|
|
permissions: [],
|
|
},
|
|
});
|
|
|
|
const nameValue = watch("name");
|
|
|
|
// Auto-generate code from name
|
|
useEffect(() => {
|
|
if (nameValue) {
|
|
const generatedCode = generateCodeFromName(nameValue);
|
|
setValue("code", generatedCode, { shouldValidate: true });
|
|
}
|
|
}, [nameValue, setValue]);
|
|
|
|
// Reset form when modal closes
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
reset({
|
|
name: "",
|
|
code: undefined,
|
|
description: "",
|
|
permissions: [],
|
|
});
|
|
setSelectedPermissions([]);
|
|
clearErrors();
|
|
}
|
|
}, [isOpen, reset, clearErrors]);
|
|
|
|
// Build available resources and actions based on user permissions
|
|
const availableResourcesAndActions = useMemo(() => {
|
|
const resourceMap = new Map<string, Set<string>>();
|
|
|
|
permissions.forEach((perm) => {
|
|
const { resource, action } = perm;
|
|
|
|
if (resource === "*") {
|
|
// If resource is *, show all resources
|
|
ALL_RESOURCES.forEach((res) => {
|
|
if (!resourceMap.has(res)) {
|
|
resourceMap.set(res, new Set());
|
|
}
|
|
const actions = resourceMap.get(res)!;
|
|
if (action === "*") {
|
|
// If action is also *, add all actions
|
|
ALL_ACTIONS.forEach((act) => actions.add(act));
|
|
} else {
|
|
actions.add(action);
|
|
}
|
|
});
|
|
} else {
|
|
// Specific resource
|
|
if (!resourceMap.has(resource)) {
|
|
resourceMap.set(resource, new Set());
|
|
}
|
|
const actions = resourceMap.get(resource)!;
|
|
if (action === "*") {
|
|
// If action is *, add all actions for this resource
|
|
ALL_ACTIONS.forEach((act) => actions.add(act));
|
|
} else {
|
|
actions.add(action);
|
|
}
|
|
}
|
|
});
|
|
|
|
return resourceMap;
|
|
}, [permissions]);
|
|
|
|
// Check if a resource has any selected actions
|
|
// const hasSelectedActions = (
|
|
// resource: string,
|
|
// actions: Set<string>,
|
|
// ): boolean => {
|
|
// return Array.from(actions).some((action) => {
|
|
// return selectedPermissions.some((p) => {
|
|
// // Check for exact match
|
|
// if (p.resource === resource && p.action === action) return true;
|
|
// // Check for wildcard resource with exact action
|
|
// if (p.resource === "*" && p.action === action) return true;
|
|
// // Check for exact resource with wildcard action
|
|
// if (p.resource === resource && p.action === "*") return true;
|
|
// // Check for wildcard resource with wildcard action
|
|
// if (p.resource === "*" && p.action === "*") return true;
|
|
// return false;
|
|
// });
|
|
// });
|
|
// };
|
|
|
|
// // Toggle resource expansion
|
|
// const toggleResource = (resource: string) => {
|
|
// setExpandedResources((prev) => {
|
|
// const newSet = new Set(prev);
|
|
// if (newSet.has(resource)) {
|
|
// newSet.delete(resource);
|
|
// } else {
|
|
// newSet.add(resource);
|
|
// }
|
|
// return newSet;
|
|
// });
|
|
// };
|
|
|
|
// Handle permission checkbox change
|
|
const handlePermissionChange = (
|
|
resource: string,
|
|
action: string,
|
|
checked: boolean,
|
|
) => {
|
|
setSelectedPermissions((prev) => {
|
|
const newPerms = [...prev];
|
|
if (checked) {
|
|
// Add permission if not already exists
|
|
if (
|
|
!newPerms.some((p) => p.resource === resource && p.action === action)
|
|
) {
|
|
newPerms.push({ resource, action });
|
|
}
|
|
} else {
|
|
// Remove permission
|
|
return newPerms.filter(
|
|
(p) => !(p.resource === resource && p.action === action),
|
|
);
|
|
}
|
|
return newPerms;
|
|
});
|
|
};
|
|
|
|
// Update form value when permissions change
|
|
useEffect(() => {
|
|
setValue(
|
|
"permissions",
|
|
selectedPermissions.length > 0 ? selectedPermissions : [],
|
|
);
|
|
}, [selectedPermissions, setValue]);
|
|
|
|
const handleFormSubmit = async (data: NewRoleFormData): Promise<void> => {
|
|
clearErrors();
|
|
try {
|
|
const submitData = {
|
|
...data,
|
|
// For super_admin, always include tenant_id if defaultTenantId is provided
|
|
tenant_id: isSuperAdmin
|
|
? defaultTenantId || undefined
|
|
: defaultTenantId || undefined,
|
|
permissions:
|
|
selectedPermissions.length > 0 ? selectedPermissions : undefined,
|
|
};
|
|
await onSubmit(submitData as CreateRoleRequest);
|
|
} catch (error: any) {
|
|
// Handle validation errors from API
|
|
if (
|
|
error?.response?.data?.details &&
|
|
Array.isArray(error.response.data.details)
|
|
) {
|
|
const validationErrors = error.response.data.details;
|
|
validationErrors.forEach(
|
|
(detail: { path: string; message: string }) => {
|
|
if (
|
|
detail.path === "name" ||
|
|
detail.path === "code" ||
|
|
detail.path === "description" ||
|
|
detail.path === "permissions"
|
|
) {
|
|
setError(detail.path as keyof NewRoleFormData, {
|
|
type: "server",
|
|
message: detail.message,
|
|
});
|
|
}
|
|
},
|
|
);
|
|
} else {
|
|
// Handle general errors
|
|
const errorObj = error?.response?.data?.error;
|
|
const errorMessage =
|
|
(typeof errorObj === "object" &&
|
|
errorObj !== null &&
|
|
"message" in errorObj
|
|
? errorObj.message
|
|
: null) ||
|
|
(typeof errorObj === "string" ? errorObj : null) ||
|
|
error?.response?.data?.message ||
|
|
error?.message ||
|
|
"Failed to create role. Please try again.";
|
|
setError("root", {
|
|
type: "server",
|
|
message:
|
|
typeof errorMessage === "string"
|
|
? errorMessage
|
|
: "Failed to create role. Please try again.",
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title="Create Role"
|
|
description="Define a new role by setting permissions and role type."
|
|
maxWidth="lg"
|
|
footer={
|
|
<>
|
|
<SecondaryButton
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
className="px-4 py-2.5 text-sm"
|
|
>
|
|
Cancel
|
|
</SecondaryButton>
|
|
<PrimaryButton
|
|
type="button"
|
|
onClick={handleSubmit(handleFormSubmit)}
|
|
disabled={isLoading}
|
|
size="default"
|
|
className="px-4 py-2.5 text-sm"
|
|
>
|
|
{isLoading ? "Creating..." : "Create Role"}
|
|
</PrimaryButton>
|
|
</>
|
|
}
|
|
>
|
|
<form
|
|
onSubmit={handleSubmit(handleFormSubmit)}
|
|
className="p-5 flex flex-col gap-0"
|
|
>
|
|
{/* General Error Display */}
|
|
{errors.root && (
|
|
<div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
|
|
<p className="text-sm text-[#ef4444]">{errors.root.message}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Role Name and Role Code Row */}
|
|
<div className="grid grid-cols-2 gap-5 pb-4">
|
|
<FormField
|
|
label="Role Name"
|
|
required
|
|
placeholder="Enter Text Here"
|
|
error={errors.name?.message}
|
|
{...register("name")}
|
|
/>
|
|
|
|
<FormField
|
|
label="Role Code"
|
|
required
|
|
placeholder="Auto-generated from name"
|
|
error={errors.code?.message}
|
|
{...register("code")}
|
|
disabled
|
|
className="bg-[#f3f4f6] cursor-not-allowed"
|
|
/>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
{/* <FormField
|
|
label="Description"
|
|
required
|
|
placeholder="Enter Text Here"
|
|
error={errors.description?.message}
|
|
{...register("description")}
|
|
/> */}
|
|
<FormTextArea
|
|
label="Description"
|
|
required
|
|
placeholder="Enter Text Here"
|
|
error={errors.description?.message}
|
|
{...register("description")}
|
|
rows={4}
|
|
/>
|
|
|
|
{/* Permissions Section */}
|
|
<div className="pb-4">
|
|
<div
|
|
className="
|
|
flex flex-col items-start gap-3 self-stretch
|
|
p-4 rounded-[8px]
|
|
border border-[#D1D5DB]
|
|
bg-white
|
|
"
|
|
>
|
|
{/* Header Section */}
|
|
<div className="flex flex-col items-start self-stretch">
|
|
<div className="flex flex-col items-start self-stretch">
|
|
<h3 className="text-[13px] font-semibold text-[#111827]">
|
|
Permissions
|
|
</h3>
|
|
<p className="text-[11px] text-[#6B7280]">
|
|
Select allowed actions for this role by module.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{errors.permissions && (
|
|
<p className="text-sm text-[#ef4444]">
|
|
{errors.permissions.message}
|
|
</p>
|
|
)}
|
|
|
|
{/* Table */}
|
|
<div className="w-full overflow-x-auto border border-[#E5E7EB] rounded-[8px]">
|
|
<table className="w-full border-collapse">
|
|
{/* Table Header */}
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
className="
|
|
w-[204px] h-[53px]
|
|
px-3 py-[10px]
|
|
text-left text-[11px]
|
|
font-medium uppercase
|
|
text-[#6B7280]
|
|
border-b border-[#D1D5DB]
|
|
bg-[#F9F9F9]
|
|
"
|
|
>
|
|
Platform Services
|
|
</th>
|
|
|
|
{["View", "Create", "Edit", "Delete"].map((action) => (
|
|
<th
|
|
key={action}
|
|
className="w-[120px] px-3 py-[10px] text-center text-[11px] font-medium text-[#6B7280] border-b border-[#D1D5DB] bg-[#F9F9F9]"
|
|
>
|
|
<div className="flex flex-col items-center gap-1">
|
|
<span>{action}</span>
|
|
</div>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
|
|
{/* Table Body */}
|
|
<tbody>
|
|
{Array.from(availableResourcesAndActions.entries()).map(
|
|
([resource, actions]) => (
|
|
<tr key={resource}>
|
|
{/* Resource Name */}
|
|
<td
|
|
className="
|
|
w-[204px]
|
|
h-[53px]
|
|
px-3 py-[19px]
|
|
border-b border-[#E5E7EB]
|
|
text-[14px]
|
|
text-[#111827]
|
|
bg-white
|
|
"
|
|
>
|
|
{resource.replace(/_/g, " ")}
|
|
</td>
|
|
|
|
{/* Action Columns */}
|
|
{[
|
|
"read",
|
|
"create",
|
|
"update",
|
|
"delete",
|
|
// "approve",
|
|
// "admin",
|
|
].map((action) => {
|
|
const isChecked = selectedPermissions.some((p) => {
|
|
if (p.resource === resource && p.action === action)
|
|
return true;
|
|
|
|
if (p.resource === "*" && p.action === action)
|
|
return true;
|
|
|
|
if (p.resource === resource && p.action === "*")
|
|
return true;
|
|
|
|
if (p.resource === "*" && p.action === "*")
|
|
return true;
|
|
|
|
return false;
|
|
});
|
|
|
|
const isAvailable = actions.has(action);
|
|
|
|
return (
|
|
<td
|
|
key={`${resource}-${action}`}
|
|
className="
|
|
w-[120px]
|
|
px-3 py-[10px]
|
|
text-center
|
|
border-b border-[#E5E7EB]
|
|
bg-white
|
|
"
|
|
>
|
|
<div className="flex justify-center items-center">
|
|
<input
|
|
type="checkbox"
|
|
disabled={!isAvailable}
|
|
checked={isAvailable ? isChecked : false}
|
|
onChange={(e) =>
|
|
handlePermissionChange(
|
|
resource,
|
|
action,
|
|
e.target.checked,
|
|
)
|
|
}
|
|
className="
|
|
w-4 h-4 rounded
|
|
border-[#D1D5DB]
|
|
text-[#0F3CC9]
|
|
focus:ring-[#0F3CC9]
|
|
disabled:opacity-30
|
|
disabled:cursor-not-allowed
|
|
"
|
|
/>
|
|
</div>
|
|
</td>
|
|
);
|
|
})}
|
|
</tr>
|
|
),
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <div className="pb-4">
|
|
<label className="flex items-center gap-1.5 text-[13px] font-medium text-[#0e1b2a] mb-3">
|
|
<span>Permissions</span>
|
|
</label>
|
|
{errors.permissions && (
|
|
<p className="text-sm text-[#ef4444] mb-2">
|
|
{errors.permissions.message}
|
|
</p>
|
|
)}
|
|
<div className="border border-[rgba(0,0,0,0.08)] rounded-md p-4">
|
|
{Array.from(availableResourcesAndActions.entries()).length === 0 ? (
|
|
<p className="text-sm text-[#6b7280]">No permissions available</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{Array.from(availableResourcesAndActions.entries()).map(
|
|
([resource, actions]) => {
|
|
const isExpanded = expandedResources.has(resource);
|
|
const hasSelected = hasSelectedActions(resource, actions);
|
|
return (
|
|
<div
|
|
key={resource}
|
|
className={`border border-[rgba(0,0,0,0.08)] rounded-md overflow-hidden transition-colors ${
|
|
hasSelected ? "bg-[rgba(17,40,104,0.05)]" : "bg-white"
|
|
}`}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleResource(resource)}
|
|
className="w-full flex items-center justify-between p-3 hover:bg-[rgba(0,0,0,0.02)] transition-colors"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{isExpanded ? (
|
|
<ChevronDown className="w-4 h-4 text-[#0e1b2a]" />
|
|
) : (
|
|
<ChevronRight className="w-4 h-4 text-[#0e1b2a]" />
|
|
)}
|
|
<span
|
|
className={`font-medium text-sm capitalize ${
|
|
hasSelected
|
|
? "text-[#112868]"
|
|
: "text-[#0e1b2a]"
|
|
}`}
|
|
>
|
|
{resource.replace(/_/g, " ")}
|
|
</span>
|
|
{hasSelected && (
|
|
<span className="text-xs text-[#112868] bg-[rgba(17,40,104,0.1)] px-2 py-0.5 rounded">
|
|
Selected
|
|
</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
{isExpanded && (
|
|
<div className="px-3 pb-3 pt-2 border-t border-[rgba(0,0,0,0.05)]">
|
|
<div className="flex flex-wrap gap-4">
|
|
{Array.from(actions).map((action) => {
|
|
const isChecked = selectedPermissions.some(
|
|
(p) => {
|
|
// Check for exact match
|
|
if (
|
|
p.resource === resource &&
|
|
p.action === action
|
|
)
|
|
return true;
|
|
// Check for wildcard resource with exact action
|
|
if (
|
|
p.resource === "*" &&
|
|
p.action === action
|
|
)
|
|
return true;
|
|
// Check for exact resource with wildcard action
|
|
if (
|
|
p.resource === resource &&
|
|
p.action === "*"
|
|
)
|
|
return true;
|
|
// Check for wildcard resource with wildcard action
|
|
if (p.resource === "*" && p.action === "*")
|
|
return true;
|
|
return false;
|
|
},
|
|
);
|
|
return (
|
|
<label
|
|
key={`${resource}-${action}`}
|
|
className="flex items-center gap-2 cursor-pointer"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={isChecked}
|
|
onChange={(e) =>
|
|
handlePermissionChange(
|
|
resource,
|
|
action,
|
|
e.target.checked,
|
|
)
|
|
}
|
|
className="w-4 h-4 text-[#112868] border-[rgba(0,0,0,0.2)] rounded focus:ring-[#112868]/20"
|
|
/>
|
|
<span className="text-sm text-[#0e1b2a] capitalize">
|
|
{action}
|
|
</span>
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div> */}
|
|
</form>
|
|
</Modal>
|
|
);
|
|
};
|