mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-08 14:48:18 +00:00
fix ui
This commit is contained in:
yaschalew
@@ -63,11 +63,8 @@ import CustomerDetailPage from "./pages/customers/CustomerDetailPage";
|
|||||||
import CustomersPage from "./pages/customers/CustomersPage";
|
import CustomersPage from "./pages/customers/CustomersPage";
|
||||||
import InvoiceDetailPage from "./pages/invoices/InvoiceDetailPage";
|
import InvoiceDetailPage from "./pages/invoices/InvoiceDetailPage";
|
||||||
import InvoicesPage from "./pages/invoices/InvoicesPage";
|
import InvoicesPage from "./pages/invoices/InvoicesPage";
|
||||||
import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
|
|
||||||
import DemoUser2Page from "./pages/dashboard/demo/DemoUser2Page";
|
|
||||||
import MyProfilePage from "./pages/dashboard/MyProfilePage";
|
import MyProfilePage from "./pages/dashboard/MyProfilePage";
|
||||||
import OverviewPage from "./pages/dashboard/OverviewPage";
|
import OverviewPage from "./pages/dashboard/OverviewPage";
|
||||||
import UserManagementHostPage from "./pages/dashboard/user-management/UserManagementHostPage";
|
|
||||||
import PaymentsPage from "./pages/payments/PaymentsPage";
|
import PaymentsPage from "./pages/payments/PaymentsPage";
|
||||||
//import EmployeesPage from "./pages/dashboard/user-management/EmployeesPage";
|
//import EmployeesPage from "./pages/dashboard/user-management/EmployeesPage";
|
||||||
import { RequirePermission } from "./components/auth/RequirePermission";
|
import { RequirePermission } from "./components/auth/RequirePermission";
|
||||||
@@ -78,11 +75,6 @@ import {
|
|||||||
isEthiopianGl,
|
isEthiopianGl,
|
||||||
isSuperAdmin,
|
isSuperAdmin,
|
||||||
} from "./lib/permissions";
|
} from "./lib/permissions";
|
||||||
import PermissionsPage from "./pages/dashboard/user-management/PermissionsPage";
|
|
||||||
import PositionTypesPage from "./pages/dashboard/user-management/PositionTypesPage";
|
|
||||||
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 FileUploadSettingsPage from "./pages/documents/FileUploadSettingsPage";
|
import FileUploadSettingsPage from "./pages/documents/FileUploadSettingsPage";
|
||||||
import DropdownSettingsPage from "./pages/dropdown_settings/DropdownSettingsPage";
|
import DropdownSettingsPage from "./pages/dropdown_settings/DropdownSettingsPage";
|
||||||
import ContractTemplatesPage from "./pages/contract_templates/ContractTemplatesPage";
|
import ContractTemplatesPage from "./pages/contract_templates/ContractTemplatesPage";
|
||||||
@@ -661,7 +653,7 @@ const App = () => {
|
|||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/auth" element={<LoginPage />} />
|
<Route path="/auth" element={<LoginPage />} />
|
||||||
<Route path="/um/*" element={<UserManagementHostPage />} />
|
{/* <Route path="/um/*" element={<UserManagementHostPage />} /> */}
|
||||||
<Route path="/callback" element={<FaydaCallbackPage />} />
|
<Route path="/callback" element={<FaydaCallbackPage />} />
|
||||||
<Route path="*" element={<Navigate to="/auth" replace />} />
|
<Route path="*" element={<Navigate to="/auth" replace />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
@@ -671,7 +663,7 @@ const App = () => {
|
|||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
{UserManagementRoutes()}
|
{UserManagementRoutes()}
|
||||||
<Route path="/um/*" element={<UserManagementHostPage />} />
|
{/* <Route path="/um/*" element={<UserManagementHostPage />} /> */}
|
||||||
<Route path="/health" element={<HealthCheck />} />
|
<Route path="/health" element={<HealthCheck />} />
|
||||||
<Route path="/callback" element={<FaydaCallbackPage />} />
|
<Route path="/callback" element={<FaydaCallbackPage />} />
|
||||||
<Route path="/" element={<Navigate to="/dashboard/overview" replace />} />
|
<Route path="/" element={<Navigate to="/dashboard/overview" replace />} />
|
||||||
@@ -1342,10 +1334,6 @@ const App = () => {
|
|||||||
path="rule-engine/:resource"
|
path="rule-engine/:resource"
|
||||||
element={<RuleEngineLegacyRedirect />}
|
element={<RuleEngineLegacyRedirect />}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Route path="user1" element={<DemoUser1Page />} />
|
|
||||||
<Route path="user2" element={<DemoUser2Page />} />
|
|
||||||
|
|
||||||
<Route path="org-structure" element={<Navigate to="/um" replace />} />
|
<Route path="org-structure" element={<Navigate to="/um" replace />} />
|
||||||
<Route path="org-structure/*" element={<Navigate to="/um" replace />} />
|
<Route path="org-structure/*" element={<Navigate to="/um" replace />} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|||||||
@@ -1,67 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
import { api } from "@/auth/http";
|
|
||||||
|
|
||||||
const DemoUser1Page = () => {
|
|
||||||
const [data, setData] = useState<unknown>(null);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cancelled = false;
|
|
||||||
|
|
||||||
const run = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await api.get("/test_user1");
|
|
||||||
if (cancelled) return;
|
|
||||||
setData(response.data);
|
|
||||||
} catch (e: any) {
|
|
||||||
if (cancelled) return;
|
|
||||||
const message =
|
|
||||||
e?.response?.data?.message ||
|
|
||||||
e?.response?.data?.error ||
|
|
||||||
e?.message ||
|
|
||||||
"Request failed";
|
|
||||||
setError(String(message));
|
|
||||||
} finally {
|
|
||||||
if (!cancelled) setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
void run();
|
|
||||||
return () => {
|
|
||||||
cancelled = true;
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="rounded-2xl border border-border bg-card p-6">
|
|
||||||
<h1 className="text-lg font-semibold text-foreground">User1 Demo</h1>
|
|
||||||
<p className="mt-1 text-sm text-muted-foreground">
|
|
||||||
Calls <code className="font-mono">GET /api/test_user1</code> (requires{' '}
|
|
||||||
<code className="font-mono">can:demo:user1</code>).
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mt-4">
|
|
||||||
{loading ? <p className="text-sm text-muted-foreground">Loading...</p> : null}
|
|
||||||
{error ? (
|
|
||||||
<div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
{!loading && !error ? (
|
|
||||||
<pre className="mt-3 overflow-auto rounded-xl border border-border bg-background p-4 text-xs text-foreground">
|
|
||||||
{JSON.stringify(data, null, 2)}
|
|
||||||
</pre>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DemoUser1Page;
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
import { api } from "@/auth/http";
|
|
||||||
|
|
||||||
const DemoUser2Page = () => {
|
|
||||||
const [data, setData] = useState<unknown>(null);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cancelled = false;
|
|
||||||
|
|
||||||
const run = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await api.get("/test_user2");
|
|
||||||
if (cancelled) return;
|
|
||||||
setData(response.data);
|
|
||||||
} catch (e: any) {
|
|
||||||
if (cancelled) return;
|
|
||||||
const message =
|
|
||||||
e?.response?.data?.message ||
|
|
||||||
e?.response?.data?.error ||
|
|
||||||
e?.message ||
|
|
||||||
"Request failed";
|
|
||||||
setError(String(message));
|
|
||||||
} finally {
|
|
||||||
if (!cancelled) setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
void run();
|
|
||||||
return () => {
|
|
||||||
cancelled = true;
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="rounded-2xl border border-border bg-card p-6">
|
|
||||||
<h1 className="text-lg font-semibold text-foreground">User2 Demo</h1>
|
|
||||||
<p className="mt-1 text-sm text-muted-foreground">
|
|
||||||
Calls <code className="font-mono">GET /api/test_user2</code> (requires{' '}
|
|
||||||
<code className="font-mono">can:demo:user2</code>).
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mt-4">
|
|
||||||
{loading ? <p className="text-sm text-muted-foreground">Loading...</p> : null}
|
|
||||||
{error ? (
|
|
||||||
<div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
{!loading && !error ? (
|
|
||||||
<pre className="mt-3 overflow-auto rounded-xl border border-border bg-background p-4 text-xs text-foreground">
|
|
||||||
{JSON.stringify(data, null, 2)}
|
|
||||||
</pre>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DemoUser2Page;
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,12 +0,0 @@
|
|||||||
import FeaturePlaceholder from "@/components/FeaturePlaceholder";
|
|
||||||
|
|
||||||
const DepartmentsPage = () => {
|
|
||||||
return (
|
|
||||||
<FeaturePlaceholder
|
|
||||||
title="Departments"
|
|
||||||
description="Organize internal departments and associate user administration with freight business units."
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DepartmentsPage;
|
|
||||||
@@ -1,321 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { isAxiosError } from "axios";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@edr/ui-common";
|
|
||||||
|
|
||||||
import { api } from "@/auth/http";
|
|
||||||
import { useAuth } from "@/auth/useAuth";
|
|
||||||
|
|
||||||
interface LocaleText {
|
|
||||||
en?: string;
|
|
||||||
am?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EmployeeUserRecord {
|
|
||||||
id: string;
|
|
||||||
name?: LocaleText;
|
|
||||||
email?: string;
|
|
||||||
phoneNumber?: string;
|
|
||||||
username?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EmployeePositionSummary {
|
|
||||||
id: string;
|
|
||||||
position?: {
|
|
||||||
id: string;
|
|
||||||
name?: LocaleText;
|
|
||||||
key?: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EmployeeRecord {
|
|
||||||
id: string;
|
|
||||||
name?: LocaleText;
|
|
||||||
status?: string;
|
|
||||||
user?: EmployeeUserRecord;
|
|
||||||
employeePositions?: EmployeePositionSummary[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ListResponse<T> {
|
|
||||||
count?: number;
|
|
||||||
items?: T[];
|
|
||||||
data?: T[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") =>
|
|
||||||
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 getEmployeeDisplayName = (employee: EmployeeRecord) =>
|
|
||||||
getLocaleLabel(
|
|
||||||
employee.name ?? employee.user?.name,
|
|
||||||
employee.user?.email ?? employee.user?.username ?? employee.id,
|
|
||||||
);
|
|
||||||
|
|
||||||
const EmployeesPage = () => {
|
|
||||||
const { user } = useAuth();
|
|
||||||
const [employees, setEmployees] = useState<EmployeeRecord[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
||||||
const [selectedEmployee, setSelectedEmployee] = useState<EmployeeRecord | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let isMounted = true;
|
|
||||||
const organizationIds = Array.from(
|
|
||||||
new Set(
|
|
||||||
(user?.employee ?? [])
|
|
||||||
.map((employee) => employee.organizationId)
|
|
||||||
.filter((organizationId): organizationId is string => Boolean(organizationId)),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
const loadEmployees = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setErrorMessage(null);
|
|
||||||
|
|
||||||
if (!organizationIds.length) {
|
|
||||||
setEmployees([]);
|
|
||||||
setErrorMessage("No employee organization scope is available for this account.");
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const responses = await Promise.all(
|
|
||||||
organizationIds.map((organizationId) =>
|
|
||||||
api.get<ListResponse<EmployeeRecord>>(
|
|
||||||
`/backoffice/organizations/${organizationId}/employees`,
|
|
||||||
{
|
|
||||||
params: {
|
|
||||||
skip: 0,
|
|
||||||
take: 1000,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!isMounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const uniqueEmployees = Array.from(
|
|
||||||
new Map(
|
|
||||||
responses
|
|
||||||
.flatMap((response) => getItems(response.data))
|
|
||||||
.map((employee) => [employee.id, employee]),
|
|
||||||
).values(),
|
|
||||||
);
|
|
||||||
|
|
||||||
setEmployees(
|
|
||||||
uniqueEmployees.sort((left, right) =>
|
|
||||||
getEmployeeDisplayName(left).localeCompare(getEmployeeDisplayName(right)),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
if (!isMounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setErrorMessage(
|
|
||||||
isAxiosError(error)
|
|
||||||
? error.response?.data?.message ?? "Unable to load employees."
|
|
||||||
: "Unable to load employees.",
|
|
||||||
);
|
|
||||||
} finally {
|
|
||||||
if (isMounted) {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
void loadEmployees();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
isMounted = false;
|
|
||||||
};
|
|
||||||
}, [user]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="p-6">
|
|
||||||
<div className="space-y-6 rounded-2xl border border-border bg-card p-8 shadow-sm">
|
|
||||||
<div className="space-y-3">
|
|
||||||
<p className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
|
|
||||||
User Management
|
|
||||||
</p>
|
|
||||||
<div className="flex items-start justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-semibold text-foreground">Employees</h1>
|
|
||||||
<p className="mt-3 max-w-2xl text-sm text-muted-foreground">
|
|
||||||
Browse employees within your accessible scope and open a record to review contact and position details.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
|
|
||||||
{employees.length} employees
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
|
||||||
Loading employees...
|
|
||||||
</div>
|
|
||||||
) : errorMessage ? (
|
|
||||||
<div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-8 text-center text-sm text-red-700 dark:border-red-950 dark:bg-red-950/30 dark:text-red-300">
|
|
||||||
{errorMessage}
|
|
||||||
</div>
|
|
||||||
) : employees.length ? (
|
|
||||||
<div className="overflow-x-auto rounded-2xl border border-border">
|
|
||||||
<table className="min-w-[980px] w-full border-collapse text-left text-sm">
|
|
||||||
<thead className="bg-muted/60 text-muted-foreground">
|
|
||||||
<tr>
|
|
||||||
<th className="px-4 py-3 font-medium">Name</th>
|
|
||||||
<th className="px-4 py-3 font-medium">Username</th>
|
|
||||||
<th className="px-4 py-3 font-medium">Email</th>
|
|
||||||
<th className="px-4 py-3 font-medium">Phone</th>
|
|
||||||
<th className="px-4 py-3 font-medium">Status</th>
|
|
||||||
<th className="px-4 py-3 font-medium">Positions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{employees.map((employee) => {
|
|
||||||
const positions = employee.employeePositions?.map((item) => getLocaleLabel(item.position?.name, item.position?.key ?? "Unnamed")) ?? [];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tr
|
|
||||||
key={employee.id}
|
|
||||||
onClick={() => setSelectedEmployee(employee)}
|
|
||||||
className="cursor-pointer border-t border-border bg-background transition hover:bg-accent/20"
|
|
||||||
>
|
|
||||||
<td className="px-4 py-3 font-medium text-foreground">{getEmployeeDisplayName(employee)}</td>
|
|
||||||
<td className="px-4 py-3 text-muted-foreground">{employee.user?.username ?? "-"}</td>
|
|
||||||
<td className="px-4 py-3 text-muted-foreground">{employee.user?.email ?? "-"}</td>
|
|
||||||
<td className="px-4 py-3 text-muted-foreground">{employee.user?.phoneNumber ?? "-"}</td>
|
|
||||||
<td className="px-4 py-3 text-muted-foreground">{employee.status ?? "-"}</td>
|
|
||||||
<td className="px-4 py-3 text-muted-foreground">{positions.join(", ") || "-"}</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
|
||||||
No employees are available in your scope.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Dialog open={Boolean(selectedEmployee)} onOpenChange={(open) => !open && setSelectedEmployee(null)}>
|
|
||||||
<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>
|
|
||||||
{selectedEmployee ? getEmployeeDisplayName(selectedEmployee) : "Employee details"}
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogDescription>
|
|
||||||
{selectedEmployee
|
|
||||||
? "Review the employee profile, contact information, and assigned positions."
|
|
||||||
: undefined}
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
{selectedEmployee ? (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="grid gap-4 rounded-2xl border border-border bg-muted/40 p-4 sm:grid-cols-2">
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
||||||
Employee name
|
|
||||||
</p>
|
|
||||||
<p className="mt-2 text-sm font-semibold text-foreground">
|
|
||||||
{getEmployeeDisplayName(selectedEmployee)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
||||||
Status
|
|
||||||
</p>
|
|
||||||
<p className="mt-2 text-sm font-semibold text-foreground">
|
|
||||||
{selectedEmployee.status ?? "-"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
||||||
Username
|
|
||||||
</p>
|
|
||||||
<p className="mt-2 text-sm text-foreground">{selectedEmployee.user?.username ?? "-"}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
||||||
Email
|
|
||||||
</p>
|
|
||||||
<p className="mt-2 text-sm text-foreground">{selectedEmployee.user?.email ?? "-"}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
||||||
Phone
|
|
||||||
</p>
|
|
||||||
<p className="mt-2 text-sm text-foreground">{selectedEmployee.user?.phoneNumber ?? "-"}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
||||||
Employee ID
|
|
||||||
</p>
|
|
||||||
<p className="mt-2 font-mono text-sm text-foreground">{selectedEmployee.id}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center justify-between gap-3">
|
|
||||||
<h2 className="text-sm font-semibold text-foreground">Assigned positions</h2>
|
|
||||||
<div className="rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
|
|
||||||
{selectedEmployee.employeePositions?.length ?? 0} positions
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{selectedEmployee.employeePositions?.length ? (
|
|
||||||
<div className="grid gap-3 md:grid-cols-2">
|
|
||||||
{selectedEmployee.employeePositions.map((item) => (
|
|
||||||
<article
|
|
||||||
key={item.id}
|
|
||||||
className="rounded-2xl border border-border/70 bg-background/80 p-4 shadow-sm"
|
|
||||||
>
|
|
||||||
<p className="truncate text-sm font-semibold text-foreground">
|
|
||||||
{getLocaleLabel(item.position?.name, item.position?.key ?? "Unnamed")}
|
|
||||||
</p>
|
|
||||||
<p className="mt-1 truncate font-mono text-xs text-muted-foreground/90">
|
|
||||||
{item.position?.key ?? "-"}
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
|
||||||
No positions are assigned to this employee.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EmployeesPage;
|
|
||||||
@@ -1,265 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { isAxiosError } from "axios";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@edr/ui-common";
|
|
||||||
|
|
||||||
import { api } from "@/auth/http";
|
|
||||||
|
|
||||||
interface LocaleText {
|
|
||||||
en?: string;
|
|
||||||
am?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface PermissionRecord {
|
|
||||||
id: string;
|
|
||||||
key: string;
|
|
||||||
name?: LocaleText;
|
|
||||||
applicationId?: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ApplicationRecord {
|
|
||||||
id: string;
|
|
||||||
key: string;
|
|
||||||
name?: LocaleText;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ListResponse<T> {
|
|
||||||
count?: number;
|
|
||||||
items?: T[];
|
|
||||||
data?: T[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const PAGE_SIZE = 2000;
|
|
||||||
const ALL_APPLICATIONS_VALUE = "all";
|
|
||||||
const SYSTEM_APPLICATION_VALUE = "system";
|
|
||||||
|
|
||||||
const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") =>
|
|
||||||
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 sortPermissions = (items: PermissionRecord[]) =>
|
|
||||||
[...items].sort((left, right) =>
|
|
||||||
getLocaleLabel(left.name, left.key).localeCompare(
|
|
||||||
getLocaleLabel(right.name, right.key),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
const PermissionsPage = () => {
|
|
||||||
const [permissions, setPermissions] = useState<PermissionRecord[]>([]);
|
|
||||||
const [applications, setApplications] = useState<ApplicationRecord[]>([]);
|
|
||||||
const [selectedApplication, setSelectedApplication] = useState(ALL_APPLICATIONS_VALUE);
|
|
||||||
const [count, setCount] = useState(0);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [loadingMore, setLoadingMore] = useState(false);
|
|
||||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let isMounted = true;
|
|
||||||
|
|
||||||
const loadPageData = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setErrorMessage(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const [permissionsResponse, applicationsResponse] = await Promise.all([
|
|
||||||
api.get<ListResponse<PermissionRecord>>("/permissions", {
|
|
||||||
params: {
|
|
||||||
skip: 0,
|
|
||||||
take: PAGE_SIZE,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
api.get<ListResponse<ApplicationRecord>>("/applications"),
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (!isMounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const items = sortPermissions(getItems(permissionsResponse.data));
|
|
||||||
const applicationItems = [...getItems(applicationsResponse.data)].sort((left, right) =>
|
|
||||||
getLocaleLabel(left.name, left.key).localeCompare(
|
|
||||||
getLocaleLabel(right.name, right.key),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
setPermissions(items);
|
|
||||||
setApplications(applicationItems);
|
|
||||||
setCount(permissionsResponse.data.count ?? items.length);
|
|
||||||
} catch (error) {
|
|
||||||
if (!isMounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setErrorMessage(
|
|
||||||
isAxiosError(error)
|
|
||||||
? error.response?.data?.message ?? "Unable to load permissions."
|
|
||||||
: "Unable to load permissions.",
|
|
||||||
);
|
|
||||||
} finally {
|
|
||||||
if (isMounted) {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
void loadPageData();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
isMounted = false;
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const hasMore = count > permissions.length;
|
|
||||||
const filteredPermissions = permissions.filter((permission) => {
|
|
||||||
if (selectedApplication === ALL_APPLICATIONS_VALUE) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedApplication === SYSTEM_APPLICATION_VALUE) {
|
|
||||||
return !permission.applicationId;
|
|
||||||
}
|
|
||||||
|
|
||||||
return permission.applicationId === selectedApplication;
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleLoadMore = async () => {
|
|
||||||
setLoadingMore(true);
|
|
||||||
setErrorMessage(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await api.get<ListResponse<PermissionRecord>>("/permissions", {
|
|
||||||
params: {
|
|
||||||
skip: permissions.length,
|
|
||||||
take: PAGE_SIZE,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const nextItems = sortPermissions(getItems(response.data));
|
|
||||||
|
|
||||||
setPermissions((current) => [...current, ...nextItems]);
|
|
||||||
setCount(response.data.count ?? permissions.length + nextItems.length);
|
|
||||||
} catch (error) {
|
|
||||||
setErrorMessage(
|
|
||||||
isAxiosError(error)
|
|
||||||
? error.response?.data?.message ?? "Unable to load more permissions."
|
|
||||||
: "Unable to load more permissions.",
|
|
||||||
);
|
|
||||||
} finally {
|
|
||||||
setLoadingMore(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="p-6">
|
|
||||||
<div className="space-y-6 rounded-2xl border border-border bg-card p-8 shadow-sm">
|
|
||||||
<div className="space-y-3">
|
|
||||||
<p className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
|
|
||||||
User Management
|
|
||||||
</p>
|
|
||||||
<div className="flex items-start justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-semibold text-foreground">Permissions</h1>
|
|
||||||
<p className="mt-3 max-w-2xl text-sm text-muted-foreground">
|
|
||||||
Browse the full IAM permission catalog for the freight backoffice environment.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
|
|
||||||
{filteredPermissions.length} permissions
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-3 rounded-2xl border border-border bg-background/60 p-4 md:grid-cols-[minmax(0,260px)_1fr] md:items-end">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
||||||
Application
|
|
||||||
</p>
|
|
||||||
<Select value={selectedApplication} onValueChange={setSelectedApplication}>
|
|
||||||
<SelectTrigger className="w-full rounded-xl bg-background">
|
|
||||||
<SelectValue placeholder="Select application" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value={ALL_APPLICATIONS_VALUE}>All applications</SelectItem>
|
|
||||||
<SelectItem value={SYSTEM_APPLICATION_VALUE}>System permissions</SelectItem>
|
|
||||||
{applications.map((application) => (
|
|
||||||
<SelectItem key={application.id} value={application.id}>
|
|
||||||
{getLocaleLabel(application.name, application.key)}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Filter the IAM permission catalog by application, or view the shared system permissions that do not belong to any application.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
|
||||||
Loading permissions...
|
|
||||||
</div>
|
|
||||||
) : errorMessage ? (
|
|
||||||
<div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-8 text-center text-sm text-red-700 dark:border-red-950 dark:bg-red-950/30 dark:text-red-300">
|
|
||||||
{errorMessage}
|
|
||||||
</div>
|
|
||||||
) : filteredPermissions.length ? (
|
|
||||||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
|
|
||||||
{filteredPermissions.map((permission) => (
|
|
||||||
<article
|
|
||||||
key={permission.id}
|
|
||||||
className="rounded-2xl border border-border/70 bg-background/80 p-4 shadow-sm transition hover:border-border hover:bg-accent/20"
|
|
||||||
>
|
|
||||||
<div className="min-w-0 space-y-1">
|
|
||||||
<p className="truncate text-sm font-semibold leading-5 text-foreground">
|
|
||||||
{getLocaleLabel(permission.name, permission.key)}
|
|
||||||
</p>
|
|
||||||
<p className="truncate font-mono text-xs text-muted-foreground/90">
|
|
||||||
{permission.key}
|
|
||||||
</p>
|
|
||||||
</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">
|
|
||||||
No permissions match the selected application.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{hasMore ? (
|
|
||||||
<div className="flex items-center justify-between gap-4 rounded-2xl border border-border bg-background px-4 py-3">
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Showing {permissions.length} of {count} permissions.
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => void handleLoadMore()}
|
|
||||||
disabled={loadingMore}
|
|
||||||
className="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-60"
|
|
||||||
>
|
|
||||||
{loadingMore ? "Loading..." : "Load more"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PermissionsPage;
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,293 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { isAxiosError } from "axios";
|
|
||||||
import { Shield } from "lucide-react";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@edr/ui-common";
|
|
||||||
|
|
||||||
import { api } from "@/auth/http";
|
|
||||||
|
|
||||||
interface LocaleText {
|
|
||||||
en?: string;
|
|
||||||
am?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface RoleRecord {
|
|
||||||
id: string;
|
|
||||||
key: string;
|
|
||||||
name?: LocaleText;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface PermissionRecord {
|
|
||||||
id: string;
|
|
||||||
key: string;
|
|
||||||
name?: LocaleText;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ListResponse<T> {
|
|
||||||
items?: T[];
|
|
||||||
data?: T[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") =>
|
|
||||||
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 RolesPage = () => {
|
|
||||||
const [roles, setRoles] = useState<RoleRecord[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
||||||
const [selectedRole, setSelectedRole] = useState<RoleRecord | null>(null);
|
|
||||||
const [rolePermissions, setRolePermissions] = useState<PermissionRecord[]>([]);
|
|
||||||
const [rolePermissionsLoading, setRolePermissionsLoading] = useState(false);
|
|
||||||
const [rolePermissionsError, setRolePermissionsError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let isMounted = true;
|
|
||||||
|
|
||||||
const loadRoles = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setErrorMessage(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await api.get<ListResponse<RoleRecord>>("/roles");
|
|
||||||
|
|
||||||
if (!isMounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setRoles(
|
|
||||||
getItems(response.data).sort((left, right) =>
|
|
||||||
getLocaleLabel(left.name, left.key).localeCompare(
|
|
||||||
getLocaleLabel(right.name, right.key),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
if (!isMounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setErrorMessage(
|
|
||||||
isAxiosError(error)
|
|
||||||
? error.response?.data?.message ?? "Unable to load roles."
|
|
||||||
: "Unable to load roles.",
|
|
||||||
);
|
|
||||||
} finally {
|
|
||||||
if (isMounted) {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
void loadRoles();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
isMounted = false;
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!selectedRole) {
|
|
||||||
setRolePermissions([]);
|
|
||||||
setRolePermissionsError(null);
|
|
||||||
setRolePermissionsLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let isMounted = true;
|
|
||||||
|
|
||||||
const loadRolePermissions = async () => {
|
|
||||||
setRolePermissionsLoading(true);
|
|
||||||
setRolePermissionsError(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await api.get<ListResponse<PermissionRecord>>(
|
|
||||||
`/role-permissions/given-first/${selectedRole.id}`,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!isMounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setRolePermissions(
|
|
||||||
getItems(response.data).sort((left, right) =>
|
|
||||||
getLocaleLabel(left.name, left.key).localeCompare(
|
|
||||||
getLocaleLabel(right.name, right.key),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
if (!isMounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setRolePermissionsError(
|
|
||||||
isAxiosError(error)
|
|
||||||
? error.response?.data?.message ?? "Unable to load role details."
|
|
||||||
: "Unable to load role details.",
|
|
||||||
);
|
|
||||||
} finally {
|
|
||||||
if (isMounted) {
|
|
||||||
setRolePermissionsLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
void loadRolePermissions();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
isMounted = false;
|
|
||||||
};
|
|
||||||
}, [selectedRole]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="p-6">
|
|
||||||
<div className="space-y-6 rounded-2xl border border-border bg-card p-8 shadow-sm">
|
|
||||||
<div className="space-y-3">
|
|
||||||
<p className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
|
|
||||||
User Management
|
|
||||||
</p>
|
|
||||||
<div className="flex items-start justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-semibold text-foreground">Roles</h1>
|
|
||||||
<p className="mt-3 max-w-2xl text-sm text-muted-foreground">
|
|
||||||
Browse freight backoffice roles and their internal keys in a simple grid view.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
|
|
||||||
{roles.length} roles
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<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>
|
|
||||||
) : errorMessage ? (
|
|
||||||
<div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-8 text-center text-sm text-red-700 dark:border-red-950 dark:bg-red-950/30 dark:text-red-300">
|
|
||||||
{errorMessage}
|
|
||||||
</div>
|
|
||||||
) : roles.length ? (
|
|
||||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
||||||
{roles.map((role) => (
|
|
||||||
<button
|
|
||||||
key={role.id}
|
|
||||||
type="button"
|
|
||||||
onClick={() => setSelectedRole(role)}
|
|
||||||
className="rounded-2xl border border-border bg-background p-5 text-left transition hover:border-border/80 hover:bg-accent/20"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 text-sky-600 dark:bg-sky-950/40 dark:text-sky-300">
|
|
||||||
<Shield className="h-5 w-5" />
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0">
|
|
||||||
<p className="truncate text-sm font-semibold text-foreground">
|
|
||||||
{getLocaleLabel(role.name, role.key)}
|
|
||||||
</p>
|
|
||||||
<p className="truncate text-xs text-muted-foreground">{role.key}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
|
||||||
No roles available.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Dialog open={Boolean(selectedRole)} onOpenChange={(open) => !open && setSelectedRole(null)}>
|
|
||||||
<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>{selectedRole ? getLocaleLabel(selectedRole.name, selectedRole.key) : "Role details"}</DialogTitle>
|
|
||||||
<DialogDescription>
|
|
||||||
{selectedRole
|
|
||||||
? `Review the permission set assigned to ${getLocaleLabel(selectedRole.name, selectedRole.key)}.`
|
|
||||||
: undefined}
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
{selectedRole ? (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="grid gap-4 rounded-2xl border border-border bg-muted/40 p-4 sm:grid-cols-2">
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
||||||
Role name
|
|
||||||
</p>
|
|
||||||
<p className="mt-2 text-sm font-semibold text-foreground">
|
|
||||||
{getLocaleLabel(selectedRole.name, selectedRole.key)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
|
||||||
Role key
|
|
||||||
</p>
|
|
||||||
<p className="mt-2 font-mono text-sm text-foreground">{selectedRole.key}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center justify-between gap-3">
|
|
||||||
<h2 className="text-sm font-semibold text-foreground">Permissions</h2>
|
|
||||||
<div className="rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
|
|
||||||
{rolePermissions.length} permissions
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{rolePermissionsLoading ? (
|
|
||||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
|
||||||
Loading role details...
|
|
||||||
</div>
|
|
||||||
) : rolePermissionsError ? (
|
|
||||||
<div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-8 text-center text-sm text-red-700 dark:border-red-950 dark:bg-red-950/30 dark:text-red-300">
|
|
||||||
{rolePermissionsError}
|
|
||||||
</div>
|
|
||||||
) : rolePermissions.length ? (
|
|
||||||
<div className="grid gap-3 md:grid-cols-2">
|
|
||||||
{rolePermissions.map((permission) => (
|
|
||||||
<article
|
|
||||||
key={permission.id}
|
|
||||||
className="rounded-2xl border border-border/70 bg-background/80 p-4 shadow-sm"
|
|
||||||
>
|
|
||||||
<p className="truncate text-sm font-semibold leading-5 text-foreground">
|
|
||||||
{getLocaleLabel(permission.name, permission.key)}
|
|
||||||
</p>
|
|
||||||
<p className="mt-1 truncate font-mono text-xs text-muted-foreground/90">
|
|
||||||
{permission.key}
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
|
||||||
No permissions are assigned to this role.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RolesPage;
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
import { useEffect, useRef } from 'react';
|
|
||||||
import { createRoot, type Root } from 'react-dom/client';
|
|
||||||
import {
|
|
||||||
UserManagementApp,
|
|
||||||
type UserManagementRuntimeOptions,
|
|
||||||
type UserManagementSessionSeed,
|
|
||||||
} from '@tria-plc/iamui';
|
|
||||||
import { iamConfig } from './iamConfig';
|
|
||||||
|
|
||||||
function readCookieValue(name: string): string | null {
|
|
||||||
const escaped = name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1');
|
|
||||||
const match = document.cookie.match(
|
|
||||||
new RegExp(`(?:^|; )${escaped}=([^;]*)`),
|
|
||||||
);
|
|
||||||
|
|
||||||
return match ? decodeURIComponent(match[1]) : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function readInitialSession(): UserManagementSessionSeed | null {
|
|
||||||
const token =
|
|
||||||
localStorage.getItem('fhc-backoffice-auth-token') ??
|
|
||||||
readCookieValue('auth-token');
|
|
||||||
|
|
||||||
if (!token) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const refreshToken =
|
|
||||||
localStorage.getItem('fhc-backoffice-auth-refresh-token') ??
|
|
||||||
readCookieValue('refresh-token') ??
|
|
||||||
undefined;
|
|
||||||
|
|
||||||
return {
|
|
||||||
token,
|
|
||||||
refreshToken,
|
|
||||||
rememberMe: true,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function UserManagementHostPage() {
|
|
||||||
const mountRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
const rootRef = useRef<Root | null>(null);
|
|
||||||
const unmountTimerRef = useRef<number | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const mountNode = mountRef.current;
|
|
||||||
|
|
||||||
if (!mountNode) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (unmountTimerRef.current !== null) {
|
|
||||||
window.clearTimeout(unmountTimerRef.current);
|
|
||||||
unmountTimerRef.current = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!rootRef.current) {
|
|
||||||
rootRef.current = createRoot(mountNode);
|
|
||||||
}
|
|
||||||
|
|
||||||
const apiBaseUrl = import.meta.env.VITE_BASE_API_URL.replace(/\/+$/, '');
|
|
||||||
const runtime: UserManagementRuntimeOptions = {
|
|
||||||
basename: '/um',
|
|
||||||
apiBaseUrl,
|
|
||||||
apiUrl: `${apiBaseUrl}/api`,
|
|
||||||
recordApiUrl: `${apiBaseUrl}/api`,
|
|
||||||
chronicleUrl: `${apiBaseUrl}/api`,
|
|
||||||
auditApiUrl: `${apiBaseUrl}/api`,
|
|
||||||
};
|
|
||||||
|
|
||||||
rootRef.current.render(
|
|
||||||
<UserManagementApp
|
|
||||||
config={iamConfig}
|
|
||||||
runtime={runtime}
|
|
||||||
session={{
|
|
||||||
initialSession: readInitialSession(),
|
|
||||||
enableEmbeddedAuthBridge: false,
|
|
||||||
}}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
unmountTimerRef.current = window.setTimeout(() => {
|
|
||||||
rootRef.current?.unmount();
|
|
||||||
rootRef.current = null;
|
|
||||||
unmountTimerRef.current = null;
|
|
||||||
}, 0);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return <div ref={mountRef} style={{ position: 'fixed', inset: 0 }} />;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,825 +0,0 @@
|
|||||||
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;
|
|
||||||
assignOrganizationAdmin: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
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: "",
|
|
||||||
assignOrganizationAdmin: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
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 mergeEmployeesByUser = (employees: EmployeeRecord[]) => {
|
|
||||||
const employeesByUserId = new Map<string, EmployeeRecord>();
|
|
||||||
|
|
||||||
for (const employee of employees) {
|
|
||||||
const userId = employee.user?.id;
|
|
||||||
|
|
||||||
if (!userId) {
|
|
||||||
employeesByUserId.set(employee.id, employee);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const existing = employeesByUserId.get(userId);
|
|
||||||
|
|
||||||
if (!existing) {
|
|
||||||
employeesByUserId.set(userId, employee);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const existingPositions = existing.employeePositions ?? [];
|
|
||||||
const nextPositions = employee.employeePositions ?? [];
|
|
||||||
const mergedPositions = Array.from(
|
|
||||||
new Map(
|
|
||||||
[...existingPositions, ...nextPositions].map((position) => [position.id, position]),
|
|
||||||
).values(),
|
|
||||||
);
|
|
||||||
|
|
||||||
employeesByUserId.set(userId, {
|
|
||||||
...existing,
|
|
||||||
...employee,
|
|
||||||
id: existing.id,
|
|
||||||
name: existing.name ?? employee.name,
|
|
||||||
status: existing.status ?? employee.status,
|
|
||||||
user: existing.user ?? employee.user,
|
|
||||||
employeePositions: mergedPositions,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return [...employeesByUserId.values()];
|
|
||||||
};
|
|
||||||
|
|
||||||
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>>(
|
|
||||||
`/backoffice/organizations/${organizationId}/employees`,
|
|
||||||
);
|
|
||||||
setOrgEmployees(mergeEmployeesByUser(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(),
|
|
||||||
},
|
|
||||||
assignOrganizationAdmin: createUserForm.assignOrganizationAdmin,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const shouldAssignOrganizationAdmin = createUserForm.assignOrganizationAdmin;
|
|
||||||
setCreateUserForm(emptyUserForm);
|
|
||||||
setIsCreateUserOpen(false);
|
|
||||||
setActionSuccess(
|
|
||||||
shouldAssignOrganizationAdmin
|
|
||||||
? "User created as organization admin. Default password: 12345678."
|
|
||||||
: "User created. Default password: 12345678.",
|
|
||||||
);
|
|
||||||
await loadOrgEmployees(selectedOrgId);
|
|
||||||
|
|
||||||
if (!shouldAssignOrganizationAdmin) {
|
|
||||||
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 (
|
|
||||||
<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>
|
|
||||||
<label className="flex items-start gap-3 rounded-2xl border border-border bg-background px-4 py-3 text-sm">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={createUserForm.assignOrganizationAdmin}
|
|
||||||
onChange={(event) =>
|
|
||||||
setCreateUserForm((current) => ({
|
|
||||||
...current,
|
|
||||||
assignOrganizationAdmin: event.target.checked,
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<div className="font-medium text-foreground">Create as organization admin</div>
|
|
||||||
<div className="text-xs text-muted-foreground">
|
|
||||||
Also assigns built-in org admin access and the freight org manager role.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UsersPage;
|
|
||||||
@@ -1,207 +0,0 @@
|
|||||||
import type { DesignConfig } from "@tria-plc/iamui";
|
|
||||||
|
|
||||||
import {
|
|
||||||
FREIGHT_BRAND,
|
|
||||||
FREIGHT_BRAND_LIGHT,
|
|
||||||
freightBrand,
|
|
||||||
} from "@/theme/freight-brand";
|
|
||||||
|
|
||||||
export const iamConfig: DesignConfig = {
|
|
||||||
brand: {
|
|
||||||
appName: "EDR Freight Backoffice",
|
|
||||||
logoUrl: "/assets/logo.svg",
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
primary: FREIGHT_BRAND,
|
|
||||||
primaryForeground: "#ffffff",
|
|
||||||
secondary: "#f4f7fb",
|
|
||||||
background: "#f7f9fb",
|
|
||||||
foreground: "#0f172a",
|
|
||||||
border: "#eef1f4",
|
|
||||||
muted: "#f1f5f9",
|
|
||||||
mutedForeground: "#64748b",
|
|
||||||
card: "#ffffff",
|
|
||||||
sidebar: "#ffffff",
|
|
||||||
danger: "#ef4444",
|
|
||||||
},
|
|
||||||
typography: {
|
|
||||||
fontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
|
|
||||||
headingFontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
|
|
||||||
baseFontSize: "15px",
|
|
||||||
fontWeight: "500",
|
|
||||||
},
|
|
||||||
shape: {
|
|
||||||
radius: "1rem",
|
|
||||||
},
|
|
||||||
shadows: {
|
|
||||||
card: "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
|
|
||||||
dropdown: "0 12px 30px rgba(15, 23, 42, 0.12)",
|
|
||||||
modal: "0 20px 45px rgba(15, 23, 42, 0.2)",
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
buttonDefaultVariant: "filled",
|
|
||||||
inputDefaultSize: "sm",
|
|
||||||
inputRadius: "md",
|
|
||||||
modalRadius: "lg",
|
|
||||||
tableHighlightOnHover: true,
|
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
userManagementView: "classic",
|
|
||||||
showTopBar: true as any,
|
|
||||||
sidebarWidth: "280px",
|
|
||||||
sidebarCollapsedWidth: "80px",
|
|
||||||
headerHeight: "80px",
|
|
||||||
contentMaxWidth: "none",
|
|
||||||
sidebarBackground: "#ffffff",
|
|
||||||
sidebarColor: "#475569",
|
|
||||||
sidebarMutedColor: "#94a3b8",
|
|
||||||
sidebarActiveBackground:
|
|
||||||
"linear-gradient(135deg, rgba(45, 191, 149, 0.14) 0%, rgba(27, 158, 122, 0.06) 100%)",
|
|
||||||
sidebarActiveColor: FREIGHT_BRAND,
|
|
||||||
sidebarHoverBackground: "#f5f7fa",
|
|
||||||
sidebarBorder: "#eef1f4",
|
|
||||||
sidebarRail: `linear-gradient(180deg, ${FREIGHT_BRAND_LIGHT} 0%, ${FREIGHT_BRAND} 100%)`,
|
|
||||||
sidebarBrandLabel: "EDR Freight",
|
|
||||||
sidebarBrandSublabel: "Backoffice Console",
|
|
||||||
menuBackground: "#ffffff",
|
|
||||||
menuActiveColor: FREIGHT_BRAND,
|
|
||||||
menuActiveBorderColor: FREIGHT_BRAND,
|
|
||||||
menuColor: "#64748b",
|
|
||||||
menuHoverColor: "#0f172a",
|
|
||||||
modalAccentColor: `linear-gradient(135deg, ${FREIGHT_BRAND_LIGHT} 0%, ${FREIGHT_BRAND} 100%)`,
|
|
||||||
modalHeaderBackground: "#ffffff",
|
|
||||||
modalHeaderEditBackground: "#ffffff",
|
|
||||||
modalIconBackground: freightBrand.mutedBg,
|
|
||||||
modalIconColor: FREIGHT_BRAND,
|
|
||||||
modalTitleColor: "#0f172a",
|
|
||||||
modalFocusColor: FREIGHT_BRAND,
|
|
||||||
modalSurface: "#ffffff",
|
|
||||||
},
|
|
||||||
appearance: {
|
|
||||||
colorScheme: "light",
|
|
||||||
slots: {
|
|
||||||
root: {
|
|
||||||
styles: {
|
|
||||||
background: "#f7f9fb",
|
|
||||||
color: "#0f172a",
|
|
||||||
fontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
shell: {
|
|
||||||
styles: {
|
|
||||||
background: "#f7f9fb",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
styles: {
|
|
||||||
background: "#f7f9fb",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
page: {
|
|
||||||
styles: {
|
|
||||||
background: "#ffffff",
|
|
||||||
border: "1px solid #eef1f4",
|
|
||||||
borderRadius: "24px",
|
|
||||||
boxShadow:
|
|
||||||
"0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
card: {
|
|
||||||
styles: {
|
|
||||||
background: "#ffffff",
|
|
||||||
border: "1px solid #eef1f4",
|
|
||||||
borderRadius: "20px",
|
|
||||||
boxShadow:
|
|
||||||
"0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
sidebar: {
|
|
||||||
styles: {
|
|
||||||
background: "#ffffff",
|
|
||||||
border: "1px solid #eef1f4",
|
|
||||||
borderRadius: "16px",
|
|
||||||
boxShadow:
|
|
||||||
"0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"sidebar-brand": {
|
|
||||||
styles: {
|
|
||||||
minHeight: "80px",
|
|
||||||
borderBottom: "1px solid #f1f5f9",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topbar: {
|
|
||||||
styles: {
|
|
||||||
background: "#ffffff",
|
|
||||||
border: "1px solid #eef1f4",
|
|
||||||
borderRadius: "16px",
|
|
||||||
boxShadow:
|
|
||||||
"0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"topbar-panel": {
|
|
||||||
styles: {
|
|
||||||
background: "#f7f9fb",
|
|
||||||
border: "1px solid #eef1f4",
|
|
||||||
borderRadius: "12px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"topbar-user-summary": {
|
|
||||||
styles: {
|
|
||||||
borderRadius: "14px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
table: {
|
|
||||||
styles: {
|
|
||||||
background: "#ffffff",
|
|
||||||
border: "1px solid #eef1f4",
|
|
||||||
borderRadius: "20px",
|
|
||||||
overflow: "hidden",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"table-header": {
|
|
||||||
styles: {
|
|
||||||
background: "#f8fafc",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
modal: {
|
|
||||||
styles: {
|
|
||||||
borderRadius: "24px",
|
|
||||||
overflow: "hidden",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"modal-header": {
|
|
||||||
styles: {
|
|
||||||
background: "#ffffff",
|
|
||||||
borderBottom: "1px solid #eef1f4",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
customCss: `
|
|
||||||
[data-um-app="user-management"] {
|
|
||||||
--um-page-gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-um-app="user-management"] h1,
|
|
||||||
[data-um-app="user-management"] h2,
|
|
||||||
[data-um-app="user-management"] h3,
|
|
||||||
[data-um-app="user-management"] h4,
|
|
||||||
[data-um-app="user-management"] h5,
|
|
||||||
[data-um-app="user-management"] h6 {
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
color: #0f172a;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-um-app="user-management"] [data-um-slot="sidebar-item"][aria-current="page"] {
|
|
||||||
box-shadow: inset 3px 0 0 ${FREIGHT_BRAND};
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-um-app="user-management"] button,
|
|
||||||
[data-um-app="user-management"] input,
|
|
||||||
[data-um-app="user-management"] select,
|
|
||||||
[data-um-app="user-management"] textarea {
|
|
||||||
font-family: 'Outfit', var(--font-sans), system-ui, sans-serif;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -6,20 +6,15 @@ import { isSuperAdmin } from "@/lib/permissions";
|
|||||||
import { WithPermission } from "@/shared/hooks/useHas";
|
import { WithPermission } from "@/shared/hooks/useHas";
|
||||||
import PendingExternalUsers from "@/super-admin/components/externalUsers/PendingExternalUsers";
|
import PendingExternalUsers from "@/super-admin/components/externalUsers/PendingExternalUsers";
|
||||||
import TemplatePage from "@/super-admin/components/templates/components/templates";
|
import TemplatePage from "@/super-admin/components/templates/components/templates";
|
||||||
import UserManagementPage from "@/pages/dashboard/user-management/UserManagementPage";
|
|
||||||
|
|
||||||
import CreatePositionPage from "./pages/position-management/create";
|
import CreatePositionPage from "./pages/position-management/create";
|
||||||
import EditPositionPage from "./pages/position-management/edit";
|
import EditPositionPage from "./pages/position-management/edit";
|
||||||
import PositionManagementPage from "./pages/position-management";
|
import PositionManagementPage from "./pages/position-management";
|
||||||
import MigratedDataManagementPage from "./pages/position-management/MigratedDataManagementPage";
|
import MigratedDataManagementPage from "./pages/position-management/MigratedDataManagementPage";
|
||||||
import UserPositionApprovalPage from "./pages/UserPositionApprovalPage";
|
import UserPositionApprovalPage from "./pages/UserPositionApprovalPage";
|
||||||
import ViewMigratedDataPage from "./components/MigratedRecords/ViewMigratedDataPage";
|
import ViewMigratedDataPage from "./components/MigratedRecords/ViewMigratedDataPage";
|
||||||
import ContentManagement from "./components/content/ContentManagement";
|
|
||||||
import { BulkUserUpload } from "./bulkUpload/bulkUpload";
|
|
||||||
import AllRecordsPage from "./all-records/pages/AllRecordsPage";
|
import AllRecordsPage from "./all-records/pages/AllRecordsPage";
|
||||||
import AllRecordDetailsPage from "./all-records/pages/AllRecordDetailsPage";
|
import AllRecordDetailsPage from "./all-records/pages/AllRecordDetailsPage";
|
||||||
import Branding from "./web-Management/Branding/Branding";
|
import Branding from "./web-Management/Branding/Branding";
|
||||||
import { WebManagementHomePage } from "./web-Management/webManagement";
|
|
||||||
import { AppLayout } from "./Applayout";
|
import { AppLayout } from "./Applayout";
|
||||||
import ActivityLogPage from "@/pages/ActivityLogPage";
|
import ActivityLogPage from "@/pages/ActivityLogPage";
|
||||||
import AdminRegistrationPage from "@/pages/Organizations/AdminRegistrationPage";
|
import AdminRegistrationPage from "@/pages/Organizations/AdminRegistrationPage";
|
||||||
@@ -46,6 +41,7 @@ import ConfigurationPage from "@/pages/ConfigurationPage";
|
|||||||
import { SidebarProvider } from "@/shared/common/ui/sidebar";
|
import { SidebarProvider } from "@/shared/common/ui/sidebar";
|
||||||
import { AuthProvider as UmAuthProvider } from "@/shared/context/AuthContext";
|
import { AuthProvider as UmAuthProvider } from "@/shared/context/AuthContext";
|
||||||
import { PermissionProvider } from "@/shared/context/PermissionContext";
|
import { PermissionProvider } from "@/shared/context/PermissionContext";
|
||||||
|
import UserManagementPage from "@/pages/UserManagementPage";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Provider shell for the vendored IAM UI. Feeds its Auth + Permission contexts
|
* Provider shell for the vendored IAM UI. Feeds its Auth + Permission contexts
|
||||||
|
|||||||
Reference in New Issue
Block a user