feat(Issuers): add , edit, delete , toggle ,capability and currencies functionality
This commit is contained in:
ghazall-ag
@@ -153,7 +153,7 @@ const Roles = () => {
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
/>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-lg card p-6 relative">
|
||||
<div className="w-full max-w-2xl card p-6 relative">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Add Role</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Create a new role with permissions</p>
|
||||
@@ -170,16 +170,34 @@ const Roles = () => {
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm mb-2 text-gray-700 dark:text-gray-300">Permissions</label>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedPermissions(permissionOptions.map(p => typeof p === 'string' ? p : p?.name).filter(Boolean))}
|
||||
className="text-xs border px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-primary-50 dark:hover:bg-gray-600 transition"
|
||||
>
|
||||
Select All
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedPermissions([])}
|
||||
className="text-xs border px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-red-50 dark:hover:bg-gray-600 transition"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 max-h-48 overflow-y-auto border rounded-lg p-3 bg-gray-50 dark:bg-gray-800">
|
||||
{permissionOptions.map((perm) => {
|
||||
const permName = typeof perm === 'string' ? perm : perm?.name;
|
||||
const permDesc = typeof perm === 'object' ? perm?.description : undefined;
|
||||
const checked = selectedPermissions.includes(permName);
|
||||
return (
|
||||
<label key={permName} className="inline-flex items-center gap-x-2 space-x-reverse justify-start">
|
||||
<label key={permName}
|
||||
className="flex items-start gap-x-2 cursor-pointer border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 px-2 py-2 shadow-sm hover:border-primary-400 dark:hover:border-primary-600 relative transition"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-4 w-4 text-primary-600 border-gray-300 rounded"
|
||||
className="mt-1 h-4 w-4 text-primary-600 border-gray-300 rounded"
|
||||
checked={checked}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
@@ -189,37 +207,32 @@ const Roles = () => {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300 mx-2">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-200 flex flex-col">
|
||||
<span
|
||||
title={permDesc || ''}
|
||||
className={permDesc ? 'underline decoration-dotted decoration-gray-400 cursor-help' : ''}
|
||||
>
|
||||
{permName}
|
||||
{permDesc ? (
|
||||
<span className="ml-2 text-xs text-gray-500 dark:text-gray-400 block">{permDesc}</span>
|
||||
) : null}
|
||||
</span>
|
||||
{permDesc && (
|
||||
<span className="text-xs text-gray-400 dark:text-gray-400 mt-1 ">{permDesc}</span>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedPermissions([])}
|
||||
className="text-xs text-blue-600 dark:text-gray-300 hover:underline"
|
||||
>
|
||||
Clear selection
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<label className="block text-xs mb-1 text-gray-500 dark:text-gray-400">Or enter custom permissions (comma-separated)</label>
|
||||
<div className="mt-4 p-3 rounded bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
|
||||
<label className="block text-xs mb-1 text-gray-500 dark:text-gray-400">Custom permissions (comma separated)</label>
|
||||
<input
|
||||
value={permissionsInput}
|
||||
onChange={(e) => setPermissionsInput(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
placeholder="Administrator, RoleManagement"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-x-2">
|
||||
<div className="flex items-center justify-end gap-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
@@ -245,7 +258,7 @@ const Roles = () => {
|
||||
onClick={() => setIsEditModalOpen(false)}
|
||||
/>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-lg card p-6 relative">
|
||||
<div className="w-full max-w-2xl card p-6 relative">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Edit Role</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Update role name and permissions</p>
|
||||
@@ -262,16 +275,34 @@ const Roles = () => {
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm mb-2 text-gray-700 dark:text-gray-300">Permissions</label>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedPermissions(permissionOptions.map(p => typeof p === 'string' ? p : p?.name).filter(Boolean))}
|
||||
className="text-xs border px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-primary-50 dark:hover:bg-gray-600 transition"
|
||||
>
|
||||
Select All
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedPermissions([])}
|
||||
className="text-xs border px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-red-50 dark:hover:bg-gray-600 transition"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 max-h-48 overflow-y-auto border rounded-lg p-3 bg-gray-50 dark:bg-gray-800">
|
||||
{permissionOptions.map((perm) => {
|
||||
const permName = typeof perm === 'string' ? perm : perm?.name;
|
||||
const permDesc = typeof perm === 'object' ? perm?.description : undefined;
|
||||
const checked = selectedPermissions.includes(permName);
|
||||
return (
|
||||
<label key={permName} className="inline-flex items-center space-x-reverse justify-start">
|
||||
<label key={permName}
|
||||
className="flex items-start gap-x-2 cursor-pointer border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 px-2 py-2 shadow-sm hover:border-primary-400 dark:hover:border-primary-600 relative transition"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-4 w-4 text-primary-600 border-gray-300 rounded"
|
||||
className="mt-1 h-4 w-4 text-primary-600 border-gray-300 rounded"
|
||||
checked={checked}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
@@ -281,37 +312,32 @@ const Roles = () => {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300 mx-2">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-200 flex flex-col">
|
||||
<span
|
||||
title={permDesc || ''}
|
||||
className={permDesc ? 'underline decoration-dotted decoration-gray-400 cursor-help' : ''}
|
||||
>
|
||||
{permName}
|
||||
{permDesc ? (
|
||||
<span className="ml-2 text-xs text-gray-500 dark:text-gray-400 block">{permDesc}</span>
|
||||
) : null}
|
||||
</span>
|
||||
{permDesc && (
|
||||
<span className="text-xs text-gray-400 dark:text-gray-400 mt-1 ">{permDesc}</span>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedPermissions([])}
|
||||
className="text-xs text-blue-600 dark:text-gray-300 hover:underline"
|
||||
>
|
||||
Clear selection
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<label className="block text-xs mb-1 text-gray-500 dark:text-gray-400">Or enter custom permissions (comma-separated)</label>
|
||||
<div className="mt-4 p-3 rounded bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
|
||||
<label className="block text-xs mb-1 text-gray-500 dark:text-gray-400">Custom permissions (comma separated)</label>
|
||||
<input
|
||||
value={permissionsInput}
|
||||
onChange={(e) => setPermissionsInput(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
placeholder="Administrator, RoleManagement"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-x-2">
|
||||
<div className="flex items-center justify-end gap-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsEditModalOpen(false)}
|
||||
|
||||
Reference in New Issue
Block a user