mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-29 02:30:55 +00:00
Merge pull request #63 from Tria-plc/freight/feature/edr_org_seeder
Freight/feature/edr org seeder
This commit is contained in:
Michael Abebe
7
.gitignore
vendored
7
.gitignore
vendored
@@ -21,4 +21,9 @@ coverage/
|
||||
# OS/editor
|
||||
.DS_Store
|
||||
.idea/
|
||||
.vscode/
|
||||
.vscode/
|
||||
|
||||
# emacs cache files
|
||||
*~
|
||||
\#*\#
|
||||
.\#*
|
||||
|
||||
@@ -4,11 +4,13 @@ import {
|
||||
Get,
|
||||
Param,
|
||||
ParseUUIDPipe,
|
||||
Post,
|
||||
Put,
|
||||
} from "@nestjs/common";
|
||||
import { ApiOperation, ApiTags } from "@nestjs/swagger";
|
||||
|
||||
import { BackofficeService } from "./backoffice.service";
|
||||
import { CreateOrganizationUserDto } from "./dto/create-organization-user.dto";
|
||||
import { UpdateEmployeeUserRolesDto } from "./dto/update-employee-user-roles.dto";
|
||||
|
||||
@ApiTags("backoffice")
|
||||
@@ -16,6 +18,15 @@ import { UpdateEmployeeUserRolesDto } from "./dto/update-employee-user-roles.dto
|
||||
export class BackofficeController {
|
||||
constructor(private readonly backofficeService: BackofficeService) {}
|
||||
|
||||
@Post("organizations/:orgId/users")
|
||||
@ApiOperation({ summary: "Create an organization user without assigning positions" })
|
||||
createOrganizationUser(
|
||||
@Param("orgId", ParseUUIDPipe) organizationId: string,
|
||||
@Body() dto: CreateOrganizationUserDto,
|
||||
) {
|
||||
return this.backofficeService.createOrganizationUser(organizationId, dto);
|
||||
}
|
||||
|
||||
@Get("organizations/:orgId/employee-users/:userId/roles")
|
||||
@ApiOperation({ summary: "Get org-scoped roles assigned to an employee user" })
|
||||
getEmployeeUserRoles(
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
import { Module } from "@nestjs/common";
|
||||
import { TypeOrmModule } from "@nestjs/typeorm";
|
||||
import {
|
||||
Employee,
|
||||
Organization,
|
||||
UserCredential,
|
||||
} from "@tria-plc/iamapi-common";
|
||||
|
||||
import { Role } from "@tria-plc/iamapi-common/entities/iam/user/role.entity";
|
||||
import { UserRole } from "@tria-plc/iamapi-common/entities/iam/user/user-role.entity";
|
||||
@@ -9,7 +14,16 @@ import { BackofficeController } from "./backoffice.controller";
|
||||
import { BackofficeService } from "./backoffice.service";
|
||||
|
||||
@Module({
|
||||
imports: [TypeOrmModule.forFeature([Role, UserRole, User])],
|
||||
imports: [
|
||||
TypeOrmModule.forFeature([
|
||||
Employee,
|
||||
Organization,
|
||||
Role,
|
||||
User,
|
||||
UserCredential,
|
||||
UserRole,
|
||||
]),
|
||||
],
|
||||
controllers: [BackofficeController],
|
||||
providers: [BackofficeService],
|
||||
exports: [BackofficeService],
|
||||
|
||||
@@ -4,21 +4,29 @@ import {
|
||||
NotFoundException,
|
||||
} from "@nestjs/common";
|
||||
import { InjectRepository } from "@nestjs/typeorm";
|
||||
import { hashPassword } from "@tria-plc/api-common/utils/argon";
|
||||
import { EUserStatus } from "@tria-plc/api-common/utils/enums/user.enum";
|
||||
import { DataSource, In, IsNull, Repository } from "typeorm";
|
||||
|
||||
import { Employee, Organization, UserCredential } from "@tria-plc/iamapi-common";
|
||||
import { Role } from "@tria-plc/iamapi-common/entities/iam/user/role.entity";
|
||||
import { UserRole } from "@tria-plc/iamapi-common/entities/iam/user/user-role.entity";
|
||||
import { User } from "@tria-plc/iamapi-common/entities/iam/user/user.entity";
|
||||
|
||||
import { CreateOrganizationUserDto } from "./dto/create-organization-user.dto";
|
||||
|
||||
const RESERVED_ROLE_KEYS = new Set([
|
||||
"super_admin",
|
||||
"organization_admin",
|
||||
"unit_admin",
|
||||
]);
|
||||
const DEFAULT_USER_PASSWORD = "12345678";
|
||||
|
||||
@Injectable()
|
||||
export class BackofficeService {
|
||||
constructor(
|
||||
@InjectRepository(Organization)
|
||||
private readonly organizationRepository: Repository<Organization>,
|
||||
@InjectRepository(Role)
|
||||
private readonly roleRepository: Repository<Role>,
|
||||
@InjectRepository(UserRole)
|
||||
@@ -28,6 +36,142 @@ export class BackofficeService {
|
||||
private readonly dataSource: DataSource,
|
||||
) {}
|
||||
|
||||
async createOrganizationUser(
|
||||
organizationId: string,
|
||||
dto: CreateOrganizationUserDto,
|
||||
) {
|
||||
const organizationExists = await this.organizationRepository.exists({
|
||||
where: { id: organizationId },
|
||||
});
|
||||
|
||||
if (!organizationExists) {
|
||||
throw new NotFoundException("organization_not_found");
|
||||
}
|
||||
|
||||
const email = dto.email.trim().toLowerCase();
|
||||
const username = dto.username.trim().toLowerCase();
|
||||
const phoneNumber = dto.phoneNumber?.trim() || undefined;
|
||||
const name = {
|
||||
en: dto.name.en.trim(),
|
||||
...(dto.name.am?.trim() ? { am: dto.name.am.trim() } : {}),
|
||||
};
|
||||
|
||||
const existingUsers = await this.userRepository.find({
|
||||
where: [{ email }, { username }],
|
||||
select: { id: true, email: true, username: true },
|
||||
});
|
||||
|
||||
const emailUser = existingUsers.find((user) => user.email === email);
|
||||
const usernameUser = existingUsers.find((user) => user.username === username);
|
||||
|
||||
if (emailUser && usernameUser && emailUser.id !== usernameUser.id) {
|
||||
throw new BadRequestException("email_or_username_already_in_use");
|
||||
}
|
||||
|
||||
const existingUser = emailUser ?? usernameUser;
|
||||
const hashedPassword = await hashPassword(DEFAULT_USER_PASSWORD);
|
||||
|
||||
return this.dataSource.transaction(async (manager) => {
|
||||
let user = existingUser;
|
||||
|
||||
if (!user) {
|
||||
user = await manager.getRepository(User).save(
|
||||
manager.getRepository(User).create({
|
||||
email,
|
||||
username,
|
||||
phoneNumber,
|
||||
name,
|
||||
isActive: true,
|
||||
hasSetPassword: true,
|
||||
status: EUserStatus.ACCEPTED,
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
await manager.getRepository(User).update(
|
||||
{ id: user.id },
|
||||
{
|
||||
email,
|
||||
username,
|
||||
phoneNumber,
|
||||
name,
|
||||
isActive: true,
|
||||
hasSetPassword: true,
|
||||
status: EUserStatus.ACCEPTED,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const activeCredentialExists = await manager.getRepository(UserCredential).exists({
|
||||
where: {
|
||||
userId: user.id,
|
||||
isActive: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!activeCredentialExists) {
|
||||
await manager.getRepository(UserCredential).insert({
|
||||
userId: user.id,
|
||||
password: hashedPassword,
|
||||
isActive: true,
|
||||
});
|
||||
}
|
||||
|
||||
let employee = await manager.getRepository(Employee).findOne({
|
||||
where: {
|
||||
userId: user.id,
|
||||
organizationId,
|
||||
isCurrent: true,
|
||||
},
|
||||
relations: {
|
||||
user: true,
|
||||
employeePositions: {
|
||||
position: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!employee) {
|
||||
const insertResult = await manager.getRepository(Employee).insert({
|
||||
userId: user.id,
|
||||
organizationId,
|
||||
isCurrent: true,
|
||||
name,
|
||||
});
|
||||
|
||||
employee = await manager.getRepository(Employee).findOne({
|
||||
where: { id: insertResult.identifiers[0]?.id as string },
|
||||
relations: {
|
||||
user: true,
|
||||
employeePositions: {
|
||||
position: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
await manager.getRepository(Employee).update(
|
||||
{ id: employee.id },
|
||||
{ name },
|
||||
);
|
||||
|
||||
employee = await manager.getRepository(Employee).findOne({
|
||||
where: { id: employee.id },
|
||||
relations: {
|
||||
user: true,
|
||||
employeePositions: {
|
||||
position: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (!employee) {
|
||||
throw new NotFoundException("employee_create_failed");
|
||||
}
|
||||
|
||||
return employee;
|
||||
});
|
||||
}
|
||||
|
||||
async getEmployeeUserRoles(organizationId: string, userId: string) {
|
||||
await this.assertUserBelongsToOrganization(organizationId, userId);
|
||||
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { ApiProperty } from "@nestjs/swagger";
|
||||
import { IsEmail, IsObject, IsOptional, IsString, MinLength } from "class-validator";
|
||||
|
||||
class CreateOrganizationUserNameDto {
|
||||
@ApiProperty()
|
||||
@IsString()
|
||||
@MinLength(1)
|
||||
en!: string;
|
||||
|
||||
@ApiProperty({ required: false })
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
am?: string;
|
||||
}
|
||||
|
||||
export class CreateOrganizationUserDto {
|
||||
@ApiProperty()
|
||||
@IsEmail()
|
||||
email!: string;
|
||||
|
||||
@ApiProperty()
|
||||
@IsString()
|
||||
@MinLength(1)
|
||||
username!: string;
|
||||
|
||||
@ApiProperty({ required: false })
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
phoneNumber?: string;
|
||||
|
||||
@ApiProperty({ type: CreateOrganizationUserNameDto })
|
||||
@IsObject()
|
||||
name!: CreateOrganizationUserNameDto;
|
||||
}
|
||||
@@ -2,21 +2,48 @@ import { Injectable, Logger } from "@nestjs/common";
|
||||
import {
|
||||
Organization,
|
||||
OrganizationConfiguration,
|
||||
Permission,
|
||||
Role,
|
||||
RolePermission,
|
||||
} from "@tria-plc/iamapi-common";
|
||||
import { DataSource } from "typeorm";
|
||||
import { DataSource, EntityManager, In } from "typeorm";
|
||||
|
||||
const EDR_ORG_KEY = "edr_freight";
|
||||
const EDR_ORG_NAME = { en: "EDR Freight" };
|
||||
const SEED_FLAG = "SEED_EDR_ORG";
|
||||
const EDR_ROLES = [
|
||||
|
||||
type SeedPermission = {
|
||||
key: string;
|
||||
name: { en: string };
|
||||
};
|
||||
|
||||
type SeedRole = {
|
||||
key: string;
|
||||
name: { en: string };
|
||||
permissions: SeedPermission[];
|
||||
};
|
||||
|
||||
type SeedOrganization = {
|
||||
id: string;
|
||||
key: string;
|
||||
};
|
||||
|
||||
const SEED_ROLES: SeedRole[] = [
|
||||
{
|
||||
key: "edr_employee",
|
||||
name: { en: "EDR Employee" },
|
||||
permissions: [
|
||||
// { key: "permission:key", name: { en: "Permission Name" } },
|
||||
{ key: "permission:key", name: { en: "Permission Name" } },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "edr_customer",
|
||||
name: { en: "EDR Customer" },
|
||||
permissions: [
|
||||
// { key: "permission:key", name: { en: "Permission Name" } },
|
||||
{ key: "permission:key", name: { en: "Permission Name" } },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -27,24 +54,31 @@ export class EdrOrgSeeder {
|
||||
constructor(private readonly dataSource: DataSource) {}
|
||||
|
||||
async run() {
|
||||
const shouldSeed = process.env[SEED_FLAG]?.trim().toLowerCase() === "true";
|
||||
|
||||
if (!shouldSeed) {
|
||||
if (!this.shouldSeed()) {
|
||||
this.logger.log(`Skipping EDR org seed because ${SEED_FLAG} is not enabled`);
|
||||
return;
|
||||
}
|
||||
|
||||
const roleRepository = this.dataSource.getRepository(Role);
|
||||
const organizationRepository = this.dataSource.getRepository(Organization);
|
||||
const organizationConfigurationRepository =
|
||||
this.dataSource.getRepository(OrganizationConfiguration);
|
||||
await this.dataSource.transaction(async (manager) => {
|
||||
const organization = await this.ensureOrganization(manager);
|
||||
|
||||
await roleRepository.upsert(EDR_ROLES, {
|
||||
conflictPaths: { key: true },
|
||||
await this.ensureOrganizationConfiguration(manager, organization.id);
|
||||
await this.ensurePermissions(manager, SEED_ROLES);
|
||||
await this.ensureRoles(manager, SEED_ROLES);
|
||||
await this.ensureRolePermissions(manager, SEED_ROLES);
|
||||
});
|
||||
|
||||
this.logger.log("Ensured EDR roles 'edr_employee' and 'edr_customer'");
|
||||
this.logger.log(`Ensured EDR organization seed for '${EDR_ORG_KEY}'`);
|
||||
}
|
||||
|
||||
private shouldSeed() {
|
||||
return process.env[SEED_FLAG]?.trim().toLowerCase() === "true";
|
||||
}
|
||||
|
||||
private async ensureOrganization(
|
||||
manager: EntityManager,
|
||||
): Promise<SeedOrganization> {
|
||||
const organizationRepository = manager.getRepository(Organization);
|
||||
let organization = await organizationRepository.findOne({
|
||||
where: { key: EDR_ORG_KEY },
|
||||
select: { id: true, key: true },
|
||||
@@ -57,18 +91,31 @@ export class EdrOrgSeeder {
|
||||
isGovernmentOrganization: true,
|
||||
});
|
||||
|
||||
organization = {
|
||||
this.logger.log(`Seeded EDR organization '${EDR_ORG_KEY}'`);
|
||||
|
||||
return {
|
||||
id: insertResult.identifiers[0]?.id as string,
|
||||
key: EDR_ORG_KEY,
|
||||
} as Organization;
|
||||
|
||||
this.logger.log(`Seeded EDR organization '${EDR_ORG_KEY}'`);
|
||||
} else {
|
||||
this.logger.log(`Ensured EDR organization '${EDR_ORG_KEY}'`);
|
||||
};
|
||||
}
|
||||
|
||||
this.logger.log(`Ensured EDR organization '${EDR_ORG_KEY}'`);
|
||||
|
||||
return {
|
||||
id: organization.id as string,
|
||||
key: EDR_ORG_KEY,
|
||||
};
|
||||
}
|
||||
|
||||
private async ensureOrganizationConfiguration(
|
||||
manager: EntityManager,
|
||||
organizationId: string,
|
||||
) {
|
||||
const organizationConfigurationRepository =
|
||||
manager.getRepository(OrganizationConfiguration);
|
||||
|
||||
await organizationConfigurationRepository.upsert({
|
||||
organizationId: organization.id,
|
||||
organizationId,
|
||||
canCreateBranchByItself: true,
|
||||
canStartReceivingRecord: true,
|
||||
}, {
|
||||
@@ -79,4 +126,100 @@ export class EdrOrgSeeder {
|
||||
`Ensured organization configuration for '${EDR_ORG_KEY}'`,
|
||||
);
|
||||
}
|
||||
|
||||
private collectPermissions(seedRoles: SeedRole[]) {
|
||||
const permissionByKey = new Map<string, SeedPermission>();
|
||||
|
||||
for (const role of seedRoles) {
|
||||
for (const permission of role.permissions) {
|
||||
permissionByKey.set(permission.key, permission);
|
||||
}
|
||||
}
|
||||
|
||||
return [...permissionByKey.values()];
|
||||
}
|
||||
|
||||
private async ensurePermissions(manager: EntityManager, seedRoles: SeedRole[]) {
|
||||
const permissions = this.collectPermissions(seedRoles);
|
||||
|
||||
if (!permissions.length) {
|
||||
this.logger.log("No EDR role permissions configured; skipping permission seed");
|
||||
return;
|
||||
}
|
||||
|
||||
await manager.getRepository(Permission).upsert(permissions, {
|
||||
conflictPaths: { key: true },
|
||||
});
|
||||
|
||||
this.logger.log(`Ensured ${permissions.length} EDR permissions`);
|
||||
}
|
||||
|
||||
private async ensureRoles(manager: EntityManager, seedRoles: SeedRole[]) {
|
||||
await manager.getRepository(Role).upsert(
|
||||
seedRoles.map(({ key, name }) => ({ key, name })),
|
||||
{
|
||||
conflictPaths: { key: true },
|
||||
},
|
||||
);
|
||||
|
||||
this.logger.log(
|
||||
`Ensured EDR roles '${seedRoles.map((role) => role.key).join("', '")}'`,
|
||||
);
|
||||
}
|
||||
|
||||
private async ensureRolePermissions(
|
||||
manager: EntityManager,
|
||||
seedRoles: SeedRole[],
|
||||
) {
|
||||
const permissions = this.collectPermissions(seedRoles);
|
||||
|
||||
if (!permissions.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const roleRepository = manager.getRepository(Role);
|
||||
const permissionRepository = manager.getRepository(Permission);
|
||||
const rolePermissionRepository = manager.getRepository(RolePermission);
|
||||
|
||||
const roles = await roleRepository.find({
|
||||
where: { key: In(seedRoles.map((role) => role.key)) },
|
||||
select: { id: true, key: true },
|
||||
});
|
||||
const seededPermissions = await permissionRepository.find({
|
||||
where: { key: In(permissions.map((permission) => permission.key)) },
|
||||
select: { id: true, key: true },
|
||||
});
|
||||
|
||||
const roleByKey = new Map(roles.map((role) => [role.key, role]));
|
||||
const permissionByKey = new Map(
|
||||
seededPermissions.map((permission) => [permission.key, permission]),
|
||||
);
|
||||
|
||||
const rolePermissions = seedRoles.flatMap((role) => {
|
||||
const seededRole = roleByKey.get(role.key);
|
||||
|
||||
if (!seededRole) {
|
||||
throw new Error(`missing_role:${role.key}`);
|
||||
}
|
||||
|
||||
return role.permissions.map((permission) => {
|
||||
const seededPermission = permissionByKey.get(permission.key);
|
||||
|
||||
if (!seededPermission) {
|
||||
throw new Error(`missing_permission:${permission.key}`);
|
||||
}
|
||||
|
||||
return {
|
||||
roleId: seededRole.id,
|
||||
permissionId: seededPermission.id,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
await rolePermissionRepository.upsert(rolePermissions, {
|
||||
conflictPaths: { roleId: true, permissionId: true },
|
||||
});
|
||||
|
||||
this.logger.log(`Ensured ${rolePermissions.length} EDR role-permission links`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Navigate, Outlet, Route, Routes, useLocation, useNavigate } from "react-router-dom";
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { DashboardLayout, type SidebarItem } from "@edr/ui-common";
|
||||
import { LayoutDashboard, Network, Paperclip, Settings } from "lucide-react";
|
||||
import { useAuth } from "./auth/useAuth";
|
||||
@@ -9,6 +9,7 @@ import EmployeesPage from "./pages/dashboard/user-management/EmployeesPage";
|
||||
import PermissionsPage from "./pages/dashboard/user-management/PermissionsPage";
|
||||
import RolesPage from "./pages/dashboard/user-management/RolesPage";
|
||||
import UserManagementPage from "./pages/dashboard/user-management/UserManagementPage";
|
||||
import UsersPage from "./pages/dashboard/user-management/UsersPage";
|
||||
import LoadingScreen from "./components/LoadingScreen";
|
||||
import FileUploadSettingsPage from "./pages/documents/FileUploadSettingsPage";
|
||||
import DropdownSettingsPage from "./pages/dropdown_settings/DropdownSettingsPage";
|
||||
@@ -16,50 +17,17 @@ import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
|
||||
import DemoUser2Page from "./pages/dashboard/demo/DemoUser2Page";
|
||||
import { RuleEnginePage } from "./pages/ruleEngine/RuleEngine";
|
||||
|
||||
// Create a QueryClient instance
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: 1,
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: 5 * 60 * 1000, // 5 minutes
|
||||
staleTime: 5 * 60 * 1000,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// const sidebarItems: SidebarItem[] = [
|
||||
// {
|
||||
// label: "Overview",
|
||||
// href: "/dashboard/overview",
|
||||
// icon: <LayoutDashboard />,
|
||||
// },
|
||||
// {
|
||||
// label: "User management",
|
||||
// href: "/dashboard/user-management",
|
||||
// icon: <Network />,
|
||||
// children: [
|
||||
// {
|
||||
// label: "Employees",
|
||||
// href: "/dashboard/user-management/employees",
|
||||
// },
|
||||
// {
|
||||
// label: "Permissions",
|
||||
// href: "/dashboard/user-management/permissions",
|
||||
// },
|
||||
// {
|
||||
// label: "Roles",
|
||||
// href: "/dashboard/user-management/roles",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// label: "Rule Engine",
|
||||
// href: "/dashboard/rule-engine",
|
||||
// icon: <Settings />,
|
||||
// },
|
||||
// ];
|
||||
|
||||
const sidebarItems: SidebarItem[] = [
|
||||
const baseSidebarItems: SidebarItem[] = [
|
||||
{
|
||||
label: "Overview",
|
||||
href: "/dashboard/overview",
|
||||
@@ -70,6 +38,10 @@ const sidebarItems: SidebarItem[] = [
|
||||
href: "/dashboard/user-management",
|
||||
icon: <Network />,
|
||||
children: [
|
||||
{
|
||||
label: "Users",
|
||||
href: "/dashboard/user-management/users",
|
||||
},
|
||||
{
|
||||
label: "Employees",
|
||||
href: "/dashboard/user-management/employees",
|
||||
@@ -98,7 +70,7 @@ const sidebarItems: SidebarItem[] = [
|
||||
label: "Rule Engine",
|
||||
href: "/dashboard/rule-engine",
|
||||
icon: <Settings />,
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
const hasPermission = (
|
||||
@@ -107,16 +79,41 @@ const hasPermission = (
|
||||
) => {
|
||||
if (!user) return false;
|
||||
if (user.permissions?.some((p) => p.key === key)) return true;
|
||||
|
||||
return (user.employee ?? []).some((emp) =>
|
||||
(emp.positions ?? []).some((pos) =>
|
||||
(pos.permissions ?? []).some((p) => p.key === key),
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const DashboardShell = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const sidebarItems: SidebarItem[] = [
|
||||
...baseSidebarItems,
|
||||
...(hasPermission(user, "can:demo:user1")
|
||||
? ([
|
||||
{
|
||||
label: "User1",
|
||||
href: "/dashboard/user1",
|
||||
icon: <Settings />,
|
||||
},
|
||||
] as SidebarItem[])
|
||||
: []),
|
||||
...(hasPermission(user, "can:demo:user2")
|
||||
? ([
|
||||
{
|
||||
label: "User2",
|
||||
href: "/dashboard/user2",
|
||||
icon: <Settings />,
|
||||
},
|
||||
] as SidebarItem[])
|
||||
: []),
|
||||
];
|
||||
|
||||
const displayName = user?.name?.en || user?.username || user?.email || "User";
|
||||
|
||||
return (
|
||||
@@ -158,20 +155,33 @@ const App = () => {
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/dashboard/overview" replace />} />
|
||||
<Route path="/dashboard" element={<Navigate to="/dashboard/overview" replace />} />
|
||||
|
||||
<Route path="/dashboard" element={<DashboardShell />}>
|
||||
<Route path="overview" element={<OverviewPage />} />
|
||||
|
||||
<Route path="user-management" element={<UserManagementPage />} />
|
||||
<Route path="rule-engine" element={<RuleEnginePage />} />
|
||||
<Route path="user-management/users" element={<UsersPage />} />
|
||||
<Route path="user-management/employees" element={<EmployeesPage />} />
|
||||
<Route path="user-management/permissions" element={<PermissionsPage />} />
|
||||
<Route path="user-management/roles" element={<RolesPage />} />
|
||||
<Route path="user1" element={<DemoUser1Page />} />
|
||||
<Route path="user2" element={<DemoUser2Page />} />
|
||||
|
||||
<Route path="file-settings" element={<FileUploadSettingsPage />} />
|
||||
<Route path="dropdown-settings" element={<DropdownSettingsPage />} />
|
||||
<Route path="org-structure" element={<Navigate to="/dashboard/user-management" replace />} />
|
||||
<Route path="org-structure/*" element={<Navigate to="/dashboard/user-management" replace />} />
|
||||
<Route path="rule-engine" element={<RuleEnginePage />} />
|
||||
|
||||
<Route path="user1" element={<DemoUser1Page />} />
|
||||
<Route path="user2" element={<DemoUser2Page />} />
|
||||
|
||||
<Route
|
||||
path="org-structure"
|
||||
element={<Navigate to="/dashboard/user-management" replace />}
|
||||
/>
|
||||
<Route
|
||||
path="org-structure/*"
|
||||
element={<Navigate to="/dashboard/user-management" replace />}
|
||||
/>
|
||||
</Route>
|
||||
|
||||
<Route path="*" element={<Navigate to="/dashboard/overview" replace />} />
|
||||
</Routes>
|
||||
</QueryClientProvider>
|
||||
|
||||
@@ -1433,6 +1433,7 @@ const UserManagementPage = () => {
|
||||
No organizations available.
|
||||
</div>
|
||||
)}
|
||||
|
||||
</aside>
|
||||
|
||||
<aside className="rounded-3xl border border-border bg-card p-5 shadow-sm">
|
||||
|
||||
@@ -1,11 +1,755 @@
|
||||
import FeaturePlaceholder from "@/components/FeaturePlaceholder";
|
||||
import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
|
||||
import { isAxiosError } from "axios";
|
||||
import {
|
||||
Badge,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@edr/ui-common";
|
||||
import { Network, RefreshCw, Search, UserCheck, UserMinus, Users } from "lucide-react";
|
||||
|
||||
import { api } from "@/auth/http";
|
||||
import { useAuth } from "@/auth/useAuth";
|
||||
|
||||
interface LocaleText {
|
||||
en?: string;
|
||||
am?: string;
|
||||
}
|
||||
|
||||
interface OrganizationRecord {
|
||||
id: string;
|
||||
key: string;
|
||||
name: LocaleText;
|
||||
}
|
||||
|
||||
interface EmployeeUserRecord {
|
||||
id: string;
|
||||
name?: LocaleText;
|
||||
email?: string;
|
||||
phoneNumber?: string;
|
||||
username?: string;
|
||||
}
|
||||
|
||||
interface EmployeePositionSummary {
|
||||
id: string;
|
||||
position?: {
|
||||
id: string;
|
||||
name?: LocaleText;
|
||||
};
|
||||
}
|
||||
|
||||
interface EmployeeRecord {
|
||||
id: string;
|
||||
name?: LocaleText;
|
||||
user?: EmployeeUserRecord;
|
||||
status?: string;
|
||||
employeePositions?: EmployeePositionSummary[];
|
||||
}
|
||||
|
||||
interface RoleRecord {
|
||||
id: string;
|
||||
key: string;
|
||||
name: LocaleText;
|
||||
}
|
||||
|
||||
interface UserFormState {
|
||||
nameEn: string;
|
||||
nameAm: string;
|
||||
email: string;
|
||||
username: string;
|
||||
phoneNumber: string;
|
||||
}
|
||||
|
||||
interface ListResponse<T> {
|
||||
items?: T[];
|
||||
data?: T[];
|
||||
}
|
||||
|
||||
const RESERVED_ROLE_KEYS = new Set(["super_admin", "organization_admin", "unit_admin"]);
|
||||
|
||||
const emptyUserForm: UserFormState = {
|
||||
nameEn: "",
|
||||
nameAm: "",
|
||||
email: "",
|
||||
username: "",
|
||||
phoneNumber: "",
|
||||
};
|
||||
|
||||
const inputClassName =
|
||||
"w-full rounded-xl border border-border bg-background px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 dark:focus:ring-emerald-950";
|
||||
const buttonClassName =
|
||||
"inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-60";
|
||||
|
||||
const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") => {
|
||||
if (!value) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
return value.en ?? value.am ?? fallback;
|
||||
};
|
||||
|
||||
const getItems = <T,>(payload: ListResponse<T> | T[] | undefined | null) => {
|
||||
if (!payload) {
|
||||
return [] as T[];
|
||||
}
|
||||
|
||||
if (Array.isArray(payload)) {
|
||||
return payload;
|
||||
}
|
||||
|
||||
return payload.items ?? payload.data ?? [];
|
||||
};
|
||||
|
||||
const getErrorMessage = (error: unknown, fallback: string) => {
|
||||
if (isAxiosError(error)) {
|
||||
const message = error.response?.data?.message;
|
||||
if (typeof message === "string") {
|
||||
return message;
|
||||
}
|
||||
if (Array.isArray(message) && typeof message[0] === "string") {
|
||||
return message[0];
|
||||
}
|
||||
}
|
||||
|
||||
return error instanceof Error ? error.message : fallback;
|
||||
};
|
||||
|
||||
const Field = ({ label, children }: { label: string; children: ReactNode }) => (
|
||||
<label className="flex flex-col gap-2 text-sm">
|
||||
<span className="font-medium text-foreground">{label}</span>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
|
||||
const ManagementDialog = ({
|
||||
open,
|
||||
title,
|
||||
description,
|
||||
onOpenChange,
|
||||
children,
|
||||
}: {
|
||||
open: boolean;
|
||||
title: string;
|
||||
description?: string;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
children: ReactNode;
|
||||
}) => (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
{description ? <DialogDescription>{description}</DialogDescription> : null}
|
||||
</DialogHeader>
|
||||
{children}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
const UsersPage = () => {
|
||||
const { user } = useAuth();
|
||||
const [organizations, setOrganizations] = useState<OrganizationRecord[]>([]);
|
||||
const [orgEmployees, setOrgEmployees] = useState<EmployeeRecord[]>([]);
|
||||
const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);
|
||||
const [orgUserSearch, setOrgUserSearch] = useState("");
|
||||
const [createUserForm, setCreateUserForm] = useState<UserFormState>(emptyUserForm);
|
||||
const [availableRoles, setAvailableRoles] = useState<RoleRecord[]>([]);
|
||||
const [roleIds, setRoleIds] = useState<string[]>([]);
|
||||
const [selectedRoleUser, setSelectedRoleUser] = useState<EmployeeRecord | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [orgEmployeesLoading, setOrgEmployeesLoading] = useState(false);
|
||||
const [rolesLoading, setRolesLoading] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [actionError, setActionError] = useState<string | null>(null);
|
||||
const [actionSuccess, setActionSuccess] = useState<string | null>(null);
|
||||
const [isCreateUserOpen, setIsCreateUserOpen] = useState(false);
|
||||
const [isManageRolesOpen, setIsManageRolesOpen] = useState(false);
|
||||
|
||||
const isSuperAdmin = Boolean(user?.roles?.some((role) => role.key === "super_admin"));
|
||||
const allowedOrgIds = useMemo(
|
||||
() => new Set((user?.employee ?? []).map((employee) => employee.organizationId).filter(Boolean)),
|
||||
[user?.employee],
|
||||
);
|
||||
|
||||
const visibleOrganizations = useMemo(() => {
|
||||
if (isSuperAdmin) {
|
||||
return organizations;
|
||||
}
|
||||
|
||||
return organizations.filter((organization) => allowedOrgIds.has(organization.id));
|
||||
}, [allowedOrgIds, isSuperAdmin, organizations]);
|
||||
|
||||
const selectedOrganization = useMemo(
|
||||
() => visibleOrganizations.find((item) => item.id === selectedOrgId) ?? null,
|
||||
[selectedOrgId, visibleOrganizations],
|
||||
);
|
||||
|
||||
const filteredOrgEmployees = useMemo(() => {
|
||||
const query = orgUserSearch.trim().toLowerCase();
|
||||
|
||||
return orgEmployees.filter((employee) => {
|
||||
const label = getLocaleLabel(
|
||||
employee.name ?? employee.user?.name,
|
||||
employee.user?.email ?? employee.id,
|
||||
).toLowerCase();
|
||||
const email = employee.user?.email?.toLowerCase() ?? "";
|
||||
const username = employee.user?.username?.toLowerCase() ?? "";
|
||||
|
||||
if (!query) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return label.includes(query) || email.includes(query) || username.includes(query);
|
||||
});
|
||||
}, [orgEmployees, orgUserSearch]);
|
||||
|
||||
const resetMessages = () => {
|
||||
setActionError(null);
|
||||
setActionSuccess(null);
|
||||
};
|
||||
|
||||
const loadOrganizations = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setLoadError(null);
|
||||
|
||||
try {
|
||||
const response = await api.get<ListResponse<OrganizationRecord>>("/organizations");
|
||||
setOrganizations(getItems(response.data));
|
||||
} catch (error) {
|
||||
setLoadError(getErrorMessage(error, "Failed to load organizations."));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadOrgEmployees = useCallback(async (organizationId: string) => {
|
||||
setOrgEmployeesLoading(true);
|
||||
|
||||
try {
|
||||
const response = await api.get<ListResponse<EmployeeRecord>>(
|
||||
`/employees/${organizationId}/by-organization`,
|
||||
);
|
||||
setOrgEmployees(getItems(response.data));
|
||||
} catch {
|
||||
setOrgEmployees([]);
|
||||
} finally {
|
||||
setOrgEmployeesLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadOrganizations();
|
||||
}, [loadOrganizations]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visibleOrganizations.length) {
|
||||
setSelectedOrgId(null);
|
||||
setOrgEmployees([]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedOrgId && visibleOrganizations.some((organization) => organization.id === selectedOrgId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedOrgId(visibleOrganizations[0]?.id ?? null);
|
||||
}, [selectedOrgId, visibleOrganizations]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedOrgId) {
|
||||
setOrgEmployees([]);
|
||||
return;
|
||||
}
|
||||
|
||||
void loadOrgEmployees(selectedOrgId);
|
||||
}, [loadOrgEmployees, selectedOrgId]);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
resetMessages();
|
||||
await Promise.all([
|
||||
loadOrganizations(),
|
||||
selectedOrgId ? loadOrgEmployees(selectedOrgId) : Promise.resolve(),
|
||||
]);
|
||||
};
|
||||
|
||||
const handleSelectOrganization = async (organizationId: string) => {
|
||||
setSelectedOrgId(organizationId);
|
||||
setOrgEmployees([]);
|
||||
resetMessages();
|
||||
|
||||
try {
|
||||
await loadOrgEmployees(organizationId);
|
||||
} catch {
|
||||
// Loader already handles fallback state.
|
||||
}
|
||||
};
|
||||
|
||||
const openCreateUserDialog = () => {
|
||||
if (!selectedOrgId) {
|
||||
setActionError("Select an organization before adding a user.");
|
||||
return;
|
||||
}
|
||||
|
||||
setCreateUserForm(emptyUserForm);
|
||||
resetMessages();
|
||||
setIsCreateUserOpen(true);
|
||||
};
|
||||
|
||||
const openManageRolesDialog = async (employee: EmployeeRecord) => {
|
||||
if (!selectedOrgId || !employee.user?.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
setRolesLoading(true);
|
||||
resetMessages();
|
||||
setSelectedRoleUser(employee);
|
||||
setIsManageRolesOpen(true);
|
||||
|
||||
try {
|
||||
const [rolesResponse, assignedResponse] = await Promise.all([
|
||||
api.get<ListResponse<RoleRecord>>("/roles"),
|
||||
api.get<RoleRecord[]>(`/backoffice/organizations/${selectedOrgId}/employee-users/${employee.user.id}/roles`),
|
||||
]);
|
||||
const roles = getItems(rolesResponse.data).filter((role) => !RESERVED_ROLE_KEYS.has(role.key));
|
||||
setAvailableRoles(roles);
|
||||
setRoleIds(getItems(assignedResponse.data).map((role) => role.id));
|
||||
} catch (error) {
|
||||
setActionError(getErrorMessage(error, "Failed to load user roles."));
|
||||
setAvailableRoles([]);
|
||||
setRoleIds([]);
|
||||
} finally {
|
||||
setRolesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateUser = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!selectedOrgId) {
|
||||
setActionError("Select an organization before adding a user.");
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
resetMessages();
|
||||
|
||||
try {
|
||||
const response = await api.post<EmployeeRecord>(
|
||||
`/backoffice/organizations/${selectedOrgId}/users`,
|
||||
{
|
||||
username: createUserForm.username.trim(),
|
||||
phoneNumber: createUserForm.phoneNumber.trim(),
|
||||
email: createUserForm.email.trim(),
|
||||
name: {
|
||||
am: createUserForm.nameAm.trim(),
|
||||
en: createUserForm.nameEn.trim(),
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
setCreateUserForm(emptyUserForm);
|
||||
setIsCreateUserOpen(false);
|
||||
setActionSuccess("User created. Default password: 12345678.");
|
||||
await loadOrgEmployees(selectedOrgId);
|
||||
await openManageRolesDialog(response.data);
|
||||
} catch (error) {
|
||||
setActionError(getErrorMessage(error, "Failed to create user."));
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveRoles = async () => {
|
||||
if (!selectedOrgId || !selectedRoleUser?.user?.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
resetMessages();
|
||||
|
||||
try {
|
||||
await api.put(
|
||||
`/backoffice/organizations/${selectedOrgId}/employee-users/${selectedRoleUser.user.id}/roles`,
|
||||
{ roleIds },
|
||||
);
|
||||
setActionSuccess("User roles updated.");
|
||||
setIsManageRolesOpen(false);
|
||||
} catch (error) {
|
||||
setActionError(getErrorMessage(error, "Failed to update user roles."));
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleUserActivation = async (employee: EmployeeRecord) => {
|
||||
if (!employee.user?.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isInactive = employee.status?.toLowerCase() === "inactive";
|
||||
setSubmitting(true);
|
||||
resetMessages();
|
||||
|
||||
try {
|
||||
await api.patch(`/users/${isInactive ? "activate-user" : "deactivate-user"}/${employee.user.id}`);
|
||||
setActionSuccess(isInactive ? "User activated." : "User deactivated.");
|
||||
if (selectedOrgId) {
|
||||
await loadOrgEmployees(selectedOrgId);
|
||||
}
|
||||
} catch (error) {
|
||||
setActionError(getErrorMessage(error, "Failed to update user status."));
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<FeaturePlaceholder
|
||||
title="Users"
|
||||
description="Manage backoffice user accounts, activation state, and directory records for internal freight teams."
|
||||
/>
|
||||
<section className="space-y-6 bg-background p-6 text-foreground">
|
||||
<div className="rounded-3xl border border-border bg-linear-to-br from-emerald-100 via-card to-background p-6 shadow-sm dark:from-emerald-950/30 dark:via-card dark:to-background">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300">
|
||||
<Network className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium uppercase tracking-[0.2em] text-emerald-700 dark:text-emerald-300">
|
||||
User management
|
||||
</p>
|
||||
<h1 className="text-2xl font-semibold text-foreground">Users</h1>
|
||||
<p className="max-w-3xl text-sm text-muted-foreground">
|
||||
Create organization users, activate or deactivate access, and assign organization-scoped roles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleRefresh()}
|
||||
className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{actionSuccess ? (
|
||||
<div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/30 dark:text-emerald-200">
|
||||
{actionSuccess}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{actionError ? (
|
||||
<div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-200">
|
||||
{actionError}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{loadError ? (
|
||||
<div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-200">
|
||||
{loadError}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{loading ? (
|
||||
<div className="rounded-3xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
|
||||
Loading users workspace...
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-6 xl:grid-cols-4">
|
||||
<aside className="rounded-3xl border border-border bg-card p-5 shadow-sm">
|
||||
<div className="mb-5">
|
||||
<h2 className="text-lg font-semibold text-card-foreground">Organization</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{isSuperAdmin ? "All organizations" : "Assigned organizations"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{visibleOrganizations.length ? (
|
||||
<ul className="space-y-2">
|
||||
{visibleOrganizations.map((organization) => {
|
||||
const isActive = selectedOrgId === organization.id;
|
||||
const isDisabled = !isSuperAdmin;
|
||||
|
||||
return (
|
||||
<li key={organization.id}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isDisabled}
|
||||
onClick={() => void handleSelectOrganization(organization.id)}
|
||||
className={`flex w-full items-center justify-between gap-2 rounded-2xl border px-4 py-3 text-left transition ${
|
||||
isActive
|
||||
? "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-100"
|
||||
: "border-border bg-card text-card-foreground hover:border-emerald-200 hover:bg-emerald-50/80 dark:hover:bg-slate-900"
|
||||
} ${isDisabled ? "cursor-default" : ""}`}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate font-medium">
|
||||
{getLocaleLabel(organization.name, organization.key)}
|
||||
</div>
|
||||
<div className="truncate text-xs text-muted-foreground">{organization.key}</div>
|
||||
</div>
|
||||
{!isSuperAdmin ? <Badge className="bg-sky-100 text-sky-700">Assigned</Badge> : null}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
No organizations available.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={!selectedOrgId || submitting}
|
||||
onClick={openCreateUserDialog}
|
||||
className={`${buttonClassName} mt-4 w-full bg-emerald-600 text-white hover:bg-emerald-700`}
|
||||
>
|
||||
Add user to organization
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<section className="rounded-3xl border border-border bg-card p-5 shadow-sm xl:col-span-3">
|
||||
<div className="mb-5 flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-card-foreground">Users</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{selectedOrganization
|
||||
? `Manage users in ${getLocaleLabel(selectedOrganization.name, selectedOrganization.key)}`
|
||||
: "Select an organization"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
|
||||
{orgEmployees.length} users
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-4">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<input
|
||||
className={`${inputClassName} pl-9`}
|
||||
value={orgUserSearch}
|
||||
onChange={(event) => setOrgUserSearch(event.target.value)}
|
||||
placeholder="Search users"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{orgEmployeesLoading ? (
|
||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
Loading users...
|
||||
</div>
|
||||
) : filteredOrgEmployees.length ? (
|
||||
<div className="space-y-3">
|
||||
{filteredOrgEmployees.map((employee) => {
|
||||
const userId = employee.user?.id;
|
||||
const displayName = getLocaleLabel(
|
||||
employee.name ?? employee.user?.name,
|
||||
employee.user?.email ?? employee.id,
|
||||
);
|
||||
const assignedPositions = employee.employeePositions
|
||||
?.map((position) => getLocaleLabel(position.position?.name, position.position?.id ?? ""))
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
|
||||
return (
|
||||
<article
|
||||
key={employee.id}
|
||||
className="rounded-2xl border border-border bg-background p-4 shadow-sm"
|
||||
>
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h3 className="text-base font-semibold text-foreground">{displayName}</h3>
|
||||
{employee.status ? (
|
||||
<Badge className="bg-gray-100 text-gray-700">{employee.status}</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{employee.user?.email || employee.user?.username || "No contact info"}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{assignedPositions ? `Current positions: ${assignedPositions}` : "No positions assigned."}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
disabled={!userId || submitting}
|
||||
onClick={() => void handleToggleUserActivation(employee)}
|
||||
className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
|
||||
>
|
||||
{employee.status?.toLowerCase() === "inactive" ? (
|
||||
<>
|
||||
<UserCheck className="h-4 w-4" />
|
||||
Activate
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserMinus className="h-4 w-4" />
|
||||
Deactivate
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={!userId || !selectedOrgId || submitting}
|
||||
onClick={() => void openManageRolesDialog(employee)}
|
||||
className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
|
||||
>
|
||||
<Users className="h-4 w-4" />
|
||||
Manage roles
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
{selectedOrganization
|
||||
? "No users found for this organization."
|
||||
: "Select an organization to load users."}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ManagementDialog
|
||||
open={isCreateUserOpen}
|
||||
onOpenChange={setIsCreateUserOpen}
|
||||
title="Add user"
|
||||
description={
|
||||
selectedOrganization
|
||||
? `Create a loginable user in ${getLocaleLabel(selectedOrganization.name, selectedOrganization.key)}. Default password: 12345678.`
|
||||
: "Create a loginable user in the selected organization."
|
||||
}
|
||||
>
|
||||
<form className="space-y-4" onSubmit={handleCreateUser}>
|
||||
<Field label="English name">
|
||||
<input
|
||||
className={inputClassName}
|
||||
value={createUserForm.nameEn}
|
||||
onChange={(event) => setCreateUserForm((current) => ({ ...current, nameEn: event.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Amharic name">
|
||||
<input
|
||||
className={inputClassName}
|
||||
value={createUserForm.nameAm}
|
||||
onChange={(event) => setCreateUserForm((current) => ({ ...current, nameAm: event.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Email">
|
||||
<input
|
||||
className={inputClassName}
|
||||
type="email"
|
||||
value={createUserForm.email}
|
||||
onChange={(event) => setCreateUserForm((current) => ({ ...current, email: event.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Username">
|
||||
<input
|
||||
className={inputClassName}
|
||||
value={createUserForm.username}
|
||||
onChange={(event) => setCreateUserForm((current) => ({ ...current, username: event.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Phone number">
|
||||
<input
|
||||
className={inputClassName}
|
||||
value={createUserForm.phoneNumber}
|
||||
onChange={(event) => setCreateUserForm((current) => ({ ...current, phoneNumber: event.target.value }))}
|
||||
/>
|
||||
</Field>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsCreateUserOpen(false)}
|
||||
className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" disabled={submitting} className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}>
|
||||
Create user
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ManagementDialog>
|
||||
|
||||
<ManagementDialog
|
||||
open={isManageRolesOpen}
|
||||
onOpenChange={setIsManageRolesOpen}
|
||||
title="Manage roles"
|
||||
description={
|
||||
selectedRoleUser
|
||||
? `Assign organization-scoped roles for ${getLocaleLabel(selectedRoleUser.name ?? selectedRoleUser.user?.name, selectedRoleUser.user?.email ?? selectedRoleUser.id)}.`
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{rolesLoading ? (
|
||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
Loading roles...
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-[420px] space-y-2 overflow-y-auto pr-1">
|
||||
{availableRoles.map((role) => (
|
||||
<label
|
||||
key={role.id}
|
||||
className="flex items-center gap-3 rounded-2xl border border-border bg-background px-4 py-3 text-sm"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={roleIds.includes(role.id)}
|
||||
onChange={(event) => {
|
||||
setRoleIds((current) =>
|
||||
event.target.checked
|
||||
? [...current, role.id]
|
||||
: current.filter((currentRoleId) => currentRoleId !== role.id),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{getLocaleLabel(role.name, role.key)}</div>
|
||||
<div className="text-xs text-muted-foreground">{role.key}</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
{!availableRoles.length ? (
|
||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
No assignable roles available.
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsManageRolesOpen(false)}
|
||||
className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={submitting || rolesLoading}
|
||||
onClick={() => void handleSaveRoles()}
|
||||
className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
|
||||
>
|
||||
Save roles
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ManagementDialog>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user