feat(freight:backoffice): temp add user UI

apps/edr-freight-api/src/modules/backoffice/backoffice.controller.ts

@@ -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(

apps/edr-freight-api/src/modules/backoffice/backoffice.module.ts

@@ -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],

apps/edr-freight-api/src/modules/backoffice/backoffice.service.ts

@@ -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);
 

apps/edr-freight-api/src/modules/backoffice/dto/create-organization-user.dto.ts

@@ -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;
+}

apps/edr-freight-web/backoffice/src/App.tsx

@@ -8,6 +8,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";
@@ -26,6 +27,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",
@@ -80,6 +85,10 @@ const DashboardShell = () => {
       href: "/dashboard/user-management",
       icon: <Network />,
       children: [
+        {
+          label: "Users",
+          href: "/dashboard/user-management/users",
+        },
         {
           label: "Employees",
           href: "/dashboard/user-management/employees",
@@ -160,6 +169,7 @@ const App = () => {
       <Route path="/dashboard" element={<DashboardShell />}>
         <Route path="overview" element={<OverviewPage />} />
         <Route path="user-management" element={<UserManagementPage />} />
+        <Route path="user-management/users" element={<UsersPage />} />
         <Route path="file-settings" element={<FileUploadSettingsPage />} />
         <Route path="dropdown-settings" element={<DropdownSettingsPage />} />
         <Route path="rule-engine" element={<RuleEnginePage />} />

apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementPage.tsx

@@ -1433,6 +1433,7 @@ const UserManagementPage = () => {
                 No organizations available.
               </div>
             )}
+
           </aside>
 
           <aside className="rounded-3xl border border-border bg-card p-5 shadow-sm">

apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UsersPage.tsx

@@ -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
+    <section className="space-y-6 bg-background p-6 text-foreground">
-      title="Users"
+      <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">
-      description="Manage backoffice user accounts, activation state, and directory records for internal freight teams."
+        <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>
   );
 };